{"id":7114,"date":"2026-03-02T00:00:24","date_gmt":"2026-03-02T00:00:24","guid":{"rendered":"https:\/\/raistheme.com\/?page_id=7114"},"modified":"2026-04-06T12:01:47","modified_gmt":"2026-04-06T12:01:47","slug":"harry-potter","status":"publish","type":"page","link":"https:\/\/raistheme.com\/tools\/font-generator\/harry-potter\/","title":{"rendered":"Harry Potter Font Generator \u2013 Create Instantly"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"7114\" class=\"elementor elementor-7114\">\n\t\t\t\t<div class=\"elementor-element elementor-element-63fc5d34 e-con-full e-flex e-con e-parent\" data-id=\"63fc5d34\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1147dc6c elementor-widget elementor-widget-shortcode\" data-id=\"1147dc6c\" 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\"><!-- START OF POTTER FONT TOOL -->\r\n<style>\r\n    \/* 1. IMPORTS & FONTS *\/\r\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Cinzel+Decorative:wght@400;700&family=MedievalSharp&family=Poppins:wght@300;400;600&display=swap');\r\n\r\n    @font-face {\r\n        font-family: 'HarryP';\r\n        src: url('https:\/\/cdn.jsdelivr.net\/gh\/misprintedtype\/harry-p\/HarryP.ttf') format('truetype');\r\n    }\r\n\r\n    \/* 2. MAIN CONTAINER (Background 100%) *\/\r\n    #hp-magic-tool {\r\n        \/* Scoped Variables *\/\r\n        --hp-gold: #eec65d;\r\n        --hp-gold-dim: #bfa040;\r\n        --hp-input-bg: rgba(0, 0, 0, 0.7);\r\n        --hp-bg-gradient: linear-gradient(135deg, #1a0b2e, #2b193d, #0f0c29);\r\n        --hp-glass: rgba(255, 255, 255, 0.03);\r\n        --hp-glass-border: 1px solid rgba(238, 198, 93, 0.2);\r\n        \r\n        \/* Layout *\/\r\n        width: 100%;  \/* Full Width of parent *\/\r\n        min-height: 800px;\r\n        position: relative;\r\n        padding: 20px 20px;\r\n        box-sizing: border-box;\r\n        overflow: hidden;\r\n        \r\n        \/* Design *\/\r\n        font-family: 'Poppins', sans-serif;\r\n        background: var(--hp-bg-gradient);\r\n        background-size: 300% 300%;\r\n        animation: hpNightSky 20s ease infinite;\r\n        color: #ddd;\r\n    }\r\n\r\n    #hp-magic-tool * { box-sizing: border-box; }\r\n\r\n    @keyframes hpNightSky {\r\n        0% { background-position: 0% 50%; }\r\n        50% { background-position: 100% 50%; }\r\n        100% { background-position: 0% 50%; }\r\n    }\r\n\r\n    \/* CANVAS (Fills Background) *\/\r\n    #hp-magic-tool canvas#magicCanvas {\r\n        position: absolute;\r\n        top: 0; left: 0; width: 100%; height: 100%;\r\n        z-index: 1; pointer-events: none;\r\n    }\r\n\r\n    \/* 3. INNER WRAPPER (Max 1160px) *\/\r\n    .hp-inner-container {\r\n        position: relative;\r\n        z-index: 2;\r\n        width: 100%;\r\n        max-width: 1160px; \/* Constrained width *\/\r\n        margin: 0 auto;    \/* Centered *\/\r\n    }\r\n\r\n    \/* TITLES *\/\r\n    #hp-magic-tool h2.hp-title {\r\n        font-family: 'Cinzel Decorative', cursive;\r\n        font-size: 3.6rem;\r\n        line-height: 1.2;\r\n        text-align: center;\r\n        background: linear-gradient(to right, #fffbe3, #eec65d, #8e6811);\r\n        -webkit-background-clip: text;\r\n        -webkit-text-fill-color: transparent;\r\n        margin: 0 0 10px 0;\r\n        filter: drop-shadow(0 0 15px rgba(238, 198, 93, 0.4));\r\n        padding: 0; border: none;\r\n    }\r\n    \r\n    #hp-magic-tool p.hp-subtitle {\r\n        text-align: center;\r\n        color: #aaa;\r\n        margin-bottom: 2px;\r\n        font-size: 1rem;\r\n        text-transform: uppercase;\r\n    }\r\n\r\n    \/* CONTROLS SECTION *\/\r\n    #hp-magic-tool .hp-controls {\r\n        background: var(--hp-glass);\r\n        border: var(--hp-glass-border);\r\n        backdrop-filter: blur(12px);\r\n        -webkit-backdrop-filter: blur(12px);\r\n        border-radius: 16px;\r\n        padding: 20px;\r\n        box-shadow: 0 10px 40px rgba(0,0,0,0.4);\r\n        margin-bottom: 40px;\r\n    }\r\n\r\n    \/* Input Styling *\/\r\n    #hp-magic-tool .hp-input-wrapper { \r\n        margin-bottom: 25px; \r\n        position: relative; \r\n        display: flex;\r\n        align-items: center;\r\n    }\r\n\r\n    #hp-magic-tool input[type=\"text\"].hp-main-input {\r\n        width: 100%;\r\n        padding: 20px 30px;\r\n        padding-right: 60px;\r\n        font-size: 1.5rem;\r\n        background: var(--hp-input-bg) !important;\r\n        border: 2px solid #444 !important;\r\n        color: var(--hp-gold) !important;\r\n        border-radius: 50px !important;\r\n        outline: none;\r\n        font-family: 'MedievalSharp', cursive;\r\n        transition: 0.4s ease;\r\n        line-height: normal; margin: 0; box-shadow: none;\r\n    }\r\n\r\n    #hp-magic-tool input[type=\"text\"].hp-main-input:focus {\r\n        border-color: var(--hp-gold) !important;\r\n        box-shadow: 0 0 30px rgba(238, 198, 93, 0.2) !important;\r\n    }\r\n\r\n    \/* Clear Button *\/\r\n    #hp-magic-tool .hp-clear-btn {\r\n        position: absolute;\r\n        right: 20px;\r\n        background: transparent !important;\r\n        border: none !important;\r\n        color: #666;\r\n        cursor: pointer;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        transition: 0.3s;\r\n        padding: 5px;\r\n        border-radius: 50%;\r\n        visibility: hidden;\r\n        opacity: 0;\r\n        box-shadow: none !important;\r\n        min-width: auto;\r\n    }\r\n\r\n    #hp-magic-tool .hp-clear-btn.visible {\r\n        visibility: visible;\r\n        opacity: 1;\r\n    }\r\n\r\n    #hp-magic-tool .hp-clear-btn:hover {\r\n        color: var(--hp-gold);\r\n        background: rgba(255,255,255,0.1) !important;\r\n        transform: rotate(90deg);\r\n    }\r\n\r\n    \/* Chips *\/\r\n    #hp-magic-tool .hp-presets {\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        justify-content: center;\r\n        gap: 12px;\r\n    }\r\n\r\n    #hp-magic-tool button.hp-chip {\r\n        background: transparent;\r\n        border: 1px solid #444;\r\n        color: #bbb;\r\n        padding: 8px 20px;\r\n        border-radius: 30px;\r\n        font-size: 0.9rem;\r\n        cursor: pointer;\r\n        transition: 0.3s;\r\n        font-family: 'Poppins', sans-serif;\r\n        line-height: normal; margin: 0;\r\n    }\r\n\r\n    #hp-magic-tool button.hp-chip:hover {\r\n        border-color: var(--hp-gold);\r\n        color: var(--hp-gold);\r\n        background: rgba(238, 198, 93, 0.1);\r\n    }\r\n\r\n    \/* Visual Preview *\/\r\n    #hp-magic-tool .hp-preview-card {\r\n        text-align: center;\r\n        padding: 20px;\r\n        border-bottom: 1px solid rgba(255,255,255,0.1);\r\n        margin-bottom: 30px;\r\n    }\r\n    \r\n    #hp-magic-tool .hp-visual-font {\r\n        font-family: 'HarryP', serif;\r\n        font-size: 4rem;\r\n        color: #fff;\r\n        text-shadow: 0 5px 10px #000;\r\n        line-height: 1.2;\r\n        min-height: 70px;\r\n        word-break: break-word;\r\n    }\r\n\r\n    \/* OUTPUT LIST (Single Column, Full 1160px width) *\/\r\n    #hp-magic-tool .hp-grid-container {\r\n        display: flex; \r\n        flex-direction: column;\r\n        gap: 15px;\r\n        width: 100%;\r\n    }\r\n\r\n    \/* Row Card *\/\r\n    #hp-magic-tool .hp-font-card {\r\n        background: rgba(30, 30, 30, 0.6);\r\n        border: 1px solid #333;\r\n        border-left: 3px solid var(--hp-gold-dim);\r\n        padding: 20px 30px;\r\n        border-radius: 8px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: center;\r\n        transition: 0.3s;\r\n        position: relative;\r\n        overflow: hidden;\r\n        text-align: left;\r\n    }\r\n\r\n    #hp-magic-tool .hp-font-card:hover {\r\n        background: rgba(40, 40, 40, 0.9);\r\n        transform: translateX(5px);\r\n        border-color: var(--hp-gold);\r\n        box-shadow: 0 5px 15px rgba(0,0,0,0.5);\r\n    }\r\n\r\n    #hp-magic-tool .hp-label {\r\n        font-size: 0.75rem;\r\n        text-transform: uppercase;\r\n        color: #777;\r\n        letter-spacing: 1px;\r\n        margin-bottom: 8px;\r\n    }\r\n\r\n    #hp-magic-tool .hp-output-text {\r\n        font-size: 1.4rem;\r\n        color: #fff;\r\n        white-space: nowrap;\r\n        overflow: hidden;\r\n        text-overflow: ellipsis;\r\n        margin-bottom: 0;\r\n        padding-right: 60px; \/* Space for copy button *\/\r\n        line-height: 1.5;\r\n    }\r\n\r\n    \/* Copy Button *\/\r\n    #hp-magic-tool .hp-copy-btn-mini {\r\n        position: absolute;\r\n        right: 25px;\r\n        top: 50%;\r\n        transform: translateY(-50%);\r\n        background: var(--hp-gold);\r\n        border: none;\r\n        width: 45px;\r\n        height: 45px;\r\n        border-radius: 50%;\r\n        cursor: pointer;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        transition: 0.3s;\r\n        color: #111;\r\n        padding: 0; min-width: unset;\r\n        box-shadow: 0 4px 12px rgba(0,0,0,0.4);\r\n    }\r\n\r\n    #hp-magic-tool .hp-copy-btn-mini:hover {\r\n        transform: translateY(-50%) scale(1.1);\r\n        box-shadow: 0 0 20px var(--hp-gold);\r\n        background: #fff;\r\n    }\r\n\r\n    \/* Load More *\/\r\n    #hp-magic-tool .hp-load-more-container {\r\n        text-align: center;\r\n        margin-top: 40px;\r\n    }\r\n\r\n    #hp-magic-tool button.hp-load-more-btn {\r\n        background: transparent;\r\n        border: 2px solid var(--hp-gold);\r\n        color: var(--hp-gold);\r\n        padding: 12px 40px;\r\n        font-family: 'Cinzel Decorative', cursive;\r\n        font-size: 1.1rem;\r\n        cursor: pointer;\r\n        transition: 0.3s;\r\n        border-radius: 5px;\r\n        display: inline-block;\r\n    }\r\n\r\n    #hp-magic-tool button.hp-load-more-btn:hover {\r\n        background: var(--hp-gold);\r\n        color: #000;\r\n        box-shadow: 0 0 20px var(--hp-gold-dim);\r\n    }\r\n\r\n    #hp-magic-tool button.hp-load-more-btn.hidden {\r\n        display: none;\r\n    }\r\n\r\n    \/* Toast *\/\r\n    .hp-toast {\r\n        position: fixed;\r\n        bottom: 30px; left: 50%;\r\n        transform: translateX(-50%) translateY(100px);\r\n        background: #fff; color: #111;\r\n        padding: 12px 30px; border-radius: 30px;\r\n        font-weight: 600;\r\n        box-shadow: 0 10px 30px rgba(0,0,0,0.5);\r\n        opacity: 0; transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n        z-index: 9999; pointer-events: none;\r\n        display: flex; align-items: center; gap: 8px;\r\n    }\r\n    .hp-toast.active { transform: translateX(-50%) translateY(0); opacity: 1; }\r\n\r\n    \/* Mobile Adjustments *\/\r\n    @media (max-width: 600px) {\r\n        #hp-magic-tool h2.hp-title { font-size: 1.4rem; }\r\n        #hp-magic-tool .hp-visual-font { font-size: 2.5rem; }\r\n        #hp-magic-tool .hp-output-text { font-size: 1.1rem; }\r\n        #hp-magic-tool .hp-controls { padding: 20px; }\r\n        #hp-magic-tool input[type=\"text\"].hp-main-input { font-size: 1.2rem; }\r\n    }\r\n\r\n<\/style>\r\n\r\n<div id=\"hp-magic-tool\">\r\n    <canvas id=\"magicCanvas\"><\/canvas>\r\n\r\n    <!-- WRAPPER Max Width 1160px -->\r\n    <div class=\"hp-inner-container\">\r\n        \r\n        <h2 class=\"hp-title\">Harry Potter Font Generator - Create Instantly<\/h2>\r\n        <p class=\"hp-subtitle\">Generate & Copy Magical Text<\/p>\r\n\r\n        <div class=\"hp-controls\">\r\n            <div class=\"hp-preview-card\">\r\n                <div class=\"hp-label\" style=\"margin-bottom:10px; color: var(--hp-gold);\">Visual Preview (Hogwarts Parchment)<\/div>\r\n                <div id=\"hp-visual-output\" class=\"hp-visual-font\">Lumos Maxima<\/div>\r\n            <\/div>\r\n\r\n            <div class=\"hp-input-wrapper\">\r\n                <input type=\"text\" id=\"hp-user-input\" class=\"hp-main-input\" placeholder=\"Type your spell here...\" value=\"Lumos Maxima\">\r\n                <button id=\"hp-clear-btn\" class=\"hp-clear-btn\" aria-label=\"Clear text\">\r\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                        <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"><\/line>\r\n                        <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"><\/line>\r\n                    <\/svg>\r\n                <\/button>\r\n            <\/div>\r\n\r\n            <div class=\"hp-presets\">\r\n                <button class=\"hp-chip\" data-spell=\"Expecto Patronum\">Patronus<\/button>\r\n                <button class=\"hp-chip\" data-spell=\"Wingardium Leviosa\">Leviosa<\/button>\r\n                <button class=\"hp-chip\" data-spell=\"Mischief Managed\">Mischief<\/button>\r\n                <button class=\"hp-chip\" data-spell=\"Tom Marvolo Riddle\">Riddle<\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div id=\"hp-output-grid\" class=\"hp-grid-container\">\r\n            <!-- JS injects single-row items here -->\r\n        <\/div>\r\n\r\n        <div class=\"hp-load-more-container\">\r\n            <button id=\"hp-load-more-btn\" class=\"hp-load-more-btn\">Reveal All Spells \u2728<\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div id=\"hp-toast\" class=\"hp-toast\">\r\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>\r\n        <span>Spell Copied!<\/span>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n    (function() {\r\n        \/\/ --- CONFIG & DATA ---\r\n        const alpha = \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz\";\r\n        const styleLibrary = [\r\n            { name: \"Dark Arts (Gothic)\", map: \"\ud835\udd04\ud835\udd05\u212d\ud835\udd07\ud835\udd08\ud835\udd09\ud835\udd0a\u210c\u2111\ud835\udd0d\ud835\udd0e\ud835\udd0f\ud835\udd10\ud835\udd11\ud835\udd12\ud835\udd13\ud835\udd14\u211c\ud835\udd16\ud835\udd17\ud835\udd18\ud835\udd19\ud835\udd1a\ud835\udd1b\ud835\udd1c\u2128\ud835\udd1e\ud835\udd1f\ud835\udd20\ud835\udd21\ud835\udd22\ud835\udd23\ud835\udd24\ud835\udd25\ud835\udd26\ud835\udd27\ud835\udd28\ud835\udd29\ud835\udd2a\ud835\udd2b\ud835\udd2c\ud835\udd2d\ud835\udd2e\ud835\udd2f\ud835\udd30\ud835\udd31\ud835\udd32\ud835\udd33\ud835\udd34\ud835\udd35\ud835\udd36\ud835\udd37\" },\r\n            { name: \"Ancient Runes (Bold Gothic)\", map: \"\ud835\udd6c\ud835\udd6d\ud835\udd6e\ud835\udd6f\ud835\udd70\ud835\udd71\ud835\udd72\ud835\udd73\ud835\udd74\ud835\udd75\ud835\udd76\ud835\udd77\ud835\udd78\ud835\udd79\ud835\udd7a\ud835\udd7b\ud835\udd7c\ud835\udd7d\ud835\udd7e\ud835\udd7f\ud835\udd80\ud835\udd81\ud835\udd82\ud835\udd83\ud835\udd84\ud835\udd85\ud835\udd86\ud835\udd87\ud835\udd88\ud835\udd89\ud835\udd8a\ud835\udd8b\ud835\udd8c\ud835\udd8d\ud835\udd8e\ud835\udd8f\ud835\udd90\ud835\udd91\ud835\udd92\ud835\udd93\ud835\udd94\ud835\udd95\ud835\udd96\ud835\udd97\ud835\udd98\ud835\udd99\ud835\udd9a\ud835\udd9b\ud835\udd9c\ud835\udd9d\ud835\udd9e\ud835\udd9f\" },\r\n            { name: \"Quill Script\", map: \"\ud835\udc9c\ud835\udc35\ud835\udc9e\ud835\udc9f\ud835\udc38\ud835\udc39\ud835\udca2\ud835\udc3b\ud835\udc3c\ud835\udca5\ud835\udca6\ud835\udc3f\ud835\udc40\ud835\udca9\ud835\udcaa\ud835\udcab\ud835\udcac\ud835\udc45\ud835\udcae\ud835\udcaf\ud835\udcb0\ud835\udcb1\ud835\udcb2\ud835\udcb3\ud835\udcb4\ud835\udcb5\ud835\udcb6\ud835\udcb7\ud835\udcb8\ud835\udcb9\ud835\udc52\ud835\udcbb\ud835\udc54\ud835\udcbd\ud835\udcbe\ud835\udcbf\ud835\udcc0\ud835\udcc1\ud835\udcc2\ud835\udcc3\ud835\udc5c\ud835\udcc5\ud835\udcc6\ud835\udcc7\ud835\udcc8\ud835\udcc9\ud835\udcca\ud835\udccb\ud835\udccc\ud835\udccd\ud835\udcce\ud835\udccf\" },\r\n            { name: \"Headmaster (Bold Script)\", map: \"\ud835\udcd0\ud835\udcd1\ud835\udcd2\ud835\udcd3\ud835\udcd4\ud835\udcd5\ud835\udcd6\ud835\udcd7\ud835\udcd8\ud835\udcd9\ud835\udcda\ud835\udcdb\ud835\udcdc\ud835\udcdd\ud835\udcde\ud835\udcdf\ud835\udce0\ud835\udce1\ud835\udce2\ud835\udce3\ud835\udce4\ud835\udce5\ud835\udce6\ud835\udce7\ud835\udce8\ud835\udce9\ud835\udcea\ud835\udceb\ud835\udcec\ud835\udced\ud835\udcee\ud835\udcef\ud835\udcf0\ud835\udcf1\ud835\udcf2\ud835\udcf3\ud835\udcf4\ud835\udcf5\ud835\udcf6\ud835\udcf7\ud835\udcf8\ud835\udcf9\ud835\udcfa\ud835\udcfb\ud835\udcfc\ud835\udcfd\ud835\udcfe\ud835\udcff\ud835\udd00\ud835\udd01\ud835\udd02\ud835\udd03\" },\r\n            { name: \"Daily Prophet (Double Struck)\", map: \"\ud835\udd38\ud835\udd39\u2102\ud835\udd3b\ud835\udd3c\ud835\udd3d\ud835\udd3e\u210d\ud835\udd40\ud835\udd41\ud835\udd42\ud835\udd43\ud835\udd44\u2115\ud835\udd46\u2119\u211a\u211d\ud835\udd4a\ud835\udd4b\ud835\udd4c\ud835\udd4d\ud835\udd4e\ud835\udd4f\ud835\udd50\u2124\ud835\udd52\ud835\udd53\ud835\udd54\ud835\udd55\ud835\udd56\ud835\udd57\ud835\udd58\ud835\udd59\ud835\udd5a\ud835\udd5b\ud835\udd5c\ud835\udd5d\ud835\udd5e\ud835\udd5f\ud835\udd60\ud835\udd61\ud835\udd62\ud835\udd63\ud835\udd64\ud835\udd65\ud835\udd66\ud835\udd67\ud835\udd68\ud835\udd69\ud835\udd6a\ud835\udd6b\" },\r\n            { name: \"Bubbles\", map: \"\u24b6\u24b7\u24b8\u24b9\u24ba\u24bb\u24bc\u24bd\u24be\u24bf\u24c0\u24c1\u24c2\u24c3\u24c4\u24c5\u24c6\u24c7\u24c8\u24c9\u24ca\u24cb\u24cc\u24cd\u24ce\u24cf\u24d0\u24d1\u24d2\u24d3\u24d4\u24d5\u24d6\u24d7\u24d8\u24d9\u24da\u24db\u24dc\u24dd\u24de\u24df\u24e0\u24e1\u24e2\u24e3\u24e4\u24e5\u24e6\u24e7\u24e8\u24e9\" },\r\n            { name: \"Dark Bubbles\", map: \"\ud83c\udd50\ud83c\udd51\ud83c\udd52\ud83c\udd53\ud83c\udd54\ud83c\udd55\ud83c\udd56\ud83c\udd57\ud83c\udd58\ud83c\udd59\ud83c\udd5a\ud83c\udd5b\ud83c\udd5c\ud83c\udd5d\ud83c\udd5e\ud83c\udd5f\ud83c\udd60\ud83c\udd61\ud83c\udd62\ud83c\udd63\ud83c\udd64\ud83c\udd65\ud83c\udd66\ud83c\udd67\ud83c\udd68\ud83c\udd69\ud83c\udd50\ud83c\udd51\ud83c\udd52\ud83c\udd53\ud83c\udd54\ud83c\udd55\ud83c\udd56\ud83c\udd57\ud83c\udd58\ud83c\udd59\ud83c\udd5a\ud83c\udd5b\ud83c\udd5c\ud83c\udd5d\ud83c\udd5e\ud83c\udd5f\ud83c\udd60\ud83c\udd61\ud83c\udd62\ud83c\udd63\ud83c\udd64\ud83c\udd65\ud83c\udd66\ud83c\udd67\ud83c\udd68\ud83c\udd69\" },\r\n            { name: \"Square Blocks\", map: \"\ud83c\udd30\ud83c\udd31\ud83c\udd32\ud83c\udd33\ud83c\udd34\ud83c\udd35\ud83c\udd36\ud83c\udd37\ud83c\udd38\ud83c\udd39\ud83c\udd3a\ud83c\udd3b\ud83c\udd3c\ud83c\udd3d\ud83c\udd3e\ud83c\udd3f\ud83c\udd40\ud83c\udd41\ud83c\udd42\ud83c\udd43\ud83c\udd44\ud83c\udd45\ud83c\udd46\ud83c\udd47\ud83c\udd48\ud83c\udd49\ud83c\udd30\ud83c\udd31\ud83c\udd32\ud83c\udd33\ud83c\udd34\ud83c\udd35\ud83c\udd36\ud83c\udd37\ud83c\udd38\ud83c\udd39\ud83c\udd3a\ud83c\udd3b\ud83c\udd3c\ud83c\udd3d\ud83c\udd3e\ud83c\udd3f\ud83c\udd40\ud83c\udd41\ud83c\udd42\ud83c\udd43\ud83c\udd44\ud83c\udd45\ud83c\udd46\ud83c\udd47\ud83c\udd48\ud83c\udd49\" },\r\n            { name: \"Dark Squares\", map: \"\ud83c\udd70\ud83c\udd71\ud83c\udd72\ud83c\udd73\ud83c\udd74\ud83c\udd75\ud83c\udd76\ud83c\udd77\ud83c\udd78\ud83c\ude4a\ud83c\udd7a\ud83c\udd7b\ud83c\udd7c\ud83c\udd7d\ud83c\udd7e\ud83c\udd7f\ud83c\udd80\ud83c\udd81\ud83c\udd82\ud83c\udd83\ud83c\udd84\ud83c\udd85\ud83c\udd86\ud83c\udd87\ud83c\udd88\ud83c\udd89\ud83c\udd70\ud83c\udd71\ud83c\udd72\ud83c\udd73\ud83c\udd74\ud83c\udd75\ud83c\udd76\ud83c\udd77\ud83c\udd78\ud83c\ude4a\ud83c\udd7a\ud83c\udd7b\ud83c\udd7c\ud83c\udd7d\ud83c\udd7e\ud83c\udd7f\ud83c\udd80\ud83c\udd81\ud83c\udd82\ud83c\udd83\ud83c\udd84\ud83c\udd85\ud83c\udd86\ud83c\udd87\ud83c\udd88\ud83c\udd89\" },\r\n            { name: \"Parenthesized\", map: \"\u249c\u249d\u249e\u249f\u24a0\u24a1\u24a2\u24a3\u24a4\u24a5\u24a6ell\u24a8\u24a9\u24aa\u24ab\u24ac\u24ad\u24ae\u24af\u24b0\u24b1\u24b2\u24b3\u24b4\u24b5\u249c\u249d\u249e\u249f\u24a0\u24a1\u24a2\u24a3\u24a4\u24a5\u24a6ell\u24a8\u24a9\u24aa\u24ab\u24ac\u24ad\u24ae\u24af\u24b0\u24b1\u24b2\u24b3\u24b4\u24b5\" },\r\n            { name: \"Typewriter\", map: \"\ud835\ude70\ud835\ude71\ud835\ude72\ud835\ude73\ud835\ude74\ud835\ude75\ud835\ude76\ud835\ude77\ud835\ude78\ud835\ude79\ud835\ude7a\ud835\ude7b\ud835\ude7c\ud835\ude7d\ud835\ude7e\ud835\ude7f\ud835\ude9a\ud835\ude81\ud835\ude82\ud835\ude83\ud835\ude84\ud835\ude85\ud835\ude86\ud835\ude87\ud835\ude88\ud835\ude89\ud835\ude8a\ud835\ude8b\ud835\ude8c\ud835\ude8d\ud835\ude8e\ud835\ude8f\ud835\ude90\ud835\ude91\ud835\ude92\ud835\ude93\ud835\ude94\ud835\ude95\ud835\ude96\ud835\ude97\ud835\ude98\ud835\ude99\ud835\ude9a\ud835\ude9b\ud835\ude9c\ud835\ude9d\ud835\ude9e\ud835\ude9f\ud835\udea0\ud835\udea1\ud835\udea2\ud835\udea3\" },\r\n            { name: \"Bold Serif\", map: \"\ud835\udc00\ud835\udc01\ud835\udc02\ud835\udc03\ud835\udc04\ud835\udc05\ud835\udc06\ud835\udc07\ud835\udc08\ud835\udc09\ud835\udc0a\ud835\udc0b\ud835\udc0c\ud835\udc0d\ud835\udc0e\ud835\udc0f\ud835\udc10\ud835\udc11\ud835\udc12\ud835\udc13\ud835\udc14\ud835\udc15\ud835\udc16\ud835\udc17\ud835\udc18\ud835\udc19\ud835\udc1a\ud835\udc1b\ud835\udc1c\ud835\udc1d\ud835\udc1e\ud835\udc1f\ud835\udc20\ud835\udc21\ud835\udc22\ud835\udc23\ud835\udc24\ud835\udc25\ud835\udc26\ud835\udc27\ud835\udc28\ud835\udc29\ud835\udc2a\ud835\udc2b\ud835\udc2c\ud835\udc2d\ud835\udc2e\ud835\udc2f\ud835\udc30\ud835\udc31\ud835\udc32\ud835\udc33\" },\r\n            { name: \"Italic Serif\", map: \"\ud835\udc34\ud835\udc35\ud835\udc36\ud835\udc37\ud835\udc38\ud835\udc39\ud835\udc3a\ud835\udc3b\ud835\udc3c\ud835\udc3d\ud835\udc3e\ud835\udc3f\ud835\udc40\ud835\udc41\ud835\udc42\ud835\udc43\ud835\udc44\ud835\udc45\ud835\udc46\ud835\udc47\ud835\udc48\ud835\udc49\ud835\udc4a\ud835\udc4b\ud835\udc4c\ud835\udc4d\ud835\udc4e\ud835\udc4f\ud835\udc50\ud835\udc51\ud835\udc52\ud835\udc53\ud835\udc54\u210e\ud835\udc56\ud835\udc57\ud835\udc58\ud835\udc59\ud835\udc5a\ud835\udc5b\ud835\udc5c\ud835\udc5d\ud835\udc5e\ud835\udc5f\ud835\udc60\ud835\udc61\ud835\udc62\ud835\udc63\ud835\udc64\ud835\udc65\ud835\udc66\ud835\udc67\" },\r\n            { name: \"Sans Bold\", map: \"\ud835\uddd4\ud835\uddd5\ud835\uddd6\ud835\uddd7\ud835\uddd8\ud835\uddd9\ud835\uddda\ud835\udddb\ud835\udddc\ud835\udddd\ud835\uddde\ud835\udddf\ud835\udde0\ud835\udde1\ud835\udde2\ud835\udde3\ud835\udde4\ud835\udde5\ud835\udde6\ud835\udde7\ud835\udde8\ud835\udde9\ud835\uddea\ud835\uddeb\ud835\uddec\ud835\udded\ud835\uddee\ud835\uddef\ud835\uddf0\ud835\uddf1\ud835\uddf2\ud835\uddf3\ud835\uddf4\ud835\uddf5\ud835\uddf6\ud835\uddf7\ud835\uddf8\ud835\uddf9\ud835\uddfa\ud835\uddfb\ud835\uddfc\ud835\uddfd\ud835\uddfe\ud835\uddff\ud835\ude00\ud835\ude01\ud835\ude02\ud835\ude03\ud835\ude04\ud835\ude05\ud835\ude06\ud835\ude07\" },\r\n            { name: \"Small Caps\", map: \"\u1d00\u0299\u1d04\u1d05\u1d07\ua730\u0262\u029c\u026a\u1d0a\u1d0b\u029f\u1d0d\u0274\u1d0f\u1d18\u01eb\u0280s\u1d1b\u1d1c\u1d20\u1d21x\u028f\u1d22\u1d00\u0299\u1d04\u1d05\u1d07\ua730\u0262\u029c\u026a\u1d0a\u1d0b\u029f\u1d0d\u0274\u1d0f\u1d18\u01eb\u0280s\u1d1b\u1d1c\u1d20\u1d21x\u028f\u1d22\" },\r\n            { name: \"Full Width\", map: \"\uff21\uff22\uff23\uff24\uff25\uff26\uff27\uff28\uff29\uff2a\uff2b\uff2c\uff2d\uff2e\uff2f\uff30\uff31\uff32\uff33\uff34\uff35\uff36\uff37\uff38\uff39\uff3a\uff41\uff42\uff43\uff44\uff45\uff46\uff47\uff48\uff49\uff4a\uff4b\uff4c\uff4d\uff4e\uff4f\uff50\uff51\uff52\uff53\uff54\uff55\uff56\uff57\uff58\uff59\uff5a\" },\r\n            { name: \"Superscript (Tiny)\", map: \"\u1d2c\u1d2e\u1d9c\u1d30\u1d31\u1da0\u1d33\u1d34\u1d35\u1d36\u1d37\u1d38\u1d39\u1d3a\u1d3c\u1d3eQ\u1d3f\u02e2\u1d40\u1d41\u2c7d\u1d42\u02e3\u02b8\u1dbb\u1d43\u1d47\u1d9c\u1d48\u1d49\u1da0\u1d4d\u02b0\u2071\u02b2\u1d4f\u02e1\u1d50\u207f\u1d52\u1d56q\u02b3\u02e2\u1d57\u1d58\u1d5b\u02b7\u02e3\u02b8\u1dbb\" },\r\n            { name: \"Underline\", type: \"decorator\", char: \"\\u0332\" }, \r\n            { name: \"Strikethrough\", type: \"decorator\", char: \"\\u0336\" }, \r\n            { name: \"Slash Through\", type: \"decorator\", char: \"\\u0338\" }, \r\n            { name: \"Sorcerer (Cursed)\", type: \"cursed\" }, \r\n            { name: \"Upside Down\", type: \"flip\" },\r\n            { name: \"Mirror\", type: \"mirror\" },\r\n            { name: \"Rusify\", map: \"\u0414\u0411CD\u039eF\u0411HIJ\u041aL\u0442\u0438\u0424P\u01ea\u042fS\u0393\u0426V\u0429X\u0423Z\u0430\u044ccd\u039ef\u0411hij\u043al\u0442\u0438\u0444pq\u044fs\u0433\u0446v\u0449x\u0443z\" },\r\n            { name: \"Greek-ish\", map: \"\u0391\u0392CD\u03a3FG\u0397\u0399J\u039aL\u039c\u039d\u039f\u03a1QRS\u03a4UVWX\u03a5\u0396\u03b1\u03b2cd\u03b5fg\u03b7\u03b9j\u03bal\u03bc\u03bd\u03bfpqrs\u03c4\u03c5vwx\u03c5z\" },\r\n            { name: \"Spaced Out\", type: \"join\", char: \" \" },\r\n            { name: \"Lightning Scars\", type: \"join\", char: \"\u26a1\" },\r\n            { name: \"Starry Night\", type: \"join\", char: \"\u2605\" },\r\n            { name: \"Dotted\", type: \"join\", char: \".\" },\r\n            { name: \"Waves\", type: \"decorator\", char: \"\\u0330\" } \r\n        ];\r\n\r\n        \/\/ --- DOM REFERENCES ---\r\n        const container = document.getElementById('hp-magic-tool');\r\n        const input = document.getElementById('hp-user-input');\r\n        const grid = document.getElementById('hp-output-grid');\r\n        const visualOutput = document.getElementById('hp-visual-output');\r\n        const clearBtn = document.getElementById('hp-clear-btn');\r\n        const presetBtns = container.querySelectorAll('.hp-chip');\r\n        const toast = document.getElementById('hp-toast');\r\n        const loadMoreBtn = document.getElementById('hp-load-more-btn');\r\n\r\n        \/\/ --- STATE ---\r\n        let renderLimit = 15; \/\/ Shows 15 initially\r\n\r\n        \/\/ --- GENERATOR LOGIC ---\r\n        function generate() {\r\n            const text = input.value || \" \";\r\n            \r\n            \/\/ Handle Clear Button\r\n            if (input.value.length > 0) {\r\n                clearBtn.classList.add('visible');\r\n            } else {\r\n                clearBtn.classList.remove('visible');\r\n            }\r\n\r\n            visualOutput.textContent = text;\r\n            grid.innerHTML = '';\r\n\r\n            let displayedCount = 0;\r\n            \r\n            styleLibrary.forEach((style, index) => {\r\n                if(index >= renderLimit) return; \/\/ Limit Logic\r\n\r\n                let result = \"\";\r\n\r\n                if (style.map) {\r\n                    result = [...text].map(char => {\r\n                        const idx = alpha.indexOf(char);\r\n                        const mapArr = [...style.map];\r\n                        return idx > -1 ? mapArr[idx] : char;\r\n                    }).join('');\r\n                } \r\n                else if (style.type === \"decorator\") {\r\n                    result = [...text].map(c => c === \" \" ? \" \" : c + style.char).join('');\r\n                }\r\n                else if (style.type === \"join\") {\r\n                    result = [...text].join(style.char);\r\n                }\r\n                else if (style.type === \"flip\") {\r\n                    const flipTable = {\r\n                        'a':'\u0250','b':'q','c':'\u0254','d':'p','e':'\u01dd','f':'\u025f','g':'\u0183','h':'\u0265','i':'\u1d09','j':'\u027e','k':'\u029e','l':'l','m':'\u026f','n':'u','o':'o','p':'d','q':'b','r':'\u0279','s':'s','t':'\u0287','u':'n','v':'\u028c','w':'\u028d','x':'x','y':'\u028e','z':'z','A':'\u2200','B':'\ud801\udc12','C':'\u0186','D':'\u15e1','E':'\u018e','F':'\u2132','G':'\u2141','H':'H','I':'I','J':'\u017f','K':'\u22ca','L':'\u2142','M':'W','N':'N','O':'O','P':'\u0500','Q':'\u00d2','R':'\u1d1a','S':'S','T':'\u22a5','U':'\u2229','V':'\u039b','W':'M','X':'X','Y':'\u2144','Z':'Z', '?':'\u00bf', '!':'\u00a1', '\"':',,', \"'\":','\r\n                    };\r\n                    result = [...text].reverse().map(c => flipTable[c] || c).join('');\r\n                }\r\n                else if (style.type === \"cursed\") {\r\n                    result = [...text].map(c => c + (Math.random() > 0.5 ? '\\u0321' : '\\u0316') + (Math.random() > 0.5 ? '\\u0358' : '')).join('');\r\n                }\r\n                else if (style.type === \"mirror\") {\r\n                     const mirrorMap = {'b':'d','d':'b','p':'q','q':'p','s':'z','z':'s'};\r\n                     result = [...text].reverse().map(c => mirrorMap[c] || c).join('');\r\n                }\r\n\r\n                \/\/ Render Card (List Item)\r\n                const div = document.createElement('div');\r\n                div.className = 'hp-font-card';\r\n                div.innerHTML = `\r\n                    <div class=\"hp-label\">${style.name}<\/div>\r\n                    <div class=\"hp-output-text\">${result}<\/div>\r\n                    <button class=\"hp-copy-btn-mini\" aria-label=\"Copy\">\r\n                        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"><\/rect><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"><\/path><\/svg>\r\n                    <\/button>\r\n                `;\r\n                \r\n                const btn = div.querySelector('button');\r\n                btn.addEventListener('click', () => copyToClip(result));\r\n                \r\n                grid.appendChild(div);\r\n                displayedCount++;\r\n            });\r\n\r\n            \/\/ Toggle Load More Visibility\r\n            if (displayedCount < styleLibrary.length) {\r\n                loadMoreBtn.classList.remove('hidden');\r\n            } else {\r\n                loadMoreBtn.classList.add('hidden');\r\n            }\r\n        }\r\n\r\n        function copyToClip(text) {\r\n            navigator.clipboard.writeText(text).then(() => {\r\n                toast.classList.add('active');\r\n                setTimeout(() => toast.classList.remove('active'), 2000);\r\n            });\r\n        }\r\n\r\n        \/\/ --- EVENT BINDINGS ---\r\n        input.addEventListener('input', generate);\r\n        \r\n        clearBtn.addEventListener('click', () => {\r\n            input.value = \"\";\r\n            generate();\r\n            input.focus();\r\n        });\r\n\r\n        presetBtns.forEach(btn => {\r\n            btn.addEventListener('click', function() {\r\n                input.value = this.getAttribute('data-spell');\r\n                generate();\r\n            });\r\n        });\r\n\r\n        loadMoreBtn.addEventListener('click', function() {\r\n            renderLimit = styleLibrary.length; \/\/ Show all\r\n            generate();\r\n            this.classList.add('hidden'); \/\/ Hide button\r\n        });\r\n\r\n        \/\/ Initialize tool\r\n        generate();\r\n\r\n        \/\/ --- PARTICLE BACKGROUND LOGIC ---\r\n        const canvas = document.getElementById('magicCanvas');\r\n        const ctx = canvas.getContext('2d');\r\n        let particles = [];\r\n        let mouse = { x: -100, y: -100 };\r\n\r\n        function resizeCanvas() {\r\n            \/\/ Match container size (100% width)\r\n            canvas.width = container.offsetWidth;\r\n            canvas.height = container.offsetHeight;\r\n        }\r\n        \r\n        resizeCanvas();\r\n        window.addEventListener('resize', resizeCanvas);\r\n\r\n        container.addEventListener('mousemove', e => { \r\n            const rect = container.getBoundingClientRect();\r\n            mouse.x = e.clientX - rect.left;\r\n            mouse.y = e.clientY - rect.top;\r\n            spawn(2); \r\n        });\r\n\r\n        container.addEventListener('touchmove', e => { \r\n            const rect = container.getBoundingClientRect();\r\n            mouse.x = e.touches[0].clientX - rect.left;\r\n            mouse.y = e.touches[0].clientY - rect.top;\r\n            spawn(2); \r\n        });\r\n\r\n        function spawn(count) {\r\n            for(let i=0; i<count; i++) {\r\n                particles.push({\r\n                    x: mouse.x,\r\n                    y: mouse.y,\r\n                    size: Math.random() * 3 + 1,\r\n                    speedX: Math.random() * 2 - 1,\r\n                    speedY: Math.random() * 2 - 1,\r\n                    life: 1,\r\n                    color: Math.random() > 0.5 ? '#eec65d' : '#ffffff'\r\n                });\r\n            }\r\n        }\r\n\r\n        function animate() {\r\n            ctx.clearRect(0,0,canvas.width,canvas.height);\r\n            particles.forEach((p, index) => {\r\n                p.x += p.speedX;\r\n                p.y += p.speedY;\r\n                p.life -= 0.02;\r\n                p.size *= 0.95;\r\n\r\n                ctx.fillStyle = p.color;\r\n                ctx.globalAlpha = p.life;\r\n                ctx.beginPath();\r\n                ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);\r\n                ctx.fill();\r\n\r\n                if(p.life <= 0) particles.splice(index, 1);\r\n            });\r\n            requestAnimationFrame(animate);\r\n        }\r\n        animate();\r\n\r\n    })();\r\n});\r\n<\/script>\r\n<!-- END OF POTTER FONT TOOL -->\r\n<!-- START OF ADVANCED HP CONTENT SECTION -->\r\n<div id=\"hp-advanced-content\">\r\n    <style>\r\n        \/* 1. IMPORTS & VARS *\/\r\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Cinzel+Decorative:wght@400;700;900&family=MedievalSharp&family=Poppins:wght@300;400;500;600&display=swap');\r\n\r\n        #hp-advanced-content {\r\n            \/* Palette *\/\r\n            --hp-gold: #FFD700;\r\n            --hp-gold-gradient: linear-gradient(135deg, #FFD700 0%, #FDB931 50%, #9E7914 100%);\r\n            --hp-text-glow: 0 0 15px rgba(255, 215, 0, 0.3);\r\n            --hp-bg-dark: #090910;\r\n            --hp-bg-panel: rgba(20, 20, 30, 0.6);\r\n            --hp-glass: rgba(255, 255, 255, 0.03);\r\n            --hp-glass-border: 1px solid rgba(255, 215, 0, 0.15);\r\n            --hp-glass-hover: rgba(255, 215, 0, 0.08);\r\n            \r\n            \/* Typography *\/\r\n            font-family: 'Poppins', sans-serif;\r\n            color: #e0e0e0;\r\n            line-height: 1.7;\r\n            \r\n            \/* Layout *\/\r\n            width: 100%;\r\n            padding: 80px 20px;\r\n            background: radial-gradient(circle at 50% 0%, #1f1530 0%, #090910 60%);\r\n            position: relative;\r\n            overflow: hidden;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        #hp-advanced-content * { box-sizing: border-box; }\r\n\r\n        \/* Floating Background Elements *\/\r\n        #hp-advanced-content::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: -10%; left: -10%;\r\n            width: 50%; height: 50%;\r\n            background: radial-gradient(circle, rgba(118, 74, 188, 0.1) 0%, transparent 70%);\r\n            filter: blur(80px);\r\n            z-index: 0;\r\n            animation: hpPulse 10s infinite ease-in-out;\r\n        }\r\n\r\n        @keyframes hpPulse {\r\n            0%, 100% { opacity: 0.5; transform: scale(1); }\r\n            50% { opacity: 0.8; transform: scale(1.1); }\r\n        }\r\n\r\n        .hp-container {\r\n            max-width: 1100px;\r\n            margin: 0 auto;\r\n            position: relative;\r\n            z-index: 2;\r\n        }\r\n\r\n        \/* 2. TYPOGRAPHY *\/\r\n        .hp-main-heading {\r\n            font-family: 'Cinzel Decorative', cursive;\r\n            font-size: clamp(2rem, 5vw, 2.5rem);\r\n            text-align: center;\r\n            background: var(--hp-gold-gradient);\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            margin-bottom: 20px;\r\n            filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));\r\n            position: relative;\r\n            display: inline-block;\r\n            width: 100%;\r\n        }\r\n\r\n        .hp-subheading {\r\n            text-align: center;\r\n            font-family: 'MedievalSharp', serif;\r\n            font-size: 1.2rem;\r\n            color: #aaa;\r\n            max-width: 700px;\r\n            margin: 0 auto 60px auto;\r\n            letter-spacing: 0.5px;\r\n        }\r\n\r\n        .hp-section-title {\r\n            font-family: 'Cinzel Decorative', serif;\r\n            font-size: 1.8rem;\r\n            color: var(--hp-gold);\r\n            margin-bottom: 40px;\r\n            text-align: center;\r\n            text-shadow: var(--hp-text-glow);\r\n            position: relative;\r\n            padding-bottom: 15px;\r\n        }\r\n\r\n        .hp-section-title::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: 0; left: 50%;\r\n            transform: translateX(-50%);\r\n            width: 60px; height: 3px;\r\n            background: var(--hp-gold-gradient);\r\n            border-radius: 2px;\r\n            box-shadow: 0 0 10px var(--hp-gold);\r\n        }\r\n\r\n        p { margin-bottom: 20px; color: #ccc; }\r\n\r\n        \/* 3. HERO INTRO BOX *\/\r\n        .hp-hero-box {\r\n            background: var(--hp-glass);\r\n            border: var(--hp-glass-border);\r\n            border-radius: 20px;\r\n            padding: 40px;\r\n            backdrop-filter: blur(10px);\r\n            margin-bottom: 80px;\r\n            box-shadow: 0 20px 50px rgba(0,0,0,0.4);\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 20px;\r\n            text-align: center;\r\n        }\r\n        \r\n        .hp-hero-box p:first-of-type {\r\n            font-size: 1.1rem;\r\n            color: #fff;\r\n        }\r\n\r\n        \/* 4. STEPS (Timeline Style) *\/\r\n        .hp-steps-wrapper {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: flex-start;\r\n            flex-wrap: wrap;\r\n            gap: 20px;\r\n            margin-bottom: 80px;\r\n            position: relative;\r\n        }\r\n\r\n        \/* Connecting Line (Desktop) *\/\r\n        .hp-steps-wrapper::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 40px; left: 50px; right: 50px;\r\n            height: 2px;\r\n            background: linear-gradient(90deg, transparent, var(--hp-gold), transparent);\r\n            opacity: 0.3;\r\n            z-index: 0;\r\n            display: block;\r\n        }\r\n\r\n        .hp-step {\r\n            flex: 1;\r\n            min-width: 220px;\r\n            text-align: center;\r\n            position: relative;\r\n            z-index: 1;\r\n            padding: 10px;\r\n            transition: 0.3s;\r\n        }\r\n\r\n        .hp-step:hover { transform: translateY(-10px); }\r\n\r\n        .hp-step-icon-box {\r\n            width: 80px; height: 80px;\r\n            margin: 0 auto 20px auto;\r\n            background: #1a1a2e;\r\n            border: 2px solid var(--hp-gold);\r\n            border-radius: 50%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            box-shadow: 0 0 20px rgba(255, 215, 0, 0.1);\r\n            color: var(--hp-gold);\r\n            font-size: 2rem;\r\n            font-family: 'Cinzel Decorative', cursive;\r\n            transition: 0.3s;\r\n        }\r\n\r\n        .hp-step:hover .hp-step-icon-box {\r\n            background: var(--hp-gold);\r\n            color: #000;\r\n            box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);\r\n        }\r\n\r\n        .hp-step h4 { font-family: 'MedievalSharp'; font-size: 1.3rem; margin-bottom: 10px; color: #fff; }\r\n        .hp-step p { font-size: 0.9rem; color: #aaa; }\r\n\r\n        \/* 5. FEATURES (3D Grid) *\/\r\n        .hp-features-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n            gap: 30px;\r\n            margin-bottom: 80px;\r\n        }\r\n\r\n        .hp-feature-card {\r\n            background: linear-gradient(145deg, rgba(255,255,255,0.03), rgba(0,0,0,0.2));\r\n            border: 1px solid rgba(255,255,255,0.05);\r\n            padding: 30px;\r\n            border-radius: 16px;\r\n            position: relative;\r\n            overflow: hidden;\r\n            transition: all 0.4s ease;\r\n        }\r\n\r\n        .hp-feature-card:hover {\r\n            border-color: rgba(255, 215, 0, 0.3);\r\n            background: linear-gradient(145deg, rgba(255,255,255,0.07), rgba(0,0,0,0.1));\r\n            transform: translateY(-5px) scale(1.02);\r\n            box-shadow: 0 10px 40px rgba(0,0,0,0.5);\r\n        }\r\n\r\n        .hp-feature-card::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0; left: 0; width: 3px; height: 0%;\r\n            background: var(--hp-gold);\r\n            transition: 0.4s;\r\n        }\r\n\r\n        .hp-feature-card:hover::before { height: 100%; }\r\n\r\n        .hp-feature-icon {\r\n            width: 50px; height: 50px;\r\n            margin-bottom: 20px;\r\n            color: var(--hp-gold);\r\n        }\r\n\r\n        .hp-feature-card h3 {\r\n            font-family: 'Cinzel Decorative';\r\n            font-size: 1.2rem;\r\n            color: #fff;\r\n            margin-bottom: 10px;\r\n        }\r\n\r\n        \/* 6. USE CASES (Checkerboard) *\/\r\n        .hp-use-grid {\r\n            display: grid;\r\n            grid-template-columns: 1fr 1fr;\r\n            gap: 20px;\r\n            margin-bottom: 80px;\r\n        }\r\n\r\n        .hp-use-item {\r\n            background: rgba(0,0,0,0.3);\r\n            border-radius: 12px;\r\n            padding: 25px;\r\n            display: flex;\r\n            align-items: flex-start;\r\n            gap: 15px;\r\n            border-bottom: 1px solid transparent;\r\n            transition: 0.3s;\r\n        }\r\n\r\n        .hp-use-item:hover {\r\n            background: rgba(255,255,255,0.02);\r\n            border-bottom-color: var(--hp-gold);\r\n        }\r\n\r\n        .hp-check-icon {\r\n            min-width: 24px; color: var(--hp-gold); margin-top: 3px;\r\n        }\r\n\r\n        \/* 7. FAQ ACCORDION (Modern) *\/\r\n        .hp-accordion { display: flex; flex-direction: column; gap: 15px; }\r\n\r\n        .hp-acc-item {\r\n            background: rgba(255,255,255,0.02);\r\n            border: 1px solid rgba(255,255,255,0.05);\r\n            border-radius: 10px;\r\n            overflow: hidden;\r\n            transition: 0.3s;\r\n        }\r\n\r\n        .hp-acc-header {\r\n            width: 100%;\r\n            padding: 20px 25px;\r\n            background: transparent;\r\n            border: none;\r\n            text-align: left;\r\n            color: #e0e0e0;\r\n            font-family: 'MedievalSharp';\r\n            font-size: 1.1rem;\r\n            cursor: pointer;\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n        }\r\n\r\n        .hp-acc-header:hover { background: rgba(255,255,255,0.03); color: var(--hp-gold); }\r\n\r\n        .hp-acc-icon { transition: 0.3s; }\r\n        .hp-acc-item.active .hp-acc-icon { transform: rotate(180deg); color: var(--hp-gold); }\r\n        .hp-acc-item.active { border-color: var(--hp-gold); background: rgba(0,0,0,0.3); }\r\n\r\n        .hp-acc-content {\r\n            max-height: 0;\r\n            overflow: hidden;\r\n            transition: max-height 0.4s ease-out;\r\n            color: #aaa;\r\n            padding: 0 25px;\r\n            line-height: 1.6;\r\n        }\r\n        \r\n        .hp-acc-content p { padding-bottom: 25px; margin: 0; font-size: 0.95rem; }\r\n\r\n        \/* RESPONSIVE *\/\r\n        @media (max-width: 768px) {\r\n            #hp-advanced-content { padding: 50px 15px; }\r\n            .hp-hero-box { padding: 25px; }\r\n            .hp-steps-wrapper { flex-direction: column; align-items: center; }\r\n            .hp-steps-wrapper::before { \r\n                width: 2px; height: 100%; top: 0; left: 50%; bottom: auto; right: auto;\r\n            }\r\n            .hp-step { width: 100%; background: #0c0c16; padding: 20px; border-radius: 12px; margin-bottom: 10px; border: 1px solid #222; }\r\n            .hp-step-icon-box { margin-bottom: 10px; width: 50px; height: 50px; font-size: 1.2rem; background: #090910; }\r\n            .hp-use-grid { grid-template-columns: 1fr; }\r\n        }\r\n\r\n    <\/style>\r\n\r\n    \r\n\r\n    <!-- SCRIPT -->\r\n    <script>\r\n        document.addEventListener('DOMContentLoaded', function() {\r\n            const accHeaders = document.querySelectorAll('.hp-acc-header');\r\n            \r\n            accHeaders.forEach(header => {\r\n                header.addEventListener('click', () => {\r\n                    const item = header.parentElement;\r\n                    const content = header.nextElementSibling;\r\n                    const isActive = item.classList.contains('active');\r\n                    \r\n                    \/\/ Close all\r\n                    document.querySelectorAll('.hp-acc-item').forEach(i => {\r\n                        i.classList.remove('active');\r\n                        i.querySelector('.hp-acc-content').style.maxHeight = null;\r\n                    });\r\n\r\n                    \/\/ Open clicked if not already active\r\n                    if(!isActive) {\r\n                        item.classList.add('active');\r\n                        content.style.maxHeight = content.scrollHeight + \"px\";\r\n                    }\r\n                });\r\n            });\r\n        });\r\n    <\/script>\r\n<\/div>\r\n\r\n<!-- Content Section Start From Here  -->\r\n\r\n<!-- RELIABLE FONT AWESOME 6 FREE CDN -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\" integrity=\"sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" \/>\r\n\r\n<div id=\"hp-seo-support-container\">\r\n    <style>\r\n        \/* 1. GLOBAL SCOPED STYLES *\/\r\n        #hp-seo-support-container {\r\n            --hp-gold-main: #8e6811;\r\n            --hp-gold-bright: #eec65d;\r\n            --hp-bg-white: #ffffff;\r\n            --hp-bg-alice: #f0f7ff;\r\n            --hp-text-dark: #1a1a1a;\r\n            --hp-text-gray: #4a4a4a;\r\n            --hp-gradient: linear-gradient(135deg, #8e6811 0%, #eec65d 50%, #bfa040 100%);\r\n            --hp-transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n            \r\n            font-family: 'Poppins', sans-serif;\r\n            background-color: var(--hp-bg-white);\r\n            overflow: hidden;\r\n        }\r\n\r\n        .hp-content-section {\r\n            width: 100%;\r\n            padding: 100px 20px;\r\n            box-sizing: border-box;\r\n            display: flex;\r\n            justify-content: center;\r\n        }\r\n\r\n        .hp-section-inner {\r\n            width: 100%;\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        \/* 2. TYPOGRAPHY & HEADINGS *\/\r\n        .hp-heading-box {\r\n            text-align: center;\r\n            margin-bottom: 70px;\r\n        }\r\n\r\n        .hp-wh-title {\r\n            font-family: 'Cinzel Decorative', cursive;\r\n            font-size: clamp(2rem, 5vw, 2.8rem);\r\n            font-weight: 900;\r\n            margin: 0 0 15px 0;\r\n            background: var(--hp-gradient);\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            line-height: 1.2;\r\n        }\r\n\r\n        .hp-wh-subtitle {\r\n            font-size: 1.1rem;\r\n            color: var(--hp-text-gray);\r\n            max-width: 800px;\r\n            margin: 0 auto;\r\n            font-weight: 400;\r\n        }\r\n\r\n        \/* 3. GRID SYSTEM *\/\r\n        .hp-card-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(4, 1fr);\r\n            gap: 25px;\r\n        }\r\n\r\n        .hp-card {\r\n            border-radius: 10px;\r\n            padding: 35px 25px;\r\n            text-align: center;\r\n            position: relative;\r\n            box-sizing: border-box;\r\n            transition: var(--hp-transition);\r\n        }\r\n\r\n        .hp-card i {\r\n            font-size: 2.8rem;\r\n            margin-bottom: 20px;\r\n            display: inline-block;\r\n            color: var(--hp-gold-main);\r\n            transition: var(--hp-transition);\r\n        }\r\n\r\n        .hp-card h3 {\r\n            font-family: 'Cinzel Decorative', cursive;\r\n            font-size: 1.25rem;\r\n            color: var(--hp-text-dark);\r\n            margin: 0 0 12px 0;\r\n        }\r\n\r\n        .hp-card p {\r\n            font-size: 0.95rem;\r\n            color: var(--hp-text-gray);\r\n            margin: 0;\r\n            line-height: 1.6;\r\n        }\r\n\r\n        \/* 4. SECTION SPECIFIC STYLES & INTERACTIONS *\/\r\n\r\n        \/* SECTION 1: WHAT (Magnetic Hover Tilt) *\/\r\n        .hp-sec-1 { background-color: var(--hp-bg-white); }\r\n        .hp-sec-1 .hp-card { \r\n            background-color: var(--hp-bg-alice); \r\n            box-shadow: 0 4px 10px rgba(0,0,0,0.02);\r\n        }\r\n        .hp-card-tilt:hover {\r\n            transform: translateY(-10px) perspective(1000px) rotateX(4deg) rotateY(4deg);\r\n            box-shadow: 0 20px 40px rgba(142, 104, 17, 0.15);\r\n        }\r\n        .hp-card-tilt:hover i {\r\n            transform: scale(1.1) translateZ(20px);\r\n            color: var(--hp-gold-bright);\r\n        }\r\n\r\n        \/* SECTION 2: WHY (Shadow Pulse Echo) *\/\r\n        .hp-sec-2 { background-color: var(--hp-bg-alice); }\r\n        .hp-sec-2 .hp-card { background-color: var(--hp-bg-white); }\r\n        \r\n        .hp-card-pulse:hover {\r\n            box-shadow: 0 0 0 15px rgba(238, 198, 93, 0.08), 0 10px 30px rgba(0,0,0,0.1);\r\n            transform: scale(1.02);\r\n        }\r\n        .hp-card-pulse:hover i {\r\n            animation: hp-icon-wiggle 0.5s ease;\r\n        }\r\n\r\n        @keyframes hp-icon-wiggle {\r\n            0% { transform: rotate(0); }\r\n            25% { transform: rotate(10deg); }\r\n            75% { transform: rotate(-10deg); }\r\n            100% { transform: rotate(0); }\r\n        }\r\n\r\n        \/* SECTION 3: HOW (Diagonal Light Sweep) *\/\r\n        .hp-sec-3 { background-color: var(--hp-bg-white); }\r\n        .hp-sec-3 .hp-card { \r\n            background-color: var(--hp-bg-alice); \r\n            overflow: hidden;\r\n            border: 1px solid transparent;\r\n        }\r\n        \r\n        .hp-card-sweep::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: -50%; left: -100%;\r\n            width: 50%; height: 200%;\r\n            background: rgba(255, 255, 255, 0.4);\r\n            transform: rotate(30deg);\r\n            transition: 0.6s;\r\n            pointer-events: none;\r\n        }\r\n\r\n        .hp-card-sweep:hover::after {\r\n            left: 150%;\r\n        }\r\n\r\n        .hp-card-sweep:hover {\r\n            border-color: var(--hp-gold-bright);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        \/* 5. RESPONSIVE DESIGN *\/\r\n        @media (max-width: 1100px) {\r\n            .hp-card-grid { grid-template-columns: repeat(2, 1fr); }\r\n        }\r\n\r\n        @media (max-width: 650px) {\r\n            .hp-card-grid { grid-template-columns: 1fr; }\r\n            .hp-content-section { padding: 60px 20px; }\r\n            .hp-wh-title { font-size: 1.8rem; }\r\n        }\r\n    <\/style>\r\n\r\n    <!-- SECTION 1: WHAT -->\r\n<section class=\"hp-content-section hp-sec-1\">\r\n        <div class=\"hp-section-inner\">\r\n        \r\n        <\/div>\r\n\t<\/section>\r\n    <section class=\"hp-content-section hp-sec-1\">\r\n        <div class=\"hp-section-inner\">\r\n            <div class=\"hp-heading-box\">\r\n                <h2 class=\"hp-wh-title\">What is a Harry Potter Font Generator?<\/h2>\r\n                <p class=\"hp-wh-subtitle\">Explore the magic behind Unicode technology that turns standard text into cinematic title-style typography instantly.<\/p>\r\n            <\/div>\r\n            <div class=\"hp-card-grid\">\r\n                <div class=\"hp-card hp-card-tilt\">\r\n                    <i class=\"fa-solid fa-wand-magic-sparkles\"><\/i>\r\n                    <h3>Unicode Spells<\/h3>\r\n                    <p>It uses unique character maps to replicate the lightning-scar aesthetic without needing font downloads.<\/p>\r\n                <\/div>\r\n                <div class=\"hp-card hp-card-tilt\">\r\n                    <i class=\"fa-solid fa-bolt-lightning\"><\/i>\r\n                    <h3>Thematic Icons<\/h3>\r\n                    <p>Generates text featuring the iconic lightning \"P\" and jagged edges synonymous with the Wizarding World.<\/p>\r\n                <\/div>\r\n                <div class=\"hp-card hp-card-tilt\">\r\n                    <i class=\"fa-solid fa-scroll\"><\/i>\r\n                    <h3>Parchment Script<\/h3>\r\n                    <p>Includes elegant calligraphy styles reminiscent of hand-written letters from a snowy owl.<\/p>\r\n                <\/div>\r\n                <div class=\"hp-card hp-card-tilt\">\r\n                    <i class=\"fa-solid fa-cloud-moon\"><\/i>\r\n                    <h3>Gothic Aesthetic<\/h3>\r\n                    <p>Provides dark, moody lettering perfect for followers of the Dark Arts and mystery seekers.<\/p>\r\n                <\/div>\r\n                <div class=\"hp-card hp-card-tilt\">\r\n                    <i class=\"fa-solid fa-earth-americas\"><\/i>\r\n                    <h3>Cross-Platform<\/h3>\r\n                    <p>The resulting text is compatible with all modern browsers, social media apps, and operating systems.<\/p>\r\n                <\/div>\r\n                <div class=\"hp-card hp-card-tilt\">\r\n                    <i class=\"fa-solid fa-shield-halved\"><\/i>\r\n                    <h3>House Variants<\/h3>\r\n                    <p>Create text specifically tailored to represent the bravery, wit, or ambition of the four houses.<\/p>\r\n                <\/div>\r\n                <div class=\"hp-card hp-card-tilt\">\r\n                    <i class=\"fa-solid fa-feather-pointed\"><\/i>\r\n                    <h3>Ink & Quill<\/h3>\r\n                    <p>Simulates the variable stroke width of traditional ink-based writing found in ancient library books.<\/p>\r\n                <\/div>\r\n                <div class=\"hp-card hp-card-tilt\">\r\n                    <i class=\"fa-solid fa-mortar-pestle\"><\/i>\r\n                    <h3>Digital Alchemy<\/h3>\r\n                    <p>Converts standard ASCII characters into rare symbols that look like professional graphic design.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 2: WHY -->\r\n    <section class=\"hp-content-section hp-sec-2\">\r\n        <div class=\"hp-section-inner\">\r\n            <div class=\"hp-heading-box\">\r\n                <h2 class=\"hp-wh-title\">Why Use Magical Text Styles?<\/h2>\r\n                <p class=\"hp-wh-subtitle\">Standard fonts are for Muggles. Elevate your digital presence with text that carries the weight of legend and lore.<\/p>\r\n            <\/div>\r\n            <div class=\"hp-card-grid\">\r\n                <div class=\"hp-card hp-card-pulse\">\r\n                    <i class=\"fa-solid fa-share-nodes\"><\/i>\r\n                    <h3>Social Authority<\/h3>\r\n                    <p>Unique fonts increase profile visibility and make your captions stand out in busy social feeds.<\/p>\r\n                <\/div>\r\n                <div class=\"hp-card hp-card-pulse\">\r\n                    <i class=\"fa-solid fa-hat-wizard\"><\/i>\r\n                    <h3>Fan Identity<\/h3>\r\n                    <p>Showcase your love for the wizarding world in every bio, comment, and direct message you send.<\/p>\r\n                <\/div>\r\n                <div class=\"hp-card hp-card-pulse\">\r\n                    <i class=\"fa-solid fa-id-badge\"><\/i>\r\n                    <h3>Gaming Tags<\/h3>\r\n                    <p>Create intimidating and stylish usernames for RPGs, MMOs, and wizard-themed gaming platforms.<\/p>\r\n                <\/div>\r\n                <div class=\"hp-card hp-card-pulse\">\r\n                    <i class=\"fa-solid fa-envelope\"><\/i>\r\n                    <h3>Digital Invites<\/h3>\r\n                    <p>Make your online party invitations feel like official Ministry correspondence or acceptance letters.<\/p>\r\n                <\/div>\r\n                <div class=\"hp-card hp-card-pulse\">\r\n                    <i class=\"fa-solid fa-pen-nib\"><\/i>\r\n                    <h3>Creative Writing<\/h3>\r\n                    <p>Help set the mood for fan fiction or role-playing threads with immersive headers and titles.<\/p>\r\n                <\/div>\r\n                <div class=\"hp-card hp-card-pulse\">\r\n                    <i class=\"fa-solid fa-comment-dots\"><\/i>\r\n                    <h3>Chat Customization<\/h3>\r\n                    <p>Break the monotony of standard chat apps by sending messages that look like they were cast as a spell.<\/p>\r\n                <\/div>\r\n                <div class=\"hp-card hp-card-pulse\">\r\n                    <i class=\"fa-solid fa-ranking-star\"><\/i>\r\n                    <h3>Brand Distinction<\/h3>\r\n                    <p>Small businesses and fan-shops use these styles for logos and promotional social media posts.<\/p>\r\n                <\/div>\r\n                <div class=\"hp-card hp-card-pulse\">\r\n                    <i class=\"fa-solid fa-mask\"><\/i>\r\n                    <h3>Anonymity & Style<\/h3>\r\n                    <p>Style your text to add a layer of mystery and personality to your online persona.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 3: HOW -->\r\n    <section class=\"hp-content-section hp-sec-3\">\r\n        <div class=\"hp-section-inner\">\r\n            <div class=\"hp-heading-box\">\r\n                <h2 class=\"hp-wh-title\">How to Generate Magical Text?<\/h2>\r\n                <p class=\"hp-wh-subtitle\">Mastering the art of text transfiguration is simple. Follow this guide to start your journey into magical lettering.<\/p>\r\n            <\/div>\r\n            <div class=\"hp-card-grid\">\r\n                <div class=\"hp-card hp-card-sweep\">\r\n                    <i class=\"fa-solid fa-keyboard\"><\/i>\r\n                    <h3>1. Input Words<\/h3>\r\n                    <p>Type your name, house, or favorite spell into the generator box at the top of this page.<\/p>\r\n                <\/div>\r\n                <div class=\"hp-card hp-card-sweep\">\r\n                    <i class=\"fa-solid fa-wand-magic\"><\/i>\r\n                    <h3>2. Live Transform<\/h3>\r\n                    <p>The magic happens instantly as you type. Watch as multiple styles appear in the preview list.<\/p>\r\n                <\/div>\r\n                <div class=\"hp-card hp-card-sweep\">\r\n                    <i class=\"fa-solid fa-list-check\"><\/i>\r\n                    <h3>3. Compare Styles<\/h3>\r\n                    <p>Browse through gothic, lightning, and script variations to find the perfect match for your needs.<\/p>\r\n                <\/div>\r\n                <div class=\"hp-card hp-card-sweep\">\r\n                    <i class=\"fa-solid fa-hand-pointer\"><\/i>\r\n                    <h3>4. Quick Select<\/h3>\r\n                    <p>Click the copy button on the style you like. The spell is now safely stored in your clipboard.<\/p>\r\n                <\/div>\r\n                <div class=\"hp-card hp-card-sweep\">\r\n                    <i class=\"fa-solid fa-paste\"><\/i>\r\n                    <h3>5. Paste Anywhere<\/h3>\r\n                    <p>Use 'Paste' in your Instagram bio, Discord server, or Twitter profile to display the magic.<\/p>\r\n                <\/div>\r\n                <div class=\"hp-card hp-card-sweep\">\r\n                    <i class=\"fa-solid fa-gear\"><\/i>\r\n                    <h3>6. Refine & Edit<\/h3>\r\n                    <p>Need a change? Just update the input box to instantly refresh all styles without reloading.<\/p>\r\n                <\/div>\r\n                <div class=\"hp-card hp-card-sweep\">\r\n                    <i class=\"fa-solid fa-magnifying-glass\"><\/i>\r\n                    <h3>7. Discover More<\/h3>\r\n                    <p>Click 'Load More' to reveal even deeper, more complex runic and cursed text styles.<\/p>\r\n                <\/div>\r\n                <div class=\"hp-card hp-card-sweep\">\r\n                    <i class=\"fa-solid fa-infinity\"><\/i>\r\n                    <h3>8. Repeat Always<\/h3>\r\n                    <p>The tool is free and unlimited. Cast as many text spells as your magical heart desires!<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n<\/div>\r\n\r\n<\/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-7114","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/raistheme.com\/wp-json\/wp\/v2\/pages\/7114","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=7114"}],"version-history":[{"count":5,"href":"https:\/\/raistheme.com\/wp-json\/wp\/v2\/pages\/7114\/revisions"}],"predecessor-version":[{"id":7241,"href":"https:\/\/raistheme.com\/wp-json\/wp\/v2\/pages\/7114\/revisions\/7241"}],"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=7114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}