/* Custom Tailwind Color Mappings for Zero-CLS static Tailwind */
        .text-\[var\(--prg-base\)\] { color: var(--prg-base) !important; }
        .text-\[var\(--prg-base\)\]\/40 { color: rgba(232,160,200, 0.4) !important; }
        .text-\[var\(--prg-base\)\]\/60 { color: rgba(232,160,200, 0.6) !important; }
        .text-\[var\(--prg-light\)\] { color: var(--prg-light) !important; }
        .text-\[var\(--prg-light\)\]\/50 { color: rgba(199, 214, 245, 0.5) !important; }
        .text-\[var\(--prg-light\)\]\/60 { color: rgba(199, 214, 245, 0.6) !important; }
        .text-\[var\(--prg-light\)\]\/70 { color: rgba(199, 214, 245, 0.7) !important; }
        .text-\[var\(--prg-light\)\]\/80 { color: rgba(199, 214, 245, 0.8) !important; }
        .text-\[var\(--prg-light\)\]\/90 { color: rgba(199, 214, 245, 0.9) !important; }
        .text-\[var\(--prg-dark\)\]\/60 { color: rgba(157,23,77, 0.6) !important; }
        .text-prg-light\/50 { color: rgba(199, 214, 245, 0.5) !important; }
        .text-holy-gold { color: #d4af37 !important; }
        .text-holy-void { color: #0a050c !important; }
        .text-holy-rosegold { color: #e8a0c8 !important; }
        .text-holy-darkrg { color: #9d174d !important; }
        .text-holy-supreme { color: #d4af37 !important; }
        .text-holy-ivory { color: #fdf2f8 !important; }

        .bg-\[var\(--prg-base\)\]\/5 { background-color: rgba(232,160,200, 0.05) !important; }
        .bg-\[var\(--prg-base\)\]\/10 { background-color: rgba(232,160,200, 0.1) !important; }
        .bg-\[var\(--prg-deep\)\] { background-color: var(--prg-deep) !important; }
        .bg-prg-void { background-color: var(--bg-void) !important; }
        .bg-holy-gold { background-color: #d4af37 !important; }
        .bg-holy-void { background-color: #0a050c !important; }
        .bg-holy-rosegold { background-color: #e8a0c8 !important; }
        .bg-holy-darkrg { background-color: #9d174d !important; }
        .bg-holy-supreme { background-color: #d4af37 !important; }
        .bg-holy-ivory { background-color: #fdf2f8 !important; }

        .border-\[var\(--prg-base\)\]\/10 { border-color: rgba(232,160,200, 0.1) !important; }
        .border-\[var\(--prg-base\)\]\/20 { border-color: rgba(232,160,200, 0.2) !important; }
        .border-\[var\(--prg-base\)\]\/30 { border-color: rgba(232,160,200, 0.3) !important; }
        .border-\[var\(--prg-base\)\]\/40 { border-color: rgba(232,160,200, 0.4) !important; }
        .border-\[var\(--prg-dark\)\]\/20 { border-color: rgba(157,23,77, 0.2) !important; }
        .border-\[var\(--prg-dark\)\]\/30 { border-color: rgba(157,23,77, 0.3) !important; }
        .border-\[var\(--prg-light\)\]\/20 { border-color: rgba(199, 214, 245, 0.2) !important; }
        .border-\[var\(--prg-light\)\]\/30 { border-color: rgba(199, 214, 245, 0.3) !important; }
        .border-\[var\(--prg-light\)\]\/50 { border-color: rgba(199, 214, 245, 0.5) !important; }
        .border-holy-gold { border-color: #d4af37 !important; }
        .border-holy-void { border-color: #0a050c !important; }
        .border-holy-rosegold { border-color: #e8a0c8 !important; }
        .border-holy-darkrg { border-color: #9d174d !important; }
        .border-holy-supreme { border-color: #d4af37 !important; }
        .border-holy-ivory { border-color: #fdf2f8 !important; }

        .from-\[var\(--prg-dark\)\] { --tw-gradient-from: var(--prg-dark) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(157,23,77, 0)) !important; }
        .via-\[var\(--prg-base\)\] { --tw-gradient-stops: var(--tw-gradient-from), var(--prg-base), var(--tw-gradient-to, rgba(232,160,200, 0)) !important; }
        .to-\[var\(--prg-dark\)\] { --tw-gradient-to: var(--prg-dark) !important; }

        .from-\[var\(--prg-base\)\]\/15 { --tw-gradient-from: rgba(232,160,200, 0.15) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(232,160,200, 0)) !important; }
        .bg-\[radial-gradient\(ellipse_at_center\,_var\(--tw-gradient-stops\)\)\] { background-image: radial-gradient(ellipse at center, var(--tw-gradient-stops)) !important; }

        .font-cinzel { font-family: 'Cinzel Decorative', serif !important; }
        .font-tc { font-family: 'Noto Serif TC', serif !important; }
        .font-holy { font-family: 'Cormorant Garamond', serif !important; }

        .tracking-\[0\.15em\] { letter-spacing: 0.15em !important; }
        .tracking-\[0\.2em\] { letter-spacing: 0.2em !important; }
        .tracking-\[0\.25em\] { letter-spacing: 0.25em !important; }
        .tracking-\[0\.3em\] { letter-spacing: 0.3em !important; }
        .tracking-\[0\.4em\] { letter-spacing: 0.4em !important; }
        .tracking-\[0\.5em\] { letter-spacing: 0.5em !important; }
        .tracking-\[0\.6em\] { letter-spacing: 0.6em !important; }

        .text-\[10px\] { font-size: 10px !important; }
        .text-\[9px\] { font-size: 9px !important; }
        .text-shadow-lg { text-shadow: 0 4px 12px rgba(0, 0, 0, 0.8), 0 0 20px rgba(232,160,200, 0.4) !important; }
        .text-shadow-\[0_0_15px_rgba\(200\,144\,167\,0\.5\)\] { text-shadow: 0 0 15px rgba(232,160,200, 0.5) !important; }

        .via-holy-gold { --tw-gradient-stops: var(--tw-gradient-from, transparent), #d4af37, var(--tw-gradient-to, transparent) !important; }

        /* 🎮 FF Resonance: pixel font for LV / XP readouts */
        #dm-lvl, #dm-xp { font-family: 'Press Start 2P', 'Noto Serif TC', monospace; }

        /* 🌌 史詩黑曜玫瑰金美學 (Classic Obsidian Rose Gold restore) */
        :root {
            --prg-light: #fce7f3;
            --prg-base: #e8a0c8;
            --prg-dark: #9d174d;
            --prg-deep: #4a044e;
            --bg-void: #0a050c;
            --text-light: #fdf2f8;
            --text-muted: #f0abda;
            --border-prg: rgba(232,160,200, 0.35);
        }

        body { 
            background-color: var(--bg-void); 
            color: var(--text-light); 
            background-image: 
                radial-gradient(circle at 50% 0%, rgba(157,23,77, 0.22) 0%, transparent 60%),
                radial-gradient(circle at 0% 100%, rgba(232,160,200, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 100% 100%, rgba(74,4,78, 0.2) 0%, transparent 50%);
            min-height: 100vh;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
        }

        /* 🌌 神聖光束 (God Rays) */
        .god-rays-container {
            position: fixed; top: -10%; left: -20%; width: 140%; height: 120%;
            z-index: 0; pointer-events: none; opacity: 0.4;
            display: flex; justify-content: center; gap: 5vw;
            transform: rotate(-15deg);
        }
        .god-ray {
            width: 15vw; height: 100%;
            background: linear-gradient(180deg, rgba(232,160,200, 0.3) 0%, rgba(157,23,77, 0.1) 50%, transparent 100%);
            filter: blur(50px);
            animation: raySway 15s infinite alternate ease-in-out;
            mix-blend-mode: screen;
        }
        .god-ray:nth-child(2) { width: 25vw; animation-delay: -5s; opacity: 0.6; }
        .god-ray:nth-child(3) { width: 10vw; animation-delay: -10s; }
        @keyframes raySway { 0% { transform: translateX(-3%) scale(1); opacity: 0.3; } 100% { transform: translateX(3%) scale(1.1); opacity: 0.7; } }

        #divine-dust { position: fixed; inset: 0; z-index: 1; pointer-events: none; }

        /* 導航列設計 (對齊 English OS) */
        .nav-pill-container { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 50px; padding: 4px; display: inline-flex; align-items: center; gap: 4px; }
        .nav-pill { padding: 8px 24px; border-radius: 50px; font-family: 'Cinzel Decorative', serif; font-size: 0.65rem; font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(232,160,200, 0.5); transition: 0.3s; text-decoration: none; display: flex; align-items: center; gap: 8px;}
        .nav-pill.active { background: rgba(232,160,200,0.15); color: var(--prg-base); box-shadow: inset 0 0 10px rgba(232,160,200,0.1); border: 1px solid rgba(232,160,200,0.3); }
        .nav-pill:hover:not(.active) { color: var(--prg-base); background: rgba(255,255,255,0.05); }

        /* Wave 2: delete local .glass-panel stack — core .ff-window owns the skin */
        .ff-panel-host {
            position: relative;
            z-index: 10;
            padding: 1.5rem;
        }
        @media (min-width: 768px) {
            .ff-panel-host { padding: 3rem 4rem; }
        }
        /* Party frames for dual lenses */
        .ff-party-frame {
            position: relative;
            padding-top: 0.5rem;
        }
        .ff-party-crystal {
            display: inline-block;
            width: 14px; height: 14px;
            border-radius: 2px;
            transform: rotate(45deg);
            margin-right: 0.6rem;
            vertical-align: middle;
        }
        .ff-party-tag {
            font-family: 'Press Start 2P', monospace;
            font-size: 0.5rem;
            letter-spacing: 0.12em;
            color: #d4af37;
            text-transform: uppercase;
        }
        /* Victory banner */
        #dm-victory-banner {
            display: none;
            text-align: center;
            padding: 1rem 1.5rem;
            margin: 0 auto 1.5rem;
            max-width: 28rem;
        }
        #dm-victory-banner.show { display: block; }
        #dm-victory-banner .ff-victory-label {
            font-family: 'Press Start 2P', monospace;
            font-size: 0.7rem;
            letter-spacing: 0.14em;
            color: #d4af37;
            text-shadow: 0 0 12px rgba(255,210,87,0.6);
        }
        /* Socratic FF dialogue */
        #socratic-chat-arena.ff-dialogue {
            padding: 1.25rem 1.5rem;
        }
        #socratic-dialogue-stream.ff-scroll {
            max-height: 320px;
        }
        .ff-dialogue-line {
            margin-bottom: 0.85rem;
            padding: 0.85rem 1rem;
            line-height: 1.75;
            font-size: 0.85rem;
        }
        .ff-dialogue-line .ff-speaker {
            font-family: 'Press Start 2P', monospace;
            font-size: 0.45rem;
            letter-spacing: 0.14em;
            color: #e8a0c8;
            text-transform: uppercase;
            margin-bottom: 0.4rem;
            display: block;
        }
        @media (prefers-reduced-motion: reduce) {
            .reveal, .god-ray, .ff-window, .ff-window-pixel,
            .ff-window.reveal, .ff-window-pixel.reveal {
                animation: none !important;
                opacity: 1 !important;
                filter: none !important;
                transform: none !important;
            }
        }

        /* 史詩紫玫瑰金漸層文字 */
        .text-gradient-grand {
            background: linear-gradient(135deg, var(--prg-light) 0%, var(--prg-base) 40%, var(--prg-dark) 100%);
            background-size: 200% auto;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: goldShine 6s linear infinite;
            filter: drop-shadow(0 10px 20px rgba(232,160,200, 0.2));
        }
        @keyframes goldShine { to { background-position: 200% center; } }

        /* 矩陣選擇按鈕 */
        .matrix-btn {
            padding: 8px 16px; border: 1px solid rgba(232,160,200, 0.3); border-radius: 50px;
            font-size: 0.75rem; font-weight: 700; color: rgba(238, 242, 255, 0.7);
            cursor: pointer; transition: 0.3s; background: rgba(0,0,0,0.5); letter-spacing: 0.1em;
        }
        .matrix-btn.c-btn:hover { border-color: var(--prg-base); color: var(--prg-light); background: rgba(232,160,200, 0.1); }
        .matrix-btn.c-btn.active { border-color: var(--prg-light); background: var(--prg-base); color: #0a050c; box-shadow: 0 0 15px rgba(232,160,200, 0.4); }
        
        .matrix-btn.b-btn:hover { border-color: var(--prg-dark); color: var(--prg-light); background: rgba(157,23,77, 0.1); }
        .matrix-btn.b-btn.active { border-color: var(--prg-light); background: var(--prg-dark); color: #fff; box-shadow: 0 0 15px rgba(157,23,77, 0.5); }

        /* 奧義輸入框 */
        .oracle-input {
            width: 100%; background: rgba(232,160,200, 0.03); border: 1px solid rgba(232,160,200, 0.25);
            border-radius: 16px; padding: 24px; color: var(--text-light); font-size: 1.05rem;
            outline: none; transition: all 0.5s ease; text-align: left; letter-spacing: 0.1em;
            box-shadow: inset 0 0 20px rgba(0,0,0,0.8); line-height: 1.8;
        }
        @media(min-width: 768px) {
            .oracle-input { font-size: 1.15rem; text-align: center; }
        }
        .oracle-input:focus { border-color: var(--prg-base); box-shadow: 0 0 50px rgba(232,160,200, 0.2), inset 0 0 30px rgba(232,160,200, 0.08); background: rgba(232,160,200, 0.05); transform: scale(1.01); }
        .oracle-input::placeholder { color: rgba(199, 214, 245, 0.25); }

        /* 神聖雙修卡片 */
        .dual-card {
            flex: 1; padding: 0 0 40px 0; border-radius: 10px; position: relative; overflow: hidden;
            background: linear-gradient(180deg, rgba(74,4,78, 0.95) 0%, rgba(10,5,12, 0.98) 100%);
            transition: 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
            border-top: 4px solid transparent;
        }
        .card-christian { border-top-color: var(--prg-base); }
        .card-buddhist { border-top-color: var(--prg-dark); }
        .dual-card:hover { transform: translateY(-10px); box-shadow: 0 30px 60px rgba(0,0,0,0.9), 0 0 50px rgba(232,160,200, 0.15); }

        /* 巨型莊嚴浮水印 */
        .watermark-icon {
            position: absolute; bottom: 5%; right: 5%; font-size: 14rem; opacity: 0.04; z-index: 1; pointer-events: none;
            background: linear-gradient(135deg, var(--prg-light), var(--prg-dark));
            -webkit-background-clip: text; background-clip: text; color: transparent;
            animation: slowRotate 35s linear infinite;
        }
        @keyframes slowRotate { to { transform: rotate(360deg); } }
        .card-content { position: relative; z-index: 10; padding: 0 25px; }
        @media(min-width: 768px) { .card-content { padding: 0 40px; } }

        /* 黃金降臨載入畫面 */
        .loader-overlay { position: fixed; inset: 0; background: rgba(10,5,12, 0.98); z-index: 99999; display: none; flex-direction: column; align-items: center; justify-content: center; backdrop-filter: blur(30px); opacity: 0; transition: opacity 0.5s ease; }
        .loader-overlay.show { display: flex; opacity: 1; }
        .loader-icons { position: relative; width: 180px; height: 180px; display: flex; align-items: center; justify-content: center; margin-bottom: 50px; }
        .wheel-spin { animation: spinSlow 10s linear infinite; position: absolute; font-size: 8rem; color: var(--prg-dark); opacity: 0.5; filter: drop-shadow(0 0 30px rgba(157,23,77, 0.5)); }
        .cross-glow { position: absolute; font-size: 4.5rem; color: var(--prg-base); filter: drop-shadow(0 0 40px rgba(232,160,200, 0.9)); animation: pulseGlow 2s infinite alternate; }
        @keyframes spinSlow { to { transform: rotate(360deg); } }
        @keyframes pulseGlow { 0% { transform: scale(0.95); opacity: 0.8; } 100% { transform: scale(1.05); opacity: 1; filter: drop-shadow(0 0 60px rgba(232,160,200, 1)); } }

        /* Reveal: animate FROM blur — never leave filter:blur as static end-state.
           Core .ff-window also sets animation; win with .reveal so blur always clears. */
        .reveal {
            opacity: 1;
            transform: none;
            filter: none;
            animation: divineReveal 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
        }
        @keyframes divineReveal {
            from { opacity: 0; transform: translateY(28px); filter: blur(8px); }
            to { opacity: 1; transform: translateY(0); filter: blur(0); }
        }
        .ff-window.reveal, .ff-window-pixel.reveal {
            animation: divineReveal 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
            filter: none;
            opacity: 1;
        }
        #userQuestion.oracle-input {
            position: relative;
            z-index: 20;
            pointer-events: auto !important;
            user-select: text !important;
            -webkit-user-select: text !important;
        }
        
        .glowing-btn {
            background: linear-gradient(180deg, #fce7f3 0%, #d4af37 50%, #C9A227 100%);
            background-size: 200% auto; color: #0a050c; transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
            box-shadow: 0 15px 40px rgba(255, 210, 87, 0.25); border: 1px solid #fce7f3;
        }
        .glowing-btn:hover:not(:disabled) { background-position: right center; box-shadow: 0 20px 60px rgba(255, 210, 87, 0.5); transform: scale(1.02) translateY(-2px); letter-spacing: 0.4em; }
        .glowing-btn:disabled { filter: grayscale(0.8); cursor: not-allowed; opacity: 0.7; }

        /* 實體神諭卡設計 */
        .oracle-card-physical {
            background: linear-gradient(180deg, #4a044e 0%, #1a0a18 100%);
            border: 2px solid var(--prg-base);
            box-shadow: 0 40px 80px rgba(0,0,0,0.9), inset 0 0 60px rgba(232,160,200, 0.1);
            border-radius: 10px; position: relative; overflow: hidden;
        }
        .oracle-card-physical::before {
            content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
            background: radial-gradient(circle, rgba(232,160,200,0.05) 0%, transparent 60%); pointer-events: none;
        }

        /* 🔒 自定義彈窗 */
        .custom-confirm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(15px); z-index: 200000; display: none; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity 0.3s ease; }
        .custom-confirm-overlay.show { display: flex; opacity: 1; }
        .custom-confirm-panel { background: linear-gradient(180deg, #4a044e 0%, #1a0a18 100%); border: 2px solid #e8a0c8; border-radius: 10px; max-width: 450px; width: 100%; padding: 40px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.9), inset 0 0 0 1px rgba(232,240,255,0.25); transform: scale(0.95); transition: transform 0.3s ease; }
        .custom-confirm-overlay.show .custom-confirm-panel { transform: scale(1); }

        /* 付費牆 */
        #paywall-modal { position: fixed; inset: 0; background: rgba(10,5,12, 0.97); z-index: 101000; display: none; align-items: center; justify-content: center; backdrop-filter: blur(30px); opacity: 0; transition: opacity 0.6s ease; padding: 20px; }
        #paywall-modal.show { display: flex; opacity: 1; }
        .paywall-panel { background: rgba(16, 9, 14, 0.99); border: 1px solid var(--border-prg); box-shadow: 0 50px 120px rgba(0,0,0,1), 0 0 80px rgba(232,160,200, 0.15), inset 0 0 0 1px rgba(232, 240, 255, 0.25); border-radius: 10px; padding: 45px; max-width: 600px; width: 100%; position: relative; text-align: center; transform: scale(0.9) translateY(20px); transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
        #paywall-modal.show .paywall-panel { transform: scale(1) translateY(0); }

        .custom-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(232,160,200, 0.3); border-radius: 10px; }

        /* Mobile Viewport Style Overrides */
        @media (max-width: 1023px) {
            main { margin-top: 4rem; }
        }
        @media (max-width: 768px) {
            main { padding-top: 2rem; padding-bottom: 3rem; }
            h1 { font-size: 3.5rem !important; }
        }
        @media (max-width: 480px) {
            h1 { font-size: 2.5rem !important; }
            .oracle-card-physical { padding: 24px 20px !important; border-radius: 10px; }
            .paywall-panel { padding: 24px 20px !important; border-radius: 10px; }
            .oracle-input { padding: 16px; font-size: 0.95rem; }
            #inputArea { padding: 24px 16px !important; }
        }
        @media (max-width: 360px) {
            h1 { font-size: 2.2rem !important; }
            .oracle-card-physical { padding: 20px 16px !important; }
            #inputArea { padding: 16px 12px !important; }
        }
    
        /* Per-OS theme: Sacred Twin Golden */
        :root {
            --rg-light: #fce7f3;
            --rg-base: #e8a0c8;
            --rg-dark: #9d174d;
            --rg-deep: #4a044e;
            --rg-gold: #d4af37;
            --bg-obsidian: #0a050c;
            --bg-panel: rgba(74,4,78,0.88);
            --bg-void: #0a050c;
            --text-light: #fdf2f8;
            --text-muted: #f0abda;
            --border-rg: rgba(232,160,200,0.35);
            --glow-rg: rgba(232,160,200,0.45);
            --prg-light: #fce7f3;
            --prg-base: #e8a0c8;
            --prg-dark: #9d174d;
            --prg-deep: #4a044e;
            --rosegold: #e8a0c8;
            --gold: #d4af37;
            --realm-accent: #e8a0c8;
            --realm-gold: #d4af37;
            --realm-void: #0a050c;
        }

    
        /* realm-chrome-doublemajor */
        body[data-realm="doublemajor"] .focus-card,
        body[data-realm="doublemajor"] .inquiry-box,
        body[data-realm="doublemajor"] .glass-panel,
        body[data-realm="doublemajor"] .ff-window,
        body[data-realm="doublemajor"] .intel-box {
          border-color: rgba(232,160,200,0.42) !important;
        }
        body[data-realm="doublemajor"] .nav-pill.active,
        body[data-realm="doublemajor"] .mod-btn.active {
          background: linear-gradient(135deg, #9d174d, #e8a0c8) !important;
          color: #0a050c !important;
          box-shadow: 0 0 22px rgba(232,160,200,0.45) !important;
        }
        body[data-realm="doublemajor"] ::selection {
          background: rgba(232,160,200,0.45);
          color: #0a050c;
        }

    
    /* fleet-responsive-local + Double Major layout */
    @media (max-width: 640px) {
      body { overscroll-behavior-y: contain; }
      .app-container, .main { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important; }
    }

    /* Double Major · responsive forge panel (utmost phone → desktop) */
    main {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      padding-left: max(12px, env(safe-area-inset-left, 0px));
      padding-right: max(12px, env(safe-area-inset-right, 0px));
      padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    }
    #inputArea.ff-panel-host {
      width: min(100%, 64rem);
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
      box-sizing: border-box;
    }
    .dm-anchor-grid {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 1rem !important;
      width: 100%;
    }
    @media (min-width: 768px) {
      .dm-anchor-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 1.5rem !important;
      }
    }
    #c-anchors-container,
    #b-anchors-container {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }
    .matrix-btn {
      min-height: 44px;
      padding: 0.45rem 0.75rem;
      font-size: clamp(0.65rem, 2.5vw, 0.8rem);
      border-radius: 999px;
      border: 1px solid rgba(232,160,200,0.3);
      background: rgba(0,0,0,0.35);
      color: var(--prg-light);
      cursor: pointer;
      transition: border-color 0.2s, background 0.2s, transform 0.15s;
    }
    .matrix-btn:hover, .matrix-btn.active {
      border-color: var(--prg-base);
      background: rgba(232,160,200,0.15);
      color: #fff;
    }
    .matrix-btn:active { transform: scale(0.98); }
    #userQuestion, .oracle-input {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      min-height: 7rem;
      font-size: 16px !important; /* prevent iOS zoom */
    }
    #action-btn {
      width: 100%;
      min-height: 52px;
      touch-action: manipulation;
      pointer-events: auto !important;
      position: relative;
      z-index: 20;
    }
    #oracleResult {
      width: 100%;
      max-width: min(100%, 80rem);
      margin-left: auto;
      margin-right: auto;
      box-sizing: border-box;
    }
    #oracleResult .flex.flex-col.lg\\:flex-row,
    #oracleResult .dual-lenses {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }
    @media (min-width: 1024px) {
      #oracleResult .flex.flex-col.lg\\:flex-row {
        flex-direction: row;
      }
      #oracleResult .dual-card {
        flex: 1 1 0;
        min-width: 0;
      }
    }
    @media (max-width: 767px) {
      header.pt-32, header {
        padding-top: calc(5.5rem + env(safe-area-inset-top, 0px)) !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
      }
      #inputArea.ff-panel-host {
        padding: 1.25rem 1rem !important;
        margin-bottom: 2rem !important;
      }
      #inputArea .relative.mb-12 {
        margin-bottom: 1.5rem !important;
      }
      #inputArea .absolute.right-0.-top-8 {
        position: static !important;
        display: flex !important;
        justify-content: flex-end !important;
        margin-bottom: 0.5rem !important;
      }
      .dual-card .h-56 {
        height: 9rem !important;
      }
      .glowing-btn {
        font-size: 0.8rem !important;
        letter-spacing: 0.12em !important;
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
      }
    }
    @media (max-width: 419px) {
      h1.text-5xl, h1 {
        font-size: 1.75rem !important;
        letter-spacing: 0.12em !important;
      }
      .matrix-btn {
        font-size: 0.62rem !important;
        padding: 0.4rem 0.55rem !important;
      }
    }

    .dm-mode-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
      justify-content: center;
      margin: 0 auto 1.4rem;
      max-width: 44rem;
    }
    .dm-mode-tab {
      min-height: 44px;
      padding: 0.5rem 0.9rem;
      border: 1px solid rgba(232,160,200,0.32);
      background: rgba(0,0,0,0.35);
      color: #fce7f3;
      border-radius: 999px;
      font-size: 0.72rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      cursor: pointer;
    }
    .dm-mode-tab em {
      font-style: normal;
      margin-left: 0.35rem;
      color: #fbbf24;
      font-weight: 800;
    }
    .dm-mode-tab.is-on {
      background: rgba(232,160,200,0.18);
      border-color: #e8a0c8;
      color: #fff;
    }
    .dm-cta-row {
      display: flex;
      flex-direction: column;
      gap: 0.65rem;
    }
    .dm-ghost-cta {
      min-height: 48px;
      border: 1px solid rgba(232,160,200,0.4);
      background: transparent;
      color: #fce7f3;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-size: 0.72rem;
      border-radius: 12px;
      cursor: pointer;
    }
    .dm-rd {
      background: #fffef8;
      color: #1c1917;
      font-family: "Noto Serif TC", Georgia, serif;
      border-radius: 0.4rem;
    }
    .dm-rd-banner {
      text-align: center;
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      padding: 0.85rem 1rem 0;
      color: #9d174d;
    }
    .dm-rd-body { padding: 1.05rem 1.2rem 1.6rem; }
    .dm-rd h2 { font-size: 1.35rem; line-height: 1.35; margin: 0.2rem 0 0.7rem; }
    .dm-rd h3 { font-size: 1.02rem; margin: 1.1rem 0 0.35rem; border-bottom: 1px solid #1c1917; padding-bottom: 0.2rem; }
    .dm-rd p { font-size: 0.96rem; line-height: 1.65; }
    .dm-rd-muted { opacity: 0.7; font-size: 0.84rem; }
    .dm-rd-axis { display: flex; align-items: center; gap: 0.55rem; margin: 0.35rem 0; }
    .dm-rd-axis b { flex: 0 0 7.4rem; font-size: 12px; }
    .dm-rd-bar { flex: 1; height: 8px; background: #e7e5e4; }
    .dm-rd-bar > i { display: block; height: 100%; background: #9d174d; }
    .dm-rd-axis em { flex: 0 0 3rem; font-style: normal; font-size: 12px; text-align: right; }
    .dm-rd-quote { border-left: 3px solid #9d174d; padding: 0.45rem 0.75rem; margin: 0.55rem 0; background: #f5f0e6; font-style: italic; }
    .dm-rd-lift { background: #1c1917; color: #fffef8; padding: 0.8rem 1rem; margin-top: 0.7rem; }
    .dm-rd-lift small { display: block; letter-spacing: 0.14em; text-transform: uppercase; font-size: 10px; opacity: 0.7; margin-bottom: 0.3rem; }
    .dm-rd-door { margin-top: 1.4rem; padding: 1rem; border: 2px solid #1c1917; }
    .dm-rd-cta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
    .dm-rd-max, .dm-rd-ghost { min-height: 46px; padding: 0.55rem 1rem; cursor: pointer; font: inherit; letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; }
    .dm-rd-max { background: #1c1917; color: #faf6f1; border: 0; font-weight: 800; }
    .dm-rd-ghost { background: transparent; border: 1px solid #1c1917; color: #1c1917; }
    #socratic-chamber[aria-disabled="true"] #socratic-challenges-grid button { cursor: not-allowed; }
    @media (max-width: 640px) {
      .dm-mode-tab { flex: 1 1 40%; }
      .dm-rd-axis b { flex-basis: 5.6rem; font-size: 11px; }
    }