{"id":507,"date":"2026-03-19T00:00:01","date_gmt":"2026-03-19T00:00:01","guid":{"rendered":"https:\/\/onlinetexteditor.io\/?page_id=507"},"modified":"2026-04-06T06:39:17","modified_gmt":"2026-04-06T06:39:17","slug":"gothic-text-generator","status":"publish","type":"page","link":"https:\/\/onlinetexteditor.io\/it\/gothic-text-generator\/","title":{"rendered":"Gothic Text Generator \u2013 Style Instantly"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; fullwidth=&#8221;on&#8221; theme_builder_area=&#8221;post_content&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221;][et_pb_fullwidth_code _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; theme_builder_area=&#8221;post_content&#8221; hover_enabled=&#8221;0&#8243; sticky_enabled=&#8221;0&#8243;]<!-- START OF FILE Gothic Text Generator -->\r\n\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n<style>\r\n    .pg-tool-wrapper {\r\n        \/* TYPOGRAPHY - SYSTEM SAFEST & BOLD *\/\r\n        --primary-font: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\r\n        --body-font: \"Times New Roman\", \"Georgia\", \"Palatino Linotype\", serif;\r\n        \r\n        \/* THEME PALETTE - GOTHIC (CRIMSON, GOLD & VOID) *\/\r\n        --theme-panel: rgba(13, 9, 10, 0.96); \r\n        --theme-panel-hover: rgba(20, 10, 12, 0.98);\r\n        --theme-border: rgba(139, 0, 0, 0.4); \r\n        \r\n        \/* GOTHIC ACCENTS *\/\r\n        --goth-crimson: #c8102e;\r\n        --goth-darkred: #8b0000;\r\n        --goth-gold: #d4af37;\r\n        --void-dark: #050203;\r\n        --text-bright: #f4e8e8;\r\n        --text-muted: #a09596;\r\n        \r\n        \/* GRADIENTS - MAINTAINING PREVIOUS MASTER BACKGROUND *\/\r\n        --grad-master: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        --grad-gothic: linear-gradient(135deg, #8b0000 0%, #4a0000 100%);\r\n        --grad-gold: linear-gradient(135deg, #d4af37 0%, #8a7322 100%);\r\n        --grad-shimmer: linear-gradient(90deg, transparent, rgba(200, 16, 46, 0.4), transparent);\r\n        \r\n        \/* SHADOWS & GLOWS *\/\r\n        --glow-crimson: 0 0 25px rgba(200, 16, 46, 0.5);\r\n        --glow-gold: 0 0 20px rgba(212, 175, 55, 0.4);\r\n        --shadow-ui: 0 20px 50px rgba(0, 0, 0, 0.9);\r\n        --glass-blur: blur(12px);\r\n        \r\n        --transition-ui: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n        --transition-fast: all 0.2s ease;\r\n        \r\n        font-family: var(--primary-font);\r\n        color: var(--text-bright);\r\n        line-height: 1.5;\r\n        width: 100%;\r\n        overflow-x: hidden;\r\n        text-align: center; \r\n        \r\n        background: var(--grad-master);\r\n        background-attachment: fixed;\r\n    }\r\n\r\n    .pg-tool-wrapper * { box-sizing: border-box; }\r\n\r\n    \/* SAFETY OVERRIDES *\/\r\n    .pg-container {\r\n        max-width: 1200px !important;\r\n        width: 100% !important;\r\n        margin: 0 auto !important;\r\n        padding: 40px 20px !important;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n    }\r\n\r\n    .pg-hero-content-wrapper {\r\n        z-index: 2;\r\n        padding-top: 20px;\r\n        width: 100%;\r\n    }\r\n\r\n    \/* TITLE STYLES - GOTHIC TYPOGRAPHY WITH ICON *\/\r\n    .pg-main-title {\r\n        font-family: var(--primary-font);\r\n        font-size: 3.2rem;\r\n        font-weight: 900; \r\n        line-height: 1.1;\r\n        margin: 0 auto 15px auto;\r\n        text-transform: uppercase;\r\n        letter-spacing: 3px;\r\n        color: #fff;\r\n        text-shadow: 2px 2px 0 #000, -1px -1px 15px rgba(200,16,46,0.6);\r\n        max-width: 900px;\r\n        position: relative;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        flex-wrap: wrap;\r\n        gap: 15px;\r\n        transition: var(--transition-ui);\r\n    }\r\n    \r\n    .pg-main-title i {\r\n        color: var(--goth-crimson);\r\n        text-shadow: var(--glow-crimson);\r\n        transition: transform 0.4s ease;\r\n    }\r\n    \r\n    .pg-main-title:hover i {\r\n        transform: rotate(15deg) scale(1.1);\r\n    }\r\n\r\n    .pg-main-title:hover {\r\n        letter-spacing: 5px;\r\n        text-shadow: 3px 3px 0 #000, 0 0 20px var(--goth-crimson);\r\n    }\r\n    \r\n    .pg-main-title::after {\r\n        content: '';\r\n        position: absolute;\r\n        bottom: -20px;\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        display: block;\r\n        width: 100px;\r\n        height: 4px;\r\n        background: var(--grad-gothic);\r\n        box-shadow: var(--glow-crimson);\r\n        border-radius: 5px;\r\n        transition: var(--transition-ui);\r\n    }\r\n    \r\n    .pg-main-title:hover::after {\r\n        width: 350px;\r\n        background: var(--grad-gold);\r\n        box-shadow: var(--glow-gold);\r\n    }\r\n    \r\n    .pg-subtitle {\r\n        font-family: system-ui, sans-serif;\r\n        font-size: 1.15rem;\r\n        color: rgba(255, 255, 255, 0.85);\r\n        max-width: 750px;\r\n        margin: 30px auto 35px auto;\r\n        padding: 0 10px;\r\n        font-weight: 500;\r\n        letter-spacing: 0.5px;\r\n        text-shadow: 0 2px 5px rgba(0,0,0,0.8);\r\n    }\r\n\r\n    \/* MAIN GENERATOR CARD *\/\r\n    .pg-generator-card {\r\n        background: var(--theme-panel);\r\n        backdrop-filter: var(--glass-blur);\r\n        -webkit-backdrop-filter: var(--glass-blur);\r\n        border: 1px solid var(--theme-border); \r\n        border-top-width: 4px;\r\n        border-top-color: var(--goth-crimson);\r\n        width: 100%;\r\n        box-shadow: var(--shadow-ui), inset 0 0 25px rgba(139, 0, 0, 0.15); \r\n        border-radius: 16px;\r\n        position: relative;\r\n        transform: translateY(0);\r\n        transition: var(--transition-ui);\r\n        overflow: hidden;\r\n    }\r\n\r\n    \/* CONTROLS LAYOUT - ASYMMETRIC SPLIT *\/\r\n    .pg-controls-wrapper {\r\n        padding: 35px;\r\n        background: linear-gradient(180deg, rgba(13,9,10,0.8) 0%, rgba(5,2,3,0.95) 100%);\r\n        border-bottom: 1px solid rgba(200, 16, 46, 0.2);\r\n        display: grid;\r\n        grid-template-columns: 1.4fr 1fr;\r\n        gap: 30px;\r\n        align-items: stretch;\r\n    }\r\n\r\n    \/* ENHANCED INPUT SECTION *\/\r\n    .pg-input-section {\r\n        width: 100%;\r\n        display: flex;\r\n        flex-direction: column;\r\n        height: 100%;\r\n    }\r\n    \r\n    .pg-enhanced-input-wrapper {\r\n        background: rgba(0, 0, 0, 0.6);\r\n        border: 1px solid rgba(139, 0, 0, 0.4);\r\n        border-radius: 12px;\r\n        overflow: hidden;\r\n        display: flex;\r\n        flex-direction: column;\r\n        flex-grow: 1;\r\n        transition: var(--transition-ui);\r\n        box-shadow: inset 0 0 20px rgba(0,0,0,0.9);\r\n    }\r\n\r\n    .pg-enhanced-input-wrapper:focus-within {\r\n        border-color: var(--goth-crimson);\r\n        box-shadow: inset 0 0 20px rgba(200, 16, 46, 0.15), 0 0 15px rgba(200, 16, 46, 0.3);\r\n    }\r\n    \r\n    .pg-text-input {\r\n        width: 100% !important;\r\n        min-height: 140px !important;\r\n        flex-grow: 1;\r\n        padding: 25px !important;\r\n        background: transparent !important;\r\n        border: none !important;\r\n        color: #fff !important;\r\n        font-family: var(--body-font) !important;\r\n        font-weight: 500 !important;\r\n        font-size: 1.7rem !important;\r\n        outline: none !important;\r\n        text-align: center !important;\r\n        text-shadow: 0 2px 4px rgba(0,0,0,0.9);\r\n        white-space: pre-wrap !important;\r\n        word-break: break-word !important;\r\n        overflow-wrap: break-word !important;\r\n        resize: none;\r\n    }\r\n    \r\n    .pg-text-input::placeholder {\r\n        color: rgba(255, 255, 255, 0.3);\r\n        font-style: italic;\r\n    }\r\n\r\n    \/* TOOLBAR *\/\r\n    .pg-input-toolbar {\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        flex-wrap: wrap;\r\n        gap: 10px;\r\n        background: rgba(5, 2, 3, 0.8);\r\n        padding: 15px;\r\n        border-top: 1px solid rgba(139, 0, 0, 0.3);\r\n    }\r\n\r\n    .pg-toolbar-btn {\r\n        background: rgba(255, 255, 255, 0.03);\r\n        color: var(--text-muted);\r\n        border: 1px solid rgba(255, 255, 255, 0.08);\r\n        padding: 8px 14px;\r\n        font-family: system-ui, sans-serif;\r\n        font-size: 0.75rem;\r\n        font-weight: 600;\r\n        border-radius: 6px;\r\n        cursor: pointer;\r\n        transition: var(--transition-fast);\r\n        text-transform: uppercase;\r\n        letter-spacing: 1px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n    }\r\n\r\n    .pg-toolbar-btn i { transition: transform 0.2s ease; }\r\n\r\n    .pg-toolbar-btn:hover {\r\n        background: rgba(200, 16, 46, 0.15);\r\n        color: var(--goth-gold);\r\n        border-color: var(--goth-crimson);\r\n        box-shadow: 0 0 10px rgba(200, 16, 46, 0.3);\r\n    }\r\n\r\n    .pg-toolbar-btn:hover i { transform: translateY(-2px); color: var(--goth-gold); }\r\n    .pg-toolbar-btn:active { transform: scale(0.95); }\r\n    \r\n    .pg-preset-select {\r\n        background: rgba(139, 0, 0, 0.15);\r\n        color: var(--text-bright);\r\n        border: 1px solid rgba(139, 0, 0, 0.4);\r\n        padding: 8px 14px;\r\n        font-family: system-ui, sans-serif;\r\n        font-size: 0.75rem;\r\n        font-weight: 700;\r\n        border-radius: 6px;\r\n        cursor: pointer;\r\n        outline: none;\r\n        transition: var(--transition-fast);\r\n        text-transform: uppercase;\r\n        appearance: none;\r\n        flex-grow: 1;\r\n        max-width: 220px;\r\n    }\r\n    \r\n    .pg-preset-select:hover, .pg-preset-select:focus {\r\n        background: var(--goth-crimson);\r\n        color: #fff;\r\n        border-color: var(--goth-crimson);\r\n        box-shadow: var(--glow-crimson);\r\n    }\r\n    \r\n    .pg-preset-select option {\r\n        background: var(--void-dark);\r\n        color: #fff;\r\n    }\r\n\r\n    \/* SETTINGS SECTION *\/\r\n    .pg-settings-section {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 25px;\r\n    }\r\n\r\n    .pg-panel-label {\r\n        display: flex;\r\n        align-items: center;\r\n        font-family: system-ui, sans-serif;\r\n        font-size: 0.85rem;\r\n        font-weight: 800;\r\n        color: rgba(255,255,255,0.8);\r\n        text-transform: uppercase;\r\n        letter-spacing: 2px;\r\n        margin-bottom: 12px;\r\n    }\r\n    \r\n    .pg-panel-label i {\r\n        color: var(--goth-crimson);\r\n        margin-right: 10px;\r\n        font-size: 1.1rem;\r\n    }\r\n\r\n    .pg-grid-options {\r\n        display: grid;\r\n        gap: 12px;\r\n        grid-template-columns: repeat(2, 1fr);\r\n    }\r\n\r\n    .pg-option-btn {\r\n        background: rgba(0, 0, 0, 0.4);\r\n        border: 1px solid rgba(255, 255, 255, 0.05);\r\n        padding: 16px 10px;\r\n        color: var(--text-muted);\r\n        font-family: system-ui, sans-serif;\r\n        font-size: 0.75rem;\r\n        font-weight: 700;\r\n        cursor: pointer;\r\n        border-radius: 8px;\r\n        transition: var(--transition-fast);\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.5px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        gap: 8px;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n    \r\n    .pg-option-btn i {\r\n        font-size: 1.4rem;\r\n        transition: var(--transition-ui);\r\n    }\r\n\r\n    \/* MICRO-INTERACTIONS: Shimmer Sweep *\/\r\n    .pg-option-btn::after {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: -100%; width: 50%; height: 100%;\r\n        background: linear-gradient(90deg, transparent, rgba(200,16,46,0.2), transparent);\r\n        transform: skewX(-20deg);\r\n        transition: left 0.5s ease;\r\n    }\r\n\r\n    .pg-option-btn:hover {\r\n        background: rgba(139, 0, 0, 0.1);\r\n        border-color: rgba(200, 16, 46, 0.4);\r\n        color: #fff;\r\n        transform: translateY(-2px);\r\n    }\r\n    \r\n    .pg-option-btn:hover::after { left: 200%; }\r\n\r\n    .pg-option-btn:hover i {\r\n        transform: scale(1.15);\r\n        color: var(--goth-gold);\r\n    }\r\n\r\n    .pg-option-btn.active { \r\n        background: var(--grad-gothic);\r\n        color: #fff; \r\n        border-color: var(--goth-crimson);\r\n        box-shadow: 0 0 15px rgba(139, 0, 0, 0.5);\r\n    }\r\n    \r\n    .pg-option-btn.active i {\r\n        color: var(--goth-gold);\r\n        text-shadow: var(--glow-gold);\r\n    }\r\n\r\n    \/* RESULTS AREA - 1 CARD PER ROW REQUIRED *\/\r\n    .pg-results-area { \r\n        padding: 40px 30px; \r\n        position: relative; \r\n    }\r\n    \r\n    .pg-result-list {\r\n        display: grid;\r\n        grid-template-columns: 1fr; \r\n        gap: 20px;\r\n        position: relative; \r\n        z-index: 2;\r\n    }\r\n\r\n    \/* MICRO-INTERACTION: Card Hover Lift & Crimson Glow *\/\r\n    .pg-result-card {\r\n        background: rgba(10, 5, 6, 0.8);\r\n        border: 1px dashed rgba(200, 16, 46, 0.2);\r\n        padding: 25px 35px;\r\n        transition: var(--transition-ui);\r\n        position: relative;\r\n        overflow: hidden;\r\n        border-radius: 12px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        min-height: 120px; \r\n        box-sizing: border-box;\r\n    }\r\n    \r\n    .pg-result-card::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; width: 0; height: 100%;\r\n        background: var(--grad-gothic);\r\n        transition: width 0.3s ease;\r\n        opacity: 0.8;\r\n    }\r\n    \r\n    .pg-result-card:hover {\r\n        transform: translateY(-5px);\r\n        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.9), 0 0 25px rgba(200, 16, 46, 0.15);\r\n        border-color: rgba(200, 16, 46, 0.5);\r\n        border-style: solid;\r\n        background: rgba(15, 8, 9, 0.95);\r\n        z-index: 10;\r\n    }\r\n    \r\n    .pg-result-card:hover::before { width: 5px; }\r\n\r\n    \/* CARD HEADER & COPY ICON *\/\r\n    .pg-card-header {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        width: 100%;\r\n        margin-bottom: 20px;\r\n        border-bottom: 1px solid rgba(255,255,255,0.05);\r\n        padding-bottom: 15px;\r\n    }\r\n    \r\n    .pg-card-title {\r\n        font-family: system-ui, sans-serif;\r\n        font-size: 0.85rem;\r\n        font-weight: 800;\r\n        color: var(--text-muted);\r\n        text-transform: uppercase;\r\n        letter-spacing: 1.5px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        transition: var(--transition-fast);\r\n    }\r\n    \r\n    .pg-card-title i {\r\n        color: var(--goth-gold);\r\n        font-size: 1.1rem;\r\n    }\r\n\r\n    .pg-result-card:hover .pg-card-title {\r\n        color: #fff;\r\n        letter-spacing: 2px;\r\n        text-shadow: 0 0 10px rgba(212,175,55,0.4);\r\n    }\r\n\r\n    \/* MANDATORY COPY ICON BUTTON - Icon Bounce *\/\r\n    .pg-card-copy-btn {\r\n        background: rgba(255, 255, 255, 0.05);\r\n        border: 1px solid rgba(255, 255, 255, 0.1);\r\n        color: var(--text-bright);\r\n        width: 42px;\r\n        height: 42px;\r\n        border-radius: 8px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        cursor: pointer;\r\n        transition: var(--transition-fast);\r\n        outline: none;\r\n        flex-shrink: 0;\r\n        z-index: 5;\r\n    }\r\n    \r\n    .pg-card-copy-btn i {\r\n        font-size: 1.2rem;\r\n        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n    }\r\n    \r\n    .pg-card-copy-btn:hover {\r\n        background: rgba(200, 16, 46, 0.2);\r\n        border-color: var(--goth-crimson);\r\n        color: var(--goth-gold);\r\n        box-shadow: var(--glow-crimson);\r\n        transform: scale(1.05);\r\n    }\r\n    \r\n    .pg-card-copy-btn:hover i { transform: scale(1.2) translateY(-2px); }\r\n    .pg-card-copy-btn:active { transform: scale(0.95); }\r\n\r\n    \/* CRITICAL TEXT WRAP FIX *\/\r\n    .pg-card-preview {\r\n        font-size: 1.8rem;\r\n        color: #fff;\r\n        width: 100%;\r\n        text-align: center;\r\n        font-family: var(--body-font);\r\n        position: relative;\r\n        z-index: 1;\r\n        padding: 15px; \r\n        transition: var(--transition-fast);\r\n        \r\n        \/* THE FIX - Ensures all massive texts break properly *\/\r\n        white-space: pre-wrap !important;\r\n        word-break: break-word !important;\r\n        overflow-wrap: break-word !important;\r\n        box-sizing: border-box !important;\r\n        text-shadow: 2px 2px 5px #000;\r\n    }\r\n    \r\n    .pg-result-card:hover .pg-card-preview {\r\n        color: var(--goth-gold);\r\n        text-shadow: 2px 2px 8px #000, 0 0 15px rgba(200,16,46,0.3);\r\n    }\r\n\r\n    \/* LOAD MORE CTA - Pulse Ring *\/\r\n    .pg-btn-load {\r\n        background: rgba(0, 0, 0, 0.6);\r\n        backdrop-filter: blur(4px);\r\n        color: #fff;\r\n        border: 1px solid var(--goth-crimson);\r\n        padding: 18px 45px;\r\n        font-family: system-ui, sans-serif;\r\n        font-weight: 800;\r\n        font-size: 1rem;\r\n        cursor: pointer;\r\n        margin-top: 40px;\r\n        text-transform: uppercase;\r\n        border-radius: 8px;\r\n        transition: var(--transition-fast);\r\n        position: relative;\r\n        z-index: 2;\r\n        letter-spacing: 2px;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        box-shadow: 0 5px 15px rgba(0,0,0,0.6);\r\n    }\r\n    \r\n    .pg-btn-load::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; right: 0; bottom: 0;\r\n        border-radius: 8px;\r\n        border: 1px solid var(--goth-crimson);\r\n        opacity: 0;\r\n        transition: all 0.4s ease;\r\n        z-index: -1;\r\n    }\r\n    \r\n    .pg-btn-load i { transition: transform 0.3s ease; }\r\n    \r\n    .pg-btn-load:hover { \r\n        background: rgba(200, 16, 46, 0.15); \r\n        box-shadow: var(--glow-crimson);\r\n        transform: translateY(-3px);\r\n    }\r\n    \r\n    .pg-btn-load:hover::before {\r\n        transform: scale(1.05, 1.2);\r\n        opacity: 1;\r\n        border-color: transparent;\r\n    }\r\n    \r\n    .pg-btn-load:hover i { transform: translateY(4px); color: var(--goth-gold); }\r\n    .pg-btn-load:active { transform: translateY(0); }\r\n\r\n    \/* TOAST ALERT *\/\r\n    .pg-toast {\r\n        visibility: hidden;\r\n        background: rgba(13, 9, 10, 0.95);\r\n        backdrop-filter: blur(10px);\r\n        color: #fff;\r\n        padding: 15px 30px;\r\n        position: fixed;\r\n        left: 50%;\r\n        bottom: 40px;\r\n        transform: translateX(-50%) translateY(20px);\r\n        font-family: system-ui, sans-serif;\r\n        font-weight: 800;\r\n        z-index: 10000;\r\n        border-radius: 8px;\r\n        border: 1px solid var(--goth-crimson);\r\n        border-left: 5px solid var(--goth-crimson);\r\n        text-transform: uppercase;\r\n        box-shadow: var(--shadow-ui), var(--glow-crimson);\r\n        letter-spacing: 1px;\r\n        opacity: 0;\r\n        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n    }\r\n    \r\n    .pg-toast i { color: var(--goth-gold); font-size: 1.2rem; }\r\n    \r\n    .pg-toast.show { \r\n        visibility: visible; \r\n        opacity: 1;\r\n        transform: translateX(-50%) translateY(0);\r\n    }\r\n\r\n    \/* RESPONSIVE DESIGN *\/\r\n    @media (max-width: 900px) {\r\n        .pg-main-title { font-size: 2.4rem; } \r\n        .pg-controls-wrapper { grid-template-columns: 1fr; }\r\n    }\r\n\r\n    @media (max-width: 600px) {\r\n        .pg-container { padding: 30px 15px !important; }\r\n        .pg-results-area { padding: 30px 15px; }\r\n        .pg-controls-wrapper { padding: 20px; gap: 20px; }\r\n        .pg-text-input { min-height: 100px !important; font-size: 1.4rem !important; }\r\n        .pg-input-toolbar { justify-content: center; }\r\n        .pg-preset-select { max-width: 100%; text-align: center; }\r\n        .pg-result-list { grid-template-columns: 1fr; gap: 15px; } \r\n        .pg-option-btn { padding: 12px 8px; font-size: 0.7rem; }\r\n        .pg-option-btn i { font-size: 1.1rem; }\r\n        .pg-btn-load { padding: 15px 30px; font-size: 0.9rem; width: 100%; justify-content: center; }\r\n        .pg-main-title { font-size: 1.8rem; }\r\n        .pg-subtitle { font-size: 0.9rem; }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"pg-tool-wrapper\" id=\"pg-gothic-text-tool\">\r\n    <div class=\"pg-container pg-hero-content-wrapper\">\r\n        <h1 class=\"pg-main-title\"><i class=\"fa-solid fa-chess-rook\"><\/i> Gothic Text Generator - Style Instantly<\/h1>\r\n        <p class=\"pg-subtitle\">Convert standard text into dense, medieval Blackletter or clean Modern Gothic fonts. Perfect for dark aesthetics, fantasy lore, and elegant manuscript styles.<\/p>\r\n        \r\n        <div class=\"pg-generator-card\">\r\n            <div class=\"pg-controls-wrapper\">\r\n                \r\n                <!-- LEFT COLUMN: INPUT SECTION -->\r\n                <div class=\"pg-input-section\">\r\n                    <div class=\"pg-panel-label\"><i class=\"fa-solid fa-feather-pointed\"><\/i> Inscribe Your Text<\/div>\r\n                    <div class=\"pg-enhanced-input-wrapper\">\r\n                        <textarea class=\"pg-text-input\" id=\"pgInputText\" placeholder=\"Enter thy words here...\"><\/textarea>\r\n                        \r\n                        <div class=\"pg-input-toolbar\">\r\n                            <button class=\"pg-toolbar-btn\" id=\"pgBtnPaste\"><i class=\"fa-solid fa-paste\"><\/i> Paste<\/button>\r\n                            <button class=\"pg-toolbar-btn\" id=\"pgBtnSelectAll\"><i class=\"fa-solid fa-object-group\"><\/i> Select<\/button>\r\n                            <button class=\"pg-toolbar-btn\" id=\"pgBtnCopy\"><i class=\"fa-solid fa-copy\"><\/i> Copy Base<\/button>\r\n                            \r\n                            <select class=\"pg-preset-select\" id=\"pgPresetSelect\">\r\n                                <option value=\"\" disabled selected>\u2728 Gothic Lore Presets<\/option>\r\n                                <option value=\"Vampires are not bound by mortal laws.\">Vampire's Creed<\/option>\r\n                                <option value=\"The night is dark and full of terrors.\">Dark Night<\/option>\r\n                                <option value=\"Abandon all hope, ye who enter here.\">Inferno Gate<\/option>\r\n                                <option value=\"Shadows gather where the light fades.\">Shadow's Edge<\/option>\r\n                                <option value=\"What is dead may never die.\">Ancient Vow<\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <!-- RIGHT COLUMN: SETTINGS GRID -->\r\n                <div class=\"pg-settings-section\">\r\n                    <div>\r\n                        <div class=\"pg-panel-label\"><i class=\"fa-solid fa-scroll\"><\/i> Typography Style<\/div>\r\n                        <div class=\"pg-grid-options\">\r\n                            <button class=\"pg-option-btn mode-btn active\" data-val=\"Fraktur\">\r\n                                <i class=\"fa-solid fa-g\"><\/i> Classic Fraktur\r\n                            <\/button>\r\n                            <button class=\"pg-option-btn mode-btn\" data-val=\"BoldFraktur\">\r\n                                <i class=\"fa-solid fa-bold\"><\/i> Bold Fraktur\r\n                            <\/button>\r\n                            <button class=\"pg-option-btn mode-btn\" data-val=\"Modern\">\r\n                                <i class=\"fa-solid fa-font\"><\/i> Modern Clean\r\n                            <\/button>\r\n                            <button class=\"pg-option-btn mode-btn\" data-val=\"Double\">\r\n                                <i class=\"fa-solid fa-heading\"><\/i> Double Struck\r\n                            <\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div>\r\n                        <div class=\"pg-panel-label\"><i class=\"fa-solid fa-wand-magic-sparkles\"><\/i> Embellishments<\/div>\r\n                        <div class=\"pg-grid-options\">\r\n                            <button class=\"pg-option-btn style-btn active\" data-val=\"None\">\r\n                                <i class=\"fa-solid fa-ban\"><\/i> Standard\r\n                            <\/button>\r\n                            <button class=\"pg-option-btn style-btn\" data-val=\"Daggers\">\r\n                                <i class=\"fa-solid fa-cross\"><\/i> Daggers\r\n                            <\/button>\r\n                            <button class=\"pg-option-btn style-btn\" data-val=\"Flourish\">\r\n                                <i class=\"fa-solid fa-seedling\"><\/i> Flourish\r\n                            <\/button>\r\n                            <button class=\"pg-option-btn style-btn\" data-val=\"Corrupted\">\r\n                                <i class=\"fa-solid fa-spider\"><\/i> Corrupted\r\n                            <\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"pg-results-area\">\r\n                <div class=\"pg-result-list\" id=\"pgResultList\"><\/div>\r\n                <button class=\"pg-btn-load\" id=\"pgLoadMoreBtn\"><span>Unearth More Lore<\/span> <i class=\"fa-solid fa-arrow-down\"><\/i><\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <div id=\"pgToast\" class=\"pg-toast\"><i class=\"fa-solid fa-check-double\"><\/i> Manuscript Copied<\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n    \/\/ Scoped container\r\n    const wrapper = document.getElementById('pg-gothic-text-tool');\r\n    const inputEl = wrapper.querySelector('#pgInputText');\r\n    const resultList = wrapper.querySelector('#pgResultList');\r\n    const loadMoreBtn = wrapper.querySelector('#pgLoadMoreBtn');\r\n    const toast = wrapper.querySelector('#pgToast');\r\n    \r\n    const btnPaste = wrapper.querySelector('#pgBtnPaste');\r\n    const btnSelectAll = wrapper.querySelector('#pgBtnSelectAll');\r\n    const btnCopy = wrapper.querySelector('#pgBtnCopy');\r\n    const presetSelect = wrapper.querySelector('#pgPresetSelect');\r\n\r\n    let currentMode = 'Fraktur';\r\n    let currentStyle = 'None';\r\n    let limit = 6; \r\n    const LOAD_INCREMENT = 6; \r\n\r\n    \/\/ Proper Array handling for surrogate pairs\r\n    const baseStr = \"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ\";\r\n    const baseArr = Array.from(baseStr);\r\n    \r\n    \/\/ Fraktur - Handling standard unicode mapped points for C, H, I, R, Z properly via literal strings mapped\r\n    const frakturArr = Array.from(\"\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\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\");\r\n    const boldFrakturArr = Array.from(\"\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\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\");\r\n    const smallCapsArr = Array.from(\"\u1d00\u0299\u1d04\u1d05\u1d07\u0493\u0262\u029c\u026a\u1d0a\u1d0b\u029f\u1d0d\u0274\u1d0f\u1d18\u01eb\u0280s\u1d1b\u1d1c\u1d20\u1d21x\u028f\u1d22\u1d00\u0299\u1d04\u1d05\u1d07\u0493\u0262\u029c\u026a\u1d0a\u1d0b\u029f\u1d0d\u0274\u1d0f\u1d18\u01eb\u0280s\u1d1b\u1d1c\u1d20\u1d21x\u028f\u1d22\");\r\n    const doubleStruckArr = Array.from(\"\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\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\");\r\n    \r\n    const zalgoUp = ['\\u030d', '\\u030e', '\\u0304', '\\u0305', '\\u033f', '\\u0311', '\\u0306', '\\u0310'];\r\n    const zalgoDown = ['\\u0316', '\\u0317', '\\u0318', '\\u0319', '\\u031c', '\\u031d', '\\u031e', '\\u031f'];\r\n    \r\n    const rand = (max) => Math.floor(Math.random() * max);\r\n\r\n    \/\/ Ultimate fallback copy function\r\n    const copyToClipboard = (text, btnElement) => {\r\n        const textArea = document.createElement(\"textarea\");\r\n        textArea.value = text;\r\n        textArea.style.top = \"0\";\r\n        textArea.style.left = \"0\";\r\n        textArea.style.position = \"fixed\";\r\n        textArea.style.opacity = \"0\";\r\n        document.body.appendChild(textArea);\r\n        textArea.focus();\r\n        textArea.select();\r\n        \r\n        try {\r\n            document.execCommand('copy');\r\n            showToast(btnElement);\r\n        } catch (err) {\r\n            console.error('Fallback: Oops, unable to copy', err);\r\n            if (navigator.clipboard) {\r\n                navigator.clipboard.writeText(text).then(() => showToast(btnElement));\r\n            }\r\n        }\r\n        document.body.removeChild(textArea);\r\n    };\r\n\r\n    const showToast = (btn) => {\r\n        if(btn) {\r\n            btn.innerHTML = '<i class=\"fa-solid fa-check\"><\/i>';\r\n            btn.style.background = 'var(--goth-crimson)';\r\n            btn.style.borderColor = 'var(--goth-crimson)';\r\n            btn.style.color = '#fff';\r\n            \r\n            setTimeout(() => {\r\n                btn.innerHTML = '<i class=\"fa-regular fa-copy\"><\/i>';\r\n                btn.style.background = '';\r\n                btn.style.borderColor = '';\r\n                btn.style.color = '';\r\n            }, 2000);\r\n        }\r\n        \r\n        toast.classList.add('show');\r\n        setTimeout(() => toast.classList.remove('show'), 2000);\r\n    };\r\n\r\n    \/\/ Generate 120 configurations for massive live preview\r\n    const generateConfigs = () => {\r\n        const templates = [];\r\n        const names = [\r\n            'Blood Manuscript', 'Vampire Lord', 'Dark Citadel', 'Gargoyle Core', \r\n            'Cursed Crown', 'Ancient Tome', 'Midnight Requiem', 'Abyssal Script',\r\n            'Crimson Oath', 'Shadow Lineage', 'Forbidden Lore', 'Medieval Relic'\r\n        ];\r\n        \r\n        for(let i=0; i<120; i++){\r\n            templates.push({\r\n                id: `goth-${i}`,\r\n                name: names[i % names.length] + ` Vol.${Math.floor(Math.random()*99)+1}`,\r\n                icon: ['chess-rook', 'cross', 'crow', 'book-skull', 'moon', 'bat', 'spider'][i % 7]\r\n            });\r\n        }\r\n        return templates.sort(() => Math.random() - 0.5);\r\n    };\r\n\r\n    const ALL_STYLES = generateConfigs();\r\n\r\n    \/\/ Map Character\r\n    const mapChar = (char, mode) => {\r\n        const idx = baseArr.indexOf(char);\r\n        if (idx === -1) return char;\r\n        \r\n        if(mode === 'Fraktur') return frakturArr[idx];\r\n        if(mode === 'BoldFraktur') return boldFrakturArr[idx];\r\n        if(mode === 'Modern') return smallCapsArr[idx];\r\n        if(mode === 'Double') return doubleStruckArr[idx];\r\n        return char;\r\n    };\r\n\r\n    \/\/ Apply Zalgo Corruption\r\n    const applyCorruption = (text) => {\r\n        return Array.from(text).map(c => {\r\n            if (c === ' ') return c;\r\n            let res = c;\r\n            for(let i=0; i<rand(2)+1; i++) res += zalgoUp[rand(zalgoUp.length)];\r\n            for(let i=0; i<rand(2)+1; i++) res += zalgoDown[rand(zalgoDown.length)];\r\n            return res;\r\n        }).join('');\r\n    };\r\n\r\n    \/\/ Text Transformation Logic\r\n    const transformLogic = (text, mode, style, variationIndex) => {\r\n        if (!text) return \"\";\r\n        \r\n        \/\/ 1. Map Characters based on Typography Mode\r\n        let mappedText = Array.from(text).map(c => mapChar(c, mode)).join('');\r\n\r\n        \/\/ 2. Apply Embellishments\r\n        if (style === 'Daggers') {\r\n            const daggers = ['\u2e38', '\u2020', '\u2021'];\r\n            const dag = daggers[variationIndex % daggers.length];\r\n            mappedText = `${dag} ${mappedText} ${dag}`;\r\n        } \r\n        else if (style === 'Flourish') {\r\n            const flourishes = [\r\n                {l: '\u0f3a', r: '\u0f3b'}, \r\n                {l: '\ua9c1', r: '\ua9c2'}, \r\n                {l: '\ud81a\udd0d', r: '\ud81a\udd0d'}, \r\n                {l: '\u2671', r: '\u2671'}\r\n            ];\r\n            const f = flourishes[variationIndex % flourishes.length];\r\n            mappedText = `${f.l} ${mappedText} ${f.r}`;\r\n        }\r\n        else if (style === 'Corrupted') {\r\n            mappedText = applyCorruption(mappedText);\r\n            if(variationIndex % 2 === 0) mappedText = `\u2620\ufe0f ${mappedText} \u2620\ufe0f`;\r\n        }\r\n\r\n        return mappedText;\r\n    };\r\n\r\n    const render = () => {\r\n        resultList.innerHTML = '';\r\n        let raw = inputEl.value || \"Vampires are not bound by mortal laws.\";\r\n        \r\n        const displayList = ALL_STYLES.slice(0, limit);\r\n\r\n        displayList.forEach((s, idx) => {\r\n            const out = transformLogic(raw, currentMode, currentStyle, idx);\r\n            \r\n            const card = document.createElement('div');\r\n            card.className = 'pg-result-card';\r\n            \r\n            card.innerHTML = `\r\n                <div class=\"pg-card-header\">\r\n                    <div class=\"pg-card-title\">\r\n                        <i class=\"fa-solid fa-${s.icon}\"><\/i> \r\n                        ${s.name}\r\n                    <\/div>\r\n                    <button class=\"pg-card-copy-btn\" title=\"Copy Manuscript\"><i class=\"fa-regular fa-copy\"><\/i><\/button>\r\n                <\/div>\r\n                <div class=\"pg-card-preview\">${out}<\/div>\r\n            `;\r\n            \r\n            const copyBtn = card.querySelector('.pg-card-copy-btn');\r\n            copyBtn.addEventListener('click', (e) => {\r\n                e.preventDefault();\r\n                copyToClipboard(out, copyBtn);\r\n            });\r\n            \r\n            resultList.appendChild(card);\r\n        });\r\n\r\n        loadMoreBtn.style.display = limit >= ALL_STYLES.length ? 'none' : 'inline-flex';\r\n        const remaining = Math.max(0, ALL_STYLES.length - limit);\r\n        if (remaining > 0) {\r\n            loadMoreBtn.querySelector('span').innerText = `Unearth More Lore (${remaining})`;\r\n        }\r\n    };\r\n\r\n    \/\/ Events\r\n    inputEl.addEventListener('input', render);\r\n    \r\n    btnPaste.addEventListener('click', async (e) => {\r\n        e.preventDefault();\r\n        try {\r\n            const text = await navigator.clipboard.readText();\r\n            inputEl.value = text;\r\n            render();\r\n        } catch (err) {\r\n            inputEl.focus();\r\n            document.execCommand('paste');\r\n            render();\r\n        }\r\n    });\r\n\r\n    btnSelectAll.addEventListener('click', (e) => {\r\n        e.preventDefault();\r\n        inputEl.select();\r\n    });\r\n\r\n    btnCopy.addEventListener('click', (e) => {\r\n        e.preventDefault();\r\n        if(inputEl.value) {\r\n            copyToClipboard(inputEl.value, null);\r\n            toast.querySelector('i').className = 'fa-solid fa-copy';\r\n            toast.querySelector('i').nextSibling.textContent = ' Source Copied';\r\n            setTimeout(() => {\r\n                toast.querySelector('i').className = 'fa-solid fa-check-double';\r\n                toast.querySelector('i').nextSibling.textContent = ' Manuscript Copied';\r\n            }, 2000);\r\n        }\r\n    });\r\n    \r\n    presetSelect.addEventListener('change', (e) => {\r\n        if(e.target.value) {\r\n            inputEl.value = e.target.value;\r\n            render();\r\n            e.target.selectedIndex = 0; \r\n        }\r\n    });\r\n    \r\n    loadMoreBtn.addEventListener('click', (e) => {\r\n        e.preventDefault();\r\n        limit += LOAD_INCREMENT; \r\n        render(); \r\n    });\r\n\r\n    wrapper.querySelectorAll('.mode-btn').forEach(btn => {\r\n        btn.addEventListener('click', (e) => {\r\n            e.preventDefault();\r\n            wrapper.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));\r\n            btn.classList.add('active');\r\n            currentMode = btn.getAttribute('data-val');\r\n            limit = 6; \r\n            render(); \r\n        });\r\n    });\r\n\r\n    wrapper.querySelectorAll('.style-btn').forEach(btn => {\r\n        btn.addEventListener('click', (e) => {\r\n            e.preventDefault();\r\n            wrapper.querySelectorAll('.style-btn').forEach(b => b.classList.remove('active'));\r\n            btn.classList.add('active');\r\n            currentStyle = btn.getAttribute('data-val');\r\n            limit = 6; \r\n            render();\r\n        });\r\n    });\r\n\r\n    \/\/ Init\r\n    render();\r\n});\r\n<\/script>\r\n<!-- END OF FILE Gothic Text Generator -->\r\n\r\n<!-- <content section is starting -->\r\n\r\n<div>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n    <!-- SECTION 1 -->\r\n\r\n\r\n\r\n<section class=\"pg-gtg-section pg-gtg-sec1\">\r\n        <div class=\"pg-gtg-wrap\">\r\n\t\r\n<\/div>\r\n\t<\/section>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n    <section class=\"pg-gtg-section pg-gtg-sec1\">\r\n        <div class=\"pg-gtg-wrap\">\r\n            <h2 class=\"pg-gtg-heading\">What Makes This <span class=\"pg-gtg-kw\">Gothic Text Generator<\/span> Different?<\/h2>\r\n            <p class=\"pg-gtg-sub\">Most font converters produce broken or unsupported characters. Our gothic text generator uses authentic Unicode mappings to create flawless Fraktur and blackletter text that actually renders everywhere.<\/p>\r\n            <div class=\"pg-gtg-grid\">\r\n                <div class=\"pg-gtg-card\">\r\n                    <div class=\"pg-gtg-icon\" style=\"background:rgba(63,81,181,0.12);color:#3f51b5;\"><i class=\"fa-solid fa-font\"><\/i><\/div>\r\n                    <div class=\"pg-gtg-title\">Authentic Fraktur Unicode<\/div>\r\n                    <p class=\"pg-gtg-desc\">Our gothic text generator uses real mathematical Fraktur Unicode blocks \u2014 not fake lookalikes \u2014 so every letter displays as a genuine gothic character on any compatible device or browser.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-gtg-card\">\r\n                    <div class=\"pg-gtg-icon\" style=\"background:rgba(156,39,176,0.12);color:#9c27b0;\"><i class=\"fa-solid fa-layer-group\"><\/i><\/div>\r\n                    <div class=\"pg-gtg-title\">Multiple Dark Lettering Styles<\/div>\r\n                    <p class=\"pg-gtg-desc\">Choose from bold Fraktur, double-struck gothic, and uncial-style variations \u2014 our gothic text generator offers several distinct medieval text formats for different aesthetic needs.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-gtg-card\">\r\n                    <div class=\"pg-gtg-icon\" style=\"background:rgba(0,184,212,0.12);color:#00b8d4;\"><i class=\"fa-solid fa-bolt\"><\/i><\/div>\r\n                    <div class=\"pg-gtg-title\">Instant Zero-Lag Conversion<\/div>\r\n                    <p class=\"pg-gtg-desc\">Type a single character and watch it transform into gothic script immediately \u2014 our gothic text generator processes everything locally in your browser with zero server delays or loading spinners.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-gtg-card\">\r\n                    <div class=\"pg-gtg-icon\" style=\"background:rgba(76,175,80,0.12);color:#4caf50;\"><i class=\"fa-solid fa-clipboard-check\"><\/i><\/div>\r\n                    <div class=\"pg-gtg-title\">One-Click Copy and Paste<\/div>\r\n                    <p class=\"pg-gtg-desc\">Found the perfect gothic style? One click copies pure Unicode gothic text to your clipboard \u2014 no invisible formatting characters, no encoding issues, just clean text ready to paste anywhere.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-gtg-card\">\r\n                    <div class=\"pg-gtg-icon\" style=\"background:rgba(244,67,54,0.12);color:#f44336;\"><i class=\"fa-solid fa-display\"><\/i><\/div>\r\n                    <div class=\"pg-gtg-title\">Renders on Every Device<\/div>\r\n                    <p class=\"pg-gtg-desc\">iOS, Android, Windows, macOS \u2014 our gothic text generator outputs standard Unicode that renders on all modern operating systems without requiring users to download special fonts or apps.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-gtg-card\">\r\n                    <div class=\"pg-gtg-icon\" style=\"background:rgba(255,145,0,0.12);color:#ff9100;\"><i class=\"fa-solid fa-infinity\"><\/i><\/div>\r\n                    <div class=\"pg-gtg-title\">Unlimited and Completely Free<\/div>\r\n                    <p class=\"pg-gtg-desc\">No usage caps, no premium tiers, no sign-up walls. Convert as much text as you want with our gothic text generator \u2014 it's free forever, with zero strings attached and zero ads blocking your workflow.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 2 -->\r\n    <section class=\"pg-gtg-section pg-gtg-sec2\">\r\n        <div class=\"pg-gtg-wrap\">\r\n            <h2 class=\"pg-gtg-heading pg-gtg-sec2-heading\">How to Use Our <span class=\"pg-gtg-kw pg-gtg-sec2-kw\">Gothic Text Generator<\/span> Step by Step?<\/h2>\r\n            <p class=\"pg-gtg-sub pg-gtg-sec2-sub\">Generating gothic text takes seconds. No design skills needed \u2014 just follow these simple steps and get your dark medieval text ready to copy and paste anywhere.<\/p>\r\n            <div class=\"pg-gtg-grid\">\r\n                <div class=\"pg-gtg-card pg-gtg-sec2-card\">\r\n                    <span class=\"pg-gtg-emoji\">\u2328\ufe0f<\/span>\r\n                    <div class=\"pg-gtg-title\">Step 1: Type Your Normal Text<\/div>\r\n                    <p class=\"pg-gtg-desc\">Enter any word, phrase, or paragraph into the input box \u2014 our gothic text generator accepts regular Latin characters, numbers, and basic punctuation as your starting text.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-gtg-card pg-gtg-sec2-card\">\r\n                    <span class=\"pg-gtg-emoji\">\ud83d\udd8b\ufe0f<\/span>\r\n                    <div class=\"pg-gtg-title\">Step 2: Browse Gothic Styles<\/div>\r\n                    <p class=\"pg-gtg-desc\">Scroll through the different Fraktur and blackletter options generated below \u2014 each style has a distinct medieval character weight, from light uncial to heavy bold gothic script.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-gtg-card pg-gtg-sec2-card\">\r\n                    <span class=\"pg-gtg-emoji\">\ud83d\udd0d<\/span>\r\n                    <div class=\"pg-gtg-title\">Step 3: Preview the Output<\/div>\r\n                    <p class=\"pg-gtg-desc\">See exactly how your text looks in gothic formatting before copying \u2014 our gothic text generator shows a live preview that mirrors exactly what it will look like when pasted on other platforms.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-gtg-card pg-gtg-sec2-card\">\r\n                    <span class=\"pg-gtg-emoji\">\ud83d\udccb<\/span>\r\n                    <div class=\"pg-gtg-title\">Step 4: Copy the Gothic Text<\/div>\r\n                    <p class=\"pg-gtg-desc\">Click the copy button next to your preferred style \u2014 the gothic text transfers to your clipboard as raw Unicode, maintaining every character's integrity with zero formatting errors.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-gtg-card pg-gtg-sec2-card\">\r\n                    <span class=\"pg-gtg-emoji\">\ud83c\udf10<\/span>\r\n                    <div class=\"pg-gtg-title\">Step 5: Paste Anywhere Online<\/div>\r\n                    <p class=\"pg-gtg-desc\">Drop your gothic text into social media bios, gaming profiles, YouTube descriptions, or messaging apps \u2014 it renders natively anywhere that supports standard Unicode text input.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-gtg-card pg-gtg-sec2-card\">\r\n                    <span class=\"pg-gtg-emoji\">\ud83e\udde9<\/span>\r\n                    <div class=\"pg-gtg-title\">Step 6: Mix Gothic with Normal Text<\/div>\r\n                    <p class=\"pg-gtg-desc\">Create striking contrast by combining gothic text with regular text in a single post \u2014 use gothic for keywords and normal text for the rest to build a unique visual hierarchy.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 3 -->\r\n    <section class=\"pg-gtg-section pg-gtg-sec3\">\r\n        <div class=\"pg-gtg-wrap\">\r\n            <h2 class=\"pg-gtg-heading\">Best Places to Use <span class=\"pg-gtg-kw\">Gothic Text Generator<\/span> Results?<\/h2>\r\n            <p class=\"pg-gtg-sub\">Gothic text isn't just for medieval history buffs \u2014 it's a powerful design choice for gaming, social media, branding, and creative projects. Here's where our gothic text generator output shines the most.<\/p>\r\n            <div class=\"pg-gtg-grid\">\r\n                <div class=\"pg-gtg-card pg-gtg-sec3-card\">\r\n                    <div class=\"pg-gtg-icon\" style=\"background:rgba(88,101,242,0.12);color:#5865f2;\"><i class=\"fa-solid fa-gamepad\"><\/i><\/div>\r\n                    <div class=\"pg-gtg-title\">Gaming Usernames and Clan Tags<\/div>\r\n                    <p class=\"pg-gtg-desc\">Gothic script instantly gives gaming usernames a dark, intimidating edge \u2014 perfect for RPGs, FPS clans, and competitive team tags where a strong visual identity gives you a psychological advantage.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-gtg-card pg-gtg-sec3-card\">\r\n                    <div class=\"pg-gtg-icon\" style=\"background:rgba(225,48,108,0.12);color:#e1306c;\"><i class=\"fa-brands fa-instagram\"><\/i><\/div>\r\n                    <div class=\"pg-gtg-title\">Dark Aesthetic Social Bios<\/div>\r\n                    <p class=\"pg-gtg-desc\">Gothic text in Instagram or TikTok bios immediately signals a dark aesthetic \u2014 it pairs perfectly with alternative fashion, witchcore, vampire aesthetic, and grunge-themed profiles that need authentic visual tone.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-gtg-card pg-gtg-sec3-card\">\r\n                    <div class=\"pg-gtg-icon\" style=\"background:rgba(255,0,80,0.10);color:#ff0050;\"><i class=\"fa-solid fa-skull-crossbones\"><\/i><\/div>\r\n                    <div class=\"pg-gtg-title\">Horror and True Crime Content<\/div>\r\n                    <p class=\"pg-gtg-desc\">Creepypasta narrators, true crime YouTubers, and horror podcasters use our gothic text generator for titles and thumbnails \u2014 the medieval script creates an eerie, unsettling atmosphere before the content even starts.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-gtg-card pg-gtg-sec3-card\">\r\n                    <div class=\"pg-gtg-icon\" style=\"background:rgba(29,161,242,0.12);color:#1da1f2;\"><i class=\"fa-solid fa-pen-nib\"><\/i><\/div>\r\n                    <div class=\"pg-gtg-title\">Tattoo Design and Inspiration<\/div>\r\n                    <p class=\"pg-gtg-desc\">Use our gothic text generator to preview how a quote or word will look in Fraktur script before getting inked \u2014 it's the fastest way to test different gothic lettering styles for tattoo planning and inspiration.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-gtg-card pg-gtg-sec3-card\">\r\n                    <div class=\"pg-gtg-icon\" style=\"background:rgba(255,61,0,0.12);color:#ff3d00;\"><i class=\"fa-solid fa-guitar\"><\/i><\/div>\r\n                    <div class=\"pg-gtg-title\">Metal Band Logos and Merch<\/div>\r\n                    <p class=\"pg-gtg-desc\">Black metal, death metal, and doom metal bands rely on gothic script for logos and merchandise \u2014 our gothic text generator creates instantly usable band name concepts in authentic blackletter formatting.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-gtg-card pg-gtg-sec3-card\">\r\n                    <div class=\"pg-gtg-icon\" style=\"background:rgba(0,200,83,0.12);color:#00c853;\"><i class=\"fa-solid fa-book-open\"><\/i><\/div>\r\n                    <div class=\"pg-gtg-title\">Storytelling and RPG Projects<\/div>\r\n                    <p class=\"pg-gtg-desc\">Dungeon Masters, fantasy writers, and tabletop RPG creators use gothic text for campaign titles, ancient prophecies, and in-game documents \u2014 it adds instant historical depth to any fictional world.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <style>\r\n        *, *::before, *::after {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        :root {\r\n            --gtg-cyan: #00b8d4;\r\n            --gtg-grad: linear-gradient(135deg, #00b8d4, #ea00ff, #ff9100);\r\n            --gtg-shadow: 0 12px 30px rgba(0, 184, 212, 0.16);\r\n            --gtg-ease: cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            --gtg-speed: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            --gtg-ff: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\r\n        }\r\n\r\n        .pg-gtg-section {\r\n            width: 100%;\r\n            padding: clamp(48px, 8vw, 96px) 20px;\r\n            position: relative;\r\n            font-family: var(--gtg-ff);\r\n            color: #0a0a0a;\r\n            line-height: 1.6;\r\n            -webkit-font-smoothing: antialiased;\r\n        }\r\n\r\n        .pg-gtg-wrap {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        .pg-gtg-heading {\r\n            font-family: var(--gtg-ff);\r\n            font-size: clamp(1.5rem, 4vw, 2.25rem);\r\n            font-weight: 800;\r\n            text-align: center;\r\n            color: #000000;\r\n            margin-bottom: clamp(8px, 1.5vw, 14px);\r\n            line-height: 1.2;\r\n            letter-spacing: -0.03em;\r\n        }\r\n\r\n        .pg-gtg-kw {\r\n            color: #000000;\r\n            position: relative;\r\n        }\r\n\r\n        .pg-gtg-kw::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: -2px;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 3px;\r\n            background: var(--gtg-grad);\r\n            border-radius: 3px;\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s var(--gtg-ease);\r\n        }\r\n\r\n        .pg-gtg-section:hover .pg-gtg-kw::after {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-gtg-sub {\r\n            font-family: var(--gtg-ff);\r\n            font-size: clamp(0.88rem, 1.8vw, 1.02rem);\r\n            font-weight: 400;\r\n            text-align: center;\r\n            color: #1a1a1a;\r\n            max-width: 660px;\r\n            margin: 0 auto clamp(32px, 5vw, 56px);\r\n            line-height: 1.7;\r\n        }\r\n\r\n        .pg-gtg-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(3, 1fr);\r\n            gap: clamp(16px, 2.5vw, 26px);\r\n            align-items: stretch;\r\n        }\r\n\r\n        \/* === CARD BASE === *\/\r\n        .pg-gtg-card {\r\n            border-radius: 16px;\r\n            padding: clamp(22px, 3vw, 32px);\r\n            position: relative;\r\n            cursor: pointer;\r\n            -webkit-tap-highlight-color: transparent;\r\n            user-select: none;\r\n            transition: var(--gtg-speed);\r\n            border: 1.5px solid #e0e0e8;\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n\r\n        .pg-gtg-card::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: -1px;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 3px;\r\n            background: var(--gtg-grad);\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s var(--gtg-ease);\r\n            z-index: 4;\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-gtg-card::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            width: 0;\r\n            height: 0;\r\n            border-radius: 50%;\r\n            background: radial-gradient(circle, rgba(0,184,212,0.10) 0%, rgba(234,0,255,0.04) 60%, transparent 100%);\r\n            transform: translate(-50%, -50%);\r\n            transition: width 0.55s ease-out, height 0.55s ease-out, opacity 0.55s ease-out;\r\n            opacity: 0;\r\n            z-index: 0;\r\n            pointer-events: none;\r\n        }\r\n\r\n        .pg-gtg-card:hover::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-gtg-card.pg-gtg-down {\r\n            transform: translateY(-1px) scale(0.985) !important;\r\n        }\r\n\r\n        .pg-gtg-card.pg-gtg-down::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-gtg-card.pg-gtg-glow::after {\r\n            width: 320px;\r\n            height: 320px;\r\n            opacity: 1;\r\n        }\r\n\r\n        .pg-gtg-card.pg-gtg-glow-out::after {\r\n            width: 320px;\r\n            height: 320px;\r\n            opacity: 0;\r\n        }\r\n\r\n        \/* === ICON === *\/\r\n        .pg-gtg-icon {\r\n            width: clamp(46px, 5vw, 58px);\r\n            height: clamp(46px, 5vw, 58px);\r\n            min-width: 46px;\r\n            min-height: 46px;\r\n            border-radius: 14px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: clamp(18px, 2.5vw, 24px);\r\n            margin-bottom: clamp(14px, 2vw, 20px);\r\n            transition: var(--gtg-speed);\r\n            position: relative;\r\n            z-index: 3;\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .pg-gtg-card:hover .pg-gtg-icon {\r\n            transform: scale(1.12) rotate(-4deg);\r\n        }\r\n\r\n        .pg-gtg-card.pg-gtg-down .pg-gtg-icon {\r\n            transform: scale(1.04) rotate(0deg);\r\n        }\r\n\r\n        \/* === EMOJI === *\/\r\n        .pg-gtg-emoji {\r\n            font-size: clamp(28px, 3.5vw, 36px);\r\n            margin-bottom: clamp(12px, 1.8vw, 16px);\r\n            display: inline-block;\r\n            transition: var(--gtg-speed);\r\n            position: relative;\r\n            z-index: 3;\r\n            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .pg-gtg-card:hover .pg-gtg-emoji {\r\n            transform: scale(1.22) rotate(-6deg);\r\n        }\r\n\r\n        .pg-gtg-card.pg-gtg-down .pg-gtg-emoji {\r\n            transform: scale(1.08) rotate(0deg);\r\n        }\r\n\r\n        \/* === TITLE === *\/\r\n        .pg-gtg-title {\r\n            font-family: var(--gtg-ff);\r\n            font-size: clamp(0.95rem, 2vw, 1.1rem);\r\n            font-weight: 700;\r\n            color: #000000;\r\n            margin-bottom: clamp(6px, 1vw, 10px);\r\n            line-height: 1.35;\r\n            position: relative;\r\n            z-index: 3;\r\n        }\r\n\r\n        \/* === DESC === *\/\r\n        .pg-gtg-desc {\r\n            font-family: var(--gtg-ff);\r\n            font-size: clamp(0.8rem, 1.5vw, 0.9rem);\r\n            font-weight: 400;\r\n            color: #1a1a1a;\r\n            line-height: 1.65;\r\n            position: relative;\r\n            z-index: 3;\r\n            margin-top: auto;\r\n        }\r\n\r\n        \/* ==============================\r\n           SECTION 1 \u2014 #fff bg \/ #fff cards\r\n           ============================== *\/\r\n        .pg-gtg-sec1 {\r\n            background: #ffffff;\r\n        }\r\n\r\n        .pg-gtg-sec1 .pg-gtg-card {\r\n            background: #ffffff;\r\n            border-color: #dcdce5;\r\n            box-shadow: 0 2px 8px rgba(0,0,0,0.04);\r\n        }\r\n\r\n        .pg-gtg-sec1 .pg-gtg-card:hover {\r\n            border-color: var(--gtg-cyan);\r\n            box-shadow: var(--gtg-shadow);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        \/* ==============================\r\n           SECTION 2 \u2014 gradient bg \/ white cards\r\n           ============================== *\/\r\n        .pg-gtg-sec2 {\r\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        }\r\n\r\n        .pg-gtg-sec2 .pg-gtg-heading.pg-gtg-sec2-heading {\r\n            color: #ffffff;\r\n        }\r\n\r\n        .pg-gtg-sec2 .pg-gtg-kw.pg-gtg-sec2-kw {\r\n            color: #ffffff;\r\n        }\r\n\r\n        .pg-gtg-sec2 .pg-gtg-kw.pg-gtg-sec2-kw::after {\r\n            background: linear-gradient(90deg, #ffd700, #ff6b6b, #ffffff);\r\n        }\r\n\r\n        .pg-gtg-sec2 .pg-gtg-sub.pg-gtg-sec2-sub {\r\n            color: rgba(255,255,255,0.9);\r\n        }\r\n\r\n        .pg-gtg-sec2 .pg-gtg-card.pg-gtg-sec2-card {\r\n            background: #ffffff;\r\n            border-color: rgba(255,255,255,0.25);\r\n            box-shadow: 0 4px 20px rgba(0,0,0,0.12);\r\n        }\r\n\r\n        .pg-gtg-sec2 .pg-gtg-card.pg-gtg-sec2-card::before {\r\n            background: linear-gradient(90deg, #667eea, #764ba2, #ffd700);\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-gtg-sec2 .pg-gtg-card.pg-gtg-sec2-card::after {\r\n            background: radial-gradient(circle, rgba(102,126,234,0.08) 0%, rgba(118,75,162,0.04) 60%, transparent 100%);\r\n        }\r\n\r\n        .pg-gtg-sec2 .pg-gtg-card.pg-gtg-sec2-card:hover {\r\n            border-color: rgba(102,126,234,0.5);\r\n            box-shadow: 0 14px 40px rgba(118,75,162,0.25);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        .pg-gtg-sec2 .pg-gtg-emoji {\r\n            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));\r\n        }\r\n\r\n        \/* ==============================\r\n           SECTION 3 \u2014 #fff bg \/ soft gray cards\r\n           ============================== *\/\r\n        .pg-gtg-sec3 {\r\n            background: #ffffff;\r\n        }\r\n\r\n        .pg-gtg-sec3 .pg-gtg-card.pg-gtg-sec3-card {\r\n            background: #f5f6f9;\r\n            border-color: #d8dce4;\r\n            box-shadow: 0 2px 8px rgba(0,0,0,0.03);\r\n        }\r\n\r\n        .pg-gtg-sec3 .pg-gtg-card.pg-gtg-sec3-card::before {\r\n            background: linear-gradient(90deg, #00b8d4, #ea00ff, #ff9100);\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-gtg-sec3 .pg-gtg-card.pg-gtg-sec3-card:hover {\r\n            border-color: var(--gtg-cyan);\r\n            box-shadow: var(--gtg-shadow);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        \/* ==============================\r\n           RESPONSIVE\r\n           ============================== *\/\r\n        @media (max-width: 820px) {\r\n            .pg-gtg-grid {\r\n                grid-template-columns: repeat(2, 1fr);\r\n                gap: 16px;\r\n            }\r\n            .pg-gtg-section {\r\n                padding: clamp(36px, 6vw, 64px) 16px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 540px) {\r\n            .pg-gtg-grid {\r\n                grid-template-columns: 1fr;\r\n                gap: 14px;\r\n            }\r\n            .pg-gtg-card {\r\n                padding: 22px;\r\n            }\r\n            .pg-gtg-sub {\r\n                margin-bottom: 28px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 360px) {\r\n            .pg-gtg-section {\r\n                padding: 32px 12px;\r\n            }\r\n            .pg-gtg-card {\r\n                padding: 18px;\r\n                border-radius: 12px;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n    <script>\r\n    (function() {\r\n        var cards = document.querySelectorAll('.pg-gtg-card');\r\n        cards.forEach(function(card) {\r\n            function glow(el) {\r\n                el.classList.remove('pg-gtg-glow', 'pg-gtg-glow-out');\r\n                void el.offsetWidth;\r\n                el.classList.add('pg-gtg-glow');\r\n                setTimeout(function() {\r\n                    el.classList.add('pg-gtg-glow-out');\r\n                }, 300);\r\n                setTimeout(function() {\r\n                    el.classList.remove('pg-gtg-glow', 'pg-gtg-glow-out');\r\n                }, 700);\r\n            }\r\n            card.addEventListener('mousedown', function() {\r\n                card.classList.add('pg-gtg-down');\r\n            });\r\n            card.addEventListener('mouseup', function() {\r\n                setTimeout(function() {\r\n                    card.classList.remove('pg-gtg-down');\r\n                }, 120);\r\n                glow(card);\r\n            });\r\n            card.addEventListener('mouseleave', function() {\r\n                card.classList.remove('pg-gtg-down', 'pg-gtg-glow', 'pg-gtg-glow-out');\r\n            });\r\n            card.addEventListener('touchstart', function() {\r\n                card.classList.add('pg-gtg-down');\r\n                glow(card);\r\n            }, { passive: true });\r\n            card.addEventListener('touchend', function() {\r\n                setTimeout(function() {\r\n                    card.classList.remove('pg-gtg-down');\r\n                }, 150);\r\n            });\r\n            card.addEventListener('touchcancel', function() {\r\n                card.classList.remove('pg-gtg-down', 'pg-gtg-glow', 'pg-gtg-glow-out');\r\n            });\r\n        });\r\n    })();\r\n    <\/script>\r\n<\/div>[\/et_pb_fullwidth_code][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<!-- START OF FILE Gothic Text Generator -->\r\n\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n<style>\r\n    .pg-tool-wrapper {\r\n        \/* TYPOGRAPHY - SYSTEM SAFEST & BOLD *\/\r\n        --primary-font: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\r\n        --body-font: \"Times New Roman\", \"Georgia\", \"Palatino Linotype\", serif;\r\n        \r\n        \/* THEME PALETTE - GOTHIC (CRIMSON, GOLD & VOID) *\/\r\n        --theme-panel: rgba(13, 9, 10, 0.96); \r\n        --theme-panel-hover: rgba(20, 10, 12, 0.98);\r\n        --theme-border: rgba(139, 0, 0, 0.4); \r\n        \r\n        \/* GOTHIC ACCENTS *\/\r\n        --goth-crimson: #c8102e;\r\n        --goth-darkred: #8b0000;\r\n        --goth-gold: #d4af37;\r\n        --void-dark: #050203;\r\n        --text-bright: #f4e8e8;\r\n        --text-muted: #a09596;\r\n        \r\n        \/* GRADIENTS - MAINTAINING PREVIOUS MASTER BACKGROUND *\/\r\n        --grad-master: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        --grad-gothic: linear-gradient(135deg, #8b0000 0%, #4a0000 100%);\r\n        --grad-gold: linear-gradient(135deg, #d4af37 0%, #8a7322 100%);\r\n        --grad-shimmer: linear-gradient(90deg, transparent, rgba(200, 16, 46, 0.4), transparent);\r\n        \r\n        \/* SHADOWS & GLOWS *\/\r\n        --glow-crimson: 0 0 25px rgba(200, 16, 46, 0.5);\r\n        --glow-gold: 0 0 20px rgba(212, 175, 55, 0.4);\r\n        --shadow-ui: 0 20px 50px rgba(0, 0, 0, 0.9);\r\n        --glass-blur: blur(12px);\r\n        \r\n        --transition-ui: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n        --transition-fast: all 0.2s ease;\r\n        \r\n        font-family: var(--primary-font);\r\n        color: var(--text-bright);\r\n        line-height: 1.5;\r\n        width: 100%;\r\n        overflow-x: hidden;\r\n        text-align: center; \r\n        \r\n        background: var(--grad-master);\r\n        background-attachment: fixed;\r\n    }\r\n\r\n    .pg-tool-wrapper * { box-sizing: border-box; }\r\n\r\n    \/* SAFETY OVERRIDES *\/\r\n    .pg-container {\r\n        max-width: 1200px !important;\r\n        width: 100% !important;\r\n        margin: 0 auto !important;\r\n        padding: 40px 20px !important;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n    }\r\n\r\n    .pg-hero-content-wrapper {\r\n        z-index: 2;\r\n        padding-top: 20px;\r\n        width: 100%;\r\n    }\r\n\r\n    \/* TITLE STYLES - GOTHIC TYPOGRAPHY WITH ICON *\/\r\n    .pg-main-title {\r\n        font-family: var(--primary-font);\r\n        font-size: 3.2rem;\r\n        font-weight: 900; \r\n        line-height: 1.1;\r\n        margin: 0 auto 15px auto;\r\n        text-transform: uppercase;\r\n        letter-spacing: 3px;\r\n        color: #fff;\r\n        text-shadow: 2px 2px 0 #000, -1px -1px 15px rgba(200,16,46,0.6);\r\n        max-width: 900px;\r\n        position: relative;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        flex-wrap: wrap;\r\n        gap: 15px;\r\n        transition: var(--transition-ui);\r\n    }\r\n    \r\n    .pg-main-title i {\r\n        color: var(--goth-crimson);\r\n        text-shadow: var(--glow-crimson);\r\n        transition: transform 0.4s ease;\r\n    }\r\n    \r\n    .pg-main-title:hover i {\r\n        transform: rotate(15deg) scale(1.1);\r\n    }\r\n\r\n    .pg-main-title:hover {\r\n        letter-spacing: 5px;\r\n        text-shadow: 3px 3px 0 #000, 0 0 20px var(--goth-crimson);\r\n    }\r\n    \r\n    .pg-main-title::after {\r\n        content: '';\r\n        position: absolute;\r\n        bottom: -20px;\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        display: block;\r\n        width: 100px;\r\n        height: 4px;\r\n        background: var(--grad-gothic);\r\n        box-shadow: var(--glow-crimson);\r\n        border-radius: 5px;\r\n        transition: var(--transition-ui);\r\n    }\r\n    \r\n    .pg-main-title:hover::after {\r\n        width: 350px;\r\n        background: var(--grad-gold);\r\n        box-shadow: var(--glow-gold);\r\n    }\r\n    \r\n    .pg-subtitle {\r\n        font-family: system-ui, sans-serif;\r\n        font-size: 1.15rem;\r\n        color: rgba(255, 255, 255, 0.85);\r\n        max-width: 750px;\r\n        margin: 30px auto 35px auto;\r\n        padding: 0 10px;\r\n        font-weight: 500;\r\n        letter-spacing: 0.5px;\r\n        text-shadow: 0 2px 5px rgba(0,0,0,0.8);\r\n    }\r\n\r\n    \/* MAIN GENERATOR CARD *\/\r\n    .pg-generator-card {\r\n        background: var(--theme-panel);\r\n        backdrop-filter: var(--glass-blur);\r\n        -webkit-backdrop-filter: var(--glass-blur);\r\n        border: 1px solid var(--theme-border); \r\n        border-top-width: 4px;\r\n        border-top-color: var(--goth-crimson);\r\n        width: 100%;\r\n        box-shadow: var(--shadow-ui), inset 0 0 25px rgba(139, 0, 0, 0.15); \r\n        border-radius: 16px;\r\n        position: relative;\r\n        transform: translateY(0);\r\n        transition: var(--transition-ui);\r\n        overflow: hidden;\r\n    }\r\n\r\n    \/* CONTROLS LAYOUT - ASYMMETRIC SPLIT *\/\r\n    .pg-controls-wrapper {\r\n        padding: 35px;\r\n        background: linear-gradient(180deg, rgba(13,9,10,0.8) 0%, rgba(5,2,3,0.95) 100%);\r\n        border-bottom: 1px solid rgba(200, 16, 46, 0.2);\r\n        display: grid;\r\n        grid-template-columns: 1.4fr 1fr;\r\n        gap: 30px;\r\n        align-items: stretch;\r\n    }\r\n\r\n    \/* ENHANCED INPUT SECTION *\/\r\n    .pg-input-section {\r\n        width: 100%;\r\n        display: flex;\r\n        flex-direction: column;\r\n        height: 100%;\r\n    }\r\n    \r\n    .pg-enhanced-input-wrapper {\r\n        background: rgba(0, 0, 0, 0.6);\r\n        border: 1px solid rgba(139, 0, 0, 0.4);\r\n        border-radius: 12px;\r\n        overflow: hidden;\r\n        display: flex;\r\n        flex-direction: column;\r\n        flex-grow: 1;\r\n        transition: var(--transition-ui);\r\n        box-shadow: inset 0 0 20px rgba(0,0,0,0.9);\r\n    }\r\n\r\n    .pg-enhanced-input-wrapper:focus-within {\r\n        border-color: var(--goth-crimson);\r\n        box-shadow: inset 0 0 20px rgba(200, 16, 46, 0.15), 0 0 15px rgba(200, 16, 46, 0.3);\r\n    }\r\n    \r\n    .pg-text-input {\r\n        width: 100% !important;\r\n        min-height: 140px !important;\r\n        flex-grow: 1;\r\n        padding: 25px !important;\r\n        background: transparent !important;\r\n        border: none !important;\r\n        color: #fff !important;\r\n        font-family: var(--body-font) !important;\r\n        font-weight: 500 !important;\r\n        font-size: 1.7rem !important;\r\n        outline: none !important;\r\n        text-align: center !important;\r\n        text-shadow: 0 2px 4px rgba(0,0,0,0.9);\r\n        white-space: pre-wrap !important;\r\n        word-break: break-word !important;\r\n        overflow-wrap: break-word !important;\r\n        resize: none;\r\n    }\r\n    \r\n    .pg-text-input::placeholder {\r\n        color: rgba(255, 255, 255, 0.3);\r\n        font-style: italic;\r\n    }\r\n\r\n    \/* TOOLBAR *\/\r\n    .pg-input-toolbar {\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        flex-wrap: wrap;\r\n        gap: 10px;\r\n        background: rgba(5, 2, 3, 0.8);\r\n        padding: 15px;\r\n        border-top: 1px solid rgba(139, 0, 0, 0.3);\r\n    }\r\n\r\n    .pg-toolbar-btn {\r\n        background: rgba(255, 255, 255, 0.03);\r\n        color: var(--text-muted);\r\n        border: 1px solid rgba(255, 255, 255, 0.08);\r\n        padding: 8px 14px;\r\n        font-family: system-ui, sans-serif;\r\n        font-size: 0.75rem;\r\n        font-weight: 600;\r\n        border-radius: 6px;\r\n        cursor: pointer;\r\n        transition: var(--transition-fast);\r\n        text-transform: uppercase;\r\n        letter-spacing: 1px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n    }\r\n\r\n    .pg-toolbar-btn i { transition: transform 0.2s ease; }\r\n\r\n    .pg-toolbar-btn:hover {\r\n        background: rgba(200, 16, 46, 0.15);\r\n        color: var(--goth-gold);\r\n        border-color: var(--goth-crimson);\r\n        box-shadow: 0 0 10px rgba(200, 16, 46, 0.3);\r\n    }\r\n\r\n    .pg-toolbar-btn:hover i { transform: translateY(-2px); color: var(--goth-gold); }\r\n    .pg-toolbar-btn:active { transform: scale(0.95); }\r\n    \r\n    .pg-preset-select {\r\n        background: rgba(139, 0, 0, 0.15);\r\n        color: var(--text-bright);\r\n        border: 1px solid rgba(139, 0, 0, 0.4);\r\n        padding: 8px 14px;\r\n        font-family: system-ui, sans-serif;\r\n        font-size: 0.75rem;\r\n        font-weight: 700;\r\n        border-radius: 6px;\r\n        cursor: pointer;\r\n        outline: none;\r\n        transition: var(--transition-fast);\r\n        text-transform: uppercase;\r\n        appearance: none;\r\n        flex-grow: 1;\r\n        max-width: 220px;\r\n    }\r\n    \r\n    .pg-preset-select:hover, .pg-preset-select:focus {\r\n        background: var(--goth-crimson);\r\n        color: #fff;\r\n        border-color: var(--goth-crimson);\r\n        box-shadow: var(--glow-crimson);\r\n    }\r\n    \r\n    .pg-preset-select option {\r\n        background: var(--void-dark);\r\n        color: #fff;\r\n    }\r\n\r\n    \/* SETTINGS SECTION *\/\r\n    .pg-settings-section {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 25px;\r\n    }\r\n\r\n    .pg-panel-label {\r\n        display: flex;\r\n        align-items: center;\r\n        font-family: system-ui, sans-serif;\r\n        font-size: 0.85rem;\r\n        font-weight: 800;\r\n        color: rgba(255,255,255,0.8);\r\n        text-transform: uppercase;\r\n        letter-spacing: 2px;\r\n        margin-bottom: 12px;\r\n    }\r\n    \r\n    .pg-panel-label i {\r\n        color: var(--goth-crimson);\r\n        margin-right: 10px;\r\n        font-size: 1.1rem;\r\n    }\r\n\r\n    .pg-grid-options {\r\n        display: grid;\r\n        gap: 12px;\r\n        grid-template-columns: repeat(2, 1fr);\r\n    }\r\n\r\n    .pg-option-btn {\r\n        background: rgba(0, 0, 0, 0.4);\r\n        border: 1px solid rgba(255, 255, 255, 0.05);\r\n        padding: 16px 10px;\r\n        color: var(--text-muted);\r\n        font-family: system-ui, sans-serif;\r\n        font-size: 0.75rem;\r\n        font-weight: 700;\r\n        cursor: pointer;\r\n        border-radius: 8px;\r\n        transition: var(--transition-fast);\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.5px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        gap: 8px;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n    \r\n    .pg-option-btn i {\r\n        font-size: 1.4rem;\r\n        transition: var(--transition-ui);\r\n    }\r\n\r\n    \/* MICRO-INTERACTIONS: Shimmer Sweep *\/\r\n    .pg-option-btn::after {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: -100%; width: 50%; height: 100%;\r\n        background: linear-gradient(90deg, transparent, rgba(200,16,46,0.2), transparent);\r\n        transform: skewX(-20deg);\r\n        transition: left 0.5s ease;\r\n    }\r\n\r\n    .pg-option-btn:hover {\r\n        background: rgba(139, 0, 0, 0.1);\r\n        border-color: rgba(200, 16, 46, 0.4);\r\n        color: #fff;\r\n        transform: translateY(-2px);\r\n    }\r\n    \r\n    .pg-option-btn:hover::after { left: 200%; }\r\n\r\n    .pg-option-btn:hover i {\r\n        transform: scale(1.15);\r\n        color: var(--goth-gold);\r\n    }\r\n\r\n    .pg-option-btn.active { \r\n        background: var(--grad-gothic);\r\n        color: #fff; \r\n        border-color: var(--goth-crimson);\r\n        box-shadow: 0 0 15px rgba(139, 0, 0, 0.5);\r\n    }\r\n    \r\n    .pg-option-btn.active i {\r\n        color: var(--goth-gold);\r\n        text-shadow: var(--glow-gold);\r\n    }\r\n\r\n    \/* RESULTS AREA - 1 CARD PER ROW REQUIRED *\/\r\n    .pg-results-area { \r\n        padding: 40px 30px; \r\n        position: relative; \r\n    }\r\n    \r\n    .pg-result-list {\r\n        display: grid;\r\n        grid-template-columns: 1fr; \r\n        gap: 20px;\r\n        position: relative; \r\n        z-index: 2;\r\n    }\r\n\r\n    \/* MICRO-INTERACTION: Card Hover Lift & Crimson Glow *\/\r\n    .pg-result-card {\r\n        background: rgba(10, 5, 6, 0.8);\r\n        border: 1px dashed rgba(200, 16, 46, 0.2);\r\n        padding: 25px 35px;\r\n        transition: var(--transition-ui);\r\n        position: relative;\r\n        overflow: hidden;\r\n        border-radius: 12px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        min-height: 120px; \r\n        box-sizing: border-box;\r\n    }\r\n    \r\n    .pg-result-card::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; width: 0; height: 100%;\r\n        background: var(--grad-gothic);\r\n        transition: width 0.3s ease;\r\n        opacity: 0.8;\r\n    }\r\n    \r\n    .pg-result-card:hover {\r\n        transform: translateY(-5px);\r\n        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.9), 0 0 25px rgba(200, 16, 46, 0.15);\r\n        border-color: rgba(200, 16, 46, 0.5);\r\n        border-style: solid;\r\n        background: rgba(15, 8, 9, 0.95);\r\n        z-index: 10;\r\n    }\r\n    \r\n    .pg-result-card:hover::before { width: 5px; }\r\n\r\n    \/* CARD HEADER & COPY ICON *\/\r\n    .pg-card-header {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        width: 100%;\r\n        margin-bottom: 20px;\r\n        border-bottom: 1px solid rgba(255,255,255,0.05);\r\n        padding-bottom: 15px;\r\n    }\r\n    \r\n    .pg-card-title {\r\n        font-family: system-ui, sans-serif;\r\n        font-size: 0.85rem;\r\n        font-weight: 800;\r\n        color: var(--text-muted);\r\n        text-transform: uppercase;\r\n        letter-spacing: 1.5px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        transition: var(--transition-fast);\r\n    }\r\n    \r\n    .pg-card-title i {\r\n        color: var(--goth-gold);\r\n        font-size: 1.1rem;\r\n    }\r\n\r\n    .pg-result-card:hover .pg-card-title {\r\n        color: #fff;\r\n        letter-spacing: 2px;\r\n        text-shadow: 0 0 10px rgba(212,175,55,0.4);\r\n    }\r\n\r\n    \/* MANDATORY COPY ICON BUTTON - Icon Bounce *\/\r\n    .pg-card-copy-btn {\r\n        background: rgba(255, 255, 255, 0.05);\r\n        border: 1px solid rgba(255, 255, 255, 0.1);\r\n        color: var(--text-bright);\r\n        width: 42px;\r\n        height: 42px;\r\n        border-radius: 8px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        cursor: pointer;\r\n        transition: var(--transition-fast);\r\n        outline: none;\r\n        flex-shrink: 0;\r\n        z-index: 5;\r\n    }\r\n    \r\n    .pg-card-copy-btn i {\r\n        font-size: 1.2rem;\r\n        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n    }\r\n    \r\n    .pg-card-copy-btn:hover {\r\n        background: rgba(200, 16, 46, 0.2);\r\n        border-color: var(--goth-crimson);\r\n        color: var(--goth-gold);\r\n        box-shadow: var(--glow-crimson);\r\n        transform: scale(1.05);\r\n    }\r\n    \r\n    .pg-card-copy-btn:hover i { transform: scale(1.2) translateY(-2px); }\r\n    .pg-card-copy-btn:active { transform: scale(0.95); }\r\n\r\n    \/* CRITICAL TEXT WRAP FIX *\/\r\n    .pg-card-preview {\r\n        font-size: 1.8rem;\r\n        color: #fff;\r\n        width: 100%;\r\n        text-align: center;\r\n        font-family: var(--body-font);\r\n        position: relative;\r\n        z-index: 1;\r\n        padding: 15px; \r\n        transition: var(--transition-fast);\r\n        \r\n        \/* THE FIX - Ensures all massive texts break properly *\/\r\n        white-space: pre-wrap !important;\r\n        word-break: break-word !important;\r\n        overflow-wrap: break-word !important;\r\n        box-sizing: border-box !important;\r\n        text-shadow: 2px 2px 5px #000;\r\n    }\r\n    \r\n    .pg-result-card:hover .pg-card-preview {\r\n        color: var(--goth-gold);\r\n        text-shadow: 2px 2px 8px #000, 0 0 15px rgba(200,16,46,0.3);\r\n    }\r\n\r\n    \/* LOAD MORE CTA - Pulse Ring *\/\r\n    .pg-btn-load {\r\n        background: rgba(0, 0, 0, 0.6);\r\n        backdrop-filter: blur(4px);\r\n        color: #fff;\r\n        border: 1px solid var(--goth-crimson);\r\n        padding: 18px 45px;\r\n        font-family: system-ui, sans-serif;\r\n        font-weight: 800;\r\n        font-size: 1rem;\r\n        cursor: pointer;\r\n        margin-top: 40px;\r\n        text-transform: uppercase;\r\n        border-radius: 8px;\r\n        transition: var(--transition-fast);\r\n        position: relative;\r\n        z-index: 2;\r\n        letter-spacing: 2px;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        box-shadow: 0 5px 15px rgba(0,0,0,0.6);\r\n    }\r\n    \r\n    .pg-btn-load::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; right: 0; bottom: 0;\r\n        border-radius: 8px;\r\n        border: 1px solid var(--goth-crimson);\r\n        opacity: 0;\r\n        transition: all 0.4s ease;\r\n        z-index: -1;\r\n    }\r\n    \r\n    .pg-btn-load i { transition: transform 0.3s ease; }\r\n    \r\n    .pg-btn-load:hover { \r\n        background: rgba(200, 16, 46, 0.15); \r\n        box-shadow: var(--glow-crimson);\r\n        transform: translateY(-3px);\r\n    }\r\n    \r\n    .pg-btn-load:hover::before {\r\n        transform: scale(1.05, 1.2);\r\n        opacity: 1;\r\n        border-color: transparent;\r\n    }\r\n    \r\n    .pg-btn-load:hover i { transform: translateY(4px); color: var(--goth-gold); }\r\n    .pg-btn-load:active { transform: translateY(0); }\r\n\r\n    \/* TOAST ALERT *\/\r\n    .pg-toast {\r\n        visibility: hidden;\r\n        background: rgba(13, 9, 10, 0.95);\r\n        backdrop-filter: blur(10px);\r\n        color: #fff;\r\n        padding: 15px 30px;\r\n        position: fixed;\r\n        left: 50%;\r\n        bottom: 40px;\r\n        transform: translateX(-50%) translateY(20px);\r\n        font-family: system-ui, sans-serif;\r\n        font-weight: 800;\r\n        z-index: 10000;\r\n        border-radius: 8px;\r\n        border: 1px solid var(--goth-crimson);\r\n        border-left: 5px solid var(--goth-crimson);\r\n        text-transform: uppercase;\r\n        box-shadow: var(--shadow-ui), var(--glow-crimson);\r\n        letter-spacing: 1px;\r\n        opacity: 0;\r\n        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n    }\r\n    \r\n    .pg-toast i { color: var(--goth-gold); font-size: 1.2rem; }\r\n    \r\n    .pg-toast.show { \r\n        visibility: visible; \r\n        opacity: 1;\r\n        transform: translateX(-50%) translateY(0);\r\n    }\r\n\r\n    \/* RESPONSIVE DESIGN *\/\r\n    @media (max-width: 900px) {\r\n        .pg-main-title { font-size: 2.4rem; } \r\n        .pg-controls-wrapper { grid-template-columns: 1fr; }\r\n    }\r\n\r\n    @media (max-width: 600px) {\r\n        .pg-container { padding: 30px 15px !important; }\r\n        .pg-results-area { padding: 30px 15px; }\r\n        .pg-controls-wrapper { padding: 20px; gap: 20px; }\r\n        .pg-text-input { min-height: 100px !important; font-size: 1.4rem !important; }\r\n        .pg-input-toolbar { justify-content: center; }\r\n        .pg-preset-select { max-width: 100%; text-align: center; }\r\n        .pg-result-list { grid-template-columns: 1fr; gap: 15px; } \r\n        .pg-option-btn { padding: 12px 8px; font-size: 0.7rem; }\r\n        .pg-option-btn i { font-size: 1.1rem; }\r\n        .pg-btn-load { padding: 15px 30px; font-size: 0.9rem; width: 100%; justify-content: center; }\r\n        .pg-main-title { font-size: 1.8rem; }\r\n        .pg-subtitle { font-size: 0.9rem; }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"pg-tool-wrapper\" id=\"pg-gothic-text-tool\">\r\n    <div class=\"pg-container pg-hero-content-wrapper\">\r\n        <h1 class=\"pg-main-title\"><i class=\"fa-solid fa-chess-rook\"><\/i> Gothic Text Generator - Style Instantly<\/h1>\r\n        <p class=\"pg-subtitle\">Convert standard text into dense, medieval Blackletter or clean Modern Gothic fonts. Perfect for dark aesthetics, fantasy lore, and elegant manuscript styles.<\/p>\r\n        \r\n        <div class=\"pg-generator-card\">\r\n            <div class=\"pg-controls-wrapper\">\r\n                \r\n                <!-- LEFT COLUMN: INPUT SECTION -->\r\n                <div class=\"pg-input-section\">\r\n                    <div class=\"pg-panel-label\"><i class=\"fa-solid fa-feather-pointed\"><\/i> Inscribe Your Text<\/div>\r\n                    <div class=\"pg-enhanced-input-wrapper\">\r\n                        <textarea class=\"pg-text-input\" id=\"pgInputText\" placeholder=\"Enter thy words here...\"><\/textarea>\r\n                        \r\n                        <div class=\"pg-input-toolbar\">\r\n                            <button class=\"pg-toolbar-btn\" id=\"pgBtnPaste\"><i class=\"fa-solid fa-paste\"><\/i> Paste<\/button>\r\n                            <button class=\"pg-toolbar-btn\" id=\"pgBtnSelectAll\"><i class=\"fa-solid fa-object-group\"><\/i> Select<\/button>\r\n                            <button class=\"pg-toolbar-btn\" id=\"pgBtnCopy\"><i class=\"fa-solid fa-copy\"><\/i> Copy Base<\/button>\r\n                            \r\n                            <select class=\"pg-preset-select\" id=\"pgPresetSelect\">\r\n                                <option value=\"\" disabled selected>\u2728 Gothic Lore Presets<\/option>\r\n                                <option value=\"Vampires are not bound by mortal laws.\">Vampire's Creed<\/option>\r\n                                <option value=\"The night is dark and full of terrors.\">Dark Night<\/option>\r\n                                <option value=\"Abandon all hope, ye who enter here.\">Inferno Gate<\/option>\r\n                                <option value=\"Shadows gather where the light fades.\">Shadow's Edge<\/option>\r\n                                <option value=\"What is dead may never die.\">Ancient Vow<\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <!-- RIGHT COLUMN: SETTINGS GRID -->\r\n                <div class=\"pg-settings-section\">\r\n                    <div>\r\n                        <div class=\"pg-panel-label\"><i class=\"fa-solid fa-scroll\"><\/i> Typography Style<\/div>\r\n                        <div class=\"pg-grid-options\">\r\n                            <button class=\"pg-option-btn mode-btn active\" data-val=\"Fraktur\">\r\n                                <i class=\"fa-solid fa-g\"><\/i> Classic Fraktur\r\n                            <\/button>\r\n                            <button class=\"pg-option-btn mode-btn\" data-val=\"BoldFraktur\">\r\n                                <i class=\"fa-solid fa-bold\"><\/i> Bold Fraktur\r\n                            <\/button>\r\n                            <button class=\"pg-option-btn mode-btn\" data-val=\"Modern\">\r\n                                <i class=\"fa-solid fa-font\"><\/i> Modern Clean\r\n                            <\/button>\r\n                            <button class=\"pg-option-btn mode-btn\" data-val=\"Double\">\r\n                                <i class=\"fa-solid fa-heading\"><\/i> Double Struck\r\n                            <\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div>\r\n                        <div class=\"pg-panel-label\"><i class=\"fa-solid fa-wand-magic-sparkles\"><\/i> Embellishments<\/div>\r\n                        <div class=\"pg-grid-options\">\r\n                            <button class=\"pg-option-btn style-btn active\" data-val=\"None\">\r\n                                <i class=\"fa-solid fa-ban\"><\/i> Standard\r\n                            <\/button>\r\n                            <button class=\"pg-option-btn style-btn\" data-val=\"Daggers\">\r\n                                <i class=\"fa-solid fa-cross\"><\/i> Daggers\r\n                            <\/button>\r\n                            <button class=\"pg-option-btn style-btn\" data-val=\"Flourish\">\r\n                                <i class=\"fa-solid fa-seedling\"><\/i> Flourish\r\n                            <\/button>\r\n                            <button class=\"pg-option-btn style-btn\" data-val=\"Corrupted\">\r\n                                <i class=\"fa-solid fa-spider\"><\/i> Corrupted\r\n                            <\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"pg-results-area\">\r\n                <div class=\"pg-result-list\" id=\"pgResultList\"><\/div>\r\n                <button class=\"pg-btn-load\" id=\"pgLoadMoreBtn\"><span>Unearth More Lore<\/span> <i class=\"fa-solid fa-arrow-down\"><\/i><\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <div id=\"pgToast\" class=\"pg-toast\"><i class=\"fa-solid fa-check-double\"><\/i> Manuscript Copied<\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n    \/\/ Scoped container\r\n    const wrapper = document.getElementById('pg-gothic-text-tool');\r\n    const inputEl = wrapper.querySelector('#pgInputText');\r\n    const resultList = wrapper.querySelector('#pgResultList');\r\n    const loadMoreBtn = wrapper.querySelector('#pgLoadMoreBtn');\r\n    const toast = wrapper.querySelector('#pgToast');\r\n    \r\n    const btnPaste = wrapper.querySelector('#pgBtnPaste');\r\n    const btnSelectAll = wrapper.querySelector('#pgBtnSelectAll');\r\n    const btnCopy = wrapper.querySelector('#pgBtnCopy');\r\n    const presetSelect = wrapper.querySelector('#pgPresetSelect');\r\n\r\n    let currentMode = 'Fraktur';\r\n    let currentStyle = 'None';\r\n    let limit = 6; \r\n    const LOAD_INCREMENT = 6; \r\n\r\n    \/\/ Proper Array handling for surrogate pairs\r\n    const baseStr = \"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ\";\r\n    const baseArr = Array.from(baseStr);\r\n    \r\n    \/\/ Fraktur - Handling standard unicode mapped points for C, H, I, R, Z properly via literal strings mapped\r\n    const frakturArr = Array.from(\"\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\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\");\r\n    const boldFrakturArr = Array.from(\"\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\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\");\r\n    const smallCapsArr = Array.from(\"\u1d00\u0299\u1d04\u1d05\u1d07\u0493\u0262\u029c\u026a\u1d0a\u1d0b\u029f\u1d0d\u0274\u1d0f\u1d18\u01eb\u0280s\u1d1b\u1d1c\u1d20\u1d21x\u028f\u1d22\u1d00\u0299\u1d04\u1d05\u1d07\u0493\u0262\u029c\u026a\u1d0a\u1d0b\u029f\u1d0d\u0274\u1d0f\u1d18\u01eb\u0280s\u1d1b\u1d1c\u1d20\u1d21x\u028f\u1d22\");\r\n    const doubleStruckArr = Array.from(\"\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\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\");\r\n    \r\n    const zalgoUp = ['\\u030d', '\\u030e', '\\u0304', '\\u0305', '\\u033f', '\\u0311', '\\u0306', '\\u0310'];\r\n    const zalgoDown = ['\\u0316', '\\u0317', '\\u0318', '\\u0319', '\\u031c', '\\u031d', '\\u031e', '\\u031f'];\r\n    \r\n    const rand = (max) => Math.floor(Math.random() * max);\r\n\r\n    \/\/ Ultimate fallback copy function\r\n    const copyToClipboard = (text, btnElement) => {\r\n        const textArea = document.createElement(\"textarea\");\r\n        textArea.value = text;\r\n        textArea.style.top = \"0\";\r\n        textArea.style.left = \"0\";\r\n        textArea.style.position = \"fixed\";\r\n        textArea.style.opacity = \"0\";\r\n        document.body.appendChild(textArea);\r\n        textArea.focus();\r\n        textArea.select();\r\n        \r\n        try {\r\n            document.execCommand('copy');\r\n            showToast(btnElement);\r\n        } catch (err) {\r\n            console.error('Fallback: Oops, unable to copy', err);\r\n            if (navigator.clipboard) {\r\n                navigator.clipboard.writeText(text).then(() => showToast(btnElement));\r\n            }\r\n        }\r\n        document.body.removeChild(textArea);\r\n    };\r\n\r\n    const showToast = (btn) => {\r\n        if(btn) {\r\n            btn.innerHTML = '<i class=\"fa-solid fa-check\"><\/i>';\r\n            btn.style.background = 'var(--goth-crimson)';\r\n            btn.style.borderColor = 'var(--goth-crimson)';\r\n            btn.style.color = '#fff';\r\n            \r\n            setTimeout(() => {\r\n                btn.innerHTML = '<i class=\"fa-regular fa-copy\"><\/i>';\r\n                btn.style.background = '';\r\n                btn.style.borderColor = '';\r\n                btn.style.color = '';\r\n            }, 2000);\r\n        }\r\n        \r\n        toast.classList.add('show');\r\n        setTimeout(() => toast.classList.remove('show'), 2000);\r\n    };\r\n\r\n    \/\/ Generate 120 configurations for massive live preview\r\n    const generateConfigs = () => {\r\n        const templates = [];\r\n        const names = [\r\n            'Blood Manuscript', 'Vampire Lord', 'Dark Citadel', 'Gargoyle Core', \r\n            'Cursed Crown', 'Ancient Tome', 'Midnight Requiem', 'Abyssal Script',\r\n            'Crimson Oath', 'Shadow Lineage', 'Forbidden Lore', 'Medieval Relic'\r\n        ];\r\n        \r\n        for(let i=0; i<120; i++){\r\n            templates.push({\r\n                id: `goth-${i}`,\r\n                name: names[i % names.length] + ` Vol.${Math.floor(Math.random()*99)+1}`,\r\n                icon: ['chess-rook', 'cross', 'crow', 'book-skull', 'moon', 'bat', 'spider'][i % 7]\r\n            });\r\n        }\r\n        return templates.sort(() => Math.random() - 0.5);\r\n    };\r\n\r\n    const ALL_STYLES = generateConfigs();\r\n\r\n    \/\/ Map Character\r\n    const mapChar = (char, mode) => {\r\n        const idx = baseArr.indexOf(char);\r\n        if (idx === -1) return char;\r\n        \r\n        if(mode === 'Fraktur') return frakturArr[idx];\r\n        if(mode === 'BoldFraktur') return boldFrakturArr[idx];\r\n        if(mode === 'Modern') return smallCapsArr[idx];\r\n        if(mode === 'Double') return doubleStruckArr[idx];\r\n        return char;\r\n    };\r\n\r\n    \/\/ Apply Zalgo Corruption\r\n    const applyCorruption = (text) => {\r\n        return Array.from(text).map(c => {\r\n            if (c === ' ') return c;\r\n            let res = c;\r\n            for(let i=0; i<rand(2)+1; i++) res += zalgoUp[rand(zalgoUp.length)];\r\n            for(let i=0; i<rand(2)+1; i++) res += zalgoDown[rand(zalgoDown.length)];\r\n            return res;\r\n        }).join('');\r\n    };\r\n\r\n    \/\/ Text Transformation Logic\r\n    const transformLogic = (text, mode, style, variationIndex) => {\r\n        if (!text) return \"\";\r\n        \r\n        \/\/ 1. Map Characters based on Typography Mode\r\n        let mappedText = Array.from(text).map(c => mapChar(c, mode)).join('');\r\n\r\n        \/\/ 2. Apply Embellishments\r\n        if (style === 'Daggers') {\r\n            const daggers = ['\u2e38', '\u2020', '\u2021'];\r\n            const dag = daggers[variationIndex % daggers.length];\r\n            mappedText = `${dag} ${mappedText} ${dag}`;\r\n        } \r\n        else if (style === 'Flourish') {\r\n            const flourishes = [\r\n                {l: '\u0f3a', r: '\u0f3b'}, \r\n                {l: '\ua9c1', r: '\ua9c2'}, \r\n                {l: '\ud81a\udd0d', r: '\ud81a\udd0d'}, \r\n                {l: '\u2671', r: '\u2671'}\r\n            ];\r\n            const f = flourishes[variationIndex % flourishes.length];\r\n            mappedText = `${f.l} ${mappedText} ${f.r}`;\r\n        }\r\n        else if (style === 'Corrupted') {\r\n            mappedText = applyCorruption(mappedText);\r\n            if(variationIndex % 2 === 0) mappedText = `\u2620\ufe0f ${mappedText} \u2620\ufe0f`;\r\n        }\r\n\r\n        return mappedText;\r\n    };\r\n\r\n    const render = () => {\r\n        resultList.innerHTML = '';\r\n        let raw = inputEl.value || \"Vampires are not bound by mortal laws.\";\r\n        \r\n        const displayList = ALL_STYLES.slice(0, limit);\r\n\r\n        displayList.forEach((s, idx) => {\r\n            const out = transformLogic(raw, currentMode, currentStyle, idx);\r\n            \r\n            const card = document.createElement('div');\r\n            card.className = 'pg-result-card';\r\n            \r\n            card.innerHTML = `\r\n                <div class=\"pg-card-header\">\r\n                    <div class=\"pg-card-title\">\r\n                        <i class=\"fa-solid fa-${s.icon}\"><\/i> \r\n                        ${s.name}\r\n                    <\/div>\r\n                    <button class=\"pg-card-copy-btn\" title=\"Copy Manuscript\"><i class=\"fa-regular fa-copy\"><\/i><\/button>\r\n                <\/div>\r\n                <div class=\"pg-card-preview\">${out}<\/div>\r\n            `;\r\n            \r\n            const copyBtn = card.querySelector('.pg-card-copy-btn');\r\n            copyBtn.addEventListener('click', (e) => {\r\n                e.preventDefault();\r\n                copyToClipboard(out, copyBtn);\r\n            });\r\n            \r\n            resultList.appendChild(card);\r\n        });\r\n\r\n        loadMoreBtn.style.display = limit >= ALL_STYLES.length ? 'none' : 'inline-flex';\r\n        const remaining = Math.max(0, ALL_STYLES.length - limit);\r\n        if (remaining > 0) {\r\n            loadMoreBtn.querySelector('span').innerText = `Unearth More Lore (${remaining})`;\r\n        }\r\n    };\r\n\r\n    \/\/ Events\r\n    inputEl.addEventListener('input', render);\r\n    \r\n    btnPaste.addEventListener('click', async (e) => {\r\n        e.preventDefault();\r\n        try {\r\n            const text = await navigator.clipboard.readText();\r\n            inputEl.value = text;\r\n            render();\r\n        } catch (err) {\r\n            inputEl.focus();\r\n            document.execCommand('paste');\r\n            render();\r\n        }\r\n    });\r\n\r\n    btnSelectAll.addEventListener('click', (e) => {\r\n        e.preventDefault();\r\n        inputEl.select();\r\n    });\r\n\r\n    btnCopy.addEventListener('click', (e) => {\r\n        e.preventDefault();\r\n        if(inputEl.value) {\r\n            copyToClipboard(inputEl.value, null);\r\n            toast.querySelector('i').className = 'fa-solid fa-copy';\r\n            toast.querySelector('i').nextSibling.textContent = ' Source Copied';\r\n            setTimeout(() => {\r\n                toast.querySelector('i').className = 'fa-solid fa-check-double';\r\n                toast.querySelector('i').nextSibling.textContent = ' Manuscript Copied';\r\n            }, 2000);\r\n        }\r\n    });\r\n    \r\n    presetSelect.addEventListener('change', (e) => {\r\n        if(e.target.value) {\r\n            inputEl.value = e.target.value;\r\n            render();\r\n            e.target.selectedIndex = 0; \r\n        }\r\n    });\r\n    \r\n    loadMoreBtn.addEventListener('click', (e) => {\r\n        e.preventDefault();\r\n        limit += LOAD_INCREMENT; \r\n        render(); \r\n    });\r\n\r\n    wrapper.querySelectorAll('.mode-btn').forEach(btn => {\r\n        btn.addEventListener('click', (e) => {\r\n            e.preventDefault();\r\n            wrapper.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));\r\n            btn.classList.add('active');\r\n            currentMode = btn.getAttribute('data-val');\r\n            limit = 6; \r\n            render(); \r\n        });\r\n    });\r\n\r\n    wrapper.querySelectorAll('.style-btn').forEach(btn => {\r\n        btn.addEventListener('click', (e) => {\r\n            e.preventDefault();\r\n            wrapper.querySelectorAll('.style-btn').forEach(b => b.classList.remove('active'));\r\n            btn.classList.add('active');\r\n            currentStyle = btn.getAttribute('data-val');\r\n            limit = 6; \r\n            render();\r\n        });\r\n    });\r\n\r\n    \/\/ Init\r\n    render();\r\n});\r\n<\/script>\r\n<!-- END OF FILE Gothic Text Generator -->\r\n\r\n<!-- <content section is starting -->\r\n\r\n<div>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n    <!-- SECTION 1 -->\r\n\r\n\r\n\r\n<section class=\"pg-gtg-section pg-gtg-sec1\">\r\n        <div class=\"pg-gtg-wrap\">\r\n\t\r\n<\/div>\r\n\t<\/section>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n    <section class=\"pg-gtg-section pg-gtg-sec1\">\r\n        <div class=\"pg-gtg-wrap\">\r\n            <h2 class=\"pg-gtg-heading\">What Makes This <span class=\"pg-gtg-kw\">Gothic Text Generator<\/span> Different?<\/h2>\r\n            <p class=\"pg-gtg-sub\">Most font converters produce broken or unsupported characters. Our gothic text generator uses authentic Unicode mappings to create flawless Fraktur and blackletter text that actually renders everywhere.<\/p>\r\n            <div class=\"pg-gtg-grid\">\r\n                <div class=\"pg-gtg-card\">\r\n                    <div class=\"pg-gtg-icon\" style=\"background:rgba(63,81,181,0.12);color:#3f51b5;\"><i class=\"fa-solid fa-font\"><\/i><\/div>\r\n                    <div class=\"pg-gtg-title\">Authentic Fraktur Unicode<\/div>\r\n                    <p class=\"pg-gtg-desc\">Our gothic text generator uses real mathematical Fraktur Unicode blocks \u2014 not fake lookalikes \u2014 so every letter displays as a genuine gothic character on any compatible device or browser.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-gtg-card\">\r\n                    <div class=\"pg-gtg-icon\" style=\"background:rgba(156,39,176,0.12);color:#9c27b0;\"><i class=\"fa-solid fa-layer-group\"><\/i><\/div>\r\n                    <div class=\"pg-gtg-title\">Multiple Dark Lettering Styles<\/div>\r\n                    <p class=\"pg-gtg-desc\">Choose from bold Fraktur, double-struck gothic, and uncial-style variations \u2014 our gothic text generator offers several distinct medieval text formats for different aesthetic needs.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-gtg-card\">\r\n                    <div class=\"pg-gtg-icon\" style=\"background:rgba(0,184,212,0.12);color:#00b8d4;\"><i class=\"fa-solid fa-bolt\"><\/i><\/div>\r\n                    <div class=\"pg-gtg-title\">Instant Zero-Lag Conversion<\/div>\r\n                    <p class=\"pg-gtg-desc\">Type a single character and watch it transform into gothic script immediately \u2014 our gothic text generator processes everything locally in your browser with zero server delays or loading spinners.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-gtg-card\">\r\n                    <div class=\"pg-gtg-icon\" style=\"background:rgba(76,175,80,0.12);color:#4caf50;\"><i class=\"fa-solid fa-clipboard-check\"><\/i><\/div>\r\n                    <div class=\"pg-gtg-title\">One-Click Copy and Paste<\/div>\r\n                    <p class=\"pg-gtg-desc\">Found the perfect gothic style? One click copies pure Unicode gothic text to your clipboard \u2014 no invisible formatting characters, no encoding issues, just clean text ready to paste anywhere.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-gtg-card\">\r\n                    <div class=\"pg-gtg-icon\" style=\"background:rgba(244,67,54,0.12);color:#f44336;\"><i class=\"fa-solid fa-display\"><\/i><\/div>\r\n                    <div class=\"pg-gtg-title\">Renders on Every Device<\/div>\r\n                    <p class=\"pg-gtg-desc\">iOS, Android, Windows, macOS \u2014 our gothic text generator outputs standard Unicode that renders on all modern operating systems without requiring users to download special fonts or apps.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-gtg-card\">\r\n                    <div class=\"pg-gtg-icon\" style=\"background:rgba(255,145,0,0.12);color:#ff9100;\"><i class=\"fa-solid fa-infinity\"><\/i><\/div>\r\n                    <div class=\"pg-gtg-title\">Unlimited and Completely Free<\/div>\r\n                    <p class=\"pg-gtg-desc\">No usage caps, no premium tiers, no sign-up walls. Convert as much text as you want with our gothic text generator \u2014 it's free forever, with zero strings attached and zero ads blocking your workflow.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 2 -->\r\n    <section class=\"pg-gtg-section pg-gtg-sec2\">\r\n        <div class=\"pg-gtg-wrap\">\r\n            <h2 class=\"pg-gtg-heading pg-gtg-sec2-heading\">How to Use Our <span class=\"pg-gtg-kw pg-gtg-sec2-kw\">Gothic Text Generator<\/span> Step by Step?<\/h2>\r\n            <p class=\"pg-gtg-sub pg-gtg-sec2-sub\">Generating gothic text takes seconds. No design skills needed \u2014 just follow these simple steps and get your dark medieval text ready to copy and paste anywhere.<\/p>\r\n            <div class=\"pg-gtg-grid\">\r\n                <div class=\"pg-gtg-card pg-gtg-sec2-card\">\r\n                    <span class=\"pg-gtg-emoji\">\u2328\ufe0f<\/span>\r\n                    <div class=\"pg-gtg-title\">Step 1: Type Your Normal Text<\/div>\r\n                    <p class=\"pg-gtg-desc\">Enter any word, phrase, or paragraph into the input box \u2014 our gothic text generator accepts regular Latin characters, numbers, and basic punctuation as your starting text.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-gtg-card pg-gtg-sec2-card\">\r\n                    <span class=\"pg-gtg-emoji\">\ud83d\udd8b\ufe0f<\/span>\r\n                    <div class=\"pg-gtg-title\">Step 2: Browse Gothic Styles<\/div>\r\n                    <p class=\"pg-gtg-desc\">Scroll through the different Fraktur and blackletter options generated below \u2014 each style has a distinct medieval character weight, from light uncial to heavy bold gothic script.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-gtg-card pg-gtg-sec2-card\">\r\n                    <span class=\"pg-gtg-emoji\">\ud83d\udd0d<\/span>\r\n                    <div class=\"pg-gtg-title\">Step 3: Preview the Output<\/div>\r\n                    <p class=\"pg-gtg-desc\">See exactly how your text looks in gothic formatting before copying \u2014 our gothic text generator shows a live preview that mirrors exactly what it will look like when pasted on other platforms.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-gtg-card pg-gtg-sec2-card\">\r\n                    <span class=\"pg-gtg-emoji\">\ud83d\udccb<\/span>\r\n                    <div class=\"pg-gtg-title\">Step 4: Copy the Gothic Text<\/div>\r\n                    <p class=\"pg-gtg-desc\">Click the copy button next to your preferred style \u2014 the gothic text transfers to your clipboard as raw Unicode, maintaining every character's integrity with zero formatting errors.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-gtg-card pg-gtg-sec2-card\">\r\n                    <span class=\"pg-gtg-emoji\">\ud83c\udf10<\/span>\r\n                    <div class=\"pg-gtg-title\">Step 5: Paste Anywhere Online<\/div>\r\n                    <p class=\"pg-gtg-desc\">Drop your gothic text into social media bios, gaming profiles, YouTube descriptions, or messaging apps \u2014 it renders natively anywhere that supports standard Unicode text input.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-gtg-card pg-gtg-sec2-card\">\r\n                    <span class=\"pg-gtg-emoji\">\ud83e\udde9<\/span>\r\n                    <div class=\"pg-gtg-title\">Step 6: Mix Gothic with Normal Text<\/div>\r\n                    <p class=\"pg-gtg-desc\">Create striking contrast by combining gothic text with regular text in a single post \u2014 use gothic for keywords and normal text for the rest to build a unique visual hierarchy.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 3 -->\r\n    <section class=\"pg-gtg-section pg-gtg-sec3\">\r\n        <div class=\"pg-gtg-wrap\">\r\n            <h2 class=\"pg-gtg-heading\">Best Places to Use <span class=\"pg-gtg-kw\">Gothic Text Generator<\/span> Results?<\/h2>\r\n            <p class=\"pg-gtg-sub\">Gothic text isn't just for medieval history buffs \u2014 it's a powerful design choice for gaming, social media, branding, and creative projects. Here's where our gothic text generator output shines the most.<\/p>\r\n            <div class=\"pg-gtg-grid\">\r\n                <div class=\"pg-gtg-card pg-gtg-sec3-card\">\r\n                    <div class=\"pg-gtg-icon\" style=\"background:rgba(88,101,242,0.12);color:#5865f2;\"><i class=\"fa-solid fa-gamepad\"><\/i><\/div>\r\n                    <div class=\"pg-gtg-title\">Gaming Usernames and Clan Tags<\/div>\r\n                    <p class=\"pg-gtg-desc\">Gothic script instantly gives gaming usernames a dark, intimidating edge \u2014 perfect for RPGs, FPS clans, and competitive team tags where a strong visual identity gives you a psychological advantage.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-gtg-card pg-gtg-sec3-card\">\r\n                    <div class=\"pg-gtg-icon\" style=\"background:rgba(225,48,108,0.12);color:#e1306c;\"><i class=\"fa-brands fa-instagram\"><\/i><\/div>\r\n                    <div class=\"pg-gtg-title\">Dark Aesthetic Social Bios<\/div>\r\n                    <p class=\"pg-gtg-desc\">Gothic text in Instagram or TikTok bios immediately signals a dark aesthetic \u2014 it pairs perfectly with alternative fashion, witchcore, vampire aesthetic, and grunge-themed profiles that need authentic visual tone.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-gtg-card pg-gtg-sec3-card\">\r\n                    <div class=\"pg-gtg-icon\" style=\"background:rgba(255,0,80,0.10);color:#ff0050;\"><i class=\"fa-solid fa-skull-crossbones\"><\/i><\/div>\r\n                    <div class=\"pg-gtg-title\">Horror and True Crime Content<\/div>\r\n                    <p class=\"pg-gtg-desc\">Creepypasta narrators, true crime YouTubers, and horror podcasters use our gothic text generator for titles and thumbnails \u2014 the medieval script creates an eerie, unsettling atmosphere before the content even starts.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-gtg-card pg-gtg-sec3-card\">\r\n                    <div class=\"pg-gtg-icon\" style=\"background:rgba(29,161,242,0.12);color:#1da1f2;\"><i class=\"fa-solid fa-pen-nib\"><\/i><\/div>\r\n                    <div class=\"pg-gtg-title\">Tattoo Design and Inspiration<\/div>\r\n                    <p class=\"pg-gtg-desc\">Use our gothic text generator to preview how a quote or word will look in Fraktur script before getting inked \u2014 it's the fastest way to test different gothic lettering styles for tattoo planning and inspiration.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-gtg-card pg-gtg-sec3-card\">\r\n                    <div class=\"pg-gtg-icon\" style=\"background:rgba(255,61,0,0.12);color:#ff3d00;\"><i class=\"fa-solid fa-guitar\"><\/i><\/div>\r\n                    <div class=\"pg-gtg-title\">Metal Band Logos and Merch<\/div>\r\n                    <p class=\"pg-gtg-desc\">Black metal, death metal, and doom metal bands rely on gothic script for logos and merchandise \u2014 our gothic text generator creates instantly usable band name concepts in authentic blackletter formatting.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-gtg-card pg-gtg-sec3-card\">\r\n                    <div class=\"pg-gtg-icon\" style=\"background:rgba(0,200,83,0.12);color:#00c853;\"><i class=\"fa-solid fa-book-open\"><\/i><\/div>\r\n                    <div class=\"pg-gtg-title\">Storytelling and RPG Projects<\/div>\r\n                    <p class=\"pg-gtg-desc\">Dungeon Masters, fantasy writers, and tabletop RPG creators use gothic text for campaign titles, ancient prophecies, and in-game documents \u2014 it adds instant historical depth to any fictional world.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <style>\r\n        *, *::before, *::after {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        :root {\r\n            --gtg-cyan: #00b8d4;\r\n            --gtg-grad: linear-gradient(135deg, #00b8d4, #ea00ff, #ff9100);\r\n            --gtg-shadow: 0 12px 30px rgba(0, 184, 212, 0.16);\r\n            --gtg-ease: cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            --gtg-speed: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            --gtg-ff: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\r\n        }\r\n\r\n        .pg-gtg-section {\r\n            width: 100%;\r\n            padding: clamp(48px, 8vw, 96px) 20px;\r\n            position: relative;\r\n            font-family: var(--gtg-ff);\r\n            color: #0a0a0a;\r\n            line-height: 1.6;\r\n            -webkit-font-smoothing: antialiased;\r\n        }\r\n\r\n        .pg-gtg-wrap {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        .pg-gtg-heading {\r\n            font-family: var(--gtg-ff);\r\n            font-size: clamp(1.5rem, 4vw, 2.25rem);\r\n            font-weight: 800;\r\n            text-align: center;\r\n            color: #000000;\r\n            margin-bottom: clamp(8px, 1.5vw, 14px);\r\n            line-height: 1.2;\r\n            letter-spacing: -0.03em;\r\n        }\r\n\r\n        .pg-gtg-kw {\r\n            color: #000000;\r\n            position: relative;\r\n        }\r\n\r\n        .pg-gtg-kw::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: -2px;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 3px;\r\n            background: var(--gtg-grad);\r\n            border-radius: 3px;\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s var(--gtg-ease);\r\n        }\r\n\r\n        .pg-gtg-section:hover .pg-gtg-kw::after {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-gtg-sub {\r\n            font-family: var(--gtg-ff);\r\n            font-size: clamp(0.88rem, 1.8vw, 1.02rem);\r\n            font-weight: 400;\r\n            text-align: center;\r\n            color: #1a1a1a;\r\n            max-width: 660px;\r\n            margin: 0 auto clamp(32px, 5vw, 56px);\r\n            line-height: 1.7;\r\n        }\r\n\r\n        .pg-gtg-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(3, 1fr);\r\n            gap: clamp(16px, 2.5vw, 26px);\r\n            align-items: stretch;\r\n        }\r\n\r\n        \/* === CARD BASE === *\/\r\n        .pg-gtg-card {\r\n            border-radius: 16px;\r\n            padding: clamp(22px, 3vw, 32px);\r\n            position: relative;\r\n            cursor: pointer;\r\n            -webkit-tap-highlight-color: transparent;\r\n            user-select: none;\r\n            transition: var(--gtg-speed);\r\n            border: 1.5px solid #e0e0e8;\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n\r\n        .pg-gtg-card::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: -1px;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 3px;\r\n            background: var(--gtg-grad);\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s var(--gtg-ease);\r\n            z-index: 4;\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-gtg-card::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            width: 0;\r\n            height: 0;\r\n            border-radius: 50%;\r\n            background: radial-gradient(circle, rgba(0,184,212,0.10) 0%, rgba(234,0,255,0.04) 60%, transparent 100%);\r\n            transform: translate(-50%, -50%);\r\n            transition: width 0.55s ease-out, height 0.55s ease-out, opacity 0.55s ease-out;\r\n            opacity: 0;\r\n            z-index: 0;\r\n            pointer-events: none;\r\n        }\r\n\r\n        .pg-gtg-card:hover::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-gtg-card.pg-gtg-down {\r\n            transform: translateY(-1px) scale(0.985) !important;\r\n        }\r\n\r\n        .pg-gtg-card.pg-gtg-down::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-gtg-card.pg-gtg-glow::after {\r\n            width: 320px;\r\n            height: 320px;\r\n            opacity: 1;\r\n        }\r\n\r\n        .pg-gtg-card.pg-gtg-glow-out::after {\r\n            width: 320px;\r\n            height: 320px;\r\n            opacity: 0;\r\n        }\r\n\r\n        \/* === ICON === *\/\r\n        .pg-gtg-icon {\r\n            width: clamp(46px, 5vw, 58px);\r\n            height: clamp(46px, 5vw, 58px);\r\n            min-width: 46px;\r\n            min-height: 46px;\r\n            border-radius: 14px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: clamp(18px, 2.5vw, 24px);\r\n            margin-bottom: clamp(14px, 2vw, 20px);\r\n            transition: var(--gtg-speed);\r\n            position: relative;\r\n            z-index: 3;\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .pg-gtg-card:hover .pg-gtg-icon {\r\n            transform: scale(1.12) rotate(-4deg);\r\n        }\r\n\r\n        .pg-gtg-card.pg-gtg-down .pg-gtg-icon {\r\n            transform: scale(1.04) rotate(0deg);\r\n        }\r\n\r\n        \/* === EMOJI === *\/\r\n        .pg-gtg-emoji {\r\n            font-size: clamp(28px, 3.5vw, 36px);\r\n            margin-bottom: clamp(12px, 1.8vw, 16px);\r\n            display: inline-block;\r\n            transition: var(--gtg-speed);\r\n            position: relative;\r\n            z-index: 3;\r\n            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .pg-gtg-card:hover .pg-gtg-emoji {\r\n            transform: scale(1.22) rotate(-6deg);\r\n        }\r\n\r\n        .pg-gtg-card.pg-gtg-down .pg-gtg-emoji {\r\n            transform: scale(1.08) rotate(0deg);\r\n        }\r\n\r\n        \/* === TITLE === *\/\r\n        .pg-gtg-title {\r\n            font-family: var(--gtg-ff);\r\n            font-size: clamp(0.95rem, 2vw, 1.1rem);\r\n            font-weight: 700;\r\n            color: #000000;\r\n            margin-bottom: clamp(6px, 1vw, 10px);\r\n            line-height: 1.35;\r\n            position: relative;\r\n            z-index: 3;\r\n        }\r\n\r\n        \/* === DESC === *\/\r\n        .pg-gtg-desc {\r\n            font-family: var(--gtg-ff);\r\n            font-size: clamp(0.8rem, 1.5vw, 0.9rem);\r\n            font-weight: 400;\r\n            color: #1a1a1a;\r\n            line-height: 1.65;\r\n            position: relative;\r\n            z-index: 3;\r\n            margin-top: auto;\r\n        }\r\n\r\n        \/* ==============================\r\n           SECTION 1 \u2014 #fff bg \/ #fff cards\r\n           ============================== *\/\r\n        .pg-gtg-sec1 {\r\n            background: #ffffff;\r\n        }\r\n\r\n        .pg-gtg-sec1 .pg-gtg-card {\r\n            background: #ffffff;\r\n            border-color: #dcdce5;\r\n            box-shadow: 0 2px 8px rgba(0,0,0,0.04);\r\n        }\r\n\r\n        .pg-gtg-sec1 .pg-gtg-card:hover {\r\n            border-color: var(--gtg-cyan);\r\n            box-shadow: var(--gtg-shadow);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        \/* ==============================\r\n           SECTION 2 \u2014 gradient bg \/ white cards\r\n           ============================== *\/\r\n        .pg-gtg-sec2 {\r\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        }\r\n\r\n        .pg-gtg-sec2 .pg-gtg-heading.pg-gtg-sec2-heading {\r\n            color: #ffffff;\r\n        }\r\n\r\n        .pg-gtg-sec2 .pg-gtg-kw.pg-gtg-sec2-kw {\r\n            color: #ffffff;\r\n        }\r\n\r\n        .pg-gtg-sec2 .pg-gtg-kw.pg-gtg-sec2-kw::after {\r\n            background: linear-gradient(90deg, #ffd700, #ff6b6b, #ffffff);\r\n        }\r\n\r\n        .pg-gtg-sec2 .pg-gtg-sub.pg-gtg-sec2-sub {\r\n            color: rgba(255,255,255,0.9);\r\n        }\r\n\r\n        .pg-gtg-sec2 .pg-gtg-card.pg-gtg-sec2-card {\r\n            background: #ffffff;\r\n            border-color: rgba(255,255,255,0.25);\r\n            box-shadow: 0 4px 20px rgba(0,0,0,0.12);\r\n        }\r\n\r\n        .pg-gtg-sec2 .pg-gtg-card.pg-gtg-sec2-card::before {\r\n            background: linear-gradient(90deg, #667eea, #764ba2, #ffd700);\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-gtg-sec2 .pg-gtg-card.pg-gtg-sec2-card::after {\r\n            background: radial-gradient(circle, rgba(102,126,234,0.08) 0%, rgba(118,75,162,0.04) 60%, transparent 100%);\r\n        }\r\n\r\n        .pg-gtg-sec2 .pg-gtg-card.pg-gtg-sec2-card:hover {\r\n            border-color: rgba(102,126,234,0.5);\r\n            box-shadow: 0 14px 40px rgba(118,75,162,0.25);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        .pg-gtg-sec2 .pg-gtg-emoji {\r\n            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));\r\n        }\r\n\r\n        \/* ==============================\r\n           SECTION 3 \u2014 #fff bg \/ soft gray cards\r\n           ============================== *\/\r\n        .pg-gtg-sec3 {\r\n            background: #ffffff;\r\n        }\r\n\r\n        .pg-gtg-sec3 .pg-gtg-card.pg-gtg-sec3-card {\r\n            background: #f5f6f9;\r\n            border-color: #d8dce4;\r\n            box-shadow: 0 2px 8px rgba(0,0,0,0.03);\r\n        }\r\n\r\n        .pg-gtg-sec3 .pg-gtg-card.pg-gtg-sec3-card::before {\r\n            background: linear-gradient(90deg, #00b8d4, #ea00ff, #ff9100);\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-gtg-sec3 .pg-gtg-card.pg-gtg-sec3-card:hover {\r\n            border-color: var(--gtg-cyan);\r\n            box-shadow: var(--gtg-shadow);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        \/* ==============================\r\n           RESPONSIVE\r\n           ============================== *\/\r\n        @media (max-width: 820px) {\r\n            .pg-gtg-grid {\r\n                grid-template-columns: repeat(2, 1fr);\r\n                gap: 16px;\r\n            }\r\n            .pg-gtg-section {\r\n                padding: clamp(36px, 6vw, 64px) 16px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 540px) {\r\n            .pg-gtg-grid {\r\n                grid-template-columns: 1fr;\r\n                gap: 14px;\r\n            }\r\n            .pg-gtg-card {\r\n                padding: 22px;\r\n            }\r\n            .pg-gtg-sub {\r\n                margin-bottom: 28px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 360px) {\r\n            .pg-gtg-section {\r\n                padding: 32px 12px;\r\n            }\r\n            .pg-gtg-card {\r\n                padding: 18px;\r\n                border-radius: 12px;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n    <script>\r\n    (function() {\r\n        var cards = document.querySelectorAll('.pg-gtg-card');\r\n        cards.forEach(function(card) {\r\n            function glow(el) {\r\n                el.classList.remove('pg-gtg-glow', 'pg-gtg-glow-out');\r\n                void el.offsetWidth;\r\n                el.classList.add('pg-gtg-glow');\r\n                setTimeout(function() {\r\n                    el.classList.add('pg-gtg-glow-out');\r\n                }, 300);\r\n                setTimeout(function() {\r\n                    el.classList.remove('pg-gtg-glow', 'pg-gtg-glow-out');\r\n                }, 700);\r\n            }\r\n            card.addEventListener('mousedown', function() {\r\n                card.classList.add('pg-gtg-down');\r\n            });\r\n            card.addEventListener('mouseup', function() {\r\n                setTimeout(function() {\r\n                    card.classList.remove('pg-gtg-down');\r\n                }, 120);\r\n                glow(card);\r\n            });\r\n            card.addEventListener('mouseleave', function() {\r\n                card.classList.remove('pg-gtg-down', 'pg-gtg-glow', 'pg-gtg-glow-out');\r\n            });\r\n            card.addEventListener('touchstart', function() {\r\n                card.classList.add('pg-gtg-down');\r\n                glow(card);\r\n            }, { passive: true });\r\n            card.addEventListener('touchend', function() {\r\n                setTimeout(function() {\r\n                    card.classList.remove('pg-gtg-down');\r\n                }, 150);\r\n            });\r\n            card.addEventListener('touchcancel', function() {\r\n                card.classList.remove('pg-gtg-down', 'pg-gtg-glow', 'pg-gtg-glow-out');\r\n            });\r\n        });\r\n    })();\r\n    <\/script>\r\n<\/div>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-507","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Generatore di testo gotico: crea stile all&#039;istante<\/title>\n<meta name=\"description\" content=\"Crea testi gotici e oscuri con il nostro generatore di testo gotico gratuito. Trasforma qualsiasi testo in audaci lettere in stile medievale: copia e incolla in pochi secondi.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/onlinetexteditor.io\/it\/gothic-text-generator\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Gothic Text Generator \u2013 Style Instantly\" \/>\n<meta property=\"og:description\" content=\"Create dark gothic text with our free Gothic Text Generator. Transform any text into bold medieval-style letters \u2014 copy &amp; paste in seconds.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/onlinetexteditor.io\/gothic-text-generator\/\" \/>\n<meta property=\"og:site_name\" content=\"Online Text Editor\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-06T06:39:17+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/gothic-text-generator\\\/\",\"url\":\"https:\\\/\\\/onlinetexteditor.io\\\/gothic-text-generator\\\/\",\"name\":\"Gothic Text Generator \u2013 Style Instantly\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/#website\"},\"datePublished\":\"2026-03-19T00:00:01+00:00\",\"dateModified\":\"2026-04-06T06:39:17+00:00\",\"description\":\"Create dark gothic text with our free Gothic Text Generator. Transform any text into bold medieval-style letters \u2014 copy & paste in seconds.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/gothic-text-generator\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/onlinetexteditor.io\\\/gothic-text-generator\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/gothic-text-generator\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/onlinetexteditor.io\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Gothic Text Generator \u2013 Style Instantly\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/#website\",\"url\":\"https:\\\/\\\/onlinetexteditor.io\\\/\",\"name\":\"Online Text Editor\",\"description\":\"Free &amp; Secure Rich Text Editing\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/onlinetexteditor.io\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Generatore di testo gotico: crea stile all&#39;istante","description":"Crea testi gotici e oscuri con il nostro generatore di testo gotico gratuito. Trasforma qualsiasi testo in audaci lettere in stile medievale: copia e incolla in pochi secondi.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/onlinetexteditor.io\/it\/gothic-text-generator\/","og_locale":"en_US","og_type":"article","og_title":"Gothic Text Generator \u2013 Style Instantly","og_description":"Create dark gothic text with our free Gothic Text Generator. Transform any text into bold medieval-style letters \u2014 copy & paste in seconds.","og_url":"https:\/\/onlinetexteditor.io\/gothic-text-generator\/","og_site_name":"Online Text Editor","article_modified_time":"2026-04-06T06:39:17+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/onlinetexteditor.io\/gothic-text-generator\/","url":"https:\/\/onlinetexteditor.io\/gothic-text-generator\/","name":"Gothic Text Generator \u2013 Style Instantly","isPartOf":{"@id":"https:\/\/onlinetexteditor.io\/#website"},"datePublished":"2026-03-19T00:00:01+00:00","dateModified":"2026-04-06T06:39:17+00:00","description":"Create dark gothic text with our free Gothic Text Generator. Transform any text into bold medieval-style letters \u2014 copy & paste in seconds.","breadcrumb":{"@id":"https:\/\/onlinetexteditor.io\/gothic-text-generator\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/onlinetexteditor.io\/gothic-text-generator\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/onlinetexteditor.io\/gothic-text-generator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/onlinetexteditor.io\/"},{"@type":"ListItem","position":2,"name":"Gothic Text Generator \u2013 Style Instantly"}]},{"@type":"WebSite","@id":"https:\/\/onlinetexteditor.io\/#website","url":"https:\/\/onlinetexteditor.io\/","name":"Online Text Editor","description":"Free &amp; Secure Rich Text Editing","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/onlinetexteditor.io\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/onlinetexteditor.io\/it\/wp-json\/wp\/v2\/pages\/507","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/onlinetexteditor.io\/it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/onlinetexteditor.io\/it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/onlinetexteditor.io\/it\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/onlinetexteditor.io\/it\/wp-json\/wp\/v2\/comments?post=507"}],"version-history":[{"count":2,"href":"https:\/\/onlinetexteditor.io\/it\/wp-json\/wp\/v2\/pages\/507\/revisions"}],"predecessor-version":[{"id":509,"href":"https:\/\/onlinetexteditor.io\/it\/wp-json\/wp\/v2\/pages\/507\/revisions\/509"}],"wp:attachment":[{"href":"https:\/\/onlinetexteditor.io\/it\/wp-json\/wp\/v2\/media?parent=507"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}