{"id":7124,"date":"2026-03-27T00:00:26","date_gmt":"2026-03-27T00:00:26","guid":{"rendered":"https:\/\/raistheme.com\/?page_id=7124"},"modified":"2026-04-06T11:46:24","modified_gmt":"2026-04-06T11:46:24","slug":"undertale","status":"publish","type":"page","link":"https:\/\/raistheme.com\/tools\/font-generator\/undertale\/","title":{"rendered":"Undertale Font Generator \u2013 Create Stylish Text for Free"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"7124\" class=\"elementor elementor-7124\">\n\t\t\t\t<div class=\"elementor-element elementor-element-54483c3c e-con-full e-flex e-con e-parent\" data-id=\"54483c3c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c57e2ed elementor-widget elementor-widget-shortcode\" data-id=\"c57e2ed\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><div id=\"undertale-font-generator\">\r\n    <style>\r\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Press+Start+2P&family=VT323&family=Orbitron:wght@400;700;900&display=swap');\r\n        \r\n        :root {\r\n            \/* PRIMARY BRAND COLORS *\/\r\n            --determination-red: #8B0000; \/* Dark red instead of bright red *\/\r\n            --pixel-white: #FFFFFF;\r\n            --void-black: #0a0a0a; \/* Darker, richer black *\/\r\n            \r\n            \/* SECONDARY COLORS *\/\r\n            --soul-orange: #FF8C00;\r\n            --monster-purple: #4B0082;\r\n            --cyan-soul-glow: #00CCCC; \/* Changed from pure cyan to a teal *\/\r\n            \r\n            \/* NEUTRALS *\/\r\n            --underground-gray: #2a2a2a; \/* Darker gray for more contrast *\/\r\n            --pixel-shadow-gray: #1a1a1a; \/* Darker shadow *\/\r\n            --bone-white: #F5F5F5;\r\n            \r\n            \/* EFFECT COLORS *\/\r\n            --crt-glow-green: #00FF41;\r\n            --determination-glow: linear-gradient(45deg, #8B0000, #FF8C00, #FFFF00);\r\n            \r\n            \/* ENHANCED GLOW EFFECTS *\/\r\n            --glow-intensity: 0.8;\r\n            --glow-size: 20px;\r\n            \r\n            \/* TYPOGRAPHY *\/\r\n            --h1-size: clamp(1.6rem, 4vw, 3.2rem);\r\n            --h2-size: clamp(1.3rem, 3vw, 2.2rem);\r\n            --body-size: clamp(0.9rem, 1vw, 1.2rem);\r\n            --small-size: clamp(0.75rem, 1vw, 0.95rem);\r\n            \r\n            \/* SPACING *\/\r\n            --spacing-xs: 2px;\r\n            --spacing-sm: 4px;\r\n            --spacing-md: 8px;\r\n            --spacing-lg: 12px;\r\n            --spacing-xl: 16px;\r\n            --padding: clamp(0.25rem, 1.5vw, 0.75rem);\r\n            --gap: clamp(0.25rem, 1.5vw, 0.75rem);\r\n            --margin-block: clamp(0.25rem, 1.5vw, 0.75rem);\r\n        }\r\n        \r\n        #undertale-font-generator {\r\n            font-family: 'VT323', monospace;\r\n            background-color: var(--void-black);\r\n            color: var(--pixel-white);\r\n            width: 100%;\r\n            min-height: 100vh;\r\n            padding: var(--spacing-lg) 0;\r\n            position: relative;\r\n            overflow-x: hidden;\r\n            box-sizing: border-box;\r\n            background-image: \r\n                radial-gradient(circle at 20% 50%, rgba(139, 0, 0, 0.1) 0%, transparent 50%),\r\n                radial-gradient(circle at 80% 80%, rgba(0, 204, 204, 0.1) 0%, transparent 50%),\r\n                radial-gradient(circle at 40% 20%, rgba(255, 140, 0, 0.1) 0%, transparent 50%);\r\n        }\r\n        \r\n        \/* Enhanced retro scanline effect *\/\r\n        #undertale-font-generator::before {\r\n            content: \"\";\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: repeating-linear-gradient(\r\n                0deg,\r\n                rgba(0, 0, 0, 0.2),\r\n                rgba(0, 0, 0, 0.2) 1px,\r\n                transparent 1px,\r\n                transparent 2px\r\n            );\r\n            pointer-events: none;\r\n            z-index: 1;\r\n        }\r\n        \r\n        \/* Enhanced CRT effect *\/\r\n        #undertale-font-generator::after {\r\n            content: \"\";\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: repeating-linear-gradient(\r\n                90deg,\r\n                rgba(0, 255, 65, 0.03),\r\n                rgba(0, 255, 65, 0.03) 1px,\r\n                transparent 1px,\r\n                transparent 3px\r\n            );\r\n            pointer-events: none;\r\n            z-index: 1;\r\n        }\r\n        \r\n        .container {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n            padding: 0 var(--spacing-lg);\r\n            position: relative;\r\n            z-index: 2;\r\n            box-sizing: border-box;\r\n\t\t\t\t\t  padding-top:0 !important;\r\n\t\t\t\t\t  width:100%;\r\n        }\r\n        \r\n        .header {\r\n            text-align: center;\r\n            margin-bottom: var(--margin-block);\r\n        }\r\n        \r\n        h1 {\r\n            font-family: 'Press Start 2P', cursive;\r\n            font-size: var(--h1-size);\r\n            font-weight: 700;\r\n            color: var(--pixel-white);\r\n            text-shadow: 0 0 15px var(--determination-red), 0 0 25px rgba(139, 0, 0, 0.5);\r\n            margin: var(--margin-block) 0;\r\n            padding: var(--padding) 0;\r\n            letter-spacing: 2px;\r\n            line-height: 1.2;\r\n            animation: pulse-glow 3s infinite alternate;\r\n        }\r\n        \r\n        @keyframes pulse-glow {\r\n            0% {\r\n                text-shadow: 0 0 15px var(--determination-red), 0 0 25px rgba(139, 0, 0, 0.5);\r\n            }\r\n            100% {\r\n                text-shadow: 0 0 20px var(--determination-red), 0 0 35px rgba(139, 0, 0, 0.7);\r\n            }\r\n        }\r\n        \r\n        .subheading {\r\n            font-size: var(--body-size);\r\n            color: var(--monster-purple);\r\n            margin-bottom: var(--margin-block);\r\n            max-width: 800px;\r\n            margin-left: auto;\r\n            margin-right: auto;\r\n            text-shadow: 0 0 10px rgba(75, 0, 130, 0.7);\r\n            line-height: 1.4;\r\n        }\r\n        \r\n        .generator-section {\r\n            background-color: var(--underground-gray);\r\n            border: 2px solid var(--pixel-shadow-gray);\r\n            border-radius: 8px;\r\n            padding: var(--padding);\r\n            box-shadow: 0 0 20px rgba(0, 204, 204, 0.4);\r\n            margin-bottom: var(--margin-block);\r\n            position: relative;\r\n            box-sizing: border-box;\r\n            \/* Changed min-height to auto for better flexibility *\/\r\n            min-height: auto;\r\n            overflow-y: auto;\r\n            overflow-x: hidden;\r\n            max-width: 1200px;\r\n            margin-left: auto;\r\n            margin-right: auto;\r\n        }\r\n        \r\n        .generator-section::-webkit-scrollbar {\r\n            display: none;\r\n        }\r\n        \r\n        .generator-section {\r\n            -ms-overflow-style: none;\r\n            scrollbar-width: none;\r\n        }\r\n        \r\n        \/* Enhanced glow effect *\/\r\n        .generator-section::before {\r\n            content: \"\";\r\n            position: absolute;\r\n            top: -2px;\r\n            left: -2px;\r\n            right: -2px;\r\n            bottom: -2px;\r\n            background: var(--cyan-soul-glow);\r\n            z-index: -1;\r\n            filter: blur(8px);\r\n            opacity: 0.6;\r\n            border-radius: 8px;\r\n            animation: glow-pulse 4s infinite alternate;\r\n        }\r\n        \r\n        @keyframes glow-pulse {\r\n            0% {\r\n                opacity: 0.6;\r\n                filter: blur(8px);\r\n            }\r\n            100% {\r\n                opacity: 0.8;\r\n                filter: blur(12px);\r\n            }\r\n        }\r\n        \r\n        .input-group {\r\n            margin-bottom: var(--margin-block);\r\n        }\r\n        \r\n        label {\r\n            display: block;\r\n            margin-bottom: var(--spacing-sm);\r\n            font-weight: 500;\r\n            color: var(--bone-white);\r\n            font-size: var(--small-size);\r\n            text-transform: uppercase;\r\n            letter-spacing: 1px;\r\n        }\r\n        \r\n        input[type=\"text\"], select {\r\n            width: 100%;\r\n            padding: var(--padding);\r\n            background-color: var(--void-black);\r\n            border: 2px solid var(--pixel-shadow-gray);\r\n            border-radius: 4px;\r\n            font-family: 'VT323', monospace;\r\n            font-size: var(--body-size);\r\n            color: var(--pixel-white);\r\n            transition: border-color 0.3s, box-shadow 0.3s;\r\n            box-sizing: border-box;\r\n        }\r\n        \r\n        input[type=\"text\"]:focus, select:focus {\r\n            border-color: var(--cyan-soul-glow);\r\n            outline: none;\r\n            box-shadow: 0 0 15px var(--cyan-soul-glow);\r\n        }\r\n        \r\n        .attributes-row {\r\n            display: flex;\r\n            gap: var(--gap);\r\n            margin-bottom: var(--margin-block);\r\n            flex-wrap: wrap;\r\n        }\r\n        \r\n        .attribute-group {\r\n            flex: 1;\r\n            min-width: 200px;\r\n        }\r\n        \r\n        .generate-btn {\r\n            background-color: var(--determination-red);\r\n            color: var(--pixel-white);\r\n            border: none;\r\n            padding: var(--padding) calc(var(--padding) * 2);\r\n            font-family: 'Press Start 2P', cursive;\r\n            font-size: var(--small-size);\r\n            font-weight: 600;\r\n            border-radius: 4px;\r\n            cursor: pointer;\r\n            transition: transform 0.2s, box-shadow 0.2s;\r\n            display: block;\r\n            margin: 0 auto;\r\n            text-transform: uppercase;\r\n            letter-spacing: 1px;\r\n            box-shadow: 0 0 15px rgba(139, 0, 0, 0.6);\r\n        }\r\n        \r\n        .generate-btn:hover {\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 0 20px rgba(139, 0, 0, 0.9);\r\n            background: var(--determination-glow);\r\n        }\r\n        \r\n        .results-container {\r\n            margin-top: var(--margin-block);\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\r\n            gap: var(--gap);\r\n            max-width: 1200px;\r\n            margin-left: auto;\r\n            margin-right: auto;\r\n            padding: 0 var(--spacing-lg);\r\n            box-sizing: border-box;\r\n        }\r\n        \r\n        @media (max-width: 768px) {\r\n            .results-container {\r\n                grid-template-columns: 1fr;\r\n            }\r\n        }\r\n        \r\n        .result-card {\r\n            background-color: var(--underground-gray);\r\n            border: 2px solid var(--pixel-shadow-gray);\r\n            border-radius: 8px;\r\n            padding: var(--padding);\r\n            box-shadow: 0 0 15px rgba(0, 204, 204, 0.3);\r\n            transition: transform 0.3s, box-shadow 0.3s;\r\n            position: relative;\r\n            box-sizing: border-box;\r\n        }\r\n        \r\n        .result-card:hover {\r\n            transform: translateY(-5px);\r\n            box-shadow: 0 0 20px rgba(0, 204, 204, 0.6);\r\n            border-color: var(--cyan-soul-glow);\r\n        }\r\n        \r\n        .result-text {\r\n            font-family: 'VT323', monospace;\r\n            margin-bottom: var(--margin-block);\r\n            font-size: var(--body-size);\r\n            line-height: 1.4;\r\n            min-height: 60px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            word-break: break-all;\r\n            color: var(--pixel-white);\r\n        }\r\n        \r\n        .copy-btn {\r\n            background-color: var(--monster-purple);\r\n            color: var(--pixel-white);\r\n            border: none;\r\n            padding: var(--spacing-sm) var(--padding);\r\n            border-radius: 4px;\r\n            cursor: pointer;\r\n            font-family: 'VT323', monospace;\r\n            font-size: var(--small-size);\r\n            transition: background-color 0.3s, transform 0.2s;\r\n            text-transform: uppercase;\r\n            letter-spacing: 1px;\r\n        }\r\n        \r\n        .copy-btn:hover {\r\n            background-color: var(--soul-orange);\r\n            transform: scale(1.05);\r\n            box-shadow: 0 0 10px var(--soul-orange);\r\n        }\r\n        \r\n        .copy-btn.copied {\r\n            background-color: var(--crt-glow-green);\r\n            color: var(--void-black);\r\n            box-shadow: 0 0 10px var(--crt-glow-green);\r\n        }\r\n        \r\n        .load-more-btn {\r\n            background-color: var(--soul-orange);\r\n            color: var(--pixel-white);\r\n            border: none;\r\n            padding: var(--padding) calc(var(--padding) * 2);\r\n            font-family: 'Press Start 2P', cursive;\r\n            font-size: var(--small-size);\r\n            font-weight: 600;\r\n            border-radius: 4px;\r\n            cursor: pointer;\r\n            transition: transform 0.2s, box-shadow 0.2s;\r\n            display: block;\r\n            margin: var(--margin-block) auto;\r\n            text-transform: uppercase;\r\n            letter-spacing: 1px;\r\n            box-shadow: 0 0 15px rgba(255, 140, 0, 0.6);\r\n        }\r\n        \r\n        .load-more-btn:hover {\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 0 20px rgba(255, 140, 0, 0.9);\r\n        }\r\n        \r\n        .content-section {\r\n            background-color: var(--underground-gray);\r\n            border: 2px solid var(--pixel-shadow-gray);\r\n            border-radius: 8px;\r\n            padding: var(--padding);\r\n            box-shadow: 0 0 20px rgba(0, 204, 204, 0.4);\r\n            margin-bottom: var(--margin-block);\r\n            position: relative;\r\n            max-width: 1200px;\r\n            margin-left: auto;\r\n            margin-right: auto;\r\n            box-sizing: border-box;\r\n        }\r\n        \r\n        \/* Enhanced glow effect *\/\r\n        .content-section::before {\r\n            content: \"\";\r\n            position: absolute;\r\n            top: -2px;\r\n            left: -2px;\r\n            right: -2px;\r\n            bottom: -2px;\r\n            background: var(--cyan-soul-glow);\r\n            z-index: -1;\r\n            filter: blur(8px);\r\n            opacity: 0.4;\r\n            border-radius: 8px;\r\n            animation: glow-pulse 4s infinite alternate;\r\n        }\r\n        \r\n        .content-section h2 {\r\n            font-family: 'Press Start 2P', cursive;\r\n            color: var(--pixel-white);\r\n            margin-bottom: var(--margin-block);\r\n            font-size: var(--h2-size);\r\n            text-shadow: 0 0 10px var(--determination-red);\r\n            line-height: 1.2;\r\n        }\r\n        \r\n        .content-section p, .content-section li {\r\n            font-size: var(--body-size);\r\n            line-height: 1.4;\r\n            margin-bottom: var(--margin-block);\r\n            color: var(--bone-white);\r\n        }\r\n        \r\n        .content-section ul {\r\n            padding-left: var(--spacing-xl);\r\n        }\r\n        \r\n        .faq-item {\r\n            margin-bottom: var(--margin-block);\r\n            border-bottom: 1px solid var(--pixel-shadow-gray);\r\n            padding-bottom: var(--padding);\r\n        }\r\n        \r\n        .faq-question {\r\n            font-weight: 600;\r\n            margin-bottom: var(--spacing-sm);\r\n            cursor: pointer;\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            font-size: var(--body-size);\r\n            color: var(--soul-orange);\r\n        }\r\n        \r\n        .faq-answer {\r\n            display: none;\r\n            color: var(--bone-white);\r\n            font-size: var(--body-size);\r\n        }\r\n        \r\n        .faq-item.active .faq-answer {\r\n            display: block;\r\n        }\r\n        \r\n        .faq-icon {\r\n            transition: transform 0.3s;\r\n        }\r\n        \r\n        .faq-item.active .faq-icon {\r\n            transform: rotate(180deg);\r\n        }\r\n        \r\n        .example-card {\r\n            background-color: var(--void-black);\r\n            border: 2px solid var(--pixel-shadow-gray);\r\n            border-radius: 8px;\r\n            padding: var(--padding);\r\n            margin-bottom: var(--margin-block);\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: space-between;\r\n            box-shadow: 0 0 10px rgba(0, 204, 204, 0.2);\r\n        }\r\n        \r\n        .example-text {\r\n            font-family: 'VT323', monospace;\r\n            font-size: var(--body-size);\r\n            color: var(--pixel-white);\r\n        }\r\n        \r\n        .example-label {\r\n            font-weight: 600;\r\n            color: var(--monster-purple);\r\n            margin-right: var(--spacing-lg);\r\n            font-size: var(--small-size);\r\n        }\r\n        \r\n        \/* Mobile responsive tabs for features *\/\r\n        .features-tabs {\r\n            display: flex; \/* Changed from none to flex to enable desktop view *\/\r\n        }\r\n        \r\n        .tab-content {\r\n            display: block; \/* Show tab content by default *\/\r\n        }\r\n        \r\n        @media (max-width: 768px) {\r\n            .attributes-row {\r\n                flex-direction: column;\r\n            }\r\n            \r\n            \/* FIX: Hide the tab buttons and show all tab content vertically *\/\r\n            .features-tabs {\r\n                display: none; \r\n            }\r\n            \r\n            .tab-content {\r\n                display: block;\r\n            }\r\n        }\r\n    <\/style>\r\n    \r\n    <div class=\"container\">\r\n        <header class=\"header\">\r\n            <h1>Undertale Font Generator \u2013 Create Stylish Text for Free<\/h1>\r\n            <p class=\"subheading\">Create unique Undertale-inspired text styles with our easy-to-use font generator. Perfect for fans, content creators, and designers looking to add a touch of Underground to their projects.<\/p>\r\n        <\/header>\r\n        \r\n        <section class=\"generator-section\">\r\n            <div class=\"input-group\">\r\n                <label for=\"text-input\">Enter your text<\/label>\r\n                <input type=\"text\" id=\"text-input\" placeholder=\"Enter keyword or concept\" aria-label=\"Enter text to generate Undertale font style\">\r\n            <\/div>\r\n            \r\n            <div class=\"features-tabs\">\r\n                <button class=\"tab-btn active\" data-tab=\"style\">Style<\/button>\r\n                <button class=\"tab-btn\" data-tab=\"character\">Character<\/button>\r\n            <\/div>\r\n            \r\n            <div id=\"desktop-attributes\" class=\"attributes-row\">\r\n                 <div class=\"attribute-group\">\r\n                    <label for=\"tone-select\">Style Category<\/label>\r\n                    <select id=\"tone-select\" aria-label=\"Select style category for font generation\">\r\n                        <option value=\"all\">All Styles<\/option>\r\n                        <option value=\"pixel\">Pixel & Retro<\/option>\r\n                        <option value=\"glitch\">Glitch & Noise<\/option>\r\n                        <option value=\"spooky\">Spooky & Monster<\/option>\r\n                        <option value=\"ui\">Box & UI<\/option>\r\n                        <option value=\"emotion\">Emotion & Soul<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n                 <div class=\"attribute-group\">\r\n                    <label for=\"format-select\">Character Theme<\/label>\r\n                    <select id=\"format-select\" aria-label=\"Select character theme for font generation\">\r\n                        <option value=\"random\">Random<\/option>\r\n                        <option value=\"sans\">Sans<\/option>\r\n                        <option value=\"papyrus\">Papyrus<\/option>\r\n                        <option value=\"toriel\">Toriel<\/option>\r\n                        <option value=\"undyne\">Undyne<\/option>\r\n                        <option value=\"alphys\">Alphys<\/option>\r\n                        <option value=\"mettaton\">Mettaton<\/option>\r\n                        <option value=\"asgore\">Asgore<\/option>\r\n                        <option value=\"flowey\">Flowey<\/option>\r\n                        <option value=\"chara\">Chara<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"tab-content\" id=\"style-tab\">\r\n                <div class=\"attributes-row\">\r\n                    <!-- This content is now handled by the combined desktop-attributes div -->\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"tab-content\" id=\"character-tab\">\r\n                <div class=\"attributes-row\">\r\n                     <!-- This content is now handled by the combined desktop-attributes div -->\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <button class=\"generate-btn\" id=\"generate-btn\" aria-label=\"Generate Undertale font style\">Generate<\/button>\r\n        <\/section>\r\n        \r\n        <div class=\"results-container\" id=\"results-container\">\r\n            <!-- Dummy results will be populated here -->\r\n        <\/div>\r\n        \r\n        <button class=\"load-more-btn\" id=\"load-more-btn\" aria-label=\"Load more results\">Load More<\/button>\r\n\r\n    <\/div>\r\n    \r\n    <script>\r\n        \/\/ Undertale font generator script\r\n        document.addEventListener('DOMContentLoaded', function() {\r\n            const generateBtn = document.getElementById('generate-btn');\r\n            const textInput = document.getElementById('text-input');\r\n            const toneSelect = document.getElementById('tone-select');\r\n            const formatSelect = document.getElementById('format-select');\r\n            const resultsContainer = document.getElementById('results-container');\r\n            const loadMoreBtn = document.getElementById('load-more-btn');\r\n            \r\n            \/\/ Tab elements\r\n            const tabBtns = document.querySelectorAll('.tab-btn');\r\n            const tabContents = document.querySelectorAll('.tab-content');\r\n            const desktopAttributes = document.getElementById('desktop-attributes');\r\n            \r\n            \/\/ Text style definitions\r\n            const textStyles = {\r\n                \/\/ Pixel & Retro Styles (1-10)\r\n                pixelSquare: {\r\n                    transform: (text) => text.split('').map(char => `\u258c${char}\u258c`).join(''),\r\n                    category: 'pixel'\r\n                },\r\n                pixelBlock: {\r\n                    transform: (text) => text.split('').map(char => `\u2588${char}\u2588`).join(''),\r\n                    category: 'pixel'\r\n                },\r\n                pixelOutline: {\r\n                    transform: (text) => text.split('').map(char => `\u2591${char}\u2591`).join(''),\r\n                    category: 'pixel'\r\n                },\r\n                dotMatrix: {\r\n                    transform: (text) => text.split('').map(char => {\r\n                        const dotMatrixMap = {\r\n                            'A': '\u281c', 'B': '\u2803', 'C': '\u2809', 'D': '\u2819', 'E': '\u2811', 'F': '\u280b',\r\n                            'G': '\u281b', 'H': '\u2813', 'I': '\u280a', 'J': '\u281a', 'K': '\u2805', 'L': '\u2807',\r\n                            'M': '\u280d', 'N': '\u281d', 'O': '\u2815', 'P': '\u280f', 'Q': '\u281f', 'R': '\u2817',\r\n                            'S': '\u280e', 'T': '\u281e', 'U': '\u2825', 'V': '\u2827', 'W': '\u283a', 'X': '\u282d',\r\n                            'Y': '\u283d', 'Z': '\u2835', ' ': ' '\r\n                        };\r\n                        return dotMatrixMap[char.toUpperCase()] || char;\r\n                    }).join(''),\r\n                    category: 'pixel'\r\n                },\r\n                retroPixelThin: {\r\n                    transform: (text) => text.split('').map(char => `\u25aa${char}\u25aa`).join(''),\r\n                    category: 'pixel'\r\n                },\r\n                pixelGrid: {\r\n                    transform: (text) => text.split('').map(char => `#${char}#`).join(''),\r\n                    category: 'pixel'\r\n                },\r\n                eightBitBars: {\r\n                    transform: (text) => text.split('').map(char => `\u2598${char}\u2598`).join(''),\r\n                    category: 'pixel'\r\n                },\r\n                stereoPixel: {\r\n                    transform: (text) => text.split('').map(char => `\u259a${char}\u259a`).join(''),\r\n                    category: 'pixel'\r\n                },\r\n                retroScreen: {\r\n                    transform: (text) => text.split('').map(char => `\u25a4${char}\u25a4`).join(''),\r\n                    category: 'pixel'\r\n                },\r\n                arcadeThin: {\r\n                    transform: (text) => text.split('').map(char => `\u2573${char}\u2573`).join(''),\r\n                    category: 'pixel'\r\n                },\r\n                \r\n                \/\/ Glitch, Noise & Distorted (11-20)\r\n                brokenGlitch: {\r\n                    transform: (text) => text.split('').map(char => `${char}\u0337`).join(''),\r\n                    category: 'glitch'\r\n                },\r\n                errorText: {\r\n                    transform: (text) => text.split('').map(char => `${char}\u0338`).join(''),\r\n                    category: 'glitch'\r\n                },\r\n                staticNoise: {\r\n                    transform: (text) => text.split('').map(char => `${char}\u035f`).join(''),\r\n                    category: 'glitch'\r\n                },\r\n                corruptThin: {\r\n                    transform: (text) => text.split('').map(char => `${char}\u0362`).join(''),\r\n                    category: 'glitch'\r\n                },\r\n                fragmented: {\r\n                    transform: (text) => text.split('').map(char => `${char}\u035f\u035e`).join(''),\r\n                    category: 'glitch'\r\n                },\r\n                channelShift: {\r\n                    transform: (text) => text.split('').map(char => `${char}\u0338\u035c`).join(''),\r\n                    category: 'glitch'\r\n                },\r\n                noiseDrag: {\r\n                    transform: (text) => text.split('').map(char => `${char}\u0333`).join(''),\r\n                    category: 'glitch'\r\n                },\r\n                wreckedText: {\r\n                    transform: (text) => text.split('').map(char => `${char}\u0360`).join(''),\r\n                    category: 'glitch'\r\n                },\r\n                chaoticSplit: {\r\n                    transform: (text) => text.split('').map(char => `${char}\u0361`).join(''),\r\n                    category: 'glitch'\r\n                },\r\n                overbroken: {\r\n                    transform: (text) => text.split('').map(char => `${char}\u033d\u0353`).join(''),\r\n                    category: 'glitch'\r\n                },\r\n                \r\n                \/\/ Spooky, Soul, Monster Styles (21-30)\r\n                monsterScript: {\r\n                    transform: (text) => {\r\n                        const monsterMap = {\r\n                            'A': '\ud835\udd04', 'B': '\ud835\udd05', 'C': '\u212d', 'D': '\ud835\udd07', 'E': '\ud835\udd08', 'F': '\ud835\udd09',\r\n                            'G': '\ud835\udd0a', 'H': '\u210c', 'I': '\u2111', 'J': '\ud835\udd0d', 'K': '\ud835\udd0e', 'L': '\ud835\udd0f',\r\n                            'M': '\ud835\udd10', 'N': '\ud835\udd11', 'O': '\ud835\udd12', 'P': '\ud835\udd13', 'Q': '\ud835\udd14', 'R': '\u211c',\r\n                            'S': '\ud835\udd16', 'T': '\ud835\udd17', 'U': '\ud835\udd18', 'V': '\ud835\udd19', 'W': '\ud835\udd1a', 'X': '\ud835\udd1b',\r\n                            'Y': '\ud835\udd1c', 'Z': '\u2128', 'a': '\ud835\udd1e', 'b': '\ud835\udd1f', 'c': '\ud835\udd20', 'd': '\ud835\udd21',\r\n                            'e': '\ud835\udd22', 'f': '\ud835\udd23', 'g': '\ud835\udd24', 'h': '\ud835\udd25', 'i': '\ud835\udd26', 'j': '\ud835\udd27',\r\n                            'k': '\ud835\udd28', 'l': '\ud835\udd29', 'm': '\ud835\udd2a', 'n': '\ud835\udd2b', 'o': '\ud835\udd2c', 'p': '\ud835\udd2d',\r\n                            'q': '\ud835\udd2e', 'r': '\ud835\udd2f', 's': '\ud835\udd30', 't': '\ud835\udd31', 'u': '\ud835\udd32', 'v': '\ud835\udd33',\r\n                            'w': '\ud835\udd34', 'x': '\ud835\udd35', 'y': '\ud835\udd36', 'z': '\ud835\udd37', ' ': ' '\r\n                        };\r\n                        return text.split('').map(char => monsterMap[char] || char).join('');\r\n                    },\r\n                    category: 'spooky'\r\n                },\r\n                gothicSharp: {\r\n                    transform: (text) => {\r\n                        const gothicMap = {\r\n                            'A': '\ud835\udd38', 'B': '\ud835\udd39', 'C': '\u2102', 'D': '\ud835\udd3b', 'E': '\ud835\udd3c', 'F': '\ud835\udd3d',\r\n                            'G': '\ud835\udd3e', 'H': '\u210d', 'I': '\ud835\udd40', 'J': '\ud835\udd41', 'K': '\ud835\udd42', 'L': '\ud835\udd43',\r\n                            'M': '\ud835\udd44', 'N': '\u2115', 'O': '\ud835\udd46', 'P': '\u2119', 'Q': '\u211a', 'R': '\u211d',\r\n                            'S': '\ud835\udd4a', 'T': '\ud835\udd4b', 'U': '\ud835\udd4c', 'V': '\ud835\udd4d', 'W': '\ud835\udd4e', 'X': '\ud835\udd4f',\r\n                            'Y': '\ud835\udd50', 'Z': '\u2124', 'a': '\ud835\udd52', 'b': '\ud835\udd53', 'c': '\ud835\udd54', 'd': '\ud835\udd55',\r\n                            'e': '\ud835\udd56', 'f': '\ud835\udd57', 'g': '\ud835\udd58', 'h': '\ud835\udd59', 'i': '\ud835\udd5a', 'j': '\ud835\udd5b',\r\n                            'k': '\ud835\udd5c', 'l': '\ud835\udd5d', 'm': '\ud835\udd5e', 'n': '\ud835\udd5f', 'o': '\ud835\udd60', 'p': '\ud835\udd61',\r\n                            'q': '\ud835\udd62', 'r': '\ud835\udd63', 's': '\ud835\udd64', 't': '\ud835\udd65', 'u': '\ud835\udd66', 'v': '\ud835\udd67',\r\n                            'w': '\ud835\udd68', 'x': '\ud835\udd69', 'y': '\ud835\udd6a', 'z': '\ud835\udd6b', ' ': ' '\r\n                        };\r\n                        return text.split('').map(char => gothicMap[char] || char).join('');\r\n                    },\r\n                    category: 'spooky'\r\n                },\r\n                darkWhisper: {\r\n                    transform: (text) => {\r\n                        const whisperMap = {\r\n                            'A': '\ud835\udc9c', 'B': '\ud835\udc35', 'C': '\ud835\udc9e', 'D': '\ud835\udc9f', 'E': '\ud835\udc38', 'F': '\ud835\udc39',\r\n                            'G': '\ud835\udca2', 'H': '\ud835\udc3b', 'I': '\ud835\udc3c', 'J': '\ud835\udca5', 'K': '\ud835\udca6', 'L': '\ud835\udc3f',\r\n                            'M': '\ud835\udc40', 'N': '\ud835\udca9', 'O': '\ud835\udcaa', 'P': '\ud835\udcab', 'Q': '\ud835\udcac', 'R': '\ud835\udc45',\r\n                            'S': '\ud835\udcae', 'T': '\ud835\udcaf', 'U': '\ud835\udcb0', 'V': '\ud835\udcb1', 'W': '\ud835\udcb2', 'X': '\ud835\udcb3',\r\n                            'Y': '\ud835\udcb4', 'Z': '\ud835\udcb5', 'a': '\ud835\udcb6', 'b': '\ud835\udcb7', 'c': '\ud835\udcb8', 'd': '\ud835\udcb9',\r\n                            'e': '\ud835\udc52', 'f': '\ud835\udcbb', 'g': '\ud835\udc54', 'h': '\ud835\udcbd', 'i': '\ud835\udcbe', 'j': '\ud835\udcbf',\r\n                            'k': '\ud835\udcc0', 'l': '\ud835\udcc1', 'm': '\ud835\udcc2', 'n': '\ud835\udcc3', 'o': '\ud835\udc5c', 'p': '\ud835\udcc5',\r\n                            'q': '\ud835\udcc6', 'r': '\ud835\udcc7', 's': '\ud835\udcc8', 't': '\ud835\udcc9', 'u': '\ud835\udcca', 'v': '\ud835\udccb',\r\n                            'w': '\ud835\udccc', 'x': '\ud835\udccd', 'y': '\ud835\udcce', 'z': '\ud835\udccf', ' ': ' '\r\n                        };\r\n                        return text.split('').map(char => whisperMap[char] || char).join('');\r\n                    },\r\n                    category: 'spooky'\r\n                },\r\n                soulGlyphs: {\r\n                    transform: (text) => text.split('').map(char => `\ud83d\udf01${char}\ud83d\udf01`).join(''),\r\n                    category: 'spooky'\r\n                },\r\n                shadowHollow: {\r\n                    transform: (text) => {\r\n                        const hollowMap = {\r\n                            'A': '\ud835\ude8a', 'B': '\ud835\ude8b', 'C': '\ud835\ude8c', 'D': '\ud835\ude8d', 'E': '\ud835\ude8e', 'F': '\ud835\ude8f',\r\n                            'G': '\ud835\ude90', 'H': '\ud835\ude91', 'I': '\ud835\ude92', 'J': '\ud835\ude93', 'K': '\ud835\ude94', 'L': '\ud835\ude95',\r\n                            'M': '\ud835\ude96', 'N': '\ud835\ude97', 'O': '\ud835\ude98', 'P': '\ud835\ude99', 'Q': '\ud835\ude9a', 'R': '\ud835\ude9b',\r\n                            'S': '\ud835\ude9c', 'T': '\ud835\ude9d', 'U': '\ud835\ude9e', 'V': '\ud835\ude9f', 'W': '\ud835\udea0', 'X': '\ud835\udea1',\r\n                            'Y': '\ud835\udea2', 'Z': '\ud835\udea3', ' ': ' '\r\n                        };\r\n                        return text.split('').map(char => hollowMap[char.toUpperCase()] || char).join('');\r\n                    },\r\n                    category: 'spooky'\r\n                },\r\n                lightSoul: {\r\n                    transform: (text) => text.split('').map(char => `\u2726${char}\u2726`).join(''),\r\n                    category: 'spooky'\r\n                },\r\n                voidLetters: {\r\n                    transform: (text) => text.split('').map(char => `\u2b24${char}\u2b24`).join(''),\r\n                    category: 'spooky'\r\n                },\r\n                monsterBubble: {\r\n                    transform: (text) => text.split('').map(char => `\u0e51${char}\u0e51`).join(''),\r\n                    category: 'spooky'\r\n                },\r\n                darkSerif: {\r\n                    transform: (text) => {\r\n                        const serifMap = {\r\n                            'A': '\ud835\udc00', 'B': '\ud835\udc01', 'C': '\ud835\udc02', 'D': '\ud835\udc03', 'E': '\ud835\udc04', 'F': '\ud835\udc05',\r\n                            'G': '\ud835\udc06', 'H': '\ud835\udc07', 'I': '\ud835\udc08', 'J': '\ud835\udc09', 'K': '\ud835\udc0a', 'L': '\ud835\udc0b',\r\n                            'M': '\ud835\udc0c', 'N': '\ud835\udc0d', 'O': '\ud835\udc0e', 'P': '\ud835\udc0f', 'Q': '\ud835\udc10', 'R': '\ud835\udc11',\r\n                            'S': '\ud835\udc12', 'T': '\ud835\udc13', 'U': '\ud835\udc14', 'V': '\ud835\udc15', 'W': '\ud835\udc16', 'X': '\ud835\udc17',\r\n                            'Y': '\ud835\udc18', 'Z': '\ud835\udc19', 'a': '\ud835\udc1a', 'b': '\ud835\udc1b', 'c': '\ud835\udc1c', 'd': '\ud835\udc1d',\r\n                            'e': '\ud835\udc1e', 'f': '\ud835\udc1f', 'g': '\ud835\udc20', 'h': '\ud835\udc21', 'i': '\ud835\udc22', 'j': '\ud835\udc23',\r\n                            'k': '\ud835\udc24', 'l': '\ud835\udc25', 'm': '\ud835\udc26', 'n': '\ud835\udc27', 'o': '\ud835\udc28', 'p': '\ud835\udc29',\r\n                            'q': '\ud835\udc2a', 'r': '\ud835\udc2b', 's': '\ud835\udc2c', 't': '\ud835\udc2d', 'u': '\ud835\udc2e', 'v': '\ud835\udc2f',\r\n                            'w': '\ud835\udc30', 'x': '\ud835\udc31', 'y': '\ud835\udc32', 'z': '\ud835\udc33', ' ': ' '\r\n                        };\r\n                        return text.split('').map(char => serifMap[char] || char).join('');\r\n                    },\r\n                    category: 'spooky'\r\n                },\r\n                ghostMist: {\r\n                    transform: (text) => text.split('').map(char => `\u16eb${char}\u16eb`).join(''),\r\n                    category: 'spooky'\r\n                },\r\n                \r\n                \/\/ Box, UI, HP-Bar Styles (31-40)\r\n                uiBox: {\r\n                    transform: (text) => text.split('').map(char => `\u3010${char}\u3011`).join(''),\r\n                    category: 'ui'\r\n                },\r\n                boxedPixel: {\r\n                    transform: (text) => text.split('').map(char => `\u25a3${char}\u25a3`).join(''),\r\n                    category: 'ui'\r\n                },\r\n                hpBar: {\r\n                    transform: (text) => {\r\n                        const length = Math.min(text.length, 20);\r\n                        return '\u2588'.repeat(length);\r\n                    },\r\n                    category: 'ui'\r\n                },\r\n                menuBordered: {\r\n                    transform: (text) => text.split('').map(char => `\u2554${char}\u2557`).join(''),\r\n                    category: 'ui'\r\n                },\r\n                battleUI: {\r\n                    transform: (text) => text.split('').map(char => `\u2580${char}\u2580`).join(''),\r\n                    category: 'ui'\r\n                },\r\n                screenFrame: {\r\n                    transform: (text) => text.split('').map(char => `\u3016${char}\u3017`).join(''),\r\n                    category: 'ui'\r\n                },\r\n                asciiFrame: {\r\n                    transform: (text) => text.split('').map(char => `[${char}]`).join(''),\r\n                    category: 'ui'\r\n                },\r\n                hardBorder: {\r\n                    transform: (text) => text.split('').map(char => `\u2588 ${char} \u2588`).join(''),\r\n                    category: 'ui'\r\n                },\r\n                staticBox: {\r\n                    transform: (text) => text.split('').map(char => `\u2591${char}\u2591`).join(''),\r\n                    category: 'ui'\r\n                },\r\n                thickUIBox: {\r\n                    transform: (text) => text.split('').map(char => `\u3010\u2605${char}\u2605\u3011`).join(''),\r\n                    category: 'ui'\r\n                },\r\n                \r\n                \/\/ Emotion, Soul Colors, Effects (41-51)\r\n                heartPulse: {\r\n                    transform: (text) => text.split('').map(char => `\u2764${char}\u2764`).join(''),\r\n                    category: 'emotion'\r\n                },\r\n                determinedGlow: {\r\n                    transform: (text) => text.split('').map(char => `\u2734${char}\u2734`).join(''),\r\n                    category: 'emotion'\r\n                },\r\n                redSoul: {\r\n                    transform: (text) => text.split('').map(char => `\ud83d\udd34${char}\ud83d\udd34`).join(''),\r\n                    category: 'emotion'\r\n                },\r\n                blueSoul: {\r\n                    transform: (text) => text.split('').map(char => `\ud83d\udd35${char}\ud83d\udd35`).join(''),\r\n                    category: 'emotion'\r\n                },\r\n                greenSoul: {\r\n                    transform: (text) => text.split('').map(char => `\ud83d\udfe2${char}\ud83d\udfe2`).join(''),\r\n                    category: 'emotion'\r\n                },\r\n                yellowSoul: {\r\n                    transform: (text) => text.split('').map(char => `\ud83d\udfe1${char}\ud83d\udfe1`).join(''),\r\n                    category: 'emotion'\r\n                },\r\n                purpleSoul: {\r\n                    transform: (text) => text.split('').map(char => `\ud83d\udfe3${char}\ud83d\udfe3`).join(''),\r\n                    category: 'emotion'\r\n                },\r\n                orangeSoul: {\r\n                    transform: (text) => text.split('').map(char => `\ud83d\udfe0${char}\ud83d\udfe0`).join(''),\r\n                    category: 'emotion'\r\n                },\r\n                flickerText: {\r\n                    transform: (text) => text.split('').map(char => `${char}\u035c`).join(''),\r\n                    category: 'emotion'\r\n                },\r\n                intenseShake: {\r\n                    transform: (text) => text.split('').map(char => `${char}\u0305\u0305`).join(''),\r\n                    category: 'emotion'\r\n                },\r\n                soulBreak: {\r\n                    transform: (text) => text.split('').map(char => `${char}\u0358`).join(''),\r\n                    category: 'emotion'\r\n                }\r\n            };\r\n            \r\n            \/\/ Initialize with dummy outputs\r\n            generateDummyOutputs();\r\n            \r\n            \/\/ UI setup function to handle responsive layout\r\n            function setupUI() {\r\n                const isSmallScreen = window.innerWidth <= 768;\r\n                if (isSmallScreen) {\r\n                    desktopAttributes.style.display = 'block'; \/\/ Or 'flex' and flex-direction column\r\n                    document.querySelector('.features-tabs').style.display = 'none';\r\n                    tabContents.forEach(tc => tc.style.display = 'none'); \/\/ Hide original tab content\r\n                } else {\r\n                    desktopAttributes.style.display = 'flex';\r\n                    document.querySelector('.features-tabs').style.display = 'none';\r\n                    tabContents.forEach(tc => tc.style.display = 'none');\r\n                }\r\n            }\r\n            \r\n            \/\/ Tab functionality - now simplified or removed if not needed\r\n            tabBtns.forEach(btn => {\r\n                btn.addEventListener('click', function() {\r\n                    \/\/ This can be removed if tabs are fully deprecated\r\n                });\r\n            });\r\n            \r\n            \/\/ Generate button click event\r\n            generateBtn.addEventListener('click', generateFonts);\r\n            \r\n            \/\/ Load More button click event\r\n            loadMoreBtn.addEventListener('click', loadMoreResults);\r\n            \r\n            \/\/ Copy button functionality for example cards\r\n            document.querySelectorAll('.copy-btn').forEach(button => {\r\n                button.addEventListener('click', function() {\r\n                    const textToCopy = this.getAttribute('data-text');\r\n                    copyToClipboard(textToCopy, this);\r\n                });\r\n            });\r\n            \r\n            \/\/ FAQ accordion functionality\r\n            document.querySelectorAll('.faq-question').forEach(question => {\r\n                question.addEventListener('click', function() {\r\n                    const faqItem = this.parentElement;\r\n                    faqItem.classList.toggle('active');\r\n                });\r\n            });\r\n            \r\n            function generateDummyOutputs() {\r\n                const dummyTexts = [\r\n                    'SOUL', 'DETERMINATION', 'FIGHT', 'MERCY', 'ACT', 'ITEM', 'MONSTER', 'HUMAN', 'UNDERTALE', 'SAVE'\r\n                ];\r\n                \r\n                \/\/ Determine how many results to show based on screen size\r\n                const isSmallScreen = window.innerWidth <= 768;\r\n                const resultCount = isSmallScreen ? 5 : 10;\r\n                \r\n                \/\/ Clear previous results\r\n                resultsContainer.innerHTML = '';\r\n                \r\n                \/\/ Generate dummy results\r\n                for (let i = 0; i < resultCount; i++) {\r\n                    const dummyText = dummyTexts[i % dummyTexts.length];\r\n                    const styleKeys = Object.keys(textStyles);\r\n                    const randomStyleKey = styleKeys[Math.floor(Math.random() * styleKeys.length)];\r\n                    const style = textStyles[randomStyleKey];\r\n                    const transformedText = style.transform(dummyText);\r\n                    \r\n                    const resultCard = createResultCard(transformedText, randomStyleKey);\r\n                    resultsContainer.appendChild(resultCard);\r\n                }\r\n                \r\n                \/\/ Show load more button\r\n                loadMoreBtn.style.display = 'block';\r\n                loadMoreBtn.setAttribute('data-remaining', 50 - resultCount);\r\n                loadMoreBtn.setAttribute('data-text', 'SOUL');\r\n                loadMoreBtn.setAttribute('data-category', 'all');\r\n                loadMoreBtn.setAttribute('data-style-index', resultCount);\r\n            }\r\n            \r\n            function generateFonts() {\r\n                const text = textInput.value.trim();\r\n                if (!text) {\r\n                    showNotification('Please enter some text to generate');\r\n                    return;\r\n                }\r\n                \r\n                const category = toneSelect.value;\r\n                \r\n                \/\/ Get styles based on category\r\n                let stylesToUse = [];\r\n                \r\n                if (category === 'all') {\r\n                    stylesToUse = Object.keys(textStyles);\r\n                } else {\r\n                    stylesToUse = Object.keys(textStyles).filter(key => textStyles[key].category === category);\r\n                }\r\n                \r\n                \/\/ Shuffle styles for randomness\r\n                stylesToUse.sort(() => Math.random() - 0.5);\r\n                \r\n                \/\/ Determine how many results to show based on screen size\r\n                const isSmallScreen = window.innerWidth <= 768;\r\n                const resultCount = isSmallScreen ? 5 : 10;\r\n                \r\n                \/\/ Clear previous results\r\n                resultsContainer.innerHTML = '';\r\n                \r\n                \/\/ Generate results\r\n                for (let i = 0; i < resultCount; i++) {\r\n                    const styleKey = stylesToUse[i % stylesToUse.length];\r\n                    const style = textStyles[styleKey];\r\n                    const transformedText = style.transform(text);\r\n                    \r\n                    const resultCard = createResultCard(transformedText, styleKey);\r\n                    resultsContainer.appendChild(resultCard);\r\n                }\r\n                \r\n                \/\/ Show load more button\r\n                loadMoreBtn.style.display = 'block';\r\n                loadMoreBtn.setAttribute('data-remaining', 50 - resultCount);\r\n                loadMoreBtn.setAttribute('data-text', text);\r\n                loadMoreBtn.setAttribute('data-category', category);\r\n                loadMoreBtn.setAttribute('data-style-index', resultCount);\r\n                \r\n                \/\/ Scroll to results\r\n                resultsContainer.scrollIntoView({ behavior: 'smooth' });\r\n            }\r\n            \r\n            function loadMoreResults() {\r\n                const remaining = parseInt(loadMoreBtn.getAttribute('data-remaining'));\r\n                const text = loadMoreBtn.getAttribute('data-text');\r\n                const category = loadMoreBtn.getAttribute('data-category');\r\n                let styleIndex = parseInt(loadMoreBtn.getAttribute('data-style-index'));\r\n                \r\n                \/\/ Get styles based on category\r\n                let stylesToUse = [];\r\n                \r\n                if (category === 'all') {\r\n                    stylesToUse = Object.keys(textStyles);\r\n                } else {\r\n                    stylesToUse = Object.keys(textStyles).filter(key => textStyles[key].category === category);\r\n                }\r\n                \r\n                \/\/ Shuffle styles for randomness\r\n                stylesToUse.sort(() => Math.random() - 0.5);\r\n                \r\n                \/\/ Determine how many results to add\r\n                const isSmallScreen = window.innerWidth <= 768;\r\n                const resultsToAdd = isSmallScreen ? Math.min(remaining, 5) : Math.min(remaining, 10);\r\n                \r\n                \/\/ Generate new results\r\n                for (let i = 0; i < resultsToAdd; i++) {\r\n                    const styleKey = stylesToUse[styleIndex % stylesToUse.length];\r\n                    const style = textStyles[styleKey];\r\n                    const transformedText = style.transform(text);\r\n                    \r\n                    const resultCard = createResultCard(transformedText, styleKey);\r\n                    resultsContainer.appendChild(resultCard);\r\n                    \r\n                    styleIndex++;\r\n                }\r\n                \r\n                \/\/ Update load more button\r\n                const newRemaining = remaining - resultsToAdd;\r\n                if (newRemaining > 0) {\r\n                    loadMoreBtn.setAttribute('data-remaining', newRemaining);\r\n                    loadMoreBtn.setAttribute('data-style-index', styleIndex);\r\n                } else {\r\n                    loadMoreBtn.style.display = 'none';\r\n                }\r\n            }\r\n            \r\n            function createResultCard(text, styleKey) {\r\n                const card = document.createElement('div');\r\n                card.className = 'result-card';\r\n                \r\n                \/\/ Create result text element\r\n                const resultText = document.createElement('div');\r\n                resultText.className = 'result-text';\r\n                resultText.textContent = text;\r\n                \r\n                \/\/ Add style-specific CSS if needed\r\n                if (styleKey === 'hpBar') {\r\n                    resultText.style.color = getComputedStyle(document.documentElement).getPropertyValue('--determination-red');\r\n                } else if (styleKey.includes('Soul')) {\r\n                    const soulColors = {\r\n                        'redSoul': 'var(--determination-red)',\r\n                        'blueSoul': 'var(--cyan-soul-glow)',\r\n                        'greenSoul': 'var(--crt-glow-green)',\r\n                        'yellowSoul': 'var(--soul-orange)',\r\n                        'purpleSoul': 'var(--monster-purple)',\r\n                        'orangeSoul': 'var(--soul-orange)'\r\n                    };\r\n                    \r\n                    if (soulColors[styleKey]) {\r\n                        resultText.style.color = getComputedStyle(document.documentElement).getPropertyValue(soulColors[styleKey]);\r\n                    }\r\n                }\r\n                \r\n                \/\/ Create copy button\r\n                const copyBtn = document.createElement('button');\r\n                copyBtn.className = 'copy-btn';\r\n                copyBtn.textContent = 'Copy';\r\n                copyBtn.setAttribute('aria-label', 'Copy generated text');\r\n                copyBtn.addEventListener('click', function() {\r\n                    copyToClipboard(text, this);\r\n                });\r\n                \r\n                card.appendChild(resultText);\r\n                card.appendChild(copyBtn);\r\n                \r\n                return card;\r\n            }\r\n            \r\n            function copyToClipboard(text, button) {\r\n                \/\/ Create a temporary textarea element\r\n                const textarea = document.createElement('textarea');\r\n                textarea.value = text;\r\n                document.body.appendChild(textarea);\r\n                textarea.select();\r\n                \r\n                try {\r\n                    document.execCommand('copy');\r\n                    \/\/ Update button text temporarily\r\n                    const originalText = button.textContent;\r\n                    button.textContent = 'Copied!';\r\n                    button.classList.add('copied');\r\n                    \r\n                    setTimeout(() => {\r\n                        button.textContent = originalText;\r\n                        button.classList.remove('copied');\r\n                    }, 2000);\r\n                } catch (err) {\r\n                    console.error('Failed to copy text: ', err);\r\n                    showNotification('Failed to copy text');\r\n                }\r\n                \r\n                document.body.removeChild(textarea);\r\n            }\r\n            \r\n            function showNotification(message) {\r\n                \/\/ Create notification element\r\n                const notification = document.createElement('div');\r\n                notification.style.position = 'fixed';\r\n                notification.style.bottom = '20px';\r\n                notification.style.left = '50%';\r\n                notification.style.transform = 'translateX(-50%)';\r\n                notification.style.backgroundColor = 'var(--underground-gray)';\r\n                notification.style.color = 'var(--pixel-white)';\r\n                notification.style.padding = '10px 20px';\r\n                notification.style.borderRadius = '4px';\r\n                notification.style.zIndex = '1000';\r\n                notification.style.border = '2px solid var(--cyan-soul-glow)';\r\n                notification.style.fontFamily = 'VT323, monospace';\r\n                notification.style.fontSize = 'var(--body-size)';\r\n                notification.style.boxShadow = '0 0 15px rgba(0, 204, 204, 0.5)';\r\n                notification.textContent = message;\r\n                \r\n                document.body.appendChild(notification);\r\n                \r\n                \/\/ Remove notification after 3 seconds\r\n                setTimeout(() => {\r\n                    document.body.removeChild(notification);\r\n                }, 3000);\r\n            }\r\n            \r\n            \/\/ Handle window resize to adjust result count and UI\r\n            window.addEventListener('resize', function() {\r\n                setupUI();\r\n                \r\n                \/\/ Only adjust if there are already results\r\n                if (resultsContainer.children.length > 0) {\r\n                    const isSmallScreen = window.innerWidth <= 768;\r\n                    const currentResultCount = resultsContainer.children.length;\r\n                    \r\n                    \/\/ If switching to small screen and there are more than 5 results, hide the extras\r\n                    if (isSmallScreen && currentResultCount > 5) {\r\n                        const cards = Array.from(resultsContainer.children);\r\n                        for (let i = 5; i < cards.length; i++) {\r\n                            cards[i].style.display = 'none';\r\n                        }\r\n                        \r\n                        \/\/ Show load more button if there are hidden results\r\n                        loadMoreBtn.style.display = 'block';\r\n                        loadMoreBtn.setAttribute('data-remaining', currentResultCount - 5);\r\n                        loadMoreBtn.setAttribute('data-text', textInput.value || 'SOUL');\r\n                        loadMoreBtn.setAttribute('data-category', toneSelect ? toneSelect.value : 'all');\r\n                        loadMoreBtn.setAttribute('data-style-index', 5);\r\n                    }\r\n                    \/\/ If switching to large screen and some results are hidden, show them\r\n                    else if (!isSmallScreen && resultsContainer.querySelector('.result-card[style*=\"display: none\"]')) {\r\n                        const cards = Array.from(resultsContainer.children);\r\n                        cards.forEach(card => {\r\n                            card.style.display = '';\r\n                        });\r\n                        \r\n                        \/\/ Hide load more button if all results are visible\r\n                        loadMoreBtn.style.display = 'none';\r\n                    }\r\n                }\r\n            });\r\n\r\n            \/\/ Initial UI setup\r\n            setupUI();\r\n        });\r\n    <\/script>\r\n<\/div>\r\n\r\n<!-- Content Section Start From Here  -->\r\n\r\n<!-- Font Awesome CDN -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n\r\n<div id=\"undertale-support-content\">\r\n    <style>\r\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Press+Start+2P&family=VT323&family=Poppins:wght@300;400;600&display=swap');\r\n\r\n        #undertale-support-content {\r\n            \/* Theme Colors Inherited from Tool *\/\r\n            --ut-red: #8B0000;\r\n            --ut-purple: #4B0082;\r\n            --ut-cyan: #00CCCC;\r\n            --ut-orange: #FF8C00;\r\n            --ut-white: #ffffff;\r\n            --ut-bg-light: #f0f7ff;\r\n            --ut-text: #2a2a2a;\r\n            \r\n            --ut-gradient: linear-gradient(45deg, var(--ut-red), var(--ut-purple), var(--ut-cyan));\r\n            \r\n            font-family: 'Poppins', sans-serif;\r\n            color: var(--ut-text);\r\n            overflow-x: hidden;\r\n        }\r\n\r\n        .ut-section {\r\n            width: 100%;\r\n            padding: 80px 20px;\r\n            box-sizing: border-box;\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n        }\r\n\r\n        .ut-container {\r\n            max-width: 1200px;\r\n            width: 100%;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        \/* SEO HEADINGS *\/\r\n        .ut-heading-wrapper {\r\n            text-align: center;\r\n            margin-bottom: 60px;\r\n        }\r\n\r\n        .ut-wh-heading {\r\n            font-family: 'Press Start 2P', cursive;\r\n            font-size: clamp(1.2rem, 3vw, 2rem);\r\n            margin-bottom: 20px;\r\n            line-height: 1.4;\r\n            background: var(--ut-gradient);\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            display: inline-block;\r\n        }\r\n\r\n        .ut-sub-heading {\r\n            font-family: 'VT323', monospace;\r\n            font-size: 1.5rem;\r\n            color: #555;\r\n            max-width: 800px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        \/* GRID LAYOUT *\/\r\n        .ut-card-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(4, 1fr);\r\n            gap: 25px;\r\n        }\r\n\r\n        .ut-card {\r\n            border-radius: 10px;\r\n            padding: 30px 20px;\r\n            text-align: center;\r\n            transition: all 0.4s ease;\r\n            position: relative;\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        .ut-card i {\r\n            font-size: 2.5rem;\r\n            margin-bottom: 20px;\r\n            color: var(--ut-red);\r\n            transition: all 0.4s ease;\r\n        }\r\n\r\n        .ut-card h3 {\r\n            font-family: 'Press Start 2P', cursive;\r\n            font-size: 0.8rem;\r\n            margin-bottom: 15px;\r\n            color: #000;\r\n        }\r\n\r\n        .ut-card p {\r\n            font-size: 0.9rem;\r\n            line-height: 1.6;\r\n            color: #444;\r\n            margin: 0;\r\n        }\r\n\r\n        \/* --- SECTION 1: WHAT (White BG, Blue Card) --- *\/\r\n        .ut-sec-1 { background-color: var(--ut-white); }\r\n        .ut-sec-1 .ut-card { background-color: var(--ut-bg-light); border: 1px solid #dceeff; }\r\n        \r\n        \/* INTERACTION: Magnetic Hover Tilt (Lift + Subtle Rotate) *\/\r\n        .ut-magnetic:hover {\r\n            transform: translateY(-10px) rotateX(5deg) rotateY(5deg);\r\n            box-shadow: 0 15px 30px rgba(0, 204, 204, 0.2);\r\n            border-color: var(--ut-cyan);\r\n        }\r\n        .ut-magnetic:hover i {\r\n            transform: scale(1.2);\r\n            color: var(--ut-cyan);\r\n        }\r\n\r\n        \/* --- SECTION 2: WHY (Blue BG, White Card) --- *\/\r\n        .ut-sec-2 { background-color: var(--ut-bg-light); }\r\n        .ut-sec-2 .ut-card { background-color: var(--ut-white); border: 2px solid transparent; }\r\n        \r\n        \/* INTERACTION: Animated Border Trace *\/\r\n        .ut-trace::before, .ut-trace::after {\r\n            content: '';\r\n            position: absolute;\r\n            width: 0; height: 0;\r\n            border: 2px solid transparent;\r\n            box-sizing: border-box;\r\n            border-radius: 10px;\r\n        }\r\n        .ut-trace::before { top: 0; left: 0; }\r\n        .ut-trace::after { bottom: 0; right: 0; }\r\n\r\n        .ut-trace:hover::before {\r\n            width: 100%; height: 100%;\r\n            border-top-color: var(--ut-red);\r\n            border-right-color: var(--ut-red);\r\n            transition: width 0.2s ease, height 0.2s ease 0.2s;\r\n        }\r\n        .ut-trace:hover::after {\r\n            width: 100%; height: 100%;\r\n            border-bottom-color: var(--ut-red);\r\n            border-left-color: var(--ut-red);\r\n            transition: width 0.2s ease, height 0.2s ease 0.2s;\r\n        }\r\n        .ut-trace:hover i {\r\n            animation: ut-shake 0.3s infinite;\r\n            color: var(--ut-red);\r\n        }\r\n\r\n        @keyframes ut-shake {\r\n            0% { transform: translate(1px, 1px) rotate(0deg); }\r\n            20% { transform: translate(-1px, -1px) rotate(1deg); }\r\n            40% { transform: translate(1px, -1px) rotate(-1deg); }\r\n            60% { transform: translate(-1px, 1px) rotate(0deg); }\r\n            100% { transform: translate(1px, 1px) rotate(0deg); }\r\n        }\r\n\r\n        \/* --- SECTION 3: HOW (White BG, Blue Card) --- *\/\r\n        .ut-sec-3 { background-color: var(--ut-white); }\r\n        .ut-sec-3 .ut-card { background-color: var(--ut-bg-light); overflow: hidden; }\r\n        \r\n        \/* INTERACTION: Soft Glass Reveal (Spotlight effect) *\/\r\n        .ut-glass::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0; left: 0; width: 100%; height: 100%;\r\n            background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.8) 0%, transparent 60%);\r\n            opacity: 0;\r\n            transition: opacity 0.3s;\r\n            pointer-events: none;\r\n        }\r\n        .ut-glass:hover::after { opacity: 1; }\r\n        .ut-glass:hover {\r\n            transform: scale(1.05);\r\n            background-color: #e8f4ff;\r\n        }\r\n        .ut-glass:hover i {\r\n            color: var(--ut-purple);\r\n            transform: rotate(360deg);\r\n        }\r\n\r\n        \/* RESPONSIVE *\/\r\n        @media (max-width: 1024px) {\r\n            .ut-card-grid { grid-template-columns: repeat(2, 1fr); }\r\n        }\r\n        @media (max-width: 650px) {\r\n            .ut-card-grid { grid-template-columns: 1fr; }\r\n            .ut-wh-heading { font-size: 1rem; }\r\n            .ut-section { padding: 50px 15px; }\r\n        }\r\n    <\/style>\r\n\r\n    <!-- SECTION 1: WHAT -->\r\n<section class=\"ut-section ut-sec-1\">\r\n        <div class=\"ut-container\">\r\n        \r\n        <\/div>\r\n\t<\/section>\r\n    <section class=\"ut-section ut-sec-1\">\r\n        <div class=\"ut-container\">\r\n            <div class=\"ut-heading-wrapper\">\r\n                <h2 class=\"ut-wh-heading\">What is an Undertale Font Generator?<\/h2>\r\n                <p class=\"ut-sub-heading\">Discover the tool that transfigures your text into the iconic pixelated styles of the Underground.<\/p>\r\n            <\/div>\r\n            <div class=\"ut-card-grid\">\r\n                <div class=\"ut-card ut-magnetic\">\r\n                    <i class=\"fa-solid fa-gamepad\"><\/i>\r\n                    <h3>Retro Engine<\/h3>\r\n                    <p>A specialized algorithm that maps your input to high-fidelity 8-bit and 16-bit Unicode characters.<\/p>\r\n                <\/div>\r\n                <div class=\"ut-card ut-magnetic\">\r\n                    <i class=\"fa-solid fa-skull\"><\/i>\r\n                    <h3>Character Fonts<\/h3>\r\n                    <p>Meticulously crafted styles inspired by Sans, Papyrus, and the Gaster font family.<\/p>\r\n                <\/div>\r\n                <div class=\"ut-card ut-magnetic\">\r\n                    <i class=\"fa-solid fa-heart-pulse\"><\/i>\r\n                    <h3>Soul Variations<\/h3>\r\n                    <p>Includes text styles themed around Bravery, Justice, and the legendary Red Soul of Determination.<\/p>\r\n                <\/div>\r\n                <div class=\"ut-card ut-magnetic\">\r\n                    <i class=\"fa-solid fa-box-archive\"><\/i>\r\n                    <h3>Dialogue Boxes<\/h3>\r\n                    <p>Generates text formatted to fit perfectly inside game-style RPG dialogue frames and battle UI.<\/p>\r\n                <\/div>\r\n                <div class=\"ut-card ut-magnetic\">\r\n                    <i class=\"fa-solid fa-terminal\"><\/i>\r\n                    <h3>Glitch Effects<\/h3>\r\n                    <p>Access the \"Void\" styles\u2014corrupted, glitchy text that mimics the mysterious nature of W.D. Gaster.<\/p>\r\n                <\/div>\r\n                <div class=\"ut-card ut-magnetic\">\r\n                    <i class=\"fa-solid fa-universal-access\"><\/i>\r\n                    <h3>Universal Use<\/h3>\r\n                    <p>Creates copyable text that works across Discord, YouTube, and all major social gaming platforms.<\/p>\r\n                <\/div>\r\n                <div class=\"ut-card ut-magnetic\">\r\n                    <i class=\"fa-solid fa-ghost\"><\/i>\r\n                    <h3>Ghost Scripts<\/h3>\r\n                    <p>Faded and ethereal font styles inspired by Napstablook and the ruins of the Underground.<\/p>\r\n                <\/div>\r\n                <div class=\"ut-card ut-magnetic\">\r\n                    <i class=\"fa-solid fa-bolt\"><\/i>\r\n                    <h3>Instant Magic<\/h3>\r\n                    <p>Zero wait time\u2014your text is transfigured the millisecond you stop typing your message.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 2: WHY -->\r\n    <section class=\"ut-section ut-sec-2\">\r\n        <div class=\"ut-container\">\r\n            <div class=\"ut-heading-wrapper\">\r\n                <h2 class=\"ut-wh-heading\">Why Use Pixelated Game Text?<\/h2>\r\n                <p class=\"ut-sub-heading\">Standard text lacks \"EXP.\" Level up your communication with styles that carry the weight of your choices.<\/p>\r\n            <\/div>\r\n            <div class=\"ut-card-grid\">\r\n                <div class=\"ut-card ut-trace\">\r\n                    <i class=\"fa-solid fa-fire-flame-curved\"><\/i>\r\n                    <h3>Pure Determination<\/h3>\r\n                    <p>Stand out in comment sections with text that shows your unwavering commitment to the fandom.<\/p>\r\n                <\/div>\r\n                <div class=\"ut-card ut-trace\">\r\n                    <i class=\"fa-solid fa-masks-theater\"><\/i>\r\n                    <h3>Roleplay Immersion<\/h3>\r\n                    <p>The essential tool for RPG players looking to bring authentic character voices to Discord servers.<\/p>\r\n                <\/div>\r\n                <div class=\"ut-card ut-trace\">\r\n                    <i class=\"fa-solid fa-clapperboard\"><\/i>\r\n                    <h3>Content Creation<\/h3>\r\n                    <p>Ideal for YouTubers and streamers creating thumbnails or lore-based video captions.<\/p>\r\n                <\/div>\r\n                <div class=\"ut-card ut-trace\">\r\n                    <i class=\"fa-solid fa-id-card\"><\/i>\r\n                    <h3>Gaming Identity<\/h3>\r\n                    <p>Create a unique GamerTag that lets everyone know exactly which game changed your life.<\/p>\r\n                <\/div>\r\n                <div class=\"ut-card ut-trace\">\r\n                    <i class=\"fa-solid fa-comment-medical\"><\/i>\r\n                    <h3>Mercy & Act<\/h3>\r\n                    <p>Choose a style that reflects your playstyle\u2014from friendly script to aggressive bold pixel blocks.<\/p>\r\n                <\/div>\r\n                <div class=\"ut-card ut-trace\">\r\n                    <i class=\"fa-solid fa-share-nodes\"><\/i>\r\n                    <h3>Viral Engagement<\/h3>\r\n                    <p>Pixel text is statistically more likely to be stopped and read in a fast-moving social media scroll.<\/p>\r\n                <\/div>\r\n                <div class=\"ut-card ut-trace\">\r\n                    <i class=\"fa-solid fa-palette\"><\/i>\r\n                    <h3>Artistic Flair<\/h3>\r\n                    <p>Designers use these fonts for digital stickers, profile headers, and retro-themed graphics.<\/p>\r\n                <\/div>\r\n                <div class=\"ut-card ut-trace\">\r\n                    <i class=\"fa-solid fa-shield-cat\"><\/i>\r\n                    <h3>Monster Pride<\/h3>\r\n                    <p>Celebrate the unique design language of indie gaming history in every message you send.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 3: HOW -->\r\n    <section class=\"ut-section ut-sec-3\">\r\n        <div class=\"ut-container\">\r\n            <div class=\"ut-heading-wrapper\">\r\n                <h2 class=\"ut-wh-heading\">How to Generate Pixel Game Text?<\/h2>\r\n                <p class=\"ut-sub-heading\">Mastering the generator is easier than solving a Papyrus puzzle. Just follow the path of your soul.<\/p>\r\n            <\/div>\r\n            <div class=\"ut-card-grid\">\r\n                <div class=\"ut-card ut-glass\">\r\n                    <i class=\"fa-solid fa-keyboard\"><\/i>\r\n                    <h3>1. Speak Your Mind<\/h3>\r\n                    <p>Type your name or dialogue into the \"Enter your text\" box at the very top of the page.<\/p>\r\n                <\/div>\r\n                <div class=\"ut-card ut-glass\">\r\n                    <i class=\"fa-solid fa-sliders\"><\/i>\r\n                    <h3>2. Set the Tone<\/h3>\r\n                    <p>Use the Style Category dropdown to filter between Glitch, Spooky, or UI-based font results.<\/p>\r\n                <\/div>\r\n                <div class=\"ut-card ut-glass\">\r\n                    <i class=\"fa-solid fa-person-rays\"><\/i>\r\n                    <h3>3. Pick a Hero<\/h3>\r\n                    <p>Choose a Character Theme to see how Sans or Toriel would translate your human words.<\/p>\r\n                <\/div>\r\n                <div class=\"ut-card ut-glass\">\r\n                    <i class=\"fa-solid fa-wand-magic-sparkles\"><\/i>\r\n                    <h3>4. Cast the Spell<\/h3>\r\n                    <p>Hit the \"Generate\" button to refresh the Underground's database with your new styles.<\/p>\r\n                <\/div>\r\n                <div class=\"ut-card ut-glass\">\r\n                    <i class=\"fa-solid fa-copy\"><\/i>\r\n                    <h3>5. Soul Capture<\/h3>\r\n                    <p>Click the \"Copy\" button on your favorite card. The text is now bound to your clipboard.<\/p>\r\n                <\/div>\r\n                <div class=\"ut-card ut-glass\">\r\n                    <i class=\"fa-solid fa-floppy-disk\"><\/i>\r\n                    <h3>6. Save Progress<\/h3>\r\n                    <p>If you don't see the perfect match, click \"Load More\" to reveal 10 more hidden font variations.<\/p>\r\n                <\/div>\r\n                <div class=\"ut-card ut-glass\">\r\n                    <i class=\"fa-solid fa-paste\"><\/i>\r\n                    <h3>7. Materialize<\/h3>\r\n                    <p>Go to your destination\u2014like a Facebook post\u2014and paste your pixelated message to the world.<\/p>\r\n                <\/div>\r\n                <div class=\"ut-card ut-glass\">\r\n                    <i class=\"fa-solid fa-rotate-left\"><\/i>\r\n                    <h3>8. Reset & Retry<\/h3>\r\n                    <p>Clear the input at any time to try a different phrase. The generator is free forever!<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n<\/div>\r\n\r\n<script>\r\n    \/\/ Spotlight Effect for Section 3\r\n    document.querySelectorAll('.ut-glass').forEach(card => {\r\n        card.addEventListener('mousemove', e => {\r\n            const rect = card.getBoundingClientRect();\r\n            const x = ((e.clientX - rect.left) \/ card.clientWidth) * 100;\r\n            const y = ((e.clientY - rect.top) \/ card.clientHeight) * 100;\r\n            card.style.setProperty('--x', x + '%');\r\n            card.style.setProperty('--y', y + '%');\r\n        });\r\n    });\r\n<\/script><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":5,"featured_media":0,"parent":7231,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-7124","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/raistheme.com\/wp-json\/wp\/v2\/pages\/7124","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/raistheme.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/raistheme.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/raistheme.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/raistheme.com\/wp-json\/wp\/v2\/comments?post=7124"}],"version-history":[{"count":6,"href":"https:\/\/raistheme.com\/wp-json\/wp\/v2\/pages\/7124\/revisions"}],"predecessor-version":[{"id":7232,"href":"https:\/\/raistheme.com\/wp-json\/wp\/v2\/pages\/7124\/revisions\/7232"}],"up":[{"embeddable":true,"href":"https:\/\/raistheme.com\/wp-json\/wp\/v2\/pages\/7231"}],"wp:attachment":[{"href":"https:\/\/raistheme.com\/wp-json\/wp\/v2\/media?parent=7124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}