{"id":526,"date":"2026-03-23T00:00:04","date_gmt":"2026-03-23T00:00:04","guid":{"rendered":"https:\/\/onlinetexteditor.io\/?page_id=526"},"modified":"2026-04-06T06:57:05","modified_gmt":"2026-04-06T06:57:05","slug":"fire-text-generator","status":"publish","type":"page","link":"https:\/\/onlinetexteditor.io\/es\/fire-text-generator\/","title":{"rendered":"Fire Text Generator \u2013 Ignite 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 Fire 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    .ft-tool-wrapper {\r\n        --primary-font: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\r\n        --body-font: \"Consolas\", \"Monaco\", \"Courier New\", monospace;\r\n        \r\n        \/* FIRE-THEMED BOX COLORS *\/\r\n        --bg-deep-ember: #0a0505;\r\n        --bg-charcoal: #110909;\r\n        --bg-smoke: #1a0d0d;\r\n        --bg-lava-dark: #1a0500;\r\n        \r\n        --flame-red: #ff2d00;\r\n        --flame-orange: #ff6600;\r\n        --flame-gold: #ffaa00;\r\n        --flame-amber: #ff8c00;\r\n        --ember-glow: #ff4500;\r\n        --magma-core: #8b0000;\r\n        --text-bright: #ffffff;\r\n        --text-muted: #c9a88b;\r\n        --text-faint: #7a5a4a;\r\n        \r\n        --grad-master: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        --grad-lava: linear-gradient(135deg, #8b0000 0%, #ff2d00 25%, #ff6600 50%, #ffaa00 75%, #ff4500 100%);\r\n        --grad-ember: linear-gradient(180deg, #1a0500 0%, #0a0505 100%);\r\n        --grad-card: linear-gradient(180deg, rgba(26, 5, 0, 0.95) 0%, rgba(10, 5, 5, 0.98) 100%);\r\n        --grad-panel: linear-gradient(180deg, rgba(17, 9, 9, 0.98) 0%, rgba(10, 5, 5, 0.95) 100%);\r\n        \r\n        --glow-lava: 0 0 25px rgba(255, 102, 0, 0.5);\r\n        --glow-ember: 0 0 20px rgba(255, 69, 0, 0.4);\r\n        --glow-gold: 0 0 15px rgba(255, 170, 0, 0.3);\r\n        --shadow-deep: 0 25px 60px rgba(0, 0, 0, 0.9);\r\n        --glass-blur: blur(15px);\r\n        \r\n        --text-flame-shadow: 2px 0px 0px var(--flame-red), -1px 0px 0px var(--flame-gold);\r\n        \r\n        --transition-ui: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n        --transition-fast: all 0.18s 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% !important;\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    .ft-tool-wrapper * { box-sizing: border-box; }\r\n\r\n    .ft-tool-wrapper ::-webkit-scrollbar { width: 8px; height: 8px; }\r\n    .ft-tool-wrapper ::-webkit-scrollbar-track { background: var(--bg-charcoal); }\r\n    .ft-tool-wrapper ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--flame-red), var(--flame-gold)); border-radius: 4px; }\r\n    .ft-tool-wrapper ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--flame-orange), #fff); }\r\n\r\n    .ft-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    .ft-hero-content-wrapper {\r\n        z-index: 2;\r\n        padding-top: 15px;\r\n        width: 100%;\r\n    }\r\n\r\n    .ft-main-title {\r\n        font-family: var(--primary-font);\r\n        font-size: 3.4rem;\r\n        font-weight: 900;\r\n        line-height: 1.1;\r\n        margin: 0 auto 10px auto;\r\n        text-transform: uppercase;\r\n        letter-spacing: 2px;\r\n        color: #fff;\r\n        text-shadow: var(--text-flame-shadow);\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    .ft-main-title i {\r\n        color: var(--flame-gold);\r\n        text-shadow: 0 0 30px rgba(255, 170, 0, 0.6);\r\n        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s;\r\n        animation: ft-flicker 2.5s ease-in-out infinite;\r\n    }\r\n    \r\n    @keyframes ft-flicker {\r\n        0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 8px var(--flame-orange)); }\r\n        20% { opacity: 0.95; transform: scale(1.02) rotate(-3deg); }\r\n        50% { opacity: 1; transform: scale(1.05) rotate(2deg); filter: drop-shadow(0 0 15px var(--flame-red)); }\r\n        80% { opacity: 0.98; transform: scale(1) rotate(-1deg); }\r\n    }\r\n    \r\n    .ft-main-title:hover i {\r\n        transform: rotate(10deg) scale(1.2) translateY(-4px);\r\n        color: var(--flame-red);\r\n        text-shadow: 0 0 40px rgba(255, 45, 0, 0.8), 0 0 60px rgba(255, 102, 0, 0.5);\r\n        animation: none;\r\n    }\r\n\r\n    .ft-main-title:hover {\r\n        letter-spacing: 6px;\r\n        text-shadow: -4px 0 0 var(--flame-red), 4px 0 0 var(--flame-gold), 0 0 30px rgba(255, 170, 0, 0.6);\r\n    }\r\n    \r\n    .ft-main-title::after {\r\n        content: '';\r\n        position: absolute;\r\n        bottom: -18px;\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        display: block;\r\n        width: 60px;\r\n        height: 6px;\r\n        background: var(--grad-lava);\r\n        box-shadow: 0 0 20px rgba(255, 102, 0, 0.7);\r\n        border-radius: 3px;\r\n        transition: var(--transition-ui);\r\n    }\r\n    \r\n    .ft-main-title:hover::after { width: 380px; }\r\n    \r\n    .ft-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: 35px auto 40px auto;\r\n        padding: 0 10px;\r\n        font-weight: 500;\r\n        letter-spacing: 0.5px;\r\n        text-shadow: 0 2px 8px rgba(0,0,0,0.8);\r\n    }\r\n\r\n    \/* MAIN GENERATOR CARD - FIRE THemed *\/\r\n    .ft-generator-card {\r\n        background: var(--bg-deep-ember);\r\n        border: 1px solid var(--magma-core);\r\n        border-top: 4px solid var(--flame-orange);\r\n        width: 100%;\r\n        box-shadow: var(--shadow-deep), inset 0 0 50px rgba(139, 0, 0, 0.3);\r\n        border-radius: 16px;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n    \r\n    .ft-generator-card::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; right: 0; height: 120px;\r\n        background: linear-gradient(180deg, rgba(255, 69, 0, 0.08), transparent);\r\n        pointer-events: none;\r\n    }\r\n\r\n    \/* CONTROLS - ASYMMETRIC GRID WITH FIRE COLORS *\/\r\n    .ft-controls-wrapper {\r\n        padding: 35px;\r\n        background: var(--grad-ember);\r\n        border-bottom: 3px solid var(--magma-core);\r\n        display: grid;\r\n        grid-template-columns: 3fr 1fr; \/* Expanded Input Area *\/\r\n        gap: 30px;\r\n        align-items: stretch;\r\n        position: relative;\r\n    }\r\n    \r\n    .ft-controls-wrapper::after {\r\n        content: '';\r\n        position: absolute;\r\n        bottom: -3px;\r\n        left: 10%;\r\n        right: 10%;\r\n        height: 1px;\r\n        background: linear-gradient(90deg, transparent, var(--flame-orange), var(--flame-gold), var(--flame-orange), transparent);\r\n        opacity: 0.6;\r\n    }\r\n\r\n    .ft-input-section {\r\n        width: 100% !important;\r\n        max-width: 100% !important;\r\n        display: flex;\r\n        flex-direction: column;\r\n        height: 100%;\r\n    }\r\n    \r\n    .ft-enhanced-input-wrapper {\r\n        background: var(--bg-smoke);\r\n        border: 2px solid var(--magma-core);\r\n        border-radius: 10px;\r\n        overflow: hidden;\r\n        display: flex;\r\n        flex-direction: column;\r\n        flex-grow: 1;\r\n        width: 100% !important;\r\n        transition: var(--transition-ui);\r\n        box-shadow: inset 0 0 30px rgba(0,0,0,0.8), 0 0 0 1px rgba(255, 69, 0, 0.1);\r\n        position: relative;\r\n    }\r\n    \r\n    .ft-enhanced-input-wrapper::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; right: 0;\r\n        height: 1px;\r\n        background: linear-gradient(90deg, transparent, var(--flame-red), var(--flame-gold), transparent);\r\n        opacity: 0.5;\r\n    }\r\n\r\n    .ft-enhanced-input-wrapper:focus-within {\r\n        border-color: var(--flame-orange);\r\n        box-shadow: inset 0 0 40px rgba(255, 102, 0, 0.1), 0 0 20px rgba(255, 102, 0, 0.2);\r\n    }\r\n    \r\n    .ft-text-input {\r\n        width: 100% !important;\r\n        max-width: 100% !important;\r\n        min-height: 140px !important;\r\n        flex-grow: 1;\r\n        padding: 20px 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: 600 !important;\r\n        font-size: 1.6rem !important;\r\n        outline: none !important;\r\n        text-align: center !important;\r\n        text-shadow: 2px 2px 0px #000;\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        box-sizing: border-box !important;\r\n    }\r\n    \r\n    .ft-text-input::placeholder { \r\n        color: var(--text-faint); \r\n        font-style: italic;\r\n        background: linear-gradient(90deg, var(--text-faint), var(--text-muted), var(--text-faint));\r\n        -webkit-background-clip: text;\r\n        background-clip: text;\r\n    }\r\n\r\n    \/* TOOLBAR - LAVA ACCENT *\/\r\n    .ft-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: var(--bg-lava-dark);\r\n        padding: 15px;\r\n        border-top: 1px solid rgba(255, 102, 0, 0.2);\r\n        width: 100% !important;\r\n        box-sizing: border-box !important;\r\n    }\r\n\r\n    .ft-toolbar-btn {\r\n        background: linear-gradient(135deg, rgba(255, 102, 0, 0.1), rgba(139, 0, 0, 0.2));\r\n        color: var(--text-muted);\r\n        border: 1px solid rgba(255, 102, 0, 0.25);\r\n        padding: 10px 16px;\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        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    .ft-toolbar-btn i { transition: transform 0.2s ease; }\r\n\r\n    .ft-toolbar-btn:hover {\r\n        background: linear-gradient(135deg, rgba(255, 102, 0, 0.3), rgba(255, 69, 0, 0.2));\r\n        color: var(--text-bright);\r\n        border-color: var(--flame-orange);\r\n        box-shadow: 0 0 15px rgba(255, 102, 0, 0.4), 0 2px 8px rgba(0,0,0,0.3);\r\n        transform: translateY(-2px);\r\n    }\r\n\r\n    .ft-toolbar-btn:hover i { \r\n        transform: translateY(-3px) rotate(5deg); \r\n        color: var(--flame-gold);\r\n        text-shadow: 0 0 10px rgba(255, 170, 0, 0.6);\r\n    }\r\n    \r\n    .ft-preset-select {\r\n        background: linear-gradient(135deg, rgba(139, 0, 0, 0.25), rgba(26, 5, 0, 0.3));\r\n        color: var(--flame-orange);\r\n        border: 1px solid var(--flame-red);\r\n        padding: 10px 16px;\r\n        font-family: system-ui, sans-serif;\r\n        font-size: 0.75rem;\r\n        font-weight: 800;\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        width: 100% !important;\r\n        background-image: url(\"image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='12' fill='%23ff6600' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'\/%3E%3C\/svg%3E\");\r\n        background-repeat: no-repeat;\r\n        background-position: right 12px center;\r\n        box-sizing: border-box !important;\r\n    }\r\n    \r\n    .ft-preset-select:hover, .ft-preset-select:focus {\r\n        background: linear-gradient(135deg, var(--flame-red), var(--magma-core));\r\n        color: #fff;\r\n        border-color: var(--flame-gold);\r\n        box-shadow: var(--glow-ember);\r\n    }\r\n    \r\n    .ft-preset-select option {\r\n        background: var(--bg-deep-ember);\r\n        color: #fff;\r\n    }\r\n\r\n    \/* SETTINGS SECTION *\/\r\n    .ft-settings-section {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 25px;\r\n        width: 100% !important;\r\n        max-width: 100% !important;\r\n    }\r\n\r\n    .ft-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: var(--flame-gold);\r\n        text-transform: uppercase;\r\n        letter-spacing: 2px;\r\n        margin-bottom: 14px;\r\n        text-shadow: 0 0 10px rgba(255, 170, 0, 0.3);\r\n    }\r\n    \r\n    .ft-panel-label i {\r\n        color: var(--flame-orange);\r\n        margin-right: 12px;\r\n        font-size: 1.2rem;\r\n        text-shadow: 0 0 15px rgba(255, 102, 0, 0.5);\r\n    }\r\n\r\n    .ft-grid-options {\r\n        display: grid;\r\n        gap: 14px;\r\n        grid-template-columns: repeat(2, 1fr);\r\n        width: 100% !important;\r\n    }\r\n\r\n    .ft-option-btn {\r\n        background: linear-gradient(135deg, var(--bg-smoke), var(--bg-charcoal));\r\n        border: 1px solid rgba(255, 102, 0, 0.15);\r\n        padding: 18px 12px;\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: 10px;\r\n        position: relative;\r\n        overflow: hidden;\r\n        width: 100% !important;\r\n    }\r\n    \r\n    .ft-option-btn i { font-size: 1.4rem; transition: var(--transition-fast); }\r\n\r\n    .ft-option-btn::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; width: 0; height: 100%;\r\n        background: linear-gradient(90deg, rgba(255,102,0,0.1), rgba(255,170,0,0.15));\r\n        transition: width 0.35s ease;\r\n    }\r\n\r\n    .ft-option-btn:hover {\r\n        background: linear-gradient(135deg, rgba(255, 69, 0, 0.15), rgba(139, 0, 0, 0.25));\r\n        border-color: rgba(255, 102, 0, 0.4);\r\n        color: #fff;\r\n        transform: translateY(-3px);\r\n        box-shadow: 0 5px 15px rgba(0,0,0,0.3), 0 0 10px rgba(255, 102, 0, 0.2);\r\n    }\r\n    \r\n    .ft-option-btn:hover::before { width: 100%; }\r\n\r\n    .ft-option-btn:hover i {\r\n        transform: scale(1.15) rotate(8deg);\r\n        color: var(--flame-gold);\r\n        text-shadow: 0 0 15px rgba(255, 170, 0, 0.6);\r\n    }\r\n\r\n    .ft-option-btn.active { \r\n        background: linear-gradient(135deg, var(--magma-core), #5a0000);\r\n        color: #fff; \r\n        border-color: var(--flame-orange);\r\n        box-shadow: 0 0 20px rgba(255, 102, 0, 0.4), inset 0 0 15px rgba(255, 170, 0, 0.15);\r\n    }\r\n    \r\n    .ft-option-btn.active i {\r\n        color: var(--flame-gold);\r\n        text-shadow: 0 0 18px rgba(255, 170, 0, 0.8);\r\n        animation: ft-icon-bounce 1.5s ease-in-out infinite;\r\n    }\r\n    \r\n    @keyframes ft-icon-bounce {\r\n        0%, 100% { transform: scale(1); }\r\n        50% { transform: scale(1.1); }\r\n    }\r\n\r\n    \/* RESULTS AREA - FIRE CARDS *\/\r\n    .ft-results-area {\r\n        padding: 45px 35px;\r\n        position: relative;\r\n        width: 100% !important;\r\n        background: linear-gradient(180deg, var(--bg-charcoal) 0%, var(--bg-deep-ember) 100%);\r\n        box-sizing: border-box !important;\r\n    }\r\n    \r\n    .ft-result-list {\r\n        display: grid;\r\n        grid-template-columns: repeat(2, 1fr) !important;\r\n        gap: 22px;\r\n        position: relative;\r\n        z-index: 2;\r\n        width: 100% !important;\r\n    }\r\n\r\n    .ft-result-card {\r\n        background: linear-gradient(180deg, rgba(26, 5, 0, 0.9), rgba(10, 5, 5, 0.95));\r\n        border: 1px solid var(--magma-core);\r\n        padding: 22px 28px;\r\n        transition: var(--transition-ui);\r\n        position: relative;\r\n        overflow: hidden;\r\n        border-radius: 10px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        min-height: 150px;\r\n        box-sizing: border-box !important;\r\n        width: 100% !important;\r\n    }\r\n    \r\n    .ft-result-card::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; width: 0; height: 100%;\r\n        background: linear-gradient(180deg, var(--flame-red), var(--flame-orange), var(--flame-gold));\r\n        transition: width 0.35s ease;\r\n        opacity: 0.9;\r\n    }\r\n    \r\n    .ft-result-card:hover {\r\n        transform: translateY(-5px) scale(1.015);\r\n        box-shadow: -8px 12px 30px rgba(0, 0, 0, 0.9), 0 0 25px rgba(255, 102, 0, 0.35);\r\n        background: linear-gradient(180deg, rgba(139, 0, 0, 0.2), rgba(10, 5, 5, 0.98));\r\n        border-color: var(--flame-orange);\r\n        z-index: 10;\r\n    }\r\n    \r\n    .ft-result-card:hover::before { width: 5px; }\r\n\r\n    .ft-card-header {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        width: 100% !important;\r\n        margin-bottom: 15px;\r\n        border-bottom: 1px dashed rgba(255,102,0,0.15);\r\n        padding-bottom: 12px;\r\n        box-sizing: border-box !important;\r\n    }\r\n    \r\n    .ft-card-title {\r\n        font-family: system-ui, sans-serif;\r\n        font-size: 0.8rem;\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: 8px;\r\n        transition: var(--transition-fast);\r\n    }\r\n    \r\n    .ft-card-title i {\r\n        color: var(--flame-red);\r\n        font-size: 1.1rem;\r\n        transition: transform 0.3s ease, color 0.2s, text-shadow 0.3s;\r\n    }\r\n\r\n    .ft-result-card:hover .ft-card-title {\r\n        color: var(--flame-gold);\r\n        text-shadow: 0 0 12px rgba(255, 170, 0, 0.4);\r\n    }\r\n    \r\n    .ft-result-card:hover .ft-card-title i {\r\n        transform: scale(1.3) rotate(12deg);\r\n        color: var(--flame-orange);\r\n        text-shadow: 0 0 15px rgba(255, 102, 0, 0.7);\r\n    }\r\n\r\n    .ft-card-copy-btn {\r\n        background: linear-gradient(135deg, rgba(139, 0, 0, 0.2), rgba(26, 5, 0, 0.3));\r\n        border: 1px solid var(--magma-core);\r\n        color: var(--text-bright);\r\n        width: 40px;\r\n        height: 40px;\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    .ft-card-copy-btn i {\r\n        font-size: 1.1rem;\r\n        transition: transform 0.2s ease;\r\n    }\r\n    \r\n    .ft-card-copy-btn:hover {\r\n        background: linear-gradient(135deg, rgba(255, 102, 0, 0.25), rgba(255, 170, 0, 0.2));\r\n        border-color: var(--flame-orange);\r\n        color: var(--flame-gold);\r\n        box-shadow: var(--glow-lava);\r\n        transform: scale(1.1) rotate(-5deg);\r\n    }\r\n    \r\n    .ft-card-copy-btn:hover i { transform: scale(1.15) translateY(-3px); }\r\n    .ft-card-copy-btn:active { transform: scale(0.95); }\r\n\r\n    .ft-card-preview {\r\n        font-size: 1.5rem;\r\n        color: #fff;\r\n        width: 100% !important;\r\n        text-align: center;\r\n        font-family: var(--body-font);\r\n        position: relative;\r\n        z-index: 1;\r\n        padding: 12px;\r\n        transition: var(--transition-fast);\r\n        flex-grow: 1;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        white-space: pre-wrap !important;\r\n        word-break: break-word !important;\r\n        overflow-wrap: anywhere !important;\r\n        box-sizing: border-box !important;\r\n        text-shadow: 1px 1px 4px rgba(0,0,0,0.7);\r\n        max-height: 180px;\r\n        overflow-y: auto;\r\n        line-height: 1.8;\r\n    }\r\n    \r\n    .ft-result-card:hover .ft-card-preview {\r\n        color: var(--text-bright);\r\n        text-shadow: var(--text-flame-shadow), 0 0 10px rgba(255, 102, 0, 0.3);\r\n    }\r\n\r\n    \/* LOAD MORE - LAVA BUTTON *\/\r\n    .ft-btn-load {\r\n        background: linear-gradient(135deg, var(--bg-lava-dark), var(--bg-charcoal));\r\n        color: var(--text-bright);\r\n        border: 2px solid var(--flame-orange);\r\n        padding: 18px 50px;\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: 45px;\r\n        text-transform: uppercase;\r\n        border-radius: 8px;\r\n        transition: var(--transition-ui);\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: 12px;\r\n        box-shadow: 0 8px 20px rgba(0,0,0,0.7), 0 0 0 1px rgba(255, 102, 0, 0.2);\r\n        overflow: hidden;\r\n    }\r\n    \r\n    .ft-btn-load::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: -100%;\r\n        width: 100%; height: 100%;\r\n        background: linear-gradient(90deg, transparent, rgba(255, 102, 0, 0.25), transparent);\r\n        transition: left 0.5s ease;\r\n    }\r\n    \r\n    .ft-btn-load:hover { \r\n        background: linear-gradient(135deg, var(--magma-core), var(--bg-lava-dark));\r\n        box-shadow: 0 10px 25px rgba(0,0,0,0.8), var(--glow-lava);\r\n        transform: translateY(-4px);\r\n        border-color: var(--flame-gold);\r\n        text-shadow: var(--text-flame-shadow);\r\n    }\r\n    \r\n    .ft-btn-load:hover::before {\r\n        left: 100%;\r\n    }\r\n    \r\n    .ft-btn-load:hover i { \r\n        transform: translateY(6px); \r\n        color: var(--flame-gold);\r\n        text-shadow: 0 0 15px rgba(255, 170, 0, 0.6);\r\n    }\r\n    .ft-btn-load:active { transform: translateY(0); }\r\n    \r\n    @keyframes ft-pulse-ring {\r\n        0% { box-shadow: 0 0 0 0 rgba(255, 102, 0, 0.5), 0 8px 20px rgba(0,0,0,0.7); }\r\n        70% { box-shadow: 0 0 0 15px rgba(255, 102, 0, 0), 0 8px 20px rgba(0,0,0,0.7); }\r\n        100% { box-shadow: 0 0 0 0 rgba(255, 102, 0, 0), 0 8px 20px rgba(0,0,0,0.7); }\r\n    }\r\n    \r\n    .ft-btn-load { animation: ft-pulse-ring 2.5s infinite; }\r\n\r\n    .ft-toast {\r\n        visibility: hidden;\r\n        background: linear-gradient(135deg, var(--bg-charcoal), var(--bg-deep-ember));\r\n        backdrop-filter: var(--glass-blur);\r\n        color: #fff;\r\n        padding: 16px 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(--flame-orange);\r\n        border-left: 5px solid var(--flame-gold);\r\n        text-transform: uppercase;\r\n        box-shadow: var(--shadow-deep), 0 0 20px rgba(255, 102, 0, 0.5);\r\n        letter-spacing: 1px;\r\n        opacity: 0;\r\n        transition: all 0.3s 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    .ft-toast i { \r\n        color: var(--flame-gold); \r\n        font-size: 1.2rem; \r\n        text-shadow: 0 0 15px rgba(255, 170, 0, 0.7); \r\n    }\r\n    \r\n    .ft-toast.show { \r\n        visibility: visible; \r\n        opacity: 1;\r\n        transform: translateX(-50%) translateY(0);\r\n    }\r\n\r\n    @media (max-width: 950px) {\r\n        .ft-main-title { font-size: 2.5rem; }\r\n        .ft-controls-wrapper { grid-template-columns: 1fr; }\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n        .ft-result-list { grid-template-columns: 1fr !important; }\r\n    }\r\n\r\n    @media (max-width: 600px) {\r\n        .ft-container { padding: 30px 15px !important; }\r\n        .ft-results-area { padding: 30px 15px; }\r\n        .ft-controls-wrapper { padding: 20px; gap: 20px; }\r\n        .ft-text-input { min-height: 100px !important; font-size: 1.4rem !important; }\r\n        .ft-input-toolbar { justify-content: center; }\r\n        .ft-preset-select { max-width: 100%; text-align: center; }\r\n        .ft-option-btn { padding: 12px 8px; font-size: 0.7rem; }\r\n        .ft-option-btn i { font-size: 1.1rem; }\r\n        .ft-btn-load { padding: 15px 30px; font-size: 0.9rem; width: 100%; justify-content: center; }\r\n        .ft-main-title { font-size: 2rem; }\r\n        .ft-subtitle { font-size: 0.9rem; }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"ft-tool-wrapper\" id=\"ft-fire-tool\">\r\n    <div class=\"ft-container ft-hero-content-wrapper\">\r\n        <h1 class=\"ft-main-title\"><i class=\"fa-solid fa-fire\"><\/i> Fire Text Generator - Ignite Instantly<\/h1>\r\n        <p class=\"ft-subtitle\">Ignite your words with blazing Unicode effects, flame accents, and modern gothic fire styling. Copy-safe, high-intensity typography that burns bright across every platform.<\/p>\r\n        \r\n        <div class=\"ft-generator-card\">\r\n            <div class=\"ft-controls-wrapper\">\r\n                \r\n                <div class=\"ft-input-section\">\r\n                    <div class=\"ft-panel-label\"><i class=\"fa-solid fa-fire-flame-curved\"><\/i> Fuel Input<\/div>\r\n                    <div class=\"ft-enhanced-input-wrapper\">\r\n                        <textarea class=\"ft-text-input\" id=\"ftInputText\" placeholder=\"Ignite the flames...\"><\/textarea>\r\n                        \r\n                        <div class=\"ft-input-toolbar\">\r\n                            <button class=\"ft-toolbar-btn\" id=\"ftBtnPaste\"><i class=\"fa-solid fa-paste\"><\/i> Paste<\/button>\r\n                            <button class=\"ft-toolbar-btn\" id=\"ftBtnSelectAll\"><i class=\"fa-solid fa-object-group\"><\/i> Select All<\/button>\r\n                            <button class=\"ft-toolbar-btn\" id=\"ftBtnCopy\"><i class=\"fa-solid fa-copy\"><\/i> Copy Base<\/button>\r\n                            \r\n                            <select class=\"ft-preset-select\" id=\"ftPresetSelect\">\r\n                                <option value=\"\" disabled selected>\ud83d\udd25 Blaze Presets<\/option>\r\n                                <option value=\"The fire rises. The ashes remember.\">Rising Flames<\/option>\r\n                                <option value=\"Burn bright. Leave no trace.\">Burn Bright<\/option>\r\n                                <option value=\"Embers of the digital inferno\">Digital Inferno<\/option>\r\n                                <option value=\"From the ashes, we reignite\">Ashes Reborn<\/option>\r\n                                <option value=\"Ignite. Transform. Unleash.\">Ignite Power<\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <div class=\"ft-settings-section\">\r\n                    <div>\r\n                        <div class=\"ft-panel-label\"><i class=\"fa-solid fa-fire-burner\"><\/i> Flame Mode<\/div>\r\n                        <div class=\"ft-grid-options\">\r\n                            <button class=\"ft-option-btn mode-btn active\" data-val=\"Flame\">\r\n                                <i class=\"fa-solid fa-fire\"><\/i> Flame Accent\r\n                            <\/button>\r\n                            <button class=\"ft-option-btn mode-btn\" data-val=\"Blazing\">\r\n                                <i class=\"fa-solid fa-explosion\"><\/i> Blazing Bold\r\n                            <\/button>\r\n                            <button class=\"ft-option-btn mode-btn\" data-val=\"Gothic\">\r\n                                <i class=\"fa-solid fa-church\"><\/i> Gothic Flame\r\n                            <\/button>\r\n                            <button class=\"ft-option-btn mode-btn\" data-val=\"Ember\">\r\n                                <i class=\"fa-solid fa-temperature-high\"><\/i> Ember Drift\r\n                            <\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div>\r\n                        <div class=\"ft-panel-label\"><i class=\"fa-solid fa-sliders\"><\/i> Intensity<\/div>\r\n                        <div class=\"ft-grid-options\">\r\n                            <button class=\"ft-option-btn style-btn active\" data-val=\"Standard\">\r\n                                <i class=\"fa-solid fa-campground\"><\/i> Standard\r\n                            <\/button>\r\n                            <button class=\"ft-option-btn style-btn\" data-val=\"Inferno\">\r\n                                <i class=\"fa-solid fa-volcano\"><\/i> Inferno Max\r\n                            <\/button>\r\n                            <button class=\"ft-option-btn style-btn\" data-val=\"Smoke\">\r\n                                <i class=\"fa-solid fa-smog\"><\/i> Smoke Trail\r\n                            <\/button>\r\n                            <button class=\"ft-option-btn style-btn\" data-val=\"Spark\">\r\n                                <i class=\"fa-solid fa-star\"><\/i> Spark Flicker\r\n                            <\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"ft-results-area\">\r\n                <div class=\"ft-result-list\" id=\"ftResultList\"><\/div>\r\n                <button class=\"ft-btn-load\" id=\"ftLoadMoreBtn\"><span>Extract More Data<\/span> <i class=\"fa-solid fa-arrow-down\"><\/i><\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <div id=\"ftToast\" class=\"ft-toast\"><i class=\"fa-solid fa-fire-flame-simple\"><\/i> Fragment Copied<\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n    const wrapper = document.getElementById('ft-fire-tool');\r\n    const inputEl = wrapper.querySelector('#ftInputText');\r\n    const resultList = wrapper.querySelector('#ftResultList');\r\n    const loadMoreBtn = wrapper.querySelector('#ftLoadMoreBtn');\r\n    const toast = wrapper.querySelector('#ftToast');\r\n    \r\n    const btnPaste = wrapper.querySelector('#ftBtnPaste');\r\n    const btnSelectAll = wrapper.querySelector('#ftBtnSelectAll');\r\n    const btnCopy = wrapper.querySelector('#ftBtnCopy');\r\n    const presetSelect = wrapper.querySelector('#ftPresetSelect');\r\n\r\n    let currentMode = 'Flame';\r\n    let currentStyle = 'Standard';\r\n    let limit = 8;\r\n    const LOAD_INCREMENT = 8;\r\n\r\n    const baseStr = \"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ\";\r\n    const baseArr = Array.from(baseStr);\r\n    \r\n    const gothicArr = 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 boldArr = Array.from(\"\ud835\udc1a\ud835\udc1b\ud835\udc1c\ud835\udc1d\ud835\udc1e\ud835\udc1f\ud835\udc20\ud835\udc21\ud835\udc22\ud835\udc23\ud835\udc24\ud835\udc25\ud835\udc26\ud835\udc27\ud835\udc28\ud835\udc29\ud835\udc2a\ud835\udc2b\ud835\udc2c\ud835\udc2d\ud835\udc2e\ud835\udc2f\ud835\udc30\ud835\udc31\ud835\udc32\ud835\udc33\ud835\udc00\ud835\udc01\ud835\udc02\ud835\udc03\ud835\udc04\ud835\udc05\ud835\udc06\ud835\udc07\ud835\udc08\ud835\udc09\ud835\udc0a\ud835\udc0b\ud835\udc0c\ud835\udc0d\ud835\udc0e\ud835\udc0f\ud835\udc10\ud835\udc11\ud835\udc12\ud835\udc13\ud835\udc14\ud835\udc15\ud835\udc16\ud835\udc17\ud835\udc18\ud835\udc19\");\r\n    const italicArr = Array.from(\"\ud835\udc4e\ud835\udc4f\ud835\udc50\ud835\udc51\ud835\udc52\ud835\udc53\ud835\udc54\u210e\ud835\udc56\ud835\udc57\ud835\udc58\ud835\udc59\ud835\udc5a\ud835\udc5b\ud835\udc5c\ud835\udc5d\ud835\udc5e\ud835\udc5f\ud835\udc60\ud835\udc61\ud835\udc62\ud835\udc63\ud835\udc64\ud835\udc65\ud835\udc66\ud835\udc67\ud835\udc34\ud835\udc35\ud835\udc36\ud835\udc37\ud835\udc38\ud835\udc39\ud835\udc3a\ud835\udc3b\ud835\udc3c\ud835\udc3d\ud835\udc3e\ud835\udc3f\ud835\udc40\ud835\udc41\ud835\udc42\ud835\udc43\ud835\udc44\ud835\udc45\ud835\udc46\ud835\udc47\ud835\udc48\ud835\udc49\ud835\udc4a\ud835\udc4b\ud835\udc4c\ud835\udc4d\");\r\n    \r\n    const leetMap = {'a':'4', 'e':'3', 'i':'1', 'o':'0', 't':'7', 's':'5', 'g':'9', 'A':'4', 'E':'3', 'I':'1', 'O':'0', 'T':'7', 'S':'5', 'G':'9'};\r\n    \r\n    const flameSymbols = ['\ud83d\udd25', '\ud83d\udd25', '\ud83d\udd25', '\ud83c\udf0b', '\u2604\ufe0f', '\u26a1', '\ud83d\udca5'];\r\n    const emberSymbols = ['\u2728', '\ud83d\udd25', '\ud83d\udcab', '\ud83c\udf1f', '\u26a1'];\r\n    const smokeSymbols = ['\ud83c\udf2b\ufe0f', '\ud83d\udca8', '\ud83c\udf2c\ufe0f', '\ud83c\udf2a\ufe0f'];\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    const zalgoMid = ['\\u0315', '\\u031b', '\\u0340', '\\u0341', '\\u0358', '\\u0321'];\r\n    \r\n    const rand = (max) => Math.floor(Math.random() * max);\r\n\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            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            const originalIcon = btn.innerHTML;\r\n            btn.innerHTML = '<i class=\"fa-solid fa-check\"><\/i>';\r\n            btn.style.background = 'var(--flame-gold)';\r\n            btn.style.borderColor = 'var(--flame-gold)';\r\n            btn.style.color = '#000';\r\n            \r\n            setTimeout(() => {\r\n                btn.innerHTML = originalIcon;\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    const generateConfigs = () => {\r\n        const templates = [];\r\n        const names = [\r\n            'Phoenix Rising', 'Blaze Core', 'Inferno Burst', 'Ash Walker',\r\n            'Fire Storm', 'Ember Flow', 'Magma Drift', 'Solar Flare',\r\n            'Hellfire Echo', 'Dragon Breath', 'Pyre Glow', 'Cinder Fall',\r\n            'Flame Whisper', 'Scorch Mark', 'Volcanic Pulse', 'Spark Trail',\r\n            'Wildfire Surge', 'Heat Wave', 'Burn Vector', 'Smolder Point'\r\n        ];\r\n        \r\n        for(let i=0; i<120; i++){\r\n            templates.push({\r\n                id: `fire-${i}`,\r\n                name: names[i % names.length] + ` 0x${Math.floor(Math.random()*999).toString(16).toUpperCase()}`,\r\n                icon: ['fire', 'explosion', 'bolt', 'dragon', 'mountain-sun', 'sun', 'wind', 'cloud-bolt', 'skull', 'meteor'][i % 10]\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    const mapChar = (char, mode) => {\r\n        const idx = baseArr.indexOf(char);\r\n        if (mode === 'Gothic' && idx !== -1) return gothicArr[idx];\r\n        if (mode === 'Blazing' && idx !== -1) return boldArr[idx];\r\n        if (mode === 'Ember' && idx !== -1) return italicArr[idx];\r\n        if (mode === 'Flame' && leetMap[char]) return leetMap[char];\r\n        return char;\r\n    };\r\n\r\n    const transformLogic = (text, mode, style, variationIndex) => {\r\n        if (!text) return \"\";\r\n        let result = '';\r\n        const intensity = variationIndex % 3;\r\n\r\n        Array.from(text).forEach((c, i) => {\r\n            let char = c;\r\n            \r\n            if (mode !== 'Flame') {\r\n                char = mapChar(c, mode);\r\n            }\r\n\r\n            if (mode === 'Flame' && c !== ' ' && c !== '\\n') {\r\n                const zCount = intensity === 0 ? 2 : (intensity === 1 ? 4 : 6);\r\n                for(let k=0; k<rand(zCount); k++) char += zalgoUp[rand(zalgoUp.length)];\r\n                for(let k=0; k<rand(zCount); k++) char += zalgoMid[rand(zalgoMid.length)];\r\n                for(let k=0; k<rand(zCount); k++) char += zalgoDown[rand(zalgoDown.length)];\r\n            }\r\n\r\n            if (style === 'Inferno' && c !== ' ' && c !== '\\n' && rand(10) > 5) {\r\n                char = flameSymbols[rand(flameSymbols.length)] + char;\r\n            }\r\n            \r\n            if (style === 'Smoke' && c !== ' ' && c !== '\\n' && rand(10) > 6) {\r\n                char += smokeSymbols[rand(smokeSymbols.length)];\r\n            }\r\n            \r\n            if (style === 'Spark' && c !== ' ' && c !== '\\n' && rand(10) > 7) {\r\n                char += emberSymbols[rand(emberSymbols.length)];\r\n            }\r\n\r\n            result += char;\r\n        });\r\n\r\n        return result;\r\n    };\r\n\r\n    const render = () => {\r\n        resultList.innerHTML = '';\r\n        let raw = inputEl.value || \"Ignite the flames...\";\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 = 'ft-result-card';\r\n            \r\n            card.innerHTML = `\r\n                <div class=\"ft-card-header\">\r\n                    <div class=\"ft-card-title\">\r\n                        <i class=\"fa-solid fa-${s.icon}\"><\/i> \r\n                        ${s.name}\r\n                    <\/div>\r\n                    <button class=\"ft-card-copy-btn\" title=\"Copy Data Fragment\"><i class=\"fa-regular fa-copy\"><\/i><\/button>\r\n                <\/div>\r\n                <div class=\"ft-card-preview\">${out}<\/div>\r\n            `;\r\n            \r\n            const copyBtn = card.querySelector('.ft-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 = `Extract More Data (${remaining})`;\r\n        }\r\n    };\r\n\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        }\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('span').textContent = ' Source Base Copied';\r\n            setTimeout(() => {\r\n                toast.querySelector('span').textContent = ' Fragment 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 = 8;\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 = 8;\r\n            render();\r\n        });\r\n    });\r\n\r\n    render();\r\n});\r\n<\/script>\r\n<!-- END OF FILE Fire 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\r\n\r\n<section class=\"pg-ftg-section pg-ftg-sec1\">\r\n        <div class=\"pg-ftg-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    <section class=\"pg-ftg-section pg-ftg-sec1\">\r\n        <div class=\"pg-ftg-wrap\">\r\n            <h2 class=\"pg-ftg-heading\">What Makes This <span class=\"pg-ftg-kw\">Fire Text Generator<\/span> Different?<\/h2>\r\n            <p class=\"pg-ftg-sub\">Most text tools just give you basic fonts. Our fire text generator combines blazing Unicode characters, Zalgo glitch effects, and fiery aesthetics to make your words literally pop off the screen.<\/p>\r\n            <div class=\"pg-ftg-grid\">\r\n                <div class=\"pg-ftg-card\">\r\n                    <div class=\"pg-ftg-icon\" style=\"background:rgba(255,0,0,0.12);color:#ff0000;\"><i class=\"fa-solid fa-fire\"><\/i><\/div>\r\n                    <div class=\"pg-ftg-title\">Blazing Unicode Styles<\/div>\r\n                    <p class=\"pg-ftg-desc\">We use specialized Unicode characters that mimic the look of flames, smoke, and sparks, ensuring your text brings the heat to any platform without needing custom fonts.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ftg-card\">\r\n                    <div class=\"pg-ftg-icon\" style=\"background:rgba(255,102,0,0.12);color:#ff6600;\"><i class=\"fa-solid fa-bolt\"><\/i><\/div>\r\n                    <div class=\"pg-ftg-title\">Zalgo & Glitch Effects<\/div>\r\n                    <p class=\"pg-ftg-desc\">Want that chaotic, burning look? Choose from multiple intensity levels of \"flaming\" Zalgo text that spills over standard line heights for a highly disruptive aesthetic.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ftg-card\">\r\n                    <div class=\"pg-ftg-icon\" style=\"background:rgba(255,165,0,0.12);color:#ffa500;\"><i class=\"fa-solid fa-stopwatch\"><\/i><\/div>\r\n                    <div class=\"pg-ftg-title\">Instant Text Ignition<\/div>\r\n                    <p class=\"pg-ftg-desc\">Type your phrase and watch it burst into flaming text instantly. Everything runs directly in your local browser with zero server delays or annoying loading screens.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ftg-card\">\r\n                    <div class=\"pg-ftg-icon\" style=\"background:rgba(213,0,0,0.12);color:#d50000;\"><i class=\"fa-solid fa-copy\"><\/i><\/div>\r\n                    <div class=\"pg-ftg-title\">One-Click Copy & Paste<\/div>\r\n                    <p class=\"pg-ftg-desc\">Grab your fiery creations in milliseconds. One click securely copies the raw, formatted text straight to your clipboard, ready to be dropped anywhere.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ftg-card\">\r\n                    <div class=\"pg-ftg-icon\" style=\"background:rgba(255,61,0,0.12);color:#ff3d00;\"><i class=\"fa-solid fa-mobile-screen\"><\/i><\/div>\r\n                    <div class=\"pg-ftg-title\">Renders Everywhere<\/div>\r\n                    <p class=\"pg-ftg-desc\">iOS, Android, Discord, or Instagram\u2014our fire text generator outputs universal text that burns bright across all modern apps and operating systems.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ftg-card\">\r\n                    <div class=\"pg-ftg-icon\" style=\"background:rgba(255,193,7,0.12);color:#ffc107;\"><i class=\"fa-solid fa-fire-flame-curved\"><\/i><\/div>\r\n                    <div class=\"pg-ftg-title\">100% Free & Unlimited<\/div>\r\n                    <p class=\"pg-ftg-desc\">No usage limits or premium paywalls. Generate as many flaming words as you need to hype up your audience, completely free and with no signup required.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 2 -->\r\n    <section class=\"pg-ftg-section pg-ftg-sec2\">\r\n        <div class=\"pg-ftg-wrap\">\r\n            <h2 class=\"pg-ftg-heading pg-ftg-sec2-heading\">How to Use Our <span class=\"pg-ftg-kw pg-ftg-sec2-kw\">Fire Text Generator<\/span>?<\/h2>\r\n            <p class=\"pg-ftg-sub pg-ftg-sec2-sub\">Ready to set your timeline ablaze? Generating burning, fiery text is fast and requires absolutely no design skills. Just follow these steps.<\/p>\r\n            <div class=\"pg-ftg-grid\">\r\n                <div class=\"pg-ftg-card pg-ftg-sec2-card\">\r\n                    <span class=\"pg-ftg-emoji\">\u2328\ufe0f<\/span>\r\n                    <div class=\"pg-ftg-title\">Step 1: Type Your Base Text<\/div>\r\n                    <p class=\"pg-ftg-desc\">Enter your hype word, gamer tag, or announcement into the input box. Normal letters, numbers, and symbols work perfectly as your starting point.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ftg-card pg-ftg-sec2-card\">\r\n                    <span class=\"pg-ftg-emoji\">\ud83d\udd25<\/span>\r\n                    <div class=\"pg-ftg-title\">Step 2: Choose the Heat Level<\/div>\r\n                    <p class=\"pg-ftg-desc\">Scroll through our generated options. From subtle spark fonts to fully engulfed chaotic Zalgo fire, pick the aesthetic that perfectly fits your vibe.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ftg-card pg-ftg-sec2-card\">\r\n                    <span class=\"pg-ftg-emoji\">\ud83d\udc41\ufe0f<\/span>\r\n                    <div class=\"pg-ftg-title\">Step 3: Preview the Flames<\/div>\r\n                    <p class=\"pg-ftg-desc\">See exactly how your text looks before copying. Our live preview ensures your burning text maintains its visual intensity and readability.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ftg-card pg-ftg-sec2-card\">\r\n                    <span class=\"pg-ftg-emoji\">\ud83d\udccb<\/span>\r\n                    <div class=\"pg-ftg-title\">Step 4: Copy the Text<\/div>\r\n                    <p class=\"pg-ftg-desc\">Click the copy button next to your favorite style. The formatting is locked in as pure Unicode, so no fiery details get lost during the transfer.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ftg-card pg-ftg-sec2-card\">\r\n                    <span class=\"pg-ftg-emoji\">\ud83d\udcf1<\/span>\r\n                    <div class=\"pg-ftg-title\">Step 5: Paste Anywhere<\/div>\r\n                    <p class=\"pg-ftg-desc\">Drop your fiery text into your Discord server, Twitter\/X timeline, or gaming bio. It pastes seamlessly anywhere standard text input is accepted.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ftg-card pg-ftg-sec2-card\">\r\n                    <span class=\"pg-ftg-emoji\">\ud83d\ude80<\/span>\r\n                    <div class=\"pg-ftg-title\">Step 6: Ignite Engagement<\/div>\r\n                    <p class=\"pg-ftg-desc\">Hit post and watch your engagement spike. Text that breaks the mold naturally draws the eye and stops users from instantly scrolling past.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 3 -->\r\n    <section class=\"pg-ftg-section pg-ftg-sec3\">\r\n        <div class=\"pg-ftg-wrap\">\r\n            <h2 class=\"pg-ftg-heading\">Best Places to Use <span class=\"pg-ftg-kw\">Fire Text Generator<\/span> Results?<\/h2>\r\n            <p class=\"pg-ftg-sub\">Flaming text isn't for everything\u2014it\u2019s for when you need maximum attention. Here are the absolute best places to drop your newly generated fiery creations.<\/p>\r\n            <div class=\"pg-ftg-grid\">\r\n                <div class=\"pg-ftg-card pg-ftg-sec3-card\">\r\n                    <div class=\"pg-ftg-icon\" style=\"background:rgba(255,61,0,0.12);color:#ff3d00;\"><i class=\"fa-solid fa-gamepad\"><\/i><\/div>\r\n                    <div class=\"pg-ftg-title\">Gaming Usernames & Clans<\/div>\r\n                    <p class=\"pg-ftg-desc\">Intimidate the lobby before the match even begins. Fire text is perfect for FPS clan names, MOBA handles, and RPG character titles that need an aggressive edge.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ftg-card pg-ftg-sec3-card\">\r\n                    <div class=\"pg-ftg-icon\" style=\"background:rgba(88,101,242,0.12);color:#5865f2;\"><i class=\"fa-brands fa-discord\"><\/i><\/div>\r\n                    <div class=\"pg-ftg-title\">Discord Roles & Statuses<\/div>\r\n                    <p class=\"pg-ftg-desc\">Make your server's Admin or VIP roles stand out, or use burning text in your personal status to show you\u2019re grinding, live on stream, or bringing the heat.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ftg-card pg-ftg-sec3-card\">\r\n                    <div class=\"pg-ftg-icon\" style=\"background:rgba(255,0,0,0.12);color:#ff0000;\"><i class=\"fa-brands fa-youtube\"><\/i><\/div>\r\n                    <div class=\"pg-ftg-title\">YouTube Titles & Bios<\/div>\r\n                    <p class=\"pg-ftg-desc\">Grabbing attention is everything. Use fiery text in your video descriptions, channel name, or thumbnail copy to match high-energy, hype-driven content.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ftg-card pg-ftg-sec3-card\">\r\n                    <div class=\"pg-ftg-icon\" style=\"background:rgba(255,145,0,0.12);color:#ff9100;\"><i class=\"fa-solid fa-ticket\"><\/i><\/div>\r\n                    <div class=\"pg-ftg-title\">Product Drops & Promos<\/div>\r\n                    <p class=\"pg-ftg-desc\">Announcing a flash sale, new streetwear drop, or limited-time event? Burning text creates instant visual urgency and screams \"hot new release.\"<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ftg-card pg-ftg-sec3-card\">\r\n                    <div class=\"pg-ftg-icon\" style=\"background:rgba(213,0,0,0.12);color:#d50000;\"><i class=\"fa-solid fa-music\"><\/i><\/div>\r\n                    <div class=\"pg-ftg-title\">Rapper & Artist Bios<\/div>\r\n                    <p class=\"pg-ftg-desc\">Perfect for SoundCloud artists, beatmakers, and musicians wanting to reflect the aggressive energy of their latest track or mixtape release right in their bio.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ftg-card pg-ftg-sec3-card\">\r\n                    <div class=\"pg-ftg-icon\" style=\"background:rgba(255,82,82,0.12);color:#ff5252;\"><i class=\"fa-solid fa-comment-dots\"><\/i><\/div>\r\n                    <div class=\"pg-ftg-title\">Hype Comments<\/div>\r\n                    <p class=\"pg-ftg-desc\">Support your favorite creators by leaving comments that visually stand out. A fiery text reply is guaranteed to get pinned or noticed by the community.<\/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            --ftg-primary: #ff3d00;\r\n            --ftg-grad: linear-gradient(135deg, #ff0000, #ff6a00, #ffb300);\r\n            --ftg-shadow: 0 12px 30px rgba(255, 61, 0, 0.18);\r\n            --ftg-ease: cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            --ftg-speed: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            --ftg-ff: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\r\n        }\r\n\r\n        .pg-ftg-section {\r\n            width: 100%;\r\n            padding: clamp(48px, 8vw, 96px) 20px;\r\n            position: relative;\r\n            font-family: var(--ftg-ff);\r\n            color: #0a0a0a;\r\n            line-height: 1.6;\r\n            -webkit-font-smoothing: antialiased;\r\n        }\r\n\r\n        .pg-ftg-wrap {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        .pg-ftg-heading {\r\n            font-family: var(--ftg-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-ftg-kw {\r\n            color: #000000;\r\n            position: relative;\r\n        }\r\n\r\n        .pg-ftg-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(--ftg-grad);\r\n            border-radius: 3px;\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s var(--ftg-ease);\r\n        }\r\n\r\n        .pg-ftg-section:hover .pg-ftg-kw::after {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-ftg-sub {\r\n            font-family: var(--ftg-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-ftg-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-ftg-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(--ftg-speed);\r\n            border: 1.5px solid #e0e0e8;\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n\r\n        .pg-ftg-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(--ftg-grad);\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s var(--ftg-ease);\r\n            z-index: 4;\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-ftg-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(255,61,0,0.10) 0%, rgba(255,179,0,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-ftg-card:hover::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-ftg-card.pg-ftg-down {\r\n            transform: translateY(-1px) scale(0.985) !important;\r\n        }\r\n\r\n        .pg-ftg-card.pg-ftg-down::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-ftg-card.pg-ftg-glow::after {\r\n            width: 320px;\r\n            height: 320px;\r\n            opacity: 1;\r\n        }\r\n\r\n        .pg-ftg-card.pg-ftg-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-ftg-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(--ftg-speed);\r\n            position: relative;\r\n            z-index: 3;\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .pg-ftg-card:hover .pg-ftg-icon {\r\n            transform: scale(1.12) rotate(-4deg);\r\n        }\r\n\r\n        .pg-ftg-card.pg-ftg-down .pg-ftg-icon {\r\n            transform: scale(1.04) rotate(0deg);\r\n        }\r\n\r\n        \/* === EMOJI === *\/\r\n        .pg-ftg-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(--ftg-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-ftg-card:hover .pg-ftg-emoji {\r\n            transform: scale(1.22) rotate(-6deg);\r\n        }\r\n\r\n        .pg-ftg-card.pg-ftg-down .pg-ftg-emoji {\r\n            transform: scale(1.08) rotate(0deg);\r\n        }\r\n\r\n        \/* === TITLE === *\/\r\n        .pg-ftg-title {\r\n            font-family: var(--ftg-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-ftg-desc {\r\n            font-family: var(--ftg-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-ftg-sec1 {\r\n            background: #ffffff;\r\n        }\r\n\r\n        .pg-ftg-sec1 .pg-ftg-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-ftg-sec1 .pg-ftg-card:hover {\r\n            border-color: var(--ftg-primary);\r\n            box-shadow: var(--ftg-shadow);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        \/* ==============================\r\n           SECTION 2 \u2014 requested purple gradient bg \/ white cards\r\n           ============================== *\/\r\n        .pg-ftg-sec2 {\r\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        }\r\n\r\n        .pg-ftg-sec2 .pg-ftg-heading.pg-ftg-sec2-heading {\r\n            color: #ffffff;\r\n        }\r\n\r\n        .pg-ftg-sec2 .pg-ftg-kw.pg-ftg-sec2-kw {\r\n            color: #ffffff;\r\n        }\r\n\r\n        .pg-ftg-sec2 .pg-ftg-kw.pg-ftg-sec2-kw::after {\r\n            background: linear-gradient(90deg, #ff0000, #ffb300, #ffffff);\r\n        }\r\n\r\n        .pg-ftg-sec2 .pg-ftg-sub.pg-ftg-sec2-sub {\r\n            color: rgba(255,255,255,0.9);\r\n        }\r\n\r\n        .pg-ftg-sec2 .pg-ftg-card.pg-ftg-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-ftg-sec2 .pg-ftg-card.pg-ftg-sec2-card::before {\r\n            background: linear-gradient(90deg, #667eea, #764ba2, #ff3d00);\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-ftg-sec2 .pg-ftg-card.pg-ftg-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-ftg-sec2 .pg-ftg-card.pg-ftg-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-ftg-sec2 .pg-ftg-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-ftg-sec3 {\r\n            background: #ffffff;\r\n        }\r\n\r\n        .pg-ftg-sec3 .pg-ftg-card.pg-ftg-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-ftg-sec3 .pg-ftg-card.pg-ftg-sec3-card::before {\r\n            background: var(--ftg-grad);\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-ftg-sec3 .pg-ftg-card.pg-ftg-sec3-card:hover {\r\n            border-color: var(--ftg-primary);\r\n            box-shadow: var(--ftg-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-ftg-grid {\r\n                grid-template-columns: repeat(2, 1fr);\r\n                gap: 16px;\r\n            }\r\n            .pg-ftg-section {\r\n                padding: clamp(36px, 6vw, 64px) 16px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 540px) {\r\n            .pg-ftg-grid {\r\n                grid-template-columns: 1fr;\r\n                gap: 14px;\r\n            }\r\n            .pg-ftg-card {\r\n                padding: 22px;\r\n            }\r\n            .pg-ftg-sub {\r\n                margin-bottom: 28px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 360px) {\r\n            .pg-ftg-section {\r\n                padding: 32px 12px;\r\n            }\r\n            .pg-ftg-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-ftg-card');\r\n        cards.forEach(function(card) {\r\n            function glow(el) {\r\n                el.classList.remove('pg-ftg-glow', 'pg-ftg-glow-out');\r\n                void el.offsetWidth;\r\n                el.classList.add('pg-ftg-glow');\r\n                setTimeout(function() {\r\n                    el.classList.add('pg-ftg-glow-out');\r\n                }, 300);\r\n                setTimeout(function() {\r\n                    el.classList.remove('pg-ftg-glow', 'pg-ftg-glow-out');\r\n                }, 700);\r\n            }\r\n            card.addEventListener('mousedown', function() {\r\n                card.classList.add('pg-ftg-down');\r\n            });\r\n            card.addEventListener('mouseup', function() {\r\n                setTimeout(function() {\r\n                    card.classList.remove('pg-ftg-down');\r\n                }, 120);\r\n                glow(card);\r\n            });\r\n            card.addEventListener('mouseleave', function() {\r\n                card.classList.remove('pg-ftg-down', 'pg-ftg-glow', 'pg-ftg-glow-out');\r\n            });\r\n            card.addEventListener('touchstart', function() {\r\n                card.classList.add('pg-ftg-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-ftg-down');\r\n                }, 150);\r\n            });\r\n            card.addEventListener('touchcancel', function() {\r\n                card.classList.remove('pg-ftg-down', 'pg-ftg-glow', 'pg-ftg-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 Fire 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    .ft-tool-wrapper {\r\n        --primary-font: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\r\n        --body-font: \"Consolas\", \"Monaco\", \"Courier New\", monospace;\r\n        \r\n        \/* FIRE-THEMED BOX COLORS *\/\r\n        --bg-deep-ember: #0a0505;\r\n        --bg-charcoal: #110909;\r\n        --bg-smoke: #1a0d0d;\r\n        --bg-lava-dark: #1a0500;\r\n        \r\n        --flame-red: #ff2d00;\r\n        --flame-orange: #ff6600;\r\n        --flame-gold: #ffaa00;\r\n        --flame-amber: #ff8c00;\r\n        --ember-glow: #ff4500;\r\n        --magma-core: #8b0000;\r\n        --text-bright: #ffffff;\r\n        --text-muted: #c9a88b;\r\n        --text-faint: #7a5a4a;\r\n        \r\n        --grad-master: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        --grad-lava: linear-gradient(135deg, #8b0000 0%, #ff2d00 25%, #ff6600 50%, #ffaa00 75%, #ff4500 100%);\r\n        --grad-ember: linear-gradient(180deg, #1a0500 0%, #0a0505 100%);\r\n        --grad-card: linear-gradient(180deg, rgba(26, 5, 0, 0.95) 0%, rgba(10, 5, 5, 0.98) 100%);\r\n        --grad-panel: linear-gradient(180deg, rgba(17, 9, 9, 0.98) 0%, rgba(10, 5, 5, 0.95) 100%);\r\n        \r\n        --glow-lava: 0 0 25px rgba(255, 102, 0, 0.5);\r\n        --glow-ember: 0 0 20px rgba(255, 69, 0, 0.4);\r\n        --glow-gold: 0 0 15px rgba(255, 170, 0, 0.3);\r\n        --shadow-deep: 0 25px 60px rgba(0, 0, 0, 0.9);\r\n        --glass-blur: blur(15px);\r\n        \r\n        --text-flame-shadow: 2px 0px 0px var(--flame-red), -1px 0px 0px var(--flame-gold);\r\n        \r\n        --transition-ui: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n        --transition-fast: all 0.18s 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% !important;\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    .ft-tool-wrapper * { box-sizing: border-box; }\r\n\r\n    .ft-tool-wrapper ::-webkit-scrollbar { width: 8px; height: 8px; }\r\n    .ft-tool-wrapper ::-webkit-scrollbar-track { background: var(--bg-charcoal); }\r\n    .ft-tool-wrapper ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--flame-red), var(--flame-gold)); border-radius: 4px; }\r\n    .ft-tool-wrapper ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--flame-orange), #fff); }\r\n\r\n    .ft-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    .ft-hero-content-wrapper {\r\n        z-index: 2;\r\n        padding-top: 15px;\r\n        width: 100%;\r\n    }\r\n\r\n    .ft-main-title {\r\n        font-family: var(--primary-font);\r\n        font-size: 3.4rem;\r\n        font-weight: 900;\r\n        line-height: 1.1;\r\n        margin: 0 auto 10px auto;\r\n        text-transform: uppercase;\r\n        letter-spacing: 2px;\r\n        color: #fff;\r\n        text-shadow: var(--text-flame-shadow);\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    .ft-main-title i {\r\n        color: var(--flame-gold);\r\n        text-shadow: 0 0 30px rgba(255, 170, 0, 0.6);\r\n        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s;\r\n        animation: ft-flicker 2.5s ease-in-out infinite;\r\n    }\r\n    \r\n    @keyframes ft-flicker {\r\n        0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 8px var(--flame-orange)); }\r\n        20% { opacity: 0.95; transform: scale(1.02) rotate(-3deg); }\r\n        50% { opacity: 1; transform: scale(1.05) rotate(2deg); filter: drop-shadow(0 0 15px var(--flame-red)); }\r\n        80% { opacity: 0.98; transform: scale(1) rotate(-1deg); }\r\n    }\r\n    \r\n    .ft-main-title:hover i {\r\n        transform: rotate(10deg) scale(1.2) translateY(-4px);\r\n        color: var(--flame-red);\r\n        text-shadow: 0 0 40px rgba(255, 45, 0, 0.8), 0 0 60px rgba(255, 102, 0, 0.5);\r\n        animation: none;\r\n    }\r\n\r\n    .ft-main-title:hover {\r\n        letter-spacing: 6px;\r\n        text-shadow: -4px 0 0 var(--flame-red), 4px 0 0 var(--flame-gold), 0 0 30px rgba(255, 170, 0, 0.6);\r\n    }\r\n    \r\n    .ft-main-title::after {\r\n        content: '';\r\n        position: absolute;\r\n        bottom: -18px;\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        display: block;\r\n        width: 60px;\r\n        height: 6px;\r\n        background: var(--grad-lava);\r\n        box-shadow: 0 0 20px rgba(255, 102, 0, 0.7);\r\n        border-radius: 3px;\r\n        transition: var(--transition-ui);\r\n    }\r\n    \r\n    .ft-main-title:hover::after { width: 380px; }\r\n    \r\n    .ft-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: 35px auto 40px auto;\r\n        padding: 0 10px;\r\n        font-weight: 500;\r\n        letter-spacing: 0.5px;\r\n        text-shadow: 0 2px 8px rgba(0,0,0,0.8);\r\n    }\r\n\r\n    \/* MAIN GENERATOR CARD - FIRE THemed *\/\r\n    .ft-generator-card {\r\n        background: var(--bg-deep-ember);\r\n        border: 1px solid var(--magma-core);\r\n        border-top: 4px solid var(--flame-orange);\r\n        width: 100%;\r\n        box-shadow: var(--shadow-deep), inset 0 0 50px rgba(139, 0, 0, 0.3);\r\n        border-radius: 16px;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n    \r\n    .ft-generator-card::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; right: 0; height: 120px;\r\n        background: linear-gradient(180deg, rgba(255, 69, 0, 0.08), transparent);\r\n        pointer-events: none;\r\n    }\r\n\r\n    \/* CONTROLS - ASYMMETRIC GRID WITH FIRE COLORS *\/\r\n    .ft-controls-wrapper {\r\n        padding: 35px;\r\n        background: var(--grad-ember);\r\n        border-bottom: 3px solid var(--magma-core);\r\n        display: grid;\r\n        grid-template-columns: 3fr 1fr; \/* Expanded Input Area *\/\r\n        gap: 30px;\r\n        align-items: stretch;\r\n        position: relative;\r\n    }\r\n    \r\n    .ft-controls-wrapper::after {\r\n        content: '';\r\n        position: absolute;\r\n        bottom: -3px;\r\n        left: 10%;\r\n        right: 10%;\r\n        height: 1px;\r\n        background: linear-gradient(90deg, transparent, var(--flame-orange), var(--flame-gold), var(--flame-orange), transparent);\r\n        opacity: 0.6;\r\n    }\r\n\r\n    .ft-input-section {\r\n        width: 100% !important;\r\n        max-width: 100% !important;\r\n        display: flex;\r\n        flex-direction: column;\r\n        height: 100%;\r\n    }\r\n    \r\n    .ft-enhanced-input-wrapper {\r\n        background: var(--bg-smoke);\r\n        border: 2px solid var(--magma-core);\r\n        border-radius: 10px;\r\n        overflow: hidden;\r\n        display: flex;\r\n        flex-direction: column;\r\n        flex-grow: 1;\r\n        width: 100% !important;\r\n        transition: var(--transition-ui);\r\n        box-shadow: inset 0 0 30px rgba(0,0,0,0.8), 0 0 0 1px rgba(255, 69, 0, 0.1);\r\n        position: relative;\r\n    }\r\n    \r\n    .ft-enhanced-input-wrapper::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; right: 0;\r\n        height: 1px;\r\n        background: linear-gradient(90deg, transparent, var(--flame-red), var(--flame-gold), transparent);\r\n        opacity: 0.5;\r\n    }\r\n\r\n    .ft-enhanced-input-wrapper:focus-within {\r\n        border-color: var(--flame-orange);\r\n        box-shadow: inset 0 0 40px rgba(255, 102, 0, 0.1), 0 0 20px rgba(255, 102, 0, 0.2);\r\n    }\r\n    \r\n    .ft-text-input {\r\n        width: 100% !important;\r\n        max-width: 100% !important;\r\n        min-height: 140px !important;\r\n        flex-grow: 1;\r\n        padding: 20px 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: 600 !important;\r\n        font-size: 1.6rem !important;\r\n        outline: none !important;\r\n        text-align: center !important;\r\n        text-shadow: 2px 2px 0px #000;\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        box-sizing: border-box !important;\r\n    }\r\n    \r\n    .ft-text-input::placeholder { \r\n        color: var(--text-faint); \r\n        font-style: italic;\r\n        background: linear-gradient(90deg, var(--text-faint), var(--text-muted), var(--text-faint));\r\n        -webkit-background-clip: text;\r\n        background-clip: text;\r\n    }\r\n\r\n    \/* TOOLBAR - LAVA ACCENT *\/\r\n    .ft-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: var(--bg-lava-dark);\r\n        padding: 15px;\r\n        border-top: 1px solid rgba(255, 102, 0, 0.2);\r\n        width: 100% !important;\r\n        box-sizing: border-box !important;\r\n    }\r\n\r\n    .ft-toolbar-btn {\r\n        background: linear-gradient(135deg, rgba(255, 102, 0, 0.1), rgba(139, 0, 0, 0.2));\r\n        color: var(--text-muted);\r\n        border: 1px solid rgba(255, 102, 0, 0.25);\r\n        padding: 10px 16px;\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        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    .ft-toolbar-btn i { transition: transform 0.2s ease; }\r\n\r\n    .ft-toolbar-btn:hover {\r\n        background: linear-gradient(135deg, rgba(255, 102, 0, 0.3), rgba(255, 69, 0, 0.2));\r\n        color: var(--text-bright);\r\n        border-color: var(--flame-orange);\r\n        box-shadow: 0 0 15px rgba(255, 102, 0, 0.4), 0 2px 8px rgba(0,0,0,0.3);\r\n        transform: translateY(-2px);\r\n    }\r\n\r\n    .ft-toolbar-btn:hover i { \r\n        transform: translateY(-3px) rotate(5deg); \r\n        color: var(--flame-gold);\r\n        text-shadow: 0 0 10px rgba(255, 170, 0, 0.6);\r\n    }\r\n    \r\n    .ft-preset-select {\r\n        background: linear-gradient(135deg, rgba(139, 0, 0, 0.25), rgba(26, 5, 0, 0.3));\r\n        color: var(--flame-orange);\r\n        border: 1px solid var(--flame-red);\r\n        padding: 10px 16px;\r\n        font-family: system-ui, sans-serif;\r\n        font-size: 0.75rem;\r\n        font-weight: 800;\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        width: 100% !important;\r\n        background-image: url(\"image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='12' fill='%23ff6600' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'\/%3E%3C\/svg%3E\");\r\n        background-repeat: no-repeat;\r\n        background-position: right 12px center;\r\n        box-sizing: border-box !important;\r\n    }\r\n    \r\n    .ft-preset-select:hover, .ft-preset-select:focus {\r\n        background: linear-gradient(135deg, var(--flame-red), var(--magma-core));\r\n        color: #fff;\r\n        border-color: var(--flame-gold);\r\n        box-shadow: var(--glow-ember);\r\n    }\r\n    \r\n    .ft-preset-select option {\r\n        background: var(--bg-deep-ember);\r\n        color: #fff;\r\n    }\r\n\r\n    \/* SETTINGS SECTION *\/\r\n    .ft-settings-section {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 25px;\r\n        width: 100% !important;\r\n        max-width: 100% !important;\r\n    }\r\n\r\n    .ft-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: var(--flame-gold);\r\n        text-transform: uppercase;\r\n        letter-spacing: 2px;\r\n        margin-bottom: 14px;\r\n        text-shadow: 0 0 10px rgba(255, 170, 0, 0.3);\r\n    }\r\n    \r\n    .ft-panel-label i {\r\n        color: var(--flame-orange);\r\n        margin-right: 12px;\r\n        font-size: 1.2rem;\r\n        text-shadow: 0 0 15px rgba(255, 102, 0, 0.5);\r\n    }\r\n\r\n    .ft-grid-options {\r\n        display: grid;\r\n        gap: 14px;\r\n        grid-template-columns: repeat(2, 1fr);\r\n        width: 100% !important;\r\n    }\r\n\r\n    .ft-option-btn {\r\n        background: linear-gradient(135deg, var(--bg-smoke), var(--bg-charcoal));\r\n        border: 1px solid rgba(255, 102, 0, 0.15);\r\n        padding: 18px 12px;\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: 10px;\r\n        position: relative;\r\n        overflow: hidden;\r\n        width: 100% !important;\r\n    }\r\n    \r\n    .ft-option-btn i { font-size: 1.4rem; transition: var(--transition-fast); }\r\n\r\n    .ft-option-btn::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; width: 0; height: 100%;\r\n        background: linear-gradient(90deg, rgba(255,102,0,0.1), rgba(255,170,0,0.15));\r\n        transition: width 0.35s ease;\r\n    }\r\n\r\n    .ft-option-btn:hover {\r\n        background: linear-gradient(135deg, rgba(255, 69, 0, 0.15), rgba(139, 0, 0, 0.25));\r\n        border-color: rgba(255, 102, 0, 0.4);\r\n        color: #fff;\r\n        transform: translateY(-3px);\r\n        box-shadow: 0 5px 15px rgba(0,0,0,0.3), 0 0 10px rgba(255, 102, 0, 0.2);\r\n    }\r\n    \r\n    .ft-option-btn:hover::before { width: 100%; }\r\n\r\n    .ft-option-btn:hover i {\r\n        transform: scale(1.15) rotate(8deg);\r\n        color: var(--flame-gold);\r\n        text-shadow: 0 0 15px rgba(255, 170, 0, 0.6);\r\n    }\r\n\r\n    .ft-option-btn.active { \r\n        background: linear-gradient(135deg, var(--magma-core), #5a0000);\r\n        color: #fff; \r\n        border-color: var(--flame-orange);\r\n        box-shadow: 0 0 20px rgba(255, 102, 0, 0.4), inset 0 0 15px rgba(255, 170, 0, 0.15);\r\n    }\r\n    \r\n    .ft-option-btn.active i {\r\n        color: var(--flame-gold);\r\n        text-shadow: 0 0 18px rgba(255, 170, 0, 0.8);\r\n        animation: ft-icon-bounce 1.5s ease-in-out infinite;\r\n    }\r\n    \r\n    @keyframes ft-icon-bounce {\r\n        0%, 100% { transform: scale(1); }\r\n        50% { transform: scale(1.1); }\r\n    }\r\n\r\n    \/* RESULTS AREA - FIRE CARDS *\/\r\n    .ft-results-area {\r\n        padding: 45px 35px;\r\n        position: relative;\r\n        width: 100% !important;\r\n        background: linear-gradient(180deg, var(--bg-charcoal) 0%, var(--bg-deep-ember) 100%);\r\n        box-sizing: border-box !important;\r\n    }\r\n    \r\n    .ft-result-list {\r\n        display: grid;\r\n        grid-template-columns: repeat(2, 1fr) !important;\r\n        gap: 22px;\r\n        position: relative;\r\n        z-index: 2;\r\n        width: 100% !important;\r\n    }\r\n\r\n    .ft-result-card {\r\n        background: linear-gradient(180deg, rgba(26, 5, 0, 0.9), rgba(10, 5, 5, 0.95));\r\n        border: 1px solid var(--magma-core);\r\n        padding: 22px 28px;\r\n        transition: var(--transition-ui);\r\n        position: relative;\r\n        overflow: hidden;\r\n        border-radius: 10px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        min-height: 150px;\r\n        box-sizing: border-box !important;\r\n        width: 100% !important;\r\n    }\r\n    \r\n    .ft-result-card::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; width: 0; height: 100%;\r\n        background: linear-gradient(180deg, var(--flame-red), var(--flame-orange), var(--flame-gold));\r\n        transition: width 0.35s ease;\r\n        opacity: 0.9;\r\n    }\r\n    \r\n    .ft-result-card:hover {\r\n        transform: translateY(-5px) scale(1.015);\r\n        box-shadow: -8px 12px 30px rgba(0, 0, 0, 0.9), 0 0 25px rgba(255, 102, 0, 0.35);\r\n        background: linear-gradient(180deg, rgba(139, 0, 0, 0.2), rgba(10, 5, 5, 0.98));\r\n        border-color: var(--flame-orange);\r\n        z-index: 10;\r\n    }\r\n    \r\n    .ft-result-card:hover::before { width: 5px; }\r\n\r\n    .ft-card-header {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        width: 100% !important;\r\n        margin-bottom: 15px;\r\n        border-bottom: 1px dashed rgba(255,102,0,0.15);\r\n        padding-bottom: 12px;\r\n        box-sizing: border-box !important;\r\n    }\r\n    \r\n    .ft-card-title {\r\n        font-family: system-ui, sans-serif;\r\n        font-size: 0.8rem;\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: 8px;\r\n        transition: var(--transition-fast);\r\n    }\r\n    \r\n    .ft-card-title i {\r\n        color: var(--flame-red);\r\n        font-size: 1.1rem;\r\n        transition: transform 0.3s ease, color 0.2s, text-shadow 0.3s;\r\n    }\r\n\r\n    .ft-result-card:hover .ft-card-title {\r\n        color: var(--flame-gold);\r\n        text-shadow: 0 0 12px rgba(255, 170, 0, 0.4);\r\n    }\r\n    \r\n    .ft-result-card:hover .ft-card-title i {\r\n        transform: scale(1.3) rotate(12deg);\r\n        color: var(--flame-orange);\r\n        text-shadow: 0 0 15px rgba(255, 102, 0, 0.7);\r\n    }\r\n\r\n    .ft-card-copy-btn {\r\n        background: linear-gradient(135deg, rgba(139, 0, 0, 0.2), rgba(26, 5, 0, 0.3));\r\n        border: 1px solid var(--magma-core);\r\n        color: var(--text-bright);\r\n        width: 40px;\r\n        height: 40px;\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    .ft-card-copy-btn i {\r\n        font-size: 1.1rem;\r\n        transition: transform 0.2s ease;\r\n    }\r\n    \r\n    .ft-card-copy-btn:hover {\r\n        background: linear-gradient(135deg, rgba(255, 102, 0, 0.25), rgba(255, 170, 0, 0.2));\r\n        border-color: var(--flame-orange);\r\n        color: var(--flame-gold);\r\n        box-shadow: var(--glow-lava);\r\n        transform: scale(1.1) rotate(-5deg);\r\n    }\r\n    \r\n    .ft-card-copy-btn:hover i { transform: scale(1.15) translateY(-3px); }\r\n    .ft-card-copy-btn:active { transform: scale(0.95); }\r\n\r\n    .ft-card-preview {\r\n        font-size: 1.5rem;\r\n        color: #fff;\r\n        width: 100% !important;\r\n        text-align: center;\r\n        font-family: var(--body-font);\r\n        position: relative;\r\n        z-index: 1;\r\n        padding: 12px;\r\n        transition: var(--transition-fast);\r\n        flex-grow: 1;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        white-space: pre-wrap !important;\r\n        word-break: break-word !important;\r\n        overflow-wrap: anywhere !important;\r\n        box-sizing: border-box !important;\r\n        text-shadow: 1px 1px 4px rgba(0,0,0,0.7);\r\n        max-height: 180px;\r\n        overflow-y: auto;\r\n        line-height: 1.8;\r\n    }\r\n    \r\n    .ft-result-card:hover .ft-card-preview {\r\n        color: var(--text-bright);\r\n        text-shadow: var(--text-flame-shadow), 0 0 10px rgba(255, 102, 0, 0.3);\r\n    }\r\n\r\n    \/* LOAD MORE - LAVA BUTTON *\/\r\n    .ft-btn-load {\r\n        background: linear-gradient(135deg, var(--bg-lava-dark), var(--bg-charcoal));\r\n        color: var(--text-bright);\r\n        border: 2px solid var(--flame-orange);\r\n        padding: 18px 50px;\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: 45px;\r\n        text-transform: uppercase;\r\n        border-radius: 8px;\r\n        transition: var(--transition-ui);\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: 12px;\r\n        box-shadow: 0 8px 20px rgba(0,0,0,0.7), 0 0 0 1px rgba(255, 102, 0, 0.2);\r\n        overflow: hidden;\r\n    }\r\n    \r\n    .ft-btn-load::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: -100%;\r\n        width: 100%; height: 100%;\r\n        background: linear-gradient(90deg, transparent, rgba(255, 102, 0, 0.25), transparent);\r\n        transition: left 0.5s ease;\r\n    }\r\n    \r\n    .ft-btn-load:hover { \r\n        background: linear-gradient(135deg, var(--magma-core), var(--bg-lava-dark));\r\n        box-shadow: 0 10px 25px rgba(0,0,0,0.8), var(--glow-lava);\r\n        transform: translateY(-4px);\r\n        border-color: var(--flame-gold);\r\n        text-shadow: var(--text-flame-shadow);\r\n    }\r\n    \r\n    .ft-btn-load:hover::before {\r\n        left: 100%;\r\n    }\r\n    \r\n    .ft-btn-load:hover i { \r\n        transform: translateY(6px); \r\n        color: var(--flame-gold);\r\n        text-shadow: 0 0 15px rgba(255, 170, 0, 0.6);\r\n    }\r\n    .ft-btn-load:active { transform: translateY(0); }\r\n    \r\n    @keyframes ft-pulse-ring {\r\n        0% { box-shadow: 0 0 0 0 rgba(255, 102, 0, 0.5), 0 8px 20px rgba(0,0,0,0.7); }\r\n        70% { box-shadow: 0 0 0 15px rgba(255, 102, 0, 0), 0 8px 20px rgba(0,0,0,0.7); }\r\n        100% { box-shadow: 0 0 0 0 rgba(255, 102, 0, 0), 0 8px 20px rgba(0,0,0,0.7); }\r\n    }\r\n    \r\n    .ft-btn-load { animation: ft-pulse-ring 2.5s infinite; }\r\n\r\n    .ft-toast {\r\n        visibility: hidden;\r\n        background: linear-gradient(135deg, var(--bg-charcoal), var(--bg-deep-ember));\r\n        backdrop-filter: var(--glass-blur);\r\n        color: #fff;\r\n        padding: 16px 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(--flame-orange);\r\n        border-left: 5px solid var(--flame-gold);\r\n        text-transform: uppercase;\r\n        box-shadow: var(--shadow-deep), 0 0 20px rgba(255, 102, 0, 0.5);\r\n        letter-spacing: 1px;\r\n        opacity: 0;\r\n        transition: all 0.3s 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    .ft-toast i { \r\n        color: var(--flame-gold); \r\n        font-size: 1.2rem; \r\n        text-shadow: 0 0 15px rgba(255, 170, 0, 0.7); \r\n    }\r\n    \r\n    .ft-toast.show { \r\n        visibility: visible; \r\n        opacity: 1;\r\n        transform: translateX(-50%) translateY(0);\r\n    }\r\n\r\n    @media (max-width: 950px) {\r\n        .ft-main-title { font-size: 2.5rem; }\r\n        .ft-controls-wrapper { grid-template-columns: 1fr; }\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n        .ft-result-list { grid-template-columns: 1fr !important; }\r\n    }\r\n\r\n    @media (max-width: 600px) {\r\n        .ft-container { padding: 30px 15px !important; }\r\n        .ft-results-area { padding: 30px 15px; }\r\n        .ft-controls-wrapper { padding: 20px; gap: 20px; }\r\n        .ft-text-input { min-height: 100px !important; font-size: 1.4rem !important; }\r\n        .ft-input-toolbar { justify-content: center; }\r\n        .ft-preset-select { max-width: 100%; text-align: center; }\r\n        .ft-option-btn { padding: 12px 8px; font-size: 0.7rem; }\r\n        .ft-option-btn i { font-size: 1.1rem; }\r\n        .ft-btn-load { padding: 15px 30px; font-size: 0.9rem; width: 100%; justify-content: center; }\r\n        .ft-main-title { font-size: 2rem; }\r\n        .ft-subtitle { font-size: 0.9rem; }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"ft-tool-wrapper\" id=\"ft-fire-tool\">\r\n    <div class=\"ft-container ft-hero-content-wrapper\">\r\n        <h1 class=\"ft-main-title\"><i class=\"fa-solid fa-fire\"><\/i> Fire Text Generator - Ignite Instantly<\/h1>\r\n        <p class=\"ft-subtitle\">Ignite your words with blazing Unicode effects, flame accents, and modern gothic fire styling. Copy-safe, high-intensity typography that burns bright across every platform.<\/p>\r\n        \r\n        <div class=\"ft-generator-card\">\r\n            <div class=\"ft-controls-wrapper\">\r\n                \r\n                <div class=\"ft-input-section\">\r\n                    <div class=\"ft-panel-label\"><i class=\"fa-solid fa-fire-flame-curved\"><\/i> Fuel Input<\/div>\r\n                    <div class=\"ft-enhanced-input-wrapper\">\r\n                        <textarea class=\"ft-text-input\" id=\"ftInputText\" placeholder=\"Ignite the flames...\"><\/textarea>\r\n                        \r\n                        <div class=\"ft-input-toolbar\">\r\n                            <button class=\"ft-toolbar-btn\" id=\"ftBtnPaste\"><i class=\"fa-solid fa-paste\"><\/i> Paste<\/button>\r\n                            <button class=\"ft-toolbar-btn\" id=\"ftBtnSelectAll\"><i class=\"fa-solid fa-object-group\"><\/i> Select All<\/button>\r\n                            <button class=\"ft-toolbar-btn\" id=\"ftBtnCopy\"><i class=\"fa-solid fa-copy\"><\/i> Copy Base<\/button>\r\n                            \r\n                            <select class=\"ft-preset-select\" id=\"ftPresetSelect\">\r\n                                <option value=\"\" disabled selected>\ud83d\udd25 Blaze Presets<\/option>\r\n                                <option value=\"The fire rises. The ashes remember.\">Rising Flames<\/option>\r\n                                <option value=\"Burn bright. Leave no trace.\">Burn Bright<\/option>\r\n                                <option value=\"Embers of the digital inferno\">Digital Inferno<\/option>\r\n                                <option value=\"From the ashes, we reignite\">Ashes Reborn<\/option>\r\n                                <option value=\"Ignite. Transform. Unleash.\">Ignite Power<\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <div class=\"ft-settings-section\">\r\n                    <div>\r\n                        <div class=\"ft-panel-label\"><i class=\"fa-solid fa-fire-burner\"><\/i> Flame Mode<\/div>\r\n                        <div class=\"ft-grid-options\">\r\n                            <button class=\"ft-option-btn mode-btn active\" data-val=\"Flame\">\r\n                                <i class=\"fa-solid fa-fire\"><\/i> Flame Accent\r\n                            <\/button>\r\n                            <button class=\"ft-option-btn mode-btn\" data-val=\"Blazing\">\r\n                                <i class=\"fa-solid fa-explosion\"><\/i> Blazing Bold\r\n                            <\/button>\r\n                            <button class=\"ft-option-btn mode-btn\" data-val=\"Gothic\">\r\n                                <i class=\"fa-solid fa-church\"><\/i> Gothic Flame\r\n                            <\/button>\r\n                            <button class=\"ft-option-btn mode-btn\" data-val=\"Ember\">\r\n                                <i class=\"fa-solid fa-temperature-high\"><\/i> Ember Drift\r\n                            <\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div>\r\n                        <div class=\"ft-panel-label\"><i class=\"fa-solid fa-sliders\"><\/i> Intensity<\/div>\r\n                        <div class=\"ft-grid-options\">\r\n                            <button class=\"ft-option-btn style-btn active\" data-val=\"Standard\">\r\n                                <i class=\"fa-solid fa-campground\"><\/i> Standard\r\n                            <\/button>\r\n                            <button class=\"ft-option-btn style-btn\" data-val=\"Inferno\">\r\n                                <i class=\"fa-solid fa-volcano\"><\/i> Inferno Max\r\n                            <\/button>\r\n                            <button class=\"ft-option-btn style-btn\" data-val=\"Smoke\">\r\n                                <i class=\"fa-solid fa-smog\"><\/i> Smoke Trail\r\n                            <\/button>\r\n                            <button class=\"ft-option-btn style-btn\" data-val=\"Spark\">\r\n                                <i class=\"fa-solid fa-star\"><\/i> Spark Flicker\r\n                            <\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"ft-results-area\">\r\n                <div class=\"ft-result-list\" id=\"ftResultList\"><\/div>\r\n                <button class=\"ft-btn-load\" id=\"ftLoadMoreBtn\"><span>Extract More Data<\/span> <i class=\"fa-solid fa-arrow-down\"><\/i><\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <div id=\"ftToast\" class=\"ft-toast\"><i class=\"fa-solid fa-fire-flame-simple\"><\/i> Fragment Copied<\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n    const wrapper = document.getElementById('ft-fire-tool');\r\n    const inputEl = wrapper.querySelector('#ftInputText');\r\n    const resultList = wrapper.querySelector('#ftResultList');\r\n    const loadMoreBtn = wrapper.querySelector('#ftLoadMoreBtn');\r\n    const toast = wrapper.querySelector('#ftToast');\r\n    \r\n    const btnPaste = wrapper.querySelector('#ftBtnPaste');\r\n    const btnSelectAll = wrapper.querySelector('#ftBtnSelectAll');\r\n    const btnCopy = wrapper.querySelector('#ftBtnCopy');\r\n    const presetSelect = wrapper.querySelector('#ftPresetSelect');\r\n\r\n    let currentMode = 'Flame';\r\n    let currentStyle = 'Standard';\r\n    let limit = 8;\r\n    const LOAD_INCREMENT = 8;\r\n\r\n    const baseStr = \"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ\";\r\n    const baseArr = Array.from(baseStr);\r\n    \r\n    const gothicArr = 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 boldArr = Array.from(\"\ud835\udc1a\ud835\udc1b\ud835\udc1c\ud835\udc1d\ud835\udc1e\ud835\udc1f\ud835\udc20\ud835\udc21\ud835\udc22\ud835\udc23\ud835\udc24\ud835\udc25\ud835\udc26\ud835\udc27\ud835\udc28\ud835\udc29\ud835\udc2a\ud835\udc2b\ud835\udc2c\ud835\udc2d\ud835\udc2e\ud835\udc2f\ud835\udc30\ud835\udc31\ud835\udc32\ud835\udc33\ud835\udc00\ud835\udc01\ud835\udc02\ud835\udc03\ud835\udc04\ud835\udc05\ud835\udc06\ud835\udc07\ud835\udc08\ud835\udc09\ud835\udc0a\ud835\udc0b\ud835\udc0c\ud835\udc0d\ud835\udc0e\ud835\udc0f\ud835\udc10\ud835\udc11\ud835\udc12\ud835\udc13\ud835\udc14\ud835\udc15\ud835\udc16\ud835\udc17\ud835\udc18\ud835\udc19\");\r\n    const italicArr = Array.from(\"\ud835\udc4e\ud835\udc4f\ud835\udc50\ud835\udc51\ud835\udc52\ud835\udc53\ud835\udc54\u210e\ud835\udc56\ud835\udc57\ud835\udc58\ud835\udc59\ud835\udc5a\ud835\udc5b\ud835\udc5c\ud835\udc5d\ud835\udc5e\ud835\udc5f\ud835\udc60\ud835\udc61\ud835\udc62\ud835\udc63\ud835\udc64\ud835\udc65\ud835\udc66\ud835\udc67\ud835\udc34\ud835\udc35\ud835\udc36\ud835\udc37\ud835\udc38\ud835\udc39\ud835\udc3a\ud835\udc3b\ud835\udc3c\ud835\udc3d\ud835\udc3e\ud835\udc3f\ud835\udc40\ud835\udc41\ud835\udc42\ud835\udc43\ud835\udc44\ud835\udc45\ud835\udc46\ud835\udc47\ud835\udc48\ud835\udc49\ud835\udc4a\ud835\udc4b\ud835\udc4c\ud835\udc4d\");\r\n    \r\n    const leetMap = {'a':'4', 'e':'3', 'i':'1', 'o':'0', 't':'7', 's':'5', 'g':'9', 'A':'4', 'E':'3', 'I':'1', 'O':'0', 'T':'7', 'S':'5', 'G':'9'};\r\n    \r\n    const flameSymbols = ['\ud83d\udd25', '\ud83d\udd25', '\ud83d\udd25', '\ud83c\udf0b', '\u2604\ufe0f', '\u26a1', '\ud83d\udca5'];\r\n    const emberSymbols = ['\u2728', '\ud83d\udd25', '\ud83d\udcab', '\ud83c\udf1f', '\u26a1'];\r\n    const smokeSymbols = ['\ud83c\udf2b\ufe0f', '\ud83d\udca8', '\ud83c\udf2c\ufe0f', '\ud83c\udf2a\ufe0f'];\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    const zalgoMid = ['\\u0315', '\\u031b', '\\u0340', '\\u0341', '\\u0358', '\\u0321'];\r\n    \r\n    const rand = (max) => Math.floor(Math.random() * max);\r\n\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            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            const originalIcon = btn.innerHTML;\r\n            btn.innerHTML = '<i class=\"fa-solid fa-check\"><\/i>';\r\n            btn.style.background = 'var(--flame-gold)';\r\n            btn.style.borderColor = 'var(--flame-gold)';\r\n            btn.style.color = '#000';\r\n            \r\n            setTimeout(() => {\r\n                btn.innerHTML = originalIcon;\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    const generateConfigs = () => {\r\n        const templates = [];\r\n        const names = [\r\n            'Phoenix Rising', 'Blaze Core', 'Inferno Burst', 'Ash Walker',\r\n            'Fire Storm', 'Ember Flow', 'Magma Drift', 'Solar Flare',\r\n            'Hellfire Echo', 'Dragon Breath', 'Pyre Glow', 'Cinder Fall',\r\n            'Flame Whisper', 'Scorch Mark', 'Volcanic Pulse', 'Spark Trail',\r\n            'Wildfire Surge', 'Heat Wave', 'Burn Vector', 'Smolder Point'\r\n        ];\r\n        \r\n        for(let i=0; i<120; i++){\r\n            templates.push({\r\n                id: `fire-${i}`,\r\n                name: names[i % names.length] + ` 0x${Math.floor(Math.random()*999).toString(16).toUpperCase()}`,\r\n                icon: ['fire', 'explosion', 'bolt', 'dragon', 'mountain-sun', 'sun', 'wind', 'cloud-bolt', 'skull', 'meteor'][i % 10]\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    const mapChar = (char, mode) => {\r\n        const idx = baseArr.indexOf(char);\r\n        if (mode === 'Gothic' && idx !== -1) return gothicArr[idx];\r\n        if (mode === 'Blazing' && idx !== -1) return boldArr[idx];\r\n        if (mode === 'Ember' && idx !== -1) return italicArr[idx];\r\n        if (mode === 'Flame' && leetMap[char]) return leetMap[char];\r\n        return char;\r\n    };\r\n\r\n    const transformLogic = (text, mode, style, variationIndex) => {\r\n        if (!text) return \"\";\r\n        let result = '';\r\n        const intensity = variationIndex % 3;\r\n\r\n        Array.from(text).forEach((c, i) => {\r\n            let char = c;\r\n            \r\n            if (mode !== 'Flame') {\r\n                char = mapChar(c, mode);\r\n            }\r\n\r\n            if (mode === 'Flame' && c !== ' ' && c !== '\\n') {\r\n                const zCount = intensity === 0 ? 2 : (intensity === 1 ? 4 : 6);\r\n                for(let k=0; k<rand(zCount); k++) char += zalgoUp[rand(zalgoUp.length)];\r\n                for(let k=0; k<rand(zCount); k++) char += zalgoMid[rand(zalgoMid.length)];\r\n                for(let k=0; k<rand(zCount); k++) char += zalgoDown[rand(zalgoDown.length)];\r\n            }\r\n\r\n            if (style === 'Inferno' && c !== ' ' && c !== '\\n' && rand(10) > 5) {\r\n                char = flameSymbols[rand(flameSymbols.length)] + char;\r\n            }\r\n            \r\n            if (style === 'Smoke' && c !== ' ' && c !== '\\n' && rand(10) > 6) {\r\n                char += smokeSymbols[rand(smokeSymbols.length)];\r\n            }\r\n            \r\n            if (style === 'Spark' && c !== ' ' && c !== '\\n' && rand(10) > 7) {\r\n                char += emberSymbols[rand(emberSymbols.length)];\r\n            }\r\n\r\n            result += char;\r\n        });\r\n\r\n        return result;\r\n    };\r\n\r\n    const render = () => {\r\n        resultList.innerHTML = '';\r\n        let raw = inputEl.value || \"Ignite the flames...\";\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 = 'ft-result-card';\r\n            \r\n            card.innerHTML = `\r\n                <div class=\"ft-card-header\">\r\n                    <div class=\"ft-card-title\">\r\n                        <i class=\"fa-solid fa-${s.icon}\"><\/i> \r\n                        ${s.name}\r\n                    <\/div>\r\n                    <button class=\"ft-card-copy-btn\" title=\"Copy Data Fragment\"><i class=\"fa-regular fa-copy\"><\/i><\/button>\r\n                <\/div>\r\n                <div class=\"ft-card-preview\">${out}<\/div>\r\n            `;\r\n            \r\n            const copyBtn = card.querySelector('.ft-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 = `Extract More Data (${remaining})`;\r\n        }\r\n    };\r\n\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        }\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('span').textContent = ' Source Base Copied';\r\n            setTimeout(() => {\r\n                toast.querySelector('span').textContent = ' Fragment 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 = 8;\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 = 8;\r\n            render();\r\n        });\r\n    });\r\n\r\n    render();\r\n});\r\n<\/script>\r\n<!-- END OF FILE Fire 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\r\n\r\n<section class=\"pg-ftg-section pg-ftg-sec1\">\r\n        <div class=\"pg-ftg-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    <section class=\"pg-ftg-section pg-ftg-sec1\">\r\n        <div class=\"pg-ftg-wrap\">\r\n            <h2 class=\"pg-ftg-heading\">What Makes This <span class=\"pg-ftg-kw\">Fire Text Generator<\/span> Different?<\/h2>\r\n            <p class=\"pg-ftg-sub\">Most text tools just give you basic fonts. Our fire text generator combines blazing Unicode characters, Zalgo glitch effects, and fiery aesthetics to make your words literally pop off the screen.<\/p>\r\n            <div class=\"pg-ftg-grid\">\r\n                <div class=\"pg-ftg-card\">\r\n                    <div class=\"pg-ftg-icon\" style=\"background:rgba(255,0,0,0.12);color:#ff0000;\"><i class=\"fa-solid fa-fire\"><\/i><\/div>\r\n                    <div class=\"pg-ftg-title\">Blazing Unicode Styles<\/div>\r\n                    <p class=\"pg-ftg-desc\">We use specialized Unicode characters that mimic the look of flames, smoke, and sparks, ensuring your text brings the heat to any platform without needing custom fonts.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ftg-card\">\r\n                    <div class=\"pg-ftg-icon\" style=\"background:rgba(255,102,0,0.12);color:#ff6600;\"><i class=\"fa-solid fa-bolt\"><\/i><\/div>\r\n                    <div class=\"pg-ftg-title\">Zalgo & Glitch Effects<\/div>\r\n                    <p class=\"pg-ftg-desc\">Want that chaotic, burning look? Choose from multiple intensity levels of \"flaming\" Zalgo text that spills over standard line heights for a highly disruptive aesthetic.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ftg-card\">\r\n                    <div class=\"pg-ftg-icon\" style=\"background:rgba(255,165,0,0.12);color:#ffa500;\"><i class=\"fa-solid fa-stopwatch\"><\/i><\/div>\r\n                    <div class=\"pg-ftg-title\">Instant Text Ignition<\/div>\r\n                    <p class=\"pg-ftg-desc\">Type your phrase and watch it burst into flaming text instantly. Everything runs directly in your local browser with zero server delays or annoying loading screens.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ftg-card\">\r\n                    <div class=\"pg-ftg-icon\" style=\"background:rgba(213,0,0,0.12);color:#d50000;\"><i class=\"fa-solid fa-copy\"><\/i><\/div>\r\n                    <div class=\"pg-ftg-title\">One-Click Copy & Paste<\/div>\r\n                    <p class=\"pg-ftg-desc\">Grab your fiery creations in milliseconds. One click securely copies the raw, formatted text straight to your clipboard, ready to be dropped anywhere.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ftg-card\">\r\n                    <div class=\"pg-ftg-icon\" style=\"background:rgba(255,61,0,0.12);color:#ff3d00;\"><i class=\"fa-solid fa-mobile-screen\"><\/i><\/div>\r\n                    <div class=\"pg-ftg-title\">Renders Everywhere<\/div>\r\n                    <p class=\"pg-ftg-desc\">iOS, Android, Discord, or Instagram\u2014our fire text generator outputs universal text that burns bright across all modern apps and operating systems.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ftg-card\">\r\n                    <div class=\"pg-ftg-icon\" style=\"background:rgba(255,193,7,0.12);color:#ffc107;\"><i class=\"fa-solid fa-fire-flame-curved\"><\/i><\/div>\r\n                    <div class=\"pg-ftg-title\">100% Free & Unlimited<\/div>\r\n                    <p class=\"pg-ftg-desc\">No usage limits or premium paywalls. Generate as many flaming words as you need to hype up your audience, completely free and with no signup required.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 2 -->\r\n    <section class=\"pg-ftg-section pg-ftg-sec2\">\r\n        <div class=\"pg-ftg-wrap\">\r\n            <h2 class=\"pg-ftg-heading pg-ftg-sec2-heading\">How to Use Our <span class=\"pg-ftg-kw pg-ftg-sec2-kw\">Fire Text Generator<\/span>?<\/h2>\r\n            <p class=\"pg-ftg-sub pg-ftg-sec2-sub\">Ready to set your timeline ablaze? Generating burning, fiery text is fast and requires absolutely no design skills. Just follow these steps.<\/p>\r\n            <div class=\"pg-ftg-grid\">\r\n                <div class=\"pg-ftg-card pg-ftg-sec2-card\">\r\n                    <span class=\"pg-ftg-emoji\">\u2328\ufe0f<\/span>\r\n                    <div class=\"pg-ftg-title\">Step 1: Type Your Base Text<\/div>\r\n                    <p class=\"pg-ftg-desc\">Enter your hype word, gamer tag, or announcement into the input box. Normal letters, numbers, and symbols work perfectly as your starting point.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ftg-card pg-ftg-sec2-card\">\r\n                    <span class=\"pg-ftg-emoji\">\ud83d\udd25<\/span>\r\n                    <div class=\"pg-ftg-title\">Step 2: Choose the Heat Level<\/div>\r\n                    <p class=\"pg-ftg-desc\">Scroll through our generated options. From subtle spark fonts to fully engulfed chaotic Zalgo fire, pick the aesthetic that perfectly fits your vibe.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ftg-card pg-ftg-sec2-card\">\r\n                    <span class=\"pg-ftg-emoji\">\ud83d\udc41\ufe0f<\/span>\r\n                    <div class=\"pg-ftg-title\">Step 3: Preview the Flames<\/div>\r\n                    <p class=\"pg-ftg-desc\">See exactly how your text looks before copying. Our live preview ensures your burning text maintains its visual intensity and readability.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ftg-card pg-ftg-sec2-card\">\r\n                    <span class=\"pg-ftg-emoji\">\ud83d\udccb<\/span>\r\n                    <div class=\"pg-ftg-title\">Step 4: Copy the Text<\/div>\r\n                    <p class=\"pg-ftg-desc\">Click the copy button next to your favorite style. The formatting is locked in as pure Unicode, so no fiery details get lost during the transfer.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ftg-card pg-ftg-sec2-card\">\r\n                    <span class=\"pg-ftg-emoji\">\ud83d\udcf1<\/span>\r\n                    <div class=\"pg-ftg-title\">Step 5: Paste Anywhere<\/div>\r\n                    <p class=\"pg-ftg-desc\">Drop your fiery text into your Discord server, Twitter\/X timeline, or gaming bio. It pastes seamlessly anywhere standard text input is accepted.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ftg-card pg-ftg-sec2-card\">\r\n                    <span class=\"pg-ftg-emoji\">\ud83d\ude80<\/span>\r\n                    <div class=\"pg-ftg-title\">Step 6: Ignite Engagement<\/div>\r\n                    <p class=\"pg-ftg-desc\">Hit post and watch your engagement spike. Text that breaks the mold naturally draws the eye and stops users from instantly scrolling past.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 3 -->\r\n    <section class=\"pg-ftg-section pg-ftg-sec3\">\r\n        <div class=\"pg-ftg-wrap\">\r\n            <h2 class=\"pg-ftg-heading\">Best Places to Use <span class=\"pg-ftg-kw\">Fire Text Generator<\/span> Results?<\/h2>\r\n            <p class=\"pg-ftg-sub\">Flaming text isn't for everything\u2014it\u2019s for when you need maximum attention. Here are the absolute best places to drop your newly generated fiery creations.<\/p>\r\n            <div class=\"pg-ftg-grid\">\r\n                <div class=\"pg-ftg-card pg-ftg-sec3-card\">\r\n                    <div class=\"pg-ftg-icon\" style=\"background:rgba(255,61,0,0.12);color:#ff3d00;\"><i class=\"fa-solid fa-gamepad\"><\/i><\/div>\r\n                    <div class=\"pg-ftg-title\">Gaming Usernames & Clans<\/div>\r\n                    <p class=\"pg-ftg-desc\">Intimidate the lobby before the match even begins. Fire text is perfect for FPS clan names, MOBA handles, and RPG character titles that need an aggressive edge.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ftg-card pg-ftg-sec3-card\">\r\n                    <div class=\"pg-ftg-icon\" style=\"background:rgba(88,101,242,0.12);color:#5865f2;\"><i class=\"fa-brands fa-discord\"><\/i><\/div>\r\n                    <div class=\"pg-ftg-title\">Discord Roles & Statuses<\/div>\r\n                    <p class=\"pg-ftg-desc\">Make your server's Admin or VIP roles stand out, or use burning text in your personal status to show you\u2019re grinding, live on stream, or bringing the heat.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ftg-card pg-ftg-sec3-card\">\r\n                    <div class=\"pg-ftg-icon\" style=\"background:rgba(255,0,0,0.12);color:#ff0000;\"><i class=\"fa-brands fa-youtube\"><\/i><\/div>\r\n                    <div class=\"pg-ftg-title\">YouTube Titles & Bios<\/div>\r\n                    <p class=\"pg-ftg-desc\">Grabbing attention is everything. Use fiery text in your video descriptions, channel name, or thumbnail copy to match high-energy, hype-driven content.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ftg-card pg-ftg-sec3-card\">\r\n                    <div class=\"pg-ftg-icon\" style=\"background:rgba(255,145,0,0.12);color:#ff9100;\"><i class=\"fa-solid fa-ticket\"><\/i><\/div>\r\n                    <div class=\"pg-ftg-title\">Product Drops & Promos<\/div>\r\n                    <p class=\"pg-ftg-desc\">Announcing a flash sale, new streetwear drop, or limited-time event? Burning text creates instant visual urgency and screams \"hot new release.\"<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ftg-card pg-ftg-sec3-card\">\r\n                    <div class=\"pg-ftg-icon\" style=\"background:rgba(213,0,0,0.12);color:#d50000;\"><i class=\"fa-solid fa-music\"><\/i><\/div>\r\n                    <div class=\"pg-ftg-title\">Rapper & Artist Bios<\/div>\r\n                    <p class=\"pg-ftg-desc\">Perfect for SoundCloud artists, beatmakers, and musicians wanting to reflect the aggressive energy of their latest track or mixtape release right in their bio.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ftg-card pg-ftg-sec3-card\">\r\n                    <div class=\"pg-ftg-icon\" style=\"background:rgba(255,82,82,0.12);color:#ff5252;\"><i class=\"fa-solid fa-comment-dots\"><\/i><\/div>\r\n                    <div class=\"pg-ftg-title\">Hype Comments<\/div>\r\n                    <p class=\"pg-ftg-desc\">Support your favorite creators by leaving comments that visually stand out. A fiery text reply is guaranteed to get pinned or noticed by the community.<\/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            --ftg-primary: #ff3d00;\r\n            --ftg-grad: linear-gradient(135deg, #ff0000, #ff6a00, #ffb300);\r\n            --ftg-shadow: 0 12px 30px rgba(255, 61, 0, 0.18);\r\n            --ftg-ease: cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            --ftg-speed: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            --ftg-ff: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\r\n        }\r\n\r\n        .pg-ftg-section {\r\n            width: 100%;\r\n            padding: clamp(48px, 8vw, 96px) 20px;\r\n            position: relative;\r\n            font-family: var(--ftg-ff);\r\n            color: #0a0a0a;\r\n            line-height: 1.6;\r\n            -webkit-font-smoothing: antialiased;\r\n        }\r\n\r\n        .pg-ftg-wrap {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        .pg-ftg-heading {\r\n            font-family: var(--ftg-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-ftg-kw {\r\n            color: #000000;\r\n            position: relative;\r\n        }\r\n\r\n        .pg-ftg-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(--ftg-grad);\r\n            border-radius: 3px;\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s var(--ftg-ease);\r\n        }\r\n\r\n        .pg-ftg-section:hover .pg-ftg-kw::after {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-ftg-sub {\r\n            font-family: var(--ftg-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-ftg-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-ftg-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(--ftg-speed);\r\n            border: 1.5px solid #e0e0e8;\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n\r\n        .pg-ftg-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(--ftg-grad);\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s var(--ftg-ease);\r\n            z-index: 4;\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-ftg-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(255,61,0,0.10) 0%, rgba(255,179,0,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-ftg-card:hover::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-ftg-card.pg-ftg-down {\r\n            transform: translateY(-1px) scale(0.985) !important;\r\n        }\r\n\r\n        .pg-ftg-card.pg-ftg-down::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-ftg-card.pg-ftg-glow::after {\r\n            width: 320px;\r\n            height: 320px;\r\n            opacity: 1;\r\n        }\r\n\r\n        .pg-ftg-card.pg-ftg-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-ftg-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(--ftg-speed);\r\n            position: relative;\r\n            z-index: 3;\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .pg-ftg-card:hover .pg-ftg-icon {\r\n            transform: scale(1.12) rotate(-4deg);\r\n        }\r\n\r\n        .pg-ftg-card.pg-ftg-down .pg-ftg-icon {\r\n            transform: scale(1.04) rotate(0deg);\r\n        }\r\n\r\n        \/* === EMOJI === *\/\r\n        .pg-ftg-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(--ftg-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-ftg-card:hover .pg-ftg-emoji {\r\n            transform: scale(1.22) rotate(-6deg);\r\n        }\r\n\r\n        .pg-ftg-card.pg-ftg-down .pg-ftg-emoji {\r\n            transform: scale(1.08) rotate(0deg);\r\n        }\r\n\r\n        \/* === TITLE === *\/\r\n        .pg-ftg-title {\r\n            font-family: var(--ftg-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-ftg-desc {\r\n            font-family: var(--ftg-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-ftg-sec1 {\r\n            background: #ffffff;\r\n        }\r\n\r\n        .pg-ftg-sec1 .pg-ftg-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-ftg-sec1 .pg-ftg-card:hover {\r\n            border-color: var(--ftg-primary);\r\n            box-shadow: var(--ftg-shadow);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        \/* ==============================\r\n           SECTION 2 \u2014 requested purple gradient bg \/ white cards\r\n           ============================== *\/\r\n        .pg-ftg-sec2 {\r\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        }\r\n\r\n        .pg-ftg-sec2 .pg-ftg-heading.pg-ftg-sec2-heading {\r\n            color: #ffffff;\r\n        }\r\n\r\n        .pg-ftg-sec2 .pg-ftg-kw.pg-ftg-sec2-kw {\r\n            color: #ffffff;\r\n        }\r\n\r\n        .pg-ftg-sec2 .pg-ftg-kw.pg-ftg-sec2-kw::after {\r\n            background: linear-gradient(90deg, #ff0000, #ffb300, #ffffff);\r\n        }\r\n\r\n        .pg-ftg-sec2 .pg-ftg-sub.pg-ftg-sec2-sub {\r\n            color: rgba(255,255,255,0.9);\r\n        }\r\n\r\n        .pg-ftg-sec2 .pg-ftg-card.pg-ftg-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-ftg-sec2 .pg-ftg-card.pg-ftg-sec2-card::before {\r\n            background: linear-gradient(90deg, #667eea, #764ba2, #ff3d00);\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-ftg-sec2 .pg-ftg-card.pg-ftg-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-ftg-sec2 .pg-ftg-card.pg-ftg-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-ftg-sec2 .pg-ftg-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-ftg-sec3 {\r\n            background: #ffffff;\r\n        }\r\n\r\n        .pg-ftg-sec3 .pg-ftg-card.pg-ftg-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-ftg-sec3 .pg-ftg-card.pg-ftg-sec3-card::before {\r\n            background: var(--ftg-grad);\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-ftg-sec3 .pg-ftg-card.pg-ftg-sec3-card:hover {\r\n            border-color: var(--ftg-primary);\r\n            box-shadow: var(--ftg-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-ftg-grid {\r\n                grid-template-columns: repeat(2, 1fr);\r\n                gap: 16px;\r\n            }\r\n            .pg-ftg-section {\r\n                padding: clamp(36px, 6vw, 64px) 16px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 540px) {\r\n            .pg-ftg-grid {\r\n                grid-template-columns: 1fr;\r\n                gap: 14px;\r\n            }\r\n            .pg-ftg-card {\r\n                padding: 22px;\r\n            }\r\n            .pg-ftg-sub {\r\n                margin-bottom: 28px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 360px) {\r\n            .pg-ftg-section {\r\n                padding: 32px 12px;\r\n            }\r\n            .pg-ftg-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-ftg-card');\r\n        cards.forEach(function(card) {\r\n            function glow(el) {\r\n                el.classList.remove('pg-ftg-glow', 'pg-ftg-glow-out');\r\n                void el.offsetWidth;\r\n                el.classList.add('pg-ftg-glow');\r\n                setTimeout(function() {\r\n                    el.classList.add('pg-ftg-glow-out');\r\n                }, 300);\r\n                setTimeout(function() {\r\n                    el.classList.remove('pg-ftg-glow', 'pg-ftg-glow-out');\r\n                }, 700);\r\n            }\r\n            card.addEventListener('mousedown', function() {\r\n                card.classList.add('pg-ftg-down');\r\n            });\r\n            card.addEventListener('mouseup', function() {\r\n                setTimeout(function() {\r\n                    card.classList.remove('pg-ftg-down');\r\n                }, 120);\r\n                glow(card);\r\n            });\r\n            card.addEventListener('mouseleave', function() {\r\n                card.classList.remove('pg-ftg-down', 'pg-ftg-glow', 'pg-ftg-glow-out');\r\n            });\r\n            card.addEventListener('touchstart', function() {\r\n                card.classList.add('pg-ftg-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-ftg-down');\r\n                }, 150);\r\n            });\r\n            card.addEventListener('touchcancel', function() {\r\n                card.classList.remove('pg-ftg-down', 'pg-ftg-glow', 'pg-ftg-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-526","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>Generador de texto de fuego: enci\u00e9ndelo al instante.<\/title>\n<meta name=\"description\" content=\"Crea textos con efecto de fuego con nuestro generador de texto gratuito. A\u00f1ade efectos de llamas a cualquier texto: copia y pega en segundos.\" \/>\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\/es\/fire-text-generator\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Fire Text Generator \u2013 Ignite Instantly\" \/>\n<meta property=\"og:description\" content=\"Create blazing fire text with our free Fire Text Generator. Add hot, flame-style effects to any text \u2014 copy &amp; paste in seconds.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/onlinetexteditor.io\/fire-text-generator\/\" \/>\n<meta property=\"og:site_name\" content=\"Online Text Editor\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-06T06:57:05+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\\\/fire-text-generator\\\/\",\"url\":\"https:\\\/\\\/onlinetexteditor.io\\\/fire-text-generator\\\/\",\"name\":\"Fire Text Generator \u2013 Ignite Instantly\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/#website\"},\"datePublished\":\"2026-03-23T00:00:04+00:00\",\"dateModified\":\"2026-04-06T06:57:05+00:00\",\"description\":\"Create blazing fire text with our free Fire Text Generator. Add hot, flame-style effects to any text \u2014 copy & paste in seconds.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/fire-text-generator\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/onlinetexteditor.io\\\/fire-text-generator\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/fire-text-generator\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/onlinetexteditor.io\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Fire Text Generator \u2013 Ignite 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":"Generador de texto de fuego: enci\u00e9ndelo al instante.","description":"Crea textos con efecto de fuego con nuestro generador de texto gratuito. A\u00f1ade efectos de llamas a cualquier texto: copia y pega en segundos.","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\/es\/fire-text-generator\/","og_locale":"en_US","og_type":"article","og_title":"Fire Text Generator \u2013 Ignite Instantly","og_description":"Create blazing fire text with our free Fire Text Generator. Add hot, flame-style effects to any text \u2014 copy & paste in seconds.","og_url":"https:\/\/onlinetexteditor.io\/fire-text-generator\/","og_site_name":"Online Text Editor","article_modified_time":"2026-04-06T06:57:05+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/onlinetexteditor.io\/fire-text-generator\/","url":"https:\/\/onlinetexteditor.io\/fire-text-generator\/","name":"Fire Text Generator \u2013 Ignite Instantly","isPartOf":{"@id":"https:\/\/onlinetexteditor.io\/#website"},"datePublished":"2026-03-23T00:00:04+00:00","dateModified":"2026-04-06T06:57:05+00:00","description":"Create blazing fire text with our free Fire Text Generator. Add hot, flame-style effects to any text \u2014 copy & paste in seconds.","breadcrumb":{"@id":"https:\/\/onlinetexteditor.io\/fire-text-generator\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/onlinetexteditor.io\/fire-text-generator\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/onlinetexteditor.io\/fire-text-generator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/onlinetexteditor.io\/"},{"@type":"ListItem","position":2,"name":"Fire Text Generator \u2013 Ignite 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\/es\/wp-json\/wp\/v2\/pages\/526","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/onlinetexteditor.io\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/onlinetexteditor.io\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/onlinetexteditor.io\/es\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/onlinetexteditor.io\/es\/wp-json\/wp\/v2\/comments?post=526"}],"version-history":[{"count":3,"href":"https:\/\/onlinetexteditor.io\/es\/wp-json\/wp\/v2\/pages\/526\/revisions"}],"predecessor-version":[{"id":529,"href":"https:\/\/onlinetexteditor.io\/es\/wp-json\/wp\/v2\/pages\/526\/revisions\/529"}],"wp:attachment":[{"href":"https:\/\/onlinetexteditor.io\/es\/wp-json\/wp\/v2\/media?parent=526"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}