:root {
            --bg-warm: #FBFAF7;
            --bg-secondary: #FBFAF7;
            --surface-main: rgba(255, 251, 244, 0.86);
            --surface-strong: rgba(255, 252, 247, 0.94);
            --surface-soft: rgba(255, 248, 238, 0.72);
            --surface-glass: rgba(255, 255, 255, 0.16);
            --surface-glass-strong: rgba(255, 255, 255, 0.24);
            --surface-border: rgba(183, 149, 96, 0.18);
            --surface-shadow: rgba(90, 64, 24, 0.12);
            --surface-shadow-strong: rgba(15, 23, 42, 0.11);
            --text-charcoal: #332819;
            --text-soft: #735b3d;
            --text-muted: #9c8562;
            --text-inverse: rgba(247, 249, 255, 0.94);
            --hero-start: rgba(7, 24, 48, 0.92);
            --hero-mid: #142d6e;
            --hero-end: #1a3580;
            --hero-glow: rgba(100, 150, 230, 0.15);
            --hero-accent: rgba(248, 215, 153, 0.18);
            --accent-blue: #2b56cf;
            --accent-blue-strong: #1d44b3;
            --accent-blue-soft: rgba(59, 104, 237, 0.16);
            --topical-reference-blue: #4F3FD2;
            --topical-reference-blue-strong: #4430C4;
            --accent-gold: #b88a4d;
            --accent-gold-soft: rgba(184, 138, 77, 0.16);
            --accent-morning: #C07A3D;
            --accent-evening: #4A5D8A;
            --paper-bg: #F6F1E7;
            --ivory: #FBF8F2;
            --text-main: #3A2E22;
            --text-muted-brown: #5C4835;
            --gold: #C49A58;
            --gold-deep: #A87330;
            --blue-date: #173B78;
            --divider-gold: rgba(180, 140, 80, 0.22);
            --premium-card-bg: rgba(255, 255, 255, 0.74);
            --premium-card-border: rgba(191, 155, 98, 0.22);
            --premium-card-shadow: 0 22px 60px rgba(80, 55, 20, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.65);
            --premium-quote-bg: rgba(250, 244, 235, 0.82);
            --devotion-reading-font-size: var(--shared-reading-font-size, calc(1rem * var(--bible-font-scale, 1)));
            --daily-reading-font-size: var(--devotion-reading-font-size);
            --devotion-reading-font-family: 'EB Garamond', 'Merriweather', Georgia, serif;
            --devotion-reading-font-weight: 300;
            --font-heading: 'Cormorant Garamond', serif;
            --font-body: 'EB Garamond', serif;
            --font-ui: 'Inter', sans-serif;
        }

        html.parchment-off {
            --bg-warm: #f4f4f1;
            --bg-secondary: #ffffff;
            --surface-main: rgba(255, 255, 255, 0.9);
            --surface-strong: rgba(255, 255, 255, 0.96);
            --surface-soft: rgba(255, 255, 255, 0.78);
            --surface-glass: rgba(255, 255, 255, 0.18);
            --surface-glass-strong: rgba(255, 255, 255, 0.28);
            --surface-border: rgba(148, 163, 184, 0.16);
            --surface-shadow: rgba(15, 23, 42, 0.08);
            --surface-shadow-strong: rgba(15, 23, 42, 0.12);
            --text-charcoal: #20263a;
            --text-soft: #59637e;
            --text-muted: #7b86a2;
            --accent-gold: #8f7655;
            --accent-gold-soft: rgba(143, 118, 85, 0.12);
        }

        html.dark-mode:not(.dark-mode-b) {
            --bg-warm: #18181b;
            --bg-secondary: #1d1d21;
            --surface-main: rgba(39, 39, 42, 0.82);
            --surface-strong: rgba(32, 32, 35, 0.94);
            --surface-soft: rgba(28, 28, 31, 0.8);
            --surface-glass: rgba(255, 255, 255, 0.06);
            --surface-glass-strong: rgba(255, 255, 255, 0.1);
            --surface-border: rgba(255, 255, 255, 0.08);
            --surface-shadow: rgba(0, 0, 0, 0.34);
            --surface-shadow-strong: rgba(0, 0, 0, 0.5);
            --text-charcoal: #e4e4e7;
            --text-soft: #d4d4d8;
            --text-muted: #a1a1aa;
            --text-inverse: rgba(245, 248, 255, 0.98);
            --hero-start: #131316;
            --hero-mid: #1a1a1e;
            --hero-end: #242429;
            --hero-glow: rgba(255, 255, 255, 0.06);
            --hero-accent: rgba(197, 160, 89, 0.14);
            --accent-blue: #5c4c31;
            --accent-blue-strong: #c5a059;
            --accent-blue-soft: rgba(197, 160, 89, 0.14);
            --accent-gold: #c5a059;
            --accent-gold-soft: rgba(197, 160, 89, 0.16);
            --accent-morning: #d0a15f;
            --accent-evening: #d7bc8e;
        }

        html.dark-mode.dark-mode-b {
            --bg-warm: #0d1220;
            --bg-secondary: #12182a;
            --surface-main: rgba(18, 24, 40, 0.82);
            --surface-strong: rgba(22, 30, 48, 0.94);
            --surface-soft: rgba(14, 20, 34, 0.8);
            --surface-glass: rgba(255, 255, 255, 0.06);
            --surface-glass-strong: rgba(191, 219, 254, 0.1);
            --surface-border: rgba(126, 156, 214, 0.16);
            --surface-shadow: rgba(2, 8, 23, 0.44);
            --surface-shadow-strong: rgba(2, 8, 23, 0.58);
            --text-charcoal: #f4f6fb;
            --text-soft: rgba(220, 226, 239, 0.8);
            --text-muted: rgba(154, 168, 193, 0.66);
            --hero-start: #060912;
            --hero-mid: #101b36;
            --hero-end: #1a2f61;
            --hero-glow: rgba(74, 122, 230, 0.2);
            --hero-accent: rgba(255, 211, 146, 0.1);
            --accent-blue: #8caeff;
            --accent-blue-strong: #6f97ff;
            --accent-blue-soft: rgba(111, 151, 255, 0.16);
            --accent-gold: #e0bc84;
            --accent-gold-soft: rgba(224, 188, 132, 0.14);
            --accent-morning: #dca96c;
            --accent-evening: #95a9e0;
        }

        html,
        body {
            min-height: 100%;
        }

        body {
            background-color: var(--bg-warm);
            background-image:
                radial-gradient(circle at top, rgba(255, 255, 255, 0.6), transparent 40%),
                radial-gradient(circle at 12% 18%, rgba(218, 210, 196, 0.1) 0%, transparent 22%),
                radial-gradient(circle at 88% 12%, rgba(214, 206, 192, 0.08) 0%, transparent 20%),
                linear-gradient(180deg, #f7f2e8 0%, #f4efe5 100%),
                url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.012'/%3E%3C/svg%3E");
            color: var(--text-charcoal);
            position: relative;
            overflow-x: hidden;
        }

        body::before,
        body::after {
            content: '';
            position: fixed;
            inset: auto;
            pointer-events: none;
            z-index: 0;
            filter: blur(60px);
            opacity: 0.8;
        }

        body::before {
            top: 120px;
            left: -120px;
            width: 420px;
            height: 420px;
            background: radial-gradient(circle, rgba(218, 196, 158, 0.18), transparent 70%);
        }

        body::after {
            top: 280px;
            right: -140px;
            width: 460px;
            height: 460px;
            background: radial-gradient(circle, rgba(214, 196, 164, 0.14), transparent 72%);
        }

        #app-view,
        .main-content,
        .content-area {
            position: relative;
            z-index: 1;
        }

        #app-view {
            min-height: 100dvh;
        }

        #main-header {
            background:
                radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.16), transparent 24%),
                radial-gradient(circle at 78% 14%, var(--hero-glow), transparent 26%),
                linear-gradient(135deg, var(--hero-start) 0%, var(--hero-mid) 46%, var(--hero-end) 100%) !important;
            color: var(--text-inverse);
            padding: 16px 28px 46px !important;
            position: relative;
            overflow: hidden !important;
            border-bottom-left-radius: 34px;
            border-bottom-right-radius: 34px;
            box-shadow: 0 24px 60px rgba(10, 20, 45, 0.22);
            isolation: isolate;
        }

        #main-header::before {
            display: none;
        }

        #main-header::after {
            display: none;
        }

        .hero-aurora {
            position: absolute !important;
            inset: 0 !important;
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 44%),
                linear-gradient(90deg, rgba(255, 255, 255, 0.025), transparent 32%, transparent 68%, rgba(255, 255, 255, 0.025)) !important;
            background-size: 100% 100%;
            animation: none;
            opacity: 1 !important;
            z-index: 0 !important;
            pointer-events: none;
        }

        .hero-aurora::after {
            display: none;
        }

        .hero-particles {
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            background-image:
                radial-gradient(circle at 16% 38%, rgba(255, 255, 255, 0.55) 0 1px, transparent 1.2px),
                radial-gradient(circle at 38% 22%, rgba(255, 246, 220, 0.5) 0 1.5px, transparent 1.7px),
                radial-gradient(circle at 64% 34%, rgba(255, 255, 255, 0.44) 0 1.2px, transparent 1.5px),
                radial-gradient(circle at 82% 18%, rgba(255, 233, 188, 0.44) 0 1.3px, transparent 1.6px);
            opacity: 0.8;
            animation: particlesFloat 16s ease-in-out infinite alternate;
        }

        .hero-light {
            display: none;
        }

        .devotion-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 26px 32px 52px;
            background: transparent;
            box-shadow: none;
        }

        .devotion-tabs {
            display: flex;
            justify-content: center;
            gap: 6px;
            width: fit-content;
            margin: 4px auto 28px;
            padding: 6px;
            flex-wrap: wrap;
            position: relative;
            z-index: 3;
            border-radius: 999px;
            border: 1px solid rgba(190, 198, 214, 0.22);
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(246, 249, 253, 0.54));
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.72),
                0 18px 42px rgba(55, 77, 126, 0.08);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
        }

        .devotion-tabs::before {
            content: '';
            position: absolute;
            inset: 50% auto auto 50%;
            width: min(420px, 84vw);
            height: 84px;
            transform: translate(-50%, -50%);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.14);
            filter: blur(24px);
            pointer-events: none;
        }

        .devotion-tab-btn {
            appearance: none;
            border: 1px solid transparent;
            background: transparent;
            color: #556889;
            border-radius: 999px;
            padding: 13px 28px;
            font-family: var(--font-ui);
            font-size: 0.96rem;
            font-weight: 600;
            letter-spacing: 0.01em;
            cursor: pointer;
            transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
            box-shadow:
                none;
            min-width: 206px;
        }

        .devotion-tab-btn:hover {
            color: var(--accent-blue-strong);
            transform: translateY(-1px);
            border-color: rgba(81, 122, 223, 0.16);
            background: rgba(255, 255, 255, 0.52);
        }

        .devotion-tab-btn.active {
            background: linear-gradient(135deg, #2346b0 0%, #2b56cf 58%, #396cf0 100%);
            color: #fff;
            border-color: transparent;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.25),
                0 18px 38px rgba(35, 70, 176, 0.28),
                0 0 0 1px rgba(122, 162, 255, 0.14);
        }

        .devotion-tab-panel.hidden {
            display: none;
        }

        .devotion-tab-panel {
            animation: devotionFadeUp 0.55s ease both;
        }

        .topical-devotion-panel {
            background:
                radial-gradient(circle at 9% 4%, rgba(255, 250, 236, 0.84), transparent 28%),
                radial-gradient(circle at 91% 7%, rgba(72, 116, 255, 0.055), transparent 23%),
                linear-gradient(180deg, rgba(255, 252, 246, 0.95), rgba(251, 245, 234, 0.88));
            border: 1px solid rgba(201, 180, 140, 0.16);
            border-radius: 34px;
            padding: 0 34px 42px;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.72),
                0 10px 30px rgba(160, 140, 100, 0.08),
                0 34px 82px rgba(90, 64, 24, 0.065);
            position: relative;
            overflow: hidden;
        }

        .topical-devotion-panel::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 12% 0%, rgba(255, 236, 200, 0.42), transparent 26%),
                radial-gradient(circle at 88% 8%, rgba(115, 151, 255, 0.12), transparent 22%);
            pointer-events: none;
        }

        .topical-devotion-panel > * {
            position: relative;
            z-index: 1;
        }

        .topical-section-tabs {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0;
            width: min(100%, 1120px);
            margin: -1px auto 36px;
            position: relative;
            z-index: 2;
        }

        .topical-section-menu-toggle {
            display: none;
        }

        .topical-mobile-topic-actions {
            display: none;
        }

        .topical-section-menu {
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
            gap: 0;
            justify-content: flex-start;
            padding: 7px;
            border: 1px solid rgba(201, 180, 140, 0.22);
            border-radius: 0 0 22px 22px;
            background:
                linear-gradient(180deg, rgba(255, 254, 250, 0.94), rgba(248, 242, 230, 0.82));
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.86),
                inset 0 -1px 0 rgba(201, 180, 140, 0.08),
                0 10px 30px rgba(160, 140, 100, 0.08),
                0 0 0 1px rgba(255, 255, 255, 0.55);
            align-items: stretch;
            position: relative;
            overflow: hidden;
            flex: 0 1 auto;
            min-width: 0;
        }

        .topical-section-menu::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.64), transparent 42%),
                radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.56), transparent 45%);
            pointer-events: none;
            z-index: 0;
        }

        .topical-section-menu::after {
            content: '';
            position: absolute;
            left: calc(7px + ((100% - 14px) / var(--topical-tab-count)) * var(--topical-active-index));
            bottom: 7px;
            width: calc((100% - 14px) / var(--topical-tab-count));
            height: 4px;
            border-radius: 999px;
            background: linear-gradient(90deg, rgba(214, 184, 128, 0), rgba(214, 184, 128, 0.88), rgba(214, 184, 128, 0));
            box-shadow:
                0 -12px 32px rgba(54, 94, 255, 0.18),
                0 6px 18px rgba(160, 122, 62, 0.14);
            opacity: 0.92;
            pointer-events: none;
            transition: left 250ms cubic-bezier(0.4, 0, 0.2, 1), width 250ms cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 2;
        }

        .topical-section-tab {
            appearance: none;
            border: 0;
            border-right: 1px solid rgba(201, 180, 140, 0.22);
            background: rgba(255, 255, 255, 0.16);
            color: rgba(89, 82, 72, 0.78);
            border-radius: 14px;
            padding: 14px 20px 16px;
            font-family: var(--font-ui);
            font-size: 0.88rem;
            font-weight: 600;
            letter-spacing: 0;
            cursor: pointer;
            transition:
                color 250ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
                background 250ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            z-index: 1;
            min-height: 56px;
            min-width: 166px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            text-transform: uppercase;
            line-height: 1.15;
            white-space: nowrap;
            box-shadow: none;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }

        .topical-section-tab:first-child {
            border-top-left-radius: 0;
            border-bottom-left-radius: 16px;
        }

        .topical-section-tab:last-child {
            border-right: 0;
            border-top-right-radius: 0;
            border-bottom-right-radius: 16px;
        }

        .topical-section-tab::after {
            content: '';
            position: absolute;
            left: 18px;
            right: 18px;
            bottom: 5px;
            height: 2px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.72);
            transform: scaleX(0.8);
            opacity: 0;
            transition: transform 0.28s ease, opacity 0.28s ease;
        }

        .topical-section-tab::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.24), transparent 62%);
            opacity: 0;
            transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
            pointer-events: none;
        }

        .topical-section-tab:hover::after,
        .topical-section-tab.active::after {
            transform: scaleX(1);
            opacity: 1;
        }

        .topical-section-tab:hover {
            color: #3e3327;
            transform: translateY(-1px);
            background: rgba(255, 255, 255, 0.46);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.66),
                0 8px 18px rgba(160, 140, 100, 0.08);
        }

        .topical-section-tab:hover::before {
            opacity: 1;
        }

        .topical-section-tab.active {
            background:
                linear-gradient(180deg, #4b74ff 0%, #2f5be7 100%);
            color: #ffffff;
            box-shadow:
                0 8px 20px rgba(54, 94, 255, 0.25),
                inset 0 1px 1px rgba(255, 255, 255, 0.25),
                inset 0 -1px 0 rgba(19, 54, 150, 0.24);
            border-color: transparent;
            z-index: 3;
        }

        .daily-source-tabs {
            width: min(100%, 1320px);
            margin: -1px auto clamp(30px, 4vw, 54px);
        }

        .daily-source-tabs .topical-section-menu {
            width: 100%;
            justify-content: center;
        }

        .daily-source-tab {
            flex: 1 1 0;
            min-width: 0;
            padding-left: 16px;
            padding-right: 16px;
        }

        .daily-source-content.hidden {
            display: none !important;
        }

        .daily-source-placeholder {
            width: min(100%, 1060px);
            margin: 0 auto;
        }

        .daily-source-placeholder-card {
            background: #FCFAF7;
            border: 1px solid rgba(120, 92, 60, 0.08);
            border-radius: 22px;
            box-shadow:
                0 10px 30px rgba(60, 40, 20, 0.05),
                0 1px 2px rgba(0, 0, 0, 0.04);
            color: #2F261D;
            font-family: var(--font-serif);
            font-size: clamp(1.45rem, 2vw, 2rem);
            font-weight: 600;
            line-height: 1.4;
            padding: clamp(42px, 6vw, 72px);
            text-align: center;
        }

        .topical-topic-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
            gap: 30px;
            width: 100%;
            max-width: 100%;
            overflow: visible;
        }

        .topical-topic-card {
            background:
                radial-gradient(circle at 10% 0%, rgba(255, 236, 198, 0.48), transparent 34%),
                radial-gradient(circle at 100% 10%, rgba(100, 129, 230, 0.08), transparent 30%),
                linear-gradient(180deg, rgba(255, 255, 253, 0.98), rgba(255, 249, 239, 0.92));
            border: 1px solid rgba(207, 186, 150, 0.28);
            border-radius: 34px;
            padding: 34px 32px 30px;
            text-align: left;
            cursor: pointer;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.72),
                inset 0 -1px 0 rgba(205, 176, 132, 0.1),
                0 16px 36px rgba(118, 88, 37, 0.09),
                0 34px 74px rgba(41, 54, 92, 0.06);
            min-height: 300px;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
            transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
            animation: devotionCardRise 0.7s ease both;
            min-width: 0;
        }

        .topical-topic-card:nth-child(2) {
            animation-delay: 0.08s;
        }

        .topical-topic-card:nth-child(3) {
            animation-delay: 0.16s;
        }

        .topical-topic-card:nth-child(4) {
            animation-delay: 0.22s;
        }

        .topical-topic-card:nth-child(5) {
            animation-delay: 0.28s;
        }

        .topical-topic-card:nth-child(6) {
            animation-delay: 0.34s;
        }

        .topical-topic-card::after {
            content: '↗';
            position: absolute;
            top: 24px;
            right: 26px;
            width: 34px;
            height: 34px;
            display: grid;
            place-items: center;
            border-radius: 999px;
            color: rgba(131, 95, 48, 0.58);
            background: rgba(255, 255, 255, 0.54);
            border: 1px solid rgba(207, 186, 150, 0.22);
            font-family: var(--font-ui);
            font-size: 1rem;
            line-height: 1;
            transition: transform 0.3s ease, color 0.3s ease;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
        }

        .topical-topic-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                linear-gradient(135deg, rgba(255, 255, 255, 0.36), transparent 32%),
                linear-gradient(90deg, rgba(184, 138, 77, 0.08), transparent 38%);
            opacity: 0.8;
            pointer-events: none;
        }

        .topical-topic-card:hover {
            transform: translateY(-7px);
            border-color: rgba(188, 146, 83, 0.4);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.78),
                inset 0 -1px 0 rgba(205, 176, 132, 0.12),
                0 20px 44px rgba(118, 88, 37, 0.13),
                0 42px 86px rgba(41, 54, 92, 0.1),
                0 0 0 1px rgba(184, 138, 77, 0.1);
        }

        .topical-topic-card:hover::after {
            color: rgba(184, 138, 77, 0.82);
            transform: translate(3px, -3px);
        }

        .topical-topic-head {
            display: flex;
            align-items: center;
            gap: 18px;
            margin-bottom: 30px;
            position: relative;
            z-index: 1;
        }

        .topical-topic-icon {
            width: 62px;
            height: 62px;
            border-radius: 19px;
            position: relative;
            /* Warm ivory neumorphic surface — matches card cream */
            background:
                radial-gradient(circle at 28% 22%, rgba(255, 253, 242, 1.0) 0%, transparent 55%),
                radial-gradient(circle at 74% 80%, rgba(196, 158, 86, 0.05) 0%, transparent 44%),
                linear-gradient(148deg, rgba(255, 252, 240, 0.99) 0%, rgba(252, 242, 218, 0.97) 100%);
            /* Champagne-gold border */
            border: 1px solid rgba(208, 175, 110, 0.38);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            /* Neumorphic: bright top-left + warm depth bottom-right + glass interior */
            box-shadow:
                -4px -4px 9px rgba(255, 255, 255, 0.9),
                5px 5px 12px rgba(182, 140, 62, 0.26),
                inset 0 1.5px 0 rgba(255, 255, 255, 0.97),
                inset 0 -1px 0 rgba(186, 148, 70, 0.16),
                inset 1.5px 0 0 rgba(255, 255, 255, 0.72),
                inset 0 0 18px rgba(255, 218, 138, 0.16),
                0 0 24px rgba(196, 155, 72, 0.06);
            transition: box-shadow 0.4s ease, filter 0.4s ease;
        }

        .topical-topic-icon svg {
            width: 32px;
            height: 32px;
            overflow: visible;
            transition:
                transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 0.4s ease;
            will-change: transform, filter;
        }

        .topical-topic-card:hover .topical-topic-icon svg {
            transform: scale(1.08);
            filter:
                drop-shadow(0 4px 8px rgba(100, 80, 180, 0.28))
                drop-shadow(0 1px 3px rgba(80, 60, 150, 0.22))
                brightness(1.08) saturate(1.12);
        }

        .topical-topic-name {
            margin: 0;
            font-family: var(--font-heading);
            font-size: clamp(1.7rem, 1.8vw, 2.05rem);
            font-weight: 700;
            color: #272018;
            letter-spacing: -0.01em;
            line-height: 1;
        }

        .topical-topic-title-link {
            color: inherit;
            text-decoration: none;
        }

        .topical-topic-title-link:hover {
            color: var(--accent-gold);
        }

        .topical-topic-meta {
            margin: 0 0 30px 0;
            font-family: var(--font-body);
            font-size: 1.12rem;
            line-height: 1.76;
            color: var(--text-soft);
            flex: 1;
            position: relative;
            z-index: 1;
            max-width: 92%;
        }

        .topical-topic-button {
            display: inline-flex;
            align-items: center;
            justify-content: flex-start;
            gap: 8px;
            width: fit-content;
            padding: 9px 0 3px;
            border-radius: 999px;
            background:
                linear-gradient(90deg, rgba(184, 138, 77, 0.18), rgba(184, 138, 77, 0.02)) left bottom / 100% 1px no-repeat;
            color: #a37035;
            text-decoration: none;
            font-family: var(--font-ui);
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            margin-top: auto;
            transition: color 0.2s ease, transform 0.2s ease, letter-spacing 0.2s ease;
            position: relative;
            z-index: 1;
        }

        .topical-topic-button:hover {
            color: #8f6433;
            transform: translateX(3px);
            letter-spacing: 0.12em;
        }

        .topical-empty-state {
            padding: 28px 18px;
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.54);
            border: 1px dashed rgba(180, 146, 92, 0.28);
            text-align: center;
            font-family: var(--font-ui);
            color: var(--text-soft);
        }

        .topical-detail-loading {
            padding: 48px 24px;
            text-align: center;
            font-family: var(--font-ui);
            color: var(--text-soft);
        }

        .topical-topic-detail.hidden {
            display: none;
        }

        .topical-topic-detail:not(.hidden) .topical-detail-shell {
            animation: devotionFadeUp 0.48s cubic-bezier(0.4, 0, 0.2, 1) both;
        }

        .topical-detail-shell {
            display: flex;
            flex-direction: column;
            gap: 26px;
        }

        .topical-detail-topbar,
        .topical-detail-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            flex-wrap: wrap;
        }

        .topical-back-button,
        .topical-download-button,
        .topical-nav-button {
            appearance: none;
            border: 1px solid var(--surface-border);
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 245, 236, 0.9));
            color: var(--text-charcoal);
            border-radius: 999px;
            padding: 12px 18px;
            font-family: var(--font-ui);
            font-size: 0.9rem;
            font-weight: 600;
            text-decoration: none;
            transition:
                transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
                color 250ms cubic-bezier(0.4, 0, 0.2, 1),
                background 250ms cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.72),
                0 10px 24px rgba(120, 100, 70, 0.08);
            cursor: pointer;
        }

        .topical-back-button:hover,
        .topical-download-button:hover,
        .topical-nav-button:hover {
            transform: translateY(-2px);
            border-color: rgba(184, 138, 77, 0.28);
            color: var(--accent-gold);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.78),
                0 10px 25px rgba(0, 0, 0, 0.08),
                0 0 24px rgba(184, 138, 77, 0.08);
        }

        .topical-nav-button.disabled,
        .topical-nav-button:disabled {
            opacity: 0.22;
            cursor: default;
            transform: none;
            pointer-events: none;
        }

        .topical-detail-actions {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .topical-detail-topbar {
            width: 100%;
            align-items: flex-start;
        }

        .topical-detail-hero {
            padding: clamp(24px, 3vw, 40px) clamp(56px, 6.5vw, 96px) clamp(22px, 2.4vw, 32px);
            border-radius: 34px;
            background:
                radial-gradient(circle at top left, rgba(255, 255, 255, 0.9), rgba(248, 242, 228, 0.96)),
                radial-gradient(circle at 88% 18%, rgba(219, 198, 158, 0.22), transparent 34%),
                radial-gradient(circle at 13% 86%, rgba(255, 255, 255, 0.74), transparent 26%),
                linear-gradient(135deg, #FCF8EF 0%, #F3EBD9 52%, #EDE5D5 100%);
            border: 1px solid rgba(201, 180, 140, 0.18);
            box-shadow:
                0 12px 40px rgba(120, 100, 70, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.8),
                inset 220px -84px 160px rgba(255, 255, 255, 0.76),
                inset -220px -84px 176px rgba(218, 194, 148, 0.54),
                0 34px 76px rgba(86, 62, 27, 0.065);
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            gap: 18px;
            min-height: 240px;
            isolation: isolate;
        }

        .topical-detail-hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                linear-gradient(115deg, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 0.5) 42%, rgba(255, 255, 255, 0.0) 72%),
                radial-gradient(ellipse at 0% 10%, rgba(255, 255, 255, 0.82), transparent 34%),
                radial-gradient(ellipse at 100% 12%, rgba(219, 198, 158, 0.22), transparent 34%),
                radial-gradient(ellipse at 0% 100%, rgba(255, 255, 255, 0.98), transparent 42%),
                radial-gradient(ellipse at 100% 100%, rgba(218, 194, 148, 0.58), transparent 42%),
                radial-gradient(ellipse at 50% 100%, rgba(255, 248, 225, 0.72), transparent 48%),
                radial-gradient(circle at 50% 55%, rgba(255, 255, 255, 0), rgba(145, 116, 70, 0.08) 100%);
            pointer-events: none;
            z-index: 0;
        }

        .topical-detail-hero::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 96px;
            background:
                radial-gradient(ellipse at 0% 100%, rgba(255, 255, 255, 0.76), transparent 46%),
                radial-gradient(ellipse at 100% 100%, rgba(218, 194, 148, 0.42), transparent 48%),
                linear-gradient(90deg, rgba(176, 125, 30, 0), rgba(176, 125, 30, 0.14), rgba(176, 125, 30, 0.58), rgba(176, 125, 30, 0.14), rgba(176, 125, 30, 0)) center top / min(460px, calc(100% - 76px)) 2px no-repeat;
            box-shadow: inset 0 -18px 36px rgba(255, 255, 255, 0.42);
            pointer-events: none;
            z-index: 0;
        }

        .topical-detail-hero > * {
            position: relative;
            z-index: 1;
        }

        .topical-detail-hero-copy {
            width: min(100%, 860px);
            display: grid;
            justify-items: center;
            text-align: center;
            gap: 10px;
            margin-inline: auto;
            position: relative;
            padding-bottom: 22px;
        }

        .topical-detail-hero-copy::after {
            content: '';
            width: min(420px, 62%);
            height: 2px;
            border-radius: 999px;
            background:
                linear-gradient(90deg, rgba(184, 138, 77, 0), rgba(184, 138, 77, 0.58), rgba(75, 116, 255, 0.32), rgba(184, 138, 77, 0));
            box-shadow:
                0 8px 20px rgba(184, 138, 77, 0.12),
                0 -8px 24px rgba(255, 255, 255, 0.62);
            opacity: 0.9;
            margin-top: 6px;
        }

        .topical-detail-category {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 9px 15px;
            border-radius: 999px;
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(239, 222, 190, 0.72));
            border: 1px solid rgba(176, 125, 30, 0.12);
            color: #A17332;
            font-family: var(--font-ui);
            font-size: 0.76rem;
            font-weight: 700;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.56),
                0 10px 22px rgba(184, 138, 77, 0.08);
        }

        .topical-detail-title {
            margin: 0;
            font-family: var(--font-ui);
            font-size: clamp(2.55rem, 4vw, 4.5rem);
            font-weight: 700;
            line-height: 1.05;
            letter-spacing: -0.03em;
            color: var(--text-charcoal);
            white-space: nowrap;
            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.42);
        }

        .topical-detail-summary {
            display: none;
        }

        .topical-detail-body {
            display: flex;
            flex-direction: column;
            gap: 28px;
            position: relative;
            z-index: 1;
        }

        /* Sacred transitional divider between hero and content */
        .topical-sacred-transition {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            padding: 4px 0 16px;
            width: min(100%, 640px);
            margin-inline: auto;
            margin-bottom: -18px; /* pull content card up into the atmosphere */
            position: relative;
            z-index: 2;
            opacity: 0;
            transform: translateY(10px);
            animation: topicalTransitionFadeIn 1.1s 0.28s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

        /* Atmospheric bridge: soft parchment glow that bleeds into content card */
        .topical-sacred-transition::after {
            content: '';
            position: absolute;
            bottom: -32px;
            left: 0;
            right: 0;
            height: 64px;
            background: radial-gradient(
                ellipse at 50% 20%,
                rgba(253, 249, 242, 0.52) 0%,
                transparent 72%
            );
            pointer-events: none;
        }

        @keyframes topicalTransitionFadeIn {
            to { opacity: 1; transform: translateY(0); }
        }

        .topical-transition-rule {
            width: min(380px, 72%);
            height: 1px;
            border: none;
            margin: 0;
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(160, 130, 90, 0.10) 18%,
                rgba(160, 130, 90, 0.18) 50%,
                rgba(160, 130, 90, 0.10) 82%,
                transparent 100%
            );
        }

        /* Lower rule fades out more — soft dissolve toward content */
        .topical-sacred-transition hr.topical-transition-rule:last-child {
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(160, 130, 90, 0.06) 24%,
                rgba(160, 130, 90, 0.10) 50%,
                rgba(160, 130, 90, 0.06) 76%,
                transparent 100%
            );
            width: min(280px, 54%);
        }

        .topical-transition-cross {
            font-size: 1.05rem;
            color: rgba(118, 86, 152, 0.20);
            line-height: 1;
            font-style: normal;
            user-select: none;
        }

        .topical-transition-quote {
            margin: 0;
            padding: 0;
            border: none;
            font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
            font-size: clamp(1.0rem, 1.45vw, 1.16rem);
            font-style: italic;
            font-weight: 400;
            line-height: 1.82;
            letter-spacing: 0.016em;
            color: rgba(100, 80, 55, 0.58);
            text-align: center;
            max-width: 52ch;
        }

        /* Dark mode variants */
        html.dark-mode .topical-transition-rule {
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(200, 160, 90, 0.08) 18%,
                rgba(200, 160, 90, 0.13) 50%,
                rgba(200, 160, 90, 0.08) 82%,
                transparent 100%
            );
        }

        html.dark-mode .topical-sacred-transition::after {
            background: radial-gradient(
                ellipse at 50% 20%,
                rgba(30, 26, 20, 0.38) 0%,
                transparent 72%
            );
        }

        html.dark-mode:not(.dark-mode-b) .topical-transition-cross {
            color: rgba(175, 145, 215, 0.20);
        }

        html.dark-mode:not(.dark-mode-b) .topical-transition-quote {
            color: rgba(200, 185, 165, 0.48);
        }

        html.dark-mode.dark-mode-b .topical-transition-cross {
            color: rgba(140, 178, 255, 0.20);
        }

        html.dark-mode.dark-mode-b .topical-transition-quote {
            color: rgba(180, 200, 240, 0.44);
        }

        .topical-detail-hero,
        .topical-reading-intro,
        .topical-reading-section {
            width: min(100%, 1120px);
            margin-inline: auto;
        }

        .topical-reading-intro,
        .topical-reading-section {
            padding: 34px clamp(48px, 5vw, 74px);
            border-radius: 28px;
            background: linear-gradient(180deg, #FDF9F2 0%, #FAF6EE 100%);
            border: 1px solid rgba(176, 125, 30, 0.16);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.6),
                0 2px 10px rgba(120, 80, 20, 0.06),
                0 14px 34px rgba(120, 80, 20, 0.04);
        }

        /* Intro card: transparent top border so it emerges from the sacred transition */
        .topical-reading-intro {
            border-top-color: transparent;
            box-shadow:
                inset 0 48px 72px rgba(253, 249, 242, 0.62),
                inset 0 1px 0 rgba(255, 255, 255, 0.4),
                0 2px 8px rgba(120, 80, 20, 0.04),
                0 12px 30px rgba(120, 80, 20, 0.035);
        }

        .topical-detail-paragraph,
        .topical-reading-section-description,
        .topical-reference-copy {
            margin: 0;
            font-family: var(--devotion-reading-font-family);
            font-size: var(--devotion-reading-font-size) !important;
            font-weight: var(--devotion-reading-font-weight);
            line-height: 1.82;
            color: var(--text-charcoal);
        }

        .topical-reference-copy {
            font-style: italic;
            line-height: 1.75;
            color: var(--text-charcoal);
        }

        .topical-reading-intro .topical-detail-paragraph:first-child {
            font-size: var(--devotion-reading-font-size) !important;
            line-height: 1.96;
            color: rgba(28, 22, 14, 0.88);
            padding-top: 6px;
        }

        /* Drop cap — ceremonial opening letter */
        .topical-reading-intro .topical-detail-paragraph:first-child::first-letter {
            font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
            font-size: 3.4em;
            font-weight: 600;
            line-height: 0.80;
            float: left;
            margin: 0.08em 0.11em -0.04em 0;
            color: rgba(110, 82, 40, 0.65);
        }

        .topical-reading-intro {
            display: grid;
            gap: 18px;
        }

        .topical-reading-intro .topical-detail-paragraph {
            width: min(100%, 108ch);
            margin-inline: auto;
        }

        .topical-reading-section {
            position: relative;
            overflow: hidden;
            padding: clamp(34px, 3.6vw, 48px);
            border-radius: 34px;
            background:
                radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.92), transparent 28%),
                radial-gradient(circle at 88% 10%, rgba(223, 205, 172, 0.22), transparent 34%),
                linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(251, 245, 235, 0.94));
            border-color: rgba(176, 125, 30, 0.18);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.72),
                0 18px 46px rgba(120, 80, 20, 0.07),
                0 30px 70px rgba(86, 62, 27, 0.05);
        }

        .topical-reading-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                linear-gradient(115deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0)),
                radial-gradient(circle at 0% 50%, rgba(176, 125, 30, 0.055), transparent 34%);
            pointer-events: none;
        }

        .topical-reading-section > * {
            position: relative;
            z-index: 1;
        }

        .topical-reading-section-head {
            display: grid;
            gap: 12px;
            padding-bottom: 26px;
            margin-bottom: 28px;
            border-bottom: 1px solid rgba(176, 125, 30, 0.2);
            position: relative;
        }

        .topical-reading-section-head::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -1px;
            width: min(360px, 52%);
            height: 2px;
            border-radius: 999px;
            background: linear-gradient(90deg, rgba(176, 125, 30, 0.58), rgba(176, 125, 30, 0.08));
        }

        .topical-reading-section-kicker {
            width: fit-content;
            padding: 8px 12px;
            border-radius: 999px;
            background: linear-gradient(180deg, rgba(245, 235, 216, 0.88), rgba(239, 224, 196, 0.72));
            border: 1px solid rgba(176, 125, 30, 0.12);
            font-family: var(--font-ui);
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: #8B622A;
        }

        .topical-reading-section-title {
            margin: 0;
            font-family: var(--font-heading);
            font-size: clamp(2.05rem, 3.2vw, 3rem);
            line-height: 1.04;
            color: var(--text-charcoal);
            text-wrap: balance;
        }

        .topical-reference-list {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 20px;
        }

        .topical-reference-card {
            display: grid;
            gap: 16px;
            padding: 26px 28px 24px;
            border-radius: 24px;
            background:
                radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.82), transparent 38%),
                linear-gradient(180deg, rgba(255, 253, 249, 0.9), rgba(255, 249, 238, 0.74));
            border: 1px solid rgba(184, 138, 77, 0.16);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.58),
                0 12px 26px rgba(92, 62, 22, 0.04);
            position: relative;
            overflow: hidden;
            transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
        }

        .topical-reference-card::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0));
            pointer-events: none;
        }

        .topical-reference-card:hover {
            transform: translateY(-2px);
            border-color: rgba(176, 125, 30, 0.25);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.64),
                0 16px 32px rgba(92, 62, 22, 0.07);
        }

        .topical-reference-card > * {
            position: relative;
            z-index: 1;
        }

        .topical-reference-link {
            width: fit-content;
            color: #2D251D;
            text-decoration: none;
            font-family: var(--font-ui);
            font-size: 0.92rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            transition: color 0.2s ease, transform 0.2s ease;
        }

        .topical-reference-link:hover {
            color: var(--accent-gold);
            transform: translateX(2px);
        }

        @media (min-width: 769px) {
            .topical-section-menu::after {
                background:
                    linear-gradient(90deg, rgba(79, 63, 210, 0), rgba(79, 63, 210, 0.84), rgba(79, 63, 210, 0));
                box-shadow:
                    0 -12px 32px rgba(79, 63, 210, 0.18),
                    0 6px 18px rgba(79, 63, 210, 0.12);
            }

            .topical-section-tab:hover {
                color: var(--topical-reference-blue);
            }

            .topical-section-tab.active {
                background:
                    linear-gradient(180deg, #6856E1 0%, var(--topical-reference-blue) 100%);
                box-shadow:
                    0 8px 20px rgba(79, 63, 210, 0.25),
                    inset 0 1px 1px rgba(255, 255, 255, 0.25),
                    inset 0 -1px 0 rgba(57, 37, 151, 0.24);
            }

            .topical-topic-name,
            .topical-detail-title,
            .topical-reading-section-title,
            .topical-detail-category,
            .topical-reading-section-kicker {
                color: var(--topical-reference-blue);
            }

            .topical-topic-title-link:hover {
                color: var(--topical-reference-blue-strong);
            }

            .topical-detail-topbar {
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
                align-items: center;
                gap: 16px;
            }

            .topical-detail-actions {
                display: contents;
            }

            .topical-detail-category {
                grid-column: 2;
                justify-self: center;
            }

            .topical-back-button {
                grid-column: 1;
                justify-self: start;
            }

            .topical-download-button {
                grid-column: 3;
                justify-self: end;
            }

            .topical-detail-hero {
                background:
                    radial-gradient(circle at top left, rgba(255, 255, 255, 0.9), rgba(248, 242, 228, 0.96)),
                    radial-gradient(circle at 88% 18%, rgba(79, 63, 210, 0.14), transparent 34%),
                    radial-gradient(circle at 13% 86%, rgba(255, 255, 255, 0.74), transparent 26%),
                    linear-gradient(135deg, #FCF8EF 0%, #F6F0E6 52%, #F0ECF8 100%);
                box-shadow:
                    0 12px 40px rgba(120, 100, 70, 0.08),
                    inset 0 1px 0 rgba(255, 255, 255, 0.8),
                    inset 220px -84px 160px rgba(255, 255, 255, 0.76),
                    inset -220px -84px 176px rgba(79, 63, 210, 0.13),
                    0 34px 76px rgba(86, 62, 27, 0.065);
            }

            .topical-detail-hero::before {
                background:
                    linear-gradient(115deg, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 0.5) 42%, rgba(255, 255, 255, 0.0) 72%),
                    radial-gradient(ellipse at 0% 10%, rgba(255, 255, 255, 0.82), transparent 34%),
                    radial-gradient(ellipse at 100% 12%, rgba(79, 63, 210, 0.12), transparent 34%),
                    radial-gradient(ellipse at 0% 100%, rgba(255, 255, 255, 0.98), transparent 42%),
                    radial-gradient(ellipse at 100% 100%, rgba(79, 63, 210, 0.16), transparent 42%),
                    radial-gradient(ellipse at 50% 100%, rgba(247, 244, 255, 0.62), transparent 48%),
                    radial-gradient(circle at 50% 55%, rgba(255, 255, 255, 0), rgba(79, 63, 210, 0.07) 100%);
            }

            .topical-detail-hero::after {
                background:
                    radial-gradient(ellipse at 0% 100%, rgba(255, 255, 255, 0.76), transparent 46%),
                    radial-gradient(ellipse at 100% 100%, rgba(79, 63, 210, 0.15), transparent 48%),
                    linear-gradient(90deg, rgba(79, 63, 210, 0), rgba(79, 63, 210, 0.12), rgba(79, 63, 210, 0.42), rgba(79, 63, 210, 0.12), rgba(79, 63, 210, 0)) center top / min(460px, calc(100% - 76px)) 2px no-repeat;
            }

            .topical-topic-icon {
                border-color: rgba(79, 63, 210, 0.28);
                box-shadow:
                    inset 0 1px 0 rgba(255, 255, 255, 0.78),
                    0 12px 24px rgba(79, 63, 210, 0.12),
                    0 0 0 1px rgba(79, 63, 210, 0.08);
            }

            .topical-topic-card:hover .topical-topic-icon {
                border-color: rgba(79, 63, 210, 0.42);
                box-shadow:
                    inset 0 1px 0 rgba(255, 255, 255, 0.82),
                    0 14px 28px rgba(79, 63, 210, 0.18),
                    0 0 0 1px rgba(79, 63, 210, 0.14);
            }
        }

        @media (max-width: 1520px) {
            .topical-section-tab {
                min-width: 150px;
            }
        }

        @media (max-width: 1180px) {
            .topical-section-menu {
                gap: 0;
            }

            .topical-section-tab {
                padding-inline: 8px;
                font-size: 0.78rem;
                min-width: 118px;
            }

            .topical-section-download {
                min-height: 50px;
                padding-inline: 18px;
                font-size: 0.82rem;
            }

        }

        html.dark-mode body {
            background-image:
                radial-gradient(circle at 18% 12%, rgba(107, 139, 219, 0.16), transparent 30%),
                radial-gradient(circle at 85% 8%, rgba(242, 196, 122, 0.08), transparent 24%),
                linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(7, 10, 18, 0.06)),
                url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
        }

        html.dark-mode:not(.dark-mode-b) body {
            background-image:
                radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.04), transparent 28%),
                radial-gradient(circle at 85% 8%, rgba(197, 160, 89, 0.06), transparent 24%),
                linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(10, 10, 12, 0.08)),
                url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
        }

        html.dark-mode body::before {
            background: radial-gradient(circle, rgba(59, 104, 237, 0.16), transparent 70%);
        }

        html.dark-mode body::after {
            background: radial-gradient(circle, rgba(224, 188, 132, 0.08), transparent 72%);
        }

        html.dark-mode:not(.dark-mode-b) body::before {
            background: radial-gradient(circle, rgba(255, 255, 255, 0.05), transparent 68%);
        }

        html.dark-mode:not(.dark-mode-b) body::after {
            background: radial-gradient(circle, rgba(197, 160, 89, 0.08), transparent 70%);
        }

        html.dark-mode .devotion-tabs::before {
            background: rgba(64, 94, 167, 0.2);
        }

        html.dark-mode .devotion-tabs {
            border-color: rgba(126, 156, 214, 0.16);
            background: linear-gradient(180deg, rgba(22, 31, 49, 0.72), rgba(16, 24, 38, 0.54));
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.04),
                0 18px 34px rgba(2, 8, 23, 0.18);
        }

        html.dark-mode .devotion-tab-btn {
            border-color: transparent;
            background: transparent;
            color: rgba(224, 232, 249, 0.84);
            box-shadow: none;
        }

        html.dark-mode .devotion-tab-btn:hover {
            color: var(--text-inverse);
            border-color: rgba(125, 166, 255, 0.26);
            background: rgba(31, 41, 64, 0.8);
        }

        html.dark-mode .devotion-tab-btn.active {
            background: linear-gradient(135deg, #2446aa 0%, #3864db 58%, #5684ff 100%);
            color: #fff;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.14),
                0 22px 44px rgba(36, 70, 170, 0.32),
                0 0 0 1px rgba(122, 162, 255, 0.18);
        }

        html.dark-mode:not(.dark-mode-b) .devotion-tab-btn {
            border-color: transparent;
            background: transparent;
            color: #d4d4d8;
            box-shadow: none;
        }

        html.dark-mode:not(.dark-mode-b) .devotion-tab-btn:hover {
            border-color: rgba(197, 160, 89, 0.2);
            background: rgba(39, 39, 42, 0.96);
            color: #f4efe6;
        }

        html.dark-mode:not(.dark-mode-b) .devotion-tab-btn.active {
            background: linear-gradient(180deg, rgba(92, 76, 49, 0.98) 0%, rgba(66, 53, 35, 0.98) 100%);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.1),
                0 20px 40px rgba(0, 0, 0, 0.28),
                0 0 0 1px rgba(197, 160, 89, 0.18);
        }

        html.dark-mode .topical-devotion-panel {
            background:
                linear-gradient(180deg, rgba(20, 27, 42, 0.94), rgba(15, 22, 36, 0.9));
            border-color: rgba(126, 156, 214, 0.18);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.05),
                0 22px 48px rgba(2, 8, 23, 0.32),
                0 42px 86px rgba(2, 8, 23, 0.22);
        }

        html.dark-mode .topical-devotion-panel::before {
            background:
                radial-gradient(circle at 12% 0%, rgba(224, 188, 132, 0.1), transparent 26%),
                radial-gradient(circle at 88% 8%, rgba(125, 166, 255, 0.12), transparent 22%);
        }

        html.dark-mode:not(.dark-mode-b) .topical-devotion-panel {
            background:
                linear-gradient(180deg, rgba(32, 32, 35, 0.96), rgba(27, 27, 30, 0.92));
            border-color: rgba(255, 255, 255, 0.08);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.04),
                0 22px 48px rgba(0, 0, 0, 0.34),
                0 42px 86px rgba(0, 0, 0, 0.24);
        }

        html.dark-mode:not(.dark-mode-b) .topical-devotion-panel::before {
            background:
                radial-gradient(circle at 12% 0%, rgba(197, 160, 89, 0.12), transparent 24%),
                radial-gradient(circle at 88% 8%, rgba(255, 255, 255, 0.03), transparent 22%);
        }

        html.dark-mode .topical-section-menu {
            background: linear-gradient(180deg, rgba(22, 31, 49, 0.82), rgba(16, 24, 38, 0.64));
            border-color: rgba(126, 156, 214, 0.16);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.04),
                0 18px 34px rgba(2, 8, 23, 0.18);
        }

        html.dark-mode .topical-section-menu::before {
            background:
                radial-gradient(circle at 10% 16%, rgba(224, 188, 132, 0.1), transparent 22%),
                radial-gradient(circle at 92% 12%, rgba(125, 166, 255, 0.14), transparent 22%);
        }

        html.dark-mode .topical-section-tab {
            background: rgba(25, 35, 54, 0.72);
            border-color: rgba(126, 156, 214, 0.13);
            color: rgba(211, 222, 245, 0.72);
            box-shadow: none;
        }

        html.dark-mode .topical-section-tab:hover,
        html.dark-mode .topical-section-tab.active {
            color: var(--accent-gold);
        }

        html.dark-mode .topical-section-tab:hover {
            background: linear-gradient(180deg, rgba(38, 50, 76, 0.96), rgba(26, 36, 56, 0.86));
            border-color: rgba(126, 156, 214, 0.22);
        }

        html.dark-mode .topical-section-tab.active {
            background: linear-gradient(180deg, #4C86EF 0%, #2F6FDB 100%);
            color: #ffffff;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.2),
                0 14px 28px rgba(23, 79, 185, 0.28);
        }

        html.dark-mode .topical-section-download {
            background: linear-gradient(180deg, rgba(31, 42, 64, 0.92), rgba(20, 28, 44, 0.84));
            border-color: rgba(126, 156, 214, 0.16);
            color: rgba(230, 237, 252, 0.92);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.05),
                0 14px 28px rgba(2, 8, 23, 0.2);
        }

        html.dark-mode:not(.dark-mode-b) .topical-section-menu {
            background: linear-gradient(180deg, rgba(34, 34, 37, 0.86), rgba(26, 26, 29, 0.72));
            border-color: rgba(255, 255, 255, 0.08);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.03),
                0 18px 34px rgba(0, 0, 0, 0.2);
        }

        html.dark-mode:not(.dark-mode-b) .topical-section-menu::before {
            background:
                radial-gradient(circle at 10% 16%, rgba(197, 160, 89, 0.12), transparent 22%),
                radial-gradient(circle at 92% 12%, rgba(255, 255, 255, 0.03), transparent 22%);
        }

        html.dark-mode:not(.dark-mode-b) .topical-section-tab {
            color: #bdbdc6;
            background: linear-gradient(180deg, rgba(39, 39, 42, 0.92), rgba(31, 31, 34, 0.82));
            border-color: rgba(255, 255, 255, 0.08);
        }

        html.dark-mode:not(.dark-mode-b) .topical-section-tab:hover {
            background: linear-gradient(180deg, rgba(49, 47, 43, 0.96), rgba(39, 37, 34, 0.9));
            border-color: rgba(197, 160, 89, 0.16);
        }

        html.dark-mode:not(.dark-mode-b) .topical-section-tab.active {
            background: linear-gradient(180deg, #4C86EF 0%, #2F6FDB 100%);
            color: #ffffff;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.18),
                0 14px 28px rgba(0, 0, 0, 0.24);
        }

        html.dark-mode:not(.dark-mode-b) .topical-section-download {
            background: linear-gradient(180deg, rgba(39, 39, 42, 0.94), rgba(31, 31, 34, 0.86));
            border-color: rgba(255, 255, 255, 0.08);
            color: #e4e4e7;
        }

        html.dark-mode .topical-topic-card {
            background:
                radial-gradient(circle at 10% 0%, rgba(224, 188, 132, 0.11), transparent 34%),
                radial-gradient(circle at 100% 10%, rgba(125, 166, 255, 0.12), transparent 30%),
                linear-gradient(180deg, rgba(28, 38, 58, 0.96), rgba(20, 28, 44, 0.92));
            border-color: rgba(126, 156, 214, 0.16);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.05),
                0 16px 38px rgba(2, 8, 23, 0.28),
                0 30px 56px rgba(2, 8, 23, 0.2);
        }

        html.dark-mode .topical-topic-card::before {
            background:
                radial-gradient(circle at 18% 0%, rgba(224, 188, 132, 0.08), transparent 28%);
        }

        html.dark-mode:not(.dark-mode-b) .topical-topic-card {
            background:
                radial-gradient(circle at 10% 0%, rgba(197, 160, 89, 0.1), transparent 34%),
                linear-gradient(180deg, rgba(39, 39, 42, 0.96), rgba(31, 31, 34, 0.94));
            border-color: rgba(255, 255, 255, 0.08);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.04),
                0 16px 38px rgba(0, 0, 0, 0.3),
                0 30px 56px rgba(0, 0, 0, 0.22);
        }

        html.dark-mode:not(.dark-mode-b) .topical-topic-card::before {
            background:
                radial-gradient(circle at 18% 0%, rgba(197, 160, 89, 0.08), transparent 28%);
        }

        html.dark-mode .topical-topic-card::after {
            color: rgba(224, 188, 132, 0.42);
            background: rgba(255, 255, 255, 0.04);
            border-color: rgba(224, 188, 132, 0.1);
        }

        html.dark-mode .topical-topic-card:hover {
            border-color: rgba(140, 177, 255, 0.28);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.07),
                0 20px 42px rgba(2, 8, 23, 0.34),
                0 34px 66px rgba(2, 8, 23, 0.24),
                0 0 0 1px rgba(125, 166, 255, 0.1);
        }

        html.dark-mode:not(.dark-mode-b) .topical-topic-card:hover {
            border-color: rgba(197, 160, 89, 0.22);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.05),
                0 20px 42px rgba(0, 0, 0, 0.34),
                0 34px 66px rgba(0, 0, 0, 0.26),
                0 0 0 1px rgba(197, 160, 89, 0.08);
        }

        html.dark-mode .topical-topic-icon {
            border-color: rgba(126, 156, 214, 0.18);
            background:
                linear-gradient(180deg, rgba(33, 46, 72, 0.96), rgba(22, 31, 49, 0.9));
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.06),
                0 12px 24px rgba(2, 8, 23, 0.2);
        }

        html.dark-mode:not(.dark-mode-b) .topical-topic-icon {
            border-color: rgba(255, 255, 255, 0.08);
            background:
                linear-gradient(180deg, rgba(57, 52, 46, 0.96), rgba(45, 41, 36, 0.96));
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.05),
                0 12px 24px rgba(0, 0, 0, 0.22);
        }

        html.dark-mode .topical-topic-name {
            color: var(--text-charcoal);
        }

        html.dark-mode .topical-topic-meta,
        html.dark-mode .topical-empty-state {
            color: var(--text-soft);
        }

        html.dark-mode .topical-empty-state {
            background: rgba(25, 34, 52, 0.82);
            border-color: rgba(126, 156, 214, 0.2);
        }

        html.dark-mode .topical-topic-button {
            color: var(--accent-gold);
            background:
                linear-gradient(90deg, rgba(224, 188, 132, 0.22), rgba(224, 188, 132, 0.02)) left bottom / 100% 1px no-repeat;
        }

        html.dark-mode .topical-topic-button:hover {
            color: #f1c98d;
        }

        html.dark-mode .topical-detail-hero,
        html.dark-mode .topical-reading-intro,
        html.dark-mode .topical-reading-section,
        html.dark-mode .topical-back-button,
        html.dark-mode .topical-download-button,
        html.dark-mode .topical-nav-button {
            border-color: var(--surface-border);
            color: var(--text-charcoal);
            box-shadow: 0 14px 34px var(--surface-shadow);
        }

        html.dark-mode .topical-reference-card {
            border-color: var(--surface-border);
            color: var(--text-charcoal);
            box-shadow: 0 14px 34px var(--surface-shadow);
        }

        html.dark-mode .topical-reference-copy {
            color: rgba(211, 222, 245, 0.88);
        }

        html.dark-mode .topical-reading-intro .topical-detail-paragraph:first-child {
            color: rgba(229, 236, 250, 0.92);
        }

        html.dark-mode .topical-detail-hero {
            background:
                radial-gradient(circle at 14% 12%, rgba(255, 255, 255, 0.08), transparent 26%),
                radial-gradient(circle at 88% 12%, rgba(176, 125, 30, 0.11), transparent 34%),
                linear-gradient(145deg, rgba(43, 36, 24, 0.98), rgba(28, 24, 16, 0.96));
            border-color: rgba(176, 125, 30, 0.16);
        }

        html.dark-mode .topical-detail-title {
            color: var(--text-inverse);
        }

        html.dark-mode .topical-detail-summary {
            color: rgba(222, 210, 188, 0.82);
        }

        html.dark-mode .topical-detail-hero::before {
            background:
                radial-gradient(ellipse at 0% 10%, rgba(224, 188, 132, 0.08), transparent 34%),
                radial-gradient(ellipse at 100% 12%, rgba(184, 138, 77, 0.08), transparent 34%),
                radial-gradient(ellipse at 0% 100%, rgba(224, 188, 132, 0.08), transparent 36%),
                radial-gradient(ellipse at 100% 100%, rgba(184, 138, 77, 0.08), transparent 36%),
                radial-gradient(ellipse at 50% 100%, rgba(255, 235, 170, 0.04), transparent 42%);
        }

        html.dark-mode .topical-detail-hero::after {
            background: linear-gradient(90deg, rgba(176, 125, 30, 0), rgba(176, 125, 30, 0.18) 16%, rgba(176, 125, 30, 0.4) 48%, rgba(176, 125, 30, 0.18) 84%, rgba(176, 125, 30, 0));
        }

        html.dark-mode .topical-reading-intro,
        html.dark-mode .topical-reading-section {
            background: linear-gradient(180deg, rgba(30, 26, 18, 0.96), rgba(24, 20, 14, 0.92));
            border-color: rgba(176, 125, 30, 0.14);
        }

        html.dark-mode .topical-reading-section-head {
            border-bottom-color: rgba(176, 125, 30, 0.22);
        }

        html.dark-mode .topical-reading-section-head::after {
            background: linear-gradient(90deg, rgba(224, 188, 132, 0.5), rgba(224, 188, 132, 0.06));
        }

        html.dark-mode .topical-reading-section-kicker {
            color: var(--accent-gold);
            background: linear-gradient(180deg, rgba(224, 188, 132, 0.12), rgba(224, 188, 132, 0.04));
            border-color: rgba(224, 188, 132, 0.12);
        }

        html.dark-mode .topical-reference-card,
        html.dark-mode .topical-back-button,
        html.dark-mode .topical-download-button,
        html.dark-mode .topical-nav-button {
            background: linear-gradient(180deg, rgba(30, 40, 60, 0.82), rgba(20, 28, 44, 0.72));
        }

        html.dark-mode:not(.dark-mode-b) .topical-detail-hero {
            background:
                radial-gradient(circle at 14% 12%, rgba(255, 255, 255, 0.07), transparent 26%),
                radial-gradient(circle at 88% 12%, rgba(197, 160, 89, 0.1), transparent 34%),
                linear-gradient(145deg, rgba(40, 38, 34, 0.98), rgba(28, 27, 25, 0.96));
            border-color: rgba(197, 160, 89, 0.14);
        }

        html.dark-mode:not(.dark-mode-b) .topical-detail-summary {
            color: rgba(232, 223, 206, 0.78);
        }

        html.dark-mode:not(.dark-mode-b) .topical-reading-intro,
        html.dark-mode:not(.dark-mode-b) .topical-reading-section {
            background: linear-gradient(180deg, rgba(35, 35, 38, 0.98), rgba(28, 28, 31, 0.96));
            border-color: rgba(197, 160, 89, 0.1);
        }

        html.dark-mode:not(.dark-mode-b) .topical-reading-section-head {
            border-bottom-color: rgba(197, 160, 89, 0.18);
        }

        html.dark-mode:not(.dark-mode-b) .topical-reading-section-head::after {
            background: linear-gradient(90deg, rgba(197, 160, 89, 0.45), rgba(197, 160, 89, 0.06));
        }

        html.dark-mode:not(.dark-mode-b) .topical-back-button,
        html.dark-mode:not(.dark-mode-b) .topical-download-button,
        html.dark-mode:not(.dark-mode-b) .topical-nav-button {
            background: linear-gradient(180deg, rgba(49, 47, 43, 0.76), rgba(37, 35, 32, 0.72));
        }

        html.dark-mode:not(.dark-mode-b) .topical-reference-card {
            background: linear-gradient(180deg, rgba(49, 47, 43, 0.76), rgba(37, 35, 32, 0.72));
        }

        html.dark-mode:not(.dark-mode-b) #main-header {
            background:
                radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.08), transparent 24%),
                radial-gradient(circle at 78% 14%, rgba(197, 160, 89, 0.08), transparent 24%),
                linear-gradient(135deg, #131316 0%, #1a1a1e 46%, #242429 100%) !important;
        }

        html.dark-mode:not(.dark-mode-b) .hero-aurora {
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 44%),
                linear-gradient(90deg, rgba(255, 255, 255, 0.018), transparent 32%, transparent 68%, rgba(255, 255, 255, 0.018)) !important;
        }

        html.dark-mode:not(.dark-mode-b) #languageSelectWrapperHeader .custom-select-trigger {
            background: linear-gradient(180deg, rgba(57, 52, 46, 0.96) 0%, rgba(45, 41, 36, 0.96) 100%) !important;
            border-color: rgba(197, 160, 89, 0.18) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.08),
                0 18px 34px rgba(0, 0, 0, 0.22);
        }

        html.dark-mode:not(.dark-mode-b) #languageSelectWrapperHeader .custom-select-trigger:hover,
        html.dark-mode:not(.dark-mode-b) #languageSelectWrapperHeader .custom-select.open .custom-select-trigger {
            background: linear-gradient(180deg, rgba(69, 63, 54, 0.98) 0%, rgba(53, 48, 41, 0.98) 100%) !important;
        }

        html.dark-mode:not(.dark-mode-b) #languageSelectWrapperHeader .custom-options {
            background: linear-gradient(180deg, rgba(42, 39, 34, 0.98) 0%, rgba(34, 31, 28, 0.98) 100%);
            border-color: rgba(197, 160, 89, 0.12);
        }

        html.dark-mode.dark-mode-b #main-header {
            background:
                radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.1), transparent 24%),
                radial-gradient(circle at 78% 14%, rgba(84, 110, 176, 0.16), transparent 24%),
                linear-gradient(135deg, #11182e 0%, #141b33 46%, #1a2444 100%) !important;
        }

        html.dark-mode.dark-mode-b .hero-aurora {
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 44%),
                linear-gradient(90deg, rgba(140, 174, 255, 0.025), transparent 32%, transparent 68%, rgba(140, 174, 255, 0.025)) !important;
        }

        html.dark-mode.dark-mode-b #languageSelectWrapperHeader .custom-select-trigger {
            background: linear-gradient(180deg, rgba(82, 91, 120, 0.96) 0%, rgba(96, 104, 131, 0.96) 100%) !important;
            border-color: rgba(150, 186, 255, 0.18) !important;
        }

        html.dark-mode.dark-mode-b #languageSelectWrapperHeader .custom-select-trigger:hover,
        html.dark-mode.dark-mode-b #languageSelectWrapperHeader .custom-select.open .custom-select-trigger {
            background: linear-gradient(180deg, rgba(90, 100, 130, 0.98) 0%, rgba(102, 111, 140, 0.98) 100%) !important;
        }

        html.dark-mode.dark-mode-b #languageSelectWrapperHeader .custom-options {
            background: linear-gradient(180deg, rgba(37, 49, 91, 0.985) 0%, rgba(28, 39, 77, 0.985) 100%);
            border-color: rgba(150, 186, 255, 0.14);
        }

        .main-title {
            font-size: clamp(2.55rem, 4vw, 4.5rem);
            font-weight: 700;
            line-height: 0.96;
            letter-spacing: -0.03em;
            margin: 0;
            color: var(--text-inverse) !important;
            text-shadow: 0 8px 28px rgba(4, 14, 32, 0.28) !important;
        }

        .hero-subtitle {
            color: rgba(237, 243, 255, 0.9) !important;
            margin-top: 12px !important;
            font-family: var(--font-body);
            font-size: clamp(1.12rem, 1.5vw, 1.45rem);
            line-height: 1.6;
            letter-spacing: 0.02em;
            max-width: 560px;
        }

        .header-lockup {
            z-index: 3 !important;
            position: relative !important;
            display: flex !important;
            align-items: center !important;
            gap: 18px !important;
            padding: 20px 0 12px 0 !important;
            justify-content: center;
        }

        .header-text-group {
            text-align: left;
        }

        .dove-icon {
            width: 72px !important;
            height: 72px !important;
            flex-shrink: 0;
            filter: drop-shadow(0 14px 24px rgba(255, 233, 188, 0.16));
            animation: heroFloat 6s ease-in-out infinite;
        }

        .header-left-actions {
            z-index: 4 !important;
        }

        .header-left-actions .icon-btn,
        #homeBtn.icon-btn {
            width: 54px;
            height: 54px;
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            border: 1px solid rgba(255, 255, 255, 0.16);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
            transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
        }

        .header-left-actions .icon-btn:hover,
        #homeBtn.icon-btn:hover {
            transform: translateY(-2px);
            background: rgba(255, 255, 255, 0.14);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.22),
                0 12px 24px rgba(7, 16, 34, 0.18);
        }

        .header-controls {
            z-index: 4 !important;
        }

        #languageSelectWrapperHeader {
            min-width: 214px;
        }

        #languageSelectWrapperHeader .custom-select-trigger {
            min-height: 58px;
            border-radius: 999px !important;
            padding: 0 22px !important;
            background: rgba(255, 255, 255, 0.14) !important;
            backdrop-filter: blur(22px);
            -webkit-backdrop-filter: blur(22px);
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.22),
                0 18px 34px rgba(5, 14, 28, 0.16);
            color: var(--text-inverse) !important;
            transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
        }

        #languageSelectWrapperHeader .custom-select-trigger:hover,
        #languageSelectWrapperHeader .custom-select.open .custom-select-trigger {
            transform: translateY(-2px);
            background: rgba(255, 255, 255, 0.18) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.28),
                0 22px 36px rgba(5, 14, 28, 0.2);
        }

        #languageSelectWrapperHeader .custom-select-trigger span,
        #languageSelectWrapperHeader .custom-select-trigger svg,
        #languageSelectWrapperHeader .arrow {
            color: var(--text-inverse) !important;
            fill: currentColor;
            stroke: currentColor;
        }

        #languageSelectWrapperHeader .custom-options {
            margin-top: 12px;
            border-radius: 22px;
            padding: 8px;
            background: rgba(16, 29, 58, 0.86);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 24px 46px rgba(4, 10, 22, 0.28);
        }

        #languageSelectWrapperHeader .custom-option {
            border-radius: 14px;
            color: rgba(242, 247, 255, 0.88);
        }

        #languageSelectWrapperHeader .custom-option:hover,
        #languageSelectWrapperHeader .custom-option.selected {
            background: rgba(115, 151, 255, 0.2);
            color: #fff;
        }

        .content-area {
            padding: 0 2rem 3.2rem !important;
        }

        .date-toggle-wrapper {
            margin-bottom: 1.4rem !important;
            padding: 0 8px;
        }

        .view-toggle-container {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 14px;
            background: var(--surface-glass);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            padding: 8px 16px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.22);
            opacity: 1;
            transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26);
        }

        .view-toggle-container:hover {
            transform: translateY(-1px);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.28),
                0 14px 26px rgba(15, 23, 42, 0.08);
        }

        .view-toggle-label {
            font-family: var(--font-ui);
            font-size: 0.76rem;
            color: var(--text-soft);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            cursor: pointer;
        }

        .slider {
            background-color: rgba(160, 174, 192, 0.46);
        }

        input:checked+.slider {
            background-color: var(--accent-blue);
        }

        .font-control-btn {
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
            background: rgba(255, 255, 255, 0.24) !important;
            color: var(--text-soft) !important;
            border-radius: 999px !important;
            padding: 6px 12px !important;
            transition: transform 0.2s ease, background-color 0.2s ease;
        }

        .font-control-btn:hover {
            transform: translateY(-1px);
            background: rgba(255, 255, 255, 0.34) !important;
        }

        .box-title-date-group {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 1rem;
            /* Reduced margin */
        }

        .devotion-date {
            text-align: center;
            color: var(--accent-blue-strong);
            font-family: var(--font-heading);
            /* Consistent across Daily Light, Morning & Evening, Streams. */
            font-size: clamp(28px, 2.6vw, 40px);
            font-weight: 500;
            font-variant: normal;
            letter-spacing: 0.01em;
            position: relative;
            padding-bottom: 12px;
            margin-top: 0.5rem;
        }

        .devotion-date::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 40px;
            height: 1px;
            background-color: rgba(191, 162, 120, 0.36);
            opacity: 0.6;
        }

        .devotion-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 32px;
            align-items: stretch;
        }

        /* Ensure both columns have equal height */
        .devotion-grid::before {
            content: '';
            grid-column: 1 / -1;
            grid-row: 1;
        }

        .devotion-column {
            background: linear-gradient(180deg, var(--surface-strong), var(--surface-main));
            padding: 36px 36px 32px;
            border-radius: 20px;
            border: 1px solid var(--surface-border);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.34),
                0 10px 28px var(--surface-shadow),
                0 26px 54px rgba(15, 23, 42, 0.05);
            transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            margin-top: 0;
            height: 100%;
        }

        .devotion-column:hover {
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.36),
                0 18px 38px rgba(118, 88, 37, 0.12),
                0 34px 66px rgba(15, 23, 42, 0.08);
            transform: translateY(-3px);
            border-color: rgba(184, 138, 77, 0.22);
        }

        /* Colored top accent bar per session */
        .morning-card {
            border-top: 3px solid var(--accent-morning);
        }

        .evening-card {
            border: 1px solid rgba(74, 93, 138, 0.18);
            border-top: 3px solid var(--accent-evening);
        }

        .devotion-header-row {
            display: flex;
            align-items: baseline;
            justify-content: center;
            margin-bottom: 28px;
            padding-bottom: 16px;
            border-bottom: 1px solid rgba(184, 138, 77, 0.14);
        }

        /* Date shown next to each section heading (Morning/Evening below the
           heading; Streams/Imitation above it). Injected by
           placeDateAboveHeadings() in the section renderer; the original header-row date is
           hidden so it reads once per heading. */
        .devotion-date-inline {
            text-align: center;
            font-family: var(--font-heading);
            font-size: clamp(1.5rem, 1.9vw, 2rem);
            font-weight: 500;
            letter-spacing: 0.012em;
            line-height: 1.15;
            color: #173169;
            text-shadow: 0 8px 28px rgba(80, 55, 20, 0.08);
            position: relative;
            margin: 0 auto 22px;
            padding-bottom: 13px;
        }

        /* When placed below the heading: the date sits flush directly under the
           MORNING/EVENING text (no top line, no top gap), followed by a single
           gold rule beneath it (its ::after, redefined below to a full line). */
        .devotion-date-inline--below {
            font-size: clamp(1.35rem, 1.7vw, 1.8rem);
            margin: 0 auto 26px;
            padding-top: 0;
            padding-bottom: 14px;
        }

        /* Drop the heading row's own underline/gap in the below-date context so the
           date tucks immediately under the heading text with no line between them. */
        .devotion-header-row:has(+ .devotion-date-inline--below) {
            margin-bottom: 0 !important;
            padding-bottom: 0;
            border-bottom: 0;
        }

        .devotion-header-row:has(+ .devotion-date-inline--below)::after {
            display: none;
        }

        .devotion-header-row:has(+ .devotion-date-inline--below) .devotion-header {
            margin-bottom: 0 !important;
        }

        .devotion-date-inline::after {
            content: '';
            display: block;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 82px;
            height: 11px;
            background:
                linear-gradient(90deg, transparent, rgba(166, 124, 69, 0.30), transparent),
                radial-gradient(circle at center, rgba(196, 154, 88, 0.62) 0 2px, transparent 3px);
            background-repeat: no-repeat;
            background-size: 100% 1px, 11px 11px;
            background-position: center, center;
            opacity: 0.82;
        }

        /* Below variant: replace the gold dot-divider with a centered full-width
           gold rule that mirrors the heading-row underline, forming the lower of
           the two horizontal lines. Defined AFTER the base ::after (equal
           specificity) so it wins by source order. */
        .devotion-date-inline.devotion-date-inline--below::after {
            width: min(360px, 70%);
            height: 1px;
            background:
                linear-gradient(90deg, transparent 0%, rgba(184, 138, 77, 0.14) 18%, rgba(184, 138, 77, 0.36) 50%, rgba(184, 138, 77, 0.14) 82%, transparent 100%);
            background-repeat: no-repeat;
            background-size: 100% 1px;
            background-position: center;
        }

        /* Split mode puts the two cards side by side, so each column is narrow —
           shrink the date and its divider to suit the reduced width. */
        body.split-view .devotion-date-inline {
            font-size: clamp(1.1rem, 1.3vw, 1.4rem);
            padding-bottom: 11px;
            margin-bottom: 20px;
        }

        body.split-view .devotion-date-inline--above::after {
            width: 76px;
            height: 11px;
            background-size: 100% 1px, 11px 11px;
        }

        /* Date flush under the heading in split too: no top padding, single rule
           below. The lower rule narrows with the column. */
        body.split-view .devotion-date-inline--below {
            padding-top: 0;
            padding-bottom: 12px;
            margin-bottom: 22px;
        }

        body.split-view .devotion-date-inline--below::after {
            width: min(360px, 78%);
        }

        @media (min-width: 769px) {
            body #daily-light-source-panel .devotion-header-row:has(+ .devotion-date-inline--below) .devotion-header,
            body #morning-evening-source-panel .devotion-header-row:has(+ .devotion-date-inline--below) .devotion-header,
            body #prayer-tab-panel .devotion-header-row:has(+ .devotion-date-inline--below) .devotion-header {
                color: #2E241D !important;
                font-family: var(--font-heading) !important;
                font-size: clamp(1.28rem, 1.8vw, 2rem) !important;
                font-weight: 500 !important;
                letter-spacing: 0.08em !important;
                line-height: 1.05 !important;
                opacity: 0.92 !important;
                text-transform: uppercase !important;
            }

            body #daily-light-source-panel .devotion-date-inline--below,
            body #morning-evening-source-panel .devotion-date-inline--below,
            body #prayer-tab-panel .devotion-date-inline--below {
                color: #6E6A78 !important;
                font-family: var(--font-heading) !important;
                font-size: 1.08rem !important;
                font-style: italic !important;
                font-weight: 500 !important;
                letter-spacing: 0.04em !important;
                line-height: 1.18 !important;
                opacity: 0.82 !important;
                text-shadow: none !important;
                margin: 0 auto 30px !important;
                padding-top: 0.55rem !important;
                padding-bottom: 0.55rem !important;
            }

            body #daily-light-source-panel .devotion-date-inline--below::after,
            body #morning-evening-source-panel .devotion-date-inline--below::after,
            body #prayer-tab-panel .devotion-date-inline--below::after {
                width: min(320px, 68%) !important;
                background:
                    linear-gradient(90deg, transparent 0%, rgba(201, 164, 107, 0.16) 18%, rgba(201, 164, 107, 0.48) 50%, rgba(201, 164, 107, 0.16) 82%, transparent 100%) !important;
                opacity: 0.48 !important;
            }
        }

        /* Streams/Imitation tint the inline date to their warm palette. */
        body.streams-active .devotion-date-inline,
        body.imitation-active .devotion-date-inline {
            color: #1F1A15;
        }

        html.dark-mode.dark-mode-b .devotion-date-inline {
            color: #9FC2FF;
            text-shadow: 0 0 18px rgba(87, 140, 255, 0.10);
        }

        html.dark-mode:not(.dark-mode-b) .devotion-date-inline {
            color: #D6B277;
            text-shadow: 0 0 18px rgba(214, 178, 119, 0.12);
        }

        /* The original header-row date is suppressed once moved above headings.
           The wrapper stays so the A-/A+ and Split/Stacked controls keep their
           place; only the date text node is removed from view. */
        .date-toggle-wrapper > .devotion-date {
            display: none !important;
        }

        /* On mobile the view controls live in the hamburger drawer, so the
           header-row wrapper has nothing left to show — collapse it entirely
           to avoid an empty gap above the content. */
        @media (max-width: 768px) {
            .date-toggle-wrapper {
                display: none !important;
                margin: 0 !important;
            }
        }


        .prayer-body-section {
            margin-top: 52px;
            padding-top: 0;
        }

        .prayer-body-section.hidden {
            display: none;
        }

        .prayer-heading-block {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 13px;
            margin-bottom: 38px;
        }

        .prayer-heading-rule-row {
            display: flex;
            align-items: center;
            gap: 13px;
            width: 100%;
        }

        .prayer-heading-rule {
            flex: 1;
            height: 1px;
            border: none;
            margin: 0;
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(160, 130, 90, 0.13) 20%,
                rgba(160, 130, 90, 0.21) 50%,
                rgba(160, 130, 90, 0.13) 80%,
                transparent 100%
            );
        }

        .prayer-heading-cross {
            font-size: 0.86rem;
            color: rgba(92, 69, 118, 0.34);
            flex-shrink: 0;
            line-height: 1;
            font-style: normal;
            user-select: none;
        }

        .prayer-heading-title {
            margin: 2px 0;
            font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.26em;
            text-transform: uppercase;
            color: rgba(74, 58, 86, 0.66);
            text-align: center;
            line-height: 1.7;
        }

        .prayer-para {
            margin: 0 0 1.5rem 0;
            text-align: left;
        }

        .prayer-para.prayer-first {
            font-style: normal !important;
        }

        .prayer-para.prayer-pause {
            text-align: center;
            letter-spacing: 0.4em;
            color: rgba(107, 76, 138, 0.28) !important;
            margin: 0.1rem 0 1.2rem 0;
            font-size: 0.82em !important;
            line-height: 1.5 !important;
        }

        .prayer-para.prayer-scripture {
            font-style: italic;
            color: rgba(51, 51, 51, 0.78);
        }

        .prayer-reflection {
            margin-top: 0.8rem;
            margin-bottom: 0;
            font-family: var(--font-ui);
            font-size: 0.68rem !important;
            font-weight: 400;
            letter-spacing: 0.06em;
            font-style: italic;
            color: var(--text-muted);
            text-align: center;
            opacity: 0.72;
        }

        .prayer-para:last-child {
            margin-bottom: 0;
        }

        html.dark-mode:not(.dark-mode-b) .prayer-heading-rule {
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(200, 160, 90, 0.1) 20%,
                rgba(200, 160, 90, 0.16) 50%,
                rgba(200, 160, 90, 0.1) 80%,
                transparent 100%
            );
        }

        html.dark-mode:not(.dark-mode-b) .prayer-heading-cross {
            color: rgba(175, 145, 215, 0.24);
        }

        html.dark-mode:not(.dark-mode-b) .prayer-heading-title {
            color: rgba(205, 178, 235, 0.56);
        }

        html.dark-mode:not(.dark-mode-b) .prayer-para.prayer-pause {
            color: rgba(180, 150, 220, 0.26) !important;
        }

        html.dark-mode:not(.dark-mode-b) .prayer-para.prayer-scripture {
            color: rgba(220, 200, 165, 0.72);
        }

        html.dark-mode:not(.dark-mode-b) .prayer-reflection {
            color: rgba(200, 175, 235, 0.5);
        }

        html.dark-mode.dark-mode-b .prayer-heading-rule {
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(110, 150, 220, 0.11) 20%,
                rgba(110, 150, 220, 0.17) 50%,
                rgba(110, 150, 220, 0.11) 80%,
                transparent 100%
            );
        }

        html.dark-mode.dark-mode-b .prayer-heading-cross {
            color: rgba(140, 178, 255, 0.24);
        }

        html.dark-mode.dark-mode-b .prayer-heading-title {
            color: rgba(168, 198, 255, 0.56);
        }

        html.dark-mode.dark-mode-b .prayer-para.prayer-pause {
            color: rgba(160, 130, 220, 0.24) !important;
        }

        html.dark-mode.dark-mode-b .prayer-para.prayer-scripture {
            color: rgba(190, 210, 255, 0.70);
        }

        html.dark-mode.dark-mode-b .prayer-reflection {
            color: rgba(180, 200, 255, 0.45);
        }

        /* Remove legacy gradient accents */
        .morning-card::before,
        .evening-card::before {
            display: none;
        }

        .devotion-header {
            text-align: center;
            font-family: var(--font-ui);
            font-size: 0.72rem;
            font-weight: 700;
            font-variant: normal;
            text-transform: uppercase;
            letter-spacing: 0.18em;
            margin: 0;
            padding: 0;
            border-bottom: none;
            position: static;
            transform: none;
            background: transparent;
            flex-shrink: 0;
            display: block;
        }

        .morning-header {
            color: var(--accent-morning);
        }

        .evening-header {
            color: var(--accent-evening);
        }


        .devotion-topic {
            text-align: center;
            font-family: var(--font-heading);
            font-size: 1.4rem;
            font-weight: 500;
            margin-bottom: 20px;
            color: #333;
        }

        .devotion-text {
            font-family: var(--font-body);
            font-size: 1.25rem;
            /* Default for Desktop */
            line-height: 1.7;
            color: var(--text-charcoal);
            text-align: justify;
            flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 0;
        }

        /* Responsive Text Sizes */
        @media (max-width: 1200px) {
            .devotion-text {
                font-size: 1.15rem;
                /* Tablet/Small Desktop */
            }
        }

        @media (max-width: 768px) {
            .devotion-text {
                font-size: 1.05rem;
                /* Phone */
            }
        }

        .devotion-text,
        .devotion-text p,
        .prayer-para,
        .theme-verse-p,
        .topical-detail-paragraph,
        .topical-reading-section-description,
        .topical-reference-copy,
        .topical-reading-intro .topical-detail-paragraph:first-child {
            font-family: var(--devotion-reading-font-family) !important;
            font-size: var(--devotion-reading-font-size) !important;
            font-weight: var(--devotion-reading-font-weight) !important;
        }

        /* Wrap all content before Cross References to allow proper spacing */
        .devotion-text>*:not(h2:last-of-type):not(.reference-footer) {
            flex-shrink: 0;
        }

        .devotion-text p {
            margin-bottom: 1.8rem;
            /* Increased rhythm */
        }

        /* First paragraph style */
        .devotion-text p:first-of-type {
            text-indent: 1.5em;
            /* Classic paragraph indent */
        }

        #streams-source-panel .devotion-column {
            align-items: center;
        }

        #imitation-source-panel .devotion-column {
            align-items: stretch;
            margin-inline: auto;
            width: 100%;
        }

        #imitation-content {
            width: 100%;
            max-width: 100%;
            margin: 0 auto;
        }

        #streams-content {
            max-width: 1120px;
            width: 100%;
            margin: 0 auto;
            text-align: left;
            display: block;
        }

        #imitation-content .imitation-chapter-title {
            max-width: 920px;
            margin: 0 auto 3.1rem;
            padding: 0 0 1.1rem;
            border-bottom: 1px solid rgba(184, 138, 77, 0.35);
            color: #2A1F16;
            -webkit-text-fill-color: #2A1F16;
            font-family: var(--font-ui);
            font-size: 1.5rem;
            font-weight: 600;
            font-style: normal;
            line-height: 1.25;
            letter-spacing: 0;
            text-align: center;
            text-transform: uppercase;
        }

        #imitation-content p {
            text-align: justify;
        }

        #imitation-content .imitation-chapter-footer {
            max-width: 920px;
            width: 100%;
            margin: 3.25rem auto 0;
            padding-top: 1.1rem;
            border-top: 1px solid rgba(184, 138, 77, 0.24);
            color: #8F632C;
            font-family: var(--font-ui);
            font-size: 0.78rem;
            font-style: normal;
            font-weight: 700;
            letter-spacing: 0;
            line-height: 1.4;
            text-align: center;
            text-transform: uppercase;
        }

        #streams-content .streams-scripture {
            max-width: 920px;
            margin: 0 auto 3.35rem;
            padding: 1.35rem 2.2rem;
            border: 1px solid rgba(184, 138, 77, 0.18);
            border-radius: 28px;
            background: rgba(248, 241, 232, 0.62);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
            color: #564638;
            font-family: var(--devotion-reading-font-family);
            font-size: calc(var(--devotion-reading-font-size) * 1.08);
            font-style: italic;
            font-weight: 400;
            line-height: 1.72;
            text-align: left;
        }

        #streams-content .streams-scripture-quote,
        #streams-content .streams-scripture-reference {
            display: inline;
        }

        #streams-content .streams-scripture-reference {
            width: auto;
            margin: 0 0 0 1.1rem;
            font-variant: small-caps;
            letter-spacing: 0.04em;
            text-align: left;
        }

        #streams-content .streams-scripture .theme-verse-ref-container,
        #streams-content .streams-scripture .theme-verse-ref {
            color: var(--accent-gold) !important;
            font-style: italic;
            font-weight: 600;
            font-size: 1em;
            text-decoration: underline;
            text-decoration-style: dotted;
            text-decoration-color: rgba(184, 138, 77, 0.5);
            text-underline-offset: 0.14em;
        }

        #streams-content .streams-body p {
            margin: 0 0 1.45rem;
            color: var(--text-charcoal);
            font-family: var(--devotion-reading-font-family) !important;
            font-size: calc(var(--devotion-reading-font-size) * 1.04) !important;
            font-weight: var(--devotion-reading-font-weight) !important;
            line-height: 1.95;
            text-align: left;
            text-indent: 0;
        }

        #streams-content .streams-scripture + .streams-body .streams-lead::first-letter {
            float: left;
            margin: 0.08em 0.12em 0 0;
            color: #6b563f;
            font-family: var(--font-heading);
            font-size: 4.4em;
            font-weight: 500;
            line-height: 0.78;
        }

        #streams-content .streams-poem {
            max-width: 720px;
            margin: 2.2rem auto 2.2rem;
            padding: 0 0 0 3.25rem;
            border: 0;
            background: transparent;
            color: #4f4032;
            font-family: var(--devotion-reading-font-family);
            font-size: calc(var(--devotion-reading-font-size) * 1.02);
            font-style: italic;
            line-height: 1.9;
        }

        #streams-content .streams-opening-poem {
            margin-top: 0;
            margin-bottom: 2.3rem;
            text-align: left;
        }

        #streams-content .streams-quote {
            max-width: 760px;
            margin: 38px auto 0;
            padding: 24px 32px;
            border-left: 3px solid rgba(174, 140, 91, 0.28);
            background: rgba(248, 241, 232, 0.42);
            color: #4f4032;
            font-family: var(--devotion-reading-font-family);
            font-size: var(--devotion-reading-font-size);
            font-style: normal;
            line-height: 1.9;
        }

        #streams-content .streams-poem span {
            display: block;
            margin-bottom: 0.16rem;
        }

        #streams-content .streams-quote span {
            display: block;
            margin-bottom: 1rem;
        }

        body.streams-active {
            background:
                radial-gradient(circle at 50% 18%, rgba(255, 252, 242, 0.8), transparent 34%),
                radial-gradient(circle at 50% 48%, rgba(183, 138, 74, 0.08), transparent 44%),
                linear-gradient(180deg, #F6F1E7 0%, #F3EEE3 40%, #EFE7DA 100%);
            color: #3A2E22;
        }

        body.streams-active::before {
            inset: 0;
            width: auto;
            height: auto;
            background:
                radial-gradient(ellipse at center, transparent 42%, rgba(88, 58, 22, 0.12) 100%),
                url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.024'/%3E%3C/svg%3E");
            filter: none;
            opacity: 1;
            z-index: 0;
        }

        body.streams-active::after {
            top: 22%;
            left: 50%;
            right: auto;
            width: min(980px, 80vw);
            height: 520px;
            transform: translateX(-50%);
            background: radial-gradient(circle, rgba(255, 246, 223, 0.52), transparent 72%);
            filter: blur(44px);
            opacity: 0.72;
        }

        body.streams-active .devotion-date {
            color: #1F1A15;
            font-family: var(--font-heading);
            /* Single-line "Monday June 4 2026" — sized to match Daily Light and Morning & Evening. */
            font-size: clamp(28px, 2.6vw, 40px);
            font-weight: 500;
            font-variant: normal;
            letter-spacing: 0.01em;
            text-shadow: 0 8px 28px rgba(80, 55, 20, 0.08);
        }

        body.streams-active .devotion-date span {
            color: #A67C45 !important;
            letter-spacing: 0.35em !important;
        }

        body.streams-active #streams-date-display::after {
            content: '';
            display: block;
            width: 92px;
            height: 15px;
            margin: 12px auto 0;
            background:
                linear-gradient(90deg, transparent, rgba(166, 124, 69, 0.42), transparent),
                radial-gradient(circle at center, rgba(183, 138, 74, 0.95) 0 3px, transparent 4px);
            background-repeat: no-repeat;
            background-size: 100% 1px, 15px 15px;
            background-position: center, center;
        }

        body.streams-active #streams-source-panel .devotion-column {
            position: relative;
            overflow: hidden;
            max-width: min(1080px, calc(100vw - 112px));
            margin-inline: auto;
            padding: clamp(58px, 6vw, 86px) clamp(46px, 7vw, 98px);
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.46), transparent 22%),
                rgba(255, 255, 255, 0.72);
            border: 1px solid rgba(180, 140, 80, 0.22);
            border-radius: 32px;
            box-shadow:
                0 20px 60px rgba(80, 55, 20, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.62),
                inset 0 0 36px rgba(183, 138, 74, 0.04);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            animation: streamsFadeIn 420ms ease-out both;
        }

        body.streams-active #streams-source-panel .devotion-column::before {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            background:
                linear-gradient(90deg, rgba(183, 138, 74, 0.12), transparent 18%, transparent 82%, rgba(183, 138, 74, 0.1)),
                url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.018'/%3E%3C/svg%3E");
            opacity: 0.78;
        }

        body.streams-active #streams-source-panel .devotion-header {
            color: #8F632C;
            font-family: var(--font-ui);
            font-size: 0.86rem;
            font-weight: 700;
            letter-spacing: 0.34em;
            text-transform: uppercase;
        }

        body.streams-active #streams-source-panel .devotion-header-row::after {
            width: 230px;
            background:
                linear-gradient(90deg, transparent, rgba(166, 124, 69, 0.42), transparent),
                radial-gradient(circle at center, rgba(183, 138, 74, 0.95) 0 3px, transparent 4px);
            background-repeat: no-repeat;
            background-size: 100% 1px, 15px 15px;
            background-position: center, center;
        }

        body.streams-active #streams-content {
            max-width: 860px;
            position: relative;
        }

        body.streams-active #streams-content .streams-scripture {
            position: relative;
            max-width: 820px;
            margin: 0 auto 3.8rem;
            padding: 2.1rem 2.4rem;
            background: rgba(251, 248, 242, 0.7);
            border: 1px solid rgba(183, 138, 74, 0.22);
            border-radius: 28px;
            box-shadow:
                0 18px 45px rgba(80, 55, 20, 0.07),
                inset 0 1px 0 rgba(255, 255, 255, 0.62);
            color: #4A3928;
            font-family: var(--font-body);
            font-size: calc(clamp(34px, 3vw, 52px) * var(--bible-font-scale, 1));
            font-weight: 500;
            line-height: 1.6;
            text-align: center;
        }

        body.streams-active #streams-content .streams-scripture::before {
            content: '“';
            display: block;
            margin-bottom: -0.16em;
            color: #B78A4A;
            font-family: var(--font-heading);
            font-size: 2.2em;
            font-style: normal;
            line-height: 0.8;
            text-shadow: 0 8px 28px rgba(154, 108, 47, 0.16);
        }

        body.streams-active #streams-content .streams-scripture-quote {
            font-style: italic;
        }

        body.streams-active #streams-content .streams-scripture-reference {
            display: block;
            width: fit-content;
            margin: 1.05rem auto 0;
            color: #A67C45;
            font-size: calc(clamp(20px, 1.6vw, 28px) * var(--bible-font-scale, 1));
            font-style: italic;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-align: left;
            text-shadow: 0 0 18px rgba(183, 138, 74, 0.16);
        }

        body.streams-active #streams-content .streams-scripture .theme-verse-ref {
            color: #A67C45 !important;
            font-size: 1em;
            font-weight: 600;
            text-decoration: underline;
            text-decoration-style: dotted;
            text-decoration-color: rgba(166, 124, 69, 0.56);
            text-underline-offset: 0.18em;
            transition: color 260ms ease, text-shadow 260ms ease;
        }

        body.streams-active #streams-content .streams-scripture .theme-verse-ref:hover {
            color: #8F632C !important;
            text-shadow: 0 0 18px rgba(183, 138, 74, 0.28);
        }

        body.streams-active #streams-content .streams-body p {
            max-width: 760px;
            margin: 0 auto 1.75rem;
            color: #3A2E22;
            font-family: var(--font-body) !important;
            font-size: calc(clamp(22px, 1.55vw, 30px) * var(--bible-font-scale, 1)) !important;
            font-weight: 400 !important;
            letter-spacing: 0.01em;
            line-height: 2;
        }

        body.streams-active #streams-content .streams-scripture + .streams-body .streams-lead::first-letter {
            float: left;
            margin: 0.08em 0.13em 0 0;
            color: #8A6438;
            font-family: var(--font-heading);
            font-size: 4.9em;
            font-weight: 500;
            line-height: 0.72;
            background: linear-gradient(180deg, #A77A40 0%, #6E4A25 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 7px 22px rgba(100, 67, 31, 0.14);
        }

        body.streams-active #streams-content .streams-poem {
            max-width: 620px;
            margin: 2.6rem auto;
            padding-left: 0;
            color: #4A3928;
            font-family: var(--font-body);
            font-size: calc(clamp(21px, 1.45vw, 28px) * var(--bible-font-scale, 1));
            font-style: italic;
            font-weight: 500;
            line-height: 1.72;
        }

        body.streams-active .nav-arrow {
            width: 58px;
            height: 58px;
            background: rgba(255, 252, 246, 0.82);
            border: 1px solid rgba(180, 140, 80, 0.14);
            color: #9A6C2F;
            box-shadow: 0 14px 34px rgba(80, 55, 20, 0.12);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            transition: transform 280ms ease, box-shadow 280ms ease, color 280ms ease;
        }

        body.streams-active .nav-arrow:hover {
            color: #80551F;
            transform: translateY(-50%) scale(1.045);
            box-shadow: 0 18px 42px rgba(120, 76, 23, 0.18);
        }

        body.morning-evening-active {
            background:
                radial-gradient(circle at 50% 18%, rgba(255, 252, 242, 0.8), transparent 34%),
                radial-gradient(circle at 50% 48%, rgba(183, 138, 74, 0.08), transparent 44%),
                linear-gradient(180deg, #F6F1E7 0%, #F3EEE3 40%, #EFE7DA 100%);
            color: #3A2E22;
        }

        body.morning-evening-active::before {
            inset: 0;
            width: auto;
            height: auto;
            background:
                radial-gradient(ellipse at center, transparent 42%, rgba(88, 58, 22, 0.12) 100%),
                url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.024'/%3E%3C/svg%3E");
            filter: none;
            opacity: 1;
            z-index: 0;
        }

        body.morning-evening-active::after {
            top: 22%;
            left: 50%;
            right: auto;
            width: min(980px, 80vw);
            height: 520px;
            transform: translateX(-50%);
            background: radial-gradient(circle, rgba(255, 246, 223, 0.52), transparent 72%);
            filter: blur(44px);
            opacity: 0.72;
        }

        body.morning-evening-active .devotion-date {
            color: #173169;
            font-family: var(--font-heading);
            /* Single-line "Monday June 4 2026" — kept proportional to Daily Light. */
            font-size: clamp(28px, 2.6vw, 40px);
            font-weight: 500;
            font-variant: normal;
            letter-spacing: 0.01em;
            text-shadow: 0 8px 28px rgba(80, 55, 20, 0.08);
        }

        body.morning-evening-active .devotion-date span {
            color: #A67C45 !important;
            letter-spacing: 0.35em !important;
        }

        body.morning-evening-active #me-date-display::after {
            content: '';
            display: block;
            width: 116px;
            height: 18px;
            margin: 13px auto 0;
            background:
                linear-gradient(90deg, transparent, rgba(166, 124, 69, 0.45), transparent),
                radial-gradient(circle at center, rgba(183, 138, 74, 0.95) 0 3px, transparent 4px);
            background-repeat: no-repeat;
            background-size: 100% 1px, 18px 18px;
            background-position: center, center;
        }

        body.morning-evening-active #morning-evening-source-panel .devotion-grid {
            max-width: min(1080px, calc(100vw - 112px));
            margin-inline: auto;
            gap: 34px;
        }

        body.morning-evening-active #morning-evening-source-panel .devotion-column {
            position: relative;
            overflow: hidden;
            padding: clamp(58px, 6vw, 86px) clamp(46px, 7vw, 98px);
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.46), transparent 22%),
                rgba(255, 255, 255, 0.72);
            border: 1px solid rgba(180, 140, 80, 0.22);
            border-radius: 32px;
            box-shadow:
                0 20px 60px rgba(80, 55, 20, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.62),
                inset 0 0 36px rgba(183, 138, 74, 0.04);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            animation: streamsFadeIn 420ms ease-out both;
        }

        body.morning-evening-active #morning-evening-source-panel .devotion-column::before {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            background:
                linear-gradient(90deg, rgba(183, 138, 74, 0.12), transparent 18%, transparent 82%, rgba(183, 138, 74, 0.1)),
                url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.018'/%3E%3C/svg%3E");
            opacity: 0.78;
        }

        body.morning-evening-active #morning-evening-source-panel .devotion-header {
            color: #8F632C;
            font-family: var(--font-ui);
            font-size: 0.86rem;
            font-weight: 700;
            letter-spacing: 0.34em;
            text-transform: uppercase;
        }

        body.morning-evening-active #morning-evening-source-panel .devotion-header-row::after {
            width: 230px;
            background:
                linear-gradient(90deg, transparent, rgba(166, 124, 69, 0.42), transparent),
                radial-gradient(circle at center, rgba(183, 138, 74, 0.95) 0 3px, transparent 4px);
            background-repeat: no-repeat;
            background-size: 100% 1px, 15px 15px;
            background-position: center, center;
        }

        body.morning-evening-active #morning-evening-source-panel .devotion-text {
            position: relative;
            max-width: 860px;
            margin-inline: auto;
        }

        body.morning-evening-active #morning-evening-source-panel .theme-verse-p {
            position: relative;
            max-width: 820px;
            margin: 0 auto 3.4rem;
            padding: 2.1rem 2.4rem;
            background: rgba(251, 248, 242, 0.7);
            border: 1px solid rgba(183, 138, 74, 0.22);
            border-radius: 28px;
            box-shadow:
                0 18px 45px rgba(80, 55, 20, 0.07),
                inset 0 1px 0 rgba(255, 255, 255, 0.62);
            color: #4A3928;
            font-family: var(--font-body) !important;
            font-size: calc(clamp(28px, 2.3vw, 42px) * var(--bible-font-scale, 1)) !important;
            font-style: italic;
            font-weight: 500 !important;
            line-height: 1.6;
            text-align: center;
            text-indent: 0 !important;
        }

        body.morning-evening-active #morning-evening-source-panel .theme-verse-p::before {
            content: '“';
            display: block;
            margin-bottom: -0.12em;
            color: #B78A4A;
            font-family: var(--font-heading);
            font-size: 2.1em;
            font-style: normal;
            line-height: 0.8;
            text-shadow: 0 8px 28px rgba(154, 108, 47, 0.16);
        }

        body.morning-evening-active #morning-evening-source-panel .theme-verse-ref-container {
            margin-left: 1.25rem;
            white-space: nowrap;
        }

        body.morning-evening-active #morning-evening-source-panel .theme-verse-ref {
            color: #A67C45 !important;
            font-size: 0.72em;
            font-style: normal;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-decoration: underline;
            text-decoration-style: dotted;
            text-decoration-color: rgba(166, 124, 69, 0.56);
            text-underline-offset: 0.18em;
            text-shadow: 0 0 18px rgba(183, 138, 74, 0.16);
            transition: color 260ms ease, text-shadow 260ms ease;
        }

        body.morning-evening-active #morning-evening-source-panel .theme-verse-ref:hover {
            color: #8F632C !important;
            text-shadow: 0 0 18px rgba(183, 138, 74, 0.28);
        }

        body.morning-evening-active #morning-evening-source-panel .devotion-text p:not(.theme-verse-p):not(.reference-footer) {
            max-width: 760px;
            margin: 0 auto 1.75rem;
            color: #3A2E22;
            font-family: var(--font-body) !important;
            font-size: calc(clamp(22px, 1.55vw, 30px) * var(--bible-font-scale, 1)) !important;
            font-weight: 400 !important;
            letter-spacing: 0.01em;
            line-height: 2;
            text-indent: 0;
        }

        body.morning-evening-active #morning-evening-source-panel .devotion-header-group + p:not(.theme-verse-p)::first-letter,
        body.morning-evening-active #morning-evening-source-panel .devotion-text > p:not(.theme-verse-p):first-of-type::first-letter {
            float: left;
            margin: 0.08em 0.13em 0 0;
            color: #8A6438;
            font-family: var(--font-heading);
            font-size: 4.9em;
            font-weight: 500;
            line-height: 0.72;
            background: linear-gradient(180deg, #A77A40 0%, #6E4A25 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 7px 22px rgba(100, 67, 31, 0.14);
        }

        body.morning-evening-active .nav-arrow {
            width: 58px;
            height: 58px;
            background: rgba(255, 252, 246, 0.82);
            border: 1px solid rgba(180, 140, 80, 0.14);
            color: #9A6C2F;
            box-shadow: 0 14px 34px rgba(80, 55, 20, 0.12);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            transition: transform 280ms ease, box-shadow 280ms ease, color 280ms ease;
        }

        body.morning-evening-active .nav-arrow:hover {
            color: #80551F;
            transform: translateY(-50%) scale(1.045);
            box-shadow: 0 18px 42px rgba(120, 76, 23, 0.18);
        }

        body {
            background:
                radial-gradient(circle at 50% 18%, rgba(255, 252, 242, 0.78), transparent 34%),
                radial-gradient(circle at 50% 48%, rgba(196, 154, 88, 0.075), transparent 44%),
                linear-gradient(180deg, #F7F2E8 0%, #F3EEE4 45%, #EEE7DA 100%);
            color: #3B2F23;
        }

        body::before {
            inset: 0;
            width: auto;
            height: auto;
            background:
                radial-gradient(ellipse at center, transparent 44%, rgba(88, 58, 22, 0.11) 100%),
                url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='dailyPaper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23dailyPaper)' opacity='0.022'/%3E%3C/svg%3E");
            filter: none;
            opacity: 1;
            z-index: 0;
        }

        body::after {
            top: 22%;
            left: 50%;
            right: auto;
            width: min(980px, 80vw);
            height: 520px;
            transform: translateX(-50%);
            background: radial-gradient(circle, rgba(255, 246, 223, 0.46), transparent 72%);
            filter: blur(44px);
            opacity: 0.68;
        }

        .devotion-date {
            color: #173169;
            font-family: var(--font-heading);
            font-size: clamp(54px, 6vw, 84px);
            font-weight: 500;
            letter-spacing: 0.01em;
            text-shadow: 0 8px 28px rgba(80, 55, 20, 0.08);
        }

        .devotion-date span {
            color: #A67C45 !important;
            letter-spacing: 0.35em !important;
        }

        #date-display::after,
        #prayer-date-display::after,
        #topical-topic-detail .topical-detail-title::after {
            content: '';
            display: block;
            width: 116px;
            height: 18px;
            margin: 13px auto 0;
            background:
                linear-gradient(90deg, transparent, rgba(166, 124, 69, 0.45), transparent),
                radial-gradient(circle at center, rgba(196, 154, 88, 0.95) 0 3px, transparent 4px);
            background-repeat: no-repeat;
            background-size: 100% 1px, 18px 18px;
            background-position: center, center;
        }

        .devotion-grid {
            gap: clamp(30px, 4vw, 46px);
        }

        .devotion-column,
        #prayer-tab-panel .prayer-card,
        .topical-devotion-panel,
        .topical-topic-card,
        .topical-topic-detail {
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.46), transparent 22%),
                rgba(255, 255, 255, 0.72) !important;
            border: 1px solid rgba(191, 155, 98, 0.20) !important;
            border-radius: 32px !important;
            box-shadow:
                0 18px 55px rgba(80, 55, 20, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.62),
                inset 0 0 36px rgba(196, 154, 88, 0.035) !important;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            animation: streamsFadeIn 420ms ease-out both;
        }

        .devotion-column,
        .topical-topic-detail {
            padding: clamp(54px, 6vw, 82px) clamp(42px, 7vw, 92px) !important;
        }

        .devotion-header,
        .topical-section-title,
        .topical-detail-title,
        .topical-topic-name {
            color: #8F632C !important;
            font-family: var(--font-heading);
            letter-spacing: 0.08em;
        }

        .devotion-header {
            font-family: var(--font-ui);
            font-size: 0.86rem;
            font-weight: 700;
            letter-spacing: 0.34em;
            text-transform: uppercase;
        }

        .devotion-header-row::after,
        .topical-section-header::after,
        .topical-reading-section-title::after {
            background:
                linear-gradient(90deg, transparent, rgba(166, 124, 69, 0.42), transparent),
                radial-gradient(circle at center, rgba(196, 154, 88, 0.95) 0 3px, transparent 4px) !important;
            background-repeat: no-repeat !important;
            background-size: 100% 1px, 15px 15px !important;
            background-position: center, center !important;
        }

        .theme-verse-p,
        #prayer-tab-panel .liturgical-verse,
        .topical-reference-copy {
            position: relative;
            max-width: 820px;
            margin: 0 auto 3.2rem !important;
            padding: 2rem 2.35rem !important;
            background: rgba(251, 248, 242, 0.7) !important;
            border: 1px solid rgba(196, 154, 88, 0.22) !important;
            border-radius: 28px !important;
            box-shadow:
                0 18px 45px rgba(80, 55, 20, 0.07),
                inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
            color: #4A3928 !important;
            font-family: var(--font-body) !important;
            font-size: clamp(28px, 2.3vw, 42px) !important;
            font-style: italic;
            font-weight: 500 !important;
            line-height: 1.65 !important;
            text-align: center;
            text-indent: 0 !important;
        }

        .theme-verse-p::before,
        #prayer-tab-panel .liturgical-verse::before,
        .topical-reference-copy::before {
            content: '“';
            display: block;
            margin-bottom: -0.12em;
            color: #C49A58;
            font-family: var(--font-heading);
            font-size: 2.1em;
            font-style: normal;
            line-height: 0.8;
            text-shadow: 0 8px 28px rgba(168, 116, 48, 0.16);
        }

        .theme-verse-ref,
        .verse-ref-link,
        .topical-reference-link {
            color: #B08243 !important;
            font-style: normal;
            font-weight: 700;
            letter-spacing: 0.055em;
            text-decoration: underline;
            text-decoration-style: dotted;
            text-decoration-color: rgba(176, 130, 67, 0.56);
            text-underline-offset: 0.18em;
            text-shadow: 0 0 18px rgba(196, 154, 88, 0.14);
            transition: color 260ms ease, text-shadow 260ms ease;
        }

        .theme-verse-ref:hover,
        .verse-ref-link:hover,
        .topical-reference-link:hover {
            color: #A87430 !important;
            text-shadow: 0 0 18px rgba(196, 154, 88, 0.28);
        }

        .devotion-text p:not(.theme-verse-p):not(.reference-footer),
        #prayer-tab-panel .prayer-body,
        .topical-detail-paragraph,
        .topical-reading-section-description,
        .topical-reference-copy + p {
            max-width: 760px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 1.75rem;
            color: #3B2F23 !important;
            font-family: var(--devotion-reading-font-family) !important;
            font-size: clamp(22px, 1.55vw, 30px) !important;
            font-weight: 400 !important;
            letter-spacing: 0.01em;
            line-height: 1.95 !important;
            text-indent: 0;
        }

        .devotion-header-group + p:not(.theme-verse-p)::first-letter,
        .devotion-text > p:not(.theme-verse-p):first-of-type::first-letter,
        .topical-reading-intro .topical-detail-paragraph:first-child::first-letter {
            float: left;
            margin: 0.08em 0.13em 0 0;
            color: #9A6B35;
            font-family: var(--font-heading);
            font-size: 4.9em;
            font-weight: 500;
            line-height: 0.72;
            background: linear-gradient(180deg, #B6843E 0%, #744D25 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 7px 22px rgba(100, 67, 31, 0.14);
        }

        .view-toggle-wrapper,
        .font-controls,
        .daily-mobile-font-controls,
        .hamburger-drawer-inner {
            background: rgba(255, 252, 246, 0.74) !important;
            border: 1px solid rgba(191, 155, 98, 0.14) !important;
            box-shadow: 0 14px 34px rgba(80, 55, 20, 0.08) !important;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }

        .nav-arrow {
            width: 58px;
            height: 58px;
            background: rgba(255, 252, 246, 0.82);
            border: 1px solid rgba(191, 155, 98, 0.14);
            color: #A87430;
            box-shadow: 0 14px 34px rgba(80, 55, 20, 0.12);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            transition: transform 280ms ease, box-shadow 280ms ease, color 280ms ease;
        }

        .nav-arrow:hover {
            color: #80551F;
            transform: translateY(-50%) scale(1.045);
            box-shadow: 0 18px 42px rgba(120, 76, 23, 0.18);
        }

        .date-toggle-wrapper {
            margin: clamp(48px, 5vw, 76px) auto clamp(44px, 5vw, 68px) !important;
        }

        body.split-view .date-toggle-wrapper {
            margin-bottom: clamp(34px, 4vw, 52px) !important;
        }

        .devotion-grid:not(.stacked),
        #me-devotion-grid:not(.stacked) {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: clamp(28px, 3vw, 56px);
            align-items: start;
            max-width: 1280px;
            margin: 0 auto;
        }

        .devotion-grid.stacked,
        #me-devotion-grid.stacked,
        #prayer-devotion-grid.stacked {
            max-width: 1080px;
            margin: 0 auto;
        }

        body.split-view .devotion-column {
            min-height: 680px;
            padding: clamp(44px, 4vw, 72px) !important;
        }

        body.split-view .devotion-header-row {
            margin-bottom: clamp(24px, 2.4vw, 34px);
            padding-bottom: 14px;
        }

        /* In split, still tuck the date directly under the heading text. */
        body.split-view .devotion-header-row:has(+ .devotion-date-inline--below) {
            margin-bottom: 0 !important;
            padding-bottom: 0 !important;
        }

        body.split-view .theme-verse-p,
        body.split-view #prayer-tab-panel .liturgical-verse,
        body.split-view .topical-reference-copy {
            max-width: 100%;
            margin: 32px auto 40px !important;
            padding: clamp(28px, 3vw, 44px) !important;
            border-radius: 24px !important;
            background: var(--premium-quote-bg) !important;
            border: 1px solid rgba(190, 150, 95, 0.22) !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
            font-size: clamp(22px, 1.65vw, 30px) !important;
            line-height: 1.75 !important;
        }

        body.split-view .streams-scripture {
            max-width: 100% !important;
            margin: 32px auto 40px !important;
            padding: clamp(28px, 3vw, 44px) !important;
            border-radius: 24px !important;
            background: var(--premium-quote-bg) !important;
            border: 1px solid rgba(190, 150, 95, 0.22) !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
            font-size: calc(clamp(22px, 1.65vw, 30px) * var(--bible-font-scale, 1)) !important;
            line-height: 1.75 !important;
        }

        body.split-view .devotion-text p:not(.theme-verse-p):not(.reference-footer),
        body.split-view #prayer-tab-panel .prayer-body,
        body.split-view .topical-detail-paragraph,
        body.split-view .topical-reading-section-description,
        body.split-view #streams-content .streams-body p,
        body.split-view #morning-evening-source-panel .devotion-text p:not(.theme-verse-p):not(.reference-footer) {
            font-size: calc(clamp(18px, 1.1vw, 21px) * var(--bible-font-scale, 1)) !important;
            line-height: 1.85 !important;
        }

        body.split-view .devotion-header-group + p:not(.theme-verse-p)::first-letter,
        body.split-view .devotion-text > p:not(.theme-verse-p):first-of-type::first-letter,
        body.split-view #streams-content .streams-scripture + .streams-body .streams-lead::first-letter,
        body.split-view #morning-evening-source-panel .devotion-header-group + p:not(.theme-verse-p)::first-letter,
        body.split-view #morning-evening-source-panel .devotion-text > p:not(.theme-verse-p):first-of-type::first-letter {
            font-size: 4.8em;
            line-height: 0.85;
        }

        .devotion-column,
        #prayer-tab-panel .prayer-card,
        .topical-devotion-panel,
        .topical-topic-card,
        .topical-topic-detail,
        #streams-source-panel .devotion-column,
        #morning-evening-source-panel .devotion-column {
            background: var(--premium-card-bg) !important;
            border: 1px solid var(--premium-card-border) !important;
            border-radius: 32px !important;
            box-shadow: var(--premium-card-shadow) !important;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }

        .theme-verse-p,
        #prayer-tab-panel .liturgical-verse,
        .topical-reference-copy,
        #streams-content .streams-scripture {
            background: var(--premium-quote-bg) !important;
            border: 1px solid rgba(190, 150, 95, 0.22) !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
        }

        .view-toggle-container,
        .font-controls,
        .daily-mobile-font-controls,
        .hamburger-drawer-inner {
            background: rgba(255, 252, 246, 0.68) !important;
            border: 1px solid rgba(180, 140, 80, 0.14) !important;
            border-radius: 999px !important;
            box-shadow: 0 10px 28px rgba(80, 55, 20, 0.06) !important;
        }

        input:checked + .slider {
            background:
                linear-gradient(180deg, #C89B52 0%, #A87330 100%) !important;
            box-shadow:
                0 10px 28px rgba(168, 115, 48, 0.26),
                inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
        }

        .font-control-btn {
            background: rgba(255, 252, 246, 0.72) !important;
            border: 1px solid rgba(160, 130, 90, 0.12) !important;
            color: var(--text-main) !important;
        }

        .font-control-btn:hover {
            background: rgba(255, 248, 235, 0.92) !important;
            box-shadow: 0 10px 28px rgba(168, 115, 48, 0.12);
        }

        @media (max-width: 980px) {
            .devotion-grid:not(.stacked),
            #me-devotion-grid:not(.stacked) {
                grid-template-columns: 1fr;
            }

            body.split-view .devotion-column {
                min-height: auto;
            }
        }

        body.morning-evening-active.split-view .date-toggle-wrapper {
            margin: clamp(54px, 5vw, 82px) auto clamp(34px, 4vw, 56px) !important;
        }

        body.morning-evening-active.split-view #me-devotion-grid:not(.stacked) {
            max-width: min(1400px, calc(100vw - 176px));
            gap: clamp(38px, 3vw, 48px);
            align-items: start;
        }

        body.morning-evening-active.split-view #morning-evening-source-panel .devotion-column {
            min-height: 680px;
            padding: clamp(44px, 4vw, 72px) !important;
            border-radius: 32px !important;
        }

        body.morning-evening-active.split-view #morning-evening-source-panel .devotion-header-row {
            margin-bottom: clamp(24px, 2.4vw, 34px);
            padding-bottom: 14px;
            border-bottom: 0;
        }

        /* Tuck the date directly under the heading in M&E split too — drop this
           per-source row's underline and gap (it out-specifies the generic
           :has() rule above). */
        body.morning-evening-active.split-view #morning-evening-source-panel .devotion-header-row:has(+ .devotion-date-inline--below) {
            margin-bottom: 0 !important;
            padding-bottom: 0 !important;
            border-bottom: 0;
        }

        body.morning-evening-active.split-view #morning-evening-source-panel .devotion-header-row:has(+ .devotion-date-inline--below)::after {
            display: none;
        }

        body.morning-evening-active.split-view #morning-evening-source-panel .devotion-header {
            color: #2A1F16 !important;
            font-family: var(--font-heading) !important;
            font-size: clamp(1.08rem, 1.35vw, 1.34rem) !important;
            font-weight: 700 !important;
            letter-spacing: 0.02em;
            text-transform: uppercase;
        }

        body.morning-evening-active.split-view #morning-evening-source-panel .devotion-header-row::after {
            width: min(310px, 72%);
            bottom: -8px;
        }

        body.morning-evening-active.split-view #morning-evening-source-panel .devotion-topic,
        body.morning-evening-active.split-view #morning-evening-source-panel .devotion-text h1,
        body.morning-evening-active.split-view #morning-evening-source-panel .devotion-text h2,
        body.morning-evening-active.split-view #morning-evening-source-panel .devotion-text h3 {
            max-width: 100%;
            margin: clamp(34px, 4vw, 52px) auto clamp(34px, 4vw, 52px);
            color: #2A1F16 !important;
            font-family: var(--font-heading) !important;
            font-size: clamp(1.46rem, 1.9vw, 2.05rem) !important;
            font-weight: 600 !important;
            line-height: 1.22 !important;
            letter-spacing: 0.01em;
            text-align: left !important;
        }

        body.morning-evening-active.split-view #morning-evening-source-panel .theme-verse-p {
            max-width: 100%;
            min-height: auto;
            margin: clamp(32px, 3vw, 40px) auto clamp(40px, 4vw, 52px) !important;
            padding: clamp(28px, 3vw, 44px) !important;
            border-radius: 24px !important;
            font-size: calc(clamp(22px, 1.65vw, 30px) * var(--bible-font-scale, 1)) !important;
            line-height: 1.75 !important;
            text-align: left;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        body.morning-evening-active.split-view #morning-evening-source-panel .theme-verse-p::before {
            align-self: flex-start;
            margin-bottom: 0.24em;
            font-size: 1.45em;
        }

        body.morning-evening-active.split-view #morning-evening-source-panel .theme-verse-ref-container {
            display: block;
            margin: 0.85rem 0 0;
        }

        body.morning-evening-active.split-view #morning-evening-source-panel .theme-verse-ref {
            font-size: 0.78em;
            letter-spacing: 0.08em;
        }

        body.morning-evening-active.split-view #morning-evening-source-panel .devotion-text p:not(.theme-verse-p):not(.reference-footer) {
            max-width: 100%;
            font-size: calc(clamp(18px, 1.1vw, 21px) * var(--bible-font-scale, 1)) !important;
            line-height: 1.85 !important;
        }

        body.morning-evening-active.split-view #morning-evening-source-panel .devotion-header-group + p:not(.theme-verse-p)::first-letter,
        body.morning-evening-active.split-view #morning-evening-source-panel .devotion-text > p:not(.theme-verse-p):first-of-type::first-letter {
            font-size: 4.8em;
            line-height: 0.85;
        }

        @keyframes streamsFadeIn {
            from {
                opacity: 0;
                transform: translateY(12px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @media (max-width: 768px) {
            #highlight-toolbar {
                display: none !important;
            }

            body.streams-active #streams-source-panel .devotion-column {
                max-width: calc(100vw - 24px);
                padding: 36px 24px;
                border-radius: 24px;
            }

            body.streams-active #streams-content .streams-scripture {
                padding: 1.45rem 1.35rem;
                font-size: calc(clamp(24px, 7vw, 34px) * var(--bible-font-scale, 1));
            }

            body.streams-active #streams-content .streams-body p {
                font-size: calc(clamp(19px, 5.5vw, 23px) * var(--bible-font-scale, 1)) !important;
                line-height: 1.86;
            }

            body.morning-evening-active #morning-evening-source-panel .devotion-grid {
                max-width: calc(100vw - 24px);
            }

            body.morning-evening-active #morning-evening-source-panel .devotion-column {
                padding: 36px 24px;
                border-radius: 24px;
            }

            body.morning-evening-active #morning-evening-source-panel .theme-verse-p {
                padding: 1.45rem 1.35rem;
                font-size: calc(clamp(22px, 6vw, 32px) * var(--bible-font-scale, 1)) !important;
            }

            body.morning-evening-active #morning-evening-source-panel .devotion-text p:not(.theme-verse-p):not(.reference-footer) {
                font-size: calc(clamp(19px, 5.5vw, 23px) * var(--bible-font-scale, 1)) !important;
                line-height: 1.86;
            }

            .devotion-column,
            #prayer-tab-panel .prayer-card,
            .topical-devotion-panel,
            .topical-topic-card,
            .topical-topic-detail {
                border-radius: 24px !important;
            }

            .devotion-column,
            .topical-topic-detail {
                padding: 36px 24px !important;
            }

            .theme-verse-p,
            #prayer-tab-panel .liturgical-verse,
            .topical-reference-copy {
                padding: 1.45rem 1.35rem !important;
                font-size: clamp(22px, 6vw, 32px) !important;
            }

            .devotion-text p:not(.theme-verse-p):not(.reference-footer),
            #prayer-tab-panel .prayer-body,
            .topical-detail-paragraph,
            .topical-reading-section-description {
                font-size: clamp(19px, 5.5vw, 23px) !important;
                line-height: 1.86 !important;
            }

            body:not(.streams-active) #streams-content .streams-scripture {
                padding-inline: 0;
                text-align: left;
            }

            #streams-content .streams-scripture + .streams-body .streams-lead::first-letter {
                font-size: 3.5em;
            }

            #streams-content .streams-poem {
                padding: 20px 22px;
            }

            .devotion-grid {
                grid-template-columns: 1fr;
                gap: 24px;
                /* Slightly tighter gap */
            }

            .content-area {
                padding-left: 0 !important;
                padding-right: 0 !important;
            }

            .devotion-container {
                padding: 0.5rem 0 80px 0 !important;
                /* Bottom padding clears fixed bottom nav */
                width: 100% !important;
                max-width: none !important;
                position: relative;
            }

            .devotion-tabs {
                gap: 10px;
                padding: 0 12px;
                margin-bottom: 16px;
                width: calc(100% - 24px);
            }

            .devotion-tab-btn {
                flex: 1 1 0;
                min-width: 0;
                padding: 11px 14px;
                font-size: 0.88rem;
            }

            .devotion-column {
                padding: 24px 20px;
                margin: 0 8px 16px 8px;
                max-width: none;
                border-radius: 16px !important;
                box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07) !important;
                background: #FFFCF9 !important;
                width: calc(100% - 16px) !important;
            }

            .morning-header::before,
            .evening-header::before {
                display: none !important;
                /* Hide header indicators if they look like borders */
            }

            .morning-header,
            .evening-header {
                padding-bottom: 0;
                margin-bottom: 0;
                position: static !important;
                transform: none !important;
                text-align: left !important;
                width: auto !important;
                background: transparent !important;
            }

            .devotion-header-row {
                flex-wrap: wrap;
                gap: 6px;
                margin-bottom: 16px;
                padding-bottom: 12px;
            }

            .prayer-inline-label {
                font-size: 0.92rem;
                text-align: left;
            }

            .devotion-text {
                font-size: 1.1em;
                /* Use em for scaling */
                line-height: 1.6;
                text-align: justify !important;
            }

            /* Convert poetic format to prose paragraphs in stacked view */
            .devotion-text br {
                display: none !important;
            }

            .devotion-text p {
                margin-bottom: 1.2rem;
            }

            .prayer-para {
                margin-bottom: 1.2rem;
            }

            .devotion-topic {
                font-size: 1.1em;
                margin-top: 0.5rem;
                text-align: center !important;
            }

            .devotion-date {
                font-size: 1.3em;
                margin-top: 0 !important;
                padding-bottom: 4px !important;
            }

            .date-toggle-wrapper {
                margin-bottom: 0.5rem !important;
                /* Reduced from 1rem default */
                margin-top: 0 !important;
            }

            .view-toggle-container {
                display: none !important;
                /* Hide view toggle on mobile - always stacked */
            }

            #main-header {
                padding: max(48px, env(safe-area-inset-top, 0px)) 18px 40px !important;
                border-bottom-left-radius: 24px;
                border-bottom-right-radius: 24px;
            }

            .header-lockup {
                gap: 12px !important;
                padding-top: 26px !important;
                align-items: center !important;
                max-width: calc(100% - 120px) !important;
            }

            .header-lockup h1 {
                font-size: 2rem;
            }

            .hero-subtitle {
                font-size: 1rem;
                margin-top: 6px !important;
            }

            .header-controls {
                top: 10px;
                right: 15px;
            }

            .auth-controls .custom-select-wrapper {
                width: 130px !important;
            }

            .launch-notice {
                display: none;
                /* Hide notice in small header to save space */
            }

            body.is-mobile #main-header #languageSelectWrapperHeader {
                display: none !important;
                /* Hide header dropdown on mobile */
            }

            .topical-devotion-panel {
                margin: 0 10px;
                padding: 16px 14px 32px;
                border-radius: 28px;
                background:
                    radial-gradient(circle at 12% 0%, rgba(255, 235, 198, 0.46), transparent 32%),
                    linear-gradient(180deg, rgba(255, 253, 248, 0.94), rgba(249, 243, 232, 0.88));
                border-color: rgba(190, 158, 110, 0.2);
                box-shadow:
                    inset 0 1px 0 rgba(255, 255, 255, 0.58),
                    0 18px 44px rgba(91, 64, 27, 0.12);
            }

            .topical-section-tabs {
                display: grid;
                grid-template-columns: max-content minmax(0, 1fr);
                align-items: center;
                justify-content: start;
                gap: 10px;
                margin-bottom: 18px;
                z-index: 6;
            }

            .topical-section-menu-toggle {
                display: flex;
                width: fit-content;
                max-width: 100%;
                align-items: center;
                justify-content: space-between;
                gap: 14px;
                border: 1px solid rgba(34, 70, 176, 0.14);
                border-radius: 22px;
                background:
                    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(251, 246, 236, 0.88));
                color: #2c2a25;
                padding: 15px 16px;
                font-family: var(--font-ui);
                font-size: 0.92rem;
                font-weight: 800;
                letter-spacing: 0.01em;
                box-shadow:
                    inset 0 1px 0 rgba(255, 255, 255, 0.78),
                    0 12px 28px rgba(58, 44, 24, 0.1),
                    0 0 0 1px rgba(255, 255, 255, 0.55);
            }

            .topical-mobile-topic-actions {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                gap: 12px;
                min-width: 0;
                white-space: nowrap;
            }

            .topical-mobile-action-link {
                color: #6f5638;
                font-family: var(--font-ui);
                font-size: clamp(0.68rem, 2.2vw, 0.82rem);
                font-weight: 800;
                line-height: 1;
                text-decoration: none;
                border-bottom: 1px solid rgba(184, 138, 77, 0.38);
                padding-bottom: 3px;
            }

            .topical-mobile-action-link:hover {
                color: var(--accent-blue-strong);
                border-bottom-color: currentColor;
            }

            html.dark-mode .topical-section-menu-toggle {
                background: linear-gradient(180deg, rgba(31, 42, 64, 0.92), rgba(20, 28, 44, 0.84));
                border-color: rgba(126, 156, 214, 0.16);
                color: rgba(230, 237, 252, 0.92);
                box-shadow:
                    inset 0 1px 0 rgba(255, 255, 255, 0.05),
                    0 12px 26px rgba(2, 8, 23, 0.2);
            }

            html.dark-mode:not(.dark-mode-b) .topical-section-menu-toggle {
                background: linear-gradient(180deg, rgba(39, 39, 42, 0.94), rgba(31, 31, 34, 0.86));
                border-color: rgba(255, 255, 255, 0.08);
                color: #e4e4e7;
            }

            .topical-section-menu-icon {
                width: 42px;
                height: 42px;
                display: inline-grid;
                place-content: center;
                gap: 4px;
                flex: 0 0 auto;
                border-radius: 14px;
                background: linear-gradient(135deg, rgba(35, 70, 176, 0.12), rgba(184, 138, 77, 0.14));
                color: #2f2a20;
            }

            .topical-section-menu-icon span {
                display: block;
                width: 18px;
                height: 2px;
                border-radius: 999px;
                background: currentColor;
            }

            .topical-section-menu-label {
                flex: 0 1 auto;
                text-align: left;
                white-space: nowrap;
            }

            .topical-section-menu {
                display: none;
                grid-column: 1 / -1;
                grid-template-columns: 1fr;
                gap: 8px;
                margin-top: 12px;
                padding: 10px;
                width: max-content;
                max-width: 100%;
                border-radius: 22px;
                overflow: visible;
                border: 1px solid rgba(190, 158, 110, 0.18);
                background: rgba(255, 252, 247, 0.96);
                box-shadow:
                    0 16px 34px rgba(88, 63, 29, 0.14),
                    inset 0 1px 0 rgba(255, 255, 255, 0.72);
            }

            .topical-section-menu::after {
                display: none;
            }

            .topical-section-tabs.open .topical-section-menu {
                display: grid;
            }

            .topical-section-tab {
                min-width: 0;
                min-height: 54px;
                padding: 12px 16px;
                font-size: 0.85rem;
                justify-content: flex-start;
                text-align: left;
                width: 100%;
                border-radius: 16px;
                letter-spacing: 0.02em;
            }

            .topical-section-download {
                min-height: 54px;
                padding: 0 16px;
                font-size: 0.78rem;
                margin-left: 0;
            }

            .topical-detail-shell {
                gap: 18px;
            }

            .topical-detail-topbar {
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto;
                align-items: center;
                gap: 10px;
                flex-wrap: nowrap;
            }

            .topical-detail-actions {
                display: flex;
                align-items: center;
                gap: 8px;
                min-width: 0;
            }

            .topical-detail-hero .topical-detail-actions {
                display: none;
            }

            .topical-detail-hero .topical-detail-category {
                display: none;
            }

            .topical-back-button,
            .topical-download-button,
            .topical-nav-button {
                min-height: 46px;
                padding: 12px 16px;
                border-radius: 18px;
                background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(251, 246, 236, 0.84));
                border-color: rgba(190, 158, 110, 0.18);
                box-shadow:
                    inset 0 1px 0 rgba(255, 255, 255, 0.66),
                    0 10px 22px rgba(88, 63, 29, 0.08);
                font-size: 0.88rem;
                font-weight: 800;
            }

            .topical-download-button {
                width: auto;
                padding: 12px 16px;
                overflow: visible;
                color: var(--text-charcoal);
                position: static;
            }

            .topical-download-button::before {
                display: none;
            }

            .topical-detail-hero {
                min-height: auto;
                padding: 22px 26px 26px;
                border-radius: 28px;
                background:
                    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.86), transparent 34%),
                    radial-gradient(circle at 18% 92%, rgba(255, 255, 255, 0.66), transparent 34%),
                    radial-gradient(circle at 88% 92%, rgba(219, 198, 158, 0.14), transparent 30%),
                    linear-gradient(150deg, #FCF7ED 0%, #F0E7D5 100%);
                border-color: rgba(176, 125, 30, 0.2);
                box-shadow:
                    inset 0 1px 0 rgba(255, 255, 255, 0.68),
                    0 12px 28px rgba(120, 80, 20, 0.08);
                min-height: auto;
            }

            .topical-detail-hero::after {
                left: 26px;
                right: auto;
                bottom: 22px;
                width: min(230px, calc(100% - 52px));
                display: block;
            }

            .topical-detail-hero-copy {
                width: 100%;
                margin-left: 0;
                justify-items: center;
                text-align: center;
                gap: 12px;
                padding-bottom: 18px;
            }

            .topical-detail-hero-copy::after {
                width: min(240px, 72%);
                margin-top: 2px;
            }

            .topical-topic-grid {
                grid-template-columns: 1fr;
                gap: 16px;
            }

            .topical-topic-card {
                min-height: auto;
                padding: 24px 20px 24px;
                border-radius: 24px;
            }

            .topical-topic-head {
                margin-bottom: 18px;
            }

            .topical-topic-name {
                font-size: 1.45rem;
            }

            .topical-topic-meta {
                margin-bottom: 20px;
                font-size: 1rem;
                line-height: 1.65;
            }

            .topical-detail-topbar,
            .topical-detail-footer {
                flex-direction: column;
                align-items: stretch;
            }

            .topical-detail-hero,
            .topical-reading-intro,
            .topical-reading-section {
                width: 100%;
                border-radius: 24px;
            }

            .topical-detail-title {
                font-size: 2.45rem;
                line-height: 0.98;
                letter-spacing: -0.04em;
                color: var(--text-charcoal);
                white-space: normal;
                text-wrap: balance;
            }

            .topical-detail-category {
                padding: 8px 13px;
                background: rgba(255, 255, 255, 0.68);
                color: #8f6b3f;
                letter-spacing: 0.14em;
                box-shadow:
                    inset 0 1px 0 rgba(255, 255, 255, 0.72),
                    0 8px 18px rgba(75, 57, 26, 0.08);
            }

            .topical-detail-summary,
            .topical-detail-paragraph,
            .topical-reading-section-description,
            .topical-reference-copy {
                font-size: var(--devotion-reading-font-size) !important;
                line-height: 1.78;
            }

            .topical-detail-summary {
                width: 100%;
                font-size: clamp(0.56rem, 1.9vw, 0.92rem) !important;
                line-height: 1.4;
                letter-spacing: 0;
                max-width: 100%;
                white-space: nowrap;
                overflow: visible;
                color: #705f4b;
                opacity: 1;
                text-align: center;
                text-shadow: 0 1px 0 rgba(255, 255, 255, 0.68);
            }

            .topical-reading-intro .topical-detail-paragraph {
                width: 100%;
            }

            .topical-reading-intro,
            .topical-reading-section {
                padding: 24px 22px;
                background: linear-gradient(180deg, #FDF9F2 0%, #FAF6EE 100%);
                border-color: rgba(176, 125, 30, 0.16);
                box-shadow:
                    inset 0 1px 0 rgba(255, 255, 255, 0.6),
                    0 2px 8px rgba(120, 80, 20, 0.05);
            }

            .topical-reading-section {
                padding: 26px 22px 28px;
                background:
                    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.9), transparent 34%),
                    linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(251, 246, 236, 0.94));
            }

            .topical-reading-section-head {
                padding-bottom: 20px;
                margin-bottom: 20px;
            }

            .topical-reading-section-kicker {
                padding: 7px 10px;
                font-size: 0.64rem;
                letter-spacing: 0.16em;
            }

            .topical-reading-section-title {
                font-size: 1.9rem;
                line-height: 1.08;
            }

            .topical-reference-list {
                grid-template-columns: 1fr;
                gap: 14px;
            }

            .topical-reference-card {
                padding: 22px 20px 20px;
                border-radius: 22px;
                background:
                    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.84), transparent 38%),
                    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 249, 238, 0.72));
                box-shadow:
                    inset 0 1px 0 rgba(255, 255, 255, 0.56),
                    0 10px 22px rgba(92, 62, 22, 0.05);
            }

            .topical-detail-footer {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 10px;
            }

            .topical-nav-button {
                width: 100%;
                justify-content: center;
                white-space: nowrap;
                padding-inline: 10px;
                font-size: 0.86rem;
            }

            .topical-nav-button.disabled,
            .topical-nav-button:disabled {
                display: none;
            }

            .devotion-text,
            .devotion-text p,
            .prayer-para,
            .theme-verse-p,
            .topical-detail-paragraph,
            .topical-reading-section-description,
            .topical-reference-copy,
            .topical-reading-intro .topical-detail-paragraph:first-child {
                font-family: var(--devotion-reading-font-family) !important;
                font-size: var(--devotion-reading-font-size) !important;
                font-weight: var(--devotion-reading-font-weight) !important;
            }
        }

        /* Topic Devotion theme parity: phone parchment + Study-style dark A/B */
        html:not(.parchment-off):not(.dark-mode) .topical-section-menu::after {
            background:
                linear-gradient(90deg, rgba(79, 63, 210, 0), rgba(79, 63, 210, 0.84), rgba(79, 63, 210, 0));
            box-shadow:
                0 -12px 32px rgba(79, 63, 210, 0.18),
                0 6px 18px rgba(79, 63, 210, 0.12);
        }

        html:not(.parchment-off):not(.dark-mode) .topical-section-tab:hover {
            color: var(--topical-reference-blue);
        }

        html:not(.parchment-off):not(.dark-mode) .topical-section-tab.active {
            background:
                linear-gradient(180deg, #6856E1 0%, var(--topical-reference-blue) 100%);
            box-shadow:
                0 8px 20px rgba(79, 63, 210, 0.25),
                inset 0 1px 1px rgba(255, 255, 255, 0.25),
                inset 0 -1px 0 rgba(57, 37, 151, 0.24);
        }

        html:not(.parchment-off):not(.dark-mode) .topical-topic-name,
        html:not(.parchment-off):not(.dark-mode) .topical-detail-title,
        html:not(.parchment-off):not(.dark-mode) .topical-reading-section-title,
        html:not(.parchment-off):not(.dark-mode) .topical-detail-category,
        html:not(.parchment-off):not(.dark-mode) .topical-reading-section-kicker,
        html:not(.parchment-off):not(.dark-mode) .topical-section-menu-label,
        html:not(.parchment-off):not(.dark-mode) .topical-mobile-action-link {
            color: var(--topical-reference-blue);
        }

        html:not(.parchment-off):not(.dark-mode) .topical-detail-title,
        html:not(.parchment-off):not(.dark-mode) .topical-topic-name,
        html:not(.parchment-off):not(.dark-mode) .topical-topic-title-link {
            color: rgba(110, 82, 40, 0.85);
        }

        html:not(.parchment-off):not(.dark-mode) .topical-topic-title-link:hover,
        html:not(.parchment-off):not(.dark-mode) .topical-mobile-action-link:hover {
            color: var(--topical-reference-blue-strong);
        }

        html:not(.parchment-off):not(.dark-mode) .topical-section-menu-toggle,
        html:not(.parchment-off):not(.dark-mode) .topical-topic-icon {
            border-color: rgba(79, 63, 210, 0.28);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.78),
                0 12px 24px rgba(79, 63, 210, 0.12),
                0 0 0 1px rgba(79, 63, 210, 0.08);
        }

        html:not(.parchment-off):not(.dark-mode) .topical-topic-card:hover .topical-topic-icon {
            border-color: rgba(79, 63, 210, 0.42);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.82),
                0 14px 28px rgba(79, 63, 210, 0.18),
                0 0 0 1px rgba(79, 63, 210, 0.14);
        }

        html:not(.parchment-off):not(.dark-mode) .topical-detail-hero {
            background:
                radial-gradient(circle at top left, rgba(255, 255, 255, 0.95), rgba(244, 238, 223, 0.92) 35%, rgba(247, 247, 245, 0.96) 70%),
                linear-gradient(135deg, rgba(120, 92, 255, 0.04) 0%, rgba(212, 175, 55, 0.06) 100%);
            border: 1px solid rgba(255, 255, 255, 0.65);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.88),
                inset 220px -84px 160px rgba(255, 255, 255, 0.82),
                inset -220px -84px 176px rgba(212, 175, 55, 0.05),
                0 20px 60px rgba(120, 92, 255, 0.06),
                0 8px 24px rgba(0, 0, 0, 0.04),
                0 34px 76px rgba(86, 62, 27, 0.04);
        }

        html:not(.parchment-off):not(.dark-mode) .topical-detail-hero::before {
            background:
                linear-gradient(115deg, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 0.5) 42%, rgba(255, 255, 255, 0.0) 72%),
                radial-gradient(ellipse at 0% 10%, rgba(255, 255, 255, 0.88), transparent 34%),
                radial-gradient(ellipse at 100% 12%, rgba(212, 175, 55, 0.06), transparent 34%),
                radial-gradient(ellipse at 0% 100%, rgba(255, 255, 255, 0.98), transparent 42%),
                radial-gradient(ellipse at 100% 100%, rgba(212, 175, 55, 0.08), transparent 42%),
                radial-gradient(ellipse at 50% 100%, rgba(248, 245, 238, 0.72), transparent 48%),
                radial-gradient(circle at 50% 55%, rgba(255, 255, 255, 0), rgba(212, 175, 55, 0.04) 100%);
        }

        html:not(.parchment-off):not(.dark-mode) .topical-detail-hero::after {
            background:
                radial-gradient(ellipse at 0% 100%, rgba(255, 255, 255, 0.76), transparent 46%),
                radial-gradient(ellipse at 100% 100%, rgba(212, 175, 55, 0.08), transparent 48%),
                linear-gradient(90deg, rgba(212, 175, 55, 0), rgba(212, 175, 55, 0.1), rgba(212, 175, 55, 0.28), rgba(212, 175, 55, 0.1), rgba(212, 175, 55, 0)) center top / min(460px, calc(100% - 76px)) 2px no-repeat;
        }

        html.dark-mode:not(.dark-mode-b) .topical-devotion-panel {
            background: linear-gradient(180deg, rgba(38, 35, 31, 0.98), rgba(30, 28, 25, 0.96));
            border-color: rgba(197, 160, 89, 0.16);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.04),
                0 22px 48px rgba(0, 0, 0, 0.34),
                0 42px 86px rgba(0, 0, 0, 0.24);
        }

        html.dark-mode:not(.dark-mode-b) .topical-devotion-panel::before {
            background:
                radial-gradient(circle at 12% 0%, rgba(197, 160, 89, 0.12), transparent 24%),
                radial-gradient(circle at 88% 8%, rgba(255, 255, 255, 0.03), transparent 22%);
        }

        html.dark-mode.dark-mode-b .topical-devotion-panel {
            background: linear-gradient(180deg, rgba(20, 27, 51, 0.98), rgba(16, 23, 43, 0.96));
            border-color: rgba(110, 134, 198, 0.24);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.05),
                0 22px 48px rgba(2, 8, 23, 0.34),
                0 42px 86px rgba(2, 8, 23, 0.24);
        }

        html.dark-mode.dark-mode-b .topical-devotion-panel::before {
            background:
                radial-gradient(circle at 12% 0%, rgba(159, 194, 255, 0.12), transparent 24%),
                radial-gradient(circle at 88% 8%, rgba(84, 110, 176, 0.16), transparent 22%);
        }

        html.dark-mode:not(.dark-mode-b) .topical-section-menu,
        html.dark-mode:not(.dark-mode-b) .topical-section-menu-toggle {
            background: linear-gradient(180deg, rgba(45, 42, 37, 0.98), rgba(36, 33, 29, 0.96));
            border-color: rgba(197, 160, 89, 0.18);
            color: #F3EEE6;
        }

        html.dark-mode.dark-mode-b .topical-section-menu,
        html.dark-mode.dark-mode-b .topical-section-menu-toggle {
            background: linear-gradient(180deg, rgba(26, 36, 68, 0.98), rgba(20, 27, 51, 0.96));
            border-color: rgba(110, 134, 198, 0.24);
            color: #E2E8F0;
        }

        html.dark-mode:not(.dark-mode-b) .topical-section-menu::before {
            background:
                radial-gradient(circle at 10% 16%, rgba(197, 160, 89, 0.12), transparent 22%),
                radial-gradient(circle at 92% 12%, rgba(255, 255, 255, 0.03), transparent 22%);
        }

        html.dark-mode:not(.dark-mode-b) .topical-section-menu::after {
            background:
                linear-gradient(90deg, rgba(197, 160, 89, 0), rgba(197, 160, 89, 0.72), rgba(197, 160, 89, 0));
            box-shadow:
                0 -12px 32px rgba(197, 160, 89, 0.14),
                0 6px 18px rgba(0, 0, 0, 0.18);
        }

        html.dark-mode.dark-mode-b .topical-section-menu::before {
            background:
                radial-gradient(circle at 10% 16%, rgba(159, 194, 255, 0.1), transparent 22%),
                radial-gradient(circle at 92% 12%, rgba(84, 110, 176, 0.14), transparent 22%);
        }

        html.dark-mode.dark-mode-b .topical-section-menu::after {
            background:
                linear-gradient(90deg, rgba(159, 194, 255, 0), rgba(159, 194, 255, 0.72), rgba(159, 194, 255, 0));
            box-shadow:
                0 -12px 32px rgba(159, 194, 255, 0.14),
                0 6px 18px rgba(2, 8, 23, 0.2);
        }

        html.dark-mode:not(.dark-mode-b) .topical-section-tab {
            background: linear-gradient(180deg, rgba(49, 47, 43, 0.92), rgba(39, 37, 34, 0.9));
            border-color: rgba(197, 160, 89, 0.12);
            color: #D6D0C5;
        }

        html.dark-mode.dark-mode-b .topical-section-tab {
            background: linear-gradient(180deg, rgba(30, 41, 78, 0.92), rgba(24, 33, 62, 0.9));
            border-color: rgba(110, 134, 198, 0.18);
            color: #CBD5E1;
        }

        html.dark-mode:not(.dark-mode-b) .topical-section-tab:hover,
        html.dark-mode:not(.dark-mode-b) .topical-section-tab.active {
            color: #FFFFFF;
            border-color: rgba(197, 160, 89, 0.24);
        }

        html.dark-mode.dark-mode-b .topical-section-tab:hover,
        html.dark-mode.dark-mode-b .topical-section-tab.active {
            color: #FFFFFF;
            border-color: rgba(159, 194, 255, 0.26);
        }

        html.dark-mode:not(.dark-mode-b) .topical-section-tab.active {
            background: linear-gradient(180deg, #D6B277 0%, #A17843 100%);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.14),
                0 14px 28px rgba(0, 0, 0, 0.26),
                0 0 0 1px rgba(197, 160, 89, 0.2);
        }

        html.dark-mode.dark-mode-b .topical-section-tab.active {
            background: linear-gradient(180deg, #5D87E8 0%, #365FBF 100%);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.16),
                0 14px 28px rgba(2, 8, 23, 0.32),
                0 0 0 1px rgba(159, 194, 255, 0.18);
        }

        html.dark-mode:not(.dark-mode-b) .topical-topic-card,
        html.dark-mode:not(.dark-mode-b) .topical-detail-hero,
        html.dark-mode:not(.dark-mode-b) .topical-reading-intro,
        html.dark-mode:not(.dark-mode-b) .topical-reading-section,
        html.dark-mode:not(.dark-mode-b) .topical-reference-card {
            background: linear-gradient(180deg, rgba(43, 40, 35, 0.94), rgba(34, 31, 28, 0.94));
            border-color: rgba(197, 160, 89, 0.16);
            color: #F3EEE6;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.04),
                0 16px 38px rgba(0, 0, 0, 0.32);
        }

        html.dark-mode.dark-mode-b .topical-topic-card,
        html.dark-mode.dark-mode-b .topical-detail-hero,
        html.dark-mode.dark-mode-b .topical-reading-intro,
        html.dark-mode.dark-mode-b .topical-reading-section,
        html.dark-mode.dark-mode-b .topical-reference-card {
            background: linear-gradient(180deg, rgba(29, 40, 80, 0.94), rgba(20, 27, 51, 0.94));
            border-color: rgba(110, 134, 198, 0.22);
            color: #E2E8F0;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.05),
                0 16px 38px rgba(2, 8, 23, 0.32);
        }

        html.dark-mode:not(.dark-mode-b) .topical-detail-hero::before {
            background:
                linear-gradient(115deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.035) 42%, rgba(255, 255, 255, 0) 72%),
                radial-gradient(ellipse at 0% 10%, rgba(255, 255, 255, 0.045), transparent 34%),
                radial-gradient(ellipse at 100% 12%, rgba(197, 160, 89, 0.1), transparent 34%),
                radial-gradient(ellipse at 100% 100%, rgba(197, 160, 89, 0.12), transparent 42%),
                radial-gradient(circle at 50% 55%, rgba(255, 255, 255, 0), rgba(197, 160, 89, 0.045) 100%);
        }

        html.dark-mode.dark-mode-b .topical-detail-hero::before {
            background:
                linear-gradient(115deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.04) 42%, rgba(255, 255, 255, 0) 72%),
                radial-gradient(ellipse at 0% 10%, rgba(159, 194, 255, 0.05), transparent 34%),
                radial-gradient(ellipse at 100% 12%, rgba(159, 194, 255, 0.12), transparent 34%),
                radial-gradient(ellipse at 100% 100%, rgba(84, 110, 176, 0.14), transparent 42%),
                radial-gradient(circle at 50% 55%, rgba(255, 255, 255, 0), rgba(159, 194, 255, 0.055) 100%);
        }

        html.dark-mode:not(.dark-mode-b) .topical-detail-hero-copy::after {
            background:
                linear-gradient(90deg, rgba(197, 160, 89, 0), rgba(197, 160, 89, 0.46), rgba(197, 160, 89, 0));
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
        }

        html.dark-mode.dark-mode-b .topical-detail-hero-copy::after {
            background:
                linear-gradient(90deg, rgba(159, 194, 255, 0), rgba(159, 194, 255, 0.44), rgba(159, 194, 255, 0));
            box-shadow: 0 8px 20px rgba(2, 8, 23, 0.2);
        }

        html.dark-mode:not(.dark-mode-b) .topical-topic-name,
        html.dark-mode:not(.dark-mode-b) .topical-detail-title,
        html.dark-mode:not(.dark-mode-b) .topical-reading-section-title,
        html.dark-mode:not(.dark-mode-b) .topical-detail-category,
        html.dark-mode:not(.dark-mode-b) .topical-reading-section-kicker,
        html.dark-mode:not(.dark-mode-b) .topical-topic-button,
        html.dark-mode:not(.dark-mode-b) .topical-mobile-action-link {
            color: #D6B277;
            -webkit-text-fill-color: #D6B277;
        }

        html.dark-mode.dark-mode-b .topical-topic-name,
        html.dark-mode.dark-mode-b .topical-detail-title,
        html.dark-mode.dark-mode-b .topical-reading-section-title,
        html.dark-mode.dark-mode-b .topical-detail-category,
        html.dark-mode.dark-mode-b .topical-reading-section-kicker,
        html.dark-mode.dark-mode-b .topical-topic-button,
        html.dark-mode.dark-mode-b .topical-mobile-action-link {
            color: #9FC2FF;
            -webkit-text-fill-color: #9FC2FF;
        }

        html.dark-mode:not(.dark-mode-b) .topical-topic-meta,
        html.dark-mode:not(.dark-mode-b) .topical-detail-summary,
        html.dark-mode:not(.dark-mode-b) .topical-detail-paragraph,
        html.dark-mode:not(.dark-mode-b) .topical-reading-section-description,
        html.dark-mode:not(.dark-mode-b) .topical-reference-copy {
            color: #D8D0C4;
        }

        html.dark-mode.dark-mode-b .topical-topic-meta,
        html.dark-mode.dark-mode-b .topical-detail-summary,
        html.dark-mode.dark-mode-b .topical-detail-paragraph,
        html.dark-mode.dark-mode-b .topical-reading-section-description,
        html.dark-mode.dark-mode-b .topical-reference-copy {
            color: #D8DBE7;
        }

        html.dark-mode:not(.dark-mode-b) .topical-topic-icon,
        html.dark-mode:not(.dark-mode-b) .topical-back-button,
        html.dark-mode:not(.dark-mode-b) .topical-download-button,
        html.dark-mode:not(.dark-mode-b) .topical-nav-button {
            background: linear-gradient(180deg, rgba(49, 47, 43, 0.76), rgba(37, 35, 32, 0.72));
            border-color: rgba(197, 160, 89, 0.24);
            color: #F3EEE6;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.07),
                0 10px 24px rgba(0, 0, 0, 0.24);
        }

        html.dark-mode.dark-mode-b .topical-topic-icon,
        html.dark-mode.dark-mode-b .topical-back-button,
        html.dark-mode.dark-mode-b .topical-download-button,
        html.dark-mode.dark-mode-b .topical-nav-button {
            background: linear-gradient(180deg, rgba(31, 42, 79, 0.82), rgba(20, 27, 51, 0.76));
            border-color: rgba(110, 134, 198, 0.28);
            color: #E2E8F0;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.08),
                0 10px 24px rgba(2, 8, 23, 0.26);
        }

        html.dark-mode:not(.dark-mode-b) .topical-reading-section-head {
            border-bottom-color: rgba(197, 160, 89, 0.22);
        }

        html.dark-mode.dark-mode-b .topical-reading-section-head {
            border-bottom-color: rgba(110, 134, 198, 0.26);
        }

        html.dark-mode:not(.dark-mode-b) .topical-reading-section-head::after,
        html.dark-mode:not(.dark-mode-b) .topical-detail-hero::after {
            background: linear-gradient(90deg, rgba(197, 160, 89, 0), rgba(197, 160, 89, 0.45), rgba(197, 160, 89, 0.06));
        }

        html.dark-mode.dark-mode-b .topical-reading-section-head::after,
        html.dark-mode.dark-mode-b .topical-detail-hero::after {
            background: linear-gradient(90deg, rgba(159, 194, 255, 0), rgba(159, 194, 255, 0.46), rgba(159, 194, 255, 0.08));
        }

        html.dark-mode .topical-detail-hero::after {
            left: 50%;
            right: auto;
            bottom: clamp(18px, 3vw, 28px);
            width: min(420px, 68%);
            height: 2px;
            transform: translateX(-50%);
            border-radius: 999px;
            box-shadow: none;
        }

        html.dark-mode:not(.dark-mode-b) .topical-reading-section {
            background:
                radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.06), transparent 30%),
                radial-gradient(circle at 88% 0%, rgba(197, 160, 89, 0.12), transparent 28%),
                linear-gradient(145deg, rgba(43, 40, 35, 0.96), rgba(30, 28, 25, 0.98));
            border-color: rgba(197, 160, 89, 0.22);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.06),
                inset 0 -60px 120px rgba(0, 0, 0, 0.12),
                0 18px 44px rgba(0, 0, 0, 0.34),
                0 0 0 1px rgba(197, 160, 89, 0.06);
        }

        html.dark-mode.dark-mode-b .topical-reading-section {
            background:
                radial-gradient(circle at 12% 0%, rgba(159, 194, 255, 0.1), transparent 30%),
                radial-gradient(circle at 88% 0%, rgba(84, 110, 176, 0.18), transparent 28%),
                linear-gradient(145deg, rgba(29, 40, 80, 0.96), rgba(15, 22, 42, 0.98));
            border-color: rgba(110, 134, 198, 0.3);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.07),
                inset 0 -60px 120px rgba(2, 8, 23, 0.16),
                0 18px 44px rgba(2, 8, 23, 0.36),
                0 0 0 1px rgba(159, 194, 255, 0.06);
        }

        html.dark-mode:not(.dark-mode-b) .topical-reading-section-kicker {
            background: linear-gradient(180deg, rgba(197, 160, 89, 0.14), rgba(197, 160, 89, 0.05));
            border-color: rgba(197, 160, 89, 0.22);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.06),
                0 10px 22px rgba(0, 0, 0, 0.18);
        }

        html.dark-mode.dark-mode-b .topical-reading-section-kicker {
            background: linear-gradient(180deg, rgba(159, 194, 255, 0.14), rgba(159, 194, 255, 0.05));
            border-color: rgba(159, 194, 255, 0.22);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.07),
                0 10px 22px rgba(2, 8, 23, 0.2);
        }

        html.dark-mode:not(.dark-mode-b) .topical-reference-card {
            background:
                radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.055), transparent 34%),
                linear-gradient(145deg, rgba(52, 48, 42, 0.9), rgba(29, 27, 24, 0.96));
            border-color: rgba(197, 160, 89, 0.2);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.045),
                0 14px 28px rgba(0, 0, 0, 0.26);
        }

        html.dark-mode.dark-mode-b .topical-reference-card {
            background:
                radial-gradient(circle at 16% 0%, rgba(159, 194, 255, 0.08), transparent 34%),
                linear-gradient(145deg, rgba(36, 48, 90, 0.9), rgba(16, 23, 45, 0.96));
            border-color: rgba(110, 134, 198, 0.28);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.055),
                0 14px 28px rgba(2, 8, 23, 0.28);
        }

        html.dark-mode:not(.dark-mode-b) .topical-reference-link {
            color: #D6B277;
        }

        html.dark-mode.dark-mode-b .topical-reference-link {
            color: #9FC2FF;
        }

        /* Premium dark polish: softer contrast, clearer icons, matching daily/topical palettes */
        html.dark-mode:not(.dark-mode-b) .devotion-tabs {
            background:
                radial-gradient(circle at 22% 0%, rgba(214, 178, 119, 0.12), transparent 34%),
                linear-gradient(180deg, rgba(42, 38, 32, 0.9), rgba(28, 26, 23, 0.92));
            border-color: rgba(214, 178, 119, 0.2);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.06),
                0 18px 36px rgba(0, 0, 0, 0.28);
        }

        html.dark-mode.dark-mode-b .devotion-tabs {
            background:
                radial-gradient(circle at 22% 0%, rgba(159, 194, 255, 0.12), transparent 34%),
                linear-gradient(180deg, rgba(26, 38, 72, 0.9), rgba(14, 22, 43, 0.92));
            border-color: rgba(159, 194, 255, 0.22);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.07),
                0 18px 36px rgba(2, 8, 23, 0.3);
        }

        html.dark-mode:not(.dark-mode-b) .devotion-tab-btn {
            color: #D8D0C4;
        }

        html.dark-mode.dark-mode-b .devotion-tab-btn {
            color: #C7D2E5;
        }

        html.dark-mode:not(.dark-mode-b) .devotion-tab-btn.active {
            background: linear-gradient(180deg, rgba(214, 178, 119, 0.92), rgba(154, 113, 62, 0.92));
            color: #211D18;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.2),
                0 10px 24px rgba(0, 0, 0, 0.24);
        }

        html.dark-mode.dark-mode-b .devotion-tab-btn.active {
            background: linear-gradient(180deg, rgba(92, 132, 226, 0.95), rgba(53, 87, 180, 0.95));
            color: #FFFFFF;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.18),
                0 10px 24px rgba(2, 8, 23, 0.28);
        }

        html.dark-mode:not(.dark-mode-b) .date-toggle-wrapper .view-toggle-container,
        html.dark-mode:not(.dark-mode-b) .font-control-btn {
            background: linear-gradient(180deg, rgba(47, 43, 37, 0.78), rgba(32, 29, 25, 0.82)) !important;
            border-color: rgba(214, 178, 119, 0.26) !important;
            color: #E7DED0 !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.08),
                0 12px 24px rgba(0, 0, 0, 0.24);
        }

        html.dark-mode.dark-mode-b .date-toggle-wrapper .view-toggle-container,
        html.dark-mode.dark-mode-b .font-control-btn {
            background: linear-gradient(180deg, rgba(31, 43, 78, 0.8), rgba(17, 26, 51, 0.84)) !important;
            border-color: rgba(159, 194, 255, 0.28) !important;
            color: #DCE7FA !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.08),
                0 12px 24px rgba(2, 8, 23, 0.26);
        }

        html.dark-mode:not(.dark-mode-b) .view-toggle-label {
            color: #D8D0C4;
        }

        html.dark-mode.dark-mode-b .view-toggle-label {
            color: #C7D2E5;
        }

        html.dark-mode:not(.dark-mode-b) .devotion-date {
            color: #D6B277 !important;
        }

        html.dark-mode.dark-mode-b .devotion-date {
            color: #9FC2FF;
        }

        html.dark-mode:not(.dark-mode-b) .devotion-column {
            background:
                radial-gradient(circle at 16% 0%, rgba(214, 178, 119, 0.08), transparent 30%),
                linear-gradient(180deg, rgba(39, 36, 31, 0.94), rgba(29, 27, 24, 0.96)) !important;
            border-color: rgba(214, 178, 119, 0.18) !important;
            color: #E8E1D7;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.045),
                0 16px 34px rgba(0, 0, 0, 0.28);
        }

        html.dark-mode.dark-mode-b .devotion-column {
            background:
                radial-gradient(circle at 16% 0%, rgba(159, 194, 255, 0.09), transparent 30%),
                linear-gradient(180deg, rgba(25, 36, 70, 0.94), rgba(15, 23, 45, 0.96)) !important;
            border-color: rgba(159, 194, 255, 0.2) !important;
            color: #DCE3F2;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.055),
                0 16px 34px rgba(2, 8, 23, 0.3);
        }

        html.dark-mode:not(.dark-mode-b) .morning-card,
        html.dark-mode:not(.dark-mode-b) .evening-card {
            border-top-color: rgba(214, 178, 119, 0.72) !important;
        }

        html.dark-mode.dark-mode-b .morning-card,
        html.dark-mode.dark-mode-b .evening-card {
            border-top-color: rgba(159, 194, 255, 0.74) !important;
        }

        html.dark-mode:not(.dark-mode-b) .morning-header,
        html.dark-mode:not(.dark-mode-b) .evening-header,
        html.dark-mode:not(.dark-mode-b) .devotion-topic {
            color: #D6B277 !important;
        }

        html.dark-mode:not(.dark-mode-b) .devotion-header {
            color: #D6B277 !important;
            background: transparent !important;
            border-bottom-color: rgba(214, 178, 119, 0.18) !important;
        }

        html.dark-mode:not(.dark-mode-b) .devotion-header-row {
            border-color: rgba(214, 178, 119, 0.18) !important;
        }

        html.dark-mode.dark-mode-b .devotion-header,
        html.dark-mode.dark-mode-b .morning-header,
        html.dark-mode.dark-mode-b .evening-header,
        html.dark-mode.dark-mode-b .devotion-topic {
            color: #9FC2FF;
        }

        html.dark-mode.dark-mode-b .devotion-header-row {
            border-color: rgba(159, 194, 255, 0.18);
        }

        html.dark-mode:not(.dark-mode-b) .devotion-text,
        html.dark-mode:not(.dark-mode-b) .devotion-text p,
        html.dark-mode:not(.dark-mode-b) .prayer-para,
        html.dark-mode:not(.dark-mode-b) .theme-verse-ref,
        html.dark-mode:not(.dark-mode-b) .verse-ref-link {
            color: #E4DCD0 !important;
        }

        html.dark-mode.dark-mode-b .devotion-text,
        html.dark-mode.dark-mode-b .devotion-text p,
        html.dark-mode.dark-mode-b .prayer-para,
        html.dark-mode.dark-mode-b .theme-verse-ref,
        html.dark-mode.dark-mode-b .verse-ref-link {
            color: #D8E0EF;
        }

        html.dark-mode:not(.dark-mode-b) .theme-verse-p {
            background: rgba(214, 178, 119, 0.055) !important;
            border-left-color: #D6B277 !important;
            color: #E9DFD0 !important;
        }

        html.dark-mode.dark-mode-b .theme-verse-p {
            background: rgba(159, 194, 255, 0.065);
            border-left-color: #9FC2FF;
            color: #DCE6F8;
        }

        html.dark-mode:not(.dark-mode-b) .topical-topic-card {
            background: linear-gradient(145deg, rgba(39, 36, 31, 0.9), rgba(27, 25, 22, 0.96));
            border-color: rgba(214, 178, 119, 0.18);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.045),
                0 15px 34px rgba(0, 0, 0, 0.26);
        }

        html.dark-mode.dark-mode-b .topical-topic-card {
            background: linear-gradient(145deg, rgba(27, 38, 74, 0.9), rgba(14, 22, 43, 0.96));
            border-color: rgba(159, 194, 255, 0.2);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.055),
                0 15px 34px rgba(2, 8, 23, 0.28);
        }

        html.dark-mode .topical-topic-card::before {
            display: none;
            background: none;
            opacity: 0;
        }

        html.dark-mode:not(.dark-mode-b) .topical-topic-card::after {
            background: rgba(214, 178, 119, 0.075);
            border-color: rgba(214, 178, 119, 0.24);
            color: rgba(214, 178, 119, 0.82);
        }

        html.dark-mode.dark-mode-b .topical-topic-card::after {
            background: rgba(159, 194, 255, 0.08);
            border-color: rgba(159, 194, 255, 0.24);
            color: rgba(159, 194, 255, 0.82);
        }

        html.dark-mode:not(.dark-mode-b) .topical-topic-icon {
            background:
                radial-gradient(circle at 50% 18%, rgba(214, 178, 119, 0.14), transparent 58%),
                linear-gradient(180deg, rgba(46, 42, 36, 0.9), rgba(30, 28, 25, 0.88));
            border-color: rgba(214, 178, 119, 0.38);
            color: #D6B277;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.08),
                0 10px 22px rgba(0, 0, 0, 0.24),
                0 0 0 1px rgba(214, 178, 119, 0.07);
        }

        html.dark-mode.dark-mode-b .topical-topic-icon {
            background:
                radial-gradient(circle at 50% 18%, rgba(159, 194, 255, 0.14), transparent 58%),
                linear-gradient(180deg, rgba(28, 40, 76, 0.9), rgba(16, 24, 48, 0.88));
            border-color: rgba(159, 194, 255, 0.38);
            color: #9FC2FF;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.08),
                0 10px 22px rgba(2, 8, 23, 0.26),
                0 0 0 1px rgba(159, 194, 255, 0.08);
        }

        html.dark-mode:not(.dark-mode-b) .topical-topic-icon svg {
            opacity: 1;
            filter:
                drop-shadow(0 0 5px rgba(214, 178, 119, 0.42))
                drop-shadow(0 4px 10px rgba(0, 0, 0, 0.24));
        }

        html.dark-mode.dark-mode-b .topical-topic-icon svg {
            opacity: 1;
            filter:
                drop-shadow(0 0 5px rgba(159, 194, 255, 0.42))
                drop-shadow(0 4px 10px rgba(2, 8, 23, 0.26));
        }

        html.dark-mode:not(.dark-mode-b) .topical-topic-card:hover {
            border-color: rgba(214, 178, 119, 0.28);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.06),
                0 18px 38px rgba(0, 0, 0, 0.3);
        }

        html.dark-mode.dark-mode-b .topical-topic-card:hover {
            border-color: rgba(159, 194, 255, 0.3);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.065),
                0 18px 38px rgba(2, 8, 23, 0.32);
        }

        html.dark-mode:not(.dark-mode-b) .topical-detail-category,
        html.dark-mode:not(.dark-mode-b) .topical-reading-section-kicker {
            background: linear-gradient(180deg, rgba(214, 178, 119, 0.16), rgba(214, 178, 119, 0.06));
            border-color: rgba(214, 178, 119, 0.28);
            color: #D6B277;
            -webkit-text-fill-color: #D6B277;
        }

        html.dark-mode.dark-mode-b .topical-detail-category,
        html.dark-mode.dark-mode-b .topical-reading-section-kicker {
            background: linear-gradient(180deg, rgba(159, 194, 255, 0.16), rgba(159, 194, 255, 0.06));
            border-color: rgba(159, 194, 255, 0.28);
            color: #9FC2FF;
            -webkit-text-fill-color: #9FC2FF;
        }

        /* Keep dark modes dark: replace light washes with restrained accent depth */
        html.dark-mode:not(.dark-mode-b) .topical-detail-hero,
        html.dark-mode:not(.dark-mode-b) .topical-reading-intro,
        html.dark-mode:not(.dark-mode-b) .topical-reading-section {
            background:
                radial-gradient(circle at 16% 0%, rgba(214, 178, 119, 0.08), transparent 32%),
                radial-gradient(circle at 88% 10%, rgba(214, 178, 119, 0.055), transparent 34%),
                linear-gradient(145deg, rgba(42, 38, 32, 0.96), rgba(26, 24, 21, 0.98)) !important;
            border-color: rgba(214, 178, 119, 0.2);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.035),
                inset 0 -56px 110px rgba(0, 0, 0, 0.18),
                0 18px 42px rgba(0, 0, 0, 0.34);
        }

        html.dark-mode.dark-mode-b .topical-detail-hero,
        html.dark-mode.dark-mode-b .topical-reading-intro,
        html.dark-mode.dark-mode-b .topical-reading-section {
            background:
                radial-gradient(circle at 16% 0%, rgba(159, 194, 255, 0.08), transparent 32%),
                radial-gradient(circle at 88% 10%, rgba(83, 115, 196, 0.08), transparent 34%),
                linear-gradient(145deg, rgba(24, 35, 70, 0.96), rgba(12, 20, 42, 0.98)) !important;
            border-color: rgba(159, 194, 255, 0.22);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.04),
                inset 0 -56px 110px rgba(2, 8, 23, 0.2),
                0 18px 42px rgba(2, 8, 23, 0.36);
        }

        html.dark-mode:not(.dark-mode-b) .topical-detail-hero::before,
        html.dark-mode:not(.dark-mode-b) .topical-reading-section::before {
            background:
                linear-gradient(115deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0)),
                radial-gradient(circle at 0% 42%, rgba(214, 178, 119, 0.055), transparent 34%);
        }

        html.dark-mode.dark-mode-b .topical-detail-hero::before,
        html.dark-mode.dark-mode-b .topical-reading-section::before {
            background:
                linear-gradient(115deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
                radial-gradient(circle at 0% 42%, rgba(159, 194, 255, 0.06), transparent 34%);
        }

        html.dark-mode:not(.dark-mode-b) .topical-reference-card {
            background: linear-gradient(145deg, rgba(43, 39, 33, 0.93), rgba(23, 21, 19, 0.98)) !important;
            border-color: rgba(214, 178, 119, 0.2);
        }

        html.dark-mode.dark-mode-b .topical-reference-card {
            background: linear-gradient(145deg, rgba(28, 40, 78, 0.93), rgba(12, 20, 42, 0.98)) !important;
            border-color: rgba(159, 194, 255, 0.24);
        }

        html.dark-mode .topical-reference-card::after {
            display: none;
            background: none;
        }

        /* Custom Checkbox Toggle */
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 36px;
            height: 20px;
        }

        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(160, 174, 192, 0.46);
            transition: .4s;
            border-radius: 20px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 14px;
            width: 14px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        input:checked+.slider {
            background-color: var(--accent-blue);
        }

        input:checked+.slider:before {
            transform: translateX(16px);
        }

        /* Stacked View State */
        .devotion-grid.stacked {
            grid-template-columns: 1fr;
        }

        /* Hyperlink Styling */
        .verse-ref-link {
            font-family: var(--font-body);
            color: var(--text-soft);
            text-decoration: none;
            font-style: italic;
            font-size: 0.9em;
            border-bottom: 1px dotted rgba(184, 138, 77, 0.4);
            transition: all 0.2s;
        }

        .verse-ref-link:hover {
            color: var(--text-charcoal);
            background: rgba(184, 138, 77, 0.08);
            border-bottom-style: solid;
        }

        /* Theme verse — pull-quote with left accent border */
        .theme-verse-p {
            font-family: var(--font-heading);
            font-size: 1.2rem;
            font-style: italic;
            color: var(--text-charcoal);
            line-height: 1.6;
            margin: 0 0 24px 0;
            padding-left: 16px;
            border-left: 2px solid var(--accent-morning);
            text-align: left !important;
            text-indent: 0 !important;
        }

        .evening-card .theme-verse-p {
            border-left-color: var(--accent-evening);
            color: var(--text-charcoal);
        }

        .theme-verse-ref-container {
            display: inline;
            margin-left: 8px;
        }

        .theme-verse-ref {
            font-style: normal;
            font-variant: small-caps;
            font-size: 0.82em;
            color: var(--text-muted);
            text-decoration: none;
            margin-left: 6px;
            letter-spacing: 0.06em;
            border-bottom: 1px solid transparent;
            transition: color 0.2s;
        }

        .theme-verse-ref:hover {
            color: var(--accent-morning);
            border-bottom-color: currentColor;
        }

        .evening-card .theme-verse-ref:hover {
            color: var(--accent-evening);
        }


        /* Highlights */
        .highlight-yellow {
            background-color: #fff3cd;
            border-bottom: 2px solid #ffc107;
        }

        .highlight-pink {
            background-color: #f8d7da;
            border-bottom: 2px solid #f5c6cb;
        }

        .highlight-blue {
            background-color: #cff4fc;
            border-bottom: 2px solid #9ec5fe;
        }

        .highlight-underline {
            background: transparent;
            text-decoration: underline;
            text-decoration-color: #888;
            text-underline-offset: 4px;
            text-decoration-thickness: 2px;
        }

        html.dark-mode:not(.dark-mode-b) .highlight-yellow,
        html.dark-mode:not(.dark-mode-b) .highlight-pink,
        html.dark-mode:not(.dark-mode-b) .highlight-blue {
            background: rgba(197, 160, 89, 0.18) !important;
            border-bottom-color: #C5A059 !important;
            box-shadow: 0 0 0 1px rgba(197, 160, 89, 0.16) inset;
            color: inherit;
        }

        html.dark-mode:not(.dark-mode-b) .highlight-underline {
            text-decoration-color: #C5A059 !important;
        }

        /* Highlight Toolbar */
        #highlight-toolbar {
            position: absolute;
            background: white;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            display: none;
            /* Hidden by default */
            padding: 8px;
            z-index: 1000;
            display: flex;
            /* Flex when visible (overridden by JS) */
            gap: 8px;
        }

        #highlight-toolbar.hidden {
            display: none !important;
        }

        .color-btn {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 1px solid #ccc;
            cursor: pointer;
            transition: transform 0.1s;
        }

        .color-btn:hover {
            transform: scale(1.1);
        }

        .btn-yellow {
            background-color: #ffeeba;
        }

        .btn-pink {
            background-color: #fadce9;
        }

        .btn-blue {
            background-color: #cce5ff;
        }

        .btn-underline {
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: serif;
            font-weight: bold;
            text-decoration: underline;
        }

        .btn-clear {
            width: auto;
            border-radius: 4px;
            padding: 0 8px;
            font-size: 0.8rem;
            background: #f0f0f0;
        }


        /* Topic title — large elegant serif */
        .devotion-topic {
            text-align: left;
            font-family: var(--font-heading);
            font-size: 1.85rem;
            font-weight: 600;
            font-style: normal;
            color: var(--text-charcoal);
            margin: 0 0 20px 0;
            line-height: 1.2;
        }

        /* Late dark overrides for regular Daily Devotion content after base text rules */
        html.dark-mode:not(.dark-mode-b) input:checked+.slider {
            background-color: #D6B277;
        }

        html.dark-mode.dark-mode-b input:checked+.slider {
            background-color: #5D87E8;
        }

        html.dark-mode:not(.dark-mode-b) .devotion-topic,
        html.dark-mode:not(.dark-mode-b) .devotion-text h2:last-of-type {
            color: #D6B277 !important;
            border-bottom-color: rgba(214, 178, 119, 0.2) !important;
        }

        html.dark-mode.dark-mode-b .devotion-topic,
        html.dark-mode.dark-mode-b .devotion-text h2:last-of-type {
            color: #9FC2FF !important;
            border-bottom-color: rgba(159, 194, 255, 0.2) !important;
        }

        html.dark-mode:not(.dark-mode-b) .theme-verse-p,
        html.dark-mode:not(.dark-mode-b) .evening-card .theme-verse-p {
            background: rgba(214, 178, 119, 0.055) !important;
            border-left-color: #D6B277 !important;
            color: #E9DFD0 !important;
        }

        html.dark-mode.dark-mode-b .theme-verse-p,
        html.dark-mode.dark-mode-b .evening-card .theme-verse-p {
            background: rgba(159, 194, 255, 0.065) !important;
            border-left-color: #9FC2FF !important;
            color: #DCE6F8 !important;
        }

        html.dark-mode:not(.dark-mode-b) .reference-footer,
        html.dark-mode:not(.dark-mode-b) .reference-footer a,
        html.dark-mode:not(.dark-mode-b) .ref-separator {
            color: rgba(232, 225, 215, 0.78) !important;
        }

        html.dark-mode.dark-mode-b .reference-footer,
        html.dark-mode.dark-mode-b .reference-footer a,
        html.dark-mode.dark-mode-b .ref-separator {
            color: rgba(216, 224, 239, 0.8) !important;
        }

        html.dark-mode:not(.dark-mode-b) .reference-footer a:hover {
            color: #D6B277 !important;
        }

        html.dark-mode.dark-mode-b .reference-footer a:hover {
            color: #9FC2FF !important;
        }

        /* ============================================================
         * STUDY-PAGE DARK MODE PARITY
         * Align Imitation, liturgical blessing, and topical detail
         * surfaces with study page tokens:
         *   Dark Mode A — zinc canvas (#18181B) / card #27272A / text #E4E4E7
         *   Dark Mode B — indigo canvas (#11162A) / card #1D2850 / text #E4E4E7
         * ============================================================ */

        /* --- Imitation: chapter title + footer + drop cap --- */
        html.dark-mode:not(.dark-mode-b) #imitation-content .imitation-chapter-title {
            color: #D6B277 !important;
            -webkit-text-fill-color: #D6B277 !important;
            border-bottom-color: rgba(214, 178, 119, 0.28) !important;
        }
        html.dark-mode.dark-mode-b #imitation-content .imitation-chapter-title {
            color: #9FC2FF !important;
            -webkit-text-fill-color: #9FC2FF !important;
            border-bottom-color: rgba(159, 194, 255, 0.28) !important;
        }
        html.dark-mode:not(.dark-mode-b) #imitation-content .imitation-chapter-footer {
            color: #D6B277 !important;
            border-top-color: rgba(214, 178, 119, 0.22) !important;
        }
        html.dark-mode.dark-mode-b #imitation-content .imitation-chapter-footer {
            color: #9FC2FF !important;
            border-top-color: rgba(159, 194, 255, 0.22) !important;
        }
        html.dark-mode:not(.dark-mode-b) #imitation-content p,
        html.dark-mode:not(.dark-mode-b) #imitation-content {
            color: #E4E4E7 !important;
        }
        html.dark-mode.dark-mode-b #imitation-content p,
        html.dark-mode.dark-mode-b #imitation-content {
            color: #E4E4E7 !important;
        }

        /* Drop cap — both Imitation first-of-type and topical/M&E first-letter */
        html.dark-mode:not(.dark-mode-b) #imitation-content > p:first-of-type::first-letter,
        html.dark-mode:not(.dark-mode-b) .devotion-header-group + p:not(.theme-verse-p)::first-letter,
        html.dark-mode:not(.dark-mode-b) .devotion-text > p:not(.theme-verse-p):first-of-type::first-letter,
        html.dark-mode:not(.dark-mode-b) .topical-reading-intro .topical-detail-paragraph:first-child::first-letter {
            background: linear-gradient(180deg, #E0BC84 0%, #B68B4F 100%) !important;
            -webkit-background-clip: text !important;
            background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            color: transparent !important;
            text-shadow: 0 6px 22px rgba(214, 178, 119, 0.18) !important;
        }
        html.dark-mode.dark-mode-b #imitation-content > p:first-of-type::first-letter,
        html.dark-mode.dark-mode-b .devotion-header-group + p:not(.theme-verse-p)::first-letter,
        html.dark-mode.dark-mode-b .devotion-text > p:not(.theme-verse-p):first-of-type::first-letter,
        html.dark-mode.dark-mode-b .topical-reading-intro .topical-detail-paragraph:first-child::first-letter {
            background: linear-gradient(180deg, #C2D4FF 0%, #6F97FF 100%) !important;
            -webkit-background-clip: text !important;
            background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            color: transparent !important;
            text-shadow: 0 6px 22px rgba(111, 151, 255, 0.22) !important;
        }

        /* --- Liturgical blessing verse card (Morning/Evening) --- */
        html.dark-mode:not(.dark-mode-b) #prayer-tab-panel .liturgical-verse,
        html.dark-mode:not(.dark-mode-b) .theme-verse-p {
            background: rgba(39, 39, 42, 0.78) !important;
            border-color: rgba(214, 178, 119, 0.22) !important;
            box-shadow:
                0 18px 45px rgba(0, 0, 0, 0.32),
                inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
            color: #E4E4E7 !important;
        }
        html.dark-mode.dark-mode-b #prayer-tab-panel .liturgical-verse,
        html.dark-mode.dark-mode-b .theme-verse-p {
            background: rgba(29, 40, 80, 0.78) !important;
            border-color: rgba(159, 194, 255, 0.24) !important;
            box-shadow:
                0 18px 45px rgba(2, 8, 23, 0.36),
                inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
            color: #E4E4E7 !important;
        }
        html.dark-mode:not(.dark-mode-b) #prayer-tab-panel .liturgical-verse::before,
        html.dark-mode:not(.dark-mode-b) .theme-verse-p::before {
            color: #D6B277 !important;
        }
        html.dark-mode.dark-mode-b #prayer-tab-panel .liturgical-verse::before,
        html.dark-mode.dark-mode-b .theme-verse-p::before {
            color: #9FC2FF !important;
        }

        /* --- Topical detail page: reference card + subtitle --- */
        html.dark-mode:not(.dark-mode-b) .topical-reference-copy {
            background: rgba(39, 39, 42, 0.78) !important;
            border-color: rgba(214, 178, 119, 0.22) !important;
            box-shadow:
                0 18px 45px rgba(0, 0, 0, 0.32),
                inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
            color: #E4E4E7 !important;
        }
        html.dark-mode.dark-mode-b .topical-reference-copy {
            background: rgba(29, 40, 80, 0.78) !important;
            border-color: rgba(159, 194, 255, 0.24) !important;
            box-shadow:
                0 18px 45px rgba(2, 8, 23, 0.36),
                inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
            color: #E4E4E7 !important;
        }
        html.dark-mode:not(.dark-mode-b) .topical-reference-copy::before {
            color: #D6B277 !important;
        }
        html.dark-mode.dark-mode-b .topical-reference-copy::before {
            color: #9FC2FF !important;
        }

        /* Topical body text — overrides earlier `!important` light-mode color */
        html.dark-mode:not(.dark-mode-b) .topical-detail-paragraph,
        html.dark-mode:not(.dark-mode-b) .topical-reading-section-description,
        html.dark-mode:not(.dark-mode-b) .topical-topic-meta,
        html.dark-mode:not(.dark-mode-b) .topical-detail-summary {
            color: #E4E4E7 !important;
        }
        html.dark-mode.dark-mode-b .topical-detail-paragraph,
        html.dark-mode.dark-mode-b .topical-reading-section-description,
        html.dark-mode.dark-mode-b .topical-topic-meta,
        html.dark-mode.dark-mode-b .topical-detail-summary {
            color: #E4E4E7 !important;
        }

        /* Footer References Styling */
        .reference-footer {
            margin-top: auto;
            padding-top: 1.5rem;
            /* Increased padding */
            font-family: 'Inter', sans-serif;
            font-size: 0.9rem;
            color: var(--text-soft);
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.5rem 1rem;
            width: 100%;
        }

        /* Ensure each reference and its separator stay together */
        .ref-item {
            display: inline-block;
            white-space: nowrap;
        }

        .ref-separator {
            margin-right: 0.25rem;
        }

        /* Split View Specific: Revert to centered inline layout for references */
        body.split-view .reference-footer {
            flex-direction: row;
            /* Match stacked view's layout */
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 0.5rem 1rem;
        }

        body.split-view .reference-footer .ref-item {
            display: inline-block !important;
            /* Allow item to be inline */
            width: auto !important;
            text-align: center !important;
        }

        /* Style the Cross References heading (last h2 in devotion text) */
        .devotion-text h2:last-of-type {
            border-bottom: 1px solid rgba(184, 138, 77, 0.18);
            padding-bottom: 0.5rem;
            margin-top: 2rem;
            margin-bottom: 0.5rem;
            font-size: 1.05rem;
            font-weight: 600;
            color: var(--text-charcoal);
            text-align: center;
        }

        .reference-footer a {
            color: var(--text-soft);
            text-decoration: none;
            margin: 0 4px;
            transition: color 0.2s;
            white-space: nowrap;
            /* Prevent splitting ref across lines */
            display: inline-block;
            /* Ensure matches sit together */
        }

        .reference-footer a:hover {
            color: var(--text-charcoal);
            text-decoration: underline;
        }

        .ref-item {
            display: inline-flex;
            align-items: center;
            white-space: nowrap;
        }

        .ref-separator {
            margin-right: 4px;
            color: var(--text-muted);
        }



        /* Navigation Arrows - Clearer & Centered */
        .nav-arrow {
            position: fixed;
            top: 50%;
            transform: translateY(-50%);
            background: var(--surface-strong);
            border: 1px solid var(--surface-border);
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 8px 22px var(--surface-shadow);
            transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
            z-index: 100;
            color: var(--text-soft);
            opacity: 0;
            /* Hidden by default */
        }

        /* Show arrows when hovering near edges */
        body:hover .nav-arrow {
            opacity: 0.4;
        }

        .nav-arrow:hover {
            opacity: 1 !important;
            transform: translateY(-50%) scale(1.1);
            background: var(--surface-strong);
            color: var(--accent-gold);
            box-shadow: 0 18px 34px var(--surface-shadow-strong);
        }

        .nav-arrow.prev {
            left: 20px;
        }

        .nav-arrow.next {
            right: 20px;
        }

        @media(max-width: 768px) {
            .nav-arrow {
                display: none;
                /* Hide on mobile for cleaner read */
            }
        }

        @media (max-width: 480px) {
            html,
            body {
                min-height: 100dvh;
            }

            #main-header {
                /* Top padding lifts the "Daily Devotion" title clear of the
                   iPhone status bar / Dynamic Island. env() falls back to 48px
                   on devices/browsers without a safe area. */
                padding:
                    max(48px, env(safe-area-inset-top, 0px)) 12px 28px !important;
                border-bottom-left-radius: 24px;
                border-bottom-right-radius: 24px;
            }

            .header-lockup {
                gap: 8px !important;
                padding-top: 16px !important;
                padding-bottom: 4px !important;
                justify-content: center;
                max-width: calc(100% - 100px) !important;
            }

            .main-title {
                font-size: clamp(1.8rem, 8.5vw, 2.25rem) !important;
                line-height: 1 !important;
            }

            .hero-subtitle {
                font-size: clamp(0.82rem, 3.8vw, 1rem) !important;
                line-height: 1.2;
                margin-top: 4px !important;
            }

            .dove-icon {
                width: 48px !important;
                height: 48px !important;
            }

            .devotion-container {
                padding: 8px 0 calc(84px + env(safe-area-inset-bottom, 0px)) !important;
            }

            .devotion-tabs {
                width: calc(100% - 32px);
                margin: 2px auto 16px;
                padding: 5px;
            }

            .devotion-tab-btn {
                min-height: 52px;
                padding: 8px 10px;
                font-size: clamp(0.86rem, 4.2vw, 1rem);
                line-height: 1.18;
            }

            .topical-devotion-panel {
                margin: 0 8px;
                padding: 12px 8px 28px;
                border-radius: 24px;
            }

            .topical-section-tabs {
                grid-template-columns: auto minmax(0, 1fr);
                gap: 6px;
                margin-bottom: 14px;
                align-items: end;
            }

            .topical-section-menu-toggle {
                width: auto !important;
                max-width: 132px !important;
                min-height: 48px;
                gap: 8px;
                padding: 9px 10px;
                border-radius: 18px;
                font-size: 0.84rem;
            }

            .topical-section-menu-icon {
                width: 34px;
                height: 34px;
                border-radius: 12px;
            }

            .topical-section-menu-icon span {
                width: 16px;
            }

            .topical-section-menu-label {
                min-width: 0;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .topical-mobile-topic-actions {
                gap: 6px;
                justify-content: flex-end;
                align-items: flex-end;
                overflow: visible;
                align-self: end;
                padding-bottom: 4px;
            }

            .topical-mobile-action-link {
                font-size: clamp(0.58rem, 2.7vw, 0.72rem);
                letter-spacing: -0.01em;
                padding-bottom: 2px;
            }

            .topical-detail-hero {
                padding: 22px 14px 24px;
                border-radius: 22px;
                overflow: hidden;
            }

            .topical-detail-title {
                width: 100%;
                max-width: 100%;
                font-size: clamp(2.1rem, 11vw, 3rem) !important;
                line-height: 1.02;
                letter-spacing: -0.045em;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: clip;
            }

            .topical-detail-summary {
                font-size: clamp(0.72rem, 3.15vw, 0.9rem) !important;
                line-height: 1.45;
                max-width: min(100%, 36ch);
                white-space: normal;
                overflow: visible;
                text-overflow: unset;
                text-wrap: balance;
            }

            .topical-detail-hero-copy::after {
                width: min(220px, 78%);
            }

            .topical-reading-intro,
            .topical-reading-section {
                padding: 22px 18px;
                border-radius: 22px;
            }

            .topical-reference-card {
                padding: 20px 16px;
            }

            .content-area {
                padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
            }
        }

        /* Final dark-mode no-sheen override for topic and cross-reference cards */
        html.dark-mode .topical-topic-card::before,
        html.dark-mode .topical-reference-card::after,
        html.dark-mode .topical-reading-section::before {
            display: none !important;
            background: none !important;
            opacity: 0 !important;
        }

        html.dark-mode:not(.dark-mode-b) .topical-topic-card,
        html.dark-mode:not(.dark-mode-b) .topical-reference-card {
            background: linear-gradient(145deg, rgba(38, 35, 30, 0.96), rgba(21, 19, 17, 0.98)) !important;
        }

        html.dark-mode.dark-mode-b .topical-topic-card,
        html.dark-mode.dark-mode-b .topical-reference-card {
            background: linear-gradient(145deg, rgba(24, 35, 69, 0.96), rgba(10, 18, 39, 0.98)) !important;
        }

        /* Study page parity for Topic Devotion Dark B */
        html.dark-mode.dark-mode-b .topical-devotion-panel,
        html.dark-mode.dark-mode-b .topical-reading-section,
        html.dark-mode.dark-mode-b .topical-reading-intro,
        html.dark-mode.dark-mode-b .topical-detail-hero {
            background: linear-gradient(180deg, #080D16 0%, #050912 100%) !important;
            border-color: rgba(96, 165, 250, 0.14) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.025),
                0 18px 42px rgba(2, 6, 23, 0.42) !important;
        }

        html.dark-mode.dark-mode-b .topical-topic-card,
        html.dark-mode.dark-mode-b .topical-reference-card {
            background: #242533 !important;
            border-color: rgba(148, 163, 184, 0.12) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.035),
                0 12px 28px rgba(2, 6, 23, 0.28) !important;
        }

        html.dark-mode.dark-mode-b .topical-topic-name,
        html.dark-mode.dark-mode-b .topical-detail-title,
        html.dark-mode.dark-mode-b .topical-reading-section-title,
        html.dark-mode.dark-mode-b .topical-reference-link {
            color: #93C5FD !important;
            -webkit-text-fill-color: #93C5FD !important;
        }

        html.dark-mode.dark-mode-b .topical-topic-meta,
        html.dark-mode.dark-mode-b .topical-detail-summary,
        html.dark-mode.dark-mode-b .topical-detail-paragraph,
        html.dark-mode.dark-mode-b .topical-reading-section-description,
        html.dark-mode.dark-mode-b .topical-reference-copy {
            color: #94A3B8 !important;
        }

        html.dark-mode.dark-mode-b .topical-section-menu,
        html.dark-mode.dark-mode-b .topical-section-menu-toggle {
            background: linear-gradient(180deg, rgba(20, 28, 47, 0.96), rgba(12, 18, 31, 0.98)) !important;
            border-color: rgba(96, 165, 250, 0.16) !important;
            color: #CBD5E1 !important;
        }

        html.dark-mode.dark-mode-b .topical-section-tab {
            background: rgba(15, 23, 42, 0.72) !important;
            border-color: rgba(148, 163, 184, 0.08) !important;
            color: #CBD5E1 !important;
        }

        html.dark-mode.dark-mode-b .topical-section-tab.active {
            background: linear-gradient(180deg, #4F7FDD 0%, #3158B6 100%) !important;
            border-color: rgba(147, 197, 253, 0.26) !important;
            color: #FFFFFF !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.16),
                0 12px 26px rgba(2, 6, 23, 0.34) !important;
        }

        html.dark-mode.dark-mode-b .topical-topic-icon {
            background: linear-gradient(135deg, #2D3748 0%, #1A202C 100%) !important;
            border-color: rgba(255, 255, 255, 0.08) !important;
            color: #93C5FD !important;
            box-shadow:
                0 2px 6px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
        }

        html.dark-mode.dark-mode-b .topical-topic-button,
        html.dark-mode.dark-mode-b .topical-mobile-action-link {
            color: #60A5FA !important;
            -webkit-text-fill-color: #60A5FA !important;
        }

        /* Final parchment no-sheen override for topic and cross-reference cards */
        html:not(.parchment-off):not(.dark-mode) .topical-topic-card::before,
        html:not(.parchment-off):not(.dark-mode) .topical-reference-card::after,
        html:not(.parchment-off):not(.dark-mode) .topical-reading-section::before {
            display: none !important;
            background: none !important;
            opacity: 0 !important;
        }

        html:not(.parchment-off):not(.dark-mode) .topical-topic-card,
        html:not(.parchment-off):not(.dark-mode) .topical-reference-card {
            background: linear-gradient(145deg, rgba(255, 253, 248, 0.94), rgba(250, 244, 234, 0.9)) !important;
        }

        html:not(.parchment-off):not(.dark-mode) .topical-reading-section {
            background: linear-gradient(145deg, rgba(255, 253, 248, 0.95), rgba(250, 244, 234, 0.92)) !important;
        }

        /* Remove redundant floating arrow/circle affordance from topic cards */
        .topical-topic-card::after {
            display: none !important;
            content: none !important;
        }

        /* Final topical accent parity: dark mode A follows parchment purple language. */
        html.dark-mode:not(.dark-mode-b) .topical-topic-name,
        html.dark-mode:not(.dark-mode-b) .topical-detail-title,
        html.dark-mode:not(.dark-mode-b) .topical-reading-section-title,
        html.dark-mode:not(.dark-mode-b) .topical-reference-link,
        html.dark-mode:not(.dark-mode-b) .topical-detail-category,
        html.dark-mode:not(.dark-mode-b) .topical-reading-section-kicker,
        html.dark-mode:not(.dark-mode-b) .topical-topic-button,
        html.dark-mode:not(.dark-mode-b) .topical-mobile-action-link {
            color: #B9A8FF !important;
            -webkit-text-fill-color: #B9A8FF !important;
        }

        html.dark-mode:not(.dark-mode-b) .topical-topic-title-link:hover,
        html.dark-mode:not(.dark-mode-b) .topical-reference-link:hover,
        html.dark-mode:not(.dark-mode-b) .topical-topic-button:hover,
        html.dark-mode:not(.dark-mode-b) .topical-mobile-action-link:hover {
            color: #D3CAFF !important;
            -webkit-text-fill-color: #D3CAFF !important;
        }

        html.dark-mode:not(.dark-mode-b) .topical-detail-summary,
        html.dark-mode:not(.dark-mode-b) .topical-detail-paragraph,
        html.dark-mode:not(.dark-mode-b) .topical-topic-meta,
        html.dark-mode:not(.dark-mode-b) .topical-reading-section-description,
        html.dark-mode:not(.dark-mode-b) .topical-reference-copy {
            color: #AFA9C4 !important;
        }

        html.dark-mode:not(.dark-mode-b) .topical-section-tab.active {
            background: linear-gradient(180deg, #6B5BE8 0%, #4F3FD2 100%) !important;
            border-color: rgba(185, 168, 255, 0.28) !important;
            color: #FFFFFF !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.18),
                0 12px 26px rgba(16, 10, 52, 0.34),
                0 0 0 1px rgba(185, 168, 255, 0.1) !important;
        }

        html.dark-mode:not(.dark-mode-b) .topical-section-menu::after,
        html.dark-mode:not(.dark-mode-b) .topical-reading-section-head::after,
        html.dark-mode:not(.dark-mode-b) .topical-detail-hero-copy::after,
        html.dark-mode:not(.dark-mode-b) .topical-detail-hero::after {
            background: linear-gradient(90deg, rgba(185, 168, 255, 0), rgba(185, 168, 255, 0.5), rgba(185, 168, 255, 0.06)) !important;
        }

        html.dark-mode:not(.dark-mode-b) .topical-detail-category,
        html.dark-mode:not(.dark-mode-b) .topical-reading-section-kicker {
            background: linear-gradient(180deg, rgba(185, 168, 255, 0.14), rgba(185, 168, 255, 0.045)) !important;
            border-color: rgba(185, 168, 255, 0.24) !important;
        }

        html.dark-mode:not(.dark-mode-b) .topical-topic-icon {
            border-color: rgba(185, 168, 255, 0.26) !important;
            color: #B9A8FF !important;
            box-shadow:
                0 2px 6px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.05),
                0 0 0 1px rgba(185, 168, 255, 0.06) !important;
        }

        html.dark-mode:not(.dark-mode-b) .topical-topic-icon svg {
            filter:
                drop-shadow(0 0 5px rgba(185, 168, 255, 0.34))
                drop-shadow(0 4px 10px rgba(0, 0, 0, 0.24)) !important;
        }

        /* Dark mode B mirrors the study page blue-on-navy schema. */
        html.dark-mode.dark-mode-b .topical-topic-name,
        html.dark-mode.dark-mode-b .topical-detail-title,
        html.dark-mode.dark-mode-b .topical-reading-section-title,
        html.dark-mode.dark-mode-b .topical-reference-link,
        html.dark-mode.dark-mode-b .topical-detail-category,
        html.dark-mode.dark-mode-b .topical-reading-section-kicker,
        html.dark-mode.dark-mode-b .topical-topic-button,
        html.dark-mode.dark-mode-b .topical-mobile-action-link {
            color: #9FC2FF !important;
            -webkit-text-fill-color: #9FC2FF !important;
            text-shadow: 0 0 18px rgba(87, 140, 255, 0.10) !important;
        }

        html.dark-mode.dark-mode-b .topical-topic-title-link:hover,
        html.dark-mode.dark-mode-b .topical-reference-link:hover,
        html.dark-mode.dark-mode-b .topical-topic-button:hover,
        html.dark-mode.dark-mode-b .topical-mobile-action-link:hover {
            color: #EAF2FF !important;
            -webkit-text-fill-color: #EAF2FF !important;
        }

        html.dark-mode.dark-mode-b .topical-detail-summary,
        html.dark-mode.dark-mode-b .topical-detail-paragraph,
        html.dark-mode.dark-mode-b .topical-topic-meta,
        html.dark-mode.dark-mode-b .topical-reading-section-description,
        html.dark-mode.dark-mode-b .topical-reference-copy {
            color: #B8C9EA !important;
        }

        html.dark-mode.dark-mode-b .topical-section-tab.active {
            background: linear-gradient(180deg, #4F7FDD 0%, #3158B6 100%) !important;
            border-color: rgba(147, 197, 253, 0.28) !important;
            color: #FFFFFF !important;
            -webkit-text-fill-color: #FFFFFF !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.16),
                0 12px 26px rgba(2, 6, 23, 0.34),
                0 0 0 1px rgba(147, 197, 253, 0.14) !important;
        }

        html.dark-mode.dark-mode-b .topical-topic-icon {
            background: linear-gradient(180deg, rgba(31, 42, 79, 0.92), rgba(20, 27, 51, 0.88)) !important;
            border-color: rgba(132, 163, 235, 0.26) !important;
            color: #9FC2FF !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.08),
                0 10px 24px rgba(2, 8, 23, 0.28),
                0 0 0 1px rgba(147, 197, 253, 0.08) !important;
        }

        html.dark-mode.dark-mode-b .topical-topic-icon svg {
            filter:
                drop-shadow(0 0 5px rgba(159, 194, 255, 0.30))
                drop-shadow(0 4px 10px rgba(0, 0, 0, 0.24)) !important;
        }

        @keyframes particlesFloat {
            0% {
                transform: translate3d(0, 0, 0);
            }

            100% {
                transform: translate3d(0, 14px, 0);
            }
        }

        @keyframes heroFloat {
            0%,
            100% {
                transform: translate3d(0, 0, 0);
            }

            50% {
                transform: translate3d(0, -8px, 0);
            }
        }

        @keyframes devotionFadeUp {
            from {
                opacity: 0;
                transform: translateY(18px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes devotionCardRise {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* ── Bottom Nav: explicit visibility overrides ──────────────────────────
           Selectors match premium-polish.css specificity (0,3,1) so these win
           via document order (inline <style> loads after linked stylesheets).
           The goal: ensure the nav bar and icons are always clearly visible. */

        /* Light / parchment-on mode — white bar, dark text */
        html:not(.parchment-off):not(.dark-mode) .bottom-nav {
            background: rgba(255, 255, 255, 0.97) !important;
            border-top: 1px solid rgba(0, 0, 0, 0.12) !important;
            box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08) !important;
        }

        html:not(.parchment-off):not(.dark-mode) .bottom-nav-item {
            color: #374151 !important;
        }

        html:not(.parchment-off):not(.dark-mode) .bottom-nav #languageSelectWrapperBottom .custom-select-trigger {
            color: #374151 !important;
        }

        /* Parchment-off mode — clean white bar */
        html.parchment-off:not(.dark-mode) .bottom-nav {
            background: rgba(255, 255, 255, 0.97) !important;
            border-top: 1px solid rgba(0, 0, 0, 0.12) !important;
            box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08) !important;
        }

        html.parchment-off:not(.dark-mode) .bottom-nav-item {
            color: #374151 !important;
        }

        html.parchment-off:not(.dark-mode) .bottom-nav #languageSelectWrapperBottom .custom-select-trigger {
            color: #374151 !important;
        }

        /* Dark mode — dark bar, light icons (keeps premium-polish dark colors) */
        html.dark-mode .bottom-nav-item {
            color: #c9d1d9 !important;
        }

        html.dark-mode .bottom-nav #languageSelectWrapperBottom .custom-select-trigger {
            color: #c9d1d9 !important;
        }

        /* Ensure SVG icon strokes are always visible */
        .bottom-nav .bottom-nav-item svg {
            opacity: 1 !important;
            stroke: currentColor !important;
        }

        @media (max-width: 768px) {
            .content-area,
            .devotion-container {
                padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
            }

            .container {
                padding-bottom: 0 !important;
            }

            body.is-mobile #journeyHamburgerDrawer:not(.open) {
                display: none !important;
            }

            body.is-mobile #journeyHamburgerDrawer.open {
                display: block !important;
            }
        }

        /* ================================================================
           LITURGICAL CLOSING — Sacred contemplative benediction
           ================================================================ */

        .liturgical-closing {
            margin-top: 38px;
            padding: 0;
            display: flex;
            justify-content: center;
            opacity: 0;
            transform: translateY(14px);
            transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1), transform 1.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .liturgical-closing.hidden {
            display: none;
        }

        .liturgical-closing.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .liturgical-closing-inner {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 26px;
        }

        .liturgical-rule {
            width: 100%;
            height: 1px;
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(160, 130, 90, 0.18) 24%,
                rgba(160, 130, 90, 0.26) 50%,
                rgba(160, 130, 90, 0.18) 76%,
                transparent 100%
            );
            border: none;
        }

        .liturgical-body {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            text-align: center;
            padding: 0 8px;
        }

        .liturgical-title {
            margin: 0;
            font-family: var(--font-ui);
            font-size: 0.62rem;
            font-weight: 700;
            letter-spacing: 0.28em;
            text-transform: uppercase;
            color: rgba(104, 76, 135, 0.64);
            line-height: 1.7;
        }

        .liturgical-verse {
            margin: 4px 0 0;
            padding: 0;
            border: none;
            font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
            font-size: clamp(0.92rem, 1.2vw, 1.06rem);
            font-style: italic;
            font-weight: 500;
            line-height: 1.78;
            color: rgba(67, 57, 48, 0.86);
            letter-spacing: 0.01em;
            max-width: 58ch;
            width: 100%;
            text-align: center;
        }

        .liturgical-ref {
            margin: 4px 0 0;
            font-family: var(--font-ui);
            font-size: 0.65rem;
            font-weight: 600;
            letter-spacing: 0.12em;
            color: var(--text-muted);
            opacity: 0.72;
        }

        .liturgical-ref a {
            color: inherit !important;
            -webkit-text-fill-color: inherit !important;
            border-bottom: 1px dotted currentColor;
            text-decoration: none;
            text-underline-offset: 0.16em;
        }

        html.dark-mode:not(.dark-mode-b) .liturgical-rule {
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(200, 160, 90, 0.12) 24%,
                rgba(200, 160, 90, 0.18) 50%,
                rgba(200, 160, 90, 0.12) 76%,
                transparent 100%
            );
        }

        html.dark-mode:not(.dark-mode-b) .liturgical-title {
            color: rgba(198, 168, 232, 0.56);
        }

        html.dark-mode:not(.dark-mode-b) .liturgical-verse {
            color: rgba(224, 216, 205, 0.86);
        }

        html.dark-mode.dark-mode-b .liturgical-rule {
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(110, 150, 220, 0.14) 24%,
                rgba(110, 150, 220, 0.2) 50%,
                rgba(110, 150, 220, 0.14) 76%,
                transparent 100%
            );
        }

        html.dark-mode.dark-mode-b .liturgical-title {
            color: rgba(156, 190, 255, 0.56);
        }

        html.dark-mode.dark-mode-b .liturgical-verse {
            color: rgba(216, 226, 242, 0.86);
        }

        @media (max-width: 768px) {
            .liturgical-closing {
                margin-top: 28px;
            }

            .liturgical-closing-inner {
                gap: 20px;
            }
        }

        /* ================================================================
           DAILY PRAYER TAB — PREMIUM EDITORIAL READING EXPERIENCE
           Pure typography, spacing, and hierarchy improvements.
           No color, no palette, no background changes.
           ================================================================ */

        /* Reading columns: generous but balanced manuscript padding */
        #prayer-tab-panel .devotion-column {
            padding: clamp(36px, 4vw, 56px) clamp(44px, 5vw, 72px) clamp(56px, 6vw, 80px);
            border-radius: 22px;
        }

        /* Disable hover lift — reading surface, not an action card */
        #prayer-tab-panel .devotion-column:hover {
            transform: none;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.34),
                0 10px 28px var(--surface-shadow),
                0 26px 54px rgba(15, 23, 42, 0.05);
        }

        #prayer-tab-panel .morning-card:hover {
            border-top-color: var(--accent-morning);
            border-color: var(--surface-border);
        }

        #prayer-tab-panel .evening-card:hover {
            border-top-color: var(--accent-evening);
            border-left-color: rgba(74, 93, 138, 0.18);
            border-right-color: rgba(74, 93, 138, 0.18);
            border-bottom-color: rgba(74, 93, 138, 0.18);
        }

        /* Card header row: tighter — the header and ornament should breathe together */
        #prayer-tab-panel .devotion-header-row {
            margin-bottom: 20px;
            padding-bottom: 16px;
            border-bottom-color: rgba(160, 130, 90, 0.09);
        }

        /* "MORNING PRAYER" / "EVENING PRAYER" — liturgical rubric style */
        #prayer-tab-panel .devotion-header {
            font-size: 0.60rem;
            letter-spacing: 0.38em;
            color: rgba(74, 58, 86, 0.46);
            font-weight: 700;
        }

        /* Prayer body: no top margin, natural card padding handles it */
        #prayer-tab-panel .prayer-body-section {
            margin-top: 0;
        }

        /* ── Ornamental heading block ──────────────────────────────── */
        #prayer-tab-panel .prayer-heading-block {
            gap: 14px;
            margin-bottom: 48px;
            padding: 0 4px;
        }

        #prayer-tab-panel .prayer-heading-rule {
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(160, 130, 90, 0.07) 12%,
                rgba(160, 130, 90, 0.22) 50%,
                rgba(160, 130, 90, 0.07) 88%,
                transparent 100%
            );
        }

        #prayer-tab-panel .prayer-heading-cross {
            font-size: 0.92rem;
            color: rgba(92, 69, 118, 0.22);
        }

        #prayer-tab-panel .prayer-heading-title {
            font-size: 0.60rem;
            letter-spacing: 0.38em;
            color: rgba(74, 58, 86, 0.48);
            line-height: 1.5;
        }

        /* ── Prayer body text ──────────────────────────────────────── */
        /* Override the inherited !important size for a premium reading scale */
        #prayer-tab-panel .prayer-para {
            font-size: clamp(15px, 1.12vw, 16.5px) !important;
            line-height: 1.96;
            margin-bottom: 1.8rem;
            font-weight: 300 !important;
        }

        /* Opening paragraph: elevated italic — the prayer's invocation */
        #prayer-tab-panel .prayer-para.prayer-first {
            font-size: clamp(15.5px, 1.18vw, 17px) !important;
            line-height: 2.0;
            margin-bottom: 1.9rem;
        }

        /* Contemplative pause — deep meditative breath between movements */
        #prayer-tab-panel .prayer-para.prayer-pause {
            margin: 1.6rem 0 2.2rem 0;
            letter-spacing: 0.52em;
            font-size: 0.8em !important;
            line-height: 1.3 !important;
            color: rgba(107, 76, 138, 0.20) !important;
        }

        /* ── Liturgical closing ────────────────────────────────────── */
        #prayer-tab-panel .liturgical-closing {
            margin-top: 64px;
        }

        #prayer-tab-panel .liturgical-closing-inner {
            gap: 30px;
            max-width: 420px;
            margin-inline: auto;
            width: 100%;
        }

        #prayer-tab-panel .liturgical-rule {
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(160, 130, 90, 0.08) 10%,
                rgba(160, 130, 90, 0.22) 50%,
                rgba(160, 130, 90, 0.08) 90%,
                transparent 100%
            );
        }

        #prayer-tab-panel .liturgical-body {
            gap: 16px;
            padding: 0 8px;
        }

        #prayer-tab-panel .liturgical-title {
            font-size: 0.55rem;
            letter-spacing: 0.38em;
            color: rgba(104, 76, 135, 0.50);
            line-height: 1.6;
        }

        /* Scripture verse — the page's quiet benediction */
        #prayer-tab-panel .liturgical-verse {
            font-size: clamp(1.06rem, 1.35vw, 1.18rem);
            line-height: 1.92;
            letter-spacing: 0.016em;
            color: rgba(67, 57, 48, 0.80);
            max-width: 48ch;
        }

        #prayer-tab-panel .liturgical-ref {
            font-size: 0.60rem;
            letter-spacing: 0.16em;
            opacity: 0.56;
        }

        /* ── Tablet ────────────────────────────────────────────────── */
        @media (max-width: 1140px) and (min-width: 769px) {
            #prayer-tab-panel .devotion-column {
                padding: clamp(32px, 3.5vw, 48px) clamp(34px, 4vw, 56px) clamp(44px, 5vw, 64px);
            }

            #prayer-tab-panel .prayer-heading-block {
                margin-bottom: 40px;
            }

            #prayer-tab-panel .liturgical-closing {
                margin-top: 48px;
            }
        }

        /* ── Mobile ────────────────────────────────────────────────── */
        @media (max-width: 768px) {
            #prayer-tab-panel .devotion-column {
                padding: 32px 24px 44px;
            }

            #prayer-tab-panel .prayer-heading-block {
                margin-bottom: 36px;
                gap: 12px;
            }

            #prayer-tab-panel .prayer-para {
                font-size: clamp(14px, 4vw, 15.5px) !important;
                line-height: 1.84;
                margin-bottom: 1.5rem;
            }

            #prayer-tab-panel .prayer-para.prayer-first {
                font-size: clamp(14.5px, 4.2vw, 16px) !important;
            }

            #prayer-tab-panel .prayer-para.prayer-pause {
                margin: 1.3rem 0 1.8rem 0;
            }

            #prayer-tab-panel .liturgical-closing {
                margin-top: 40px;
            }

            #prayer-tab-panel .liturgical-closing-inner {
                max-width: none;
                gap: 22px;
            }

            #prayer-tab-panel .liturgical-verse {
                max-width: none;
            }
        }

        /* ================================================================
           PREMIUM DEVOTIONAL READING EXPERIENCE
           Blue + cream identity preserved with champagne editorial polish.
           ================================================================ */

        body {
            background-image:
                radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.74), transparent 31%),
                radial-gradient(circle at 12% 22%, rgba(218, 194, 148, 0.18), transparent 24%),
                radial-gradient(circle at 88% 12%, rgba(43, 86, 207, 0.055), transparent 24%),
                linear-gradient(180deg, #F9F4E9 0%, var(--bg-warm) 42%, #F5EFE4 100%),
                url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.74' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.014'/%3E%3C/svg%3E");
        }

        #main-header {
            box-sizing: border-box;
            min-height: 0;
            height: clamp(190px, 15vw, 220px);
            padding: clamp(16px, 1.8vw, 24px) clamp(40px, 4vw, 64px) clamp(34px, 3.2vw, 48px) !important;
            background:
                radial-gradient(circle at 42% 25%, rgba(255, 255, 255, 0.20), transparent 16%),
                radial-gradient(circle at 31% 8%, rgba(112, 151, 255, 0.24), transparent 28%),
                radial-gradient(circle at 72% 12%, rgba(36, 83, 205, 0.22), transparent 32%),
                linear-gradient(90deg, #123B9B 0%, #061B4E 49%, #092C86 100%) !important;
            border-bottom-left-radius: 42px;
            border-bottom-right-radius: 42px;
            box-shadow:
                0 24px 38px rgba(18, 24, 36, 0.30),
                0 8px 0 rgba(255, 255, 255, 0.72),
                0 36px 70px rgba(92, 67, 28, 0.18);
        }

        /* Premium sky backdrop sourced from the banner artwork. Scaled up and
           pinned to the top so only the atmospheric sun-ray burst, star field
           and glowing clouds show through — the banner's own baked-in dove/text
           fall below the visible crop, keeping the live HTML dove + title clean
           on top. Masked at the foot so it melts into the hero gradient. */
        /* Premium banner artwork fills the hero — its beaming light, dove and
           glowing cloud corners ARE the header. The banner already carries the
           "Daily Devotion / Daily Light on the Daily Path" lockup, so the live
           HTML dove + title below are hidden to avoid doubling. */
        #main-header::before {
            content: '';
            display: block;
            position: absolute;
            inset: 0;
            background-image: url('/study/banner.png?v=6');
            background-repeat: no-repeat;
            background-position: center center;
            /* Phone/narrow: fill the strip. The header aspect here is close to
               the banner's 1.875:1, so cover crops only lightly. Desktop widths
               override this below to stop the artwork from blowing up. */
            background-size: cover;
            opacity: 1;
            filter: saturate(1.04);
            pointer-events: none;
            z-index: 0;
        }

        /* Banner artwork already carries its own stars, rays and glow — drop the
           synthetic overlay so the premium image reads clearly, not washed out. */
        #main-header::after {
            display: none;
        }

        .hero-aurora {
            display: none !important;
        }

        .hero-particles {
            display: none !important;
        }

        .header-lockup {
            /* Enable live HTML copy with premium typography and support for translations */
            visibility: visible !important;
            z-index: 3 !important;
            max-width: calc(100% - 320px) !important;
        }

        .header-text-group {
            text-align: center;
        }

        .dove-icon {
            width: clamp(74px, 5.4vw, 88px) !important;
            height: clamp(74px, 5.4vw, 88px) !important;
            filter:
                drop-shadow(0 0 14px rgba(255, 240, 200, 0.90))
                drop-shadow(0 0 28px rgba(255, 220, 140, 0.65))
                drop-shadow(0 12px 20px rgba(4, 12, 34, 0.24)) !important;
        }

        .main-title {
            font-family: var(--font-heading);
            font-size: clamp(3.05rem, 4.7vw, 4.82rem);
            font-weight: 500;
            letter-spacing: 0;
            line-height: 0.92;
            text-shadow:
                0 1px 0 rgba(255, 255, 255, 0.18),
                0 14px 30px rgba(2, 10, 30, 0.36) !important;
        }

        .hero-subtitle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 26px;
            margin-inline: auto;
            font-family: var(--font-heading);
            font-size: clamp(1.18rem, 1.52vw, 1.48rem);
            letter-spacing: 0.015em;
            color: rgba(247, 242, 229, 0.92) !important;
            text-shadow: 0 10px 24px rgba(3, 10, 28, 0.22);
        }

        .hero-subtitle::before,
        .hero-subtitle::after {
            content: '';
            width: 9px;
            height: 9px;
            flex: 0 0 auto;
            background: linear-gradient(135deg, rgba(255, 224, 157, 0.96), rgba(184, 138, 77, 0.82));
            transform: rotate(45deg);
            box-shadow: 0 0 14px rgba(248, 215, 153, 0.28);
        }

        .devotion-container {
            max-width: 1320px;
            padding-top: clamp(30px, 3.2vw, 42px);
        }

        .devotion-tabs {
            gap: 14px;
            padding: 8px;
            margin-bottom: clamp(26px, 3vw, 34px);
            background:
                radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.92), transparent 55%),
                linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 250, 241, 0.52));
            border-color: rgba(255, 255, 255, 0.58);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.88),
                inset 0 -1px 0 rgba(181, 139, 74, 0.08),
                0 18px 50px rgba(35, 54, 94, 0.12),
                0 0 0 1px rgba(184, 138, 77, 0.05);
        }

        .devotion-tab-btn {
            min-width: 220px;
            padding: 15px 34px;
            color: rgba(38, 63, 118, 0.72);
            letter-spacing: 0.035em;
            transition:
                transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
                background 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
                color 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .devotion-tab-btn:hover {
            transform: translateY(-2px);
            background: rgba(255, 255, 255, 0.62);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 12px 24px rgba(48, 72, 126, 0.08);
        }

        .devotion-tab-btn.active {
            background:
                radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.22), transparent 50%),
                linear-gradient(135deg, #1B3F9E 0%, #2B56CF 58%, #4E78F5 100%);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.32),
                inset 0 -1px 0 rgba(0, 17, 78, 0.22),
                0 18px 38px rgba(35, 70, 176, 0.26),
                0 0 28px rgba(72, 112, 224, 0.18);
        }

        .date-toggle-wrapper {
            margin-bottom: clamp(26px, 3vw, 38px) !important;
            margin-top: 0 !important;
        }

        .devotion-date {
            display: block;
            min-width: min(100%, 360px);
            padding-bottom: 25px;
            font-family: var(--font-heading);
            font-size: clamp(1.9rem, 2.45vw, 2.54rem);
            font-weight: 500;
            letter-spacing: 0.055em;
            line-height: 1.05;
            color: #143D97;
            text-transform: uppercase;
            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
        }

        .devotion-date::first-line {
            font-family: var(--font-ui);
            font-size: 0.46em;
            font-weight: 500;
            letter-spacing: 0.19em;
            line-height: 2.2;
            color: rgba(48, 59, 91, 0.56);
        }

        .devotion-date::after {
            bottom: 1px;
            width: 142px;
            height: 14px;
            background:
                linear-gradient(90deg, transparent 0%, rgba(184, 138, 77, 0.44) 36%, transparent 36%, transparent 64%, rgba(184, 138, 77, 0.44) 64%, transparent 100%) center / 100% 1px no-repeat;
            box-shadow: none;
            opacity: 0.78;
        }

        .devotion-date::before {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 4px;
            width: 11px;
            height: 11px;
            transform: translateX(-50%) rotate(45deg);
            background: linear-gradient(135deg, rgba(225, 193, 130, 0.95), rgba(184, 138, 77, 0.76));
            box-shadow: 0 0 16px rgba(184, 138, 77, 0.18);
        }

        .devotion-grid {
            gap: clamp(28px, 3.2vw, 42px);
        }

        .devotion-column {
            padding: clamp(48px, 5vw, 78px) clamp(50px, 6vw, 88px) clamp(54px, 6vw, 86px);
            border: 0;
            border-radius: 32px;
            background:
                radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.94), transparent 30%),
                radial-gradient(circle at 8% 8%, rgba(218, 190, 139, 0.13), transparent 28%),
                linear-gradient(180deg, rgba(255, 253, 248, 0.94), rgba(255, 249, 239, 0.88));
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.86),
                inset 0 0 70px rgba(255, 255, 255, 0.38),
                inset 0 -1px 0 rgba(184, 138, 77, 0.08),
                0 24px 66px rgba(80, 55, 20, 0.10),
                0 6px 18px rgba(22, 35, 72, 0.05);
            animation: devotionCardRise 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) both;
        }

        .devotion-column::before {
            content: '';
            display: block;
            position: absolute;
            inset: 1px;
            border-radius: inherit;
            background:
                linear-gradient(135deg, rgba(255, 255, 255, 0.58), transparent 28%),
                linear-gradient(180deg, rgba(184, 138, 77, 0.10), transparent 24%);
            opacity: 0.72;
            pointer-events: none;
        }

        .devotion-column::after {
            content: '';
            position: absolute;
            top: 28px;
            left: 50%;
            width: min(420px, calc(100% - 80px));
            height: 1px;
            transform: translateX(-50%);
            background: linear-gradient(90deg, transparent, rgba(184, 138, 77, 0.22), transparent);
        }

        .devotion-column:hover {
            transform: translateY(-4px);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.9),
                inset 0 0 80px rgba(255, 255, 255, 0.44),
                0 30px 74px rgba(80, 55, 20, 0.13),
                0 10px 24px rgba(22, 35, 72, 0.06);
        }

        .morning-card,
        .evening-card {
            border-top: 0;
        }

        .devotion-header-row {
            margin-bottom: clamp(36px, 4vw, 56px);
            padding-bottom: 24px;
            border-bottom: 0;
            position: relative;
        }

        .devotion-header-row::after,
        .prayer-heading-rule {
            background:
                linear-gradient(90deg, transparent 0%, rgba(184, 138, 77, 0.14) 18%, rgba(184, 138, 77, 0.36) 50%, rgba(184, 138, 77, 0.14) 82%, transparent 100%);
        }

        .devotion-header-row::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 0;
            width: min(360px, 70%);
            height: 1px;
            transform: translateX(-50%);
        }

        .devotion-header {
            font-family: var(--font-ui);
            font-size: 0.68rem;
            letter-spacing: 0.32em;
            color: rgba(101, 75, 38, 0.62);
        }

        .devotion-text,
        .devotion-text p,
        .prayer-para {
            line-height: 2.02 !important;
            color: rgba(43, 35, 25, 0.88);
        }

        .devotion-text p {
            margin-bottom: 2.15rem;
        }

        .theme-verse-p {
            padding: 24px 26px 24px 28px;
            border-left: 0;
            border-radius: 24px;
            background:
                linear-gradient(90deg, rgba(184, 138, 77, 0.12), rgba(184, 138, 77, 0.03)),
                rgba(255, 255, 255, 0.28);
            box-shadow:
                inset 2px 0 0 rgba(184, 138, 77, 0.42),
                inset 0 1px 0 rgba(255, 255, 255, 0.58);
        }

        .prayer-heading-block {
            margin-bottom: clamp(48px, 5vw, 72px);
        }

        .prayer-heading-cross,
        .liturgical-title {
            color: rgba(184, 138, 77, 0.48);
        }

        #prayer-tab-panel .devotion-column {
            padding: clamp(48px, 5vw, 72px) clamp(58px, 6vw, 94px) clamp(58px, 6vw, 88px);
            border-radius: 34px;
        }

        #prayer-tab-panel .devotion-header {
            color: rgba(101, 75, 38, 0.54);
        }

        #prayer-tab-panel .prayer-heading-title {
            font-family: var(--font-heading);
            font-size: 0.72rem;
            letter-spacing: 0.44em;
            color: rgba(71, 56, 40, 0.54);
        }

        #prayer-tab-panel .prayer-para {
            font-size: clamp(16px, 1.18vw, 18px) !important;
            line-height: 2.08 !important;
            color: rgba(43, 35, 25, 0.86);
        }

        #prayer-tab-panel .prayer-para.prayer-first {
            font-size: clamp(16.5px, 1.26vw, 19px) !important;
        }

        #prayer-tab-panel .prayer-para.prayer-pause {
            color: rgba(184, 138, 77, 0.30) !important;
        }

        .liturgical-rule {
            background:
                linear-gradient(90deg, transparent 0%, rgba(184, 138, 77, 0.12) 20%, rgba(184, 138, 77, 0.34) 50%, rgba(184, 138, 77, 0.12) 80%, transparent 100%);
        }

        .liturgical-verse {
            color: rgba(43, 35, 25, 0.78);
        }

        .view-toggle-container,
        .font-control-btn,
        .nav-arrow {
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
        }

        .nav-arrow {
            width: 58px;
            height: 58px;
            background: rgba(255, 252, 247, 0.58);
            border: 0;
            color: rgba(102, 82, 51, 0.52);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.75),
                0 18px 42px rgba(74, 51, 20, 0.12);
        }

        body:hover .nav-arrow {
            opacity: 0.5;
        }

        .nav-arrow:hover {
            color: var(--accent-gold);
            background: rgba(255, 255, 255, 0.72);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.86),
                0 24px 48px rgba(74, 51, 20, 0.16),
                0 0 28px rgba(184, 138, 77, 0.12);
        }

        html.dark-mode .devotion-column::before,
        html.dark-mode .devotion-column::after {
            opacity: 0.42;
        }

        @media (max-width: 768px) {
            #main-header {
                min-height: 0;
                height: 176px;
                padding: 16px 18px 42px !important;
                border-bottom-left-radius: 30px;
                border-bottom-right-radius: 30px;
            }

            .header-lockup {
                gap: 14px !important;
                padding-top: 32px !important;
                max-width: calc(100% - 120px) !important;
            }

            .header-text-group {
                text-align: left;
            }

            .main-title {
                font-size: clamp(2rem, 9vw, 3rem) !important;
            }

            .hero-subtitle {
                font-size: clamp(0.98rem, 4vw, 1.18rem) !important;
                line-height: 1.35;
                gap: 12px;
            }

            .hero-subtitle::before,
            .hero-subtitle::after {
                width: 6px;
                height: 6px;
            }

            .dove-icon {
                width: 58px !important;
                height: 58px !important;
            }

            .devotion-container {
                padding-top: 28px !important;
            }

            .date-toggle-wrapper {
                margin-top: 0 !important;
                margin-bottom: 30px !important;
            }

            .devotion-date {
                min-width: min(100%, 280px);
                font-size: clamp(1.72rem, 8vw, 2.28rem) !important;
                letter-spacing: 0.045em;
                padding-bottom: 24px !important;
            }

            .devotion-date::first-line {
                font-size: 0.48em;
                line-height: 2.1;
                letter-spacing: 0.18em;
            }

            .devotion-date::after {
                width: 112px;
            }

            .devotion-date::before {
                width: 9px;
                height: 9px;
            }

            .devotion-tabs {
                gap: 6px;
                padding: 6px;
                margin-bottom: 28px;
                border-radius: 28px;
            }

            .devotion-tab-btn {
                flex: 1 1 0;
                min-width: 0;
                min-height: 50px;
                padding: 9px 10px;
                letter-spacing: 0;
            }

            .devotion-column,
            #prayer-tab-panel .devotion-column {
                padding: 38px 24px 48px !important;
                border-radius: 26px !important;
                background:
                    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.94), transparent 34%),
                    radial-gradient(circle at 8% 8%, rgba(218, 190, 139, 0.12), transparent 30%),
                    linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(255, 249, 239, 0.92)) !important;
                margin-inline: 12px;
                width: calc(100% - 24px) !important;
                box-shadow:
                    inset 0 1px 0 rgba(255, 255, 255, 0.82),
                    inset 0 0 52px rgba(255, 255, 255, 0.30),
                    0 18px 46px rgba(80, 55, 20, 0.10) !important;
            }

            .devotion-column::after {
                width: min(260px, calc(100% - 48px));
                top: 22px;
            }

            .devotion-header-row {
                margin-bottom: 32px;
                justify-content: center;
            }

            .devotion-text,
            .devotion-text p,
            #prayer-tab-panel .prayer-para {
                line-height: 1.86 !important;
            }
        }

        html.dark-mode body {
            background-image:
                radial-gradient(circle at 18% 12%, rgba(107, 139, 219, 0.16), transparent 30%),
                radial-gradient(circle at 85% 8%, rgba(242, 196, 122, 0.08), transparent 24%),
                linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(7, 10, 18, 0.06)),
                url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.74' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
        }

        html.dark-mode .devotion-column,
        html.dark-mode #prayer-tab-panel .devotion-column {
            background:
                radial-gradient(circle at 16% 0%, rgba(159, 194, 255, 0.08), transparent 30%),
                linear-gradient(180deg, rgba(25, 36, 70, 0.94), rgba(15, 23, 45, 0.96)) !important;
            color: #DCE3F2;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.055),
                inset 0 0 68px rgba(159, 194, 255, 0.025),
                0 18px 42px rgba(2, 8, 23, 0.32) !important;
        }

        html.dark-mode:not(.dark-mode-b) .devotion-column,
        html.dark-mode:not(.dark-mode-b) #prayer-tab-panel .devotion-column {
            background:
                radial-gradient(circle at 16% 0%, rgba(214, 178, 119, 0.08), transparent 30%),
                linear-gradient(180deg, rgba(39, 36, 31, 0.94), rgba(29, 27, 24, 0.96)) !important;
            color: #E8E1D7;
        }

        html.dark-mode .devotion-text,
        html.dark-mode .devotion-text p,
        html.dark-mode .prayer-para,
        html.dark-mode #prayer-tab-panel .prayer-para {
            color: var(--text-charcoal) !important;
        }

        html.dark-mode .theme-verse-p {
            background: rgba(159, 194, 255, 0.065) !important;
            box-shadow:
                inset 2px 0 0 rgba(159, 194, 255, 0.62),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
        }

        html.dark-mode:not(.dark-mode-b) .theme-verse-p {
            background: rgba(214, 178, 119, 0.055) !important;
            box-shadow:
                inset 2px 0 0 rgba(214, 178, 119, 0.62),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }

        /* Study Dark B parity for devotion pages */
        html.dark-mode.dark-mode-b {
            --bg-warm: #11162A;
            --bg-secondary: #141B33;
            --surface-main: rgba(23, 30, 57, 0.94);
            --surface-strong: rgba(29, 40, 80, 0.96);
            --surface-soft: rgba(20, 27, 51, 0.86);
            --surface-border: rgba(132, 163, 235, 0.20);
            --surface-shadow: rgba(2, 8, 23, 0.34);
            --surface-shadow-strong: rgba(2, 8, 23, 0.48);
            --text-charcoal: #E2E8F0;
            --text-soft: #B8C9EA;
            --text-muted: #6F84AD;
            --accent-blue: #9FC2FF;
            --accent-blue-strong: #93C5FD;
            --accent-blue-soft: rgba(159, 194, 255, 0.16);
            --accent-gold: #9FC2FF;
            --accent-gold-soft: rgba(159, 194, 255, 0.14);
            --accent-morning: #9FC2FF;
            --accent-evening: #93C5FD;
        }

        html.dark-mode.dark-mode-b body {
            background-color: #11162A !important;
            background:
                radial-gradient(circle at top center, rgba(73, 98, 160, 0.11) 0%, transparent 20%),
                radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.018) 0%, transparent 24%),
                radial-gradient(circle at 86% 14%, rgba(27, 39, 75, 0.10) 0%, transparent 22%),
                linear-gradient(180deg, #0D1223 0%, #10172B 20%, #151D35 100%) !important;
            background-attachment: fixed !important;
        }

        html.dark-mode.dark-mode-b #app-view,
        html.dark-mode.dark-mode-b .main-content,
        html.dark-mode.dark-mode-b .content-area,
        html.dark-mode.dark-mode-b .devotion-container {
            background-color: #141B33 !important;
            background-image:
                radial-gradient(circle at top center, rgba(84, 110, 176, 0.10) 0%, transparent 16%),
                radial-gradient(circle at 12% 22%, rgba(255, 255, 255, 0.016) 0%, transparent 24%),
                radial-gradient(circle at 88% 16%, rgba(28, 40, 77, 0.10) 0%, transparent 20%),
                linear-gradient(180deg, #11182E 0%, #141B33 18%, #1A2444 100%),
                url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.014'/%3E%3C/svg%3E") !important;
            background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat !important;
        }

        html.dark-mode.dark-mode-b #main-header {
            background:
                radial-gradient(circle at 38% 18%, rgba(159, 194, 255, 0.16), transparent 18%),
                radial-gradient(circle at 74% 18%, rgba(42, 89, 214, 0.22), transparent 30%),
                linear-gradient(90deg, #174FC5 0%, #102B72 48%, #163EAA 100%) !important;
            box-shadow:
                0 14px 28px rgba(2, 8, 23, 0.44),
                0 6px 0 rgba(20, 27, 51, 0.88),
                0 30px 60px rgba(2, 8, 23, 0.36);
        }

        html.dark-mode.dark-mode-b .hero-subtitle::before,
        html.dark-mode.dark-mode-b .hero-subtitle::after,
        html.dark-mode.dark-mode-b .devotion-date::before {
            background: linear-gradient(135deg, #DCE9FF, #9FC2FF);
            box-shadow: 0 0 18px rgba(159, 194, 255, 0.24);
        }

        html.dark-mode.dark-mode-b .devotion-tabs {
            background:
                radial-gradient(circle at 22% 0%, rgba(159, 194, 255, 0.12), transparent 34%),
                linear-gradient(180deg, rgba(23, 30, 57, 0.96), rgba(15, 22, 42, 0.94)) !important;
            border-color: rgba(132, 163, 235, 0.18) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.07),
                0 18px 36px rgba(2, 8, 23, 0.30) !important;
        }

        html.dark-mode.dark-mode-b .devotion-tab-btn {
            color: #B8C9EA !important;
            background: transparent !important;
        }

        html.dark-mode.dark-mode-b .devotion-tab-btn:hover {
            color: #EAF2FF !important;
            background: rgba(92, 124, 196, 0.12) !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 20px rgba(2, 8, 23, 0.20) !important;
        }

        html.dark-mode.dark-mode-b .devotion-tab-btn.active {
            color: #FFFFFF !important;
            background: linear-gradient(180deg, #4F7FDD 0%, #3158B6 100%) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.16),
                0 12px 26px rgba(2, 6, 23, 0.34),
                0 0 0 1px rgba(147, 197, 253, 0.18) !important;
        }

        html.dark-mode.dark-mode-b .devotion-date {
            color: #9FC2FF !important;
            -webkit-text-fill-color: #9FC2FF !important;
            text-shadow: 0 0 18px rgba(87, 140, 255, 0.10);
        }

        html.dark-mode.dark-mode-b .devotion-date::first-line {
            color: #6F84AD !important;
            -webkit-text-fill-color: #6F84AD !important;
        }

        html.dark-mode.dark-mode-b .devotion-date::after,
        html.dark-mode.dark-mode-b .devotion-header-row::after,
        html.dark-mode.dark-mode-b .prayer-heading-rule,
        html.dark-mode.dark-mode-b .liturgical-rule {
            background:
                linear-gradient(90deg, transparent 0%, rgba(159, 194, 255, 0.16) 18%, rgba(159, 194, 255, 0.44) 50%, rgba(159, 194, 255, 0.16) 82%, transparent 100%) !important;
        }

        html.dark-mode.dark-mode-b .devotion-column,
        html.dark-mode.dark-mode-b #prayer-tab-panel .devotion-column {
            background:
                radial-gradient(circle at 16% 0%, rgba(159, 194, 255, 0.09), transparent 30%),
                linear-gradient(180deg, rgba(29, 40, 80, 0.96), rgba(20, 27, 51, 0.98)) !important;
            color: #E2E8F0 !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.055),
                inset 0 -56px 110px rgba(2, 8, 23, 0.18),
                0 18px 42px rgba(2, 8, 23, 0.36),
                0 0 0 1px rgba(132, 163, 235, 0.16) !important;
        }

        html.dark-mode.dark-mode-b .devotion-column::before {
            background:
                linear-gradient(135deg, rgba(159, 194, 255, 0.08), transparent 28%),
                linear-gradient(180deg, rgba(159, 194, 255, 0.08), transparent 24%) !important;
            opacity: 0.72;
        }

        html.dark-mode.dark-mode-b .devotion-header,
        html.dark-mode.dark-mode-b .morning-header,
        html.dark-mode.dark-mode-b .evening-header,
        html.dark-mode.dark-mode-b .devotion-topic,
        html.dark-mode.dark-mode-b #prayer-tab-panel .devotion-header,
        html.dark-mode.dark-mode-b #prayer-tab-panel .prayer-heading-title,
        html.dark-mode.dark-mode-b .prayer-heading-cross,
        html.dark-mode.dark-mode-b .liturgical-title {
            color: #9FC2FF !important;
            -webkit-text-fill-color: #9FC2FF !important;
        }

        html.dark-mode.dark-mode-b .devotion-text,
        html.dark-mode.dark-mode-b .devotion-text p,
        html.dark-mode.dark-mode-b .prayer-para,
        html.dark-mode.dark-mode-b #prayer-tab-panel .prayer-para,
        html.dark-mode.dark-mode-b .liturgical-verse,
        html.dark-mode.dark-mode-b .topical-detail-paragraph,
        html.dark-mode.dark-mode-b .topical-reading-section-description,
        html.dark-mode.dark-mode-b .topical-reference-copy {
            color: #E2E8F0 !important;
        }

        html.dark-mode.dark-mode-b .prayer-para.prayer-pause,
        html.dark-mode.dark-mode-b #prayer-tab-panel .prayer-para.prayer-pause,
        html.dark-mode.dark-mode-b .liturgical-ref,
        html.dark-mode.dark-mode-b .reference-footer,
        html.dark-mode.dark-mode-b .reference-footer a,
        html.dark-mode.dark-mode-b .ref-separator {
            color: #6F84AD !important;
        }

        html.dark-mode.dark-mode-b .theme-verse-p {
            color: #DCE6F8 !important;
            background: rgba(159, 194, 255, 0.065) !important;
            box-shadow:
                inset 2px 0 0 rgba(159, 194, 255, 0.62),
                inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
        }

        html.dark-mode.dark-mode-b .view-toggle-container,
        html.dark-mode.dark-mode-b .font-control-btn,
        html.dark-mode.dark-mode-b .nav-arrow,
        html.dark-mode.dark-mode-b #languageSelectWrapperHeader .custom-select-trigger {
            background: linear-gradient(180deg, rgba(23, 30, 57, 0.96), rgba(15, 22, 42, 0.96)) !important;
            border-color: rgba(132, 163, 235, 0.20) !important;
            color: #B8C9EA !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.06),
                0 12px 24px rgba(2, 8, 23, 0.26) !important;
        }

        html.dark-mode.dark-mode-b .nav-arrow:hover,
        html.dark-mode.dark-mode-b .font-control-btn:hover,
        html.dark-mode.dark-mode-b #languageSelectWrapperHeader .custom-select-trigger:hover {
            color: #EAF2FF !important;
            background: linear-gradient(180deg, rgba(29, 40, 80, 0.98), rgba(20, 27, 51, 0.98)) !important;
        }

        html.dark-mode.dark-mode-b .topical-devotion-panel,
        html.dark-mode.dark-mode-b .topical-reading-section,
        html.dark-mode.dark-mode-b .topical-reading-intro,
        html.dark-mode.dark-mode-b .topical-detail-hero,
        html.dark-mode.dark-mode-b .topical-reference-card,
        html.dark-mode.dark-mode-b .topical-topic-card {
            background:
                radial-gradient(circle at 16% 0%, rgba(159, 194, 255, 0.08), transparent 32%),
                linear-gradient(180deg, rgba(29, 40, 80, 0.94), rgba(20, 27, 51, 0.96)) !important;
            border-color: rgba(132, 163, 235, 0.18) !important;
            color: #E2E8F0 !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.05),
                0 16px 38px rgba(2, 8, 23, 0.32) !important;
        }

        html.dark-mode.dark-mode-b .topical-topic-name,
        html.dark-mode.dark-mode-b .topical-detail-title,
        html.dark-mode.dark-mode-b .topical-reading-section-title,
        html.dark-mode.dark-mode-b .topical-reference-link,
        html.dark-mode.dark-mode-b .topical-detail-category,
        html.dark-mode.dark-mode-b .topical-reading-section-kicker,
        html.dark-mode.dark-mode-b .topical-topic-button,
        html.dark-mode.dark-mode-b .topical-mobile-action-link {
            color: #9FC2FF !important;
            -webkit-text-fill-color: #9FC2FF !important;
        }

        html.dark-mode.dark-mode-b .topical-topic-meta,
        html.dark-mode.dark-mode-b .topical-detail-summary {
            color: #B8C9EA !important;
        }

        /* Final dark-mode readability pass: headings and day navigation */
        html.dark-mode:not(.dark-mode-b) .devotion-date {
            color: #D6B277 !important;
            -webkit-text-fill-color: #D6B277 !important;
            text-shadow: 0 0 18px rgba(214, 178, 119, 0.12);
        }

        html.dark-mode:not(.dark-mode-b) .devotion-date::first-line {
            color: #D8D0C4 !important;
            -webkit-text-fill-color: #D8D0C4 !important;
            opacity: 0.88;
        }

        html.dark-mode:not(.dark-mode-b) .devotion-header,
        html.dark-mode:not(.dark-mode-b) .morning-header,
        html.dark-mode:not(.dark-mode-b) .evening-header,
        html.dark-mode:not(.dark-mode-b) .devotion-topic,
        html.dark-mode:not(.dark-mode-b) #prayer-tab-panel .devotion-header,
        html.dark-mode:not(.dark-mode-b) #prayer-tab-panel .prayer-heading-title,
        html.dark-mode:not(.dark-mode-b) .prayer-heading-title,
        html.dark-mode:not(.dark-mode-b) .prayer-heading-cross,
        html.dark-mode:not(.dark-mode-b) .liturgical-title {
            color: #D6B277 !important;
            -webkit-text-fill-color: #D6B277 !important;
            opacity: 1 !important;
            text-shadow: 0 0 16px rgba(214, 178, 119, 0.12);
        }

        html.dark-mode.dark-mode-b .devotion-header,
        html.dark-mode.dark-mode-b .morning-header,
        html.dark-mode.dark-mode-b .evening-header,
        html.dark-mode.dark-mode-b .devotion-topic,
        html.dark-mode.dark-mode-b #prayer-tab-panel .devotion-header,
        html.dark-mode.dark-mode-b #prayer-tab-panel .prayer-heading-title,
        html.dark-mode.dark-mode-b .prayer-heading-title,
        html.dark-mode.dark-mode-b .prayer-heading-cross,
        html.dark-mode.dark-mode-b .liturgical-title {
            color: #9FC2FF !important;
            -webkit-text-fill-color: #9FC2FF !important;
            opacity: 1 !important;
            text-shadow: 0 0 18px rgba(87, 140, 255, 0.14);
        }

        html.dark-mode:not(.dark-mode-b) .prayer-heading-rule,
        html.dark-mode:not(.dark-mode-b) .devotion-header-row::after,
        html.dark-mode:not(.dark-mode-b) .liturgical-rule,
        html.dark-mode:not(.dark-mode-b) .devotion-date::after {
            background:
                linear-gradient(90deg, transparent 0%, rgba(214, 178, 119, 0.14) 16%, rgba(214, 178, 119, 0.46) 50%, rgba(214, 178, 119, 0.14) 84%, transparent 100%) !important;
            opacity: 1 !important;
        }

        html.dark-mode.dark-mode-b .prayer-heading-rule,
        html.dark-mode.dark-mode-b .devotion-header-row::after,
        html.dark-mode.dark-mode-b .liturgical-rule,
        html.dark-mode.dark-mode-b .devotion-date::after {
            background:
                linear-gradient(90deg, transparent 0%, rgba(159, 194, 255, 0.14) 16%, rgba(159, 194, 255, 0.48) 50%, rgba(159, 194, 255, 0.14) 84%, transparent 100%) !important;
            opacity: 1 !important;
        }

        html.dark-mode:not(.dark-mode-b) .devotion-date::before,
        html.dark-mode:not(.dark-mode-b) .hero-subtitle::before,
        html.dark-mode:not(.dark-mode-b) .hero-subtitle::after {
            background: linear-gradient(135deg, #EAD09F, #D6B277) !important;
            box-shadow: 0 0 18px rgba(214, 178, 119, 0.24) !important;
        }

        html.dark-mode .nav-arrow {
            opacity: 0.68 !important;
        }

        html.dark-mode body:hover .nav-arrow {
            opacity: 0.82 !important;
        }

        html.dark-mode .nav-arrow svg {
            stroke: currentColor !important;
        }

        html.dark-mode:not(.dark-mode-b) .nav-arrow {
            color: #D6B277 !important;
            background: rgba(43, 40, 35, 0.78) !important;
            border: 1px solid rgba(214, 178, 119, 0.24) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.06),
                0 14px 30px rgba(0, 0, 0, 0.34),
                0 0 0 1px rgba(214, 178, 119, 0.06) !important;
        }

        html.dark-mode:not(.dark-mode-b) .nav-arrow:hover {
            color: #F1D8A8 !important;
            background: rgba(56, 51, 43, 0.92) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.08),
                0 18px 38px rgba(0, 0, 0, 0.42),
                0 0 24px rgba(214, 178, 119, 0.14) !important;
        }

        html.dark-mode.dark-mode-b .nav-arrow {
            color: #9FC2FF !important;
            background: rgba(23, 30, 57, 0.82) !important;
            border: 1px solid rgba(159, 194, 255, 0.26) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.07),
                0 14px 30px rgba(2, 8, 23, 0.38),
                0 0 0 1px rgba(159, 194, 255, 0.07) !important;
        }

        html.dark-mode.dark-mode-b .nav-arrow:hover {
            color: #EAF2FF !important;
            background: rgba(29, 40, 80, 0.94) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.09),
                0 18px 38px rgba(2, 8, 23, 0.44),
                0 0 24px rgba(159, 194, 255, 0.15) !important;
        }

        /* Dark-mode parity for newly added Daily Devotion source panels. */
        html.dark-mode:not(.dark-mode-b) body.streams-active,
        html.dark-mode:not(.dark-mode-b) body.morning-evening-active {
            background:
                radial-gradient(circle at top center, rgba(214, 178, 119, 0.08) 0%, transparent 20%),
                radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.018) 0%, transparent 24%),
                linear-gradient(180deg, #191714 0%, #1F1C18 22%, #27231D 100%) !important;
            background-attachment: fixed !important;
            color: #E7E0D6 !important;
        }

        html.dark-mode.dark-mode-b body.streams-active,
        html.dark-mode.dark-mode-b body.morning-evening-active {
            background:
                radial-gradient(circle at top center, rgba(73, 98, 160, 0.11) 0%, transparent 20%),
                radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.018) 0%, transparent 24%),
                radial-gradient(circle at 86% 14%, rgba(27, 39, 75, 0.10) 0%, transparent 22%),
                linear-gradient(180deg, #0D1223 0%, #10172B 20%, #151D35 100%) !important;
            background-attachment: fixed !important;
            color: #E2E8F0 !important;
        }

        html.dark-mode body.streams-active::before,
        html.dark-mode body.streams-active::after,
        html.dark-mode body.morning-evening-active::before,
        html.dark-mode body.morning-evening-active::after {
            opacity: 0.24 !important;
            filter: blur(72px) !important;
        }

        html.dark-mode:not(.dark-mode-b) #streams-source-panel .devotion-column,
        html.dark-mode:not(.dark-mode-b) #morning-evening-source-panel .devotion-column {
            background:
                radial-gradient(circle at 16% 0%, rgba(214, 178, 119, 0.07), transparent 30%),
                linear-gradient(180deg, rgba(43, 40, 35, 0.96), rgba(31, 29, 25, 0.98)) !important;
            color: #E7E0D6 !important;
            border-color: rgba(214, 178, 119, 0.18) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.055),
                inset 0 -56px 110px rgba(0, 0, 0, 0.16),
                0 18px 42px rgba(0, 0, 0, 0.34),
                0 0 0 1px rgba(214, 178, 119, 0.10) !important;
        }

        html.dark-mode.dark-mode-b #streams-source-panel .devotion-column,
        html.dark-mode.dark-mode-b #morning-evening-source-panel .devotion-column {
            background:
                radial-gradient(circle at 16% 0%, rgba(159, 194, 255, 0.09), transparent 30%),
                linear-gradient(180deg, rgba(29, 40, 80, 0.96), rgba(20, 27, 51, 0.98)) !important;
            color: #E2E8F0 !important;
            border-color: rgba(132, 163, 235, 0.20) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.055),
                inset 0 -56px 110px rgba(2, 8, 23, 0.18),
                0 18px 42px rgba(2, 8, 23, 0.36),
                0 0 0 1px rgba(132, 163, 235, 0.16) !important;
        }

        html.dark-mode:not(.dark-mode-b) #streams-source-panel .devotion-header,
        html.dark-mode:not(.dark-mode-b) #morning-evening-source-panel .devotion-header,
        html.dark-mode:not(.dark-mode-b) #morning-evening-source-panel .devotion-topic,
        html.dark-mode:not(.dark-mode-b) #morning-evening-source-panel .devotion-text h1,
        html.dark-mode:not(.dark-mode-b) #morning-evening-source-panel .devotion-text h2,
        html.dark-mode:not(.dark-mode-b) #morning-evening-source-panel .devotion-text h3 {
            color: #D6B277 !important;
            -webkit-text-fill-color: #D6B277 !important;
            text-shadow: 0 0 16px rgba(214, 178, 119, 0.12) !important;
        }

        html.dark-mode.dark-mode-b #streams-source-panel .devotion-header,
        html.dark-mode.dark-mode-b #morning-evening-source-panel .devotion-header,
        html.dark-mode.dark-mode-b #morning-evening-source-panel .devotion-topic,
        html.dark-mode.dark-mode-b #morning-evening-source-panel .devotion-text h1,
        html.dark-mode.dark-mode-b #morning-evening-source-panel .devotion-text h2,
        html.dark-mode.dark-mode-b #morning-evening-source-panel .devotion-text h3 {
            color: #9FC2FF !important;
            -webkit-text-fill-color: #9FC2FF !important;
            text-shadow: 0 0 18px rgba(87, 140, 255, 0.14) !important;
        }

        html.dark-mode:not(.dark-mode-b) #streams-content .streams-scripture,
        html.dark-mode:not(.dark-mode-b) #morning-evening-source-panel .theme-verse-p {
            color: #E7E0D6 !important;
            background: rgba(214, 178, 119, 0.055) !important;
            border-color: rgba(214, 178, 119, 0.18) !important;
            box-shadow:
                inset 2px 0 0 rgba(214, 178, 119, 0.62),
                inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
        }

        html.dark-mode.dark-mode-b #streams-content .streams-scripture,
        html.dark-mode.dark-mode-b #morning-evening-source-panel .theme-verse-p {
            color: #DCE6F8 !important;
            background: rgba(159, 194, 255, 0.065) !important;
            border-color: rgba(159, 194, 255, 0.18) !important;
            box-shadow:
                inset 2px 0 0 rgba(159, 194, 255, 0.62),
                inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
        }

        html.dark-mode:not(.dark-mode-b) #streams-content .streams-body p,
        html.dark-mode:not(.dark-mode-b) #streams-content .streams-poem,
        html.dark-mode:not(.dark-mode-b) #streams-content .streams-quote,
        html.dark-mode:not(.dark-mode-b) #morning-evening-source-panel .devotion-text,
        html.dark-mode:not(.dark-mode-b) #morning-evening-source-panel .devotion-text p {
            color: #E7E0D6 !important;
        }

        html.dark-mode.dark-mode-b #streams-content .streams-body p,
        html.dark-mode.dark-mode-b #streams-content .streams-poem,
        html.dark-mode.dark-mode-b #streams-content .streams-quote,
        html.dark-mode.dark-mode-b #morning-evening-source-panel .devotion-text,
        html.dark-mode.dark-mode-b #morning-evening-source-panel .devotion-text p {
            color: #E2E8F0 !important;
        }

        html.dark-mode:not(.dark-mode-b) #streams-content .theme-verse-ref,
        html.dark-mode:not(.dark-mode-b) #morning-evening-source-panel .theme-verse-ref,
        html.dark-mode:not(.dark-mode-b) #morning-evening-source-panel .reference-footer,
        html.dark-mode:not(.dark-mode-b) #morning-evening-source-panel .reference-footer a {
            color: #D6B277 !important;
            -webkit-text-fill-color: #D6B277 !important;
        }

        html.dark-mode.dark-mode-b #streams-content .theme-verse-ref,
        html.dark-mode.dark-mode-b #morning-evening-source-panel .theme-verse-ref,
        html.dark-mode.dark-mode-b #morning-evening-source-panel .reference-footer,
        html.dark-mode.dark-mode-b #morning-evening-source-panel .reference-footer a {
            color: #9FC2FF !important;
            -webkit-text-fill-color: #9FC2FF !important;
        }

        /* Final dark-mode footer and Topic Devotion palette alignment */
        html.dark-mode:not(.dark-mode-b) .liturgical-closing {
            opacity: 1 !important;
        }

        html.dark-mode:not(.dark-mode-b) .liturgical-title,
        html.dark-mode:not(.dark-mode-b) #prayer-tab-panel .liturgical-title {
            color: #D6B277 !important;
            -webkit-text-fill-color: #D6B277 !important;
            opacity: 1 !important;
            text-shadow: 0 0 16px rgba(214, 178, 119, 0.16);
        }

        html.dark-mode:not(.dark-mode-b) .liturgical-verse,
        html.dark-mode:not(.dark-mode-b) #prayer-tab-panel .liturgical-verse {
            color: #E7DED0 !important;
            -webkit-text-fill-color: #E7DED0 !important;
            opacity: 0.9 !important;
        }

        html.dark-mode:not(.dark-mode-b) .liturgical-ref,
        html.dark-mode:not(.dark-mode-b) #prayer-tab-panel .liturgical-ref {
            color: #BCA174 !important;
            -webkit-text-fill-color: #BCA174 !important;
            opacity: 0.82 !important;
        }

        html.dark-mode.dark-mode-b .liturgical-closing {
            opacity: 1 !important;
        }

        html.dark-mode.dark-mode-b .liturgical-title,
        html.dark-mode.dark-mode-b #prayer-tab-panel .liturgical-title {
            color: #9FC2FF !important;
            -webkit-text-fill-color: #9FC2FF !important;
            opacity: 1 !important;
            text-shadow: 0 0 18px rgba(87, 140, 255, 0.16);
        }

        html.dark-mode.dark-mode-b .liturgical-verse,
        html.dark-mode.dark-mode-b #prayer-tab-panel .liturgical-verse {
            color: #E2E8F0 !important;
            -webkit-text-fill-color: #E2E8F0 !important;
            opacity: 0.92 !important;
        }

        html.dark-mode.dark-mode-b .liturgical-ref,
        html.dark-mode.dark-mode-b #prayer-tab-panel .liturgical-ref {
            color: #B8C9EA !important;
            -webkit-text-fill-color: #B8C9EA !important;
            opacity: 0.84 !important;
        }

        html.dark-mode:not(.dark-mode-b) .topical-devotion-panel,
        html.dark-mode:not(.dark-mode-b) .topical-topic-card,
        html.dark-mode:not(.dark-mode-b) .topical-detail-hero,
        html.dark-mode:not(.dark-mode-b) .topical-reading-intro,
        html.dark-mode:not(.dark-mode-b) .topical-reading-section,
        html.dark-mode:not(.dark-mode-b) .topical-reference-card {
            background:
                radial-gradient(circle at 16% 0%, rgba(214, 178, 119, 0.08), transparent 32%),
                linear-gradient(180deg, rgba(43, 40, 35, 0.94), rgba(26, 24, 21, 0.98)) !important;
            border-color: rgba(214, 178, 119, 0.20) !important;
            color: #E8E1D7 !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.04),
                0 16px 38px rgba(0, 0, 0, 0.32) !important;
        }

        html.dark-mode:not(.dark-mode-b) .topical-section-menu,
        html.dark-mode:not(.dark-mode-b) .topical-section-menu-toggle {
            background:
                radial-gradient(circle at 22% 0%, rgba(214, 178, 119, 0.10), transparent 34%),
                linear-gradient(180deg, rgba(42, 38, 32, 0.96), rgba(28, 26, 23, 0.96)) !important;
            border-color: rgba(214, 178, 119, 0.22) !important;
            color: #D8D0C4 !important;
        }

        html.dark-mode:not(.dark-mode-b) .topical-section-tab {
            background: rgba(39, 36, 31, 0.74) !important;
            border-color: rgba(214, 178, 119, 0.12) !important;
            color: #D8D0C4 !important;
            -webkit-text-fill-color: #D8D0C4 !important;
        }

        html.dark-mode:not(.dark-mode-b) .topical-section-tab:hover {
            color: #F1D8A8 !important;
            -webkit-text-fill-color: #F1D8A8 !important;
            background: rgba(56, 51, 43, 0.88) !important;
        }

        html.dark-mode:not(.dark-mode-b) .topical-section-tab.active {
            color: #211D18 !important;
            -webkit-text-fill-color: #211D18 !important;
            background: linear-gradient(180deg, #D6B277 0%, #A17843 100%) !important;
            border-color: rgba(214, 178, 119, 0.34) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.18),
                0 12px 26px rgba(0, 0, 0, 0.30),
                0 0 0 1px rgba(214, 178, 119, 0.14) !important;
        }

        html.dark-mode:not(.dark-mode-b) .topical-topic-name,
        html.dark-mode:not(.dark-mode-b) .topical-detail-title,
        html.dark-mode:not(.dark-mode-b) .topical-reading-section-title,
        html.dark-mode:not(.dark-mode-b) .topical-reference-link,
        html.dark-mode:not(.dark-mode-b) .topical-detail-category,
        html.dark-mode:not(.dark-mode-b) .topical-reading-section-kicker,
        html.dark-mode:not(.dark-mode-b) .topical-topic-button,
        html.dark-mode:not(.dark-mode-b) .topical-mobile-action-link {
            color: #D6B277 !important;
            -webkit-text-fill-color: #D6B277 !important;
            text-shadow: 0 0 16px rgba(214, 178, 119, 0.10);
        }

        html.dark-mode:not(.dark-mode-b) .topical-topic-title-link:hover,
        html.dark-mode:not(.dark-mode-b) .topical-reference-link:hover,
        html.dark-mode:not(.dark-mode-b) .topical-topic-button:hover,
        html.dark-mode:not(.dark-mode-b) .topical-mobile-action-link:hover {
            color: #F1D8A8 !important;
            -webkit-text-fill-color: #F1D8A8 !important;
        }

        html.dark-mode:not(.dark-mode-b) .topical-topic-meta,
        html.dark-mode:not(.dark-mode-b) .topical-detail-summary,
        html.dark-mode:not(.dark-mode-b) .topical-detail-paragraph,
        html.dark-mode:not(.dark-mode-b) .topical-reading-section-description,
        html.dark-mode:not(.dark-mode-b) .topical-reference-copy {
            color: #D8D0C4 !important;
            -webkit-text-fill-color: #D8D0C4 !important;
        }

        html.dark-mode:not(.dark-mode-b) .topical-topic-icon {
            background:
                radial-gradient(circle at 50% 18%, rgba(214, 178, 119, 0.14), transparent 58%),
                linear-gradient(180deg, rgba(46, 42, 36, 0.92), rgba(30, 28, 25, 0.9)) !important;
            border-color: rgba(214, 178, 119, 0.34) !important;
            color: #D6B277 !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.08),
                0 10px 22px rgba(0, 0, 0, 0.24),
                0 0 0 1px rgba(214, 178, 119, 0.08) !important;
        }

        html.dark-mode:not(.dark-mode-b) .topical-section-menu::after,
        html.dark-mode:not(.dark-mode-b) .topical-reading-section-head::after,
        html.dark-mode:not(.dark-mode-b) .topical-detail-hero-copy::after,
        html.dark-mode:not(.dark-mode-b) .topical-detail-hero::after {
            background:
                linear-gradient(90deg, rgba(214, 178, 119, 0), rgba(214, 178, 119, 0.50), rgba(214, 178, 119, 0.06)) !important;
        }

        html.dark-mode.dark-mode-b .topical-section-menu,
        html.dark-mode.dark-mode-b .topical-section-menu-toggle {
            background:
                radial-gradient(circle at 22% 0%, rgba(159, 194, 255, 0.12), transparent 34%),
                linear-gradient(180deg, rgba(23, 30, 57, 0.96), rgba(15, 22, 42, 0.96)) !important;
            border-color: rgba(159, 194, 255, 0.22) !important;
            color: #B8C9EA !important;
        }

        html.dark-mode.dark-mode-b .topical-section-tab {
            background: rgba(15, 23, 42, 0.72) !important;
            border-color: rgba(159, 194, 255, 0.12) !important;
            color: #B8C9EA !important;
            -webkit-text-fill-color: #B8C9EA !important;
        }

        html.dark-mode.dark-mode-b .topical-section-tab:hover {
            color: #EAF2FF !important;
            -webkit-text-fill-color: #EAF2FF !important;
            background: rgba(29, 40, 80, 0.88) !important;
        }

        html.dark-mode.dark-mode-b .topical-section-tab.active {
            color: #FFFFFF !important;
            -webkit-text-fill-color: #FFFFFF !important;
            background: linear-gradient(180deg, #4F7FDD 0%, #3158B6 100%) !important;
            border-color: rgba(147, 197, 253, 0.28) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.16),
                0 12px 26px rgba(2, 6, 23, 0.34),
                0 0 0 1px rgba(147, 197, 253, 0.14) !important;
        }

        html.dark-mode.dark-mode-b .topical-section-menu::after,
        html.dark-mode.dark-mode-b .topical-reading-section-head::after,
        html.dark-mode.dark-mode-b .topical-detail-hero-copy::after,
        html.dark-mode.dark-mode-b .topical-detail-hero::after {
            background:
                linear-gradient(90deg, rgba(159, 194, 255, 0), rgba(159, 194, 255, 0.50), rgba(159, 194, 255, 0.08)) !important;
        }

        html.dark-mode:not(.dark-mode-b) .topical-topic-detail {
            background:
                radial-gradient(circle at 50% 0%, rgba(214, 178, 119, 0.08), transparent 36%),
                linear-gradient(180deg, rgba(35, 32, 27, 0.82), rgba(24, 22, 19, 0.92)) !important;
            border-color: rgba(214, 178, 119, 0.18) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.04),
                0 18px 55px rgba(0, 0, 0, 0.30) !important;
        }

        html.dark-mode.dark-mode-b .topical-topic-detail {
            background:
                radial-gradient(circle at 50% 0%, rgba(159, 194, 255, 0.09), transparent 36%),
                linear-gradient(180deg, rgba(17, 24, 46, 0.86), rgba(10, 15, 30, 0.94)) !important;
            border-color: rgba(132, 163, 235, 0.18) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.05),
                0 18px 55px rgba(2, 8, 23, 0.36) !important;
        }

        /* Prayer topic heading parity with Daily Devotion topic headings */
        #prayer-tab-panel .prayer-heading-block {
            align-items: stretch !important;
            gap: 18px !important;
            margin-bottom: clamp(38px, 4vw, 54px) !important;
        }

        #prayer-tab-panel .prayer-heading-title {
            align-self: flex-start;
            width: min(100%, 760px);
            margin: 4px auto 2px 0 !important;
            font-family: var(--font-ui) !important;
            font-size: clamp(1.25rem, 1.55vw, 1.72rem) !important;
            font-weight: 750 !important;
            line-height: 1.18 !important;
            letter-spacing: 0 !important;
            text-align: left !important;
            text-transform: none !important;
            color: var(--accent-gold) !important;
            -webkit-text-fill-color: var(--accent-gold) !important;
            text-shadow: 0 0 16px rgba(184, 138, 77, 0.10);
        }

        #prayer-tab-panel .prayer-heading-title::first-letter {
            text-transform: uppercase;
        }

        #prayer-tab-panel .prayer-heading-rule-row {
            opacity: 0.78;
        }

        #prayer-tab-panel .prayer-heading-rule-row:first-child {
            margin-bottom: 2px;
        }

        #prayer-tab-panel .prayer-heading-rule-row:last-child {
            max-width: min(100%, 760px);
        }

        #prayer-tab-panel .devotion-header-row::after {
            display: none !important;
            content: none !important;
        }

        #prayer-tab-panel .devotion-header-row {
            padding-bottom: 0 !important;
        }

        html.dark-mode:not(.dark-mode-b) #prayer-tab-panel .prayer-heading-title {
            color: #D6B277 !important;
            -webkit-text-fill-color: #D6B277 !important;
            text-shadow: 0 0 16px rgba(214, 178, 119, 0.14);
        }

        html.dark-mode.dark-mode-b #prayer-tab-panel .prayer-heading-title {
            color: #9FC2FF !important;
            -webkit-text-fill-color: #9FC2FF !important;
            text-shadow: 0 0 18px rgba(87, 140, 255, 0.14);
        }

        @media (max-width: 768px) {
            #prayer-tab-panel .prayer-heading-block {
                gap: 14px !important;
                margin-bottom: 32px !important;
            }

            #prayer-tab-panel .prayer-heading-title {
                font-size: clamp(1.12rem, 5vw, 1.42rem) !important;
                line-height: 1.22 !important;
            }
        }

        /* Desktop devotion parchment: match study's clean warm paper and remove glare. */
        @media (min-width: 769px) {
            html:not(.parchment-off):not(.dark-mode) body::before,
            html:not(.parchment-off):not(.dark-mode) body::after {
                opacity: 0.34 !important;
                filter: blur(72px) !important;
            }

            html:not(.parchment-off):not(.dark-mode) #main-header {
                background:
                    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.07), transparent 22%),
                    radial-gradient(circle at 78% 14%, rgba(76, 126, 245, 0.14), transparent 24%),
                    linear-gradient(135deg, var(--hero-start) 0%, var(--hero-mid) 48%, var(--hero-end) 100%) !important;
                box-shadow:
                    0 16px 38px rgba(10, 20, 45, 0.16),
                    0 4px 0 rgba(246, 243, 235, 0.72) !important;
            }

            html:not(.parchment-off):not(.dark-mode) .hero-aurora {
                background:
                    linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 38%) !important;
                opacity: 0.42 !important;
            }

            html:not(.parchment-off):not(.dark-mode) .hero-particles {
                opacity: 0.32 !important;
            }

            html:not(.parchment-off):not(.dark-mode) .main-title,
            html:not(.parchment-off):not(.dark-mode) .hero-subtitle {
                text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
            }

            html:not(.parchment-off):not(.dark-mode) .devotion-tabs {
                background: rgba(246, 243, 235, 0.72) !important;
                border-color: rgba(168, 138, 94, 0.18) !important;
                box-shadow:
                    inset 0 1px 0 rgba(255, 255, 255, 0.38),
                    0 12px 30px rgba(80, 55, 20, 0.07) !important;
            }

            html:not(.parchment-off):not(.dark-mode) .devotion-tab-btn:not(.active) {
                color: #6B625A !important;
                -webkit-text-fill-color: #6B625A !important;
                background: transparent !important;
            }

            html:not(.parchment-off):not(.dark-mode) .devotion-tabs::before {
                display: none !important;
                opacity: 0 !important;
            }

            html:not(.parchment-off):not(.dark-mode) .devotion-tab-btn:not(.active):hover {
                background: rgba(36, 70, 184, 0.06) !important;
                color: #2B2118 !important;
                -webkit-text-fill-color: #2B2118 !important;
                box-shadow: none !important;
            }

            html:not(.parchment-off):not(.dark-mode) .devotion-tab-btn.active {
                background: linear-gradient(180deg, #3F62D6 0%, #2446B8 100%) !important;
                color: #FFFFFF !important;
                -webkit-text-fill-color: #FFFFFF !important;
                box-shadow:
                    0 8px 24px rgba(37, 70, 184, 0.28) !important;
            }

            html:not(.parchment-off):not(.dark-mode) .view-toggle-label {
                color: #5C4A3B !important;
                -webkit-text-fill-color: #5C4A3B !important;
                font-weight: 600 !important;
            }

            html:not(.parchment-off):not(.dark-mode) .toggle-switch .slider {
                background: #D8D2C8 !important;
            }

            html:not(.parchment-off):not(.dark-mode) .toggle-switch input:checked + .slider {
                background: #3559D8 !important;
            }

            html:not(.parchment-off):not(.dark-mode) .devotion-date {
                text-shadow: none !important;
            }

            html:not(.parchment-off):not(.dark-mode) .date-toggle-wrapper {
                margin-bottom: clamp(10px, 1.2vw, 18px) !important;
            }

            html:not(.parchment-off):not(.dark-mode) .devotion-grid {
                margin-top: 0 !important;
                gap: clamp(22px, 2.4vw, 34px) !important;
            }

            #prayer-devotion-grid,
            #prayer-devotion-grid.stacked {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            }

            html:not(.parchment-off):not(.dark-mode) .devotion-date::before {
                display: none !important;
                content: none !important;
                box-shadow: none !important;
                opacity: 0 !important;
            }

            html:not(.parchment-off):not(.dark-mode) .devotion-date::after {
                display: none !important;
                content: none !important;
                background: none !important;
                opacity: 0 !important;
            }

            html:not(.parchment-off):not(.dark-mode) .devotion-column,
            html:not(.parchment-off):not(.dark-mode) #prayer-tab-panel .devotion-column,
            html:not(.parchment-off):not(.dark-mode) .topical-devotion-panel,
            html:not(.parchment-off):not(.dark-mode) .topical-topic-card,
            html:not(.parchment-off):not(.dark-mode) .topical-detail-hero,
            html:not(.parchment-off):not(.dark-mode) .topical-reading-intro,
            html:not(.parchment-off):not(.dark-mode) .topical-reading-section,
            html:not(.parchment-off):not(.dark-mode) .topical-reference-card {
                background: #FCFAF7 !important;
                border: 1px solid rgba(120, 92, 60, 0.08) !important;
                box-shadow:
                    0 10px 30px rgba(60, 40, 20, 0.05),
                    0 1px 2px rgba(0, 0, 0, 0.04) !important;
            }

            html:not(.parchment-off):not(.dark-mode) .devotion-column::before,
            html:not(.parchment-off):not(.dark-mode) .topical-devotion-panel::before,
            html:not(.parchment-off):not(.dark-mode) .topical-topic-card::before,
            html:not(.parchment-off):not(.dark-mode) .topical-detail-hero::after,
            html:not(.parchment-off):not(.dark-mode) .topical-reading-section::before,
            html:not(.parchment-off):not(.dark-mode) .topical-reference-card::after {
                display: none !important;
                background: none !important;
                opacity: 0 !important;
            }

            html:not(.parchment-off):not(.dark-mode) .devotion-column::after {
                background: linear-gradient(90deg, transparent, rgba(168, 138, 94, 0.24), transparent) !important;
                opacity: 0.72;
            }

            html:not(.parchment-off):not(.dark-mode) .devotion-column:hover,
            html:not(.parchment-off):not(.dark-mode) #prayer-tab-panel .devotion-column:hover,
            html:not(.parchment-off):not(.dark-mode) .topical-topic-card:hover {
                border-color: rgba(120, 92, 60, 0.12) !important;
                box-shadow:
                    0 14px 36px rgba(60, 40, 20, 0.065),
                    0 1px 2px rgba(0, 0, 0, 0.045) !important;
            }

            html:not(.parchment-off):not(.dark-mode) #prayer-tab-panel .devotion-column:hover {
                transform: none !important;
            }

            html:not(.parchment-off):not(.dark-mode) .devotion-text,
            html:not(.parchment-off):not(.dark-mode) .devotion-text p,
            html:not(.parchment-off):not(.dark-mode) .prayer-para,
            html:not(.parchment-off):not(.dark-mode) #prayer-tab-panel .prayer-para,
            html:not(.parchment-off):not(.dark-mode) .topical-detail-paragraph,
            html:not(.parchment-off):not(.dark-mode) .topical-reading-section-description,
            html:not(.parchment-off):not(.dark-mode) .topical-reference-copy {
                color: #2B2118 !important;
                font-weight: 400 !important;
                line-height: 1.9 !important;
            }

            html:not(.parchment-off):not(.dark-mode) .theme-verse-p {
                background: #F8F1E8 !important;
                color: #2B2118 !important;
                border-color: rgba(168, 138, 94, 0.28) !important;
                box-shadow:
                    inset 2px 0 0 rgba(168, 138, 94, 0.42),
                    inset 0 1px 0 rgba(255, 255, 255, 0.46) !important;
            }

            html:not(.parchment-off):not(.dark-mode) .theme-verse-ref,
            html:not(.parchment-off):not(.dark-mode) .verse-ref-link,
            html:not(.parchment-off):not(.dark-mode) .reference-footer,
            html:not(.parchment-off):not(.dark-mode) .reference-footer a,
            html:not(.parchment-off):not(.dark-mode) .liturgical-ref {
                color: #9C6B32 !important;
                -webkit-text-fill-color: #9C6B32 !important;
                font-weight: 600 !important;
                letter-spacing: 0.04em !important;
            }

            html:not(.parchment-off):not(.dark-mode) #prayer-tab-panel .liturgical-closing {
                margin-top: 52px !important;
            }

            html:not(.parchment-off):not(.dark-mode) #prayer-tab-panel .liturgical-rule {
                background: linear-gradient(
                    90deg,
                    transparent 0%,
                    rgba(156, 107, 50, 0.14) 12%,
                    rgba(156, 107, 50, 0.34) 50%,
                    rgba(156, 107, 50, 0.14) 88%,
                    transparent 100%
                ) !important;
            }

            html:not(.parchment-off):not(.dark-mode) #prayer-tab-panel .liturgical-title {
                color: #6B4A2A !important;
                -webkit-text-fill-color: #6B4A2A !important;
                font-size: 0.68rem !important;
                font-weight: 800 !important;
                letter-spacing: 0.22em !important;
                opacity: 1 !important;
            }

            html:not(.parchment-off):not(.dark-mode) #prayer-tab-panel .liturgical-verse {
                color: #3A2E22 !important;
                -webkit-text-fill-color: #3A2E22 !important;
                font-size: clamp(1.12rem, 1.45vw, 1.28rem) !important;
                font-weight: 500 !important;
                line-height: 1.82 !important;
                opacity: 1 !important;
            }

            html:not(.parchment-off):not(.dark-mode) #prayer-tab-panel .liturgical-ref {
                color: #9C6B32 !important;
                -webkit-text-fill-color: #9C6B32 !important;
                font-size: 0.72rem !important;
                font-weight: 700 !important;
                letter-spacing: 0.08em !important;
                opacity: 1 !important;
            }

            html:not(.parchment-off):not(.dark-mode) .devotion-header,
            html:not(.parchment-off):not(.dark-mode) #prayer-tab-panel .devotion-header,
            html:not(.parchment-off):not(.dark-mode) .devotion-topic,
            html:not(.parchment-off):not(.dark-mode) #prayer-tab-panel .prayer-heading-title,
            html:not(.parchment-off):not(.dark-mode) .prayer-heading-title,
            html:not(.parchment-off):not(.dark-mode) .topical-topic-name,
            html:not(.parchment-off):not(.dark-mode) .topical-topic-title-link,
            html:not(.parchment-off):not(.dark-mode) .topical-detail-title,
            html:not(.parchment-off):not(.dark-mode) .topical-reading-section-title,
            html:not(.parchment-off):not(.dark-mode) .topical-reference-link {
                color: #2A1F16 !important;
                -webkit-text-fill-color: #2A1F16 !important;
                text-shadow: none !important;
                font-weight: 600 !important;
            }

            html:not(.parchment-off):not(.dark-mode) .devotion-topic,
            html:not(.parchment-off):not(.dark-mode) #prayer-tab-panel .prayer-heading-title,
            html:not(.parchment-off):not(.dark-mode) .topical-topic-name,
            html:not(.parchment-off):not(.dark-mode) .topical-topic-title-link {
                font-family: var(--font-heading) !important;
                font-size: 1.52rem !important;
                font-weight: 600 !important;
                line-height: 1.2 !important;
                letter-spacing: 0 !important;
            }

            html:not(.parchment-off):not(.dark-mode) .devotion-topic {
                margin: 0 0 22px 0 !important;
            }

            html:not(.parchment-off):not(.dark-mode) #prayer-tab-panel .prayer-heading-block {
                gap: 12px !important;
                margin-bottom: 28px !important;
                padding: 0 !important;
            }

            html:not(.parchment-off):not(.dark-mode) #prayer-tab-panel .prayer-heading-title {
                margin: 0 auto 0 0 !important;
                max-width: 30ch;
            }

            html:not(.parchment-off):not(.dark-mode) .topical-devotion-panel {
                background: #F7F3EC !important;
                border-color: rgba(120, 92, 60, 0.10) !important;
            }

            html:not(.parchment-off):not(.dark-mode) .topical-section-menu,
            html:not(.parchment-off):not(.dark-mode) .topical-section-menu-toggle {
                background: #FCFAF7 !important;
                border-color: rgba(120, 92, 60, 0.12) !important;
                box-shadow:
                    0 8px 22px rgba(60, 40, 20, 0.045),
                    0 1px 2px rgba(0, 0, 0, 0.035) !important;
            }

            html:not(.parchment-off):not(.dark-mode) .topical-section-menu::before {
                display: none !important;
                opacity: 0 !important;
            }

            html:not(.parchment-off):not(.dark-mode) .topical-section-tab {
                background: transparent !important;
                color: #3A2E22 !important;
                -webkit-text-fill-color: #3A2E22 !important;
                font-weight: 700 !important;
                border-color: rgba(120, 92, 60, 0.10) !important;
            }

            html:not(.parchment-off):not(.dark-mode) .topical-section-tab:hover {
                background: rgba(36, 70, 184, 0.06) !important;
                color: #2B2118 !important;
                -webkit-text-fill-color: #2B2118 !important;
            }

            html:not(.parchment-off):not(.dark-mode) .topical-section-tab.active {
                background: linear-gradient(180deg, #3F62D6 0%, #2446B8 100%) !important;
                color: #FFFFFF !important;
                -webkit-text-fill-color: #FFFFFF !important;
                box-shadow: 0 8px 24px rgba(37, 70, 184, 0.28) !important;
            }

            html:not(.parchment-off):not(.dark-mode) .topical-topic-card {
                background: #FCFAF7 !important;
            }

            html:not(.parchment-off):not(.dark-mode) #topical-topic-detail {
                background:
                    linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(247, 241, 231, 0.96)) !important;
                border: 1px solid rgba(170, 129, 74, 0.14) !important;
                box-shadow:
                    0 26px 70px rgba(72, 48, 20, 0.08),
                    inset 0 1px 0 rgba(255, 255, 255, 0.80) !important;
            }

            html:not(.parchment-off):not(.dark-mode) .topical-detail-hero {
                background:
                    linear-gradient(180deg, #FFFDF9 0%, #FBF6EC 54%, #F4ECDE 100%) !important;
                border: 1px solid rgba(174, 132, 75, 0.18) !important;
                box-shadow:
                    0 22px 54px rgba(72, 48, 20, 0.10),
                    inset 0 1px 0 rgba(255, 255, 255, 0.84),
                    inset 0 -1px 0 rgba(174, 132, 75, 0.10) !important;
            }

            html:not(.parchment-off):not(.dark-mode) .topical-detail-hero::before,
            html:not(.parchment-off):not(.dark-mode) .topical-detail-hero::after,
            html:not(.parchment-off):not(.dark-mode) .topical-reading-section::before,
            html:not(.parchment-off):not(.dark-mode) .topical-reference-card::after {
                display: block !important;
                opacity: 1 !important;
            }

            html:not(.parchment-off):not(.dark-mode) .topical-detail-hero::before {
                background:
                    linear-gradient(110deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.48) 44%, rgba(255, 255, 255, 0) 78%) !important;
            }

            html:not(.parchment-off):not(.dark-mode) .topical-detail-hero::after {
                background:
                    linear-gradient(90deg, rgba(176, 125, 30, 0), rgba(176, 125, 30, 0.46), rgba(176, 125, 30, 0)) center top / min(420px, calc(100% - 96px)) 2px no-repeat,
                    linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(245, 235, 218, 0.54)) !important;
                box-shadow: inset 0 -18px 36px rgba(255, 255, 255, 0.38) !important;
            }

            html:not(.parchment-off):not(.dark-mode) .topical-detail-category,
            html:not(.parchment-off):not(.dark-mode) .topical-reading-section-kicker {
                background: linear-gradient(180deg, #FFF8EA 0%, #EFE2CA 100%) !important;
                border-color: rgba(176, 125, 30, 0.20) !important;
                color: #6F4E23 !important;
                box-shadow:
                    inset 0 1px 0 rgba(255, 255, 255, 0.76),
                    0 8px 20px rgba(90, 62, 26, 0.08) !important;
            }

            html:not(.parchment-off):not(.dark-mode) .topical-detail-title,
            html:not(.parchment-off):not(.dark-mode) .topical-reading-section-title {
                color: #211914 !important;
                -webkit-text-fill-color: #211914 !important;
                text-shadow: 0 1px 0 rgba(255, 255, 255, 0.62) !important;
            }

            html:not(.parchment-off):not(.dark-mode) .topical-transition-quote,
            html:not(.parchment-off):not(.dark-mode) .topical-detail-summary {
                color: #6C5B48 !important;
                opacity: 1 !important;
            }

            html:not(.parchment-off):not(.dark-mode) .topical-reading-intro,
            html:not(.parchment-off):not(.dark-mode) .topical-reading-section {
                background:
                    linear-gradient(180deg, #FFFDF9 0%, #FBF6EE 58%, #F7F0E5 100%) !important;
                border: 1px solid rgba(174, 132, 75, 0.16) !important;
                box-shadow:
                    0 22px 56px rgba(72, 48, 20, 0.08),
                    inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
            }

            html:not(.parchment-off):not(.dark-mode) .topical-reading-section::before {
                background:
                    linear-gradient(110deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0)) !important;
            }

            html:not(.parchment-off):not(.dark-mode) .topical-reading-section-head {
                border-bottom-color: rgba(176, 125, 30, 0.18) !important;
            }

            html:not(.parchment-off):not(.dark-mode) .topical-reading-section-head::after {
                background: linear-gradient(90deg, rgba(176, 125, 30, 0.62), rgba(176, 125, 30, 0.10)) !important;
            }

            html:not(.parchment-off):not(.dark-mode) .topical-reference-card {
                background:
                    linear-gradient(180deg, #FFFDF9 0%, #FBF6EE 100%) !important;
                border: 1px solid rgba(174, 132, 75, 0.15) !important;
                box-shadow:
                    0 14px 34px rgba(72, 48, 20, 0.07),
                    inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
            }

            html:not(.parchment-off):not(.dark-mode) .topical-reference-card:hover {
                border-color: rgba(174, 132, 75, 0.24) !important;
                box-shadow:
                    0 18px 40px rgba(72, 48, 20, 0.10),
                    inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
            }

            html:not(.parchment-off):not(.dark-mode) .topical-reference-card::after {
                background: linear-gradient(135deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0)) !important;
            }

            html:not(.parchment-off):not(.dark-mode) .topical-reference-copy {
                background: #FCF5EC !important;
                border-color: #E1CFB8 !important;
                color: #2B2118 !important;
                box-shadow:
                    inset 0 1px 0 rgba(255, 255, 255, 0.72),
                    0 10px 24px rgba(72, 48, 20, 0.055) !important;
            }

            .topical-topic-grid {
                grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important;
                max-width: 100% !important;
                overflow: visible !important;
            }

            .topical-topic-card {
                min-width: 0 !important;
                overflow: hidden !important;
            }

            .topical-topic-head {
                min-width: 0 !important;
            }

            html:not(.parchment-off):not(.dark-mode) .topical-topic-meta {
                color: #3A2E22 !important;
                -webkit-text-fill-color: #3A2E22 !important;
                font-weight: 400 !important;
                line-height: 1.68 !important;
            }

            html:not(.parchment-off):not(.dark-mode) .topical-topic-button,
            html:not(.parchment-off):not(.dark-mode) .topical-mobile-action-link {
                color: #A85F0A !important;
                -webkit-text-fill-color: #A85F0A !important;
                font-weight: 800 !important;
            }

            html:not(.parchment-off):not(.dark-mode) .topical-topic-icon {
                background: #FBF4E6 !important;
                border-color: rgba(156, 107, 50, 0.18) !important;
                color: #2446B8 !important;
                box-shadow:
                    0 6px 16px rgba(37, 70, 184, 0.08),
                    0 1px 2px rgba(0, 0, 0, 0.04) !important;
            }

            html:not(.parchment-off):not(.dark-mode) .topical-topic-icon svg,
            html:not(.parchment-off):not(.dark-mode) .topical-topic-icon svg * {
                stroke: #2446B8 !important;
                color: #2446B8 !important;
            }

            .topical-topic-card:hover .topical-topic-icon svg {
                transform: scale(1.08) !important;
            }
        }

        @media (max-width: 768px) {
            .daily-source-tabs {
                display: grid !important;
                grid-template-columns: 1fr;
                align-items: stretch;
                width: calc(100% - 24px);
                margin: 0 auto 24px;
                overflow: visible;
                justify-content: stretch;
            }

            .daily-source-tabs .topical-section-menu {
                display: none !important;
                width: 100%;
                max-width: 100%;
                grid-column: 1;
                margin-top: 12px;
                overflow: hidden;
                border-radius: 22px;
                padding: 10px;
                border: 1px solid rgba(190, 158, 110, 0.18);
                background: rgba(255, 252, 247, 0.96);
                box-shadow:
                    0 16px 34px rgba(88, 63, 29, 0.14),
                    inset 0 1px 0 rgba(255, 255, 255, 0.72);
            }

            .daily-source-tabs.open .topical-section-menu {
                display: grid !important;
                grid-template-columns: 1fr;
                gap: 8px;
            }

            .daily-source-menu-toggle {
                display: flex !important;
                width: fit-content;
                max-width: 100%;
                align-items: center;
                justify-content: flex-start;
                gap: 14px;
            }

            .daily-source-menu-toggle .topical-section-menu-label {
                min-width: 0;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .daily-source-tab {
                flex: none;
                min-width: 0;
                width: 100%;
                justify-content: flex-start;
                text-align: left;
                white-space: normal;
            }

            .daily-source-placeholder {
                width: calc(100% - 24px);
            }
        }

        #daily-light-source-panel .devotion-column,
        #morning-evening-source-panel .devotion-column,
        #imitation-source-panel .devotion-column,
        #streams-source-panel .devotion-column {
            align-self: start;
            height: auto !important;
            max-height: none !important;
            overflow: visible !important;
        }

        #daily-light-source-panel .devotion-text,
        #morning-evening-source-panel .devotion-text,
        #imitation-source-panel .devotion-text,
        #streams-source-panel .devotion-text,
        #streams-content,
        #streams-content .streams-body {
            height: auto !important;
            max-height: none !important;
            overflow: visible !important;
        }

        #daily-light-source-panel .devotion-text p:not(.theme-verse-p):not(.reference-footer),
        #morning-evening-source-panel .devotion-text p:not(.theme-verse-p):not(.reference-footer),
        #imitation-source-panel .devotion-text p,
        #prayer-tab-panel .prayer-para,
        #prayer-tab-panel .prayer-para.prayer-first,
        #streams-content .streams-body p {
            font-family: var(--devotion-reading-font-family) !important;
            font-size: var(--daily-reading-font-size) !important;
            font-style: normal !important;
            font-weight: 300 !important;
        }

        body.split-view #daily-light-source-panel .devotion-grid:not(.stacked),
        body.split-view #morning-evening-source-panel .devotion-grid:not(.stacked),
        body.split-view #streams-source-panel .devotion-grid:not(.stacked) {
            align-items: stretch;
        }

        body.split-view #daily-light-source-panel .devotion-grid:not(.stacked) .devotion-column,
        body.split-view #morning-evening-source-panel .devotion-grid:not(.stacked) .devotion-column,
        body.split-view #streams-source-panel .devotion-grid:not(.stacked) .devotion-column {
            align-self: stretch;
            height: auto !important;
        }

        body #daily-light-source-panel .devotion-text p:not(.theme-verse-p):not(.reference-footer),
        body #morning-evening-source-panel .devotion-text p:not(.theme-verse-p):not(.reference-footer),
        body.streams-active #streams-source-panel #streams-content .streams-body p,
        html:not(.parchment-off):not(.dark-mode) body #daily-light-source-panel .devotion-text p:not(.theme-verse-p):not(.reference-footer),
        html:not(.parchment-off):not(.dark-mode) body #morning-evening-source-panel .devotion-text p:not(.theme-verse-p):not(.reference-footer),
        html:not(.parchment-off):not(.dark-mode) body.streams-active #streams-source-panel #streams-content .streams-body p,
        body.split-view #daily-light-source-panel .devotion-text p:not(.theme-verse-p):not(.reference-footer),
        body.morning-evening-active.split-view #morning-evening-source-panel .devotion-text p:not(.theme-verse-p):not(.reference-footer) {
            font-family: var(--devotion-reading-font-family) !important;
            font-size: var(--daily-reading-font-size) !important;
            font-style: normal !important;
            font-weight: 300 !important;
        }

        body #daily-light-source-panel .devotion-topic,
        body #daily-light-source-panel .devotion-text h1,
        body #daily-light-source-panel .devotion-text h2,
        body #daily-light-source-panel .devotion-text h3,
        body #morning-evening-source-panel .devotion-topic,
        body #morning-evening-source-panel .devotion-text h1,
        body #morning-evening-source-panel .devotion-text h2,
        body #morning-evening-source-panel .devotion-text h3,
        body.streams-active #streams-source-panel .devotion-header {
            font-size: clamp(1.35rem, 1.7vw, 1.72rem) !important;
            font-style: normal !important;
            font-weight: 600 !important;
        }

        body #daily-light-source-panel .devotion-header,
        body #morning-evening-source-panel .devotion-header {
            font-size: 0.72rem !important;
            font-style: normal !important;
            font-weight: 700 !important;
        }

        @media (min-width: 769px) {
            body #daily-light-source-panel .devotion-header,
            body #morning-evening-source-panel .devotion-header,
            body #prayer-tab-panel .devotion-header {
                color: #2A1F16 !important;
                font-family: var(--font-heading) !important;
                font-size: clamp(1.08rem, 1.35vw, 1.34rem) !important;
                font-style: normal !important;
                font-weight: 700 !important;
                letter-spacing: 0.02em !important;
                text-transform: uppercase !important;
            }
        }

        body #daily-light-source-panel .theme-verse-p,
        body #morning-evening-source-panel .theme-verse-p,
        body.streams-active #streams-source-panel #streams-content .streams-scripture {
            font-size: clamp(1.12rem, 1.45vw, 1.28rem) !important;
            font-style: italic !important;
            font-weight: 400 !important;
        }

        body #daily-light-source-panel .theme-verse-ref,
        body #morning-evening-source-panel .theme-verse-ref,
        body.streams-active #streams-source-panel #streams-content .theme-verse-ref,
        body.streams-active #streams-source-panel #streams-content .streams-scripture-reference {
            font-size: 0.72rem !important;
            font-style: normal !important;
            font-weight: 700 !important;
        }

        body #daily-light-source-panel .devotion-grid.stacked .devotion-topic,
        body #daily-light-source-panel .devotion-grid.stacked .devotion-text h1,
        body #daily-light-source-panel .devotion-grid.stacked .devotion-text h2,
        body #daily-light-source-panel .devotion-grid.stacked .devotion-text h3,
        body #morning-evening-source-panel .devotion-grid.stacked .devotion-topic,
        body #morning-evening-source-panel .devotion-grid.stacked .devotion-text h1,
        body #morning-evening-source-panel .devotion-grid.stacked .devotion-text h2,
        body #morning-evening-source-panel .devotion-grid.stacked .devotion-text h3 {
            text-align: center !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }

        .topical-reference-card .topical-reference-copy,
        html:not(.parchment-off):not(.dark-mode) .topical-reference-card .topical-reference-copy,
        html.dark-mode .topical-reference-card .topical-reference-copy {
            font-size: 1rem !important;
            font-weight: 400 !important;
            line-height: 1.86 !important;
            margin: 0 !important;
        }

        .topical-reference-card .topical-reference-copy::before,
        html.dark-mode .topical-reference-card .topical-reference-copy::before {
            font-size: 1.18em !important;
            line-height: 0.9 !important;
        }

        body.morning-evening-active #morning-evening-source-panel .devotion-grid,
        body.morning-evening-active #me-devotion-grid.stacked {
            max-width: 1080px !important;
        }

        body.morning-evening-active #morning-evening-source-panel .devotion-column {
            padding: clamp(48px, 5vw, 78px) clamp(50px, 6vw, 88px) clamp(54px, 6vw, 86px) !important;
        }

        body.morning-evening-active #morning-evening-source-panel .theme-verse-p {
            max-width: 100% !important;
            margin: 32px auto 40px !important;
            padding: clamp(28px, 3vw, 44px) !important;
            border-radius: 24px !important;
            font-family: var(--devotion-reading-font-family) !important;
            font-size: clamp(1.12rem, 1.45vw, 1.28rem) !important;
            font-style: italic !important;
            font-weight: 400 !important;
            line-height: 1.75 !important;
            text-align: left !important;
        }

        body.morning-evening-active #morning-evening-source-panel .theme-verse-p::before {
            align-self: flex-start !important;
            margin-bottom: 0.24em !important;
            font-size: 1.45em !important;
            line-height: 0.9 !important;
        }

        body.morning-evening-active #morning-evening-source-panel .theme-verse-ref-container {
            display: inline !important;
            margin-left: 1rem !important;
        }

        body.morning-evening-active #morning-evening-source-panel .theme-verse-ref {
            font-size: 0.72rem !important;
            font-style: normal !important;
            font-weight: 700 !important;
        }

        body.morning-evening-active.split-view #me-devotion-grid:not(.stacked) {
            max-width: 1280px !important;
            gap: clamp(28px, 3vw, 56px) !important;
            margin: 0 auto !important;
        }

        body.morning-evening-active.split-view #morning-evening-source-panel .theme-verse-p {
            max-width: 100% !important;
            margin: 32px auto 40px !important;
            padding: clamp(28px, 3vw, 44px) !important;
            font-family: var(--devotion-reading-font-family) !important;
            font-size: clamp(1.12rem, 1.45vw, 1.28rem) !important;
            font-style: italic !important;
            font-weight: 400 !important;
            line-height: 1.75 !important;
            text-align: left !important;
        }

        body.morning-evening-active.split-view #morning-evening-source-panel .theme-verse-ref {
            font-size: 0.72rem !important;
            font-style: normal !important;
            font-weight: 700 !important;
        }

        @media (min-width: 769px) {
            body #morning-evening-source-panel .devotion-text .theme-verse-p {
                display: block !important;
                position: relative !important;
                max-width: 100% !important;
                margin: 32px auto 40px !important;
                padding: clamp(28px, 3vw, 44px) !important;
                box-sizing: border-box !important;
                background: #FCF5EC !important;
                border: 1px solid #E1CFB8 !important;
                border-radius: 24px !important;
                box-shadow:
                    0 18px 45px rgba(80, 55, 20, 0.06),
                    inset 0 1px 0 rgba(255, 255, 255, 0.70) !important;
                color: #4A3928 !important;
                font-family: var(--devotion-reading-font-family) !important;
                font-size: clamp(1.12rem, 1.45vw, 1.28rem) !important;
                font-style: italic !important;
                font-weight: 400 !important;
                line-height: 1.75 !important;
                text-align: left !important;
                text-indent: 0 !important;
            }

            body #morning-evening-source-panel .devotion-text .theme-verse-p::before {
                content: '“' !important;
                display: block !important;
                margin-bottom: 0.24em !important;
                color: #B78A4A !important;
                font-family: var(--font-heading) !important;
                font-size: 1.45em !important;
                font-style: normal !important;
                line-height: 0.9 !important;
                text-shadow: 0 8px 28px rgba(154, 108, 47, 0.16) !important;
            }

            body #morning-evening-source-panel .devotion-text .theme-verse-ref-container {
                display: inline !important;
                margin-left: 1rem !important;
                white-space: nowrap !important;
            }
        }

        body.streams-active #streams-source-panel #streams-content .streams-scripture {
            display: block !important;
            width: 100% !important;
            max-width: 100% !important;
            margin: 32px auto 40px !important;
            padding: clamp(28px, 3vw, 44px) !important;
            border-radius: 24px !important;
            box-sizing: border-box !important;
            font-family: var(--devotion-reading-font-family) !important;
            font-size: clamp(1.12rem, 1.45vw, 1.28rem) !important;
            font-style: italic !important;
            font-weight: 400 !important;
            line-height: 1.75 !important;
            text-align: left !important;
        }

        body.streams-active #streams-source-panel .devotion-column {
            align-items: stretch !important;
        }

        body.streams-active #streams-source-panel #streams-content {
            max-width: 100% !important;
            width: 100% !important;
            align-self: stretch !important;
            margin-inline: 0 !important;
        }

        body.streams-active #streams-source-panel #streams-content .streams-scripture-quote {
            font-family: var(--devotion-reading-font-family) !important;
            font-size: inherit !important;
            font-style: italic !important;
            font-weight: 400 !important;
            line-height: inherit !important;
        }

        body.streams-active #streams-source-panel #streams-content .streams-scripture::before {
            margin-bottom: 0.24em !important;
            font-size: 1.45em !important;
            line-height: 0.9 !important;
            text-align: left !important;
        }

        body.streams-active #streams-source-panel #streams-content .streams-scripture-reference,
        body.streams-active #streams-source-panel #streams-content .theme-verse-ref {
            display: inline-flex !important;
            align-items: baseline !important;
            margin: 0 0 0 1rem !important;
            font-size: clamp(0.86rem, 1vw, 1rem) !important;
            font-style: normal !important;
            font-weight: 700 !important;
            line-height: 1.35 !important;
            white-space: nowrap !important;
        }

        body.streams-active #streams-source-panel #streams-content .streams-poem {
            font-family: var(--devotion-reading-font-family) !important;
            font-size: var(--daily-reading-font-size) !important;
            font-style: italic !important;
            font-weight: 300 !important;
            line-height: 1.9 !important;
        }

        #daily-tab-panel .devotion-text a.verse-ref-link,
        #daily-tab-panel .devotion-text a.theme-verse-ref,
        #daily-tab-panel .devotion-text a.inline-verse-ref,
        #daily-tab-panel .reference-footer a,
        #daily-tab-panel .liturgical-ref a {
            color: #B38A56 !important;
            -webkit-text-fill-color: #B38A56 !important;
            font-family: var(--devotion-reading-font-family) !important;
            font-size: 0.94em !important;
            font-style: italic !important;
            font-weight: 500 !important;
            letter-spacing: 0 !important;
            line-height: 1.35 !important;
            margin-left: 0.12em !important;
            margin-right: 0.08em !important;
            opacity: 0.82 !important;
            text-decoration: none !important;
            text-shadow: none !important;
            white-space: nowrap !important;
        }

        #daily-tab-panel .devotion-text a.verse-ref-link:hover,
        #daily-tab-panel .devotion-text a.theme-verse-ref:hover,
        #daily-tab-panel .devotion-text a.inline-verse-ref:hover,
        #daily-tab-panel .reference-footer a:hover,
        #daily-tab-panel .liturgical-ref a:hover {
            color: #9E7442 !important;
            -webkit-text-fill-color: #9E7442 !important;
            opacity: 1 !important;
            text-decoration: none !important;
        }

        /* Final reading-size lock: every Daily main reading surface tracks Study. */
        :root {
            --daily-study-font-weight: 400;
            --daily-study-line-height: 1.42;
        }

        html.dark-mode {
            --daily-study-font-weight: 330;
        }

        body #daily-tab-panel #daily-light-source-panel .devotion-text,
        body #daily-tab-panel #morning-evening-source-panel .devotion-text,
        body #daily-tab-panel #imitation-source-panel .devotion-text,
        body #daily-tab-panel #streams-source-panel .devotion-text,
        body #daily-tab-panel #prayer-tab-panel .prayer-card,
        body #topical-tab-panel .topical-reading-intro,
        body #topical-tab-panel .topical-reading-section {
            text-align: left !important;
        }

        body #topical-tab-panel .topical-reading-section-head {
            justify-items: start !important;
            text-align: left !important;
        }

        body #topical-tab-panel .topical-reading-section .topical-reading-section-description {
            width: 100% !important;
            max-width: 100% !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            text-align: left !important;
        }

        body #daily-light-source-panel .devotion-text p:not(.theme-verse-p):not(.reference-footer),
        body #daily-tab-panel #daily-light-source-panel #morning-content.devotion-text p:not(.theme-verse-p):not(.reference-footer),
        body #daily-tab-panel #daily-light-source-panel #evening-content.devotion-text p:not(.theme-verse-p):not(.reference-footer),
        body #morning-evening-source-panel .devotion-text p:not(.theme-verse-p):not(.reference-footer),
        body #daily-tab-panel #morning-evening-source-panel #me-morning-content.devotion-text p:not(.theme-verse-p):not(.reference-footer),
        body #daily-tab-panel #morning-evening-source-panel #me-evening-content.devotion-text p:not(.theme-verse-p):not(.reference-footer),
        body.morning-evening-active #morning-evening-source-panel .devotion-text p:not(.theme-verse-p):not(.reference-footer),
        body.morning-evening-active.split-view #morning-evening-source-panel .devotion-text p:not(.theme-verse-p):not(.reference-footer),
        body.split-view #daily-light-source-panel .devotion-text p:not(.theme-verse-p):not(.reference-footer),
        body #imitation-source-panel .devotion-text p,
        body #daily-tab-panel #imitation-source-panel .devotion-text p,
        body.streams-active #streams-source-panel #streams-content .streams-body p,
        body #daily-tab-panel #streams-source-panel #streams-content.devotion-text .streams-body p,
        body.streams-active #streams-source-panel #streams-content .streams-body p.streams-lead,
        body.streams-active #streams-source-panel #streams-content .streams-poem,
        body.streams-active #streams-source-panel #streams-content .streams-poem span,
        body #daily-tab-panel #streams-source-panel #streams-content.devotion-text .streams-poem,
        body #daily-tab-panel #streams-source-panel #streams-content.devotion-text .streams-poem span,
        body #daily-tab-panel #prayer-tab-panel .prayer-card .prayer-para,
        body #daily-tab-panel #prayer-tab-panel .prayer-para,
        body.split-view #daily-tab-panel #prayer-tab-panel .prayer-para,
        body #topical-tab-panel .topical-reading-intro .topical-detail-paragraph,
        body #daily-light-source-panel .devotion-text .theme-verse-p,
        body #morning-evening-source-panel .devotion-text .theme-verse-p,
        body.morning-evening-active #morning-evening-source-panel .devotion-text .theme-verse-p,
        body.morning-evening-active.split-view #morning-evening-source-panel .devotion-text .theme-verse-p,
        body #daily-tab-panel #prayer-tab-panel .liturgical-verse,
        body.streams-active #streams-source-panel #streams-content .streams-scripture,
        body.streams-active #streams-source-panel #streams-content .streams-scripture-quote,
        body #topical-tab-panel .topical-reading-section .topical-reading-section-description,
        body #topical-tab-panel .topical-reference-card .topical-reference-copy,
        html:not(.parchment-off):not(.dark-mode) body #topical-tab-panel .topical-reading-section .topical-reading-section-description,
        html.dark-mode body #topical-tab-panel .topical-reading-section .topical-reading-section-description,
        html:not(.parchment-off):not(.dark-mode) body #topical-tab-panel .topical-reference-card .topical-reference-copy,
        html.dark-mode body #topical-tab-panel .topical-reference-card .topical-reference-copy {
            font-size: var(--daily-reading-font-size) !important;
            font-weight: var(--daily-study-font-weight) !important;
            line-height: var(--daily-study-line-height) !important;
            letter-spacing: 0 !important;
            text-align: left !important;
            word-spacing: normal !important;
        }

        .date-toggle-wrapper,
        body.morning-evening-active.split-view .date-toggle-wrapper {
            margin-bottom: clamp(10px, 1.2vw, 18px) !important;
        }

        .devotion-date {
            padding-bottom: 0 !important;
        }

        .devotion-date::before,
        .devotion-date::after,
        #date-display::after,
        #prayer-date-display::after,
        #me-date-display::after,
        #imitation-date-display::after,
        #streams-date-display::after {
            display: none !important;
            content: none !important;
            background: none !important;
            box-shadow: none !important;
            opacity: 0 !important;
        }

        @media (max-width: 768px) {
            .content-area {
                padding-left: 0 !important;
                padding-right: 0 !important;
            }

            .devotion-container {
                padding-left: 0 !important;
                padding-right: 0 !important;
            }

            .daily-source-tabs {
                width: calc(100% - 10px) !important;
                margin-left: auto !important;
                margin-right: auto !important;
                margin-bottom: 16px !important;
            }

            .daily-source-menu-toggle {
                width: fit-content !important;
                max-width: none !important;
                min-width: 0 !important;
                gap: 8px !important;
                padding: 8px 10px !important;
            }

            .daily-source-menu-toggle .topical-section-menu-icon {
                flex: 0 0 30px !important;
                width: 30px !important;
                height: 30px !important;
            }

            .daily-source-menu-toggle .topical-section-menu-label {
                flex: 0 1 auto !important;
                min-width: 0 !important;
                max-width: min(68vw, 24ch) !important;
                font-size: clamp(0.78rem, 3vw, 0.85rem) !important;
                line-height: 1.2 !important;
                letter-spacing: 0 !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                white-space: nowrap !important;
            }

            #topical-section-tabs .topical-section-menu-toggle:not(.daily-source-menu-toggle) {
                width: fit-content !important;
                max-width: calc(100vw - 32px) !important;
                min-width: 0 !important;
                gap: 8px !important;
                padding: 8px 10px !important;
                font-size: clamp(0.78rem, 3vw, 0.85rem) !important;
            }

            #topical-section-tabs .topical-section-menu-toggle:not(.daily-source-menu-toggle) .topical-section-menu-icon {
                flex: 0 0 30px !important;
                width: 30px !important;
                height: 30px !important;
            }

            #topical-section-tabs .topical-section-menu-toggle:not(.daily-source-menu-toggle) .topical-section-menu-label {
                flex: 0 0 auto !important;
                min-width: 0 !important;
                max-width: none !important;
                overflow: visible !important;
                text-overflow: clip !important;
                white-space: nowrap !important;
            }

            .daily-source-tabs .topical-section-menu,
            #topical-section-tabs .topical-section-menu {
                width: fit-content !important;
                max-width: calc(100vw - 32px) !important;
                min-width: 0 !important;
                grid-template-columns: max-content !important;
                gap: 0 !important;
                padding: 0 !important;
                justify-self: start !important;
                align-self: start !important;
                overflow: visible !important;
            }

            .daily-source-tabs.open .topical-section-menu,
            #topical-section-tabs.open .topical-section-menu {
                display: grid !important;
            }

            .daily-source-tabs .topical-section-tab,
            #topical-section-tabs .topical-section-tab {
                width: 100% !important;
                min-width: 0 !important;
                min-height: 0 !important;
                padding: 8px 12px !important;
                font-size: clamp(0.78rem, 3vw, 0.85rem) !important;
                font-weight: 500 !important;
                line-height: 1.2 !important;
                letter-spacing: 0 !important;
                white-space: nowrap !important;
            }

            .devotion-grid,
            #me-devotion-grid,
            #imitation-devotion-grid,
            #streams-devotion-grid,
            #prayer-devotion-grid {
                width: 100% !important;
                max-width: none !important;
                gap: 14px !important;
            }

            .devotion-column,
            #prayer-tab-panel .devotion-column,
            #streams-source-panel .devotion-column,
            #morning-evening-source-panel .devotion-column,
            #imitation-source-panel .devotion-column {
                width: calc(100% - 8px) !important;
                max-width: calc(100vw - 8px) !important;
                margin-left: 4px !important;
                margin-right: 4px !important;
                padding-left: clamp(14px, 4.3vw, 20px) !important;
                padding-right: clamp(14px, 4.3vw, 20px) !important;
            }

            .theme-verse-p,
            body.morning-evening-active #morning-evening-source-panel .theme-verse-p,
            body.streams-active #streams-source-panel #streams-content .streams-scripture,
            #prayer-tab-panel .liturgical-verse,
            .topical-reference-copy {
                padding-left: clamp(14px, 4vw, 18px) !important;
                padding-right: clamp(14px, 4vw, 18px) !important;
            }

            .topical-devotion-panel,
            .topical-topic-detail {
                width: calc(100% - 8px) !important;
                margin-left: 4px !important;
                margin-right: 4px !important;
                padding-left: clamp(10px, 3.5vw, 16px) !important;
                padding-right: clamp(10px, 3.5vw, 16px) !important;
            }

            .topical-detail-hero,
            .topical-reading-intro,
            .topical-reading-section,
            .topical-reference-card {
                width: 100% !important;
                max-width: 100% !important;
                padding-left: clamp(14px, 4vw, 18px) !important;
                padding-right: clamp(14px, 4vw, 18px) !important;
            }

            .date-toggle-wrapper {
                margin-bottom: 12px !important;
            }

            .devotion-date {
                padding-bottom: 0 !important;
            }
        }

        @media (max-width: 380px) {
            .daily-source-menu-toggle .topical-section-menu-label,
            #topical-section-tabs .topical-section-menu-toggle:not(.daily-source-menu-toggle),
            .daily-source-tabs .topical-section-tab,
            #topical-section-tabs .topical-section-tab {
                font-size: clamp(0.72rem, 2.85vw, 0.8rem) !important;
            }
        }

        @media (min-width: 769px) {
            html:not(.dark-mode) body.imitation-active #daily-tab-panel #imitation-source-panel #imitation-devotion-grid.stacked {
                justify-items: center !important;
                max-width: 1280px !important;
                width: 100% !important;
                margin-left: auto !important;
                margin-right: auto !important;
            }

            html:not(.dark-mode) body.imitation-active #daily-tab-panel #imitation-source-panel #imitation-devotion-grid.stacked>.devotion-column {
                align-items: stretch !important;
                box-sizing: border-box !important;
                justify-self: center !important;
                width: min(906px, calc(100vw - 112px)) !important;
                max-width: min(906px, calc(100vw - 112px)) !important;
                margin-left: auto !important;
                margin-right: auto !important;
                padding-top: clamp(58px, 6vw, 86px) !important;
                padding-left: clamp(46px, 7vw, 98px) !important;
                padding-right: clamp(46px, 7vw, 98px) !important;
                padding-bottom: clamp(58px, 6vw, 86px) !important;
            }

            html:not(.dark-mode) body.imitation-active #daily-tab-panel #imitation-source-panel #imitation-content,
            html:not(.dark-mode) body.imitation-active #daily-tab-panel #imitation-source-panel #imitation-content .imitation-chapter-title,
            html:not(.dark-mode) body.imitation-active #daily-tab-panel #imitation-source-panel #imitation-content .imitation-chapter-footer,
            html:not(.dark-mode) body.imitation-active #daily-tab-panel #imitation-source-panel #imitation-content p {
                width: min(100%, 760px) !important;
                max-width: min(100%, 760px) !important;
                margin-left: auto !important;
                margin-right: auto !important;
            }
        }

        /* Desktop daily refinement: keep devotion softer and less utility-like. */
        @media (min-width: 769px) {
            html.parchment-off:not(.dark-mode) body,
            html.parchment-off:not(.dark-mode) .container,
            html.parchment-off:not(.dark-mode) #app-view,
            html.parchment-off:not(.dark-mode) .main-content,
            html.parchment-off:not(.dark-mode) .content-area {
                background:
                    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.62), transparent 24%),
                    linear-gradient(180deg, #F5F6F8 0%, #F3F4F6 100%) !important;
            }

            html.parchment-off:not(.dark-mode) #main-header {
                background:
                    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.10), transparent 24%),
                    radial-gradient(circle at 76% 14%, rgba(128, 115, 196, 0.14), transparent 25%),
                    linear-gradient(135deg, #18254E 0%, #20356F 48%, #243C82 100%) !important;
                box-shadow:
                    0 18px 42px rgba(20, 32, 66, 0.14),
                    0 4px 0 rgba(243, 244, 246, 0.78) !important;
            }

            html.parchment-off:not(.dark-mode) .hero-aurora {
                background:
                    radial-gradient(circle at 34% 16%, rgba(255, 255, 255, 0.14), transparent 24%),
                    linear-gradient(180deg, rgba(255, 255, 255, 0.024), transparent 42%) !important;
                opacity: 0.58 !important;
            }

            html.parchment-off:not(.dark-mode) .hero-particles {
                opacity: 0.26 !important;
                filter: blur(0.2px) !important;
            }

            html.parchment-off:not(.dark-mode) .dove-icon,
            html:not(.parchment-off):not(.dark-mode) .dove-icon {
                filter:
                    drop-shadow(0 14px 26px rgba(255, 255, 255, 0.14))
                    drop-shadow(0 8px 24px rgba(9, 18, 44, 0.18)) !important;
            }

            html:not(.parchment-off):not(.dark-mode) .daily-source-tabs .topical-section-menu,
            html:not(.parchment-off):not(.dark-mode) .daily-source-tabs .topical-section-menu-toggle {
                background: rgba(252, 250, 247, 0.72) !important;
                border-color: rgba(180, 160, 130, 0.10) !important;
                box-shadow:
                    0 10px 26px rgba(72, 48, 20, 0.032),
                    inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
                backdrop-filter: blur(16px) !important;
                -webkit-backdrop-filter: blur(16px) !important;
            }

            html.parchment-off:not(.dark-mode) .daily-source-tabs .topical-section-menu,
            html.parchment-off:not(.dark-mode) .daily-source-tabs .topical-section-menu-toggle {
                background: rgba(255, 255, 255, 0.58) !important;
                border-color: rgba(132, 138, 160, 0.10) !important;
                box-shadow:
                    0 10px 26px rgba(15, 23, 42, 0.028),
                    inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
                backdrop-filter: blur(16px) !important;
                -webkit-backdrop-filter: blur(16px) !important;
            }

            .daily-source-tabs .topical-section-menu::before {
                background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 48%) !important;
            }

            .daily-source-tabs .topical-section-menu::after {
                height: 3px !important;
                background: linear-gradient(90deg, transparent, rgba(197, 169, 118, 0.54), transparent) !important;
                box-shadow: 0 6px 18px rgba(98, 85, 168, 0.10) !important;
                opacity: 0.62 !important;
            }

            .daily-source-tabs .topical-section-tab {
                border-color: rgba(180, 160, 130, 0.08) !important;
                box-shadow: none !important;
                letter-spacing: 0.005em !important;
            }

            html.parchment-off:not(.dark-mode) .daily-source-tabs .topical-section-tab {
                border-color: rgba(132, 138, 160, 0.08) !important;
                color: #4E5364 !important;
                -webkit-text-fill-color: #4E5364 !important;
            }

            .daily-source-tabs .topical-section-tab::before {
                opacity: 0 !important;
            }

            html:not(.parchment-off):not(.dark-mode) .daily-source-tabs .topical-section-tab:hover,
            html.parchment-off:not(.dark-mode) .daily-source-tabs .topical-section-tab:hover {
                background: rgba(94, 88, 200, 0.055) !important;
                color: #332D58 !important;
                -webkit-text-fill-color: #332D58 !important;
                transform: translateY(-1px) !important;
                box-shadow: none !important;
            }

            html:not(.parchment-off):not(.dark-mode) .daily-source-tabs .topical-section-tab.active,
            html.parchment-off:not(.dark-mode) .daily-source-tabs .topical-section-tab.active,
            html:not(.parchment-off):not(.dark-mode) .devotion-tab-btn.active,
            html.parchment-off:not(.dark-mode) .devotion-tab-btn.active {
                background: linear-gradient(180deg, #5B56BE 0%, #5048B1 100%) !important;
                color: #FFFFFF !important;
                -webkit-text-fill-color: #FFFFFF !important;
                box-shadow:
                    0 8px 18px rgba(78, 70, 184, 0.12),
                    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
            }

            html.parchment-off:not(.dark-mode) .devotion-tabs {
                background: rgba(255, 255, 255, 0.56) !important;
                border-color: rgba(132, 138, 160, 0.10) !important;
                box-shadow:
                    0 18px 42px rgba(15, 23, 42, 0.035),
                    inset 0 1px 0 rgba(255, 255, 255, 0.64) !important;
            }

            html.parchment-off:not(.dark-mode) .devotion-tab-btn:not(.active) {
                color: #687087 !important;
                -webkit-text-fill-color: #687087 !important;
            }

            .view-toggle-container {
                gap: 14px !important;
                padding: 10px 14px !important;
                border-radius: 999px !important;
                background: rgba(255, 252, 247, 0.70) !important;
                border: 1px solid rgba(180, 160, 130, 0.10) !important;
                box-shadow:
                    0 12px 28px rgba(72, 48, 20, 0.045),
                    inset 0 1px 0 rgba(255, 255, 255, 0.54) !important;
                backdrop-filter: blur(14px) !important;
                -webkit-backdrop-filter: blur(14px) !important;
            }

            html.parchment-off:not(.dark-mode) .view-toggle-container {
                background: rgba(255, 255, 255, 0.62) !important;
                border-color: rgba(132, 138, 160, 0.10) !important;
                box-shadow:
                    0 12px 28px rgba(15, 23, 42, 0.034),
                    inset 0 1px 0 rgba(255, 255, 255, 0.66) !important;
            }

            .desktop-font-controls {
                gap: 6px !important;
            }

            .font-control-btn {
                width: 42px !important;
                min-height: 36px !important;
                justify-content: center !important;
                border-radius: 999px !important;
                border-color: rgba(180, 160, 130, 0.12) !important;
                background: rgba(255, 255, 255, 0.46) !important;
                color: #4B3F35 !important;
                box-shadow: none !important;
            }

            html.parchment-off:not(.dark-mode) .font-control-btn {
                border-color: rgba(132, 138, 160, 0.12) !important;
                color: #454B5E !important;
            }

            .view-toggle-label {
                color: #6A5744 !important;
                -webkit-text-fill-color: #6A5744 !important;
                font-size: 0.76rem !important;
                font-weight: 700 !important;
                letter-spacing: 0.12em !important;
            }

            html.parchment-off:not(.dark-mode) .view-toggle-label {
                color: #667085 !important;
                -webkit-text-fill-color: #667085 !important;
            }

            .toggle-switch {
                margin: 0 4px !important;
            }

            .toggle-switch .slider {
                background: #D7D2C8 !important;
                box-shadow: inset 0 1px 2px rgba(60, 40, 20, 0.08) !important;
            }

            html.parchment-off:not(.dark-mode) .toggle-switch .slider {
                background: #D7DCE4 !important;
            }

            .toggle-switch .slider::before {
                box-shadow: 0 2px 5px rgba(15, 23, 42, 0.10) !important;
            }

            html:not(.parchment-off):not(.dark-mode) .toggle-switch input:checked + .slider,
            html.parchment-off:not(.dark-mode) .toggle-switch input:checked + .slider {
                background: #5E58C8 !important;
            }

            html:not(.parchment-off):not(.dark-mode) .devotion-column,
            html:not(.parchment-off):not(.dark-mode) #prayer-tab-panel .devotion-column {
                border: 1px solid rgba(160, 128, 88, 0.10) !important;
                box-shadow:
                    0 2px 8px rgba(59, 47, 34, 0.025),
                    inset 0 1px 0 rgba(255, 255, 255, 0.52) !important;
            }

            html.parchment-off:not(.dark-mode) .devotion-column,
            html.parchment-off:not(.dark-mode) #prayer-tab-panel .devotion-column,
            html.parchment-off:not(.dark-mode) .topical-devotion-panel,
            html.parchment-off:not(.dark-mode) .topical-topic-card,
            html.parchment-off:not(.dark-mode) .topical-detail-hero,
            html.parchment-off:not(.dark-mode) .topical-reading-intro,
            html.parchment-off:not(.dark-mode) .topical-reading-section,
            html.parchment-off:not(.dark-mode) .topical-reference-card {
                background: rgba(255, 255, 255, 0.64) !important;
                border: 1px solid rgba(160, 160, 180, 0.06) !important;
                box-shadow:
                    0 2px 8px rgba(0, 0, 0, 0.025),
                    inset 0 1px 0 rgba(255, 255, 255, 0.64) !important;
            }

            html.parchment-off:not(.dark-mode) .devotion-column:hover,
            html.parchment-off:not(.dark-mode) #prayer-tab-panel .devotion-column:hover,
            html.parchment-off:not(.dark-mode) .topical-topic-card:hover {
                border-color: rgba(132, 138, 160, 0.10) !important;
                box-shadow:
                    0 5px 14px rgba(15, 23, 42, 0.035),
                    inset 0 1px 0 rgba(255, 255, 255, 0.70) !important;
            }

            body #daily-light-source-panel .devotion-text p:not(.theme-verse-p):not(.reference-footer),
            body #morning-evening-source-panel .devotion-text p:not(.theme-verse-p):not(.reference-footer),
            body.streams-active #streams-source-panel #streams-content .streams-body p,
            html:not(.parchment-off):not(.dark-mode) body #daily-light-source-panel .devotion-text p:not(.theme-verse-p):not(.reference-footer),
            html:not(.parchment-off):not(.dark-mode) body #morning-evening-source-panel .devotion-text p:not(.theme-verse-p):not(.reference-footer),
            html.parchment-off:not(.dark-mode) body #daily-light-source-panel .devotion-text p:not(.theme-verse-p):not(.reference-footer),
            html.parchment-off:not(.dark-mode) body #morning-evening-source-panel .devotion-text p:not(.theme-verse-p):not(.reference-footer) {
                font-weight: 400 !important;
                letter-spacing: 0.002em !important;
                line-height: 1.95 !important;
            }
        }

        /* Desktop Imitation source: mirror the quieter Streams manuscript treatment. */
        @media (min-width: 769px) {
            html:not(.dark-mode) body.imitation-active {
                background:
                    radial-gradient(circle at 50% 18%, rgba(255, 252, 242, 0.8), transparent 34%),
                    radial-gradient(circle at 50% 48%, rgba(183, 138, 74, 0.08), transparent 44%),
                    linear-gradient(180deg, #F6F1E7 0%, #F3EEE3 40%, #EFE7DA 100%) !important;
                color: #3A2E22 !important;
            }

            html:not(.dark-mode) body.imitation-active::before {
                inset: 0 !important;
                width: auto !important;
                height: auto !important;
                background:
                    radial-gradient(ellipse at center, transparent 42%, rgba(88, 58, 22, 0.12) 100%),
                    url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.024'/%3E%3C/svg%3E") !important;
                filter: none !important;
                opacity: 1 !important;
                z-index: 0 !important;
            }

            html:not(.dark-mode) body.imitation-active::after {
                top: 22% !important;
                left: 50% !important;
                right: auto !important;
                width: min(980px, 80vw) !important;
                height: 520px !important;
                transform: translateX(-50%) !important;
                background: radial-gradient(circle, rgba(255, 246, 223, 0.52), transparent 72%) !important;
                filter: blur(44px) !important;
                opacity: 0.72 !important;
            }

            html:not(.dark-mode) body.imitation-active #imitation-source-panel .date-toggle-wrapper {
                margin: clamp(30px, 3.2vw, 44px) auto clamp(24px, 2.8vw, 36px) !important;
            }

            html:not(.dark-mode) body.imitation-active #daily-tab-panel #imitation-source-panel #imitation-devotion-grid.stacked {
                max-width: min(1180px, calc(100vw - 132px)) !important;
                margin: 0 auto !important;
                justify-items: stretch !important;
            }

            html:not(.dark-mode) body.imitation-active #daily-tab-panel #imitation-source-panel #imitation-devotion-grid.stacked>.devotion-column {
                position: relative !important;
                overflow: hidden !important;
                align-items: center !important;
                justify-self: stretch !important;
                width: 100% !important;
                max-width: min(1180px, calc(100vw - 132px)) !important;
                margin-inline: auto !important;
                padding: 44px 84px 72px !important;
                background: rgba(255, 255, 255, 0.74) !important;
                border: 1px solid rgba(180, 160, 130, 0.08) !important;
                border-radius: 36px !important;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.018) !important;
                backdrop-filter: blur(12px) !important;
                -webkit-backdrop-filter: blur(12px) !important;
            }

            html:not(.dark-mode) body.imitation-active #daily-tab-panel #imitation-source-panel #imitation-devotion-grid.stacked>.devotion-column::before {
                content: '' !important;
                position: absolute !important;
                inset: 0 !important;
                pointer-events: none !important;
                background:
                    linear-gradient(90deg, rgba(183, 138, 74, 0.12), transparent 18%, transparent 82%, rgba(183, 138, 74, 0.10)),
                    url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.018'/%3E%3C/svg%3E") !important;
                opacity: 0.78 !important;
            }

            html:not(.dark-mode) body.imitation-active #daily-tab-panel #imitation-source-panel #imitation-content {
                display: block !important;
                width: 100% !important;
                max-width: 760px !important;
                margin: 0 auto !important;
                position: relative !important;
                z-index: 1 !important;
            }

            html:not(.dark-mode) body.imitation-active #daily-tab-panel #imitation-source-panel #imitation-content .imitation-chapter-title {
                width: 100% !important;
                max-width: 680px !important;
                margin: 0 auto 30px !important;
                padding: 0 0 28px !important;
                border-bottom: 0 !important;
                color: #2E2520 !important;
                -webkit-text-fill-color: #2E2520 !important;
                font-family: var(--font-ui) !important;
                font-size: clamp(1.8rem, 2.2vw, 2.9rem) !important;
                font-weight: 600 !important;
                line-height: 1.42 !important;
                letter-spacing: 0.11em !important;
                text-align: center !important;
                text-transform: uppercase !important;
                position: relative !important;
            }

            html:not(.dark-mode) body.imitation-active #daily-tab-panel #imitation-source-panel #imitation-content .imitation-chapter-title::after {
                content: '' !important;
                position: absolute !important;
                left: 50% !important;
                bottom: 0 !important;
                width: min(220px, 38vw) !important;
                height: 11px !important;
                transform: translateX(-50%) !important;
                background:
                    linear-gradient(90deg, transparent, rgba(180, 160, 130, 0.20), transparent),
                    radial-gradient(circle at center, rgba(178, 133, 72, 0.52) 0 2px, transparent 3px) !important;
                background-repeat: no-repeat !important;
                background-size: 100% 1px, 11px 11px !important;
                background-position: center, center !important;
                opacity: 0.36 !important;
            }

            html:not(.dark-mode) body.imitation-active #daily-tab-panel #imitation-source-panel #imitation-content p {
                width: 100% !important;
                max-width: 760px !important;
                margin: 0 auto 1.75rem !important;
                color: #372B23 !important;
                font-family: var(--font-body) !important;
                font-size: var(--daily-reading-font-size) !important;
                font-style: normal !important;
                font-weight: var(--daily-study-font-weight) !important;
                letter-spacing: 0.002em !important;
                line-height: 1.95 !important;
                text-align: left !important;
                text-indent: 0 !important;
                word-spacing: normal !important;
            }

            html:not(.dark-mode) body.imitation-active #daily-tab-panel #imitation-source-panel #imitation-content>p:first-of-type {
                margin-top: 0 !important;
            }

            html:not(.dark-mode) body.imitation-active #daily-tab-panel #imitation-source-panel #imitation-content>p:first-of-type::first-letter {
                float: left !important;
                margin: 0.08em 0.13em 0 0 !important;
                color: #A87A3E !important;
                font-family: var(--font-heading) !important;
                font-size: 4.9em !important;
                font-weight: 500 !important;
                line-height: 0.72 !important;
                background: linear-gradient(180deg, #A77A40 0%, #6E4A25 100%) !important;
                -webkit-background-clip: text !important;
                background-clip: text !important;
                -webkit-text-fill-color: transparent !important;
                opacity: 0.92 !important;
                text-shadow: 0 7px 22px rgba(100, 67, 31, 0.14) !important;
                transform: none !important;
            }

            html:not(.dark-mode) body.imitation-active #daily-tab-panel #imitation-source-panel #imitation-content .imitation-chapter-footer {
                width: 100% !important;
                max-width: 860px !important;
                margin: clamp(42px, 5vw, 66px) auto 0 !important;
                padding-top: 1.25rem !important;
                border-top: 1px solid rgba(166, 124, 69, 0.22) !important;
                color: #8F632C !important;
                -webkit-text-fill-color: #8F632C !important;
                font-size: 0.76rem !important;
                font-weight: 700 !important;
                letter-spacing: 0.12em !important;
            }

            html:not(.dark-mode) body.imitation-active #daily-tab-panel #imitation-source-panel #imitation-content a.verse-ref-link,
            html:not(.dark-mode) body.imitation-active #daily-tab-panel #imitation-source-panel #imitation-content a.theme-verse-ref,
            html:not(.dark-mode) body.imitation-active #daily-tab-panel #imitation-source-panel #imitation-content a.inline-verse-ref {
                color: #B38A56 !important;
                -webkit-text-fill-color: #B38A56 !important;
                font-style: italic !important;
                font-weight: 500 !important;
                opacity: 0.82 !important;
                text-decoration: none !important;
            }

            html:not(.dark-mode) body.imitation-active #daily-tab-panel #imitation-source-panel #imitation-content a.verse-ref-link:hover,
            html:not(.dark-mode) body.imitation-active #daily-tab-panel #imitation-source-panel #imitation-content a.theme-verse-ref:hover,
            html:not(.dark-mode) body.imitation-active #daily-tab-panel #imitation-source-panel #imitation-content a.inline-verse-ref:hover {
                color: #9E7442 !important;
                -webkit-text-fill-color: #9E7442 !important;
                opacity: 1 !important;
            }

            html.parchment-off:not(.dark-mode) body.imitation-active {
                background:
                    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.58), transparent 34%),
                    linear-gradient(180deg, #F5F6F8 0%, #F3F4F6 100%) !important;
            }

            html.parchment-off:not(.dark-mode) body.imitation-active #daily-tab-panel #imitation-source-panel #imitation-devotion-grid.stacked>.devotion-column {
                background: rgba(255, 255, 255, 0.74) !important;
                border-color: rgba(160, 160, 180, 0.08) !important;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.018) !important;
            }
        }

        /* Desktop daily source selector: replace the five-tab strip with a version-style dropdown. */
        @media (min-width: 769px) {
            #daily-tab-panel {
                display: grid !important;
                grid-template-columns: minmax(0, 1fr) auto auto auto !important;
                grid-template-areas:
                    ". date tools source"
                    "content content content content" !important;
                align-items: center !important;
                column-gap: 18px !important;
                row-gap: 28px !important;
                max-width: 1280px !important;
                margin: 0 auto !important;
                padding: 0 48px !important;
                position: relative !important;
            }

            #daily-tab-panel>.daily-source-content:not(.hidden) {
                display: contents !important;
            }

            #daily-tab-panel>.daily-source-content:not(.hidden)>.date-toggle-wrapper {
                display: contents !important;
                margin: 0 !important;
                padding: 0 !important;
                position: static !important;
            }

            #daily-tab-panel>.daily-source-content:not(.hidden)>.date-toggle-wrapper>.devotion-date {
                grid-area: date !important;
                justify-self: center !important;
                text-align: center !important;
                white-space: nowrap !important;
                font-family: var(--font-heading) !important;
                font-size: clamp(1.6rem, 2.1vw, 2.15rem) !important;
                font-weight: 500 !important;
                letter-spacing: 0.012em !important;
                line-height: 1.15 !important;
                text-transform: none !important;
                margin: 2px 0 0 !important;
                padding-bottom: 13px !important;
                position: relative !important;
            }

            /* Color scoped per theme so the deep-blue light-mode tone does not
               leak onto the dark backgrounds (this ID selector out-specifies the
               theme-level .devotion-date color rules). */
            html:not(.dark-mode) #daily-tab-panel>.daily-source-content:not(.hidden)>.date-toggle-wrapper>.devotion-date {
                color: #173169 !important;
                text-shadow: 0 8px 28px rgba(80, 55, 20, 0.08) !important;
            }

            html.dark-mode.dark-mode-b #daily-tab-panel>.daily-source-content:not(.hidden)>.date-toggle-wrapper>.devotion-date {
                color: #9FC2FF !important;
                text-shadow: 0 0 18px rgba(87, 140, 255, 0.10) !important;
            }

            html.dark-mode:not(.dark-mode-b) #daily-tab-panel>.daily-source-content:not(.hidden)>.date-toggle-wrapper>.devotion-date {
                color: #D6B277 !important;
                text-shadow: 0 0 18px rgba(214, 178, 119, 0.12) !important;
            }

            /* Restore the ornamental gold divider beneath the centered date
               (the generic #*-date-display::after dividers are force-hidden
               elsewhere, so re-add it on this high-specificity selector). */
            #daily-tab-panel>.daily-source-content:not(.hidden)>.date-toggle-wrapper>.devotion-date::after {
                content: '' !important;
                display: block !important;
                position: absolute !important;
                bottom: 0 !important;
                left: 50% !important;
                transform: translateX(-50%) !important;
                width: 104px !important;
                height: 13px !important;
                margin: 0 !important;
                opacity: 1 !important;
                background:
                    linear-gradient(90deg, transparent, rgba(166, 124, 69, 0.45), transparent),
                    radial-gradient(circle at center, rgba(196, 154, 88, 0.95) 0 3px, transparent 4px) !important;
                background-repeat: no-repeat !important;
                background-size: 100% 1px, 13px 13px !important;
                background-position: center, center !important;
                box-shadow: none !important;
            }

            #daily-tab-panel>.daily-source-content:not(.hidden)>.date-toggle-wrapper>.view-toggle-container {
                grid-area: tools !important;
                justify-self: end !important;
                position: static !important;
                top: auto !important;
                right: auto !important;
                white-space: nowrap !important;
                min-height: 56px !important;
            }

            #daily-tab-panel>.daily-source-content:not(.hidden)>.devotion-grid,
            #daily-tab-panel>.daily-source-content:not(.hidden)>#prayer-devotion-grid,
            #daily-tab-panel>.daily-source-content:not(.hidden)>#me-devotion-grid,
            #daily-tab-panel>.daily-source-content:not(.hidden)>#imitation-devotion-grid,
            #daily-tab-panel>.daily-source-content:not(.hidden)>#streams-devotion-grid {
                grid-area: content !important;
                width: 100% !important;
                margin-top: 28px !important;
            }

            .daily-source-tabs {
                grid-area: source !important;
                justify-self: start !important;
                display: block !important;
                width: fit-content !important;
                max-width: 420px !important;
                margin: 0 !important;
                position: relative !important;
                top: auto !important;
                left: auto !important;
                z-index: 30 !important;
            }

            .daily-source-menu-toggle {
                display: flex !important;
                align-items: center !important;
                justify-content: space-between !important;
                gap: 12px !important;
                min-width: min(340px, 100%) !important;
                max-width: 420px !important;
                min-height: 56px !important;
                padding: 0 20px 0 24px !important;
                border-radius: 999px !important;
                border: 1px solid rgba(185, 128, 50, 0.30) !important;
                background: rgba(246, 239, 228, 0.84) !important;
                color: #5C5146 !important;
                font-family: var(--font-ui) !important;
                font-size: 1rem !important;
                font-weight: 500 !important;
                letter-spacing: 0.005em !important;
                line-height: 1.2 !important;
                text-transform: none !important;
                box-shadow:
                    0 4px 14px rgba(59, 42, 20, 0.07),
                    inset 0 1px 0 rgba(255, 255, 255, 0.54) !important;
                cursor: pointer !important;
                backdrop-filter: blur(10px) !important;
                -webkit-backdrop-filter: blur(10px) !important;
            }

            .daily-source-menu-toggle::after {
                content: '' !important;
                width: 9px !important;
                height: 9px !important;
                border-right: 2px solid currentColor !important;
                border-bottom: 2px solid currentColor !important;
                transform: rotate(45deg) translateY(-2px) !important;
                opacity: 0.58 !important;
                transition: transform 220ms ease, opacity 220ms ease !important;
                flex: 0 0 auto !important;
            }

            .daily-source-tabs.open .daily-source-menu-toggle::after {
                transform: rotate(225deg) translate(-1px, -1px) !important;
                opacity: 0.82 !important;
            }

            .daily-source-menu-toggle .topical-section-menu-icon {
                display: none !important;
            }

            .daily-source-menu-toggle .topical-section-menu-label {
                min-width: 0 !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                white-space: nowrap !important;
                text-align: left !important;
            }

            .daily-source-tabs .topical-section-menu {
                display: none !important;
                position: absolute !important;
                top: calc(100% + 10px) !important;
                left: 0 !important;
                right: 0 !important;
                width: 100% !important;
                min-width: 100% !important;
                max-width: 100% !important;
                grid-template-columns: 1fr !important;
                gap: 0 !important;
                padding: 0 !important;
                border-radius: 18px !important;
                border: 1px solid rgba(185, 128, 50, 0.24) !important;
                background: #F0ECE0 !important;
                box-shadow:
                    0 8px 24px rgba(59, 42, 20, 0.15),
                    inset 0 1px 0 rgba(255, 255, 255, 0.50) !important;
                backdrop-filter: blur(10px) !important;
                -webkit-backdrop-filter: blur(10px) !important;
                overflow: hidden !important;
                z-index: 20 !important;
            }

            .daily-source-tabs.open .topical-section-menu {
                display: grid !important;
            }

            .daily-source-tabs .topical-section-menu::before,
            .daily-source-tabs .topical-section-menu::after {
                display: none !important;
                content: none !important;
            }

            .daily-source-tabs .topical-section-tab {
                display: flex !important;
                align-items: center !important;
                width: 100% !important;
                min-width: 0 !important;
                min-height: 52px !important;
                justify-content: flex-start !important;
                padding: 14px 24px !important;
                border: 0 !important;
                border-radius: 0 !important;
                background: transparent !important;
                color: #4F4942 !important;
                -webkit-text-fill-color: #4F4942 !important;
                font-family: var(--font-ui) !important;
                font-size: 1rem !important;
                font-weight: 400 !important;
                letter-spacing: 0 !important;
                line-height: 1.35 !important;
                text-align: left !important;
                text-transform: none !important;
                white-space: normal !important;
                box-shadow: none !important;
            }

            .daily-source-tabs .topical-section-tab:hover {
                background: rgba(185, 128, 50, 0.10) !important;
                color: #413C36 !important;
                -webkit-text-fill-color: #413C36 !important;
                transform: none !important;
            }

            html:not(.parchment-off):not(.dark-mode) .daily-source-tabs .topical-section-tab.active,
            html.parchment-off:not(.dark-mode) .daily-source-tabs .topical-section-tab.active {
                background: rgba(185, 128, 50, 0.20) !important;
                color: #5C554C !important;
                -webkit-text-fill-color: #5C554C !important;
                font-weight: 400 !important;
                box-shadow: none !important;
            }

            .daily-source-tabs .topical-section-tab.active::after {
                content: '✓' !important;
                margin-left: auto !important;
                color: currentColor !important;
                font-size: 0.9em !important;
                font-weight: 400 !important;
                opacity: 0.72 !important;
                padding-left: 18px !important;
            }

            html.parchment-off:not(.dark-mode) .daily-source-menu-toggle {
                background: rgba(246, 248, 252, 0.82) !important;
                border-color: rgba(132, 138, 160, 0.16) !important;
                color: #4E5364 !important;
                box-shadow:
                    0 4px 14px rgba(15, 23, 42, 0.045),
                    inset 0 1px 0 rgba(255, 255, 255, 0.66) !important;
            }

            html.parchment-off:not(.dark-mode) .daily-source-tabs .topical-section-menu {
                background: rgba(255, 255, 255, 0.96) !important;
                border-color: rgba(132, 138, 160, 0.14) !important;
                box-shadow:
                    0 18px 44px rgba(15, 23, 42, 0.07),
                    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
            }

            html:not(.parchment-off):not(.dark-mode) .daily-source-tabs .daily-source-menu-toggle {
                min-height: 54px !important;
                padding: 8px 16px !important;
                border-radius: 20px !important;
                background: #EDE9DC !important;
                border-color: rgba(185, 128, 50, 0.40) !important;
                color: #5a3e1b !important;
                font-family: var(--font-ui) !important;
                font-size: 0.95rem !important;
                font-weight: 500 !important;
                letter-spacing: 0 !important;
                line-height: 1.2 !important;
                box-shadow: 0 2px 6px rgba(59, 42, 20, 0.10) !important;
            }

            html:not(.parchment-off):not(.dark-mode) .daily-source-tabs .daily-source-menu-toggle:hover {
                background: #e0d9c8 !important;
                border-color: rgba(185, 128, 50, 0.70) !important;
                color: #3d2a0f !important;
            }

            html:not(.parchment-off):not(.dark-mode) .daily-source-tabs .daily-source-menu-toggle .topical-section-menu-label,
            html.parchment-off:not(.dark-mode) .daily-source-tabs .daily-source-menu-toggle .topical-section-menu-label {
                color: currentColor !important;
                -webkit-text-fill-color: currentColor !important;
                font-weight: 500 !important;
                letter-spacing: 0 !important;
                text-transform: none !important;
            }

            html:not(.parchment-off):not(.dark-mode) .daily-source-tabs .topical-section-menu {
                top: calc(100% + 8px) !important;
                border-radius: 12px !important;
                background: #f0ece0 !important;
                border-color: rgba(185, 128, 50, 0.35) !important;
                box-shadow: 0 8px 24px rgba(59, 42, 20, 0.15) !important;
            }

            html:not(.parchment-off):not(.dark-mode) .daily-source-tabs .topical-section-tab,
            html.parchment-off:not(.dark-mode) .daily-source-tabs .topical-section-tab {
                min-height: 44px !important;
                padding: 6px 16px !important;
                color: #4F4942 !important;
                -webkit-text-fill-color: #4F4942 !important;
                font-family: var(--font-ui) !important;
                font-size: 0.95rem !important;
                font-weight: 400 !important;
                letter-spacing: 0 !important;
                line-height: 1.35 !important;
                text-transform: none !important;
                white-space: nowrap !important;
            }

            html:not(.parchment-off):not(.dark-mode) .daily-source-tabs .topical-section-tab:hover,
            html.parchment-off:not(.dark-mode) .daily-source-tabs .topical-section-tab:hover {
                background: rgba(185, 128, 50, 0.10) !important;
                color: #413C36 !important;
                -webkit-text-fill-color: #413C36 !important;
            }

            html:not(.parchment-off):not(.dark-mode) .daily-source-tabs .topical-section-tab.active,
            html.parchment-off:not(.dark-mode) .daily-source-tabs .topical-section-tab.active {
                background: rgba(185, 128, 50, 0.20) !important;
                color: #5C554C !important;
                -webkit-text-fill-color: #5C554C !important;
                font-weight: 400 !important;
            }

            html.parchment-off:not(.dark-mode) .daily-source-tabs .daily-source-menu-toggle {
                min-height: 54px !important;
                padding: 8px 16px !important;
                border-radius: 20px !important;
                background: rgba(249, 250, 252, 0.74) !important;
                border-color: rgba(132, 122, 160, 0.24) !important;
                color: #6B5876 !important;
                font-family: var(--font-ui) !important;
                font-size: 0.95rem !important;
                font-weight: 500 !important;
                letter-spacing: 0 !important;
                line-height: 1.2 !important;
                box-shadow:
                    0 10px 24px rgba(48, 58, 82, 0.06),
                    inset 0 1px 0 rgba(255, 255, 255, 0.76) !important;
            }

            html.parchment-off:not(.dark-mode) .daily-source-tabs .daily-source-menu-toggle:hover {
                background: rgba(255, 255, 255, 0.88) !important;
                border-color: rgba(107, 88, 118, 0.32) !important;
                color: #594760 !important;
            }
        }

        @media (min-width: 769px) and (max-width: 1180px) {
            #daily-tab-panel {
                grid-template-columns: minmax(0, 1fr) auto auto !important;
                grid-template-areas:
                    "date date date"
                    ". tools source"
                    "content content content" !important;
                row-gap: 18px !important;
                column-gap: 16px !important;
                margin-top: 42px !important;
                padding: 0 36px !important;
            }

            .daily-source-tabs {
                max-width: 460px !important;
            }

            .daily-source-menu-toggle {
                max-width: 460px !important;
            }

            #daily-tab-panel>.daily-source-content:not(.hidden)>.devotion-grid,
            #daily-tab-panel>.daily-source-content:not(.hidden)>#prayer-devotion-grid,
            #daily-tab-panel>.daily-source-content:not(.hidden)>#me-devotion-grid,
            #daily-tab-panel>.daily-source-content:not(.hidden)>#imitation-devotion-grid,
            #daily-tab-panel>.daily-source-content:not(.hidden)>#streams-devotion-grid {
                margin-top: 22px !important;
            }
        }

        @media (min-width: 769px) and (max-width: 900px) {
            #daily-tab-panel {
                grid-template-columns: 1fr !important;
                grid-template-areas:
                    "date"
                    "tools"
                    "source"
                    "content" !important;
                justify-items: center !important;
                padding: 0 24px !important;
            }

            .daily-source-tabs,
            .daily-source-menu-toggle,
            #daily-tab-panel>.daily-source-content:not(.hidden)>.date-toggle-wrapper>.view-toggle-container {
                justify-self: center !important;
                width: 100% !important;
                max-width: 420px !important;
            }

            #daily-tab-panel>.daily-source-content:not(.hidden)>.date-toggle-wrapper>.view-toggle-container {
                justify-content: center !important;
            }

            #daily-tab-panel>.daily-source-content:not(.hidden)>.date-toggle-wrapper>.devotion-date {
                font-size: 1.7rem !important;
                letter-spacing: 0.012em !important;
            }
        }

        #daily-tab-panel.devotion-tab-panel.hidden,
        #topical-tab-panel.devotion-tab-panel.hidden,
        #visuals-tab-panel.devotion-tab-panel.hidden {
            display: none !important;
        }

        @media (min-width: 769px) {
            .devotion-tabs {
                display: grid !important;
                grid-template-columns: repeat(3, minmax(180px, 1fr)) !important;
                gap: 8px !important;
                width: min(100%, 720px) !important;
                min-height: 72px !important;
                margin: 0 auto 44px !important;
                padding: 8px !important;
                border: 1px solid rgba(180, 160, 130, 0.16) !important;
                border-radius: 36px !important;
                background: rgba(255, 255, 255, 0.65) !important;
                box-shadow:
                    0 10px 30px rgba(0, 0, 0, 0.06),
                    0 28px 60px rgba(90, 64, 24, 0.055),
                    inset 0 1px 1px rgba(255, 255, 255, 0.70) !important;
                backdrop-filter: blur(18px) !important;
                -webkit-backdrop-filter: blur(18px) !important;
                overflow: hidden !important;
            }

            .devotion-tabs::before {
                display: none !important;
                content: none !important;
            }

            .devotion-tab-btn {
                position: relative !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                min-width: 0 !important;
                min-height: 58px !important;
                padding: 0 28px !important;
                border: 0 !important;
                border-radius: 28px !important;
                background: transparent !important;
                color: #3F352C !important;
                -webkit-text-fill-color: #3F352C !important;
                font-family: var(--font-ui) !important;
                font-size: 1rem !important;
                font-weight: 700 !important;
                letter-spacing: 0.005em !important;
                line-height: 1.15 !important;
                text-align: center !important;
                text-transform: none !important;
                box-shadow: none !important;
                transform: none !important;
            }

            .devotion-tab-btn + .devotion-tab-btn {
                border-left: 0 !important;
            }

            .devotion-tab-btn::after {
                content: '' !important;
                position: absolute !important;
                left: 34px !important;
                right: 34px !important;
                bottom: 9px !important;
                height: 3px !important;
                border-radius: 999px !important;
                background: transparent !important;
                box-shadow: none !important;
                opacity: 0 !important;
                transform: none !important;
            }

            .devotion-tab-btn:hover:not(.active) {
                background: rgba(255, 255, 255, 0.48) !important;
                color: #2F2923 !important;
                -webkit-text-fill-color: #2F2923 !important;
                border-color: transparent !important;
                box-shadow: none !important;
                transform: none !important;
            }

            html:not(.parchment-off):not(.dark-mode) .devotion-tab-btn.active,
            html.parchment-off:not(.dark-mode) .devotion-tab-btn.active {
                background: linear-gradient(135deg, #4361ee 0%, #3151d3 100%) !important;
                color: #FFFFFF !important;
                -webkit-text-fill-color: #FFFFFF !important;
                border-color: transparent !important;
                box-shadow:
                    0 6px 20px rgba(67, 97, 238, 0.35),
                    0 16px 32px rgba(49, 81, 211, 0.18),
                    inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
                transform: none !important;
            }

            .devotion-tab-btn.active::after {
                background: rgba(223, 232, 255, 0.88) !important;
                box-shadow: 0 4px 14px rgba(53, 89, 204, 0.18) !important;
                opacity: 1 !important;
            }

            html.parchment-off:not(.dark-mode) .devotion-tabs {
                background: rgba(255, 255, 255, 0.68) !important;
                border-color: rgba(132, 138, 160, 0.12) !important;
                box-shadow:
                    0 10px 30px rgba(0, 0, 0, 0.045),
                    0 18px 42px rgba(15, 23, 42, 0.04),
                    inset 0 1px 1px rgba(255, 255, 255, 0.72) !important;
            }

            html.parchment-off:not(.dark-mode) .devotion-tab-btn {
                color: #5B5E66 !important;
                -webkit-text-fill-color: #5B5E66 !important;
            }
        }

        /* Section selector: separate premium tab buttons only. */
        .devotion-tabs {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 16px !important;
            width: 100% !important;
            max-width: none !important;
            min-height: 0 !important;
            margin: -34px auto 44px !important;
            padding: 0 !important;
            border: 0 !important;
            border-radius: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            overflow: visible !important;
            position: relative !important;
            z-index: 6 !important;
            transform: translateY(clamp(-56px, -3.4vw, -28px)) !important;
        }

        .devotion-tabs::before {
            display: none !important;
            content: none !important;
        }

        .devotion-tab-btn {
            position: relative !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 360px !important;
            height: 76px !important;
            min-width: 0 !important;
            min-height: 0 !important;
            padding: 0 32px !important;
            border: 1px solid rgba(200, 169, 107, 0.24) !important;
            border-radius: 22px !important;
            background: rgba(255, 251, 244, 0.88) !important;
            color: #30271F !important;
            -webkit-text-fill-color: #30271F !important;
            font-family: var(--font-heading) !important;
            font-size: 1.32rem !important;
            font-weight: 500 !important;
            letter-spacing: 0 !important;
            line-height: 1 !important;
            text-transform: none !important;
            box-shadow:
                0 10px 24px rgba(80, 58, 28, 0.08),
                0 20px 44px rgba(80, 58, 28, 0.045),
                inset 0 1px 0 rgba(255, 255, 255, 0.76) !important;
            transform: none !important;
        }

        .devotion-tab-btn:hover:not(.active) {
            background: rgba(255, 253, 248, 0.94) !important;
            color: #2A211B !important;
            -webkit-text-fill-color: #2A211B !important;
            border-color: rgba(200, 169, 107, 0.34) !important;
            box-shadow:
                0 12px 28px rgba(80, 58, 28, 0.09),
                0 22px 46px rgba(80, 58, 28, 0.055),
                inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
        }

        html:not(.parchment-off):not(.dark-mode) .devotion-tab-btn.active,
        html.parchment-off:not(.dark-mode) .devotion-tab-btn.active {
            background: linear-gradient(180deg, #2F57C8 0%, #183B8C 100%) !important;
            color: #FFFFFF !important;
            -webkit-text-fill-color: #FFFFFF !important;
            border-color: rgba(255, 255, 255, 0.30) !important;
            box-shadow:
                0 10px 26px rgba(36, 73, 184, 0.28),
                0 22px 48px rgba(24, 59, 140, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
        }

        html:not(.dark-mode) #visuals-tab-button.devotion-tab-btn.active,
        html.dark-mode #visuals-tab-button.devotion-tab-btn.active {
            background:
                linear-gradient(180deg, var(--journey-tab-start, #2F57C8) 0%, var(--journey-tab-end, #183B8C) 100%) !important;
            border-color: var(--journey-tab-border, rgba(255, 255, 255, 0.30)) !important;
            box-shadow:
                0 10px 26px var(--journey-tab-glow, rgba(36, 73, 184, 0.28)),
                0 22px 48px color-mix(in srgb, var(--journey-tab-end, #183B8C) 32%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
        }

        .devotion-tab-btn::after {
            content: '' !important;
            position: absolute !important;
            left: 36px !important;
            right: 36px !important;
            bottom: 11px !important;
            height: 2px !important;
            border-radius: 999px !important;
            background: transparent !important;
            box-shadow: none !important;
            opacity: 0 !important;
            transform: none !important;
        }

        .devotion-tab-btn.active::after {
            background: linear-gradient(90deg, transparent, rgba(235, 243, 255, 0.92), transparent) !important;
            box-shadow: 0 0 12px rgba(235, 243, 255, 0.36) !important;
            opacity: 1 !important;
        }

        .devotion-tab-btn + .devotion-tab-btn {
            border-left: 1px solid rgba(200, 169, 107, 0.24) !important;
        }

        /* Desktop dark mode overrides for devotion tabs & tab buttons */
        html.dark-mode .devotion-tab-btn {
            background: rgba(24, 32, 51, 0.88) !important;
            color: rgba(255, 255, 255, 0.85) !important;
            -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
            border-color: rgba(255, 255, 255, 0.08) !important;
            box-shadow:
                0 10px 24px rgba(0, 0, 0, 0.2),
                0 20px 44px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
        }

        html.dark-mode .devotion-tab-btn:hover:not(.active) {
            background: rgba(32, 42, 68, 0.94) !important;
            color: #ffffff !important;
            -webkit-text-fill-color: #ffffff !important;
            border-color: rgba(92, 133, 255, 0.25) !important;
            box-shadow:
                0 12px 28px rgba(0, 0, 0, 0.24),
                0 22px 46px rgba(0, 0, 0, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
        }

        html.dark-mode .devotion-tab-btn.active {
            background: linear-gradient(135deg, #2446aa 0%, #3864db 58%, #5684ff 100%) !important;
            color: #ffffff !important;
            -webkit-text-fill-color: #ffffff !important;
            border-color: rgba(255, 255, 255, 0.3) !important;
            box-shadow:
                0 10px 26px rgba(36, 73, 184, 0.4),
                0 22px 48px rgba(24, 59, 140, 0.28),
                inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
        }

        html.dark-mode:not(.dark-mode-b) .devotion-tab-btn.active {
            background: linear-gradient(180deg, rgba(92, 76, 49, 0.98) 0%, rgba(66, 53, 35, 0.98) 100%) !important;
            border-color: rgba(197, 160, 89, 0.3) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.1),
                0 20px 40px rgba(0, 0, 0, 0.28),
                0 0 0 1px rgba(197, 160, 89, 0.18) !important;
        }

        .devotion-tabs ~ .devotion-tab-panel {
            margin-top: clamp(-56px, -3.4vw, -28px) !important;
        }

        @media (max-width: 768px) {
            .devotion-tabs {
                display: grid !important;
                grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
                gap: 10px !important;
                width: 100% !important;
                margin: 12px auto 24px !important;
                padding: 0 16px !important;
                transform: none !important;
            }

            .devotion-tab-btn {
                width: 100% !important;
                height: 56px !important;
                border-radius: 18px !important;
                font-size: 1rem !important;
                padding: 0 14px !important;
            }

            .devotion-tab-btn::after {
                left: 22px !important;
                right: 22px !important;
                bottom: 8px !important;
            }

            .devotion-tabs ~ .devotion-tab-panel {
                margin-top: 0 !important;
            }
        }

        /* Desktop Daily Devotion hero controls and Morning/Evening manuscript cards. */
        @media (min-width: 769px) {
            /* Desktop uses the wider 1536x1024 (1.5:1) banner artwork, which has
               extra sky on the sides so it fills the full header width with
               `cover` edge-to-edge — no side panels, no seam — while keeping the
               dove + lockup framed. Phone (<769px) keeps the original banner.png
               via its own `cover`. */
            #main-header::before {
                background-image: url('/study/banner-wide.png?v=6') !important;
                background-size: 100% 100% !important;
                background-position: center bottom !important;
                z-index: 1 !important;
            }

            header#main-header::after {
                display: none !important;
            }

            #main-header > .header-left-actions,
            #main-header .header-left-actions {
                position: absolute !important;
                top: 32px !important;
                left: clamp(28px, 3.8vw, 56px) !important;
                z-index: 8 !important;
                margin: 0 !important;
                transform: none !important;
            }

            #main-header > .header-controls,
            #main-header .header-controls {
                position: absolute !important;
                top: 32px !important;
                right: clamp(28px, 3.8vw, 56px) !important;
                z-index: 8 !important;
                margin: 0 !important;
                transform: none !important;
            }

            #main-header .header-controls .auth-controls,
            #main-header #languageSelectWrapperHeader,
            #main-header #languageSelectWrapperHeader .custom-select {
                margin: 0 !important;
                transform: none !important;
            }

            #main-header .header-left-actions .icon-btn,
            #main-header #homeBtn.icon-btn {
                width: 62px !important;
                height: 62px !important;
                border-radius: 20px !important;
                background:
                    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08)) !important;
                border: 1px solid rgba(255, 255, 255, 0.28) !important;
                box-shadow:
                    inset 0 1px 0 rgba(255, 255, 255, 0.32),
                    0 0 0 1px rgba(255, 255, 255, 0.05),
                    0 14px 34px rgba(6, 18, 46, 0.18),
                    0 0 28px rgba(245, 238, 220, 0.10) !important;
                backdrop-filter: blur(20px) saturate(1.12) !important;
                -webkit-backdrop-filter: blur(20px) saturate(1.12) !important;
            }

            #main-header #homeBtn.icon-btn svg {
                width: 28px !important;
                height: 28px !important;
                filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.18)) !important;
            }

            #main-header #languageSelectWrapperHeader {
                width: clamp(232px, 17vw, 292px) !important;
                min-width: 0 !important;
            }

            #main-header #languageSelectWrapperHeader .custom-select-trigger {
                min-height: 62px !important;
                padding: 0 24px !important;
                background:
                    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.10)) !important;
                border: 1px solid rgba(255, 255, 255, 0.30) !important;
                box-shadow:
                    inset 0 1px 0 rgba(255, 255, 255, 0.34),
                    0 15px 34px rgba(6, 18, 46, 0.18),
                    0 0 30px rgba(245, 238, 220, 0.08) !important;
                color: rgba(255, 255, 255, 0.96) !important;
                backdrop-filter: blur(22px) saturate(1.12) !important;
                -webkit-backdrop-filter: blur(22px) saturate(1.12) !important;
            }

            #daily-tab-panel .daily-source-tabs .daily-source-menu-toggle,
            #daily-tab-panel > .daily-source-content:not(.hidden) > .date-toggle-wrapper > .view-toggle-container {
                min-height: 62px !important;
                border-radius: 999px !important;
                background:
                    linear-gradient(180deg, rgba(255, 252, 247, 0.88), rgba(246, 239, 228, 0.78)) !important;
                border: 1px solid rgba(185, 128, 50, 0.26) !important;
                box-shadow:
                    0 10px 26px rgba(59, 42, 20, 0.055),
                    inset 0 1px 0 rgba(255, 255, 255, 0.68) !important;
                color: #5C5146 !important;
                font-family: var(--font-ui) !important;
                font-size: 1rem !important;
                font-weight: 500 !important;
                letter-spacing: 0 !important;
                line-height: 1.2 !important;
                text-transform: none !important;
                backdrop-filter: blur(14px) saturate(1.04) !important;
                -webkit-backdrop-filter: blur(14px) saturate(1.04) !important;
            }

            #daily-tab-panel .daily-source-tabs {
                width: 340px !important;
                min-width: 340px !important;
                max-width: 340px !important;
                flex: 0 0 340px !important;
            }

            #daily-tab-panel .daily-source-tabs .daily-source-menu-toggle {
                width: 340px !important;
                min-width: 340px !important;
                max-width: 340px !important;
                flex: 0 0 340px !important;
                padding: 0 22px 0 24px !important;
            }

            #daily-tab-panel .daily-source-tabs .daily-source-menu-toggle .topical-section-menu-label,
            #daily-tab-panel > .daily-source-content:not(.hidden) > .date-toggle-wrapper > .view-toggle-container,
            #daily-tab-panel > .daily-source-content:not(.hidden) > .date-toggle-wrapper > .view-toggle-container .font-control-btn,
            #daily-tab-panel > .daily-source-content:not(.hidden) > .date-toggle-wrapper > .view-toggle-container .font-control-btn span,
            #daily-tab-panel > .daily-source-content:not(.hidden) > .date-toggle-wrapper > .view-toggle-container .view-toggle-label {
                color: #5C5146 !important;
                -webkit-text-fill-color: #5C5146 !important;
                font-family: var(--font-ui) !important;
                font-size: 1rem !important;
                font-weight: 500 !important;
                letter-spacing: 0 !important;
                line-height: 1.2 !important;
                text-transform: none !important;
            }

            #daily-tab-panel .daily-source-tabs .daily-source-menu-toggle .topical-section-menu-label {
                display: block !important;
                min-width: 0 !important;
                flex: 1 1 auto !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                white-space: nowrap !important;
            }

            #daily-tab-panel > .daily-source-content:not(.hidden) > .date-toggle-wrapper > .view-toggle-container {
                gap: 16px !important;
                padding: 0 20px !important;
            }

            #daily-tab-panel > .daily-source-content:not(.hidden) > .date-toggle-wrapper > .view-toggle-container .desktop-font-controls {
                gap: 8px !important;
            }

            #daily-tab-panel > .daily-source-content:not(.hidden) > .date-toggle-wrapper > .view-toggle-container .font-control-btn {
                width: 44px !important;
                min-height: 42px !important;
                padding: 0 10px !important;
                border-radius: 999px !important;
                background: rgba(255, 255, 255, 0.46) !important;
                border: 1px solid rgba(185, 128, 50, 0.14) !important;
                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
            }

            #daily-tab-panel .daily-source-tabs .topical-section-menu {
                top: calc(100% + 10px) !important;
                width: 340px !important;
                min-width: 340px !important;
                max-width: 340px !important;
                border-radius: 18px !important;
                background: #F0ECE0 !important;
                border: 1px solid rgba(185, 128, 50, 0.24) !important;
                box-shadow:
                    0 12px 30px rgba(59, 42, 20, 0.14),
                    inset 0 1px 0 rgba(255, 255, 255, 0.54) !important;
            }

            #daily-tab-panel .daily-source-tabs .topical-section-tab {
                min-height: 52px !important;
                padding: 12px 24px !important;
                color: #5C5146 !important;
                -webkit-text-fill-color: #5C5146 !important;
                font-family: var(--font-ui) !important;
                font-size: 1rem !important;
                font-weight: 500 !important;
                letter-spacing: 0 !important;
                line-height: 1.2 !important;
                text-transform: none !important;
            }

            html:not(.parchment-off):not(.dark-mode) #daily-tab-panel .daily-source-tabs .topical-section-tab.active,
            html.parchment-off:not(.dark-mode) #daily-tab-panel .daily-source-tabs .topical-section-tab.active {
                background: rgba(185, 128, 50, 0.20) !important;
                color: #5C5146 !important;
                -webkit-text-fill-color: #5C5146 !important;
                font-weight: 500 !important;
            }

            html:not(.dark-mode) #daily-tab-panel > :is(#daily-light-source-panel, #morning-evening-source-panel).daily-source-content:not(.hidden) > .date-toggle-wrapper {
                margin-bottom: 0 !important;
            }

            html:not(.dark-mode) #daily-tab-panel > :is(#daily-light-source-panel, #morning-evening-source-panel).daily-source-content:not(.hidden) > .devotion-grid {
                margin-top: -16px !important;
            }

            html:not(.dark-mode) #daily-tab-panel :is(#daily-light-source-panel, #morning-evening-source-panel) .devotion-column {
                position: relative !important;
                overflow: visible !important;
                padding: clamp(58px, 5.4vw, 86px) clamp(48px, 5.8vw, 84px) clamp(56px, 5.6vw, 82px) !important;
                border: 1px solid rgba(201, 164, 107, 0.20) !important;
                border-radius: 34px !important;
                background:
                    radial-gradient(circle at 50% -8%, rgba(255, 255, 255, 0.98), transparent 36%),
                    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 252, 246, 0.92)) !important;
                box-shadow:
                    inset 0 1px 0 rgba(255, 255, 255, 0.86),
                    inset 0 -1px 0 rgba(201, 164, 107, 0.07),
                    0 18px 44px rgba(80, 55, 20, 0.08),
                    0 36px 76px rgba(80, 55, 20, 0.055) !important;
            }

            html:not(.dark-mode) #daily-tab-panel :is(#daily-light-source-panel, #morning-evening-source-panel) .devotion-column::before {
                content: '' !important;
                position: absolute !important;
                inset: 1px !important;
                border-radius: inherit !important;
                pointer-events: none !important;
                background:
                    linear-gradient(135deg, rgba(255, 255, 255, 0.50), transparent 34%),
                    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.018'/%3E%3C/svg%3E") !important;
                opacity: 0.78 !important;
            }

            html:not(.dark-mode) #daily-tab-panel :is(#daily-light-source-panel, #morning-evening-source-panel) .devotion-column::after {
                content: '' !important;
                position: absolute !important;
                top: 56px !important;
                left: 50% !important;
                width: min(420px, calc(100% - 104px)) !important;
                height: 1px !important;
                transform: translateX(-50%) !important;
                pointer-events: none !important;
                background: linear-gradient(90deg, transparent, rgba(201, 164, 107, 0.26), rgba(201, 164, 107, 0.44), rgba(201, 164, 107, 0.26), transparent) !important;
                opacity: 0.66 !important;
            }

            html:not(.dark-mode) #daily-tab-panel :is(#daily-light-source-panel, #morning-evening-source-panel) .devotion-header-row {
                position: relative !important;
                margin-bottom: 0 !important;
                padding: 34px 0 0 !important;
                border-bottom: 0 !important;
            }

            html:not(.dark-mode) #daily-tab-panel :is(#daily-light-source-panel, #morning-evening-source-panel) .devotion-header-row::before {
                content: '✝' !important;
                position: absolute !important;
                top: -54px !important;
                left: 50% !important;
                width: 104px !important;
                height: 66px !important;
                transform: translateX(-50%) !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                padding-top: 18px !important;
                border-radius: 999px 999px 0 0 !important;
                background:
                    radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, 0.99), rgba(255, 252, 246, 0.94) 58%, transparent 60%) !important;
                color: #C9A46B !important;
                font-family: var(--font-heading) !important;
                font-size: 1.75rem !important;
                font-weight: 500 !important;
                line-height: 1 !important;
                text-shadow: 0 6px 18px rgba(154, 108, 47, 0.16) !important;
                pointer-events: none !important;
            }

            html:not(.dark-mode) #daily-tab-panel :is(#daily-light-source-panel, #morning-evening-source-panel) .devotion-header-row::after {
                content: '' !important;
                display: block !important;
                position: absolute !important;
                top: -11px !important;
                left: 50% !important;
                width: min(238px, calc(100% - 120px)) !important;
                height: 38px !important;
                transform: translateX(-50%) !important;
                pointer-events: none !important;
                opacity: 0.72 !important;
                background: url("data:image/svg+xml,%3Csvg viewBox='0 0 238 38' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23C9A46B' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round' opacity='.84'%3E%3Cpath d='M4 22h72'/%3E%3Cpath d='M162 22h72'/%3E%3Cpath d='M94 22c-12 11-29 6-22-5 5-7 15-2 9 5'/%3E%3Cpath d='M144 22c12 11 29 6 22-5-5-7-15-2-9 5'/%3E%3Cpath d='M94 22c9-19 24-18 25 0 1-18 16-19 25 0'/%3E%3Cpath d='M111 25c6 5 12 5 18 0'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat !important;
            }

            html:not(.dark-mode) #daily-tab-panel :is(#daily-light-source-panel, #morning-evening-source-panel) .devotion-header {
                color: #2E241D !important;
                font-family: var(--font-heading) !important;
                font-size: clamp(1.42rem, 1.75vw, 1.95rem) !important;
                font-style: normal !important;
                font-weight: 500 !important;
                letter-spacing: 0.18em !important;
                line-height: 1.1 !important;
                text-transform: uppercase !important;
            }

            html:not(.dark-mode) #daily-tab-panel :is(#daily-light-source-panel, #morning-evening-source-panel) .devotion-date-inline--below {
                margin-top: 0 !important;
                margin-bottom: 38px !important;
                color: #596D96 !important;
                opacity: 0.84 !important;
            }

            html:not(.dark-mode) #daily-tab-panel :is(#daily-light-source-panel, #morning-evening-source-panel) .devotion-date-inline--below::after {
                content: '' !important;
                display: block !important;
                width: 108px !important;
                height: 16px !important;
                margin: 13px auto 0 !important;
                background:
                    linear-gradient(90deg, transparent, rgba(201, 164, 107, 0.52), transparent) center / 100% 1px no-repeat,
                    linear-gradient(45deg, transparent 35%, rgba(201, 164, 107, 0.88) 35% 65%, transparent 65%) center / 9px 9px no-repeat !important;
                opacity: 0.78 !important;
            }
        }

        /* Final premium Daily Devotion pass: desktop-first proportions and polish. */
        @media (min-width: 769px) {
            body {
                background-image:
                    radial-gradient(circle at 48% 0%, rgba(255, 255, 255, 0.86), transparent 30%),
                    radial-gradient(circle at 18% 34%, rgba(220, 190, 132, 0.16), transparent 28%),
                    radial-gradient(circle at 82% 26%, rgba(235, 210, 156, 0.13), transparent 26%),
                    linear-gradient(180deg, #f8f3e9 0%, #f5efe4 46%, #f7f1e8 100%),
                    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)' opacity='.018'/%3E%3C/svg%3E") !important;
            }

            #main-header {
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                width: 100% !important;
                height: clamp(220px, 19vw, 280px) !important;
                min-height: 0 !important;
                padding: 0 !important;
                border-bottom-left-radius: 40px !important;
                border-bottom-right-radius: 40px !important;
                box-shadow:
                    0 20px 54px rgba(8, 20, 50, 0.24),
                    0 1px 0 rgba(255, 255, 255, 0.18) !important;
            }

            #main-header::before {
                content: '' !important;
                display: block !important;
                position: absolute !important;
                inset: 0 !important;
                background-image: url('/study/banner-wide.png?v=6') !important;
                background-size: 100% 100% !important;
                background-position: center bottom !important;
                transform: scale(1.01) !important;
                z-index: 0 !important;
            }

            #main-header::after {
                display: none !important;
            }

            .hero-aurora,
            .hero-particles,
            .hero-light {
                display: block !important;
                z-index: 2 !important;
            }

            .hero-aurora {
                background:
                    radial-gradient(ellipse at 50% -22%, rgba(255, 232, 184, 0.26), transparent 34%),
                    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 52%) !important;
                opacity: 1 !important;
            }

            .hero-particles {
                background-image:
                    radial-gradient(circle at 12% 32%, rgba(255, 224, 151, 0.80) 0 1px, transparent 1.8px),
                    radial-gradient(circle at 24% 19%, rgba(255, 255, 255, 0.58) 0 1px, transparent 1.8px),
                    radial-gradient(circle at 38% 44%, rgba(255, 224, 151, 0.70) 0 1.2px, transparent 2px),
                    radial-gradient(circle at 65% 31%, rgba(255, 255, 255, 0.50) 0 1px, transparent 1.8px),
                    radial-gradient(circle at 83% 22%, rgba(255, 224, 151, 0.72) 0 1px, transparent 1.8px) !important;
                opacity: 0.72 !important;
            }

            .hero-light {
                display: block !important;
                position: absolute !important;
                inset: 0 !important;
                background:
                    linear-gradient(105deg, transparent 28%, rgba(255, 236, 190, 0.13) 43%, transparent 56%),
                    linear-gradient(78deg, transparent 36%, rgba(255, 255, 255, 0.10) 49%, transparent 60%) !important;
                mix-blend-mode: screen !important;
                opacity: 0.70 !important;
                pointer-events: none !important;
            }

            header#main-header.study-header .header-lockup {
                position: absolute !important;
                left: 50% !important;
                top: 50% !important;
                transform: translate(-50%, -50%) !important;
                z-index: 3 !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: center !important;
                width: min(720px, calc(100% - 520px)) !important;
                max-width: 720px !important;
                padding: 0 !important;
                margin: 0 !important;
                filter: drop-shadow(0 16px 30px rgba(4, 15, 38, 0.22)) !important;
            }

            header#main-header.study-header .header-text-group {
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: center !important;
                gap: 0 !important;
                width: 100% !important;
                max-width: 720px !important;
                margin: 0 auto !important;
                text-align: center !important;
            }

            header#main-header.study-header .dove-icon {
                align-self: center !important;
                width: clamp(72px, 5.7vw, 94px) !important;
                height: clamp(72px, 5.7vw, 94px) !important;
                margin: clamp(10px, 1vw, 14px) auto clamp(14px, 1.2vw, 18px) !important;
                filter:
                    drop-shadow(0 0 16px rgba(255, 240, 200, 0.95))
                    drop-shadow(0 0 35px rgba(255, 220, 140, 0.70))
                    drop-shadow(0 14px 24px rgba(4, 16, 43, 0.30)) !important;
            }

            header#main-header.study-header .header-divider {
                margin: clamp(7px, 0.75vw, 10px) auto 0 !important;
                width: min(460px, 100%) !important;
            }

            header#main-header.study-header .header-quote {
                margin: 0 auto clamp(7px, 0.8vw, 10px) !important;
                text-align: center !important;
            }

            header#main-header.study-header .header-citation {
                margin: 0 auto !important;
                text-align: center !important;
            }

            .main-title {
                font-family: 'Cormorant Garamond', 'Crimson Pro', Georgia, serif !important;
                font-size: clamp(2.8rem, 4.8vw, 4.8rem) !important;
                font-weight: 500 !important;
                letter-spacing: 0 !important;
                line-height: 0.88 !important;
                text-shadow:
                    0 2px 0 rgba(255, 255, 255, 0.18),
                    0 12px 34px rgba(2, 12, 34, 0.46),
                    0 0 34px rgba(255, 241, 213, 0.16) !important;
            }

            .hero-subtitle {
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                gap: 16px !important;
                margin-top: clamp(10px, 1.2vw, 16px) !important;
                color: #f3c968 !important;
                font-family: 'Cormorant Garamond', 'Crimson Pro', Georgia, serif !important;
                font-size: clamp(1.15rem, 1.8vw, 1.6rem) !important;
                font-weight: 500 !important;
                letter-spacing: 0.018em !important;
                line-height: 1.12 !important;
                text-shadow:
                    0 8px 22px rgba(3, 12, 34, 0.42),
                    0 0 18px rgba(244, 202, 104, 0.22) !important;
            }

            .hero-subtitle::before,
            .hero-subtitle::after {
                content: '' !important;
                display: block !important;
                width: 10px !important;
                height: 10px !important;
                background: linear-gradient(135deg, rgba(255, 224, 157, 0.96), rgba(184, 138, 77, 0.82)) !important;
                transform: rotate(45deg) !important;
                box-shadow: 0 0 14px rgba(248, 215, 153, 0.28) !important;
                opacity: 0.9 !important;
                flex: 0 0 auto !important;
            }

            #main-header .header-left-actions {
                top: 28px !important;
                left: clamp(28px, 3.8vw, 56px) !important;
            }

            #main-header .header-controls {
                top: 28px !important;
                right: clamp(28px, 3.8vw, 56px) !important;
            }

            #main-header #homeBtn.icon-btn,
            #main-header #languageSelectWrapperHeader .custom-select-trigger {
                transition: all .35s cubic-bezier(.22, 1, .36, 1) !important;
            }

            #main-header #homeBtn.icon-btn:hover,
            #main-header #languageSelectWrapperHeader .custom-select-trigger:hover,
            #main-header #languageSelectWrapperHeader .custom-select.open .custom-select-trigger {
                transform: translateY(-3px) !important;
                box-shadow:
                    inset 0 1px 0 rgba(255, 255, 255, 0.42),
                    0 18px 42px rgba(4, 14, 38, 0.24),
                    0 0 34px rgba(244, 207, 140, 0.13) !important;
            }

            .content-area {
                padding: 0 0 3rem !important;
            }

            .devotion-container {
                max-width: 1440px !important;
                padding: 0 clamp(26px, 4vw, 56px) 56px !important;
            }

            .devotion-tabs {
                display: flex !important;
                gap: 18px !important;
                width: fit-content !important;
                margin: -37px auto 24px !important;
                padding: 0 !important;
                border: 0 !important;
                border-radius: 0 !important;
                background: transparent !important;
                box-shadow: none !important;
                overflow: visible !important;
                position: relative !important;
                z-index: 30 !important;
                transform: none !important;
            }

            .devotion-tabs::before {
                inset: 50% auto auto 50% !important;
                width: min(760px, 86vw) !important;
                height: 92px !important;
                background: radial-gradient(ellipse, rgba(111, 92, 58, 0.16), transparent 70%) !important;
                filter: blur(22px) !important;
            }

            .devotion-tab-btn {
                width: 360px !important;
                min-width: 0 !important;
                height: 74px !important;
                padding: 0 30px !important;
                border-radius: 0 0 22px 22px !important;
                color: rgba(75, 64, 55, 0.82) !important;
                background:
                    linear-gradient(180deg, rgba(255, 252, 246, 0.94), rgba(244, 237, 225, 0.88)) !important;
                border: 1px solid rgba(206, 171, 111, 0.25) !important;
                font-family: 'Cormorant Garamond', 'Crimson Pro', Georgia, serif !important;
                font-size: 1.55rem !important;
                font-weight: 500 !important;
                letter-spacing: 0.01em !important;
                box-shadow:
                    inset 0 1px 0 rgba(255, 255, 255, 0.72),
                    0 14px 30px rgba(80, 55, 20, 0.08) !important;
                transition: all .35s cubic-bezier(.22, 1, .36, 1) !important;
            }

            .devotion-tab-btn + .devotion-tab-btn {
                border-left: 1px solid rgba(206, 171, 111, 0.25) !important;
            }

            .devotion-tab-btn.active {
                color: #fff !important;
                background:
                    linear-gradient(180deg, #315fce 0%, #234aa9 72%, #1f4197 100%) !important;
                border-color: rgba(120, 159, 255, 0.42) !important;
                box-shadow:
                    inset 0 1px 0 rgba(255, 255, 255, 0.28),
                    0 16px 34px rgba(33, 70, 174, 0.30),
                    0 0 34px rgba(56, 105, 224, 0.20) !important;
            }

            .devotion-tab-btn:hover {
                transform: translateY(-3px) !important;
            }

            .devotion-tab-btn::after {
                left: 48px !important;
                right: 48px !important;
                bottom: 14px !important;
            }

            .devotion-tabs ~ .devotion-tab-panel {
                margin-top: 0 !important;
            }

            #daily-tab-panel {
                max-width: 1320px !important;
                grid-template-columns: minmax(0, 1fr) auto auto !important;
                grid-template-areas:
                    ". tools source"
                    "content content content" !important;
                column-gap: 18px !important;
                row-gap: 20px !important;
                padding: clamp(18px, 2.8vw, 34px) clamp(24px, 3.4vw, 48px) 0 !important;
            }

            #daily-tab-panel > .daily-source-content:not(.hidden) > .date-toggle-wrapper > .devotion-date {
                display: none !important;
            }

            #daily-tab-panel > .daily-source-content:not(.hidden) > .date-toggle-wrapper > .view-toggle-container,
            #daily-tab-panel .daily-source-tabs .daily-source-menu-toggle {
                min-height: 58px !important;
                border-radius: 999px !important;
                background:
                    linear-gradient(180deg, rgba(255, 253, 249, 0.78), rgba(244, 237, 225, 0.68)) !important;
                border: 1px solid rgba(192, 147, 79, 0.24) !important;
                box-shadow:
                    0 12px 32px rgba(80, 55, 20, 0.075),
                    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
                backdrop-filter: blur(18px) saturate(1.08) !important;
                -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
                transition: all .35s cubic-bezier(.22, 1, .36, 1) !important;
            }

            #daily-tab-panel > .daily-source-content:not(.hidden) > .date-toggle-wrapper > .view-toggle-container:hover,
            #daily-tab-panel .daily-source-tabs .daily-source-menu-toggle:hover {
                transform: translateY(-2px) !important;
                box-shadow:
                    0 18px 42px rgba(80, 55, 20, 0.11),
                    inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
            }

            #daily-tab-panel .daily-source-tabs,
            #daily-tab-panel .daily-source-tabs .daily-source-menu-toggle {
                width: clamp(300px, 26vw, 380px) !important;
                min-width: 0 !important;
                max-width: 380px !important;
                flex-basis: auto !important;
            }

            #daily-tab-panel > .daily-source-content:not(.hidden) > .devotion-grid,
            #daily-tab-panel > .daily-source-content:not(.hidden) > #prayer-devotion-grid,
            #daily-tab-panel > .daily-source-content:not(.hidden) > #me-devotion-grid,
            #daily-tab-panel > .daily-source-content:not(.hidden) > #imitation-devotion-grid,
            #daily-tab-panel > .daily-source-content:not(.hidden) > #streams-devotion-grid {
                margin-top: clamp(34px, 4vw, 58px) !important;
            }

            #visuals-tab-panel .visuals-dashboard {
                margin-top: 6px !important;
            }

            html:not(.dark-mode) #daily-tab-panel :is(#daily-light-source-panel, #morning-evening-source-panel) .devotion-column {
                border-radius: 28px !important;
                padding: clamp(54px, 4.8vw, 76px) clamp(42px, 5vw, 72px) clamp(46px, 4.8vw, 70px) !important;
                background:
                    radial-gradient(circle at 50% -10%, rgba(255, 255, 255, 0.98), transparent 34%),
                    radial-gradient(circle at 18% 18%, rgba(244, 226, 190, 0.22), transparent 28%),
                    linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(255, 252, 246, 0.92)) !important;
                box-shadow:
                    inset 0 1px 0 rgba(255, 255, 255, 0.88),
                    inset 0 -1px 0 rgba(201, 164, 107, 0.08),
                    0 24px 58px rgba(80, 55, 20, 0.09),
                    0 44px 92px rgba(80, 55, 20, 0.055) !important;
                transition: all .35s cubic-bezier(.22, 1, .36, 1) !important;
            }

            html:not(.dark-mode) #daily-tab-panel :is(#daily-light-source-panel, #morning-evening-source-panel) .devotion-column:hover {
                transform: translateY(-5px) !important;
                box-shadow:
                    inset 0 1px 0 rgba(255, 255, 255, 0.9),
                    0 30px 70px rgba(80, 55, 20, 0.12),
                    0 54px 110px rgba(80, 55, 20, 0.07) !important;
            }

            html:not(.dark-mode) #daily-tab-panel :is(#daily-light-source-panel, #morning-evening-source-panel) .devotion-header {
                font-size: clamp(1.35rem, 1.5vw, 1.78rem) !important;
            }

            .nav-arrow {
                width: 66px !important;
                height: 66px !important;
                background: rgba(255, 253, 248, 0.58) !important;
                border: 1px solid rgba(255, 255, 255, 0.55) !important;
                color: #c5964b !important;
                box-shadow:
                    inset 0 1px 0 rgba(255, 255, 255, 0.72),
                    0 18px 42px rgba(78, 55, 24, 0.13),
                    0 0 26px rgba(216, 178, 104, 0.12) !important;
                opacity: 0.52 !important;
                backdrop-filter: blur(18px) saturate(1.08) !important;
                -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
                transition: all .35s cubic-bezier(.22, 1, .36, 1) !important;
            }

            .nav-arrow.prev {
                left: clamp(18px, 2vw, 32px) !important;
            }

            .nav-arrow.next {
                right: clamp(18px, 2vw, 32px) !important;
            }

            .nav-arrow:hover {
                opacity: 1 !important;
                color: #9c6828 !important;
                transform: translateY(-50%) scale(1.06) !important;
                box-shadow:
                    inset 0 1px 0 rgba(255, 255, 255, 0.82),
                    0 24px 54px rgba(78, 55, 24, 0.18),
                    0 0 34px rgba(216, 178, 104, 0.18) !important;
            }
        }

        @media (min-width: 769px) and (max-width: 1180px) {
            #main-header {
                height: clamp(190px, 28vw, 280px) !important;
            }

            .main-title {
                font-size: clamp(2.4rem, 4.2vw, 3.6rem) !important;
            }

            .hero-subtitle {
                font-size: clamp(1.1rem, 1.6vw, 1.3rem) !important;
            }

            .devotion-tab-btn {
                width: min(42vw, 330px) !important;
                height: 66px !important;
                font-size: 1.32rem !important;
            }

            #daily-tab-panel {
                grid-template-columns: 1fr !important;
                grid-template-areas:
                    "tools"
                    "source"
                    "content" !important;
                justify-items: center !important;
                padding-top: 18px !important;
            }

            #daily-tab-panel .dai            /* ==================================================
               PREMIUM LUXURY DEVOTIONAL CARD REFINEMENTS
               ================================================== */

            /* 1 & 2. Card Surface, Shape, and Layered Depth (Global in Light Mode) */
            html:not(.dark-mode) .devotion-column {
                border-radius: 32px !important;
                padding: clamp(48px, 4.2vw, 68px) clamp(44px, 5.2vw, 76px) clamp(50px, 4.6vw, 72px) !important;
                background:
                    /* Subtle gold ambient tint at bottom corners */
                    radial-gradient(circle at 12% 92%, rgba(228, 202, 155, 0.16), transparent 32%),
                    radial-gradient(circle at 88% 92%, rgba(224, 198, 148, 0.14), transparent 30%),
                    /* Soft warm lighting bloom from top center */
                    radial-gradient(circle at 50% -12%, rgba(255, 255, 255, 0.99), transparent 38%),
                    radial-gradient(circle at 18% 18%, rgba(246, 230, 198, 0.26), transparent 28%),
                    /* Faint parchment grain SVG */
                    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)' opacity='.022'/%3E%3C/svg%3E"),
                    /* Warm white to soft gold-ivory gradient */
                    linear-gradient(180deg, #ffffff 0%, #faf6ec 60%, #f6ecd8 100%) !important;
                box-shadow:
                    inset 0 1px 2px rgba(255, 255, 255, 0.92),
                    inset 0 0 0 1px rgba(216, 180, 120, 0.14),
                    inset 0 0 35px rgba(255, 246, 222, 0.40),
                    0 4px 12px rgba(95, 75, 45, 0.015),
                    0 20px 44px rgba(95, 75, 45, 0.06),
                    0 40px 80px rgba(80, 58, 30, 0.04),
                    0 70px 120px rgba(60, 42, 20, 0.03) !important;
                transition: all .4s cubic-bezier(.22, 1, .36, 1) !important;
            }

            /* Hover elevation */
            html:not(.dark-mode) .devotion-column:hover {
                transform: translateY(-8px) !important;
                box-shadow:
                    inset 0 1px 2px rgba(255, 255, 255, 0.94),
                    inset 0 0 0 1px rgba(216, 180, 120, 0.18),
                    inset 0 0 45px rgba(255, 246, 222, 0.45),
                    0 4px 12px rgba(95, 75, 45, 0.015),
                    0 24px 50px rgba(95, 75, 45, 0.08),
                    0 50px 95px rgba(80, 58, 30, 0.06),
                    0 90px 150px rgba(60, 42, 20, 0.05) !important;
            }

            /* 3. Top Ornament Refinement */
            html:not(.dark-mode) .devotion-header-row::before {
                content: '✝' !important;
                position: absolute !important;
                top: -54px !important;
                left: 50% !important;
                width: 104px !important;
                height: 66px !important;
                transform: translateX(-50%) !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                padding-top: 18px !important;
                border-radius: 999px 999px 0 0 !important;
                color: #bfa068 !important;
                font-family: var(--font-heading) !important;
                font-size: 1.75rem !important;
                font-weight: normal !important;
                line-height: 1 !important;
                text-shadow:
                    0 1px 0 rgba(255, 255, 255, 0.8),
                    0 0 12px rgba(235, 190, 110, 0.45) !important;
                background:
                    radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, 0.99), rgba(255, 252, 246, 0.96) 58%, transparent 60%) !important;
            }

            html:not(.dark-mode) .devotion-header-row::after {
                opacity: 0.82 !important;
                filter: drop-shadow(0 1px 2px rgba(201, 164, 107, 0.28)) !important;
            }

            /* 4. Section Label (MORNING) */
            html:not(.dark-mode) .devotion-header {
                color: #1e150f !important;
                font-family: 'Cormorant Garamond', Georgia, serif !important;
                font-size: clamp(1.4rem, 1.6vw, 1.85rem) !important;
                font-weight: 600 !important;
                letter-spacing: 0.08em !important;
                text-transform: uppercase !important;
                text-shadow: none !important;
            }

            /* 4. Date Inline */
            html:not(.dark-mode) .devotion-date-inline {
                color: #6a7485 !important;
                font-family: 'Cormorant Garamond', Georgia, serif !important;
                font-size: clamp(1.15rem, 1.35vw, 1.45rem) !important;
                font-style: italic !important;
                font-weight: 400 !important;
                letter-spacing: 0.02em !important;
                margin-bottom: 22px !important;
                padding-bottom: 14px !important;
            }

            /* Underline ornament refinement */
            html:not(.dark-mode) :is(.devotion-date-inline, .devotion-date-inline--below)::after {
                width: 90px !important;
                height: 7px !important;
                background:
                    linear-gradient(90deg, transparent, rgba(201, 164, 107, 0.35), transparent) center 3px / 100% 1px no-repeat,
                    radial-gradient(circle, #c9a46b 0 2px, transparent 3px) center / 6px 6px no-repeat !important;
                opacity: 0.76 !important;
            }

            /* 4. Main Title spacing and styling */
            .devotion-column :is(h1, h2, h3, .devotion-topic) {
                font-family: 'Cormorant Garamond', Georgia, serif !important;
                font-size: clamp(1.8rem, 2.2vw, 2.4rem) !important;
                font-weight: 500 !important;
                line-height: 1.25 !important;
                color: #2c221a !important;
                margin-top: 0 !important;
                margin-bottom: 24px !important;
                letter-spacing: -0.01em !important;
                text-shadow: 0 1px 1px rgba(255,255,255,0.8) !important;
            }

            /* ==================================================
               DEVOTION DROPDOWN WIDTH & COLOR OVERRIDES
               ================================================== */
            #daily-tab-panel > .daily-source-content:not(.hidden) > .date-toggle-wrapper > .view-toggle-container {
                min-height: 58px !important;
                border-radius: 999px !important;
                background:
                    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(244, 237, 225, 0.68)) !important;
                border: 1px solid rgba(192, 147, 79, 0.24) !important;
                box-shadow:
                    0 12px 32px rgba(80, 55, 20, 0.075),
                    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
            }

            html:not(.dark-mode) #daily-tab-panel .daily-source-tabs .daily-source-menu-toggle {
                min-height: 58px !important;
                border-radius: 999px !important;
                color: #fff !important;
                -webkit-text-fill-color: #fff !important;
                background: linear-gradient(180deg, #315fce 0%, #234aa9 72%, #1f4197 100%) !important;
                border: 1px solid rgba(120, 159, 255, 0.42) !important;
                box-shadow:
                    inset 0 1px 0 rgba(255, 255, 255, 0.28),
                    0 12px 28px rgba(26, 45, 120, 0.18) !important;
                backdrop-filter: blur(18px) saturate(1.08) !important;
                -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
                transition: all .35s cubic-bezier(.22, 1, .36, 1) !important;
            }

            html:not(.dark-mode) #daily-tab-panel .daily-source-tabs .daily-source-menu-toggle:hover {
                transform: translateY(-2px) !important;
                color: #fff !important;
                -webkit-text-fill-color: #fff !important;
                background: linear-gradient(180deg, #3867d6 0%, #2955be 72%, #22479e 100%) !important;
                box-shadow:
                    inset 0 1px 0 rgba(255, 255, 255, 0.32),
                    0 16px 36px rgba(26, 45, 120, 0.26) !important;
            }

            html:not(.dark-mode) #daily-tab-panel .daily-source-tabs .daily-source-menu-toggle .topical-section-menu-label {
                color: #fff !important;
                -webkit-text-fill-color: #fff !important;
            }

            #daily-tab-panel .daily-source-tabs,
            #daily-tab-panel .daily-source-tabs .daily-source-menu-toggle {
                width: max-content !important;
                min-width: 260px !important;
                max-width: 330px !important;
                flex-basis: auto !important;
            }

            /* Dropdown menu list width matches button width exactly */
            #daily-tab-panel .daily-source-tabs .topical-section-menu {
                width: 100% !important;
                min-width: 0 !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
            }

            /* Re-align the active option checkmark inline on the right */
            .daily-source-tabs .topical-section-tab.active::after {
                content: '✓' !important;
                position: static !important;
                display: inline-block !important;
                margin-left: auto !important;
                color: currentColor !important;
                font-size: 1.05rem !important;
                font-weight: 600 !important;
                opacity: 0.88 !important;
                padding-left: 18px !important;
                width: auto !important;
                height: auto !important;
                inset: auto !important;
                transform: none !important;
            }
        }

        @media (max-width: 768px) {
            /* Mobile header dimensions and background alignment to match desktop */
            #main-header {
                min-height: 0 !important;
                height: auto !important;
                border-bottom-left-radius: 40px !important; /* Smooth bottom curves inline with desktop */
                border-bottom-right-radius: 40px !important;
                background:
                    linear-gradient(180deg, #17306B 0%, #1D3E84 45%, #224A96 100%) !important;
            }

            html.parchment-off:not(.dark-mode) #main-header {
                background:
                    linear-gradient(180deg, #121B3F 0%, #172656 48%, #1D326A 100%) !important;
            }

            #main-header::before {
                background-image: url('/study/banner-wide.png?v=6') !important;
                background-size: 100% 100% !important;
                background-position: center bottom !important;
                display: block !important;
                z-index: 1 !important;
            }

            /* Mobile banner text and typography matching desktop */
            .main-title {
                font-family: 'Cormorant Garamond', 'Crimson Pro', Georgia, serif !important;
                font-weight: 500 !important;
                text-shadow:
                    0 2px 0 rgba(255, 255, 255, 0.18),
                    0 12px 34px rgba(2, 12, 34, 0.46),
                    0 0 34px rgba(255, 241, 213, 0.16) !important;
            }

            .hero-subtitle {
                font-family: 'Cormorant Garamond', 'Crimson Pro', Georgia, serif !important;
                color: rgba(247, 242, 229, 0.96) !important;
                font-style: italic !important;
                letter-spacing: 0.03em !important;
                text-shadow: 0 10px 24px rgba(3, 10, 28, 0.32) !important;
            }

            .hero-subtitle::before,
            .hero-subtitle::after {
                content: "✦" !important;
                display: inline-block !important;
                color: #C9A46B !important;
                margin: 0 8px !important;
                font-size: 0.72rem !important;
                width: auto !important;
                height: auto !important;
                background: none !important;
                transform: none !important;
                box-shadow: none !important;
            }

            .main-content {
                position: relative !important;
                z-index: 2500 !important;
            }

            /* Pull tabs up to sit right below the top banner (overlapping mobile curves) */
            #devotion-view.devotion-container {
                padding-top: 0 !important;
                padding-left: 16px !important;
                padding-right: 16px !important;
                padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
            }

            .devotion-tabs {
                display: grid !important;
                grid-template-columns: repeat(3, 1fr) !important;
                gap: 4px !important;
                width: calc(100% - 16px) !important;
                max-width: 480px !important;
                height: 54px !important;
                min-height: 54px !important;
                margin: -27px auto 24px !important;
                padding: 4px !important;
                border-radius: 27px !important;
                position: relative !important;
                z-index: 3000 !important; /* Floats cleanly on top of the curved header shadow */
                box-sizing: border-box !important;
                overflow: hidden !important;
                backdrop-filter: blur(20px) saturate(1.2) !important;
                -webkit-backdrop-filter: blur(20px) saturate(1.2) !important;
            }

            html:not(.dark-mode) .devotion-tabs {
                background: rgba(255, 255, 255, 0.76) !important;
                border: 1px solid rgba(180, 160, 130, 0.16) !important;
                box-shadow:
                    0 8px 24px rgba(58, 44, 24, 0.06),
                    inset 0 1px 1px rgba(255, 255, 255, 0.8) !important;
            }

            html.dark-mode .devotion-tabs {
                background: rgba(22, 28, 45, 0.76) !important;
                border: 1px solid rgba(255, 255, 255, 0.08) !important;
                box-shadow:
                    0 8px 24px rgba(0, 0, 0, 0.24),
                    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
            }

            .devotion-tab-btn {
                height: 44px !important;
                min-height: 44px !important;
                border-radius: 22px !important;
                border: 0 !important;
                font-family: var(--font-ui) !important;
                font-size: 0.92rem !important;
                font-weight: 600 !important;
                letter-spacing: 0.01em !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                box-shadow: none !important;
                transition: all 0.24s cubic-bezier(0.4, 0, 0.2, 1) !important;
                background: transparent !important;
                color: #4A3E3D !important;
                -webkit-text-fill-color: #4A3E3D !important;
            }

            html.dark-mode .devotion-tab-btn {
                color: rgba(255, 255, 255, 0.72) !important;
                -webkit-text-fill-color: rgba(255, 255, 255, 0.72) !important;
            }

            .devotion-tab-btn::after {
                display: none !important;
                content: none !important;
            }

            html:not(.dark-mode) .devotion-tab-btn.active {
                background: linear-gradient(135deg, #4361ee 0%, #2144d3 100%) !important;
                color: #ffffff !important;
                -webkit-text-fill-color: #ffffff !important;
                box-shadow: 0 4px 12px rgba(67, 97, 238, 0.24) !important;
            }

            html.dark-mode .devotion-tab-btn.active {
                background: linear-gradient(135deg, #3f5efb 0%, #213fd3 100%) !important;
                color: #ffffff !important;
                -webkit-text-fill-color: #ffffff !important;
                box-shadow: 0 4px 12px rgba(63, 94, 251, 0.32) !important;
            }

            html:not(.dark-mode) #visuals-tab-button.devotion-tab-btn.active,
            html.dark-mode #visuals-tab-button.devotion-tab-btn.active {
                background:
                    linear-gradient(180deg, var(--journey-tab-start, #2F57C8) 0%, var(--journey-tab-end, #183B8C) 100%) !important;
                border-color: var(--journey-tab-border, rgba(255, 255, 255, 0.30)) !important;
                box-shadow:
                    0 10px 26px var(--journey-tab-glow, rgba(36, 73, 184, 0.28)),
                    0 22px 48px color-mix(in srgb, var(--journey-tab-end, #183B8C) 32%, transparent),
                    inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
            }

            /* Daily Devotion Tabs & Hamburger Left-Justification */
            .daily-source-tabs {
                display: grid !important;
                grid-template-columns: 1fr !important;
                width: 100% !important;
                margin-left: 0 !important;
                margin-right: auto !important;
                margin-bottom: 16px !important;
                padding-left: 8px !important;
                box-sizing: border-box !important;
            }

            /* Redesign mobile daily devotion dropdown to look like topical hamburger menu */
            html:not(.dark-mode) .daily-source-tabs .daily-source-menu-toggle {
                min-height: 48px !important;
                height: 48px !important;
                border-radius: 22px !important;
                color: #234aa9 !important; /* Blue text to match active tab */
                -webkit-text-fill-color: #234aa9 !important;
                background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(251, 246, 236, 0.88)) !important;
                border: 1px solid rgba(34, 70, 176, 0.14) !important;
                box-shadow:
                    inset 0 1px 0 rgba(255, 255, 255, 0.78),
                    0 6px 18px rgba(58, 44, 24, 0.06),
                    0 0 0 1px rgba(255, 255, 255, 0.55) !important;
                padding: 8px 14px 8px 10px !important;
                display: flex !important;
                align-items: center !important;
                justify-content: flex-start !important;
                gap: 8px !important;
                width: fit-content !important;
                min-width: 0 !important;
                max-width: calc(100vw - 32px) !important;
                justify-self: start !important; /* Left justified inside grid */
                margin: 0 0 16px 0 !important;
            }

            html.dark-mode .daily-source-tabs .daily-source-menu-toggle {
                min-height: 48px !important;
                height: 48px !important;
                border-radius: 22px !important;
                color: #5c85ff !important;
                -webkit-text-fill-color: #5c85ff !important;
                background: linear-gradient(135deg, rgba(22, 28, 45, 0.96), rgba(30, 38, 60, 0.88)) !important;
                border: 1px solid rgba(92, 133, 255, 0.2) !important;
                box-shadow:
                    inset 0 1px 0 rgba(255, 255, 255, 0.08),
                    0 6px 18px rgba(0, 0, 0, 0.2),
                    0 0 0 1px rgba(255, 255, 255, 0.04) !important;
                padding: 8px 14px 8px 10px !important;
                display: flex !important;
                align-items: center !important;
                justify-content: flex-start !important;
                gap: 8px !important;
                width: fit-content !important;
                min-width: 0 !important;
                max-width: calc(100vw - 32px) !important;
                justify-self: start !important; /* Left justified inside grid */
                margin: 0 0 16px 0 !important;
            }

            html.dark-mode .daily-source-tabs .daily-source-menu-toggle .topical-section-menu-icon {
                background: rgba(92, 133, 255, 0.12) !important;
                color: #5c85ff !important;
            }

            /* Show the hamburger icon on daily devotion toggle button on mobile */
            .daily-source-tabs .daily-source-menu-toggle .topical-section-menu-icon {
                display: inline-grid !important;
                width: 32px !important;
                height: 32px !important;
                border-radius: 10px !important;
                background: rgba(35, 70, 176, 0.08) !important;
                color: #234aa9 !important;
                place-content: center !important;
                gap: 3px !important;
                flex: 0 0 auto !important;
            }

            .daily-source-tabs .daily-source-menu-toggle .topical-section-menu-icon span {
                display: block !important;
                width: 14px !important;
                height: 1.5px !important;
                border-radius: 999px !important;
                background: currentColor !important;
            }

            /* Make sure text aligns nicely on mobile dropdown label */
            .daily-source-tabs .daily-source-menu-toggle .topical-section-menu-label {
                flex: 0 1 auto !important;
                font-family: var(--font-ui) !important;
                font-size: clamp(0.78rem, 3vw, 0.85rem) !important;
                letter-spacing: 0.01em !important;
                white-space: nowrap !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
            }

            /* Remove default drop-down caret logic on mobile for daily-source-menu-toggle to look clean */
            .daily-source-tabs .daily-source-menu-toggle::after {
                content: '' !important;
                display: none !important;
            }

            /* Set both hamburger menu labels and menu items to non-bold (font-weight 500) on mobile */
            .topical-section-menu-label,
            #daily-source-menu-toggle,
            #topical-section-menu-toggle,
            .daily-source-tabs .topical-section-tab,
            #topical-section-tabs .topical-section-tab {
                font-weight: 500 !important;
            }

            /* Container width is fit-content so it is determined by the toggle button when closed/opened */
            .daily-source-tabs,
            #topical-section-tabs {
                position: relative !important;
                width: fit-content !important;
                max-width: 100% !important;
                display: block !important;
            }

            /* Dropdown menu list width matches button width exactly on mobile */
            .daily-source-tabs .topical-section-menu,
            #topical-section-tabs .topical-section-menu {
                position: absolute !important;
                top: 100% !important;
                left: 0 !important;
                width: 100% !important;
                min-width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
                z-index: 4000 !important;
                margin-top: 4px !important;
                border-radius: 18px !important;
                border: 1px solid rgba(34, 70, 176, 0.15) !important;
                background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(251, 246, 236, 0.96)) !important;
                box-shadow: 0 10px 30px rgba(58, 44, 24, 0.15) !important;
                padding: 6px !important;
                display: none !important;
            }

            html.dark-mode .daily-source-tabs .topical-section-menu,
            html.dark-mode #topical-section-tabs .topical-section-menu {
                background: linear-gradient(135deg, rgba(22, 28, 45, 0.98), rgba(30, 38, 60, 0.96)) !important;
                border: 1px solid rgba(92, 133, 255, 0.25) !important;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
            }

            .daily-source-tabs.open .topical-section-menu,
            #topical-section-tabs.open .topical-section-menu {
                display: flex !important;
                flex-direction: column !important;
                gap: 4px !important;
            }

            /* Dropdown items: align left, truncate text with ellipsis if it overflows, use non-bold font weight */
            .daily-source-tabs .topical-section-tab,
            #topical-section-tabs .topical-section-tab {
                width: 100% !important;
                box-sizing: border-box !important;
                text-overflow: ellipsis !important;
                white-space: nowrap !important;
                overflow: hidden !important;
                display: flex !important;
                align-items: center !important;
                justify-content: flex-start !important;
                text-align: left !important;
                padding: 10px 14px !important;
                border-radius: 12px !important;
                border: none !important;
                font-weight: 500 !important;
                background: transparent !important;
            }

            html:not(.dark-mode) .daily-source-tabs .topical-section-tab,
            html:not(.dark-mode) #topical-section-tabs .topical-section-tab {
                color: #234aa9 !important;
                -webkit-text-fill-color: #234aa9 !important;
            }

            html:not(.dark-mode) .daily-source-tabs .topical-section-tab:hover,
            html:not(.dark-mode) #topical-section-tabs .topical-section-tab:hover {
                background: rgba(35, 70, 176, 0.08) !important;
            }

            html.dark-mode .daily-source-tabs .topical-section-tab,
            html.dark-mode #topical-section-tabs .topical-section-tab {
                color: rgba(255, 255, 255, 0.72) !important;
                -webkit-text-fill-color: rgba(255, 255, 255, 0.72) !important;
            }

            html.dark-mode .daily-source-tabs .topical-section-tab:hover,
            html.dark-mode #topical-section-tabs .topical-section-tab:hover {
                background: rgba(255, 255, 255, 0.08) !important;
                color: #ffffff !important;
                -webkit-text-fill-color: #ffffff !important;
            }

            html:not(.dark-mode) .daily-source-tabs .topical-section-tab.active,
            html:not(.dark-mode) #topical-section-tabs .topical-section-tab.active {
                background: linear-gradient(135deg, #4361ee 0%, #2144d3 100%) !important;
                color: #ffffff !important;
                -webkit-text-fill-color: #ffffff !important;
            }

            html.dark-mode .daily-source-tabs .topical-section-tab.active,
            html.dark-mode #topical-section-tabs .topical-section-tab.active {
                background: linear-gradient(135deg, #3f5efb 0%, #213fd3 100%) !important;
                color: #ffffff !important;
                -webkit-text-fill-color: #ffffff !important;
            }

            /* Dark mode overrides for mobile toggle button text, labels and icons */
            html.dark-mode .daily-source-menu-toggle,
            html.dark-mode #topical-section-menu-toggle {
                color: #5c85ff !important;
                -webkit-text-fill-color: #5c85ff !important;
            }

            html.dark-mode .daily-source-menu-toggle .topical-section-menu-label,
            html.dark-mode #topical-section-menu-toggle .topical-section-menu-label {
                color: #5c85ff !important;
                -webkit-text-fill-color: #5c85ff !important;
            }

            html.dark-mode .daily-source-menu-toggle .topical-section-menu-icon,
            html.dark-mode #topical-section-menu-toggle .topical-section-menu-icon {
                background: rgba(92, 133, 255, 0.12) !important;
                color: #5c85ff !important;
            }

            html.dark-mode .daily-source-menu-toggle .topical-section-menu-icon span,
            html.dark-mode #topical-section-menu-toggle .topical-section-menu-icon span {
                background: #5c85ff !important;
            }

            /* 1 & 2. Mobile Card Surface, Shape, and Layered Depth */
            html:not(.dark-mode) .devotion-column {
                border-radius: 28px !important; /* Slightly tighter border-radius for mobile screens */
                padding: 34px 24px 38px !important; /* Tighter padding for mobile screens */
                margin: 0 8px 24px 8px !important;
                background:
                    /* Subtle gold ambient tint at bottom corners */
                    radial-gradient(circle at 12% 92%, rgba(228, 202, 155, 0.14), transparent 32%),
                    radial-gradient(circle at 88% 92%, rgba(224, 198, 148, 0.12), transparent 30%),
                    /* Soft warm lighting bloom from top center */
                    radial-gradient(circle at 50% -12%, rgba(255, 255, 255, 0.99), transparent 38%),
                    radial-gradient(circle at 18% 18%, rgba(246, 230, 198, 0.22), transparent 28%),
                    /* Faint parchment grain SVG */
                    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)' opacity='.022'/%3E%3C/svg%3E"),
                    /* Warm white to soft gold-ivory gradient */
                    linear-gradient(180deg, #ffffff 0%, #faf6ec 60%, #f6ecd8 100%) !important;
                box-shadow:
                    inset 0 1px 2px rgba(255, 255, 255, 0.92),
                    inset 0 0 0 1px rgba(216, 180, 120, 0.14),
                    inset 0 0 30px rgba(255, 246, 222, 0.35),
                    0 4px 10px rgba(95, 75, 45, 0.015),
                    0 16px 36px rgba(95, 75, 45, 0.05),
                    0 30px 60px rgba(80, 58, 30, 0.035),
                    0 50px 90px rgba(60, 42, 20, 0.025) !important;
                width: calc(100% - 16px) !important;
            }

            /* Hover elevation on mobile */
            html:not(.dark-mode) .devotion-column:hover {
                transform: translateY(-4px) !important;
                box-shadow:
                    inset 0 1px 2px rgba(255, 255, 255, 0.94),
                    inset 0 0 0 1px rgba(216, 180, 120, 0.18),
                    inset 0 0 35px rgba(255, 246, 222, 0.40),
                    0 4px 10px rgba(95, 75, 45, 0.015),
                    0 20px 42px rgba(95, 75, 45, 0.07),
                    0 38px 75px rgba(80, 58, 30, 0.05),
                    0 60px 110px rgba(60, 42, 20, 0.04) !important;
            }

            /* Cross position on mobile */
            html:not(.dark-mode) .devotion-header-row::before {
                top: -50px !important;
                background:
                    radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, 0.99), rgba(255, 252, 246, 0.96) 58%, transparent 60%) !important;
            }
        }

        /* Final dark-mode normalization for the Daily source picker.
           This intentionally sits after the layered desktop/mobile rules so
           dark mode does not inherit parchment beige controls or low-contrast
           brown dropdown text on either desktop or phone. */
        html.dark-mode body #daily-tab-panel .daily-source-tabs .daily-source-menu-toggle,
        html.dark-mode body #daily-tab-panel > .daily-source-content:not(.hidden) > .date-toggle-wrapper > .view-toggle-container {
            background: linear-gradient(180deg, #2B303A 0%, #20242C 100%) !important;
            border-color: rgba(174, 184, 204, 0.20) !important;
            color: #F1F5F9 !important;
            -webkit-text-fill-color: #F1F5F9 !important;
            box-shadow:
                0 14px 34px rgba(0, 0, 0, 0.34),
                inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
        }

        html.dark-mode body #daily-tab-panel .daily-source-tabs .daily-source-menu-toggle .topical-section-menu-label,
        html.dark-mode body #daily-tab-panel > .daily-source-content:not(.hidden) > .date-toggle-wrapper > .view-toggle-container,
        html.dark-mode body #daily-tab-panel > .daily-source-content:not(.hidden) > .date-toggle-wrapper > .view-toggle-container .font-control-btn,
        html.dark-mode body #daily-tab-panel > .daily-source-content:not(.hidden) > .date-toggle-wrapper > .view-toggle-container .font-control-btn span,
        html.dark-mode body #daily-tab-panel > .daily-source-content:not(.hidden) > .date-toggle-wrapper > .view-toggle-container .view-toggle-label {
            color: #F1F5F9 !important;
            -webkit-text-fill-color: #F1F5F9 !important;
        }

        html.dark-mode body #daily-tab-panel > .daily-source-content:not(.hidden) > .date-toggle-wrapper > .view-toggle-container .font-control-btn {
            background: rgba(255, 255, 255, 0.10) !important;
            border-color: rgba(255, 255, 255, 0.14) !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
        }

        html.dark-mode body #daily-tab-panel .daily-source-tabs .topical-section-menu {
            background: #1F232B !important;
            border-color: rgba(174, 184, 204, 0.20) !important;
            box-shadow:
                0 22px 52px rgba(0, 0, 0, 0.48),
                inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
        }

        html.dark-mode body #daily-tab-panel .daily-source-tabs .topical-section-menu::before,
        html.dark-mode body #daily-tab-panel .daily-source-tabs .topical-section-menu::after {
            opacity: 0 !important;
            display: none !important;
        }

        html.dark-mode body #daily-tab-panel .daily-source-tabs .topical-section-tab {
            background: transparent !important;
            border-color: rgba(255, 255, 255, 0.08) !important;
            color: #DDE6F3 !important;
            -webkit-text-fill-color: #DDE6F3 !important;
            text-shadow: none !important;
        }

        html.dark-mode body #daily-tab-panel .daily-source-tabs .topical-section-tab:hover {
            background: rgba(96, 165, 250, 0.14) !important;
            color: #FFFFFF !important;
            -webkit-text-fill-color: #FFFFFF !important;
        }

        html.dark-mode body #daily-tab-panel .daily-source-tabs .topical-section-tab.active {
            background: linear-gradient(180deg, #3B82F6 0%, #2563EB 100%) !important;
            color: #FFFFFF !important;
            -webkit-text-fill-color: #FFFFFF !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.18),
                0 10px 22px rgba(37, 99, 235, 0.24) !important;
        }

        html.dark-mode body #daily-tab-panel .daily-source-tabs .topical-section-tab.active::after {
            color: #FFFFFF !important;
            -webkit-text-fill-color: #FFFFFF !important;
            opacity: 0.92 !important;
        }

        @media (max-width: 768px) {
            #topical-tab-panel #topical-section-tabs,
            #daily-tab-panel .daily-source-tabs {
                justify-self: start !important;
                align-self: start !important;
                margin-left: 16px !important;
                margin-right: auto !important;
                text-align: left !important;
            }

            #topical-tab-panel #topical-section-tabs .topical-section-menu-toggle,
            #daily-tab-panel .daily-source-tabs .daily-source-menu-toggle {
                justify-self: start !important;
                margin-left: 0 !important;
                margin-right: auto !important;
                text-align: left !important;
            }

            html.dark-mode body #topical-tab-panel #topical-section-tabs .topical-section-menu-toggle {
                background: linear-gradient(180deg, #2B303A 0%, #20242C 100%) !important;
                border-color: rgba(174, 184, 204, 0.20) !important;
                color: #F1F5F9 !important;
                -webkit-text-fill-color: #F1F5F9 !important;
                box-shadow:
                    0 14px 34px rgba(0, 0, 0, 0.34),
                    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
            }

            html.dark-mode body #topical-tab-panel #topical-section-tabs .topical-section-menu-label {
                color: #F1F5F9 !important;
                -webkit-text-fill-color: #F1F5F9 !important;
            }

            html.dark-mode body #topical-tab-panel #topical-section-tabs .topical-section-menu-icon {
                background: rgba(96, 165, 250, 0.14) !important;
                color: #DDE6F3 !important;
            }

            html.dark-mode body #topical-tab-panel #topical-section-tabs .topical-section-menu-icon span {
                background: currentColor !important;
            }

            html.dark-mode body #topical-tab-panel #topical-section-tabs .topical-section-menu {
                background: #1F232B !important;
                border-color: rgba(174, 184, 204, 0.20) !important;
                box-shadow:
                    0 22px 52px rgba(0, 0, 0, 0.48),
                    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
            }

            html.dark-mode body #topical-tab-panel #topical-section-tabs .topical-section-tab {
                color: #DDE6F3 !important;
                -webkit-text-fill-color: #DDE6F3 !important;
            }

            html.dark-mode body #topical-tab-panel #topical-section-tabs .topical-section-tab.active {
                background: linear-gradient(180deg, #3B82F6 0%, #2563EB 100%) !important;
                color: #FFFFFF !important;
                -webkit-text-fill-color: #FFFFFF !important;
            }

            html.dark-mode body #daily-tab-panel .daily-source-tabs .daily-source-menu-toggle {
                background: linear-gradient(180deg, #2B303A 0%, #20242C 100%) !important;
                border-color: rgba(174, 184, 204, 0.20) !important;
            }

            html.dark-mode body #daily-tab-panel .daily-source-tabs .daily-source-menu-toggle .topical-section-menu-icon {
                background: rgba(96, 165, 250, 0.14) !important;
                color: #DDE6F3 !important;
            }

            html.dark-mode body #daily-tab-panel .daily-source-tabs .daily-source-menu-toggle .topical-section-menu-icon span {
                background: currentColor !important;
            }

            html.dark-mode body #daily-tab-panel .daily-source-tabs .topical-section-menu {
                background: #1F232B !important;
                border-color: rgba(174, 184, 204, 0.20) !important;
            }
        }

        /* Premium tab palette aligned with the refreshed blue/gold banner. */
        html body .devotion-tabs {
            background:
                radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.92), transparent 54%),
                linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(247, 241, 228, 0.72)) !important;
            border: 1px solid rgba(214, 184, 126, 0.36) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.94),
                0 18px 42px rgba(19, 37, 89, 0.12),
                0 28px 68px rgba(105, 78, 36, 0.10) !important;
        }

        html body .devotion-tab-btn {
            color: rgba(71, 60, 48, 0.74) !important;
            -webkit-text-fill-color: rgba(71, 60, 48, 0.74) !important;
            border: 1px solid rgba(214, 184, 126, 0.18) !important;
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(247, 241, 228, 0.48)) !important;
            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.76) !important;
        }

        html body .devotion-tab-btn:hover:not(.active) {
            color: #173B86 !important;
            -webkit-text-fill-color: #173B86 !important;
            border-color: rgba(212, 175, 55, 0.30) !important;
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(245, 238, 221, 0.78)) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.95),
                0 10px 24px rgba(26, 58, 128, 0.10) !important;
        }

        html body .devotion-tab-btn.active {
            color: #FFF7DF !important;
            -webkit-text-fill-color: #FFF7DF !important;
            border-color: rgba(244, 215, 130, 0.48) !important;
            background:
                radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.22), transparent 42%),
                linear-gradient(180deg, #355ECE 0%, #2146A5 50%, #123173 100%) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.30),
                inset 0 -1px 0 rgba(244, 215, 130, 0.20),
                0 14px 32px rgba(31, 66, 159, 0.30),
                0 26px 58px rgba(12, 35, 91, 0.22) !important;
            text-shadow: 0 2px 12px rgba(0, 0, 0, 0.32) !important;
        }

        html body .devotion-tab-btn.active::after,
        html body .topical-section-tab.active::after {
            background: linear-gradient(90deg, transparent, rgba(255, 241, 193, 0.95), transparent) !important;
            box-shadow: 0 0 12px rgba(244, 215, 130, 0.42) !important;
        }

        html body .topical-section-tabs,
        html body .daily-source-tabs {
            background:
                radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.92), transparent 56%),
                linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(247, 241, 228, 0.68)) !important;
            border: 1px solid rgba(214, 184, 126, 0.32) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.90),
                0 18px 42px rgba(19, 37, 89, 0.10),
                0 30px 62px rgba(105, 78, 36, 0.08) !important;
        }

        html body .topical-section-tab {
            color: rgba(58, 52, 45, 0.86) !important;
            -webkit-text-fill-color: rgba(58, 52, 45, 0.86) !important;
            border: 1px solid rgba(214, 184, 126, 0.16) !important;
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(248, 242, 230, 0.52)) !important;
            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) !important;
        }

        html body .topical-section-tab:hover:not(.active) {
            color: #173B86 !important;
            -webkit-text-fill-color: #173B86 !important;
            border-color: rgba(212, 175, 55, 0.28) !important;
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(245, 238, 221, 0.76)) !important;
        }

        html body .topical-section-tab.active {
            color: #FFF7DF !important;
            -webkit-text-fill-color: #FFF7DF !important;
            border-color: rgba(244, 215, 130, 0.48) !important;
            background:
                radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.22), transparent 42%),
                linear-gradient(180deg, #3B63D8 0%, #244BB2 52%, #153477 100%) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.30),
                inset 0 -1px 0 rgba(244, 215, 130, 0.20),
                0 12px 28px rgba(31, 66, 159, 0.28),
                0 24px 54px rgba(12, 35, 91, 0.20) !important;
            text-shadow: 0 2px 12px rgba(0, 0, 0, 0.32) !important;
        }

        /* Premium Cinematic Visuals Dashboard Styles */
        .visuals-dashboard {
            width: 100%;
            max-width: 1600px;
            margin: 0 auto;
            background: radial-gradient(circle at 50% 0%, #10284B 0%, #0B1E3A 45%, #061327 100%);
            border: 1px solid rgba(212, 175, 55, 0.22);
            border-radius: 28px;
            padding: 48px 32px 28px;
            color: #FFF9EC;
            box-shadow: 
                0 30px 80px rgba(0, 0, 0, 0.65),
                inset 0 0 100px rgba(0, 0, 0, 0.8),
                inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
            overflow-x: auto;
            overflow-y: hidden;
            overflow-y: clip;
            position: relative;
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            min-height: 0;
        }

        /* Ambient floating particles & texture overlay */
        .visuals-dashboard::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background-image: 
                linear-gradient(rgba(212, 175, 55, 0.012) 1px, transparent 1px),
                linear-gradient(90deg, rgba(212, 175, 55, 0.012) 1px, transparent 1px);
            background-size: 40px 40px;
            pointer-events: none;
            z-index: 1;
            opacity: 0.75;
            border-radius: 28px;
        }

        /* Volumetric golden light rays */
        .v-light-rays {
            position: absolute;
            top: -100px;
            left: 50%;
            transform: translateX(-50%);
            width: 600px;
            height: 350px;
            background: radial-gradient(circle, rgba(212, 175, 55, 0.16) 0%, rgba(212, 175, 55, 0) 70%);
            filter: blur(35px);
            pointer-events: none;
            z-index: 0;
            animation: vBreatheRay 8s infinite ease-in-out;
        }

        @keyframes vBreatheRay {
            0%, 100% { opacity: 0.8; transform: translateX(-50%) scale(1); }
            50% { opacity: 1; transform: translateX(-50%) scale(1.1); }
        }

        /* Floating particles */
        .v-particle {
            position: absolute;
            width: 2.5px;
            height: 2.5px;
            background: radial-gradient(circle, #fff 10%, #d4af37 100%);
            border-radius: 50%;
            pointer-events: none;
            z-index: 2;
            box-shadow: 0 0 8px rgba(212, 175, 55, 0.8), 0 0 2px rgba(255, 255, 255, 0.9);
            animation: vFloatParticle 15s infinite linear;
        }

        @keyframes vFloatParticle {
            0% {
                transform: translateY(150px) translateX(0) scale(0.5);
                opacity: 0;
            }
            10% { opacity: 0.8; }
            50% {
                transform: translateY(-200px) translateX(-20px) scale(1);
                opacity: 0.9;
            }
            90% { opacity: 0.8; }
            100% {
                transform: translateY(-600px) translateX(30px) scale(0.7);
                opacity: 0;
            }
        }

        /* Customize horizontal scrollbar */
        .visuals-dashboard::-webkit-scrollbar {
            height: 8px;
        }
        .visuals-dashboard::-webkit-scrollbar-track {
            background: rgba(6, 19, 39, 0.4);
            border-radius: 10px;
        }
        .visuals-dashboard::-webkit-scrollbar-thumb {
            background: rgba(212, 175, 55, 0.25);
            border-radius: 10px;
            border: 2px solid #061327;
        }
        .visuals-dashboard::-webkit-scrollbar-thumb:hover {
            background: rgba(212, 175, 55, 0.65);
        }

        body[data-visual-section="07"] .visuals-dashboard {
            overflow: visible !important;
            padding-top: 10px;
            padding-bottom: 10px;
        }

        body[data-visual-section="07"] .v-deck-container {
            overflow: visible !important;
        }

        body[data-visual-section="07"] .v-slides-viewport {
            height: auto !important;
            overflow: visible !important;
            transition: none;
        }

        body[data-visual-section="07"] .visuals-dashboard {
            overflow: visible !important;
            padding-top: 0;
            padding-bottom: 10px;
        }

        body[data-visual-section="07"] .v-deck-container {
            overflow: visible !important;
        }

        body[data-visual-section="07"] .v-slides-viewport {
            height: auto !important;
            min-height: 0 !important;
            overflow: visible !important;
            transition: none;
        }

        /* Eliminate any top dead-space above the Architecture slide content */
        body[data-visual-section="07"] .v-slide.v-architecture-slide {
            padding-top: 0 !important;
            margin-top: 0 !important;
        }
        body[data-visual-section="07"] .v-architecture-slide .v-section-header-wrap {
            margin-top: 0 !important;
        }
        body[data-visual-section="07"] .v-architecture-intro {
            margin-top: 6px !important;
        }
        body[data-visual-section="07"] .v-architecture-flow {
            margin-top: 0 !important;
        }
        body[data-visual-section="07"] #v-architecture-flow .v-synthesis-loading {
            min-height: 200px;
            padding: 32px 0;
        }

        /* Cinematic Hero Title */
        .v-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(212, 175, 55, 0.2);
            padding-bottom: 28px;
            margin-bottom: 40px;
            min-width: 1200px;
            position: relative;
            z-index: 2;
        }

        .v-header-left {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .v-logo {
            color: #d4af37;
            width: 46px;
            height: 46px;
            filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.45));
        }

        .v-brand-text h4 {
            margin: 0;
            font-size: 13px;
            color: #c9a46b;
            font-family: 'Cinzel', serif;
            letter-spacing: 0.2em;
        }

        .v-brand-text p {
            margin: 4px 0 0 0;
            font-size: 11px;
            color: rgba(255, 255, 255, 0.5);
            letter-spacing: 0.1em;
        }

        .v-header-center {
            text-align: center;
        }

        .v-title {
            margin: 0;
            font-size: 2.8rem;
            font-weight: 800;
            font-family: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
            letter-spacing: 0.12em;
            background: linear-gradient(135deg, #FFF9EC 10%, #F4E7C1 50%, #D4AF37 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 4px 24px rgba(212, 175, 55, 0.25);
            text-transform: uppercase;
        }

        .v-subtitle {
            margin: 8px 0 0 0;
            font-size: 1.15rem;
            color: #F4E7C1;
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-style: italic;
            letter-spacing: 0.16em;
            opacity: 0.85;
        }

        .v-header-right {
            background: rgba(212, 175, 55, 0.04);
            border: 1px solid rgba(212, 175, 55, 0.18);
            padding: 14px 20px;
            border-radius: 14px;
            max-width: 320px;
            box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
        }

        .v-quote-text {
            margin: 0;
            font-size: 12px;
            font-style: italic;
            color: #FFF9EC;
            line-height: 1.45;
            text-align: right;
            font-family: 'Cormorant Garamond', Georgia, serif;
        }

        .v-quote-ref {
            margin: 6px 0 0 0;
            font-size: 10px;
            color: #d4af37;
            text-align: right;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        /* Slide Section Titles */
        .v-section-title-block {
            text-align: center;
            margin-bottom: 36px;
            border-bottom: 1px dashed rgba(212, 175, 55, 0.2);
            padding-bottom: 20px;
        }

        .v-section-num {
            font-family: 'Cinzel', serif;
            font-size: 12px;
            font-weight: 700;
            color: #d4af37;
            letter-spacing: 0.25em;
            text-transform: uppercase;
            display: block;
            margin-bottom: 8px;
        }

        .v-section-title {
            margin: 0;
            font-size: 1.8rem;
            font-weight: 700;
            font-family: 'Cinzel', serif;
            letter-spacing: 0.1em;
            color: #FFF9EC;
            text-transform: uppercase;
            text-shadow: 0 2px 10px rgba(0,0,0,0.5);
        }

        .v-section-subtitle {
            margin: 6px 0 0 0;
            font-size: 11px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.55);
            letter-spacing: 0.08em;
            text-transform: uppercase;
            display: block;
        }

        /* -------------------------------------------------------------------------
           12-COLUMN SACRED REVELATION PILLARS GRID
           ------------------------------------------------------------------------- */
        .v-grid-table {
            display: grid;
            grid-template-columns: 160px repeat(12, 320px);
            gap: 24px 20px;
            align-items: stretch;
            min-width: 1200px;
            position: relative;
            z-index: 2;
            padding: 24px 10px 48px 10px;
            background-image: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.15) 15%, rgba(212, 175, 55, 0.15) 85%, transparent);
            background-position: 0 115px;
            background-size: 100% 1px;
            background-repeat: no-repeat;
        }

        /* Pillar group display contents (retains grid behavior for children on desktop) */
        .v-pillar-group {
            display: contents;
        }

        /* Luxury Side Label Cells */
        .v-row-label-cell {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-right: 20px;
            text-align: right;
            font-size: 11px;
            font-weight: 700;
            color: #c9a46b;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            line-height: 1.4;
            border-right: 1px solid rgba(212, 175, 55, 0.2);
            position: relative;
        }

        .v-row-label-cell svg {
            width: 16px;
            height: 16px;
            margin-left: 8px;
            color: #d4af37;
            order: 2; /* place icon to the right of text */
        }

        .v-row-label-cell span {
            order: 1;
        }

        .v-row-label-cell::after {
            content: '';
            position: absolute;
            right: -1px;
            top: 25%;
            height: 50%;
            width: 1px;
            background: linear-gradient(180deg, transparent, #d4af37, transparent);
        }

        .v-grid-row-headers .v-row-label-cell {
            border-right: none;
        }
        .v-grid-row-headers .v-row-label-cell::after {
            display: none;
        }

        /* Grid Background Pillar Decorator Card */
        .v-pillar-bg {
            grid-row: 1 / -1;
            background: linear-gradient(180deg, rgba(11, 30, 58, 0.94) 0%, rgba(6, 19, 39, 0.96) 100%);
            border: 1px solid rgba(212, 175, 55, 0.2);
            border-radius: 24px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.55);
            pointer-events: none;
            z-index: -1;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* Column Connective Progression Arrow */
        .v-pillar-arrow {
            grid-row: 1;
            align-self: center;
            justify-self: center;
            color: rgba(212, 175, 55, 0.45);
            font-size: 20px;
            font-weight: 700;
            pointer-events: none;
            z-index: 5;
            text-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
            animation: vArrowFloat 2.5s infinite ease-in-out;
            margin-left: -10px;
            margin-right: -10px;
        }

        @keyframes vArrowFloat {
            0%, 100% { transform: translateX(-3px); opacity: 0.6; }
            50% { transform: translateX(3px); opacity: 1; }
        }

        /* Grid Header Cards (Pillar top labels) */
        .v-header-card {
            background: linear-gradient(180deg, #10284B 0%, #0B1E3A 100%);
            border: 1px solid rgba(212, 175, 55, 0.35);
            border-radius: 16px;
            padding: 16px 8px;
            text-align: center;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.35);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 2;
        }

        .v-header-num {
            display: inline-block;
            background: rgba(212, 175, 55, 0.15);
            color: #d4af37;
            font-family: 'Cinzel', serif;
            font-size: 13px;
            font-weight: 800;
            width: 26px;
            height: 26px;
            line-height: 24px;
            border-radius: 50%;
            border: 1px solid rgba(212, 175, 55, 0.45);
            margin-bottom: 8px;
            box-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
        }

        .v-header-name {
            margin: 0;
            font-size: 11px;
            font-weight: 700;
            color: #FFF9EC;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            line-height: 1.35;
            font-family: 'Cinzel', serif;
        }

        /* Generic Attribute, Character, Name, Action, Jesus cards */
        .v-card {
            background: rgba(22, 29, 49, 0.2);
            border: 1px solid rgba(212, 175, 55, 0.08);
            border-radius: 12px;
            padding: 12px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 80px;
            z-index: 2;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .v-card-icon {
            width: 24px;
            height: 24px;
            color: #d4af37;
            margin-bottom: 6px;
            filter: drop-shadow(0 3px 6px rgba(212, 175, 55, 0.25));
            transition: transform 0.4s ease;
        }

        .v-card-icon-container {
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(212, 175, 55, 0.05);
            border: 1px solid rgba(212, 175, 55, 0.2);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-bottom: 8px;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
            transition: all 0.3s ease;
        }

        .v-card:hover .v-card-icon-container {
            background: rgba(212, 175, 55, 0.15);
            border-color: rgba(212, 175, 55, 0.5);
            box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
        }

        .v-card:hover .v-card-icon {
            transform: translateY(-2px) scale(1.1);
        }

        .v-card-text {
            font-size: 11px;
            font-weight: 600;
            color: #f1f5f9;
            margin: 0;
            line-height: 1.4;
            letter-spacing: 0.02em;
        }

        /* Name and Description Cells */
        .v-name-title {
            font-size: 13px;
            font-weight: 700;
            color: #FFF9EC;
            margin: 0;
            font-family: 'Cinzel', serif;
            letter-spacing: 0.05em;
        }

        .v-name-desc {
            font-size: 10px;
            color: rgba(255, 249, 236, 0.6);
            margin: 4px 0 0 0;
            line-height: 1.3;
        }

        /* Luxury scripture capsules */
        .v-scripture-link {
            font-size: 9px;
            font-weight: 700;
            color: #F4E7C1;
            text-decoration: none !important;
            margin-top: 8px;
            display: inline-block;
            background: linear-gradient(135deg, rgba(7, 19, 37, 0.9) 0%, rgba(3, 8, 16, 0.95) 100%);
            padding: 4px 12px;
            border-radius: 20px;
            border: 1px solid rgba(212, 175, 55, 0.3);
            box-shadow: 
                0 2px 5px rgba(0, 0, 0, 0.4),
                inset 0 1px 3px rgba(0, 0, 0, 0.6),
                inset 0 -1px 0 rgba(255, 255, 255, 0.05);
            letter-spacing: 0.08em;
            text-transform: uppercase;
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
            position: relative;
            overflow: hidden;
        }

        .v-scripture-link:hover {
            color: #FFF9EC;
            border-color: rgba(212, 175, 55, 0.95);
            background: linear-gradient(135deg, rgba(16, 40, 75, 0.95) 0%, rgba(11, 30, 58, 0.95) 100%);
            box-shadow: 
                0 0 15px rgba(212, 175, 55, 0.45),
                inset 0 1px 1px rgba(255, 255, 255, 0.15),
                0 2px 8px rgba(0, 0, 0, 0.5);
            transform: translateY(-1px) scale(1.05);
            animation: vGlowPulse 1.5s infinite alternate;
        }

        @keyframes vGlowPulse {
            0% { box-shadow: 0 0 10px rgba(212, 175, 55, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.1); }
            100% { box-shadow: 0 0 20px rgba(212, 175, 55, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.2); }
        }

        /* Mobile labels (hidden by default on desktop) */
        .v-mobile-label {
            display: none;
        }

        /* Key Scripture verse display with quote text */
        .v-key-scripture-card {
            min-height: 100px;
        }

        .v-quote {
            font-size: 11px;
            font-style: italic;
            color: rgba(255, 249, 236, 0.85);
            margin: 6px 0 0 0;
            line-height: 1.45;
            text-align: center;
            font-family: 'Cormorant Garamond', Georgia, serif;
        }

        /* Theme / Meaning description cell with parchment glow */
        .v-theme-card {
            background: rgba(16, 28, 49, 0.4);
            border-color: rgba(212, 175, 55, 0.18);
            min-height: 120px;
            padding: 12px;
        }

        .v-theme-text {
            font-size: 11px;
            color: #cbd5e1;
            line-height: 1.5;
            text-align: center;
            margin: 0;
        }

        /* Group Hover Effects for Desktop */
        .v-pillar-group:hover .v-pillar-bg {
            background: linear-gradient(180deg, rgba(16, 38, 72, 0.98) 0%, rgba(8, 25, 50, 0.99) 100%);
            border-color: rgba(212, 175, 55, 0.55);
            box-shadow: 
                0 22px 55px rgba(0, 0, 0, 0.7),
                0 0 25px rgba(212, 175, 55, 0.2);
            transform: translateY(-6px);
        }

        .v-pillar-group:hover .v-card {
            border-color: rgba(212, 175, 55, 0.22);
            background: rgba(22, 29, 49, 0.35);
        }

        .v-pillar-group:hover .v-header-card {
            border-color: rgba(212, 175, 55, 0.6);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
        }

        /* -------------------------------------------------------------------------
           SECTION 5: Fruit of the Spirit (Sacred garden aesthetic)
           ------------------------------------------------------------------------- */
        .v-garden-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 28px;
            position: relative;
            background:
                radial-gradient(circle at 18% 18%, rgba(244, 231, 193, 0.06) 0%, transparent 26%),
                radial-gradient(circle at 72% 10%, rgba(20, 184, 166, 0.12) 0%, transparent 34%),
                radial-gradient(circle at 50% 8%, rgba(91, 158, 128, 0.22) 0%, transparent 40%),
                radial-gradient(circle at 12% 62%, rgba(212, 175, 55, 0.1) 0%, transparent 30%),
                linear-gradient(180deg, rgba(7, 35, 48, 0.66) 0%, rgba(4, 18, 31, 0.35) 100%);
            padding: 28px 28px 30px;
            width: 100%;
            box-sizing: border-box;
            border: 1px solid rgba(212, 175, 55, 0.22);
            border-radius: 28px;
            overflow: hidden;
            isolation: isolate;
            transition: filter 0.5s ease;
            box-shadow:
                inset 0 1px 0 rgba(255, 249, 236, 0.08),
                inset 0 0 90px rgba(20, 184, 166, 0.055),
                0 0 70px rgba(10, 28, 48, 0.55);
        }

        .v-garden-container::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
                radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.1) 0 1px, transparent 2px),
                radial-gradient(circle at 20% 30%, rgba(244, 231, 193, 0.55) 0 1px, transparent 2px),
                radial-gradient(circle at 76% 62%, rgba(20, 184, 166, 0.42) 0 1px, transparent 2px);
            background-size: 72px 72px, 72px 72px, 120px 120px, 180px 180px, 210px 210px;
            opacity: 0.68;
            pointer-events: none;
            z-index: -2;
        }

        .v-garden-container::after {
            content: '';
            position: absolute;
            inset: -18%;
            background:
                linear-gradient(112deg, transparent 8%, rgba(244, 231, 193, 0.045) 24%, transparent 42%),
                radial-gradient(ellipse at 34% 40%, rgba(255, 249, 236, 0.055), transparent 36%),
                radial-gradient(ellipse at 78% 72%, rgba(212, 175, 55, 0.055), transparent 34%);
            filter: blur(18px);
            opacity: 0.78;
            pointer-events: none;
            z-index: -1;
            animation: vGardenAmbientDrift 18s ease-in-out infinite alternate;
        }

        @keyframes vGardenAmbientDrift {
            0% { transform: translate3d(-1.5%, -1%, 0) scale(1); opacity: 0.62; }
            100% { transform: translate3d(1.5%, 1%, 0) scale(1.03); opacity: 0.86; }
        }

        .v-garden-atmosphere,
        .v-garden-atmosphere span {
            position: absolute;
            pointer-events: none;
        }

        .v-garden-atmosphere {
            inset: 0;
            z-index: -1;
            overflow: hidden;
        }

        .v-garden-ray {
            width: 1px;
            height: 580px;
            top: -150px;
            background: linear-gradient(180deg, rgba(244, 231, 193, 0.18), transparent);
            transform-origin: top;
            opacity: 0.45;
            filter: blur(0.5px);
        }

        .v-ray-one {
            left: 24%;
            transform: rotate(16deg);
        }

        .v-ray-two {
            right: 24%;
            transform: rotate(-18deg);
        }

        .v-garden-bloom {
            width: 230px;
            height: 230px;
            border-radius: 999px;
            background: radial-gradient(circle, rgba(116, 168, 111, 0.18), transparent 68%);
            animation: vGardenPulse 10s ease-in-out infinite;
        }

        .v-bloom-one {
            left: 5%;
            bottom: 8%;
        }

        .v-bloom-two {
            right: 8%;
            top: 20%;
            animation-delay: -4s;
        }

        .v-garden-vine {
            width: 420px;
            height: 170px;
            border: 1px solid rgba(116, 168, 111, 0.14);
            border-left: 0;
            border-bottom: 0;
            border-radius: 50%;
            opacity: 0.65;
        }

        .v-vine-one {
            top: 34px;
            left: 12%;
            transform: rotate(-8deg);
        }

        .v-vine-two {
            right: 10%;
            bottom: 120px;
            transform: rotate(182deg);
        }

        @keyframes vGardenPulse {
            0%, 100% { transform: scale(0.92); opacity: 0.55; }
            50% { transform: scale(1.12); opacity: 0.95; }
        }

        .v-garden-hero {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 12px;
            max-width: 860px;
            position: relative;
            z-index: 2;
        }

        .v-garden-tree-orb {
            width: 190px;
            height: 170px;
            display: grid;
            place-items: center;
            border-radius: 999px;
            background: radial-gradient(circle, rgba(16, 185, 129, 0.16), transparent 64%);
            filter: drop-shadow(0 0 22px rgba(16, 185, 129, 0.32));
        }

        .v-garden-tree-svg {
            width: 150px;
            height: 130px;
            color: #10b981;
            filter: drop-shadow(0 0 15px rgba(16, 185, 129, 0.4));
            animation: vTreeFloat 6s infinite ease-in-out;
        }

        @keyframes vTreeFloat {
            0%, 100% { transform: translateY(0) rotate(-1deg); }
            50% { transform: translateY(-4px) rotate(1deg); }
        }

        .v-garden-scripture {
            margin: 0;
            color: #e6edf5;
            font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
            font-size: 18px;
            line-height: 1.55;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
        }

        .v-garden-verse-chip {
            display: inline-flex;
            border: 1px solid rgba(212, 175, 55, 0.34);
            border-radius: 999px;
            padding: 6px 16px;
            background: rgba(6, 19, 39, 0.64);
            box-shadow: 0 0 18px rgba(212, 175, 55, 0.08);
        }

        .v-garden-verse-chip a {
            color: #d4af37 !important;
            font-family: 'Cinzel', serif;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-decoration: none !important;
        }

        .v-fruit-journey {
            display: grid;
            grid-template-columns: minmax(430px, 1.22fr) minmax(330px, 0.78fr);
            gap: 28px;
            width: 100%;
            max-width: 1180px;
            align-items: stretch;
            position: relative;
            z-index: 2;
        }

        .v-fruits-stack {
            display: flex;
            flex-direction: column;
            padding: 0;
            position: relative;
            grid-column: 2;
            grid-row: 1;
        }

        .v-fruit-reveal-stage {
            grid-column: 1;
            grid-row: 1;
        }

        .v-fruit-card-pillar {
            width: 100%;
            min-height: 108px;
            border: 1px solid color-mix(in srgb, var(--fruit-tone) 46%, rgba(244, 231, 193, 0.18));
            border-radius: 20px;
            padding: 18px 18px 18px 20px;
            background:
                linear-gradient(135deg, color-mix(in srgb, var(--fruit-tone) 16%, rgba(11, 28, 47, 0.88)) 0%, rgba(5, 16, 28, 0.88) 78%),
                radial-gradient(circle at 16% 4%, var(--fruit-glow), transparent 56%),
                radial-gradient(circle at 86% 20%, rgba(244, 231, 193, 0.08), transparent 30%);
            box-shadow:
                0 18px 44px rgba(0, 0, 0, 0.46),
                inset 0 1px 0 rgba(255, 255, 255, 0.045),
                0 0 26px color-mix(in srgb, var(--fruit-tone) 22%, transparent);
            backdrop-filter: blur(18px) saturate(1.08);
            -webkit-backdrop-filter: blur(18px) saturate(1.08);
            transition: opacity 0.45s ease, filter 0.45s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.45s ease, box-shadow 0.45s ease, background 0.45s ease;
            display: grid;
            grid-template-columns: 34px 52px minmax(0, 1fr);
            gap: 14px;
            align-items: center;
            position: relative;
            cursor: pointer;
            color: #fff9ec;
            text-align: left;
            appearance: none;
            font: inherit;
            margin-top: var(--fruit-overlap);
            transform: translateY(var(--fruit-y)) scale(var(--fruit-scale));
            z-index: var(--fruit-z);
        }

        .v-fruit-card-pillar::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                linear-gradient(90deg, color-mix(in srgb, var(--fruit-tone) 20%, transparent), transparent 42%),
                linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.07) 35%, transparent 64%),
                radial-gradient(circle at 84% 18%, rgba(255, 255, 255, 0.08), transparent 30%);
            border-radius: inherit;
            pointer-events: none;
            opacity: 0.62;
        }

        .v-fruit-card-pillar::after {
            content: '';
            position: absolute;
            inset: 1px;
            border-radius: inherit;
            background-image:
                radial-gradient(circle at 22% 26%, rgba(244, 231, 193, 0.34) 0 1px, transparent 2px),
                radial-gradient(circle at 78% 68%, color-mix(in srgb, var(--fruit-tone) 38%, transparent) 0 1px, transparent 2px);
            background-size: 96px 96px, 128px 128px;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.45s ease;
        }

        .v-fruits-stack.has-active .v-fruit-card-pillar:not(.active) {
            opacity: 0.68;
            filter: saturate(0.82) brightness(0.78);
        }

        .v-fruit-card-pillar:hover {
            border-color: color-mix(in srgb, var(--fruit-tone) 75%, #f4e7c1);
            box-shadow:
                0 22px 52px rgba(0, 0, 0, 0.56),
                inset 0 1px 0 rgba(255, 255, 255, 0.07),
                0 0 34px var(--fruit-glow);
            transform: translateX(8px) translateY(calc(var(--fruit-y) - 3px)) scale(1.015);
        }

        .v-fruit-card-pillar.active {
            opacity: 1;
            border-color: color-mix(in srgb, var(--fruit-tone) 86%, #f4e7c1);
            background:
                radial-gradient(circle at 14% 10%, color-mix(in srgb, var(--fruit-tone) 40%, rgba(244, 231, 193, 0.18)) 0%, transparent 46%),
                radial-gradient(circle at 86% 18%, rgba(244, 231, 193, 0.12), transparent 34%),
                linear-gradient(135deg, color-mix(in srgb, var(--fruit-tone) 22%, rgba(13, 34, 55, 0.92)) 0%, rgba(5, 16, 28, 0.94) 78%);
            box-shadow:
                0 26px 58px rgba(0, 0, 0, 0.62),
                inset 0 1px 0 rgba(255, 255, 255, 0.1),
                inset 0 0 28px color-mix(in srgb, var(--fruit-tone) 18%, transparent),
                0 0 42px var(--fruit-glow),
                0 0 76px color-mix(in srgb, var(--fruit-tone) 22%, transparent);
            transform: translateX(18px) translateY(calc(var(--fruit-y) - 6px)) scale(1.03);
            animation: vFruitChapterPulse 4.8s ease-in-out infinite;
        }

        .v-fruit-card-pillar:hover::after,
        .v-fruit-card-pillar.active::after {
            opacity: 0.52;
        }

        @keyframes vFruitChapterPulse {
            0%, 100% { box-shadow: 0 26px 58px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 28px color-mix(in srgb, var(--fruit-tone) 18%, transparent), 0 0 42px var(--fruit-glow), 0 0 76px color-mix(in srgb, var(--fruit-tone) 22%, transparent); }
            50% { box-shadow: 0 30px 66px rgba(0, 0, 0, 0.68), inset 0 1px 0 rgba(255, 255, 255, 0.13), inset 0 0 34px color-mix(in srgb, var(--fruit-tone) 24%, transparent), 0 0 52px var(--fruit-glow), 0 0 92px color-mix(in srgb, var(--fruit-tone) 28%, transparent); }
        }

        .v-fruit-node-number {
            font-family: 'Cinzel', serif;
            font-size: 11px;
            font-weight: 800;
            color: color-mix(in srgb, var(--fruit-tone) 75%, #f4e7c1);
            letter-spacing: 0.08em;
            position: relative;
            z-index: 1;
        }

        .v-fruit-header-icon-badge {
            width: 46px;
            height: 46px;
            border-radius: 999px;
            background:
                radial-gradient(circle, color-mix(in srgb, var(--fruit-tone) 18%, rgba(255, 249, 236, 0.08)) 0%, rgba(255, 255, 255, 0.035) 72%);
            border: 1px solid color-mix(in srgb, var(--fruit-tone) 58%, rgba(255, 255, 255, 0.12));
            display: flex;
            align-items: center;
            justify-content: center;
            color: color-mix(in srgb, var(--fruit-tone) 65%, #fff9ec);
            box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.045), 0 0 20px var(--fruit-glow);
            position: relative;
            z-index: 1;
        }

        .v-fruit-card-copy {
            display: flex;
            flex-direction: column;
            gap: 7px;
            min-width: 0;
            position: relative;
            z-index: 1;
        }

        .v-fruit-header-title {
            margin: 0;
            font-size: 18px;
            font-weight: 800;
            color: #ffffff;
            font-family: 'Cinzel', serif;
            letter-spacing: 0;
            line-height: 1.1;
        }

        .v-fruit-essence {
            font-size: 12px;
            line-height: 1.35;
            color: rgba(230, 237, 245, 0.84);
        }

        .v-fruit-scripture-chip {
            display: none;
        }

        .v-fruit-reveal-stage {
            position: relative;
            top: auto;
            display: flex;
            min-height: 0;
            height: 100%;
            align-self: stretch;
            perspective: 1400px;
        }

        .v-fruit-reveal-stage::before {
            content: '';
            position: absolute;
            left: -16px;
            top: 34px;
            bottom: 34px;
            width: 3px;
            border-radius: 999px;
            background: linear-gradient(180deg, transparent, rgba(212, 175, 55, 0.86), rgba(244, 231, 193, 0.48), transparent);
            box-shadow:
                0 0 18px rgba(212, 175, 55, 0.38),
                0 0 44px rgba(20, 184, 166, 0.18);
            z-index: 3;
            pointer-events: none;
        }

        .v-fruit-reveal-panel {
            display: none;
            position: relative;
            min-height: 540px;
            border: 1.5px solid color-mix(in srgb, var(--fruit-tone) 58%, rgba(244, 231, 193, 0.26));
            border-radius: 30px;
            padding: 38px;
            overflow: hidden;
            background:
                radial-gradient(circle at 12% 0%, var(--fruit-glow), transparent 36%),
                radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--fruit-tone) 22%, transparent), transparent 35%),
                radial-gradient(circle at 44% 72%, rgba(244, 231, 193, 0.055), transparent 34%),
                linear-gradient(150deg, rgba(12, 31, 48, 0.84) 0%, rgba(4, 15, 27, 0.94) 82%);
            box-shadow:
                0 34px 88px rgba(0, 0, 0, 0.68),
                inset 0 1px 0 rgba(255, 255, 255, 0.075),
                inset 0 0 82px rgba(255, 249, 236, 0.045),
                0 0 72px color-mix(in srgb, var(--fruit-tone) 28%, transparent),
                0 0 120px rgba(20, 184, 166, 0.08);
            transform-origin: left center;
            backdrop-filter: blur(22px) saturate(1.12);
            -webkit-backdrop-filter: blur(22px) saturate(1.12);
        }

        .v-fruit-reveal-panel.active {
            display: flex;
            flex-direction: column;
            flex: 1;
            min-height: 100%;
            gap: 22px;
            animation: vSacredReveal 0.78s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .v-fruit-reveal-panel::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.055) 38%, transparent 72%),
                radial-gradient(circle at 50% 50%, transparent 0 38%, rgba(212, 175, 55, 0.045) 39%, transparent 41%),
                radial-gradient(circle at 18% 28%, rgba(244, 231, 193, 0.42) 0 1px, transparent 2px),
                radial-gradient(circle at 82% 70%, color-mix(in srgb, var(--fruit-tone) 42%, transparent) 0 1px, transparent 2px);
            background-size: 100% 100%, 120px 120px, 150px 150px, 190px 190px;
            pointer-events: none;
            opacity: 0.82;
        }

        .v-fruit-reveal-panel::after {
            content: '';
            position: absolute;
            inset: -35%;
            background:
                conic-gradient(from 120deg at 50% 50%, transparent 0deg, color-mix(in srgb, var(--fruit-tone) 10%, transparent) 52deg, transparent 110deg, rgba(212, 175, 55, 0.055) 176deg, transparent 260deg);
            opacity: 0.46;
            filter: blur(18px);
            pointer-events: none;
            animation: vRevealChamberAura 16s ease-in-out infinite alternate;
        }

        @keyframes vRevealChamberAura {
            0% { transform: rotate(-2deg) scale(1); opacity: 0.34; }
            100% { transform: rotate(3deg) scale(1.04); opacity: 0.54; }
        }

        @keyframes vSacredReveal {
            0% { opacity: 0; transform: translateX(-28px) rotateY(-8deg) scale(0.96); filter: blur(8px); }
            100% { opacity: 1; transform: translateX(0) rotateY(0) scale(1); filter: blur(0); }
        }

        .v-reveal-ambient-icon {
            position: absolute;
            right: -24px;
            top: 12px;
            width: 190px;
            height: 190px;
            color: color-mix(in srgb, var(--fruit-tone) 48%, #fff9ec);
            opacity: 0.08;
            filter: drop-shadow(0 0 24px var(--fruit-glow));
            pointer-events: none;
        }

        .v-reveal-hero,
        .v-reveal-scripture,
        .v-reveal-map,
        .v-reveal-transform,
        .v-reveal-walk {
            position: relative;
            z-index: 1;
        }

        .v-reveal-hero {
            padding-right: 110px;
        }

        .v-reveal-kicker,
        .v-reveal-transform h4,
        .v-reveal-walk h4 {
            font-family: 'Cinzel', serif;
            text-transform: uppercase;
            letter-spacing: 0.14em;
        }

        .v-reveal-kicker {
            display: block;
            color: color-mix(in srgb, var(--fruit-tone) 72%, #f4e7c1);
            font-size: 10px;
            font-weight: 800;
            margin-bottom: 10px;
            text-shadow: 0 0 12px color-mix(in srgb, var(--fruit-tone) 35%, transparent);
        }

        .v-reveal-title {
            font-family: 'Cinzel', serif;
            font-size: 46px;
            line-height: 1;
            color: #fff9ec;
            margin: 0;
            letter-spacing: 0.03em;
            text-shadow:
                0 0 22px var(--fruit-glow),
                0 2px 18px rgba(0, 0, 0, 0.7);
        }

        .v-reveal-essence {
            color: rgba(230, 237, 245, 0.82);
            font-size: 15px;
            line-height: 1.55;
            margin: 12px 0 0;
            max-width: 520px;
        }

        .v-reveal-scripture {
            margin: 0;
            padding: 26px 30px;
            border-left: 3px solid color-mix(in srgb, var(--fruit-tone) 76%, #d4af37);
            border-radius: 18px;
            background:
                radial-gradient(circle at 16% 0%, rgba(244, 231, 193, 0.12), transparent 42%),
                linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035));
            font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
            color: #fff8ea;
            font-size: 23px;
            line-height: 1.55;
            font-style: italic;
            box-shadow:
                inset 0 0 28px rgba(255, 255, 255, 0.03),
                inset 0 1px 0 rgba(255, 255, 255, 0.07),
                0 16px 36px rgba(0, 0, 0, 0.24),
                0 0 30px color-mix(in srgb, var(--fruit-tone) 22%, transparent),
                -12px 0 34px color-mix(in srgb, var(--fruit-tone) 16%, transparent);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }

        .v-reveal-scripture span {
            display: block;
            margin-top: 14px;
            font-family: 'Cinzel', serif;
            font-size: 10px;
            font-style: normal;
            font-weight: 800;
            letter-spacing: 0.12em;
        }

        .v-reveal-scripture a {
            color: color-mix(in srgb, var(--fruit-tone) 65%, #f4e7c1) !important;
            text-decoration: none !important;
        }

        .v-reveal-map {
            display: flex;
            flex: 1 1 auto;
            min-height: 0;
        }

        .v-topic-scroll-box {
            flex: 1 1 auto;
            width: 100%;
            min-height: 220px;
            max-height: none;
            overflow-y: auto;
            overscroll-behavior: contain;
            border: 1px solid color-mix(in srgb, var(--fruit-tone) 24%, rgba(255, 255, 255, 0.085));
            border-radius: 18px;
            padding: 18px 20px;
            background:
                radial-gradient(circle at 22% 0%, rgba(255, 249, 236, 0.075), transparent 46%),
                linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.032));
            box-shadow:
                0 12px 28px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.055);
            scrollbar-width: thin;
            scrollbar-color: color-mix(in srgb, var(--fruit-tone) 44%, rgba(244, 231, 193, 0.35)) rgba(255, 255, 255, 0.04);
        }

        .v-topic-scroll-box::-webkit-scrollbar {
            width: 8px;
        }

        .v-topic-scroll-box::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.04);
            border-radius: 999px;
        }

        .v-topic-scroll-box::-webkit-scrollbar-thumb {
            background: color-mix(in srgb, var(--fruit-tone) 46%, rgba(244, 231, 193, 0.34));
            border-radius: 999px;
            border: 2px solid rgba(5, 16, 28, 0.78);
        }

        .v-topic-scroll-box:focus {
            outline: 1px solid color-mix(in srgb, var(--fruit-tone) 58%, rgba(244, 231, 193, 0.32));
            outline-offset: 3px;
        }

        .v-topic-scroll-box section + section {
            margin-top: 14px;
            padding-top: 14px;
            border-top: 1px solid color-mix(in srgb, var(--fruit-tone) 18%, rgba(255, 255, 255, 0.07));
        }

        .v-topic-scroll-box span {
            display: block;
            color: color-mix(in srgb, var(--fruit-tone) 58%, #c9a46b);
            font-size: 8px;
            font-weight: 800;
            margin-bottom: 9px;
            font-family: 'Cinzel', serif;
            letter-spacing: 0.14em;
            text-transform: uppercase;
        }

        .v-topic-scroll-box h4 {
            color: #fff9ec;
            font-size: 14px;
            line-height: 1.3;
            margin: 0 0 8px;
        }

        .v-topic-scroll-box p,
        .v-topic-scroll-box blockquote,
        .v-topic-scroll-box li {
            color: rgba(230, 237, 245, 0.84);
            font-size: 12px;
            line-height: 1.48;
        }

        .v-topic-scroll-box p {
            margin: 0;
        }

        .v-topic-scroll-box ul {
            margin: 0;
            padding-left: 16px;
            display: grid;
            gap: 4px;
        }

        .v-topic-scroll-box blockquote {
            margin: 0;
            font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
            font-size: 15px;
            font-style: italic;
            color: #fff8ea;
        }

        .v-devotional-disclosure {
            position: relative;
            padding: 10px;
            border-radius: 16px;
            background:
                radial-gradient(circle at 16% 0%, rgba(244, 231, 193, 0.075), transparent 52%),
                linear-gradient(145deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.025));
            border: 1px solid color-mix(in srgb, var(--fruit-tone) 22%, rgba(244, 231, 193, 0.12));
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.045),
                0 10px 22px rgba(0, 0, 0, 0.16);
            transition: border-color 0.26s ease, box-shadow 0.26s ease, background 0.26s ease;
        }

        .v-devotional-disclosure.open {
            border-color: color-mix(in srgb, var(--fruit-tone) 38%, rgba(244, 231, 193, 0.2));
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.06),
                0 12px 26px rgba(0, 0, 0, 0.2),
                0 0 22px color-mix(in srgb, var(--fruit-tone) 10%, transparent);
        }

        .v-devotional-options {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }

        .v-devotional-toggle {
            position: relative;
            width: 100%;
            min-height: 40px;
            appearance: none;
            border: 1px solid color-mix(in srgb, var(--fruit-tone) 18%, rgba(244, 231, 193, 0.08));
            border-radius: 12px;
            padding: 11px 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            background:
                radial-gradient(circle at 50% 0%, rgba(244, 231, 193, 0.052), transparent 54%),
                linear-gradient(145deg, rgba(3, 10, 19, 0.28), rgba(255, 255, 255, 0.022));
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
            transition: border-color 0.26s ease, box-shadow 0.26s ease, transform 0.26s ease, background 0.26s ease;
        }

        .v-devotional-toggle::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 5px;
            width: 34px;
            height: 1px;
            opacity: 0;
            background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--fruit-tone) 62%, #f4e7c1), transparent);
            box-shadow: 0 0 12px color-mix(in srgb, var(--fruit-tone) 28%, transparent);
            transform: translateX(-50%) scaleX(0.5);
            transition: opacity 0.24s ease, transform 0.24s ease;
        }

        .v-devotional-toggle[aria-expanded="true"]::after {
            opacity: 1;
            transform: translateX(-50%) scaleX(1);
        }

        .v-topic-scroll-box .v-devotional-toggle-label {
            display: block;
            margin: 0;
            color: color-mix(in srgb, var(--fruit-tone) 62%, #f4e7c1);
            font-family: 'Cinzel', serif;
            font-size: 8px;
            font-weight: 800;
            letter-spacing: 0.14em;
            text-transform: uppercase;
        }

        .v-devotional-toggle:hover,
        .v-devotional-toggle:focus-visible,
        .v-devotional-toggle[aria-expanded="true"] {
            border-color: color-mix(in srgb, var(--fruit-tone) 42%, rgba(244, 231, 193, 0.22));
            background:
                radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--fruit-tone) 14%, rgba(244, 231, 193, 0.08)), transparent 52%),
                linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.032));
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.065),
                0 0 22px color-mix(in srgb, var(--fruit-tone) 10%, transparent);
            transform: translateY(-1px);
        }

        .v-devotional-toggle:focus-visible {
            outline: 2px solid color-mix(in srgb, var(--fruit-tone) 62%, rgba(244, 231, 193, 0.38));
            outline-offset: 3px;
        }

        .v-devotional-content {
            margin-top: 11px;
            padding: 14px 16px;
            border-radius: 14px;
            background:
                radial-gradient(circle at 18% 0%, rgba(244, 231, 193, 0.075), transparent 48%),
                linear-gradient(145deg, rgba(3, 10, 19, 0.42), rgba(255, 255, 255, 0.025));
            border: 1px solid color-mix(in srgb, var(--fruit-tone) 22%, rgba(244, 231, 193, 0.1));
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.035),
                0 10px 22px rgba(0, 0, 0, 0.16);
            animation: vDevotionalReveal 0.28s ease both;
        }

        .v-devotional-content[hidden] {
            display: none;
        }

        @keyframes vDevotionalReveal {
            0% { opacity: 0; transform: translateY(-6px); filter: blur(3px); }
            100% { opacity: 1; transform: translateY(0); filter: blur(0); }
        }

        .v-reveal-transform {
            position: relative;
            display: flex;
            flex: 0 0 auto;
            flex-direction: column;
            gap: 18px;
            padding: 24px;
            border-radius: 24px;
            overflow: hidden;
            isolation: isolate;
            background:
                radial-gradient(circle at 16% 0%, rgba(184, 148, 216, 0.16), transparent 46%),
                radial-gradient(circle at 88% 18%, rgba(244, 231, 193, 0.12), transparent 42%),
                linear-gradient(150deg, rgba(4, 14, 28, 0.84), rgba(8, 20, 36, 0.68));
            border: 1px solid rgba(244, 231, 193, 0.16);
            box-shadow:
                inset 0 0 0 1px rgba(255, 255, 255, 0.04),
                inset 0 1px 0 rgba(255, 255, 255, 0.06),
                0 20px 46px rgba(0, 0, 0, 0.28),
                0 0 54px color-mix(in srgb, var(--fruit-tone) 13%, transparent);
            backdrop-filter: blur(16px) saturate(1.1);
            -webkit-backdrop-filter: blur(16px) saturate(1.1);
        }

        .v-reveal-walk {
            position: relative;
            display: flex;
            flex: 0 0 auto;
            flex-direction: column;
            gap: 16px;
            padding: 22px 22px 24px;
            border-radius: 24px;
            overflow: hidden;
            isolation: isolate;
            background:
                radial-gradient(circle at 12% 0%, rgba(244, 231, 193, 0.12), transparent 42%),
                radial-gradient(circle at 88% 24%, color-mix(in srgb, var(--fruit-tone) 14%, transparent), transparent 46%),
                linear-gradient(150deg, rgba(5, 16, 30, 0.78), rgba(7, 18, 32, 0.54));
            border: 1px solid rgba(244, 231, 193, 0.13);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.052),
                inset 0 0 0 1px rgba(255, 255, 255, 0.025),
                0 18px 40px rgba(0, 0, 0, 0.22);
        }

        .v-transform-atmosphere,
        .v-transform-atmosphere span,
        .v-reveal-transform::before,
        .v-reveal-transform::after {
            position: absolute;
            pointer-events: none;
        }

        .v-transform-atmosphere {
            inset: 0;
            z-index: 0;
            overflow: hidden;
        }

        .v-reveal-transform::before {
            content: "";
            inset: 1px;
            z-index: 0;
            border-radius: 23px;
            border: 1px solid color-mix(in srgb, var(--fruit-tone) 28%, rgba(244, 231, 193, 0.08));
            mask-image: linear-gradient(135deg, #000, transparent 78%);
        }

        .v-reveal-transform::after {
            content: "";
            right: -60px;
            top: -88px;
            z-index: 0;
            width: 210px;
            height: 210px;
            border-radius: 50%;
            border: 1px solid rgba(244, 231, 193, 0.08);
            box-shadow:
                inset 0 0 0 18px rgba(184, 148, 216, 0.025),
                inset 0 0 0 42px rgba(244, 231, 193, 0.02),
                0 0 42px rgba(184, 148, 216, 0.06);
        }

        .v-transform-ray {
            width: 220px;
            height: 82px;
            border-radius: 999px;
            background: linear-gradient(90deg, transparent, rgba(244, 231, 193, 0.075), transparent);
            filter: blur(10px);
            transform: rotate(-18deg);
            animation: vTransformRayDrift 12s ease-in-out infinite;
        }

        .v-transform-ray-one {
            left: -60px;
            top: 18px;
        }

        .v-transform-ray-two {
            right: -70px;
            bottom: 22px;
            animation-delay: -5s;
        }

        .v-transform-geometry {
            right: 12%;
            top: 20%;
            width: 156px;
            height: 156px;
            border-radius: 50%;
            border: 1px solid rgba(244, 231, 193, 0.06);
            box-shadow:
                inset 0 0 0 32px rgba(184, 148, 216, 0.018),
                inset 0 0 0 58px rgba(244, 231, 193, 0.014);
            animation: vTransformGeometryDrift 18s linear infinite;
        }

        .v-transform-particle {
            width: 3px;
            height: 3px;
            border-radius: 50%;
            background: rgba(244, 231, 193, 0.68);
            box-shadow: 0 0 10px rgba(244, 231, 193, 0.55);
            animation: vTransformParticleDrift 9s ease-in-out infinite;
        }

        .v-transform-particle-one { left: 10%; top: 24%; }
        .v-transform-particle-two { left: 42%; top: 12%; animation-delay: -2.2s; }
        .v-transform-particle-three { left: 78%; top: 64%; animation-delay: -4.5s; }
        .v-transform-particle-four { left: 28%; top: 78%; animation-delay: -6.4s; }

        .v-transform-header {
            position: relative;
            z-index: 1;
        }

        .v-walk-atmosphere,
        .v-walk-atmosphere span,
        .v-reveal-walk::before {
            position: absolute;
            pointer-events: none;
        }

        .v-walk-atmosphere {
            inset: 0;
            z-index: 0;
            overflow: hidden;
        }

        .v-reveal-walk::before {
            content: "";
            inset: 1px;
            z-index: 0;
            border-radius: 23px;
            border: 1px solid color-mix(in srgb, var(--fruit-tone) 20%, rgba(244, 231, 193, 0.06));
            mask-image: linear-gradient(135deg, #000, transparent 78%);
        }

        .v-walk-ray {
            width: 210px;
            height: 76px;
            border-radius: 999px;
            background: linear-gradient(90deg, transparent, rgba(244, 231, 193, 0.065), transparent);
            filter: blur(12px);
            transform: rotate(14deg);
            animation: vWalkHazeDrift 13s ease-in-out infinite;
        }

        .v-walk-ray-one {
            left: -72px;
            top: 12px;
        }

        .v-walk-ray-two {
            right: -88px;
            bottom: 8px;
            animation-delay: -5.2s;
        }

        .v-walk-orbit {
            right: 8%;
            top: 16%;
            width: 142px;
            height: 142px;
            border-radius: 50%;
            border: 1px solid rgba(244, 231, 193, 0.055);
            box-shadow:
                inset 0 0 0 30px rgba(244, 231, 193, 0.012),
                inset 0 0 0 58px color-mix(in srgb, var(--fruit-tone) 5%, transparent);
            animation: vWalkOrbitDrift 20s linear infinite;
        }

        .v-walk-dust {
            width: 3px;
            height: 3px;
            border-radius: 50%;
            background: rgba(244, 231, 193, 0.62);
            box-shadow: 0 0 10px rgba(244, 231, 193, 0.48);
            animation: vWalkDustDrift 8s ease-in-out infinite;
        }

        .v-walk-dust-one { left: 12%; top: 22%; }
        .v-walk-dust-two { left: 52%; top: 10%; animation-delay: -2.5s; }
        .v-walk-dust-three { left: 82%; top: 70%; animation-delay: -5s; }

        .v-walk-header {
            position: relative;
            z-index: 1;
        }

        .v-transform-header h4,
        .v-reveal-walk h4 {
            font-family: 'Cinzel', serif;
            text-transform: uppercase;
            letter-spacing: 0.18em;
            color: #f4e7c1;
            font-size: 10px;
            font-weight: 800;
            margin: 0;
        }

        .v-transform-header h4::after {
            content: "";
            display: block;
            width: 96px;
            height: 1px;
            margin-top: 9px;
            background: linear-gradient(90deg, rgba(244, 231, 193, 0.84), color-mix(in srgb, var(--fruit-tone) 58%, transparent));
            box-shadow: 0 0 14px rgba(244, 231, 193, 0.35);
        }

        .v-transform-header p {
            margin: 10px 0 0;
            color: rgba(230, 237, 245, 0.68);
            font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
            font-size: 15px;
            font-style: italic;
            line-height: 1.25;
        }

        .v-walk-header h4::after {
            content: "";
            display: block;
            width: 86px;
            height: 1px;
            margin-top: 9px;
            background: linear-gradient(90deg, rgba(244, 231, 193, 0.78), color-mix(in srgb, var(--fruit-tone) 50%, transparent));
            box-shadow: 0 0 14px rgba(244, 231, 193, 0.3);
        }

        .v-walk-header p {
            margin: 10px 0 0;
            color: #fff8ea;
            font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
            font-size: 16px;
            font-style: italic;
            line-height: 1.2;
        }

        .v-walk-header span {
            display: block;
            margin-top: 5px;
            color: rgba(230, 237, 245, 0.66);
            font-size: 11.5px;
            line-height: 1.4;
        }

        .v-reflection-float-grid,
        .v-walk-steps {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 12px;
        }

        .v-reflection-float-grid {
            position: relative;
            z-index: 1;
            align-items: stretch;
        }

        .v-walk-steps {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .v-walk-steps {
            position: relative;
            z-index: 1;
        }

        .v-walk-practice-card {
            min-height: 186px;
            border-radius: 19px;
            appearance: none;
            display: flex;
            position: relative;
            overflow: hidden;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding: 18px 14px 16px;
            text-align: center;
            cursor: pointer;
            color: #fff9ec;
            background:
                linear-gradient(180deg, color-mix(in srgb, var(--fruit-tone) 10%, rgba(255, 255, 255, 0.07)), rgba(255, 255, 255, 0.024)),
                radial-gradient(circle at 50% -10%, rgba(244, 231, 193, 0.11), transparent 58%),
                linear-gradient(155deg, rgba(12, 25, 43, 0.82), rgba(4, 13, 25, 0.9));
            border: 1px solid color-mix(in srgb, var(--fruit-tone) 34%, rgba(244, 231, 193, 0.14));
            box-shadow:
                0 14px 30px rgba(0, 0, 0, 0.28),
                inset 0 1px 0 rgba(255, 255, 255, 0.072),
                0 0 20px color-mix(in srgb, var(--fruit-tone) 10%, transparent);
            backdrop-filter: blur(13px) saturate(1.06);
            -webkit-backdrop-filter: blur(13px) saturate(1.06);
            animation: vReflectionDrift 5.5s ease-in-out infinite;
            transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease, min-height 0.35s ease;
        }

        .v-walk-practice-card::before,
        .v-walk-practice-card::after {
            content: "";
            position: absolute;
            pointer-events: none;
        }

        .v-walk-practice-card::before {
            inset: 1px;
            border-radius: 18px;
            border: 1px solid rgba(255, 255, 255, 0.04);
        }

        .v-walk-practice-card::after {
            width: 74px;
            height: 74px;
            top: -42px;
            left: 50%;
            border-radius: 50%;
            background: color-mix(in srgb, var(--fruit-tone) 18%, rgba(244, 231, 193, 0.12));
            filter: blur(18px);
            opacity: 0.62;
            transform: translateX(-50%);
            transition: opacity 0.35s ease, transform 0.35s ease;
        }

        .v-walk-practice-icon {
            position: relative;
            z-index: 1;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            margin-bottom: 11px;
            font-size: 16px;
            background: rgba(255, 255, 255, 0.035);
            border: 1px solid color-mix(in srgb, var(--fruit-tone) 28%, rgba(244, 231, 193, 0.14));
            box-shadow: 0 0 18px color-mix(in srgb, var(--fruit-tone) 14%, transparent);
        }

        .v-walk-practice-title {
            position: relative;
            z-index: 1;
            color: #fff9ec;
            font-size: 12px;
            font-weight: 800;
            line-height: 1.18;
            letter-spacing: 0.035em;
            text-transform: uppercase;
        }

        .v-walk-practice-desc {
            position: relative;
            z-index: 1;
            margin-top: 8px;
            color: rgba(255, 248, 234, 0.88);
            font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
            font-size: 13.5px;
            font-style: italic;
            font-weight: 600;
            line-height: 1.22;
        }

        .v-walk-practice-example {
            position: relative;
            z-index: 1;
            margin-top: 10px;
            color: rgba(230, 237, 245, 0.64);
            font-size: 9.5px;
            line-height: 1.34;
        }

        .v-walk-practice-ref {
            position: relative;
            z-index: 1;
            display: inline-flex;
            justify-content: center;
            margin-top: auto;
            padding: 5px 9px;
            border-radius: 999px;
            color: color-mix(in srgb, var(--fruit-tone) 54%, #f4e7c1);
            font-family: 'Cinzel', serif;
            font-size: 7.5px;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            background: rgba(3, 10, 19, 0.42);
            border: 1px solid color-mix(in srgb, var(--fruit-tone) 28%, rgba(244, 231, 193, 0.12));
        }

        .v-walk-practice-whisper {
            position: absolute;
            inset: auto 12px 12px;
            z-index: 2;
            padding: 12px;
            border-radius: 14px;
            color: #fff8ea;
            font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
            font-size: 13px;
            font-style: italic;
            font-weight: 600;
            line-height: 1.28;
            opacity: 0;
            transform: translateY(10px);
            background:
                radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--fruit-tone) 16%, rgba(244, 231, 193, 0.10)), transparent 58%),
                linear-gradient(150deg, rgba(7, 16, 29, 0.9), rgba(15, 22, 36, 0.78));
            border: 1px solid color-mix(in srgb, var(--fruit-tone) 28%, rgba(244, 231, 193, 0.14));
            box-shadow: 0 14px 28px rgba(0, 0, 0, 0.26);
            pointer-events: none;
            transition: opacity 0.28s ease, transform 0.28s ease;
        }

        .v-transform-card {
            position: relative;
            min-height: 152px;
            padding: 18px 15px 16px;
            border-radius: 19px;
            border: 1px solid color-mix(in srgb, var(--fruit-tone) 38%, rgba(244, 231, 193, 0.16));
            appearance: none;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            overflow: hidden;
            text-align: center;
            color: #fff9ec;
            background:
                linear-gradient(180deg, color-mix(in srgb, var(--fruit-tone) 11%, rgba(255, 255, 255, 0.08)), rgba(255, 255, 255, 0.028)),
                radial-gradient(circle at 50% -12%, rgba(244, 231, 193, 0.12), transparent 58%),
                linear-gradient(155deg, rgba(12, 25, 43, 0.86), rgba(4, 13, 25, 0.92));
            box-shadow:
                0 16px 32px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.08),
                inset 0 -1px 0 rgba(244, 231, 193, 0.04),
                0 0 22px color-mix(in srgb, var(--fruit-tone) 12%, transparent);
            backdrop-filter: blur(14px) saturate(1.08);
            -webkit-backdrop-filter: blur(14px) saturate(1.08);
            transition: min-height 0.34s ease, transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
        }

        .v-transform-card::before,
        .v-transform-card::after {
            content: "";
            position: absolute;
            pointer-events: none;
        }

        .v-transform-card::before {
            inset: 1px;
            border-radius: 18px;
            border: 1px solid rgba(255, 255, 255, 0.045);
        }

        .v-transform-card::after {
            width: 76px;
            height: 76px;
            top: -40px;
            left: 50%;
            border-radius: 50%;
            background: color-mix(in srgb, var(--fruit-tone) 20%, rgba(244, 231, 193, 0.12));
            filter: blur(18px);
            opacity: 0.62;
            transform: translateX(-50%);
            transition: opacity 0.35s ease, transform 0.35s ease;
        }

        .v-transform-icon {
            position: relative;
            z-index: 1;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            margin-bottom: 10px;
            color: color-mix(in srgb, var(--fruit-tone) 56%, #f4e7c1);
            font-family: 'Cinzel', serif;
            font-size: 16px;
            line-height: 1;
            background:
                radial-gradient(circle at 50% 38%, rgba(244, 231, 193, 0.12), transparent 68%),
                rgba(255, 255, 255, 0.035);
            border: 1px solid color-mix(in srgb, var(--fruit-tone) 32%, rgba(244, 231, 193, 0.14));
            box-shadow: 0 0 18px color-mix(in srgb, var(--fruit-tone) 18%, transparent);
        }

        .v-transform-label {
            position: relative;
            z-index: 1;
            display: block;
            min-height: 34px;
            color: #fff9ec;
            font-size: 12.5px;
            font-weight: 800;
            line-height: 1.2;
            text-transform: uppercase;
            letter-spacing: 0.035em;
        }

        .v-transform-desc {
            position: relative;
            z-index: 1;
            display: block;
            margin-top: 8px;
            color: rgba(230, 237, 245, 0.72);
            font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
            font-size: 13px;
            font-style: italic;
            font-weight: 600;
            line-height: 1.24;
        }

        .v-transform-ref {
            position: relative;
            z-index: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-top: auto;
            padding: 5px 9px;
            border-radius: 999px;
            color: color-mix(in srgb, var(--fruit-tone) 54%, #f4e7c1);
            font-family: 'Cinzel', serif;
            font-size: 7.5px;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            background: rgba(3, 10, 19, 0.42);
            border: 1px solid color-mix(in srgb, var(--fruit-tone) 28%, rgba(244, 231, 193, 0.12));
        }

        .v-transform-tooltip {
            position: relative;
            z-index: 1;
            display: block;
            width: 100%;
            max-height: 0;
            margin-top: 0;
            padding: 0 10px;
            border-radius: 15px;
            overflow: hidden;
            opacity: 0;
            color: #fff9ec;
            text-align: center;
            transform: translateY(10px);
            transition: max-height 0.34s ease, margin-top 0.34s ease, padding 0.34s ease, opacity 0.28s ease, transform 0.34s ease;
        }

        .v-transform-tooltip::before {
            content: "";
            display: block;
            width: 1px;
            height: 18px;
            margin: 0 auto 8px;
            background: linear-gradient(180deg, color-mix(in srgb, var(--fruit-tone) 72%, #f4e7c1), transparent);
            box-shadow: 0 0 13px color-mix(in srgb, var(--fruit-tone) 50%, rgba(244, 231, 193, 0.35));
        }

        .v-transform-tooltip::after {
            content: "";
            position: absolute;
            inset: 18px 0 0;
            z-index: -1;
            border-radius: 15px;
            background:
                radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--fruit-tone) 16%, rgba(244, 231, 193, 0.10)), transparent 58%),
                linear-gradient(150deg, rgba(7, 16, 29, 0.82), rgba(15, 22, 36, 0.68));
            border: 1px solid color-mix(in srgb, var(--fruit-tone) 28%, rgba(244, 231, 193, 0.14));
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }

        .v-transform-tooltip-kicker,
        .v-transform-verse,
        .v-transform-citation {
            display: block;
        }

        .v-transform-tooltip-kicker {
            color: color-mix(in srgb, var(--fruit-tone) 52%, #f4e7c1);
            font-family: 'Cinzel', serif;
            font-size: 7px;
            font-weight: 800;
            letter-spacing: 0.14em;
            text-transform: uppercase;
        }

        .v-transform-verse {
            margin-top: 7px;
            color: #fff8ea;
            font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
            font-size: 14px;
            font-style: italic;
            font-weight: 600;
            line-height: 1.35;
        }

        .v-transform-citation {
            margin-top: 8px;
            color: rgba(244, 231, 193, 0.82);
            font-family: 'Cinzel', serif;
            font-size: 8px;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .v-transform-card:hover,
        .v-transform-card:focus-visible {
            min-height: 238px;
            border-color: color-mix(in srgb, var(--fruit-tone) 54%, rgba(244, 231, 193, 0.28));
            box-shadow:
                0 22px 44px rgba(0, 0, 0, 0.34),
                inset 0 1px 0 rgba(255, 255, 255, 0.1),
                inset 0 -1px 0 rgba(244, 231, 193, 0.06),
                0 0 30px color-mix(in srgb, var(--fruit-tone) 24%, transparent);
            transform: translateY(-5px);
        }

        .v-transform-card-return {
            border-color: rgba(244, 231, 193, 0.72);
            box-shadow:
                0 24px 48px rgba(0, 0, 0, 0.36),
                inset 0 1px 0 rgba(255, 255, 255, 0.12),
                inset 0 -1px 0 rgba(244, 231, 193, 0.08),
                0 0 34px rgba(244, 231, 193, 0.24);
        }

        .v-transform-card:hover::after,
        .v-transform-card:focus-visible::after {
            opacity: 1;
            transform: translateX(-50%) translateY(8px) scale(1.18);
        }

        .v-transform-card:hover .v-transform-tooltip,
        .v-transform-card:focus-visible .v-transform-tooltip {
            max-height: 128px;
            margin-top: 12px;
            padding: 0 10px 12px;
            opacity: 1;
            transform: translateY(0);
        }

        .v-transform-card:focus-visible {
            outline: 2px solid color-mix(in srgb, var(--fruit-tone) 68%, #f4e7c1);
            outline-offset: 3px;
        }

        .v-walk-practice-card:nth-child(2) {
            animation-delay: -1.8s;
        }

        .v-walk-practice-card:nth-child(3) {
            animation-delay: -3.2s;
        }

        .v-walk-practice-card:hover,
        .v-walk-practice-card:focus-visible {
            color: #fff9ec;
            border-color: color-mix(in srgb, var(--fruit-tone) 58%, rgba(244, 231, 193, 0.24));
            box-shadow:
                0 20px 38px rgba(0, 0, 0, 0.32),
                inset 0 1px 0 rgba(255, 255, 255, 0.08),
                0 0 28px color-mix(in srgb, var(--fruit-tone) 20%, transparent);
            transform: translateY(-5px);
        }

        .v-walk-practice-card-return {
            color: #fff9ec;
            border-color: rgba(244, 231, 193, 0.72);
            box-shadow:
                0 22px 44px rgba(0, 0, 0, 0.36),
                inset 0 1px 0 rgba(255, 255, 255, 0.1),
                0 0 34px rgba(244, 231, 193, 0.24);
        }

        .v-walk-practice-card:hover::after,
        .v-walk-practice-card:focus-visible::after {
            opacity: 1;
            transform: translateX(-50%) translateY(8px) scale(1.16);
        }

        .v-walk-practice-card:hover .v-walk-practice-whisper,
        .v-walk-practice-card:focus-visible .v-walk-practice-whisper {
            opacity: 1;
            transform: translateY(0);
        }

        .v-walk-practice-card:focus-visible {
            outline: 2px solid color-mix(in srgb, var(--fruit-tone) 68%, #f4e7c1);
            outline-offset: 3px;
        }

        @keyframes vReflectionDrift {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-4px); }
        }

        @keyframes vTransformRayDrift {
            0%, 100% { opacity: 0.26; transform: translateX(0) rotate(-18deg); }
            50% { opacity: 0.46; transform: translateX(28px) rotate(-18deg); }
        }

        @keyframes vTransformGeometryDrift {
            0% { transform: rotate(0deg) scale(1); opacity: 0.72; }
            50% { transform: rotate(18deg) scale(1.05); opacity: 0.9; }
            100% { transform: rotate(36deg) scale(1); opacity: 0.72; }
        }

        @keyframes vTransformParticleDrift {
            0%, 100% { opacity: 0.18; transform: translate3d(0, 0, 0); }
            45% { opacity: 0.72; transform: translate3d(10px, -16px, 0); }
            75% { opacity: 0.36; transform: translate3d(-8px, -24px, 0); }
        }

        @keyframes vWalkHazeDrift {
            0%, 100% { opacity: 0.22; transform: translateX(0) rotate(14deg); }
            50% { opacity: 0.42; transform: translateX(26px) rotate(14deg); }
        }

        @keyframes vWalkOrbitDrift {
            0% { transform: rotate(0deg) scale(1); opacity: 0.64; }
            50% { transform: rotate(-16deg) scale(1.04); opacity: 0.86; }
            100% { transform: rotate(-34deg) scale(1); opacity: 0.64; }
        }

        @keyframes vWalkDustDrift {
            0%, 100% { opacity: 0.18; transform: translate3d(0, 0, 0); }
            48% { opacity: 0.68; transform: translate3d(12px, -14px, 0); }
            76% { opacity: 0.34; transform: translate3d(-8px, -22px, 0); }
        }

        @keyframes vWalkPopupReveal {
            0% {
                opacity: 0;
                transform: translate(-50%, calc(-50% + 18px)) scale(0.97);
                filter: blur(3px);
            }
            100% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
                filter: blur(0);
            }
        }

        .v-walk-popup-scrim {
            position: fixed;
            inset: 0;
            z-index: 1200;
            display: none;
            background: rgba(0, 0, 0, 0.42);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
        }

        .v-walk-popup-scrim.active {
            display: block;
        }

        .v-walk-popup {
            position: fixed;
            left: 50%;
            top: 50dvh;
            z-index: 1201;
            width: min(520px, calc(100vw - 36px));
            max-height: min(680px, calc(100dvh - 48px));
            overflow-y: auto;
            display: none;
            padding: 30px;
            box-sizing: border-box;
            border-radius: 26px;
            color: #fff9ec;
            text-align: center;
            transform: translate(-50%, calc(-50% + 18px)) scale(0.97);
            background:
                radial-gradient(circle at 50% 0%, rgba(244, 231, 193, 0.16), transparent 42%),
                radial-gradient(circle at 16% 12%, rgba(184, 148, 216, 0.16), transparent 42%),
                linear-gradient(150deg, rgba(7, 17, 31, 0.98), rgba(11, 22, 38, 0.94));
            border: 1px solid rgba(244, 231, 193, 0.22);
            box-shadow:
                0 32px 90px rgba(0, 0, 0, 0.62),
                inset 0 1px 0 rgba(255, 255, 255, 0.08),
                0 0 54px rgba(244, 231, 193, 0.12);
            opacity: 0;
            transition: opacity 0.24s ease, transform 0.24s ease;
        }

        .v-walk-popup.active {
            display: block;
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
            animation: vWalkPopupReveal 0.28s ease both;
        }

        @supports not (height: 100dvh) {
            .v-walk-popup {
                top: 50vh;
                max-height: calc(100vh - 48px);
            }
        }

        .v-walk-popup-close {
            position: absolute;
            right: 16px;
            top: 14px;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: 1px solid rgba(244, 231, 193, 0.18);
            background: rgba(3, 10, 19, 0.42);
            color: #f4e7c1;
            cursor: pointer;
            font-size: 22px;
            line-height: 1;
        }

        .v-walk-popup-orb {
            width: 54px;
            height: 54px;
            margin: 0 auto 14px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            font-size: 24px;
            background: rgba(255, 255, 255, 0.045);
            border: 1px solid rgba(244, 231, 193, 0.18);
            box-shadow: 0 0 24px rgba(244, 231, 193, 0.14);
        }

        .v-walk-popup-kicker,
        .v-walk-popup-detail span,
        .v-walk-popup-reflection span {
            display: block;
            color: #f4e7c1;
            font-family: 'Cinzel', serif;
            font-size: 8px;
            font-weight: 800;
            letter-spacing: 0.16em;
            text-transform: uppercase;
        }

        .v-walk-popup h3 {
            margin: 8px 0 8px;
            color: #fff9ec;
            font-family: 'Cinzel', serif;
            font-size: 24px;
            line-height: 1.16;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .v-walk-popup-explanation {
            margin: 0 auto 18px;
            max-width: 380px;
            color: rgba(255, 248, 234, 0.9);
            font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
            font-size: 19px;
            font-style: italic;
            line-height: 1.28;
        }

        .v-walk-popup-detail,
        .v-walk-popup-reflection {
            margin-top: 14px;
            padding: 16px 18px;
            border-radius: 18px;
            background:
                radial-gradient(circle at 50% 0%, rgba(244, 231, 193, 0.075), transparent 54%),
                rgba(255, 255, 255, 0.035);
            border: 1px solid rgba(244, 231, 193, 0.12);
            text-align: left;
        }

        .v-walk-popup-detail p,
        .v-walk-popup-reflection p {
            margin: 8px 0 0;
            color: rgba(230, 237, 245, 0.82);
            font-size: 13px;
            line-height: 1.48;
        }

        .v-walk-popup-detail blockquote {
            margin: 10px 0 8px;
            color: #fff8ea;
            font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
            font-size: 18px;
            font-style: italic;
            line-height: 1.32;
            text-align: center;
        }

        .v-walk-popup-ref-link {
            display: block;
            width: fit-content;
            margin: 10px auto 0;
            padding: 6px 12px;
            border-radius: 999px;
            border: 1px solid rgba(244, 231, 193, 0.18);
            background: rgba(3, 10, 19, 0.3);
            color: #f4e7c1;
            font-family: 'Cinzel', serif;
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            text-align: center;
            text-decoration: none;
            transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
        }

        .v-walk-popup-ref-link:hover,
        .v-walk-popup-ref-link:focus-visible {
            border-color: rgba(244, 231, 193, 0.44);
            color: #fff8ea;
            box-shadow: 0 0 18px rgba(244, 231, 193, 0.16);
            outline: none;
        }
        /* -------------------------------------------------------------------------
           PROGRESSION CHEVRONS SECTION (PILGRIMAGE PATH)
           ------------------------------------------------------------------------- */
        .v-progression {
            margin-top: 48px;
            border-top: 1px dashed rgba(212, 175, 55, 0.25);
            padding-top: 36px;
            min-width: 1200px;
            position: relative;
        }

        .v-progression-title {
            font-size: 13px;
            font-weight: 700;
            color: #c9a46b;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            margin: 0 0 24px 0;
            text-align: center;
            font-family: 'Cinzel', serif;
            text-shadow: 0 2px 4px rgba(0,0,0,0.5);
        }

        .v-progression-steps {
            display: flex;
            align-items: stretch;
            justify-content: space-between;
            gap: 12px;
            position: relative;
        }

        /* Pilgrimage Pathway Line */
        .v-progression-steps::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 60px;
            right: 60px;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.25) 20%, rgba(212, 175, 55, 0.25) 80%, transparent);
            z-index: 0;
            pointer-events: none;
        }

        .v-progression-step {
            flex: 1;
            position: relative;
            z-index: 2;
            background: linear-gradient(135deg, rgba(16, 28, 49, 0.7) 0%, rgba(10, 18, 32, 0.85) 100%);
            border: 1px solid rgba(212, 175, 55, 0.16);
            padding: 16px 14px;
            border-radius: 14px;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .v-progression-step:hover {
            background: linear-gradient(135deg, rgba(20, 38, 65, 0.8) 0%, rgba(12, 24, 43, 0.9) 100%);
            border-color: rgba(212, 175, 55, 0.45);
            transform: translateY(-4px);
            box-shadow: 
                0 12px 30px rgba(0, 0, 0, 0.45),
                0 0 15px rgba(212, 175, 55, 0.12);
        }

        .v-prog-num {
            font-size: 10px;
            font-weight: 700;
            color: #d4af37;
            margin-bottom: 4px;
            text-transform: uppercase;
            font-family: 'Cinzel', serif;
            letter-spacing: 0.1em;
        }

        .v-prog-text {
            font-size: 10px;
            font-weight: 600;
            color: #FFF9EC;
            line-height: 1.45;
            margin: 0;
        }

        /* Glassmorphic Tooltip styling */
        .visuals-tooltip {
            position: absolute;
            display: none;
            background: rgba(6, 15, 30, 0.92);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 1px solid rgba(212, 175, 55, 0.45);
            color: #fff9ec;
            padding: 10px 16px;
            border-radius: 10px;
            font-size: 12px;
            font-family: 'Cinzel', 'Inter', system-ui, sans-serif;
            font-weight: 500;
            pointer-events: none;
            z-index: 9999;
            box-shadow: 
                0 15px 30px rgba(0, 0, 0, 0.55),
                0 0 12px rgba(212, 175, 55, 0.2) !important;
            white-space: nowrap;
            transform: translate(-50%, -130%);
            transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
            opacity: 0;
        }

        /* -------------------------------------------------------------------------
           VISUAL DEVOTION EXPERIENCE SLIDE DECK & SCREEN LAYOUTS
           ------------------------------------------------------------------------- */
        .v-deck-container {
            display: flex;
            flex-direction: column;
            width: 100%;
            position: relative;
            z-index: 4;
        }

        .v-progress-steps {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            max-width: 1100px;
            margin: 0 auto 36px auto;
            padding: 0 24px;
            width: 100%;
            box-sizing: border-box;
        }

        .v-progress-steps::before {
            content: '';
            position: absolute;
            top: 75%;
            left: 48px;
            right: 48px;
            height: 2px;
            background: rgba(212, 175, 55, 0.12);
            z-index: 1;
            transform: translateY(-50%);
        }

        .v-progress-line-active {
            position: absolute;
            top: 75%;
            left: 48px;
            height: 2px;
            background: linear-gradient(90deg, #d4af37, #f4e7c1);
            z-index: 2;
            transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
            transform: translateY(-50%);
            width: 0%;
        }

        .v-progress-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            z-index: 3;
            transition: all 0.3s ease;
            width: 90px;
            text-align: center;
        }

        .v-step-num {
            font-family: 'Cinzel', serif;
            font-size: 10px;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.4);
            margin-bottom: 4px;
            letter-spacing: 0.1em;
            transition: all 0.3s ease;
        }

        .v-step-name {
            font-size: 8.5px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.35);
            margin-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            white-space: nowrap;
            transition: all 0.3s ease;
        }

        .v-step-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 2px solid rgba(212, 175, 55, 0.3);
            background: #061327;
            position: relative;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
        }

        .v-progress-step.active .v-step-num {
            color: #f4e7c1;
            text-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
        }

        .v-progress-step.active .v-step-name {
            color: #d4af37;
            text-shadow: 0 0 6px rgba(212, 175, 55, 0.2);
        }

        .v-progress-step.active .v-step-dot {
            background: #fff;
            border-color: #d4af37;
            transform: scale(1.5);
            box-shadow: 
                0 0 15px rgba(212, 175, 55, 1),
                0 0 30px rgba(212, 175, 55, 0.6);
        }

        /* Pulsing indicator on active node */
        .v-progress-step.active .v-step-dot::after {
            content: '';
            position: absolute;
            top: -6px; left: -6px; right: -6px; bottom: -6px;
            border-radius: 50%;
            border: 1px solid rgba(212, 175, 55, 0.7);
            animation: vStepPulse 2s infinite ease-out;
            pointer-events: none;
        }

        @keyframes vStepPulse {
            0% { transform: scale(1); opacity: 1; }
            100% { transform: scale(1.8); opacity: 0; }
        }

        .v-progress-step:hover .v-step-dot {
            border-color: #d4af37;
            box-shadow: 0 0 10px rgba(212, 175, 55, 0.7);
            transform: scale(1.25);
        }

        .v-progress-step:hover .v-step-name {
            color: #f4e7c1;
        }

        .v-slides-viewport {
            position: relative;
            min-height: 0;
            width: 100%;
            overflow: visible;
            transition: height 0.32s ease;
        }

        .v-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            opacity: 0;
            pointer-events: none;
            visibility: hidden;
            transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1), transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.55s;
            transform: translateY(18px) scale(0.985);
            box-sizing: border-box;
        }

        .v-slide.active {
            position: relative;
            opacity: 1;
            pointer-events: auto;
            visibility: visible;
            transform: translateY(0) scale(1);
            z-index: 4;
        }

        .v-nav-arrow-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 46px;
            height: 46px;
            border-radius: 50%;
            background: rgba(11, 30, 58, 0.5);
            border: 1px solid rgba(212, 175, 55, 0.25);
            color: #f4e7c1;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }

        .v-nav-arrow-btn:hover {
            background: rgba(16, 38, 72, 0.85);
            border-color: #d4af37;
            color: #FFF9EC;
            box-shadow: 0 0 18px rgba(212, 175, 55, 0.65);
            transform: translateY(-50%) scale(1.08);
        }

        .v-nav-arrow-btn.prev {
            left: -12px;
        }

        .v-nav-arrow-btn.next {
            right: -12px;
        }

        .v-nav-arrow-btn.disabled {
            opacity: 0.12;
            pointer-events: none;
            border-color: rgba(255, 255, 255, 0.08);
        }

        /* SCREEN 01: HERO INTRO */
        .v-hero-slide {
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 24px;
            min-height: 580px;
            display: flex;
            flex-direction: column;
            z-index: 2;
        }

        /* Prologue overrides — top-aligned, full natural height */
        .v-prologue-slide.v-hero-slide {
            justify-content: flex-start;
            align-items: stretch;
            min-height: auto;
            padding: 0 0 2rem;
        }
        .v-prologue-slide.v-hero-slide > .v-section-header-wrap {
            align-self: center;
        }
        .v-prologue-slide .v-prologue-why,
        .v-prologue-slide .v-prologue-trinity,
        .v-prologue-slide .v-prologue-milestones,
        .v-prologue-slide .v-prologue-yahweh,
        .v-prologue-slide .v-prologue-discoveries,
        .v-prologue-slide .v-prologue-atlas-teaser,
        .v-prologue-slide .v-prologue-trinity-footer,
        .v-prologue-slide .v-hero-btn {
            align-self: center;
        }

        .v-hero-slide .v-section-header-wrap {
            display: block !important;
            width: min(1080px, 100%);
            margin: 0 auto 26px;
            padding: 34px 44px;
            flex: 0 0 auto;
        }

        /* Celestial Atmospheric Elements */
        .v-celestial-bg {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
            border-radius: 28px;
        }

        .v-constellation-svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.35;
            z-index: 1;
        }

        .v-ambient-glow {
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, rgba(212, 175, 55, 0.01) 55%, transparent 75%);
            border-radius: 50%;
            pointer-events: none;
            z-index: 0;
            mix-blend-mode: screen;
            animation: vAmbientBreathe 12s ease-in-out infinite;
        }

        @keyframes vAmbientBreathe {
            0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
            50% { transform: translate(-50%, -50%) scale(1.18); opacity: 1; }
        }

        .v-fog-overlay {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: radial-gradient(circle at 50% 30%, rgba(13, 27, 42, 0) 25%, rgba(6, 19, 39, 0.4) 65%);
            z-index: 2;
            pointer-events: none;
        }

        /* Title Area */
        .v-hero-title-area {
            margin-bottom: 20px;
            z-index: 3;
            position: relative;
        }

        .v-hero-title {
            font-family: 'Cinzel', serif;
            font-size: 3.25rem;
            font-weight: 800;
            letter-spacing: 0.15em;
            background: linear-gradient(135deg, #FFFDF8 0%, #F6E9C2 35%, #D4AF37 70%, #A27E1C 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-transform: uppercase;
            margin: 0 0 10px 0;
            text-shadow: 0 0 25px rgba(212, 175, 55, 0.22);
            animation: vTitleBloom 4s ease-in-out infinite alternate;
        }

        @keyframes vTitleBloom {
            0% { filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.1)); }
            100% { filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.35)); }
        }

        .v-hero-subtitle {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.45rem;
            font-style: italic;
            color: #F4E7C1;
            margin: 0;
            opacity: 0.9;
            letter-spacing: 0.16em;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
        }

        /* Centerpiece Logo (Compass/Mandala) */
        .v-hero-mandala-container {
            position: relative;
            width: 270px;
            height: 270px;
            margin: 10px auto 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 3;
        }

        .v-yahweh-static-label {
            position: relative;
            z-index: 4;
            margin: 26px auto 0;
            font-family: 'Cinzel', serif;
            font-size: 1.12rem;
            font-weight: 800;
            letter-spacing: 0.24em;
            color: #fff9ec;
            text-transform: uppercase;
            text-shadow:
                0 0 12px rgba(212, 175, 55, 0.72),
                0 2px 12px rgba(0, 0, 0, 0.75);
            pointer-events: none;
        }

        .v-hero-mandala-container svg {
            width: 100%;
            height: 100%;
            filter: drop-shadow(0 0 16px rgba(212, 175, 55, 0.25));
            animation: vRotateMandala 160s linear infinite;
        }

        .v-hero-mandala-container::before {
            content: '';
            position: absolute;
            width: 90%;
            height: 90%;
            border-radius: 50%;
            border: 1px double rgba(212, 175, 55, 0.16);
            animation: vBreatheRing 8s ease-in-out infinite alternate;
            pointer-events: none;
            box-shadow: inset 0 0 25px rgba(212, 175, 55, 0.05);
            z-index: 1;
        }

        .v-hero-mandala-container::after {
            content: '';
            position: absolute;
            width: 105%;
            height: 105%;
            border-radius: 50%;
            border: 1px dashed rgba(212, 175, 55, 0.08);
            animation: vRotateRing 200s linear infinite reverse;
            pointer-events: none;
            z-index: 1;
        }

        .v-mandala-glow {
            position: absolute;
            width: 170px;
            height: 170px;
            background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.02) 60%, transparent 80%);
            border-radius: 50%;
            pointer-events: none;
            z-index: 0;
            animation: vBreatheGlow 8s ease-in-out infinite;
        }

        @keyframes vRotateMandala {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes vRotateRing {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes vBreatheRing {
            0% { transform: scale(0.95); opacity: 0.4; }
            100% { transform: scale(1.05); opacity: 0.8; }
        }

        @keyframes vBreatheGlow {
            0%, 100% { transform: scale(1); opacity: 0.7; }
            50% { transform: scale(1.22); opacity: 1; filter: brightness(1.1); }
        }

        /* Scripture Meditation Block */
        .v-hero-scripture-block {
            max-width: 760px;
            width: 100%;
            margin: 16px auto 36px auto;
            background: rgba(8, 20, 38, 0.62);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 1px solid rgba(212, 175, 55, 0.16);
            border-radius: 20px;
            padding: 30px 44px;
            box-shadow: 
                0 18px 45px rgba(0, 0, 0, 0.55),
                inset 0 0 25px rgba(212, 175, 55, 0.02);
            position: relative;
            z-index: 3;
            box-sizing: border-box;
            transition: all 0.5s ease;
        }

        .v-hero-scripture-block::before {
            content: '“';
            position: absolute;
            top: 6px;
            left: 20px;
            font-family: 'Cinzel', serif;
            font-size: 5rem;
            color: rgba(212, 175, 55, 0.07);
            line-height: 1;
            pointer-events: none;
        }

        .v-hero-scripture {
            font-family: 'EB Garamond', serif;
            font-size: 1.22rem;
            line-height: 1.75;
            color: #FFF8EA;
            margin: 0 0 18px 0;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
            letter-spacing: 0.01em;
            font-weight: 500;
        }

        .v-verse-chip {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.12) 0%, rgba(13, 27, 42, 0.8) 100%);
            border: 1px solid rgba(212, 175, 55, 0.32);
            padding: 6px 20px;
            border-radius: 20px;
            box-shadow: 
                0 4px 10px rgba(0, 0, 0, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.04);
            transition: all 0.3s ease;
        }

        .v-verse-chip:hover {
            border-color: #d4af37;
            box-shadow: 0 0 14px rgba(212, 175, 55, 0.35);
            transform: translateY(-1.5px);
        }

        .v-verse-chip a {
            font-family: 'Cinzel', serif;
            font-size: 10px;
            font-weight: 700;
            color: #d4af37 !important;
            text-decoration: none !important;
            letter-spacing: 0.15em;
        }

        /* Journey Button */
        .v-hero-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            background: linear-gradient(135deg, #d4af37 0%, #f4e7c1 50%, #b88a4d 100%);
            background-size: 200% auto;
            border: 1px solid rgba(255, 255, 255, 0.22);
            color: #061327 !important;
            -webkit-text-fill-color: #061327 !important;
            font-family: 'Cinzel', serif;
            font-size: 12.5px;
            font-weight: 700;
            padding: 16px 40px;
            border-radius: 35px;
            cursor: pointer;
            box-shadow: 
                0 6px 22px rgba(212, 175, 55, 0.35),
                0 0 25px rgba(212, 175, 55, 0.12);
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            text-decoration: none !important;
            letter-spacing: 0.16em;
            position: relative;
            z-index: 3;
            animation: vButtonShimmer 6s infinite linear;
        }

        .v-hero-btn:hover {
            transform: translateY(-4px) scale(1.035);
            box-shadow: 
                0 10px 28px rgba(212, 175, 55, 0.55),
                0 0 35px rgba(212, 175, 55, 0.22);
            background-position: right center;
        }

        .v-hero-btn svg {
            transition: transform 0.3s ease;
        }

        .v-hero-btn:hover svg {
            transform: translateX(5px);
        }

        @keyframes vButtonShimmer {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* ═══════════════════════════════════════════
           SECTION 01 — GRAND PROLOGUE STYLES
           ═══════════════════════════════════════════ */

        .v-prologue-slide {
            padding-bottom: 2.5rem;
        }

        /* ── Why Journey ── */
        .v-prologue-why {
            margin: 1.4rem auto 0;
            max-width: 680px;
            padding: 0 1rem;
        }
        .v-prologue-why-inner {
            background:
                radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, 0.07) 0%, transparent 70%),
                rgba(255, 255, 255, 0.025);
            border: 1px solid rgba(212, 175, 55, 0.18);
            border-radius: 16px;
            padding: 1.8rem 2rem;
            text-align: center;
        }
        .v-prologue-why-label {
            font-family: 'Cinzel', serif;
            font-size: 0.65rem;
            font-weight: 700;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: rgba(212, 175, 55, 0.75);
            margin-bottom: 1.2rem;
        }
        .v-prologue-questions {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.55rem 1.2rem;
            margin-bottom: 1.2rem;
        }
        .v-prologue-questions span {
            font-family: 'Cinzel', serif;
            font-size: 0.88rem;
            font-weight: 600;
            color: rgba(232, 210, 150, 0.92);
            letter-spacing: 0.03em;
            position: relative;
            padding-left: 0.9rem;
        }
        .v-prologue-questions span::before {
            content: '✦';
            position: absolute;
            left: 0;
            font-size: 0.45rem;
            top: 50%;
            transform: translateY(-50%);
            color: rgba(212, 175, 55, 0.6);
        }
        .v-prologue-why-text {
            font-size: 0.84rem;
            color: rgba(220, 210, 185, 0.72);
            line-height: 1.7;
            margin: 0;
            font-style: italic;
        }

        /* ── Trinity Cards ── */
        .v-prologue-trinity {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0;
            margin: 1.6rem auto 0;
            max-width: 680px;
            padding: 0 1rem;
        }
        .v-prologue-trinity-connector {
            flex-shrink: 0;
            padding-bottom: 1rem;
            opacity: 0.7;
        }
        .v-prologue-trinity-card {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            text-align: center;
            background:
                radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.08), transparent 60%),
                rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(212, 175, 55, 0.15);
            border-radius: 14px;
            padding: 1.2rem 0.8rem;
            transition: border-color 0.25s ease, box-shadow 0.25s ease;
        }
        .v-prologue-trinity-card.center {
            border-color: rgba(212, 175, 55, 0.28);
            box-shadow: 0 0 24px rgba(212, 175, 55, 0.1);
        }
        .v-prologue-trinity-card:hover {
            border-color: rgba(212, 175, 55, 0.35);
            box-shadow: 0 0 20px rgba(212, 175, 55, 0.12);
        }
        .v-prologue-trinity-icon {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background:
                radial-gradient(circle at 35% 30%, rgba(212, 175, 55, 0.18), transparent 60%),
                rgba(13, 18, 40, 0.8);
            border: 1.5px solid rgba(212, 175, 55, 0.25);
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(212, 175, 55, 0.85);
        }
        .v-prologue-trinity-name {
            font-family: 'Cinzel', serif;
            font-size: 0.65rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: rgba(232, 210, 150, 0.9);
        }
        .v-prologue-trinity-desc {
            font-size: 0.72rem;
            color: rgba(220, 210, 185, 0.62);
            line-height: 1.5;
            margin: 0;
            font-style: italic;
        }
        .v-prologue-trinity-footer {
            text-align: center;
            font-size: 0.75rem;
            font-style: italic;
            color: rgba(212, 175, 55, 0.6);
            margin: 0.65rem auto 0;
            max-width: 340px;
            letter-spacing: 0.02em;
        }

        /* ── Journey Ahead Milestones ── */
        .v-prologue-milestones {
            margin: 1.6rem auto 0;
            max-width: 680px;
            padding: 0 1rem;
        }
        .v-prologue-milestones-label {
            font-family: 'Cinzel', serif;
            font-size: 0.65rem;
            font-weight: 700;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: rgba(212, 175, 55, 0.7);
            text-align: center;
            margin-bottom: 1.1rem;
        }
        .v-prologue-milestones-track {
            display: flex;
            flex-direction: column;
            gap: 0;
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(212, 175, 55, 0.12);
            border-radius: 14px;
            overflow: hidden;
        }
        .v-prologue-milestone {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 0.72rem 1.2rem;
            border-bottom: 1px solid rgba(212, 175, 55, 0.07);
            position: relative;
            transition: background 0.2s ease;
        }
        .v-prologue-milestone:last-child {
            border-bottom: none;
        }
        .v-prologue-milestone.first {
            background: linear-gradient(90deg, rgba(212, 175, 55, 0.07) 0%, transparent 60%);
        }
        .v-prologue-milestone:hover {
            background: rgba(212, 175, 55, 0.05);
        }
        .v-prologue-milestone-dot {
            flex-shrink: 0;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(212, 175, 55, 0.35);
            border: 1.5px solid rgba(212, 175, 55, 0.5);
            transition: background 0.2s ease, box-shadow 0.2s ease;
        }
        .v-prologue-milestone.first .v-prologue-milestone-dot {
            background: rgba(212, 175, 55, 0.8);
            box-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
        }
        .v-prologue-milestone-num {
            font-family: 'Cinzel', serif;
            font-size: 0.68rem;
            font-weight: 700;
            color: rgba(212, 175, 55, 0.7);
            letter-spacing: 0.06em;
            min-width: 24px;
        }
        .v-prologue-milestone-text {
            font-size: 0.82rem;
            color: rgba(220, 210, 185, 0.78);
            font-weight: 500;
            letter-spacing: 0.01em;
        }
        .v-prologue-milestone.first .v-prologue-milestone-text {
            color: rgba(232, 210, 150, 0.95);
            font-weight: 600;
        }

        /* ── YAHWEH Centerpiece Upgrades ── */
        .v-prologue-yahweh {
            margin: 1.8rem auto 0;
            max-width: 680px;
            padding: 0 1rem;
        }
        .v-prologue-yahweh-inner {
            background:
                radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, 0.09) 0%, transparent 60%),
                rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(212, 175, 55, 0.18);
            border-radius: 18px;
            padding: 2rem 2rem 1.5rem;
            text-align: center;
        }
        .v-prologue-yahweh-iam {
            font-family: 'Cinzel', serif;
            font-size: 1.05rem;
            font-weight: 600;
            color: rgba(212, 175, 55, 0.85);
            letter-spacing: 0.06em;
            margin: 0.3rem 0 0.8rem;
            font-style: italic;
        }
        .v-prologue-mandala {
            transform: scale(0.82);
            margin: -0.5rem auto;
        }
        .v-prologue-yahweh-desc {
            font-size: 0.84rem;
            color: rgba(220, 210, 185, 0.72);
            line-height: 1.65;
            margin: 0.8rem 0 0;
            font-style: italic;
        }
        .v-prologue-yahweh-highlight {
            font-family: 'Cinzel', serif;
            font-size: 0.78rem;
            color: rgba(212, 175, 55, 0.65);
            margin: 0.7rem 0 1rem;
            letter-spacing: 0.04em;
            line-height: 1.6;
        }

        /* ── Discovery Constellation Nodes ── */
        .v-prologue-discoveries {
            margin: 1.6rem auto 0;
            max-width: 680px;
            padding: 0 1rem;
        }
        .v-prologue-discoveries-label {
            font-family: 'Cinzel', serif;
            font-size: 0.65rem;
            font-weight: 700;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: rgba(212, 175, 55, 0.7);
            text-align: center;
            margin-bottom: 1.1rem;
        }
        .v-prologue-discovery-nodes {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.75rem;
        }
        @media (max-width: 600px) {
            .v-prologue-discovery-nodes {
                grid-template-columns: repeat(2, 1fr);
            }
            .v-prologue-trinity {
                flex-direction: column;
                gap: 0.6rem;
            }
            .v-prologue-trinity-connector {
                transform: rotate(90deg);
            }
        }
        @media (max-width: 480px) {
            .v-prologue-discoveries {
                padding: 0 10px !important;
                margin: 0 auto !important;
                max-width: 100% !important;
                width: 100% !important;
                box-sizing: border-box !important;
            }
            .v-prologue-discovery-nodes {
                grid-template-columns: 1fr !important;
                gap: 8px !important;
            }
            .v-prologue-discovery-node {
                flex-direction: row !important;
                justify-content: flex-start !important;
                align-items: center !important;
                gap: 12px !important;
                padding: 10px 16px !important;
                min-height: auto !important;
            }
            .v-prologue-discovery-icon {
                width: 42px !important;
                height: 42px !important;
                border-radius: 10px !important;
                flex-shrink: 0 !important;
            }
            .v-prologue-discovery-label {
                font-size: clamp(0.95rem, 3.8vw, 1.15rem) !important;
                text-align: left !important;
                line-height: 1.25 !important;
            }
        }
        .v-prologue-discovery-node {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.45rem;
            padding: 0.9rem 0.5rem;
            background:
                radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.07), transparent 65%),
                rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(212, 175, 55, 0.13);
            border-radius: 12px;
            text-align: center;
            opacity: 0;
            transform: translateY(10px);
            animation: vPrologueNodeFadeIn 0.5s forwards;
            transition: border-color 0.25s ease, box-shadow 0.25s ease;
        }
        .v-prologue-discovery-node:hover {
            border-color: rgba(212, 175, 55, 0.32);
            box-shadow: 0 0 14px rgba(212, 175, 55, 0.12);
        }
        @keyframes vPrologueNodeFadeIn {
            to { opacity: 1; transform: translateY(0); }
        }
        .v-prologue-discovery-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(212, 175, 55, 0.07);
            border: 1px solid rgba(212, 175, 55, 0.18);
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(212, 175, 55, 0.75);
        }
        .v-prologue-discovery-label {
            font-size: 0.66rem;
            font-weight: 600;
            letter-spacing: 0.04em;
            color: rgba(220, 210, 185, 0.75);
            line-height: 1.35;
        }

        /* ── Atlas Teaser ── */
        .v-prologue-atlas-teaser {
            margin: 1.5rem auto 0;
            max-width: 420px;
            padding: 0 1rem;
            text-align: center;
        }
        .v-prologue-atlas-eyebrow {
            font-family: 'Cinzel', serif;
            font-size: 0.58rem;
            font-weight: 700;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: rgba(212, 175, 55, 0.55);
            margin-bottom: 0.5rem;
        }
        .v-prologue-atlas-text {
            font-size: 0.78rem;
            color: rgba(220, 210, 185, 0.58);
            font-style: italic;
            line-height: 1.6;
            margin: 0 0 0.75rem;
        }
        .v-prologue-atlas-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.35rem 0.9rem;
            background: rgba(212, 175, 55, 0.06);
            border: 1px solid rgba(212, 175, 55, 0.2);
            border-radius: 999px;
            font-size: 0.64rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            color: rgba(212, 175, 55, 0.65);
            text-transform: uppercase;
        }
        .v-prologue-atlas-badge svg {
            color: rgba(212, 175, 55, 0.55);
        }

        /* ── Prologue CTA ── */
        .v-prologue-cta {
            margin-top: 1.6rem;
        }

        /* ── Section 01 premium refresh after intro cleanup ── */
        .v-prologue-slide.v-hero-slide {
            gap: clamp(18px, 2.2vw, 30px);
        }

        .v-prologue-slide .v-section-header-wrap {
            background:
                linear-gradient(180deg, rgba(8, 20, 42, 0.88), rgba(6, 16, 34, 0.72)),
                radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.12), transparent 54%) !important;
            border: 1px solid rgba(212, 175, 55, 0.24) !important;
            border-radius: 24px !important;
            box-shadow:
                0 26px 70px rgba(2, 8, 23, 0.36),
                inset 0 1px 0 rgba(255, 249, 236, 0.08) !important;
        }

        .v-prologue-why {
            margin-top: 0.2rem;
            max-width: 920px;
        }

        .v-prologue-why-inner,
        .v-prologue-yahweh-inner,
        .v-prologue-atlas-teaser {
            background:
                linear-gradient(180deg, rgba(255, 253, 248, 0.08), rgba(255, 253, 248, 0.035)),
                radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.13), transparent 58%),
                rgba(6, 18, 38, 0.76);
            border: 1px solid rgba(212, 175, 55, 0.24);
            border-radius: 18px;
            box-shadow:
                0 22px 60px rgba(2, 8, 23, 0.36),
                inset 0 1px 0 rgba(255, 249, 236, 0.08);
        }

        .v-prologue-why-label,
        .v-prologue-discoveries-label,
        .v-prologue-atlas-eyebrow {
            color: #d4af37;
            text-shadow: 0 0 14px rgba(212, 175, 55, 0.28);
        }

        .v-prologue-questions span,
        .v-prologue-yahweh-iam {
            color: #FFF9EC;
            text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
        }

        .v-prologue-why-text,
        .v-prologue-yahweh-desc,
        .v-prologue-atlas-text {
            color: rgba(255, 249, 236, 0.78);
        }

        .v-prologue-yahweh {
            margin-top: 0;
            max-width: 920px;
        }

        .v-prologue-yahweh-inner {
            padding: clamp(28px, 4vw, 46px);
        }

        .v-prologue-yahweh-highlight {
            color: rgba(212, 175, 55, 0.84);
        }

        .v-prologue-yahweh .v-hero-scripture-block {
            background:
                linear-gradient(180deg, rgba(255, 253, 248, 0.09), rgba(255, 253, 248, 0.04)),
                rgba(4, 14, 30, 0.7);
            border-color: rgba(212, 175, 55, 0.24);
            border-radius: 16px;
            box-shadow:
                0 18px 44px rgba(2, 8, 23, 0.3),
                inset 0 1px 0 rgba(255, 249, 236, 0.08);
        }

        .v-prologue-discoveries {
            max-width: 1080px;
            margin-top: 0;
        }

        .v-prologue-discovery-nodes {
            gap: clamp(14px, 1.6vw, 20px);
        }

        .v-prologue-discovery-node {
            min-height: 142px;
            justify-content: center;
            background:
                linear-gradient(180deg, rgba(255, 253, 248, 0.1), rgba(255, 253, 248, 0.045)),
                rgba(7, 18, 38, 0.78);
            border-color: rgba(212, 175, 55, 0.22);
            border-radius: 16px;
            box-shadow:
                0 16px 42px rgba(2, 8, 23, 0.26),
                inset 0 1px 0 rgba(255, 249, 236, 0.08);
        }

        .v-prologue-discovery-node:hover {
            border-color: rgba(212, 175, 55, 0.44);
            box-shadow:
                0 20px 54px rgba(2, 8, 23, 0.34),
                0 0 24px rgba(212, 175, 55, 0.1),
                inset 0 1px 0 rgba(255, 249, 236, 0.1);
        }

        .v-prologue-discovery-icon {
            width: 54px;
            height: 54px;
            border-radius: 14px;
            background:
                radial-gradient(circle at 50% 24%, rgba(255, 249, 236, 0.18), transparent 54%),
                rgba(212, 175, 55, 0.09);
            border-color: rgba(212, 175, 55, 0.28);
            color: #d4af37;
            box-shadow: 0 10px 26px rgba(212, 175, 55, 0.08);
        }

        .v-prologue-discovery-label {
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(1rem, 1.2vw, 1.18rem);
            font-weight: 600;
            color: #FFF9EC;
            letter-spacing: 0.01em;
        }

        .v-prologue-atlas-teaser {
            max-width: 720px;
            padding: 24px 28px;
        }

        .v-prologue-atlas-badge {
            background:
                linear-gradient(135deg, rgba(212, 175, 55, 0.18), rgba(255, 249, 236, 0.08));
            border-color: rgba(212, 175, 55, 0.32);
            color: #f4e7c1;
            box-shadow: 0 10px 28px rgba(2, 8, 23, 0.22);
        }

        .v-prologue-cta {
            margin-top: 0.2rem;
        }

        /* ── Desktop-wide prologue enhancements (≥ 900px) ── */
        @media (min-width: 900px) {
            .v-prologue-why,
            .v-prologue-milestones,
            .v-prologue-yahweh,
            .v-prologue-discoveries {
                max-width: 820px;
            }

            .v-prologue-trinity {
                max-width: 820px;
                gap: 0.25rem;
            }

            /* Horizontal illuminated milestone track on desktop */
            .v-prologue-milestones-track {
                flex-direction: row;
                border-radius: 999px;
                overflow: visible;
                background: none;
                border: none;
                gap: 0;
                padding: 0;
                position: relative;
            }
            .v-prologue-milestones-track::before {
                content: '';
                position: absolute;
                top: 18px;
                left: 20px;
                right: 20px;
                height: 1px;
                background: linear-gradient(90deg,
                    rgba(212,175,55,0.5) 0%,
                    rgba(212,175,55,0.15) 100%);
                z-index: 0;
            }
            .v-prologue-milestone {
                flex-direction: column;
                align-items: center;
                text-align: center;
                gap: 0.5rem;
                padding: 0 0.4rem 0;
                border-bottom: none;
                flex: 1;
                background: none !important;
                position: relative;
                z-index: 1;
            }
            .v-prologue-milestone.first .v-prologue-milestone-dot {
                width: 14px;
                height: 14px;
                box-shadow: 0 0 12px rgba(212,175,55,0.6), 0 0 24px rgba(212,175,55,0.25);
            }
            .v-prologue-milestone-dot {
                width: 10px;
                height: 10px;
                margin-bottom: 0.3rem;
            }
            .v-prologue-milestone-num {
                font-size: 0.6rem;
                display: block;
            }
            .v-prologue-milestone-text {
                font-size: 0.72rem;
                line-height: 1.3;
            }

            /* 4-col discovery grid on desktop */
            .v-prologue-discovery-nodes {
                grid-template-columns: repeat(4, 1fr);
                gap: 1rem;
            }
        }

        /* ── Wide desktop (≥ 1100px) — two-column WHY + TRINITY ── */
        @media (min-width: 1100px) {
            .v-prologue-why,
            .v-prologue-milestones,
            .v-prologue-yahweh,
            .v-prologue-discoveries {
                max-width: 960px;
            }
            .v-prologue-trinity {
                max-width: 960px;
            }
        }

        /* ═══════════════════════════════════════════════════════
           SECTION 03 — FOUR CHAPTER DISCOVERY EXPERIENCE
           ═══════════════════════════════════════════════════════ */

        /* ── Slide container ── */
        .v-s03-slide {
            padding: 0;
            align-items: stretch;
            justify-content: flex-start;
            min-height: auto;
            text-align: left;
        }
        .v-s03-slide > .v-section-header-wrap {
            align-self: center;
            text-align: center;
        }

        /* ── Chapter Progress Indicator ── */
        .v-s03-progress {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0;
            margin: 1.4rem auto 0;
            max-width: 680px;
            padding: 0 1rem;
        }
        .v-s03-progress-connector {
            flex-shrink: 0;
            width: 40px;
            height: 1px;
            background: linear-gradient(90deg, rgba(212,175,55,0.4), rgba(212,175,55,0.15));
        }
        .v-s03-progress-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.3rem;
            padding: 0.5rem 0.6rem;
            border-radius: 10px;
            color: inherit;
            cursor: pointer;
            text-decoration: none;
            transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
            -webkit-tap-highlight-color: transparent;
        }
        .v-s03-progress-item:hover,
        .v-s03-progress-item:focus-visible,
        .v-s03-progress-item.active {
            background: rgba(212,175,55,0.08);
        }
        .v-s03-progress-item:focus-visible {
            outline: 2px solid rgba(212,175,55,0.58);
            outline-offset: 4px;
            box-shadow: 0 0 22px rgba(212,175,55,0.14);
        }
        .v-s03-progress-num {
            font-family: 'Cinzel', serif;
            font-size: 0.65rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            color: rgba(212,175,55,0.55);
        }
        .v-s03-progress-item:hover .v-s03-progress-num,
        .v-s03-progress-item:focus-visible .v-s03-progress-num,
        .v-s03-progress-item.active .v-s03-progress-num {
            color: rgba(212,175,55,0.95);
        }
        .v-s03-progress-label {
            font-size: 0.62rem;
            font-weight: 600;
            letter-spacing: 0.04em;
            color: rgba(220,210,185,0.45);
            text-align: center;
            white-space: nowrap;
        }
        .v-s03-progress-item:hover .v-s03-progress-label,
        .v-s03-progress-item:focus-visible .v-s03-progress-label,
        .v-s03-progress-item.active .v-s03-progress-label {
            color: rgba(220,210,185,0.85);
        }

        /* ── Chapter Section ──
           Tab behaviour: only the active chapter is rendered. The
           progress nav above toggles `.is-active` between the 4
           chapters so the user sees one focused view at a time
           instead of a long scroll through all four. */
        .v-s03-chapter {
            display: none;
            padding: 3rem 1.5rem 2.5rem;
            max-width: 1080px;
            margin: 0 auto;
            width: 100%;
            box-sizing: border-box;
            scroll-margin-top: 96px;
        }
        .v-s03-chapter.is-active {
            display: block;
        }

        /* ── Chapter Header ── */
        .v-s03-chapter-header {
            text-align: center;
            margin-bottom: 2.5rem;
            padding-bottom: 2rem;
            border-bottom: 1px solid rgba(212,175,55,0.1);
            position: relative;
        }
        .v-s03-chapter-header::after {
            content: '✦';
            position: absolute;
            bottom: -0.6rem;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.7rem;
            color: rgba(212,175,55,0.5);
            background: var(--slide-bg, #0d1228);
            padding: 0 0.5rem;
        }
        .v-s03-chapter-eyebrow {
            font-family: 'Cinzel', serif;
            font-size: 0.6rem;
            font-weight: 700;
            letter-spacing: 0.25em;
            text-transform: uppercase;
            color: rgba(212,175,55,0.6);
            margin-bottom: 0.8rem;
        }
        .v-s03-chapter-title {
            font-family: 'Cinzel', serif;
            font-size: clamp(1.6rem, 3vw, 2.4rem);
            font-weight: 700;
            letter-spacing: 0.04em;
            color: rgba(232,210,150,0.96);
            margin: 0 0 0.7rem;
            line-height: 1.2;
        }
        .v-s03-chapter-sub {
            font-family: 'Cinzel', serif;
            font-size: 0.9rem;
            font-weight: 400;
            font-style: italic;
            color: rgba(212,175,55,0.7);
            margin: 0 0 1rem;
            letter-spacing: 0.03em;
        }
        .v-s03-chapter-desc {
            font-size: 0.88rem;
            color: rgba(220,210,185,0.65);
            line-height: 1.75;
            margin: 0 auto;
            max-width: 600px;
        }

        /* Chapter D: Jesus — elevated header colors */
        .v-s03-chapter-jesus .v-s03-chapter-eyebrow { color: rgba(212,175,55,0.85); }
        .v-s03-chapter-jesus .v-s03-chapter-title { color: #e8d296; }
        .v-s03-chapter-jesus .v-s03-chapter-sub { color: rgba(212,175,55,0.9); }

        /* ── Card Grid ── */
        .v-s03-card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 1.1rem;
            margin-bottom: 2rem;
        }

        /* ── Base Card ── */
        .v-s03-card {
            background:
                radial-gradient(circle at 50% 0%, rgba(212,175,55,0.06), transparent 60%),
                rgba(255,255,255,0.025);
            border: 1px solid rgba(212,175,55,0.14);
            border-radius: 16px;
            padding: 1.4rem 1.2rem;
            display: flex;
            flex-direction: column;
            gap: 0.55rem;
            transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
            position: relative;
            overflow: hidden;
        }
        .v-s03-card:hover {
            border-color: rgba(212,175,55,0.32);
            box-shadow: 0 4px 28px rgba(212,175,55,0.1);
            transform: translateY(-2px);
        }

        /* ── Chapter A: Names Revealed ── */
        .v-s03-name-card-num {
            font-family: 'Cinzel', serif;
            font-size: 0.55rem;
            font-weight: 700;
            letter-spacing: 0.15em;
            color: rgba(212,175,55,0.45);
            position: absolute;
            top: 0.9rem;
            right: 1rem;
        }
        .v-s03-name-explore-link {
            display: flex;
            flex: 1;
            flex-direction: column;
            gap: 0.55rem;
            min-height: 0;
            color: inherit;
            text-decoration: none;
        }
        .v-s03-name-explore-link:hover .v-s03-name-title,
        .v-s03-name-explore-link:focus-visible .v-s03-name-title {
            color: #fff9ec;
        }
        .v-s03-name-explore-link:focus-visible {
            border-radius: 10px;
            outline: 2px solid rgba(212,175,55,0.55);
            outline-offset: 6px;
        }
        .v-s03-name-title {
            font-family: 'Cinzel', serif;
            font-size: 1.1rem;
            font-weight: 700;
            color: rgba(232,210,150,0.96);
            letter-spacing: 0.04em;
            margin: 0;
            line-height: 1.25;
        }
        .v-s03-name-meaning {
            font-size: 0.8rem;
            font-style: italic;
            color: rgba(212,175,55,0.8);
            letter-spacing: 0.02em;
        }
        .v-s03-name-theme {
            font-size: 0.65rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: rgba(212,175,55,0.45);
            margin-top: 0.1rem;
        }
        .v-s03-name-app {
            font-size: 0.78rem;
            color: rgba(220,210,185,0.7);
            line-height: 1.6;
            flex: 1;
            border-top: 1px solid rgba(212,175,55,0.08);
            padding-top: 0.55rem;
            margin-top: 0.2rem;
        }

        /* ── Chapter B: Who God Is (Attributes) ── */
        .v-s03-attr-card {
            align-items: center;
            text-align: center;
            background:
                radial-gradient(circle at 50% 0%, rgba(212,175,55,0.07), transparent 55%),
                rgba(8, 12, 30, 0.6);
        }
        .v-s03-attr-explore-link {
            display: flex;
            flex: 1;
            flex-direction: column;
            align-items: center;
            gap: 0.55rem;
            min-height: 0;
            width: 100%;
            color: inherit;
            text-decoration: none;
        }
        .v-s03-attr-explore-link:hover .v-s03-attr-title,
        .v-s03-attr-explore-link:focus-visible .v-s03-attr-title {
            color: #fff9ec;
        }
        .v-s03-attr-explore-link:focus-visible {
            border-radius: 10px;
            outline: 2px solid rgba(212,175,55,0.55);
            outline-offset: 6px;
        }
        .v-s03-attr-icon {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            background:
                radial-gradient(circle at 35% 30%, rgba(212,175,55,0.15), transparent 60%),
                rgba(13,18,40,0.85);
            border: 1.5px solid rgba(212,175,55,0.22);
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(212,175,55,0.85);
            margin-bottom: 0.3rem;
        }
        .v-s03-attr-icon .v-card-icon {
            width: 24px;
            height: 24px;
        }
        .v-s03-attr-title {
            font-family: 'Cinzel', serif;
            font-size: 1rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            color: rgba(232,210,150,0.95);
            margin: 0;
        }
        .v-s03-attr-char {
            font-size: 0.75rem;
            font-style: italic;
            color: rgba(212,175,55,0.65);
            margin: 0;
        }
        .v-s03-attr-theme {
            font-size: 0.62rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: rgba(212,175,55,0.35);
            flex: 1;
            align-self: flex-end;
        }

        /* ── Chapter C: How He Relates ── */
        .v-s03-relational-explore-link {
            display: flex;
            flex: 1;
            flex-direction: column;
            gap: 0.55rem;
            min-height: 0;
            color: inherit;
            text-decoration: none;
        }
        .v-s03-relational-explore-link:hover .v-s03-relational-action,
        .v-s03-relational-explore-link:focus-visible .v-s03-relational-action {
            color: #fff9ec;
        }
        .v-s03-relational-explore-link:focus-visible {
            border-radius: 10px;
            outline: 2px solid rgba(212,175,55,0.55);
            outline-offset: 6px;
        }
        .v-s03-relational-action {
            font-family: 'Cinzel', serif;
            font-size: 1.05rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            color: rgba(232,210,150,0.95);
            margin: 0;
        }
        .v-s03-relational-quote {
            font-size: 0.8rem;
            font-style: italic;
            color: rgba(212,175,55,0.75);
            border-left: 2px solid rgba(212,175,55,0.35);
            margin: 0.2rem 0 0;
            padding-left: 0.75rem;
            line-height: 1.55;
        }
        .v-s03-relational-theme {
            font-size: 0.78rem;
            color: rgba(220,210,185,0.7);
            line-height: 1.6;
            flex: 1;
            margin: 0;
        }
        .v-s03-relational-name-link {
            display: flex;
            align-items: center;
            gap: 0.35rem;
            margin-top: auto;
            padding-top: 0.55rem;
            border-top: 1px solid rgba(212,175,55,0.08);
        }
        .v-s03-relational-via {
            font-size: 0.6rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: rgba(212,175,55,0.35);
        }
        .v-s03-relational-name {
            font-size: 0.65rem;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: rgba(212,175,55,0.55);
        }

        /* ── Chapter D: Jesus Revealed ── */
        .v-s03-jesus-card {
            border-color: rgba(212,175,55,0.2);
            background:
                radial-gradient(circle at 50% 0%, rgba(212,175,55,0.1), transparent 60%),
                rgba(10,8,20,0.75);
        }
        .v-s03-jesus-card:hover {
            border-color: rgba(212,175,55,0.45);
            box-shadow: 0 6px 36px rgba(212,175,55,0.18);
        }
        .v-s03-jesus-iam-label {
            font-family: 'Cinzel', serif;
            font-size: 0.58rem;
            font-weight: 700;
            letter-spacing: 0.3em;
            color: rgba(212,175,55,0.65);
            text-transform: uppercase;
        }
        .v-s03-jesus-title-text {
            font-family: 'Cinzel', serif;
            font-size: 1.05rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            color: #e8d296;
            margin: 0;
            line-height: 1.25;
        }
        .v-s03-jesus-subtitle {
            font-size: 0.72rem;
            font-style: italic;
            color: rgba(212,175,55,0.7);
            letter-spacing: 0.02em;
        }
        .v-s03-jesus-text {
            font-size: 0.8rem;
            color: rgba(220,210,185,0.75);
            line-height: 1.6;
            margin: 0;
            flex: 1;
        }
        .v-s03-jesus-app {
            font-size: 0.75rem;
            color: rgba(220,210,185,0.6);
            line-height: 1.55;
            font-style: italic;
            border-top: 1px solid rgba(212,175,55,0.1);
            padding-top: 0.55rem;
            margin-top: 0.15rem;
        }

        /* ── Shared: Tone Chips ── */
        .v-s03-tone-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 0.35rem;
            margin-top: 0.2rem;
        }
        .v-s03-chip {
            font-size: 0.58rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: rgba(212,175,55,0.7);
            background: rgba(212,175,55,0.07);
            border: 1px solid rgba(212,175,55,0.18);
            border-radius: 999px;
            padding: 0.2rem 0.55rem;
        }
        .v-s03-jesus-chip {
            color: rgba(232,210,150,0.8);
            background: rgba(212,175,55,0.1);
            border-color: rgba(212,175,55,0.28);
        }

        /* ── Shared: Card Footer ── */
        .v-s03-card-footer {
            margin-top: auto;
            padding-top: 0.6rem;
        }
        .v-s03-card:not(.v-s03-attr-card) .v-s03-card-footer {
            border-top: 1px solid rgba(212,175,55,0.08);
        }

        /* ── Scripture Dividers ── */
        .v-s03-divider {
            display: flex;
            align-items: center;
            gap: 1.2rem;
            padding: 2rem 2rem;
            max-width: 820px;
            margin: 0 auto;
        }
        .v-s03-divider-line {
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg,
                transparent,
                rgba(212,175,55,0.28) 30%,
                rgba(212,175,55,0.28) 70%,
                transparent);
        }
        .v-s03-divider-content {
            text-align: center;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
        }
        .v-s03-divider-quote {
            font-family: 'Cinzel', serif;
            font-size: 0.82rem;
            font-style: italic;
            color: rgba(212,175,55,0.72);
            letter-spacing: 0.02em;
            line-height: 1.5;
        }
        .v-s03-divider-ref {
            font-family: 'Cinzel', serif;
            font-size: 0.6rem;
            font-weight: 700;
            letter-spacing: 0.15em;
            color: rgba(212,175,55,0.45);
            text-transform: uppercase;
        }

        /* ── Journey Step ── */
        .v-s03-journey-step {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.6rem;
            margin: 0 auto 1.4rem;
            padding: 0.9rem 1.5rem;
            background:
                radial-gradient(circle at 50% 0%, rgba(212,175,55,0.06), transparent 70%),
                rgba(255,255,255,0.02);
            border: 1px solid rgba(212,175,55,0.13);
            border-radius: 999px;
            max-width: 480px;
            font-size: 0.82rem;
            color: rgba(220,210,185,0.75);
            letter-spacing: 0.02em;
        }
        .v-s03-journey-step strong {
            color: rgba(232,210,150,0.92);
        }
        .v-s03-step-mark {
            font-size: 0.6rem;
            color: rgba(212,175,55,0.6);
            flex-shrink: 0;
        }
        .v-s03-jesus-step {
            border-color: rgba(212,175,55,0.25);
            background:
                radial-gradient(circle at 50% 0%, rgba(212,175,55,0.1), transparent 70%),
                rgba(255,255,255,0.02);
        }

        /* ── Atlas Callout ── */
        .v-s03-atlas-callout {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 0.4rem 0.7rem;
            padding: 0.75rem 1.2rem;
            background: rgba(212,175,55,0.04);
            border: 1px solid rgba(212,175,55,0.1);
            border-radius: 10px;
            max-width: 560px;
            margin: 0 auto;
        }
        .v-s03-atlas-label {
            font-size: 0.62rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: rgba(212,175,55,0.45);
        }
        .v-s03-atlas-arrow {
            font-size: 0.75rem;
            color: rgba(212,175,55,0.5);
        }
        .v-s03-atlas-link {
            font-family: 'Cinzel', serif;
            font-size: 0.65rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            color: rgba(212,175,55,0.7);
            cursor: pointer;
            transition: color 0.2s ease;
            padding: 0.2rem 0.5rem;
            border-radius: 4px;
            border: 1px solid transparent;
        }
        .v-s03-atlas-link:hover {
            color: rgba(212,175,55,1);
            border-color: rgba(212,175,55,0.25);
            background: rgba(212,175,55,0.06);
        }
        .v-s03-atlas-sep {
            font-size: 0.6rem;
            color: rgba(212,175,55,0.3);
        }
        .v-s03-jesus-atlas {
            border-color: rgba(212,175,55,0.18);
            background: rgba(212,175,55,0.06);
        }

        /* ── Responsive: Mobile ── */
        @media (max-width: 600px) {
            .v-s03-progress {
                gap: 0;
            }
            .v-s03-progress-connector {
                width: 20px;
            }
            .v-s03-progress-label {
                font-size: 0.52rem;
            }
            .v-s03-chapter {
                padding: 2rem 1rem 1.5rem;
                scroll-margin-top: 76px;
            }
            .v-s03-card-grid {
                grid-template-columns: 1fr 1fr;
                gap: 0.75rem;
            }
            .v-s03-divider {
                flex-direction: column;
                gap: 0.7rem;
                padding: 1.5rem 1rem;
            }
            .v-s03-divider-line {
                width: 60px;
                flex: none;
            }
            .v-s03-journey-step {
                padding: 0.75rem 1rem;
                font-size: 0.76rem;
            }
        }

        /* ── Responsive: Desktop ── */
        @media (min-width: 900px) {
            .v-s03-card-grid {
                grid-template-columns: repeat(4, 1fr);
                gap: 1.2rem;
            }
        }
        @media (min-width: 1100px) {
            .v-s03-chapter {
                padding: 3.5rem 2rem 3rem;
            }
        }

        /* Stepper Micro labels */

        .v-step-micro {
            font-family: 'Outfit', 'Inter', sans-serif;
            font-size: 8px;
            font-weight: 600;
            color: rgba(212, 175, 55, 0.7);
            text-transform: uppercase;
            letter-spacing: 0.12em;
            margin-top: 6px;
            opacity: 0;
            transform: translateY(4px);
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            pointer-events: none;
            height: 0;
            overflow: visible;
            white-space: nowrap;
        }

        .v-progress-step.active .v-step-micro {
            opacity: 1;
            transform: translateY(0);
            text-shadow: 0 0 8px rgba(212, 175, 55, 0.25);
        }

        /* Intro State Customizations for header duplication */
        .v-on-intro .v-header .v-header-center {
            opacity: 0;
            pointer-events: none;
            transform: translateY(-12px);
            transition: all 0.55s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .visuals-dashboard:not(.v-on-intro) .v-header .v-header-center {
            opacity: 1;
            transform: translateY(0);
            transition: all 0.55s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* SCREEN 02: WHO GOD IS (Collectible cards) */
        .v-attr-card {
            background: linear-gradient(180deg, rgba(16, 30, 58, 0.6) 0%, rgba(6, 19, 39, 0.85) 100%);
            border: 1px solid rgba(212, 175, 55, 0.15);
            border-radius: 16px;
            padding: 24px 16px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
            position: relative;
            overflow: hidden;
            box-sizing: border-box;
        }

        .v-attr-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.08) 0%, transparent 60%);
            pointer-events: none;
        }

        .v-attr-card:hover {
            border-color: rgba(212, 175, 55, 0.5);
            transform: translateY(-5px);
            box-shadow: 
                0 16px 36px rgba(0, 0, 0, 0.55),
                0 0 15px rgba(212, 175, 55, 0.2);
        }

        .v-attr-card-icon {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: rgba(212, 175, 55, 0.05);
            border: 1px solid rgba(212, 175, 55, 0.22);
            color: #d4af37;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 4px;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
            transition: all 0.3s;
        }

        .v-attr-card:hover .v-attr-card-icon {
            background: rgba(212, 175, 55, 0.16);
            border-color: rgba(212, 175, 55, 0.5);
            box-shadow: 0 0 10px rgba(212, 175, 55, 0.35);
        }

        .v-attr-name {
            font-family: 'Cinzel', serif;
            font-size: 13.5px;
            font-weight: 700;
            color: #FFF9EC;
            margin: 0;
            letter-spacing: 0.06em;
        }

        .v-attr-statement {
            font-family: 'Cormorant Garamond', serif;
            font-size: 11px;
            font-style: italic;
            color: #c9a46b;
            margin: 0;
            line-height: 1.35;
        }

        /* SCREEN 03: HOW GOD RELATES (Story cards) */
        .v-story-cards-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            margin-top: 16px;
            width: 100%;
        }

        .v-story-card {
            background: linear-gradient(135deg, rgba(16, 30, 58, 0.65) 0%, rgba(6, 17, 34, 0.9) 100%);
            border: 1px solid rgba(212, 175, 55, 0.16);
            border-radius: 18px;
            padding: 26px 22px;
            display: flex;
            flex-direction: column;
            gap: 14px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
            transition: all 0.38s cubic-bezier(0.16, 1, 0.3, 1);
            position: relative;
            overflow: hidden;
            box-sizing: border-box;
        }

        .v-story-card:hover {
            transform: translateY(-5px);
            border-color: rgba(212, 175, 55, 0.45);
            box-shadow: 
                0 18px 40px rgba(0,0,0,0.55),
                0 0 18px rgba(212, 175, 55, 0.16);
        }

        .v-story-card::before {
            content: '';
            position: absolute;
            top: -20%; left: -20%; width: 140%; height: 140%;
            background: radial-gradient(circle, rgba(212, 175, 55, 0.06) 0%, transparent 60%);
            pointer-events: none;
            transition: opacity 0.5s;
            opacity: 0.5;
        }

        .v-story-card:hover::before {
            opacity: 1;
        }

        .v-story-card-header {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .v-story-icon-wrap {
            width: 38px;
            height: 38px;
            border-radius: 10px;
            background: rgba(212, 175, 55, 0.08);
            border: 1px solid rgba(212, 175, 55, 0.25);
            color: #d4af37;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 3px 8px rgba(0,0,0,0.3);
            flex-shrink: 0;
            transition: all 0.3s;
        }

        .v-story-card:hover .v-story-icon-wrap {
            background: rgba(212, 175, 55, 0.18);
            border-color: rgba(212, 175, 55, 0.55);
            box-shadow: 0 0 8px rgba(212, 175, 55, 0.35);
        }

        .v-story-title {
            font-family: 'Cinzel', serif;
            font-size: 13.5px;
            font-weight: 700;
            color: #FFF9EC;
            margin: 0;
            letter-spacing: 0.05em;
        }

        .v-story-quote {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 12.5px;
            font-style: italic;
            color: rgba(255, 249, 236, 0.95);
            line-height: 1.45;
            margin: 0;
            border-left: 2px solid rgba(212, 175, 55, 0.35);
            padding-left: 12px;
        }

        .v-story-insight {
            font-size: 11px;
            color: #cbd5e1;
            line-height: 1.45;
            margin: 0;
        }

        /* SCREEN 04: NAMES REVEALED (Illuminated Manuscript) */
        .v-names-parchment-container {
            background: radial-gradient(circle at 50% 50%, rgba(13, 26, 48, 0.95) 0%, #050d18 100%);
            border: 2px solid rgba(212, 175, 55, 0.25);
            border-radius: 24px;
            padding: 36px 28px;
            position: relative;
            box-shadow: inset 0 0 60px rgba(0,0,0,0.85), 0 12px 45px rgba(0,0,0,0.65);
            overflow: hidden;
            width: 100%;
            box-sizing: border-box;
        }

        .v-names-parchment-container::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background-image: radial-gradient(rgba(212, 175, 55, 0.04) 1px, transparent 1px);
            background-size: 24px 24px;
            pointer-events: none;
            z-index: 1;
        }

        .v-names-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px;
            position: relative;
            z-index: 2;
            width: 100%;
        }

        .v-name-panel {
            background: linear-gradient(180deg, rgba(20, 35, 60, 0.8) 0%, rgba(10, 18, 30, 0.95) 100%);
            border: 1px solid rgba(212, 175, 55, 0.16);
            border-radius: 16px;
            padding: 22px 14px;
            text-align: center;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(0,0,0,0.45);
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
            position: relative;
        }

        .v-name-panel:hover {
            border-color: #d4af37;
            box-shadow: 
                0 12px 28px rgba(0,0,0,0.55),
                0 0 15px rgba(212, 175, 55, 0.3);
            transform: translateY(-4px);
        }

        .v-name-panel-title {
            font-family: 'Cinzel', serif;
            font-size: 14px;
            font-weight: 700;
            color: #FFF9EC;
            margin: 0 0 6px 0;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            text-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
        }

        .v-name-panel-meaning {
            font-family: 'Cormorant Garamond', serif;
            font-size: 11px;
            font-style: italic;
            color: #c9a46b;
            margin: 0;
            letter-spacing: 0.02em;
        }

        /* SCREEN 05: JESUS I AM CAROUSEL */
        .v-carousel-container {
            position: relative;
            width: 100%;
            overflow: hidden;
            padding: 12px 0 24px 0;
            box-sizing: border-box;
        }

        .v-carousel-track {
            display: flex;
            gap: 24px;
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            will-change: transform;
            width: 100%;
        }

        .v-carousel-card {
            width: 100%;
            max-width: 650px;
            flex-shrink: 0;
            border-radius: 24px;
            border: 1px solid rgba(212, 175, 55, 0.22);
            padding: 44px 36px;
            display: flex;
            flex-direction: column;
            gap: 20px;
            min-height: 340px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.65);
            position: relative;
            overflow: hidden;
            justify-content: center;
            transition: all 0.5s;
            box-sizing: border-box;
            background: #061327;
        }

        .v-carousel-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.08) 0%, transparent 80%);
            pointer-events: none;
            z-index: 1;
        }

        .v-carousel-card-header {
            font-family: 'Cinzel', serif;
            font-size: 10px;
            font-weight: 700;
            color: #d4af37;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            margin-bottom: -8px;
            z-index: 2;
        }

        .v-carousel-card-title {
            font-family: 'Cinzel', serif;
            font-size: 1.85rem;
            font-weight: 800;
            color: #FFF9EC;
            margin: 0;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            z-index: 2;
            text-shadow: 0 2px 10px rgba(0,0,0,0.4);
            line-height: 1.25;
        }

        .v-carousel-card-quote {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 13.5px;
            font-style: italic;
            color: rgba(255, 249, 236, 0.95);
            line-height: 1.55;
            margin: 0;
            z-index: 2;
            border-left: 3px solid rgba(212, 175, 55, 0.4);
            padding-left: 16px;
        }

        .v-carousel-card-theme {
            font-size: 11px;
            color: #cbd5e1;
            line-height: 1.45;
            margin: 0;
            z-index: 2;
        }

        .v-carousel-dots {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-top: 24px;
        }

        .v-carousel-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .v-carousel-dot.active {
            background: #d4af37;
            transform: scale(1.45);
            box-shadow: 0 0 8px rgba(212, 175, 55, 0.85);
        }

        /* SCREEN 06: THE GOSPEL BRIDGE PATHWAY */
        .v-gospel-bridge-path {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 32px;
            max-width: 650px;
            margin: 32px auto;
            width: 100%;
        }

        .v-gospel-bridge-line {
            position: absolute;
            top: 20px;
            bottom: 20px;
            width: 2px;
            background: linear-gradient(180deg, rgba(239, 68, 68, 0.4) 0%, rgba(212, 175, 55, 0.85) 50%, rgba(16, 185, 129, 0.85) 100%);
            z-index: 1;
        }

        .v-gospel-node {
            display: flex;
            align-items: center;
            gap: 20px;
            width: 100%;
            z-index: 2;
            position: relative;
            box-sizing: border-box;
        }

        .v-gospel-node-bullet {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #061327;
            border: 2px solid currentColor;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 10px currentColor;
            flex-shrink: 0;
            transition: all 0.3s;
        }

        .v-gospel-node:hover .v-gospel-node-bullet {
            transform: scale(1.15);
            box-shadow: 0 0 15px currentColor;
        }

        .v-gospel-node-content {
            flex: 1;
            padding: 18px 22px;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 4px 18px rgba(0,0,0,0.45);
            background: rgba(11, 30, 58, 0.45);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            transition: all 0.3s;
        }

        .v-gospel-node:hover .v-gospel-node-content {
            border-color: rgba(255, 255, 255, 0.16);
            background: rgba(16, 38, 72, 0.55);
        }

        .v-gospel-node-title {
            font-family: 'Cinzel', serif;
            font-size: 12px;
            font-weight: 700;
            margin: 0 0 6px 0;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .v-gospel-node-desc {
            font-size: 10.5px;
            color: #cbd5e1;
            margin: 0 0 10px 0;
            line-height: 1.45;
        }

        /* Node-specific colors */
        .v-gospel-darkness { color: #ef4444; }
        .v-gospel-separation { color: #f97316; }
        .v-gospel-cross { color: #d4af37; }
        .v-gospel-light { color: #3b82f6; }
        .v-gospel-transformation { color: #10b981; }
        .v-gospel-glory { color: #f4e7c1; }

        /* SCREEN 07: TRANSFORMATION JOURNEY TIMELINE */
        .v-timeline-container {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 28px;
            max-width: 720px;
            margin: 32px auto;
            width: 100%;
        }

        .v-timeline-line {
            position: absolute;
            left: 24px;
            top: 12px;
            bottom: 12px;
            width: 2px;
            background: rgba(212, 175, 55, 0.15);
            z-index: 1;
        }

        .v-timeline-line-active {
            position: absolute;
            left: 24px;
            top: 12px;
            width: 2px;
            background: linear-gradient(180deg, #d4af37, #f4e7c1);
            z-index: 2;
            transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            height: 0%;
        }

        .v-timeline-step {
            display: flex;
            gap: 24px;
            align-items: flex-start;
            z-index: 3;
            position: relative;
            width: 100%;
            box-sizing: border-box;
        }

        .v-timeline-badge {
            width: auto;
            min-width: 48px;
            height: 48px;
            padding: 0 12px;
            border-radius: 24px;
            background: #061327;
            border: 2px solid rgba(212, 175, 55, 0.3);
            color: rgba(212, 175, 55, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Cinzel', serif;
            font-weight: 700;
            font-size: 13px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.35);
            flex-shrink: 0;
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
            box-sizing: border-box;
        }

        .v-timeline-step.active .v-timeline-badge {
            border-color: #d4af37;
            color: #FFF9EC;
            box-shadow: 0 0 15px rgba(212, 175, 55, 0.8);
            transform: scale(1.1);
        }

        .v-timeline-step-content {
            flex: 1;
            background: rgba(11, 30, 58, 0.45);
            border: 1px solid rgba(212, 175, 55, 0.1);
            border-radius: 16px;
            padding: 18px 22px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.4);
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .v-timeline-step.active .v-timeline-step-content {
            border-color: rgba(212, 175, 55, 0.4);
            box-shadow: 0 12px 30px rgba(0,0,0,0.5);
            background: rgba(16, 38, 72, 0.5);
        }

        .v-timeline-step-text {
            font-size: 12px;
            color: #cbd5e1;
            line-height: 1.5;
            margin: 0;
            transition: color 0.3s;
        }

        .v-timeline-step.active .v-timeline-step-text {
            color: #f1f5f9;
        }

        /* SCREEN 09: REFLECTION */
        .v-reflection-slide {
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 36px 24px 44px;
            min-height: 0;
            display: flex;
            flex-direction: column;
        }

        .v-reflection-quote {
            font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
            font-size: 2.15rem;
            font-style: italic;
            color: #FFF9EC;
            max-width: 760px;
            margin: 0 auto 20px auto;
            line-height: 1.5;
            text-shadow: 0 0 15px rgba(255, 249, 236, 0.3);
        }

        .v-reflection-ref {
            font-family: 'Cinzel', serif;
            font-size: 11px;
            letter-spacing: 0.18em;
            color: #d4af37;
            margin-bottom: 44px;
            text-transform: uppercase;
        }

        .v-reflection-ctas {
            display: flex;
            gap: 16px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .v-reflection-btn-outline {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: transparent;
            border: 1px solid rgba(212, 175, 55, 0.45);
            color: #f4e7c1 !important;
            -webkit-text-fill-color: #f4e7c1 !important;
            font-family: 'Cinzel', serif;
            font-size: 11px;
            font-weight: 700;
            padding: 12px 24px;
            border-radius: 30px;
            cursor: pointer;
            text-decoration: none !important;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        }

        .v-reflection-btn-outline:hover {
            border-color: #d4af37;
            background: rgba(212, 175, 55, 0.05);
            box-shadow: 0 0 12px rgba(212, 175, 55, 0.35);
            transform: translateY(-2px);
        }

        /* ═══════════════════════════════════════════════════════
           SECTION 06 — JOURNEY CULMINATION
           ═══════════════════════════════════════════════════════ */

        /* ── Slide container ── */
        .v-s06-slide {
            justify-content: flex-start;
            align-items: stretch;
            min-height: auto;
            padding: 0 0 3rem;
            text-align: center;
        }
        .v-s06-quote {
            font-size: clamp(1.2rem, 2.5vw, 1.9rem) !important;
            margin-bottom: 12px !important;
        }
        .v-s06-ref {
            margin-bottom: 0 !important;
        }

        /* ── Elegant Chapter Dividers ── */
        .v-s06-chapter-divider {
            display: flex;
            align-items: center;
            gap: 1.2rem;
            padding: 2rem 2rem;
            max-width: 720px;
            margin: 0 auto;
        }
        .v-s06-divider-line {
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg,
                transparent,
                rgba(212,175,55,0.25) 25%,
                rgba(212,175,55,0.25) 75%,
                transparent);
        }
        .v-s06-divider-ornament {
            flex-shrink: 0;
            font-size: 0.65rem;
            color: rgba(212,175,55,0.5);
            letter-spacing: 0.1em;
        }
        .v-s06-divider-scripture {
            flex-shrink: 0;
            font-family: 'Cinzel', serif;
            font-size: 0.72rem;
            font-style: italic;
            color: rgba(212,175,55,0.65);
            letter-spacing: 0.03em;
            text-align: center;
            max-width: 340px;
            line-height: 1.5;
        }

        /* ── Block Wrapper ── */
        .v-s06-block {
            max-width: 820px;
            margin: 0 auto;
            padding: 0 1.5rem 2.5rem;
            width: 100%;
            box-sizing: border-box;
        }
        .v-s06-block-eyebrow {
            font-family: 'Cinzel', serif;
            font-size: 0.6rem;
            font-weight: 700;
            letter-spacing: 0.25em;
            text-transform: uppercase;
            color: rgba(212,175,55,0.6);
            margin-bottom: 0.6rem;
        }
        .v-s06-block-title {
            font-family: 'Cinzel', serif;
            font-size: clamp(1.4rem, 2.5vw, 2rem);
            font-weight: 700;
            color: rgba(232,210,150,0.97);
            letter-spacing: 0.04em;
            margin: 0 0 0.8rem;
            line-height: 1.2;
        }
        .v-s06-block-desc {
            font-size: 0.88rem;
            color: rgba(220,210,185,0.65);
            line-height: 1.8;
            margin: 0 auto 2rem;
            max-width: 560px;
        }

        /* ────────────────────────────
           BLOCK 01 — JOURNEY RECAP
        ──────────────────────────── */
        .v-s06-recap-timeline {
            display: flex;
            flex-direction: column;
            gap: 0;
            text-align: left;
            max-width: 620px;
            margin: 0 auto;
        }
        .v-s06-recap-step {
            display: flex;
            align-items: flex-start;
            gap: 1.1rem;
            position: relative;
            animation: s06FadeIn 0.5s ease both;
        }
        @keyframes s06FadeIn {
            from { opacity: 0; transform: translateX(-12px); }
            to   { opacity: 1; transform: translateX(0); }
        }
        .v-s06-recap-left {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex-shrink: 0;
            width: 36px;
        }
        .v-s06-recap-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background:
                radial-gradient(circle at 40% 35%, rgba(212,175,55,0.18), transparent 60%),
                rgba(13,18,40,0.9);
            border: 1.5px solid rgba(212,175,55,0.28);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            color: rgba(212,175,55,0.8);
            flex-shrink: 0;
        }
        .v-s06-recap-connector {
            flex: 1;
            width: 1px;
            background: linear-gradient(to bottom,
                rgba(212,175,55,0.25),
                rgba(212,175,55,0.06));
            min-height: 24px;
            margin: 4px 0;
        }
        .v-s06-recap-connector.last {
            background: transparent;
        }
        .v-s06-recap-content {
            flex: 1;
            padding: 0.5rem 0 1.4rem;
        }
        .v-s06-recap-num {
            font-family: 'Cinzel', serif;
            font-size: 0.55rem;
            font-weight: 700;
            letter-spacing: 0.18em;
            color: rgba(212,175,55,0.45);
            margin-bottom: 0.2rem;
        }
        .v-s06-recap-label {
            font-family: 'Cinzel', serif;
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            color: rgba(232,210,150,0.9);
            margin-bottom: 0.35rem;
        }
        .v-s06-recap-desc {
            font-size: 0.8rem;
            color: rgba(220,210,185,0.65);
            line-height: 1.6;
            margin: 0;
        }
        .v-s06-recap-check {
            flex-shrink: 0;
            font-size: 0.9rem;
            color: rgba(130,200,140,0.75);
            padding-top: 0.5rem;
            font-weight: 700;
        }

        /* ────────────────────────────
           BLOCK 02 — KEY TRUTHS
        ──────────────────────────── */
        .v-s06-truth-list {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            max-width: 620px;
            margin: 0 auto;
            text-align: left;
        }
        .v-s06-truth-item {
            display: flex;
            align-items: flex-start;
            gap: 1.1rem;
            padding: 1.1rem 1.4rem;
            background: rgba(255,255,255,0.018);
            border: 1px solid rgba(212,175,55,0.1);
            border-radius: 12px;
            animation: s06FadeIn 0.5s ease both;
            transition: border-color 0.2s ease, background 0.2s ease;
        }
        .v-s06-truth-item:hover {
            border-color: rgba(212,175,55,0.22);
            background: rgba(212,175,55,0.04);
        }
        .v-s06-truth-mark {
            font-size: 0.65rem;
            color: rgba(212,175,55,0.6);
            padding-top: 0.3rem;
            flex-shrink: 0;
        }
        .v-s06-truth-body {
            flex: 1;
        }
        .v-s06-truth-statement {
            font-family: 'Cinzel', serif;
            font-size: clamp(1.05rem, 2vw, 1.3rem);
            font-weight: 700;
            color: rgba(232,210,150,0.95);
            letter-spacing: 0.02em;
            margin: 0 0 0.35rem;
            line-height: 1.3;
        }
        .v-s06-truth-sub {
            font-size: 0.8rem;
            color: rgba(220,210,185,0.6);
            line-height: 1.6;
            margin: 0;
        }

        /* ────────────────────────────
           BLOCK 03 — PRAYER
        ──────────────────────────── */
        .v-s06-prayer-container {
            max-width: 600px;
            margin: 0 auto;
            background:
                radial-gradient(circle at 50% 0%, rgba(212,175,55,0.07), transparent 55%),
                rgba(255,255,255,0.02);
            border: 1px solid rgba(212,175,55,0.18);
            border-radius: 20px;
            padding: 2.2rem 2rem;
            text-align: left;
            position: relative;
        }
        .v-s06-prayer-ornament {
            display: flex;
            justify-content: center;
            margin-bottom: 1.4rem;
            color: rgba(212,175,55,0.55);
        }
        .v-s06-prayer-text {
            font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
            font-size: 1.05rem;
            line-height: 1.9;
            color: rgba(240,230,200,0.85);
        }
        .v-s06-prayer-text p {
            margin: 0 0 1rem;
        }
        .v-s06-prayer-text p:last-child {
            margin-bottom: 0;
        }
        .v-s06-prayer-text em {
            color: rgba(212,175,55,0.9);
            font-style: italic;
        }
        .v-s06-prayer-ref {
            margin-top: 1.4rem;
            text-align: center;
            padding-top: 1rem;
            border-top: 1px solid rgba(212,175,55,0.1);
        }

        /* ────────────────────────────
           BLOCK 04 — REFLECTION QUESTIONS
        ──────────────────────────── */
        .v-s06-questions-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            max-width: 680px;
            margin: 0 auto;
            text-align: left;
        }
        .v-s06-question-card {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(212,175,55,0.12);
            border-radius: 14px;
            padding: 1.1rem 1.2rem;
            transition: border-color 0.2s ease;
        }
        .v-s06-question-card:focus-within {
            border-color: rgba(212,175,55,0.35);
        }
        .v-s06-question-label {
            font-family: 'Cinzel', serif;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            color: rgba(212,175,55,0.75);
            cursor: default;
        }
        .v-s06-question-input {
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(212,175,55,0.1);
            border-radius: 8px;
            color: rgba(230,220,195,0.88);
            font-family: 'EB Garamond', Georgia, serif;
            font-size: 0.88rem;
            line-height: 1.6;
            padding: 0.65rem 0.8rem;
            resize: vertical;
            outline: none;
            transition: border-color 0.2s ease, background 0.2s ease;
            width: 100%;
            box-sizing: border-box;
        }
        .v-s06-question-input::placeholder {
            color: rgba(212,175,55,0.28);
            font-style: italic;
        }
        .v-s06-question-input:focus {
            border-color: rgba(212,175,55,0.4);
            background: rgba(212,175,55,0.03);
        }

        /* ────────────────────────────
           BLOCK 05 — ATLAS GATEWAY
        ──────────────────────────── */
        .v-s06-atlas-nodes {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.85rem;
            margin: 0 auto 2rem;
            max-width: 580px;
        }
        .v-s06-atlas-node {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.4rem;
            padding: 1rem 1.1rem 0.85rem;
            background:
                radial-gradient(circle at 50% 20%, var(--node-glow, rgba(212,175,55,0.15)), transparent 65%),
                rgba(13,18,40,0.7);
            border: 1px solid rgba(212,175,55,0.18);
            border-radius: 14px;
            min-width: 80px;
            cursor: pointer;
            transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
            animation: s06FadeIn 0.5s ease both;
        }
        .v-s06-atlas-node:hover {
            border-color: rgba(212,175,55,0.45);
            box-shadow: 0 4px 20px var(--node-glow, rgba(212,175,55,0.2));
            transform: translateY(-3px);
        }
        .v-s06-atlas-node-icon {
            font-size: 1rem;
            color: rgba(212,175,55,0.7);
            line-height: 1;
        }
        .v-s06-atlas-node-label {
            font-family: 'Cinzel', serif;
            font-size: 0.58rem;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: rgba(232,210,150,0.85);
            text-align: center;
        }
        .v-s06-atlas-bridge {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(212,175,55,0.12);
            border-radius: 14px;
            padding: 1.1rem 1.4rem;
            margin: 0 auto 1.5rem;
            max-width: 580px;
            text-align: left;
        }
        .v-s06-atlas-bridge-icon {
            flex-shrink: 0;
            color: rgba(212,175,55,0.6);
            padding-top: 0.1rem;
        }
        .v-s06-atlas-bridge-text {
            font-size: 0.83rem;
            color: rgba(220,210,185,0.72);
            line-height: 1.7;
            margin: 0;
        }
        .v-s06-atlas-bridge-text strong {
            color: rgba(232,210,150,0.95);
            font-weight: 700;
        }
        .v-s06-atlas-cta {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: linear-gradient(135deg, rgba(212,175,55,0.22), rgba(180,140,40,0.12));
            border: 1.5px solid rgba(212,175,55,0.45);
            border-radius: 50px;
            color: rgba(232,210,150,0.95);
            font-family: 'Cinzel', serif;
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            padding: 0.85rem 2rem;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 2px 14px rgba(212,175,55,0.15);
        }
        .v-s06-atlas-cta:hover {
            background: linear-gradient(135deg, rgba(212,175,55,0.32), rgba(180,140,40,0.2));
            border-color: rgba(212,175,55,0.7);
            box-shadow: 0 4px 22px rgba(212,175,55,0.28);
            transform: translateY(-2px);
        }

        /* ────────────────────────────
           SUMMIT CARD
        ──────────────────────────── */
        .v-s06-summit-card {
            max-width: 560px;
            margin: 0 auto;
            padding: 2.5rem 2rem;
            background:
                radial-gradient(ellipse at 50% 0%, rgba(212,175,55,0.1), transparent 60%),
                rgba(255,255,255,0.025);
            border: 1px solid rgba(212,175,55,0.22);
            border-radius: 24px;
            text-align: center;
            box-shadow:
                0 0 40px rgba(212,175,55,0.08),
                inset 0 1px 0 rgba(212,175,55,0.1);
        }
        .v-s06-summit-eyebrow {
            font-family: 'Cinzel', serif;
            font-size: 0.6rem;
            font-weight: 700;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: rgba(212,175,55,0.7);
            margin-bottom: 1rem;
        }
        .v-s06-summit-text {
            font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
            font-size: 1.25rem;
            font-style: italic;
            color: rgba(240,230,200,0.88);
            line-height: 1.7;
            margin: 0 0 1.8rem;
        }
        .v-s06-summit-actions {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }

        /* ── Mobile ── */
        @media (max-width: 640px) {
            .v-s06-questions-grid {
                grid-template-columns: 1fr;
            }
            .v-s06-chapter-divider {
                flex-direction: column;
                gap: 0.8rem;
                padding: 1.5rem 1rem;
            }
            .v-s06-divider-line {
                width: 50px;
                flex: none;
                align-self: center;
                height: 1px;
            }
            .v-s06-prayer-container {
                padding: 1.5rem 1.2rem;
            }
            .v-s06-truth-statement {
                font-size: 1.05rem;
            }
        }



        /* REMOVED SCREEN */

        .v-synthesis-loading,
        .v-synthesis-empty {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            min-height: 150px;
            padding: 22px;
            border: 1px solid rgba(212, 175, 55, 0.18);
            border-radius: 18px;
            background: rgba(11, 30, 58, 0.44);
            color: rgba(244, 248, 255, 0.78);
            font-size: 13px;
            text-align: center;
            box-sizing: border-box;
        }

        .v-synthesis-ref-group {
            color: rgba(206, 220, 231, 0.78);
            white-space: normal;
        }

        .v-synthesis-ref-link {
            color: #d8b45a !important;
            text-decoration: none !important;
            display: inline-block;
            padding: 0 3px 1px;
            border-bottom: 0;
            border-radius: 4px;
            background: rgba(37, 85, 105, 0.32);
            box-shadow: inset 0 0 0 1px rgba(113, 169, 185, 0.12);
            transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
        }

        .v-synthesis-ref-link:hover {
            color: #fff7d6 !important;
            background: rgba(59, 122, 145, 0.42);
            box-shadow:
                inset 0 0 0 1px rgba(216, 180, 90, 0.22),
                0 0 0 2px rgba(216, 180, 90, 0.055);
        }

        .v-synthesis-ref-separator {
            color: rgba(203, 213, 225, 0.55);
            margin-left: 2px;
        }

        .v-synthesis-reference-tooltip {
            position: fixed;
            z-index: 10020;
            width: min(360px, calc(100vw - 32px));
            pointer-events: none;
            opacity: 0;
            visibility: hidden;
            transform: translate(-50%, calc(-100% - 12px));
            padding: 14px 16px 15px;
            border-radius: 14px;
            border: 1px solid rgba(218, 177, 80, 0.38);
            background:
                radial-gradient(circle at 18% 0%, rgba(216, 180, 90, 0.13), transparent 38%),
                linear-gradient(180deg, rgba(7, 24, 48, 0.97), rgba(4, 16, 35, 0.98));
            box-shadow:
                0 18px 46px rgba(0, 0, 0, 0.48),
                0 0 0 1px rgba(255, 255, 255, 0.035),
                inset 0 1px 0 rgba(255, 255, 255, 0.07);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            transition: opacity 0.16s ease, visibility 0.16s ease, transform 0.16s ease;
        }

        .v-synthesis-reference-tooltip.active {
            opacity: 1;
            visibility: visible;
            transform: translate(-50%, calc(-100% - 10px));
        }

        .v-synthesis-reference-tooltip[data-placement="bottom"] {
            transform: translate(-50%, 12px);
        }

        .v-synthesis-reference-tooltip[data-placement="bottom"].active {
            transform: translate(-50%, 10px);
        }

        .v-synthesis-reference-tooltip::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: -6px;
            width: 10px;
            height: 10px;
            border-right: 1px solid rgba(218, 177, 80, 0.38);
            border-bottom: 1px solid rgba(218, 177, 80, 0.38);
            background: rgba(4, 16, 35, 0.98);
            transform: translateX(-50%) rotate(45deg);
        }

        .v-synthesis-reference-tooltip[data-placement="bottom"]::after {
            top: -6px;
            bottom: auto;
            border-right: 0;
            border-bottom: 0;
            border-left: 1px solid rgba(218, 177, 80, 0.38);
            border-top: 1px solid rgba(218, 177, 80, 0.38);
        }

        .v-synthesis-reference-tooltip-ref {
            margin-bottom: 7px;
            color: #d8b45a;
            font-family: 'Cinzel', serif;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .v-synthesis-reference-tooltip-text {
            color: rgba(235, 241, 249, 0.86);
            font-family: 'Inter', system-ui, sans-serif;
            font-size: 12px;
            line-height: 1.55;
        }

        /* SCREEN 07: THEOLOGICAL ATLAS */
        /* ═══════════════════════════════════════════════════════
           THEOLOGICAL ATLAS — Trinity Architecture + Domain Chapters
           ═══════════════════════════════════════════════════════ */

        .v-atlas-slide {
            padding-top: 0 !important;
            padding-bottom: 0 !important;
        }
        .v-atlas-slide .v-section-header-wrap {
            width: min(980px, 100%);
            margin: 0 auto 0;
            padding: 16px 34px;
            position: relative;
            z-index: 3;
        }

        .v-atlas-mode-selector {
            width: min(720px, calc(100% - 32px));
            margin: 0 auto 18px;
            padding: 16px 18px;
            border: 1px solid rgba(212,175,55,0.22);
            border-radius: 18px;
            background:
                radial-gradient(circle at 50% 0%, rgba(212,175,55,0.12), transparent 62%),
                linear-gradient(180deg, rgba(8, 20, 42, 0.82), rgba(5, 14, 30, 0.9));
            box-shadow:
                inset 0 1px 0 rgba(255,249,236,0.08),
                0 18px 50px rgba(2,8,23,0.28);
            position: relative;
            z-index: 4;
        }
        .v-atlas-mode-selector-label {
            margin-bottom: 10px;
            font-family: 'Cinzel', serif;
            font-size: 0.62rem;
            font-weight: 800;
            letter-spacing: 0.18em;
            color: rgba(255,249,236,0.72);
            text-transform: uppercase;
        }
        .v-atlas-mode-options {
            display: flex;
            gap: 12px;
        }
        .v-atlas-mode-btn {
            appearance: none;
            min-height: 40px;
            padding: 0 22px;
            border: 1px solid rgba(212,175,55,0.26);
            border-radius: 999px;
            background: rgba(212,175,55,0.06);
            color: rgba(232,210,150,0.84);
            cursor: pointer;
            font-family: 'Cinzel', serif;
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.13em;
            text-transform: uppercase;
            transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
        }
        .v-atlas-mode-btn:hover,
        .v-atlas-mode-btn:focus-visible,
        .v-atlas-mode-btn.active {
            border-color: rgba(212,175,55,0.52);
            background:
                linear-gradient(135deg, rgba(212,175,55,0.2), rgba(255,249,236,0.08));
            color: #fff9ec;
            box-shadow: 0 0 22px rgba(212,175,55,0.12);
            outline: none;
        }
        .v-atlas-slide[data-atlas-mode="canonical"] [data-atlas-theological-static],
        .v-atlas-slide[data-atlas-mode="canonical"] .v-god-architecture-library,
        .v-atlas-slide[data-atlas-mode="theological"] [data-atlas-canonical-library] {
            display: none !important;
        }

        /* ── Atlas Intro Container ── */
        .v-atlas-intro {
            max-width: 720px;
            margin: 0 auto 16px;
            padding: 0 1.5rem;
            text-align: center;
            position: relative;
            z-index: 3;
        }

        /* ══════════════════════════════
           TRINITY ARCHITECTURE DIAGRAM
        ══════════════════════════════ */
        .v-atlas-trinity {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0;
            margin-bottom: 0.8rem;
        }

        /* Apex row — GOD alone at top */
        .v-atlas-trinity-apex {
            display: flex;
            justify-content: center;
            margin-bottom: 0;
        }

        /* SVG connector lines area */
        .v-atlas-trinity-connectors {
            width: 100%;
            max-width: 440px;
            height: 46px;
            margin: -4px 0;
        }
        .v-atlas-trinity-svg {
            width: 100%;
            height: 100%;
            overflow: visible;
        }

        /* Base row — CHRIST and HOLY SPIRIT */
        .v-atlas-trinity-base {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            gap: 0;
            width: 100%;
            max-width: 440px;
        }
        .v-atlas-trinity-base-spacer {
            flex: 1;
            min-width: 60px;
        }

        /* Individual Trinity Node */
        .v-atlas-trinity-node {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.35rem;
            padding: 1rem 1.4rem 0.9rem;
            border-radius: 18px;
            border: 1.5px solid rgba(212,175,55,0.2);
            background:
                radial-gradient(circle at 50% 10%, var(--tnode-glow, rgba(212,175,55,0.12)), transparent 60%),
                rgba(9,13,32,0.82);
            position: relative;
            transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
        }
        .v-atlas-trinity-node:hover {
            border-color: rgba(212,175,55,0.45);
            box-shadow: 0 8px 32px var(--tnode-glow, rgba(212,175,55,0.18));
            transform: translateY(-3px);
        }

        /* GOD — larger, gold, with outer pulse ring */
        .v-atlas-trinity-god {
            --tnode-glow: rgba(212,175,55,0.22);
            border-color: rgba(212,175,55,0.32);
            min-width: 150px;
        }
        .v-atlas-trinity-god .v-atlas-trinity-node-icon {
            color: rgba(212,175,55,0.9);
        }
        .v-atlas-trinity-node-glow {
            position: absolute;
            inset: -8px;
            border-radius: 24px;
            border: 1px solid rgba(212,175,55,0.1);
            animation: atlasNodePulse 4s ease-in-out infinite;
            pointer-events: none;
        }
        @keyframes atlasNodePulse {
            0%, 100% { opacity: 0.4; transform: scale(1); }
            50%       { opacity: 1;   transform: scale(1.03); }
        }

        /* CHRIST — purple tint */
        .v-atlas-trinity-christ {
            --tnode-glow: rgba(180,140,200,0.18);
            border-color: rgba(180,140,200,0.22);
            min-width: 120px;
        }
        .v-atlas-trinity-christ .v-atlas-trinity-node-icon {
            color: rgba(190,160,220,0.85);
        }

        /* HOLY SPIRIT — blue tint */
        .v-atlas-trinity-spirit {
            --tnode-glow: rgba(100,180,220,0.18);
            border-color: rgba(100,180,220,0.22);
            min-width: 120px;
        }
        .v-atlas-trinity-spirit .v-atlas-trinity-node-icon {
            color: rgba(120,190,230,0.85);
        }

        .v-atlas-trinity-node-icon {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.06);
        }
        .v-atlas-trinity-label {
            font-family: 'Cinzel', serif;
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.2em;
            color: rgba(232,210,150,0.97);
        }
        .v-atlas-trinity-sub {
            font-size: 0.6rem;
            color: rgba(212,175,55,0.5);
            letter-spacing: 0.04em;
            font-style: italic;
        }
        .v-atlas-trinity-tagline {
            font-family: 'EB Garamond', Georgia, serif;
            font-size: 0.88rem;
            font-style: italic;
            color: rgba(212,175,55,0.5);
            margin: 0.9rem 0 0;
            letter-spacing: 0.04em;
        }

        /* ── Intro Divider ── */
        .v-atlas-intro-divider {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin: 1.4rem 0;
        }
        .v-atlas-intro-divider-line {
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg,
                transparent,
                rgba(212,175,55,0.22) 30%,
                rgba(212,175,55,0.22) 70%,
                transparent);
        }
        .v-atlas-intro-divider-label {
            flex-shrink: 0;
            font-family: 'Cinzel', serif;
            font-size: 0.55rem;
            font-weight: 700;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: rgba(212,175,55,0.45);
        }

        /* ══════════════════════════════
           DOMAIN CHAPTER TILES
        ══════════════════════════════ */
        .v-atlas-chapters {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0;
            width: 100%;
        }

        /* Vertical stem connector between chapters */
        .v-atlas-chapter-stem {
            width: 1px;
            height: 18px;
            background: linear-gradient(to bottom,
                rgba(212,175,55,0.2),
                rgba(212,175,55,0.1));
            flex-shrink: 0;
        }
        .v-atlas-chapter-stem-first {
            height: 10px;
        }

        /* Chapter tile */
        .v-atlas-chapter {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            cursor: pointer;
        }
        .v-atlas-chapter-inner {
            display: flex;
            align-items: center;
            gap: 1rem;
            width: 100%;
            padding: 0.9rem 1.2rem;
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(212,175,55,0.1);
            border-radius: 14px;
            text-align: left;
            transition: border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease, transform 0.18s ease;
        }
        .v-atlas-chapter:hover .v-atlas-chapter-inner,
        .v-atlas-chapter.active .v-atlas-chapter-inner {
            border-color: rgba(212,175,55,0.32);
            background: rgba(212,175,55,0.045);
            box-shadow: 0 4px 20px rgba(212,175,55,0.1);
            transform: translateX(3px);
        }
        .v-atlas-chapter.active .v-atlas-chapter-inner {
            border-color: rgba(212,175,55,0.5);
            box-shadow: 0 4px 24px rgba(212,175,55,0.16);
        }
        .v-atlas-chapter-num {
            font-family: 'Cinzel', serif;
            font-size: 1.5rem;
            font-weight: 700;
            color: rgba(212,175,55,0.18);
            line-height: 1;
            flex-shrink: 0;
            width: 36px;
            text-align: center;
        }
        .v-atlas-chapter:hover .v-atlas-chapter-num,
        .v-atlas-chapter.active .v-atlas-chapter-num {
            color: rgba(212,175,55,0.45);
        }
        .v-atlas-chapter-icon {
            font-size: 1rem;
            color: rgba(212,175,55,0.55);
            flex-shrink: 0;
            width: 22px;
            text-align: center;
        }
        .v-atlas-chapter-body {
            flex: 1;
            min-width: 0;
        }
        .v-atlas-chapter-name {
            font-family: 'Cinzel', serif;
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            color: rgba(232,210,150,0.92);
            margin-bottom: 0.2rem;
        }
        .v-atlas-chapter-purpose {
            font-size: 0.73rem;
            color: rgba(220,210,185,0.55);
            line-height: 1.5;
            margin: 0 0 0.4rem;
        }
        .v-atlas-chapter-topics {
            display: flex;
            flex-wrap: wrap;
            gap: 0.3rem;
        }
        .v-atlas-chapter-topic {
            appearance: none;
            cursor: pointer;
            font-family: 'Cinzel', serif;
            font-size: 0.52rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            color: rgba(212,175,55,0.6);
            background: rgba(212,175,55,0.07);
            border: 1px solid rgba(212,175,55,0.15);
            border-radius: 999px;
            padding: 0.12rem 0.55rem;
        }
        .v-atlas-chapter-topic:hover,
        .v-atlas-chapter-topic:focus-visible,
        .v-atlas-chapter-topic.active {
            color: #fff9ec;
            border-color: rgba(212,175,55,0.48);
            background: rgba(212,175,55,0.14);
            outline: none;
        }
        .v-atlas-chapter-arrow {
            flex-shrink: 0;
            color: rgba(212,175,55,0.25);
            transition: color 0.2s ease, transform 0.2s ease;
        }
        .v-atlas-chapter:hover .v-atlas-chapter-arrow {
            color: rgba(212,175,55,0.6);
            transform: translateX(3px);
        }

        /* ── Learning Level Badges ── */
        .v-atlas-levels {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 0.5rem 0.7rem;
            margin: 1.1rem 0 0;
        }
        .v-atlas-level-badge {
            font-size: 0.58rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            padding: 0.22rem 0.7rem;
            border-radius: 999px;
            border: 1px solid;
        }
        .v-atlas-level-foundation {
            color: rgba(130,200,140,0.85);
            border-color: rgba(130,200,140,0.3);
            background: rgba(130,200,140,0.06);
        }
        .v-atlas-level-intermediate {
            color: rgba(212,175,55,0.85);
            border-color: rgba(212,175,55,0.3);
            background: rgba(212,175,55,0.06);
        }
        .v-atlas-level-advanced {
            color: rgba(180,140,200,0.85);
            border-color: rgba(180,140,200,0.3);
            background: rgba(180,140,200,0.06);
        }
        .v-atlas-levels-sep {
            font-size: 0.55rem;
            color: rgba(212,175,55,0.3);
        }

        .v-canonical-atlas-library {
            width: min(1180px, 100%);
            margin: 0 auto;
        }
        .v-canonical-atlas {
            padding: clamp(18px, 2vw, 28px);
            border: 1px solid rgba(212,175,55,0.2);
            background:
                radial-gradient(circle at 50% 0%, rgba(212,175,55,0.1), transparent 58%),
                rgba(5, 14, 30, 0.72);
            box-shadow:
                inset 0 1px 0 rgba(255,249,236,0.06),
                0 18px 55px rgba(2,8,23,0.24);
        }
        .v-canonical-header {
            max-width: 780px;
            margin: 0 auto 24px;
            text-align: center;
        }
        .v-canonical-header p {
            margin: -2px 0 0;
            color: rgba(255,249,236,0.72);
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(1.05rem, 1.5vw, 1.28rem);
            font-style: italic;
            line-height: 1.5;
        }
        .v-canonical-testaments {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: clamp(18px, 2.2vw, 28px);
        }
        .v-canonical-testament > header {
            margin-bottom: 14px;
            border-bottom: 1px solid rgba(212,175,55,0.2);
            padding-bottom: 10px;
        }
        .v-canonical-testament > header span {
            color: #d4af37;
            font-family: 'Cinzel', serif;
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.22em;
            text-transform: uppercase;
        }
        .v-canonical-book-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
            gap: 12px;
        }
        .v-canonical-book-card {
            appearance: none;
            display: flex;
            min-height: 132px;
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
            padding: 18px;
            border: 1px solid rgba(212,175,55,0.16);
            border-radius: 14px;
            background:
                radial-gradient(circle at 88% 8%, rgba(212,175,55,0.1), transparent 42%),
                rgba(255,255,255,0.025);
            color: inherit;
            cursor: pointer;
            text-align: left;
            transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.18s ease;
        }
        .v-canonical-book-card:hover,
        .v-canonical-book-card:focus-visible,
        .v-canonical-book-card.active {
            border-color: rgba(212,175,55,0.42);
            background:
                radial-gradient(circle at 88% 8%, rgba(212,175,55,0.16), transparent 46%),
                rgba(212,175,55,0.05);
            box-shadow: 0 12px 34px rgba(2,8,23,0.28), 0 0 22px rgba(212,175,55,0.09);
            outline: none;
            transform: translateY(-2px);
        }
        .v-canonical-book-title {
            font-family: 'Cinzel', serif;
            font-size: 1rem;
            font-weight: 800;
            letter-spacing: 0.1em;
            color: rgba(255,249,236,0.94);
            text-transform: uppercase;
        }
        .v-canonical-book-count,
        .v-canonical-book-linked {
            color: rgba(220,210,185,0.7);
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.04em;
        }
        .v-canonical-book-linked {
            color: rgba(212,175,55,0.58);
        }
        .v-canonical-book-explore {
            margin-top: auto;
            color: #d4af37;
            font-family: 'Cinzel', serif;
            font-size: 0.66rem;
            font-weight: 800;
            letter-spacing: 0.14em;
            text-transform: uppercase;
        }
        .v-canonical-book-detail,
        .v-canonical-chapter-detail {
            margin-top: 24px;
            padding: clamp(18px, 2vw, 26px);
            border: 1px solid rgba(212,175,55,0.2);
            border-radius: 18px;
            background:
                linear-gradient(180deg, rgba(255,253,248,0.055), rgba(255,253,248,0.026)),
                rgba(4,13,29,0.62);
        }
        .v-canonical-book-detail > header,
        .v-canonical-chapter-detail > header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 18px;
        }
        .v-canonical-detail-kicker {
            display: block;
            margin-bottom: 4px;
            color: rgba(212,175,55,0.58);
            font-family: 'Cinzel', serif;
            font-size: 0.58rem;
            font-weight: 800;
            letter-spacing: 0.16em;
            text-transform: uppercase;
        }
        .v-canonical-book-detail h3,
        .v-canonical-chapter-detail h3 {
            margin: 0;
            color: #fff9ec;
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(1.7rem, 2.4vw, 2.4rem);
            font-weight: 700;
            letter-spacing: 0.02em;
        }
        .v-canonical-detail-count {
            border: 1px solid rgba(212,175,55,0.24);
            border-radius: 999px;
            padding: 7px 12px;
            color: rgba(232,210,150,0.86);
            background: rgba(212,175,55,0.07);
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            white-space: nowrap;
        }
        .v-canonical-back-btn {
            appearance: none;
            border: 1px solid rgba(212,175,55,0.22);
            border-radius: 999px;
            padding: 7px 12px;
            color: rgba(232,210,150,0.82);
            background: rgba(212,175,55,0.06);
            cursor: pointer;
            font-family: 'Cinzel', serif;
            font-size: 0.62rem;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }
        .v-canonical-chapter-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
            gap: 10px;
        }
        .v-canonical-chapter-pill {
            appearance: none;
            display: flex;
            min-height: 50px;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            gap: 4px;
            border: 1px solid rgba(212,175,55,0.18);
            border-radius: 999px;
            padding: 8px 14px;
            background: rgba(212,175,55,0.055);
            color: rgba(255,249,236,0.84);
            cursor: pointer;
            text-align: left;
        }
        .v-canonical-chapter-pill:hover,
        .v-canonical-chapter-pill:focus-visible,
        .v-canonical-chapter-pill.active {
            border-color: rgba(212,175,55,0.48);
            background: rgba(212,175,55,0.13);
            outline: none;
        }
        .v-canonical-chapter-pill.empty {
            opacity: 0.62;
        }
        .v-canonical-chapter-pill span {
            font-family: 'Cinzel', serif;
            font-size: 0.68rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        .v-canonical-chapter-pill em {
            color: rgba(212,175,55,0.64);
            font-size: 0.66rem;
            font-style: normal;
            font-weight: 700;
        }
        .v-canonical-entry-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 14px;
        }
        .v-canonical-entry-card {
            padding: 20px;
            border: 1px solid rgba(212,175,55,0.18);
            border-radius: 14px;
            background:
                radial-gradient(circle at 90% 0%, rgba(212,175,55,0.08), transparent 48%),
                rgba(255,255,255,0.025);
            cursor: pointer;
            transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.18s ease;
        }
        .v-canonical-entry-card:hover,
        .v-canonical-entry-card:focus-visible {
            border-color: rgba(212,175,55,0.44);
            box-shadow: 0 12px 34px rgba(2,8,23,0.24);
            outline: none;
            transform: translateY(-2px);
        }
        .v-canonical-entry-eyebrow {
            color: rgba(212,175,55,0.64);
            font-family: 'Cinzel', serif;
            font-size: 0.58rem;
            font-weight: 800;
            letter-spacing: 0.14em;
            text-transform: uppercase;
        }
        .v-canonical-entry-card h5 {
            margin: 10px 0 14px;
            color: #fff9ec;
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.28rem;
            font-weight: 700;
            line-height: 1.25;
        }
        .v-canonical-entry-meta,
        .v-canonical-entry-refs {
            display: grid;
            grid-template-columns: 78px minmax(0, 1fr);
            gap: 8px;
            margin-top: 8px;
            color: rgba(255,249,236,0.72);
            font-size: 0.74rem;
        }
        .v-canonical-entry-meta span,
        .v-canonical-entry-refs > span {
            color: rgba(212,175,55,0.55);
            font-family: 'Cinzel', serif;
            font-size: 0.56rem;
            font-weight: 800;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }
        .v-canonical-entry-refs > div {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .v-canonical-empty-chapter {
            padding: 22px;
            border: 1px dashed rgba(212,175,55,0.22);
            border-radius: 14px;
            color: rgba(255,249,236,0.68);
            text-align: center;
        }

        /* ── Mobile ── */
        @media (max-width: 600px) {
            .v-atlas-mode-selector {
                width: calc(100% - 20px);
                padding: 14px;
            }
            .v-atlas-mode-options,
            .v-canonical-testaments {
                grid-template-columns: 1fr;
            }
            .v-atlas-mode-options {
                display: grid;
            }
            .v-atlas-mode-btn {
                width: 100%;
            }
            .v-canonical-testaments {
                display: grid;
            }
            .v-canonical-book-detail > header,
            .v-canonical-chapter-detail > header {
                align-items: flex-start;
                flex-direction: column;
            }
            .v-canonical-detail-count {
                white-space: normal;
            }
            .v-canonical-entry-meta,
            .v-canonical-entry-refs {
                grid-template-columns: 1fr;
            }
            .v-atlas-trinity-base {
                max-width: 100%;
            }
            .v-atlas-trinity-god { min-width: 120px; }
            .v-atlas-trinity-christ,
            .v-atlas-trinity-spirit { min-width: 100px; padding: 0.85rem 1rem; }
            .v-atlas-trinity-base-spacer { min-width: 20px; }
            .v-atlas-chapter-num { font-size: 1.1rem; width: 28px; }
            .v-atlas-chapter-purpose { display: none; }
        }

        /* =========================================================
           PREMIUM ATLAS UPGRADE
           Replaces the bright blue rectangular headers with deep
           navy → royal blue illuminated panels, gold typography,
           subtle constellation texture, and book-cover card feel.
           Goal: Logos-meets-Apple, museum-quality theological library.
           ========================================================= */

        /* -------- 1. Testament headers (OLD / NEW TESTAMENT) -------- */
        .v-canonical-testament > header {
            position: relative;
            overflow: hidden;
            margin-bottom: 18px !important;
            padding: 18px 24px !important;
            border: 1px solid rgba(212, 175, 55, 0.32) !important;
            border-radius: 14px !important;
            background:
                radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.12), transparent 60%),
                linear-gradient(180deg, rgba(7, 24, 48, 0.95) 0%, rgba(4, 14, 32, 0.97) 60%, #02112e 100%) !important;
            box-shadow:
                0 14px 36px rgba(2, 8, 23, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.06),
                inset 0 -1px 0 rgba(212, 175, 55, 0.12) !important;
            text-align: center;
        }
        .v-canonical-testament > header::before {
            /* constellation dot pattern */
            content: "";
            position: absolute;
            inset: 0;
            background-image:
                radial-gradient(rgba(255, 230, 157, 0.30) 1px, transparent 1px),
                radial-gradient(rgba(255, 230, 157, 0.18) 1px, transparent 1px);
            background-size: 22px 22px, 38px 38px;
            background-position: 0 0, 11px 11px;
            opacity: 0.18;
            pointer-events: none;
        }
        .v-canonical-testament > header::after {
            /* thin gold rule under the title */
            content: "";
            position: absolute;
            left: 50%;
            bottom: 8px;
            transform: translateX(-50%);
            width: 60px;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.85), transparent);
        }
        .v-canonical-testament > header span {
            position: relative;
            display: inline-block;
            color: #ffe28e !important;
            font-family: 'Cinzel', 'Cormorant Garamond', serif !important;
            font-size: 0.82rem !important;
            font-weight: 700 !important;
            letter-spacing: 0.32em !important;
            text-transform: uppercase;
            text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
        }

        /* -------- 2. Selected Book / Canonical Chapter heroes -------- */
        .v-canonical-book-detail > header,
        .v-canonical-chapter-detail > header {
            position: relative;
            overflow: hidden;
            margin: -8px -8px 24px !important;
            padding: 28px 32px 30px !important;
            border: 1px solid rgba(212, 175, 55, 0.32) !important;
            border-radius: 18px !important;
            background:
                radial-gradient(circle at 28% 30%, rgba(255, 232, 142, 0.06), transparent 45%),
                radial-gradient(circle at 75% 70%, rgba(125, 211, 252, 0.06), transparent 45%),
                linear-gradient(180deg, rgba(7, 24, 48, 0.95) 0%, rgba(4, 14, 32, 0.97) 55%, #02112e 100%) !important;
            box-shadow:
                0 18px 44px rgba(2, 8, 23, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.07),
                inset 0 -1px 0 rgba(212, 175, 55, 0.14) !important;
        }
        .v-canonical-book-detail > header::before,
        .v-canonical-chapter-detail > header::before {
            /* sacred-geometry compass rings + constellation dots */
            content: "";
            position: absolute;
            inset: 0;
            background-image:
                radial-gradient(rgba(255, 230, 157, 0.30) 1px, transparent 1px),
                radial-gradient(rgba(255, 230, 157, 0.18) 1px, transparent 1px),
                radial-gradient(circle at 50% 50%, transparent 0, transparent 80px, rgba(212, 175, 55, 0.10) 80.5px, transparent 82px),
                radial-gradient(circle at 50% 50%, transparent 0, transparent 130px, rgba(212, 175, 55, 0.08) 130.5px, transparent 132px);
            background-size: 28px 28px, 44px 44px, 100% 100%, 100% 100%;
            background-position: 0 0, 14px 14px, 50% 50%, 50% 50%;
            opacity: 0.32;
            pointer-events: none;
        }
        .v-canonical-book-detail > header > *,
        .v-canonical-chapter-detail > header > * {
            position: relative;
            z-index: 1;
        }
        .v-canonical-detail-kicker {
            color: rgba(255, 226, 142, 0.85) !important;
            font-family: 'Cinzel', 'Cormorant Garamond', serif !important;
            font-size: 0.68rem !important;
            font-weight: 700 !important;
            letter-spacing: 0.28em !important;
            margin-bottom: 8px !important;
        }
        .v-canonical-book-detail h3,
        .v-canonical-chapter-detail h3 {
            font-family: 'Cormorant Garamond', Georgia, serif !important;
            font-size: clamp(2.4rem, 4vw, 3.4rem) !important;
            font-weight: 700 !important;
            letter-spacing: 0.01em !important;
            line-height: 1.05 !important;
            color: #fff9ec !important;
            text-shadow:
                0 1px 0 rgba(0, 0, 0, 0.45),
                0 0 30px rgba(212, 175, 55, 0.18) !important;
        }
        .v-canonical-detail-count {
            border: 1px solid rgba(255, 226, 142, 0.45) !important;
            background: rgba(212, 175, 55, 0.10) !important;
            color: #ffe28e !important;
            font-family: 'Cinzel', 'Cormorant Garamond', serif !important;
            font-weight: 700 !important;
            letter-spacing: 0.10em !important;
            text-transform: uppercase;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.32) !important;
        }
        .v-canonical-back-btn {
            border: 1px solid rgba(255, 226, 142, 0.45) !important;
            background: rgba(212, 175, 55, 0.10) !important;
            color: #ffe28e !important;
            font-family: 'Cinzel', 'Cormorant Garamond', serif !important;
            font-weight: 700 !important;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.32) !important;
        }

        /* -------- 3. Book cards (book-cover feel) -------- */
        .v-canonical-book-card {
            position: relative;
            overflow: hidden;
            min-height: 148px !important;
            border-radius: 12px !important;
            border: 1px solid rgba(212, 175, 55, 0.28) !important;
            background:
                radial-gradient(circle at 85% 12%, rgba(255, 230, 157, 0.14), transparent 38%),
                linear-gradient(180deg, rgba(7, 24, 48, 0.95) 0%, rgba(5, 18, 40, 0.96) 60%, #02112e 100%) !important;
            box-shadow:
                0 10px 24px rgba(2, 8, 23, 0.32),
                inset 0 1px 0 rgba(255, 255, 255, 0.06),
                inset 0 -1px 0 rgba(212, 175, 55, 0.10);
            transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
                        border-color 0.24s ease,
                        box-shadow 0.24s ease !important;
        }
        .v-canonical-book-card::before {
            /* corner book-icon watermark */
            content: "✦";
            position: absolute;
            top: 10px;
            right: 14px;
            color: rgba(255, 230, 157, 0.28);
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.2rem;
            line-height: 1;
            pointer-events: none;
        }
        .v-canonical-book-card:hover,
        .v-canonical-book-card:focus-visible,
        .v-canonical-book-card.active {
            transform: translateY(-6px) !important;
            border-color: rgba(255, 226, 142, 0.65) !important;
            background:
                radial-gradient(circle at 85% 12%, rgba(255, 230, 157, 0.22), transparent 40%),
                linear-gradient(180deg, rgba(9, 28, 56, 0.96) 0%, rgba(5, 18, 40, 0.97) 60%, rgba(2, 10, 28, 0.98) 100%) !important;
            box-shadow:
                0 18px 38px rgba(2, 8, 23, 0.42),
                0 0 28px rgba(212, 175, 55, 0.20),
                inset 0 1px 0 rgba(255, 255, 255, 0.10),
                inset 0 -1px 0 rgba(212, 175, 55, 0.22) !important;
        }
        .v-canonical-book-title {
            color: #fff9ec !important;
            font-size: 1.05rem !important;
            text-shadow: 0 1px 0 rgba(0, 0, 0, 0.40);
        }
        .v-canonical-book-count {
            color: rgba(220, 225, 240, 0.78) !important;
        }
        .v-canonical-book-linked {
            color: rgba(255, 226, 142, 0.75) !important;
        }
        .v-canonical-book-explore {
            color: #ffe28e !important;
            text-shadow: 0 1px 0 rgba(0, 0, 0, 0.42);
        }

        /* -------- 4. Chapter pills (Atlas Navigation Capsules) -------- */
        .v-canonical-chapter-pill {
            position: relative;
            overflow: hidden;
            min-height: 60px !important;
            padding: 10px 16px !important;
            border-radius: 12px !important;
            border: 1px solid rgba(212, 175, 55, 0.22) !important;
            background:
                linear-gradient(180deg, rgba(20, 50, 110, 0.42), rgba(8, 28, 70, 0.55)) !important;
            color: rgba(255, 249, 236, 0.92) !important;
            transition: transform 0.18s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
        }
        .v-canonical-chapter-pill:hover,
        .v-canonical-chapter-pill:focus-visible {
            transform: translateY(-2px);
            border-color: rgba(255, 226, 142, 0.55) !important;
            background:
                linear-gradient(180deg, rgba(30, 70, 145, 0.55), rgba(12, 38, 88, 0.7)) !important;
            box-shadow:
                0 10px 22px rgba(2, 8, 23, 0.40),
                0 0 18px rgba(212, 175, 55, 0.14) !important;
        }
        .v-canonical-chapter-pill.active {
            border-color: rgba(255, 226, 142, 0.75) !important;
            background:
                linear-gradient(180deg, rgba(40, 88, 175, 0.60), rgba(14, 42, 95, 0.78)) !important;
            box-shadow:
                inset 0 0 0 1px rgba(212, 175, 55, 0.30),
                0 12px 28px rgba(2, 8, 23, 0.50),
                0 0 22px rgba(212, 175, 55, 0.25) !important;
        }
        .v-canonical-chapter-pill span {
            color: #fff9ec !important;
            font-size: 0.74rem !important;
            letter-spacing: 0.12em !important;
        }
        .v-canonical-chapter-pill em {
            color: rgba(255, 226, 142, 0.85) !important;
            font-size: 0.68rem !important;
        }
        .v-canonical-chapter-pill::after {
            /* thin density indicator at the bottom — opacity scales with entry count */
            content: "";
            position: absolute;
            left: 12px;
            right: 12px;
            bottom: 6px;
            height: 2px;
            border-radius: 999px;
            background: linear-gradient(90deg, rgba(212, 175, 55, 0.65), rgba(125, 211, 252, 0.55));
            opacity: 0.30;
            pointer-events: none;
        }
        .v-canonical-chapter-pill.active::after {
            opacity: 0.85;
        }
        .v-canonical-chapter-pill.empty::after { display: none; }

        /* -------- 5. Atlas entry cards (premium theological cards) -------- */
        .v-canonical-entry-card {
            position: relative;
            overflow: hidden;
            border-radius: 14px !important;
            border: 1px solid rgba(212, 175, 55, 0.28) !important;
            background:
                radial-gradient(circle at 90% 0%, rgba(255, 230, 157, 0.14), transparent 50%),
                linear-gradient(180deg, rgba(14, 42, 90, 0.55), rgba(4, 17, 45, 0.72)) !important;
            box-shadow:
                0 12px 28px rgba(2, 8, 23, 0.32),
                inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
            transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease !important;
        }
        .v-canonical-entry-card::before,
        .v-canonical-entry-card::after {
            /* twin gold L-corner ornaments — illuminated manuscript style */
            content: "";
            position: absolute;
            width: 14px;
            height: 14px;
            border-color: rgba(212, 175, 55, 0.65);
            border-style: solid;
            pointer-events: none;
        }
        .v-canonical-entry-card::before {
            top: 10px;
            left: 10px;
            border-width: 1px 0 0 1px;
        }
        .v-canonical-entry-card::after {
            bottom: 10px;
            right: 10px;
            border-width: 0 1px 1px 0;
        }
        .v-canonical-entry-card:hover {
            transform: translateY(-3px);
            border-color: rgba(255, 226, 142, 0.55) !important;
            box-shadow:
                0 18px 38px rgba(2, 8, 23, 0.42),
                0 0 28px rgba(212, 175, 55, 0.20) !important;
        }

        /* =================================================================
           PREMIUM CANONICAL — DOMAIN-EXPLORER-MATCH LAYER  (v20260617D)
           Brings the Bible Books / Canonical screen fully in line with the
           Theological Domain Explorer cards: constellation texture wash,
           serif numeral accents, Cormorant book titles, arrow-slide hover.
           ================================================================= */

        /* Unified premium navy — match the testament-header gradient so the
           whole canonical section reads as one cohesive illuminated panel
           (instead of dark-almost-black body sitting under brighter navy bars). */
        .v-canonical-atlas {
            position: relative;
            border: 1px solid rgba(212, 175, 55, 0.32) !important;
            background:
                radial-gradient(circle at 50% -8%, rgba(212, 175, 55, 0.10), transparent 55%),
                radial-gradient(circle at 18% 42%, rgba(216, 180, 90, 0.06), transparent 50%),
                radial-gradient(circle at 82% 42%, rgba(216, 180, 90, 0.06), transparent 50%),
                linear-gradient(180deg, rgba(7, 24, 48, 0.95) 0%, rgba(5, 18, 40, 0.96) 35%, rgba(4, 14, 32, 0.97) 70%, #02112e 100%) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.06),
                inset 0 -1px 0 rgba(212, 175, 55, 0.14),
                0 22px 60px rgba(2, 8, 23, 0.32) !important;
            border-radius: 18px !important;
        }
        /* Section divider label (CANONICAL JOURNEY) — gold sits brighter on navy */
        .v-canonical-atlas .v-atlas-intro-divider-label {
            color: #ffe28e !important;
            text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5), 0 0 18px rgba(212, 175, 55, 0.25);
        }
        .v-canonical-atlas .v-atlas-intro-divider-line {
            background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.55), transparent) !important;
        }
        .v-canonical-atlas .v-canonical-header p {
            color: rgba(255, 249, 236, 0.86) !important;
            font-family: 'Cormorant Garamond', Georgia, serif !important;
            font-style: italic;
        }

        /* Testament header bars — soften the panel border so they read as
           subtitle banners INSIDE the canonical panel, not separate cards. */
        .v-canonical-testament > header {
            border-color: rgba(212, 175, 55, 0.40) !important;
            box-shadow:
                0 10px 28px rgba(2, 8, 23, 0.36),
                inset 0 1px 0 rgba(255, 255, 255, 0.08),
                inset 0 -1px 0 rgba(212, 175, 55, 0.18) !important;
        }

        .v-canonical-atlas::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image:
                radial-gradient(rgba(255, 230, 157, 0.30) 1px, transparent 1px),
                radial-gradient(rgba(255, 230, 157, 0.15) 1px, transparent 1px),
                radial-gradient(circle at 22% 18%, transparent 0, transparent 180px, rgba(212, 175, 55, 0.07) 180.5px, transparent 182px),
                radial-gradient(circle at 78% 82%, transparent 0, transparent 220px, rgba(212, 175, 55, 0.05) 220.5px, transparent 222px);
            background-size: 32px 32px, 56px 56px, 100% 100%, 100% 100%;
            background-position: 0 0, 16px 16px, 22% 18%, 78% 82%;
            opacity: 0.06;
            pointer-events: none;
            z-index: 0;
        }
        .v-canonical-atlas > * { position: relative; z-index: 1; }

        /* Soft radial illumination behind the testament grids */
        .v-canonical-testaments {
            position: relative;
        }
        .v-canonical-testaments::before {
            content: "";
            position: absolute;
            inset: -40px -8% auto;
            height: 520px;
            background:
                radial-gradient(ellipse at 22% 20%, rgba(216, 180, 90, 0.06), transparent 55%),
                radial-gradient(ellipse at 78% 20%, rgba(216, 180, 90, 0.06), transparent 55%),
                radial-gradient(ellipse at 50% 80%, rgba(212, 175, 55, 0.06), transparent 60%);
            pointer-events: none;
            z-index: 0;
        }
        .v-canonical-testaments > * { position: relative; z-index: 1; }

        /* Book cards — match Domain Explorer card geometry & ornament */
        .v-canonical-book-card {
            display: grid !important;
            grid-template-areas:
                "num  title   arrow"
                "num  linked  arrow"
                ".    explore arrow" !important;
            grid-template-columns: 44px 1fr 22px !important;
            grid-template-rows: auto 1fr auto !important;
            column-gap: 14px !important;
            row-gap: 4px !important;
            align-items: start !important;
            padding: 22px 22px 18px !important;
            min-height: 162px !important;
        }

        /* Leading serif numeral accent (like Domain Explorer "01 ◎") */
        .v-canonical-book-card::after {
            content: counter(canonical-book-num, decimal-leading-zero);
            grid-area: num;
            align-self: start;
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 1.7rem;
            font-weight: 600;
            line-height: 1;
            color: rgba(255, 226, 142, 0.78);
            text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
            letter-spacing: 0.02em;
            padding-top: 3px;
        }
        .v-canonical-book-grid {
            counter-reset: canonical-book-num;
        }
        .v-canonical-book-card {
            counter-increment: canonical-book-num;
        }

        /* Corner ✦ watermark stays — restyle to feel like Domain icon */
        .v-canonical-book-card::before {
            color: rgba(255, 230, 157, 0.40) !important;
            font-size: 1.4rem !important;
            top: 12px !important;
            right: 16px !important;
            text-shadow: 0 0 8px rgba(212, 175, 55, 0.35);
            transition: transform .35s ease, color .35s ease, text-shadow .35s ease;
        }
        .v-canonical-book-card:hover::before {
            color: #ffe28e !important;
            transform: rotate(45deg) scale(1.15);
            text-shadow: 0 0 14px rgba(255, 226, 142, 0.6);
        }

        /* Book title — Cormorant serif, like "Revelational Foundation" */
        .v-canonical-book-title {
            grid-area: title;
            font-family: 'Cormorant Garamond', Georgia, serif !important;
            font-size: 1.45rem !important;
            font-weight: 700 !important;
            letter-spacing: 0.01em !important;
            line-height: 1.1 !important;
            text-transform: none !important;
            color: #fff9ec !important;
        }
        .v-canonical-book-count {
            grid-area: count;
            font-size: 0.78rem !important;
            color: rgba(220, 225, 240, 0.78) !important;
            letter-spacing: 0.04em;
        }
        .v-canonical-book-linked {
            grid-area: linked;
            font-family: 'Cinzel', 'Cormorant Garamond', serif !important;
            font-size: 0.62rem !important;
            letter-spacing: 0.14em !important;
            text-transform: uppercase;
            color: rgba(255, 226, 142, 0.72) !important;
            margin-top: 6px;
        }

        /* EXPLORE → — keep the original text node; animate the whole word
           on card hover (no pseudo-elements, no duplication). */
        .v-canonical-book-explore {
            grid-area: explore;
            display: inline-block !important;
            margin-top: 10px;
            font-family: 'Cinzel', 'Cormorant Garamond', serif !important;
            font-size: 0.68rem !important;
            font-weight: 700 !important;
            letter-spacing: 0.20em !important;
            text-transform: uppercase;
            transition: transform .28s cubic-bezier(.2,.7,.2,1), color .25s ease, text-shadow .25s ease;
        }
        .v-canonical-book-card:hover .v-canonical-book-explore {
            transform: translateX(4px);
            color: #fff8d8 !important;
            text-shadow: 0 0 12px rgba(255, 226, 142, 0.55);
        }

        /* Right-edge gold rule echoes the Domain card arrow gutter */
        .v-canonical-book-card {
            background-image:
                radial-gradient(circle at 85% 12%, rgba(255, 230, 157, 0.14), transparent 38%),
                linear-gradient(180deg, rgba(7, 24, 48, 0.95) 0%, rgba(5, 18, 40, 0.96) 60%, #02112e 100%),
                linear-gradient(180deg,
                    transparent 0%,
                    rgba(212, 175, 55, 0) 12%,
                    rgba(212, 175, 55, 0.35) 50%,
                    rgba(212, 175, 55, 0) 88%,
                    transparent 100%) !important;
            background-size: 100% 100%, 100% 100%, 1px 100% !important;
            background-position: 0 0, 0 0, calc(100% - 14px) 0 !important;
            background-repeat: no-repeat !important;
        }

        /* Lift + glow + brighter gold rule on hover */
        .v-canonical-book-card:hover,
        .v-canonical-book-card:focus-visible,
        .v-canonical-book-card.active {
            background-image:
                radial-gradient(circle at 85% 12%, rgba(255, 230, 157, 0.24), transparent 40%),
                linear-gradient(180deg, rgba(9, 28, 56, 0.96) 0%, rgba(5, 18, 40, 0.97) 60%, rgba(2, 10, 28, 0.98) 100%),
                linear-gradient(180deg,
                    transparent 0%,
                    rgba(255, 226, 142, 0) 8%,
                    rgba(255, 226, 142, 0.70) 50%,
                    rgba(255, 226, 142, 0) 92%,
                    transparent 100%) !important;
        }

        /* Theological / Canonical toggle — capsule, gold border on active */
        .v-atlas-mode-btn {
            font-family: 'Cinzel', 'Cormorant Garamond', serif !important;
            letter-spacing: 0.22em !important;
        }
        .v-atlas-mode-btn.active {
            box-shadow:
                inset 0 0 0 1px rgba(255, 226, 142, 0.45),
                0 6px 18px rgba(2, 8, 23, 0.35),
                0 0 22px rgba(212, 175, 55, 0.18) !important;
        }

        /* Mobile tightening */
        @media (max-width: 720px) {
            .v-canonical-book-card {
                grid-template-columns: 36px 1fr 18px !important;
                min-height: 142px !important;
                padding: 16px 16px 14px !important;
            }
            .v-canonical-book-card::after { font-size: 1.3rem; }
            .v-canonical-book-title { font-size: 1.18rem !important; }
        }

        /* =================================================================
           PREMIUM CANONICAL — BOOK DETAIL SCREEN LAYER  (v20260617E)
           Polishes the deeper screen (chapter pills + entry cards) so the
           "Selected Book" experience reads at the same craft level as the
           Theological Domain Explorer + Bible Books grid.
           ================================================================= */

        /* ---- Book-detail hero header — flourish below the book name ---- */
        .v-canonical-book-detail > header::after,
        .v-canonical-chapter-detail > header::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 16px;
            transform: translateX(-50%);
            width: 92px;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255, 226, 142, 0.85), transparent);
            z-index: 1;
        }
        .v-canonical-book-detail h3,
        .v-canonical-chapter-detail h3 {
            position: relative;
        }
        .v-canonical-book-detail h3::after,
        .v-canonical-chapter-detail h3::after {
            content: "✦";
            display: block;
            margin: 8px auto -4px;
            color: rgba(255, 226, 142, 0.55);
            font-family: 'Cormorant Garamond', serif;
            font-size: 0.7rem;
            text-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
            text-align: center;
        }

        /* ---- Chapter pill grid — astrolabe feel ---- */
        .v-canonical-chapter-grid {
            counter-reset: canonical-chapter-pill;
        }
        .v-canonical-chapter-pill {
            counter-increment: canonical-chapter-pill;
        }
        /* Active pill — outer gold ring + soft glow halo */
        .v-canonical-chapter-pill.active {
            box-shadow:
                inset 0 0 0 1px rgba(255, 226, 142, 0.55),
                0 12px 28px rgba(2, 8, 23, 0.50),
                0 0 26px rgba(212, 175, 55, 0.32),
                0 0 0 4px rgba(212, 175, 55, 0.08) !important;
        }
        /* Replace "Chapter N" with leading serif numeral + tighter "ch" caps */
        .v-canonical-chapter-pill span {
            font-family: 'Cormorant Garamond', Georgia, serif !important;
            font-size: 0.92rem !important;
            letter-spacing: 0.04em !important;
            color: #fff9ec !important;
        }
        .v-canonical-chapter-pill em {
            font-family: 'Cinzel', 'Cormorant Garamond', serif !important;
            font-style: normal !important;
            font-size: 0.58rem !important;
            letter-spacing: 0.18em !important;
            text-transform: uppercase;
            color: rgba(255, 226, 142, 0.80) !important;
        }
        /* Empty pill — graceful muted treatment */
        .v-canonical-chapter-pill.empty {
            opacity: 0.45;
            background: linear-gradient(180deg,
                rgba(20, 50, 110, 0.18),
                rgba(8, 28, 70, 0.28)) !important;
            border-color: rgba(212, 175, 55, 0.10) !important;
        }
        .v-canonical-chapter-pill.empty:hover {
            opacity: 0.7;
        }

        /* ---- Atlas entry cards — match Anchor Doctrine card rhythm ---- */
        .v-canonical-entry-card {
            padding: 22px 24px 22px !important;
            display: flex !important;
            flex-direction: column;
            gap: 12px;
        }
        /* Eyebrow */
        .v-canonical-entry-card > .v-canonical-entry-eyebrow {
            color: rgba(255, 226, 142, 0.85) !important;
            font-family: 'Cinzel', serif !important;
            font-size: 0.62rem !important;
            font-weight: 700 !important;
            letter-spacing: 0.20em !important;
            text-transform: uppercase;
            margin: 0;
        }
        /* Title — full width, serif */
        .v-canonical-entry-card > h5 {
            margin: 4px 0 0 !important;
            color: #fff9ec !important;
            font-family: 'Cormorant Garamond', Georgia, serif !important;
            font-size: 1.18rem !important;
            font-weight: 600 !important;
            line-height: 1.3 !important;
            letter-spacing: 0.005em !important;
        }
        /* Thin gold accent rule under the title (mirrors .v-god-major-rule) */
        .v-canonical-entry-card > .v-canonical-entry-rule {
            width: 64px;
            height: 1px;
            background: linear-gradient(90deg,
                rgba(212, 175, 55, 0.85) 0%,
                rgba(212, 175, 55, 0.18) 100%);
            margin: 2px 0 4px;
            border-radius: 1px;
        }
        /* Reference pill row — promoted prominently, no "REFERENCES:" label */
        .v-canonical-entry-card > .v-canonical-entry-ref-row {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin: 2px 0;
        }
        /* Witness rows — Primary Witness (always) + per-role rows that label
           what kind of witness the *current chapter* contributes (Attestation,
           Fulfillment, etc.). Mirrors the witness-role pattern used elsewhere
           in the architecture views. */
        .v-canonical-entry-card > .v-canonical-entry-witnesses {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin: 4px 0 6px;
        }
        .v-canonical-entry-witness-row {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .v-canonical-entry-witness-label {
            font-family: 'Cinzel', 'Cormorant Garamond', serif;
            font-size: 0.58rem;
            font-weight: 700;
            letter-spacing: 0.20em;
            text-transform: uppercase;
            color: rgba(255, 226, 142, 0.62);
        }
        /* Primary Witness — call it out with a brighter gold. */
        .v-canonical-entry-witness-row--primary .v-canonical-entry-witness-label {
            color: #ffe28e;
            text-shadow: 0 0 10px rgba(255, 226, 142, 0.32);
        }
        .v-canonical-entry-witness-tokens {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        /* Tag chips row — category / topic / weight / mood */
        .v-canonical-entry-card > .v-canonical-entry-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: auto;
            padding-top: 8px;
        }
        .v-canonical-entry-card .v-architecture-meta-pill {
            display: inline-flex;
            align-items: center;
            padding: 4px 11px;
            border-radius: 999px;
            border: 1px solid rgba(212, 175, 55, 0.32);
            background: rgba(15, 35, 75, 0.55);
            color: rgba(255, 226, 142, 0.85);
            font-family: 'Cinzel', 'Cormorant Garamond', serif;
            font-size: 0.58rem;
            font-weight: 700;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            line-height: 1;
        }
        .v-canonical-entry-card .v-architecture-meta-pill.category {
            background: rgba(40, 80, 150, 0.32);
        }
        .v-canonical-entry-card .v-architecture-meta-pill.topic {
            border-color: rgba(255, 226, 142, 0.55);
            color: #fff8d8;
        }
        /* View Revelation → CTA at the very bottom */
        .v-canonical-entry-card > .v-canonical-entry-cta {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            margin-top: 4px;
            padding-top: 12px;
            border-top: 1px solid rgba(212, 175, 55, 0.18);
            color: #ffe28e;
            font-family: 'Cinzel', 'Cormorant Garamond', serif;
            font-size: 0.66rem;
            font-weight: 800;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            transition: transform .25s ease, color .25s ease, text-shadow .25s ease;
        }
        .v-canonical-entry-card:hover > .v-canonical-entry-cta {
            transform: translateX(4px);
            color: #fff8d8;
            text-shadow: 0 0 14px rgba(255, 226, 142, 0.55);
        }

        /* Card ornaments — twin L-corners (mirror .v-card-ornament from
           the Anchor Doctrine card so the visual rhythm is identical) */
        .v-canonical-entry-card .v-card-ornament {
            position: absolute;
            width: 16px;
            height: 16px;
            border-color: rgba(212, 175, 55, 0.55);
            border-style: solid;
            pointer-events: none;
            transition: border-color .25s ease;
        }
        .v-canonical-entry-card .v-card-ornament.top-left {
            top: 12px; left: 12px;
            border-width: 1px 0 0 1px;
        }
        .v-canonical-entry-card .v-card-ornament.bottom-right {
            bottom: 12px; right: 12px;
            border-width: 0 1px 1px 0;
        }
        .v-canonical-entry-card:hover .v-card-ornament {
            border-color: rgba(255, 226, 142, 0.85);
        }
        /* Disable the older ::before / ::after corner ornaments now that we
           have explicit .v-card-ornament spans — avoid double corners. */
        .v-canonical-entry-card::before,
        .v-canonical-entry-card::after {
            content: none !important;
        }

        /* Density indicator rail at the bottom of each entry card */
        .v-canonical-entry-card {
            position: relative;
        }
        .v-canonical-entry-card > .v-canonical-entry-refs {
            padding-bottom: 4px;
        }
        .v-canonical-entry-card::before {
            /* keep top-left L corner */
        }
        /* Add an inner bottom gold rail (separate from the existing ::after
           bottom-right L corner — uses a box-shadow inset instead) */
        .v-canonical-entry-card {
            box-shadow:
                0 12px 28px rgba(2, 8, 23, 0.32),
                inset 0 1px 0 rgba(255, 255, 255, 0.05),
                inset 0 -2px 0 rgba(212, 175, 55, 0.18) !important;
        }
        .v-canonical-entry-card:hover {
            box-shadow:
                0 18px 38px rgba(2, 8, 23, 0.42),
                0 0 28px rgba(212, 175, 55, 0.20),
                inset 0 1px 0 rgba(255, 255, 255, 0.07),
                inset 0 -2px 0 rgba(255, 226, 142, 0.45) !important;
        }

        /* References — primary refs get a bright gold treatment, supporting
           refs feel like aged parchment-gold */
        .v-canonical-entry-card .v-architecture-ref-token {
            font-family: 'Cinzel', 'Cormorant Garamond', serif !important;
            font-size: 0.62rem !important;
            letter-spacing: 0.10em !important;
            padding: 4px 9px !important;
            border-radius: 999px !important;
            border: 1px solid rgba(212, 175, 55, 0.32) !important;
            background: rgba(20, 50, 110, 0.32) !important;
            color: rgba(255, 226, 142, 0.85) !important;
            text-decoration: none !important;
            transition: all .22s ease !important;
        }
        .v-canonical-entry-card .v-architecture-ref-token[data-architecture-ref-role="primary"] {
            border-color: rgba(255, 226, 142, 0.70) !important;
            background: linear-gradient(180deg,
                rgba(255, 226, 142, 0.18),
                rgba(212, 175, 55, 0.10)) !important;
            color: #fff8d8 !important;
            box-shadow: 0 0 14px rgba(212, 175, 55, 0.22);
        }
        .v-canonical-entry-card .v-architecture-ref-token:hover {
            transform: translateY(-1px);
            border-color: rgba(255, 226, 142, 0.85) !important;
            box-shadow: 0 4px 14px rgba(212, 175, 55, 0.28);
        }

        /* OT/NT era class — subtle distinguishing accent on the chip */
        .v-canonical-entry-card .v-architecture-ref-token.era-ot::after,
        .v-canonical-entry-card .v-architecture-ref-token.era-nt::after { }
        .v-canonical-entry-card .v-architecture-ref-token.era-ot {
            border-left: 2px solid rgba(125, 211, 252, 0.55) !important;
        }
        .v-canonical-entry-card .v-architecture-ref-token.era-nt {
            border-left: 2px solid rgba(255, 226, 142, 0.85) !important;
        }

        /* ---- Empty chapter — sacred constellation field ---- */
        .v-canonical-empty-chapter {
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(212, 175, 55, 0.18) !important;
            background:
                radial-gradient(circle at 50% 30%, rgba(255, 230, 157, 0.05), transparent 55%),
                linear-gradient(180deg, rgba(14, 42, 90, 0.30), rgba(4, 17, 45, 0.45)) !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
            padding: 38px 28px !important;
        }
        .v-canonical-empty-chapter::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image:
                radial-gradient(rgba(255, 230, 157, 0.28) 1px, transparent 1px),
                radial-gradient(rgba(255, 230, 157, 0.16) 1px, transparent 1px);
            background-size: 26px 26px, 42px 42px;
            background-position: 0 0, 13px 13px;
            opacity: 0.20;
            pointer-events: none;
        }
        .v-canonical-empty-chapter > span {
            position: relative;
            font-family: 'Cormorant Garamond', Georgia, serif !important;
            font-style: italic;
            color: rgba(255, 249, 236, 0.65) !important;
            font-size: 1rem !important;
        }
        .v-canonical-empty-chapter::after {
            content: "✦";
            position: relative;
            display: block;
            margin: 12px auto 0;
            color: rgba(255, 226, 142, 0.40);
            font-size: 0.9rem;
            text-align: center;
        }

        /* ---- Back to Books button — premium capsule ---- */
        .v-canonical-back-btn {
            padding: 8px 16px !important;
            border-radius: 999px !important;
            font-size: 0.68rem !important;
            letter-spacing: 0.20em !important;
            text-transform: uppercase;
            transition: background .25s ease, border-color .25s ease, transform .2s ease !important;
        }
        .v-canonical-back-btn::before {
            content: "← ";
            margin-right: 2px;
        }
        .v-canonical-back-btn:hover {
            background: rgba(212, 175, 55, 0.18) !important;
            border-color: rgba(255, 226, 142, 0.65) !important;
            transform: translateX(-2px);
        }

        /* Mobile tightening for the detail screen */
        @media (max-width: 720px) {
            .v-canonical-book-detail > header,
            .v-canonical-chapter-detail > header {
                padding: 22px 18px 24px !important;
            }
            .v-canonical-book-detail h3,
            .v-canonical-chapter-detail h3 {
                font-size: clamp(1.8rem, 6vw, 2.4rem) !important;
            }
            .v-canonical-entry-card {
                padding: 16px 16px 18px !important;
            }
            .v-canonical-entry-card > .v-canonical-entry-eyebrow::before {
                font-size: 1rem;
            }
        }

        .v-architecture-slide {

            z-index: 6;
            display: flex;
            flex-direction: column;
            padding: 14px 24px 22px;
            margin-top: 0;
            margin-bottom: 0;
            isolation: isolate;
        }

        .v-architecture-slide::before {
            content: '';
            position: absolute;
            inset: 0 8% auto;
            height: 360px;
            background:
                radial-gradient(circle at 50% 16%, rgba(216, 180, 90, 0.09), transparent 34%),
                radial-gradient(circle at 50% 58%, rgba(125, 211, 252, 0.055), transparent 50%);
            pointer-events: none;
            z-index: 1;
            opacity: 0.7;
        }

        .v-architecture-slide .v-section-header-wrap,
        .v-architecture-intro,
        .v-architecture-flow {
            position: relative;
            z-index: 3;
        }

        .v-architecture-slide .v-section-header-wrap {
            width: min(980px, 100%);
            margin: 0 auto 8px;
            padding: 16px 34px;
        }

        .v-architecture-flow {
            width: 100%;
        }

        .v-architecture-intro {
            margin-bottom: 10px;
        }

        .v-architecture-intro p {
            font-size: 12.5px;
            line-height: 1.55;
        }

        .v-architecture-reading-column {
            width: min(1180px, calc(100% - 12px));
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .v-architecture-journeys {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 12px;
            margin: 4px 0 6px;
        }

        .v-architecture-journey-card {
            min-width: 0;
            padding: 16px 14px 14px;
            border: 1px solid rgba(218, 177, 80, 0.26);
            border-radius: 16px;
            background:
                radial-gradient(circle at 16% 0%, rgba(216, 180, 90, 0.09), transparent 36%),
                linear-gradient(180deg, rgba(7, 24, 48, 0.88), rgba(4, 16, 35, 0.94));
            box-shadow:
                0 16px 38px rgba(0, 0, 0, 0.28),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
            cursor: pointer;
            transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
        }

        .v-architecture-journey-card:hover {
            transform: translateY(-2px);
            border-color: rgba(218, 177, 80, 0.42);
            box-shadow:
                0 20px 46px rgba(0, 0, 0, 0.34),
                0 0 0 1px rgba(216, 180, 90, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
        }

        .v-architecture-journey-label,
        .v-architecture-source-note,
        .v-architecture-domain-header > span {
            font-family: 'Cinzel', serif;
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: #d8b45a;
        }

        .v-architecture-journey-card h3 {
            margin: 8px 0 6px;
            color: #fff9ec;
            font-family: 'Cinzel', serif;
            font-size: 12px;
            line-height: 1.35;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .v-architecture-journey-card p {
            margin: 0 0 12px;
            color: rgba(235, 241, 249, 0.7);
            font-size: 11px;
            line-height: 1.55;
        }

        .v-architecture-mini-timeline {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            align-items: center;
            gap: 4px;
            margin-bottom: 12px;
        }

        .v-architecture-mini-timeline span {
            height: 5px;
            border-radius: 999px;
            background: linear-gradient(90deg, rgba(216, 180, 90, 0.34), rgba(125, 211, 252, 0.18));
            box-shadow: 0 0 10px rgba(216, 180, 90, 0.12);
        }

        .v-architecture-journey-card button {
            padding: 0;
            border: 0;
            background: transparent;
            color: rgba(216, 180, 90, 0.9);
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            cursor: pointer;
        }

        .v-architecture-source-note {
            align-self: center;
            color: rgba(216, 180, 90, 0.72);
        }

        .v-architecture-domain {
            display: flex;
            flex-direction: column;
            gap: 14px;
            padding-top: 18px;
        }

        .v-architecture-domain-header {
            padding: 20px 24px;
            border: 1px solid rgba(218, 177, 80, 0.28);
            border-radius: 18px;
            background:
                linear-gradient(135deg, rgba(216, 180, 90, 0.08), transparent 42%),
                linear-gradient(180deg, rgba(6, 22, 45, 0.88), rgba(3, 14, 32, 0.96));
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }

        .v-architecture-domain-header h3 {
            margin: 8px 0 8px;
            color: #fff9ec;
            font-family: 'Cinzel', serif;
            font-size: 18px;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        .v-architecture-domain-header p {
            margin: 0 0 14px;
            max-width: 760px;
            color: rgba(235, 241, 249, 0.74);
            font-size: 12.5px;
            line-height: 1.65;
        }

        .v-architecture-domain-chip,
        .v-architecture-theme-chip {
            display: inline-flex;
            align-items: center;
            min-height: 24px;
            padding: 3px 10px;
            margin: 0 6px 6px 0;
            border: 1px solid rgba(218, 177, 80, 0.18);
            border-radius: 999px;
            background: rgba(13, 38, 66, 0.7);
            color: rgba(216, 180, 90, 0.82);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.04em;
        }

        .v-architecture-topic-stack {
            display: flex;
            flex-direction: column;
            gap: 13px;
        }

        .v-architecture-topic {
            overflow: hidden;
            border: 1px solid rgba(218, 177, 80, 0.3);
            border-radius: 20px;
            background:
                linear-gradient(180deg, rgba(7, 24, 48, 0.94), rgba(3, 14, 32, 0.98));
            box-shadow:
                0 24px 80px rgba(0, 0, 0, 0.32),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }

        .v-architecture-topic.hero {
            border-color: rgba(218, 177, 80, 0.48);
            background:
                radial-gradient(circle at 18% 0%, rgba(216, 180, 90, 0.12), transparent 38%),
                radial-gradient(circle at 86% 14%, rgba(125, 211, 252, 0.07), transparent 36%),
                linear-gradient(180deg, rgba(7, 24, 48, 0.95), rgba(3, 14, 32, 0.99));
        }

        .v-architecture-topic-summary {
            display: grid;
            grid-template-columns: auto 1fr auto auto;
            gap: 16px;
            align-items: center;
            min-height: 76px;
            padding: 18px 24px;
            cursor: pointer;
            list-style: none;
        }

        .v-architecture-topic-summary::-webkit-details-marker {
            display: none;
        }

        .v-architecture-topic-number {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(246, 219, 150, 0.42);
            background:
                radial-gradient(circle at 35% 24%, rgba(255, 247, 214, 0.22), transparent 34%),
                linear-gradient(145deg, rgba(216, 180, 90, 0.26), rgba(7, 24, 48, 0.9));
            color: #f2d68a;
            font-family: 'Cinzel', serif;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.12em;
        }

        .v-architecture-topic-main {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .v-architecture-topic-title {
            color: #fff9ec;
            font-family: 'Cinzel', serif;
            font-size: 15px;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            line-height: 1.35;
        }

        .v-architecture-topic.hero .v-architecture-topic-title {
            font-size: 18px;
        }

        .v-architecture-topic-intro {
            color: rgba(244, 231, 193, 0.72);
            font-family: 'Cormorant Garamond', serif;
            font-size: 13.5px;
            font-style: italic;
            line-height: 1.35;
        }

        .v-architecture-topic-count {
            color: rgba(203, 213, 225, 0.62);
            font-size: 10.5px;
            font-weight: 700;
            white-space: nowrap;
        }

        .v-architecture-topic-body {
            padding: 22px 28px 28px;
            border-top: 1px solid rgba(218, 177, 80, 0.16);
            background:
                linear-gradient(180deg, rgba(4, 15, 32, 0.42), rgba(4, 13, 28, 0.2)),
                radial-gradient(circle at 50% 0%, rgba(216, 180, 90, 0.045), transparent 38%);
        }

        .v-architecture-connections {
            margin-bottom: 18px;
            color: rgba(203, 213, 225, 0.62);
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .v-architecture-theme-chip {
            border: 0;
            cursor: pointer;
            text-transform: none;
            letter-spacing: 0.02em;
            transition: color 0.2s ease, background 0.2s ease;
        }

        .v-architecture-theme-chip:hover {
            color: #fff7d6;
            background: rgba(216, 180, 90, 0.12);
        }

        .v-architecture-cluster {
            padding: 18px 0 4px;
            border-top: 1px solid rgba(218, 177, 80, 0.16);
        }

        .v-architecture-cluster:first-of-type {
            border-top: 0;
            padding-top: 0;
        }

        .v-architecture-cluster-heading {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
        }

        .v-architecture-cluster-heading span {
            width: 24px;
            height: 24px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            border: 1px solid rgba(218, 177, 80, 0.28);
            color: #d8b45a;
            font-family: 'Cinzel', serif;
            font-size: 10px;
            font-weight: 800;
        }

        .v-architecture-cluster-heading h4 {
            margin: 0;
            color: rgba(244, 231, 193, 0.86);
            font-family: 'Cinzel', serif;
            font-size: 10.5px;
            letter-spacing: 0.16em;
            text-transform: uppercase;
        }

        .v-architecture-entry-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 8px 28px;
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .v-architecture-entry-grid.dense {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .v-architecture-entry-grid li {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 10px;
            align-items: start;
            min-width: 0;
            color: rgba(235, 241, 249, 0.82);
            font-size: 12.25px;
            line-height: 1.72;
            padding: 6px 8px;
            border-radius: 10px;
            transition: background 0.22s ease, color 0.22s ease;
        }

        .v-architecture-entry-grid li:hover {
            background: linear-gradient(90deg, rgba(216, 180, 90, 0.07), rgba(21, 48, 82, 0.2));
            color: rgba(245, 248, 252, 0.95);
        }

        .v-architecture-entry-mark {
            width: 6px;
            height: 6px;
            margin-top: 9px;
            border-radius: 50%;
            background: #d8b45a;
            box-shadow:
                0 0 0 3px rgba(216, 180, 90, 0.08),
                0 0 10px rgba(216, 180, 90, 0.62);
        }

        .v-architecture-token-group {
            display: inline-flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-left: 6px;
            vertical-align: baseline;
        }

        .v-architecture-ref-token {
            display: inline-flex !important;
            align-items: center;
            min-height: 20px;
            padding: 1px 7px 2px;
            border: 1px solid rgba(216, 180, 90, 0.34) !important;
            border-radius: 999px !important;
            background:
                linear-gradient(180deg, rgba(216, 180, 90, 0.12), rgba(7, 24, 48, 0.7)) !important;
            color: #d8b45a !important;
            font-family: 'SFMono-Regular', 'Cascadia Code', 'Menlo', 'Consolas', monospace;
            font-size: 9.5px;
            font-weight: 800;
            letter-spacing: 0.04em;
            line-height: 1;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
        }

        .v-architecture-ref-token:hover {
            color: #fff7d6 !important;
            border-color: rgba(255, 247, 214, 0.55) !important;
            box-shadow:
                0 0 0 3px rgba(216, 180, 90, 0.055),
                0 0 16px rgba(216, 180, 90, 0.12);
        }

        .v-architecture-ref-token.ot {
            border-color: rgba(147, 197, 253, 0.28) !important;
            background:
                linear-gradient(180deg, rgba(96, 165, 250, 0.12), rgba(7, 24, 48, 0.72)) !important;
        }

        .v-architecture-domain-card {
            padding: 14px 22px;
            border: 1px solid rgba(218, 177, 80, 0.3);
            border-radius: 18px;
            background:
                radial-gradient(circle at 16% 0%, rgba(216, 180, 90, 0.08), transparent 34%),
                linear-gradient(180deg, rgba(7, 24, 48, 0.9), rgba(3, 14, 32, 0.96));
            box-shadow:
                0 18px 48px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.055);
        }

        .v-architecture-domain-card > span {
            color: #d8b45a;
            font-family: 'Cinzel', serif;
            font-size: 9.5px;
            font-weight: 800;
            letter-spacing: 0.16em;
            text-transform: uppercase;
        }

        .v-architecture-domain-card h3 {
            margin: 8px 0 8px;
            color: #fff9ec;
            font-family: 'Cinzel', serif;
            font-size: 18px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .v-architecture-domain-card p {
            max-width: 760px;
            margin: 0 0 14px;
            color: rgba(235, 241, 249, 0.72);
            font-size: 12.5px;
            line-height: 1.65;
        }

        .v-architecture-god-hero {
            overflow: hidden;
            border: 1px solid rgba(218, 177, 80, 0.42);
            border-radius: 24px;
            background:
                radial-gradient(circle at 50% 0%, rgba(216, 180, 90, 0.12), transparent 42%),
                radial-gradient(circle at 86% 10%, rgba(125, 211, 252, 0.055), transparent 34%),
                linear-gradient(180deg, rgba(7, 24, 48, 0.96), rgba(3, 14, 32, 0.99));
            box-shadow:
                0 26px 88px rgba(0, 0, 0, 0.38),
                inset 0 1px 0 rgba(255, 255, 255, 0.055),
                inset 0 0 64px rgba(216, 180, 90, 0.04);
        }

        .v-architecture-god-summary {
            display: grid;
            grid-template-columns: auto 1fr auto auto;
            align-items: center;
            gap: 18px;
            min-height: 72px;
            padding: 16px 24px;
            cursor: pointer;
            list-style: none;
        }

        .v-architecture-god-summary::-webkit-details-marker,
        .v-architecture-category-summary::-webkit-details-marker,
        .v-architecture-witnesses summary::-webkit-details-marker {
            display: none;
        }

        .v-architecture-god-body {
            padding: 16px 24px 22px;
            border-top: 1px solid rgba(218, 177, 80, 0.18);
        }

        .v-architecture-stats-row,
        .v-architecture-category-preview,
        .v-architecture-chip-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
        }

        .v-architecture-stats-row {
            margin-bottom: 16px;
        }

        .v-architecture-meta-pill {
            display: inline-flex;
            align-items: center;
            min-height: 23px;
            padding: 3px 9px;
            border: 1px solid rgba(218, 177, 80, 0.18);
            border-radius: 999px;
            background: rgba(11, 34, 61, 0.72);
            color: rgba(244, 231, 193, 0.86);
            font-size: 9.5px;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }

        .v-architecture-meta-pill.weight {
            color: #d8b45a;
        }

        .v-architecture-meta-pill.priority {
            border-color: rgba(125, 211, 252, 0.24);
        }

        .v-architecture-meta-pill.mood {
            color: rgba(191, 219, 254, 0.84);
        }

        .v-architecture-category-preview {
            margin: 16px 0 16px;
        }

        .v-architecture-category-preview span {
            display: inline-flex;
            padding: 5px 11px;
            border-radius: 999px;
            background: rgba(5, 19, 38, 0.62);
            color: rgba(235, 241, 249, 0.72);
            font-size: 10.5px;
            font-weight: 700;
        }

        .v-architecture-category-stack {
            display: flex;
            flex-direction: column;
            gap: 14px;
            margin-top: 18px;
        }

        .v-architecture-category {
            overflow: hidden;
            border: 1px solid rgba(196, 151, 69, 0.35);
            border-radius: 22px;
            background:
                linear-gradient(180deg, rgba(8, 22, 42, 0.96), rgba(5, 16, 31, 0.98));
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.06),
                0 18px 50px rgba(0, 0, 0, 0.35);
        }

        .v-architecture-category[open] {
            border-color: rgba(196, 151, 69, 0.44);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.06),
                inset 0 0 48px rgba(196, 151, 69, 0.035),
                0 22px 58px rgba(0, 0, 0, 0.38);
        }

        .v-architecture-category-summary {
            display: grid;
            grid-template-columns: auto 1fr auto auto auto auto auto;
            align-items: center;
            gap: 10px;
            min-height: 82px;
            padding: 18px 22px;
            cursor: pointer;
            list-style: none;
            background:
                linear-gradient(90deg, rgba(196, 151, 69, 0.055), transparent 42%),
                rgba(255, 255, 255, 0.012);
        }

        .v-architecture-category-number {
            width: 38px;
            height: 38px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            border: 1px solid rgba(216, 180, 106, 0.48);
            color: #e0bd74;
            font-family: 'Cinzel', serif;
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 0.1em;
            background:
                radial-gradient(circle at 38% 22%, rgba(255, 244, 205, 0.16), transparent 34%),
                linear-gradient(145deg, rgba(31, 39, 51, 0.92), rgba(5, 16, 31, 0.98));
            box-shadow:
                0 0 0 4px rgba(196, 151, 69, 0.045),
                0 10px 24px rgba(0, 0, 0, 0.28),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }

        .v-architecture-category-main {
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 0;
        }

        .v-architecture-category-title {
            color: #fff9ec;
            font-family: 'Cinzel', serif;
            font-size: 13px;
            font-weight: 800;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            line-height: 1.35;
        }

        .v-architecture-category-description {
            color: rgba(235, 241, 249, 0.66);
            font-size: 11.5px;
            line-height: 1.45;
        }

        .v-architecture-category-stat,
        .v-architecture-category-mood,
        .v-architecture-witness-count {
            color: rgba(203, 213, 225, 0.62);
            font-size: 9.5px;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .v-architecture-category-stat,
        .v-architecture-category-mood {
            display: inline-flex;
            align-items: center;
            min-height: 24px;
            padding: 3px 9px;
            border: 1px solid rgba(196, 151, 69, 0.2);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.025);
            color: rgba(225, 218, 202, 0.68);
        }

        .v-architecture-category-mood {
            color: rgba(216, 180, 106, 0.84);
            border-color: rgba(196, 151, 69, 0.28);
            background: rgba(196, 151, 69, 0.055);
        }

        .v-architecture-category-chevron {
            width: 11px;
            height: 11px;
            border-right: 2px solid rgba(212, 175, 55, 0.82);
            border-bottom: 2px solid rgba(212, 175, 55, 0.82);
            transform: rotate(45deg) translateY(-2px);
            transition: transform 0.25s ease;
        }

        .v-architecture-category[open] .v-architecture-category-chevron {
            transform: rotate(225deg) translate(-2px, -1px);
        }

        .v-architecture-category-body {
            padding: 24px 24px 28px;
            border-top: 1px solid rgba(196, 151, 69, 0.18);
        }

        .v-architecture-collection {
            margin-top: 18px;
        }

        .v-architecture-collection:first-child {
            margin-top: 0;
        }

        .v-architecture-collection > header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 10px;
            padding: 0 0 8px;
            border: 0;
            border-bottom: 1px solid rgba(196, 151, 69, 0.16);
            border-radius: 0;
            background: transparent !important;
            box-shadow: none;
        }

        .v-architecture-collection h4 {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin: 0;
            color: #d8b46a;
            font-family: 'Cinzel', serif;
            font-size: 9px;
            letter-spacing: 0.14em;
            text-transform: uppercase;
        }

        .v-architecture-collection h4::before {
            content: '';
            width: 7px;
            height: 7px;
            border: 1px solid rgba(216, 180, 106, 0.86);
            background: rgba(216, 180, 106, 0.16);
            transform: rotate(45deg);
            box-shadow: 0 0 12px rgba(196, 151, 69, 0.18);
        }

        .v-architecture-collection > header span {
            color: rgba(203, 213, 225, 0.52);
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 0.04em;
        }

        .v-architecture-item-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 8px;
        }

        .v-architecture-item-grid.major-card-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            justify-content: stretch;
            gap: 18px;
        }

        .v-architecture-item-card {
            padding: 16px 20px;
            border: 1px solid rgba(196, 151, 69, 0.28);
            border-radius: 16px;
            background:
                linear-gradient(90deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
                radial-gradient(circle at 18% 0%, rgba(196, 151, 69, 0.04), transparent 34%);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.035),
                0 10px 28px rgba(0, 0, 0, 0.14);
            transition: border-color 0.22s ease, background 0.22s ease, transform 0.22s ease;
        }

        .v-architecture-item-card:hover {
            transform: translateY(-1px);
            border-color: rgba(196, 151, 69, 0.42);
            background:
                linear-gradient(90deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.022)),
                radial-gradient(circle at 18% 0%, rgba(196, 151, 69, 0.065), transparent 34%);
        }

        .v-architecture-item-card.cinematic {
            border-color: rgba(218, 177, 80, 0.38);
            background:
                radial-gradient(circle at 18% 0%, rgba(216, 180, 90, 0.12), transparent 40%),
                linear-gradient(180deg, rgba(7, 24, 48, 0.9), rgba(3, 12, 26, 0.97));
        }

        .v-architecture-item-card.featured {
            border-color: rgba(218, 177, 80, 0.28);
            box-shadow:
                0 14px 34px rgba(0, 0, 0, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.045);
        }

        .v-architecture-major-card {
            position: relative;
            overflow: hidden;
            min-height: 300px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 22px 22px 18px;
            border: 1px solid rgba(196, 151, 69, 0.32);
            border-radius: 20px;
            background:
                radial-gradient(circle at top, rgba(196, 151, 69, 0.08), rgba(6, 18, 34, 0.96)),
                linear-gradient(180deg, rgba(8, 22, 42, 0.94), rgba(5, 16, 31, 0.98));
            box-shadow:
                0 14px 35px rgba(0, 0, 0, 0.32),
                inset 0 1px 0 rgba(255, 255, 255, 0.055);
        }

        .v-architecture-major-card:hover {
            transform: translateY(-3px);
            border-color: rgba(196, 151, 69, 0.55);
        }

        .v-architecture-major-card::before {
            content: '';
            position: absolute;
            inset: 10px;
            border: 1px dashed rgba(196, 151, 69, 0.08);
            border-radius: 16px;
            pointer-events: none;
        }

        .v-architecture-major-card-content {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            min-height: 0;
        }

        .v-architecture-major-eyebrow {
            color: #d8b46a;
            font-family: 'Cinzel', serif;
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 0.16em;
            text-transform: uppercase;
        }

        .v-architecture-major-card h5 {
            margin: 18px 0 10px;
            color: rgba(246, 241, 229, 0.92);
            font-family: var(--font-body);
            font-size: 1.12rem;
            line-height: 1.72;
            font-weight: 500;
            letter-spacing: 0.005em;
            text-transform: none;
            max-width: 320px;
        }

        .v-architecture-major-card p {
            margin: 0;
            padding: 12px 14px;
            border: 1px solid rgba(218, 177, 80, 0.12);
            border-radius: 10px;
            background: rgba(255, 247, 214, 0.035);
            color: rgba(235, 241, 249, 0.74);
            font-size: 12px;
            line-height: 1.65;
            max-width: 300px;
        }

        .v-architecture-major-card .v-architecture-item-meta {
            justify-content: center;
            margin-top: 14px;
        }

        .v-architecture-major-card-footer {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-top: 18px;
            text-align: center;
        }

        .v-architecture-major-card-footer .v-architecture-ref-token {
            margin-inline: auto;
        }

        .v-architecture-major-card .v-architecture-primary-witness {
            width: 100%;
            justify-content: center;
        }

        .v-architecture-item-header {
            display: grid;
            grid-template-columns: minmax(320px, 1fr) auto auto;
            gap: 18px;
            align-items: center;
        }

        .v-architecture-item-card h5 {
            margin: 0;
            color: rgba(246, 241, 229, 0.92);
            font-family: var(--font-body);
            font-size: 1.08rem;
            line-height: 1.64;
            font-weight: 500;
            letter-spacing: 0.005em;
        }

        .v-architecture-item-card.cinematic h5 {
            color: rgba(255, 249, 236, 0.94);
            font-size: 1.1rem;
        }

        .v-architecture-item-card p {
            margin: 8px 0 0;
            color: rgba(235, 241, 249, 0.68);
            font-size: 12px;
            line-height: 1.55;
        }

        .v-architecture-item-meta,
        .v-architecture-chip-row {
            margin-top: 12px;
        }

        .v-architecture-primary-witness {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            margin-top: 0;
        }

        .v-architecture-primary-witness > span:first-child,
        .v-architecture-chip-row > span:first-child {
            color: rgba(203, 213, 225, 0.54);
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .v-architecture-witnesses {
            margin-top: 13px;
        }

        .v-architecture-witnesses summary,
        .v-architecture-details-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 28px;
            padding: 5px 13px;
            border: 1px solid rgba(196, 151, 69, 0.45);
            border-radius: 999px;
            color: #d8b46a;
            background: rgba(196, 151, 69, 0.08);
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            cursor: pointer;
        }

        .v-architecture-details-btn {
            white-space: nowrap;
        }

        .v-architecture-details-btn:hover {
            color: #fff7d6;
            border-color: rgba(216, 180, 106, 0.68);
            background: rgba(196, 151, 69, 0.18);
            box-shadow: 0 0 18px rgba(196, 151, 69, 0.16);
        }

        .v-architecture-witness-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid rgba(218, 177, 80, 0.12);
        }

        .v-architecture-witness-role {
            display: grid;
            grid-template-columns: 92px 1fr;
            gap: 10px;
            align-items: start;
        }

        .v-architecture-witness-role > span:first-child {
            color: rgba(216, 180, 90, 0.72);
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            padding-top: 4px;
        }

        .v-architecture-muted {
            color: rgba(203, 213, 225, 0.54);
            font-size: 11px;
        }

        .v-god-architecture-library {
            width: min(1380px, calc(100% - 12px));
            display: grid;
            grid-template-columns: 280px minmax(0, 1fr);
            align-items: start;
            gap: 22px;
            color: #e8d9b5;
            font-family: 'Inter', system-ui, sans-serif;
            transition: grid-template-columns 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .v-god-topic-sidebar {
            position: sticky;
            top: 18px;
            max-height: calc(100vh - 120px);
            overflow: auto;
            padding: 28px 20px 22px;
            border-radius: 16px;
            background:
                radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.075), transparent 34%),
                linear-gradient(180deg, rgba(7, 20, 37, 0.75), rgba(3, 11, 22, 0.92));
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            box-shadow:
                0 25px 80px rgba(0, 0, 0, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.035);
            position: relative;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .v-god-sidebar-toggle {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(212, 175, 55, 0.22);
            border-radius: 50%;
            background: rgba(7, 20, 37, 0.85);
            color: #d4af37;
            cursor: pointer;
            transition: all 0.25s ease;
            z-index: 10;
            padding: 0;
        }

        .v-god-sidebar-toggle:hover {
            background: rgba(212, 175, 55, 0.15);
            border-color: rgba(212, 175, 55, 0.45);
            box-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
        }

        .v-god-sidebar-toggle-icon {
            transition: transform 0.3s ease;
        }

        @media (min-width: 981px) {
            .v-god-architecture-library.sidebar-collapsed {
                grid-template-columns: 82px minmax(0, 1fr);
            }
            .v-god-topic-sidebar.collapsed {
                padding: 28px 10px 22px;
                overflow-x: hidden;
            }
            .v-god-topic-sidebar.collapsed .v-god-sidebar-toggle {
                right: 50%;
                transform: translateX(50%);
                top: 16px;
            }
            .v-god-topic-sidebar.collapsed .v-god-sidebar-toggle-icon {
                transform: rotate(180deg);
            }
            .v-god-topic-sidebar.collapsed .v-god-sidebar-heading {
                display: none !important;
            }
            .v-god-topic-sidebar.collapsed .v-god-topic-nav {
                margin-top: 48px;
            }
            .v-god-topic-sidebar.collapsed .v-god-domain-copy {
                display: none !important;
            }
            .v-god-topic-sidebar.collapsed .v-god-domain-topic-list {
                display: none !important;
            }
            .v-god-topic-sidebar.collapsed .v-god-domain-button {
                grid-template-columns: 1fr;
                justify-items: center;
                padding: 11px 0;
            }
            .v-combined-section {
                max-width: min(1380px, calc(100% - 12px));
                margin: 0 auto;
                padding-left: 104px;
                box-sizing: border-box;
            }
            .v-god-major-grid {
                padding-left: 13px !important;
            }
            .v-god-witness-timeline {
                padding-left: 13px !important;
            }
        }

        @media (max-width: 980px) {
            .v-god-sidebar-toggle {
                display: none !important;
            }
        }

        /* -------------------------------------------------------------------------
           LUXURY THEOLOGICAL OBSERVATORY SYSTEM STYLES
           ------------------------------------------------------------------------- */
        
        /* Layer 1: Celestial Grid Overlay */
        #visuals-dashboard {
            position: relative;
        }
        #visuals-dashboard::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: 
                linear-gradient(rgba(212, 175, 55, 0.012) 1px, transparent 1px),
                linear-gradient(90deg, rgba(212, 175, 55, 0.012) 1px, transparent 1px);
            background-size: 55px 55px;
            pointer-events: none;
            z-index: 0;
        }

        /* Layer 2: Gold Theological Constellation Background overlay */
        .v-celestial-bg::after {
            content: '';
            position: absolute;
            inset: 0;
            background-image: radial-gradient(circle at 75% 25%, rgba(212, 175, 55, 0.04) 0%, transparent 60%);
            pointer-events: none;
            z-index: 1;
        }

        /* Layer 3 & 4: Deep Navy Glass & Glowing Card containers */
        .v-god-topic-sidebar, 
        .v-god-topic-hero,
        .v-god-major-card,
        .v-god-constellation-map-container,
        .v-god-category-filter {
            background: linear-gradient(180deg, rgba(7, 15, 35, 0.88), rgba(4, 9, 24, 0.95)) !important;
            border: 1px solid rgba(212, 175, 55, 0.18) !important;
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            box-shadow: 
                0 20px 50px rgba(0, 0, 0, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }

        /* Layer 4: active card glow bloom */
        .v-god-topic-panel.active .v-god-major-card:hover {
            box-shadow: 
                0 25px 60px rgba(0, 0, 0, 0.5),
                0 0 35px rgba(212, 175, 55, 0.16) !important;
        }

        /* Sacred Hero Section additions */
        .v-architecture-header {
            border: none !important;
            box-shadow: 
                0 0 45px rgba(212, 175, 55, 0.08),
                0 25px 60px rgba(0, 0, 0, 0.55),
                inset 0 0 25px rgba(212, 175, 55, 0.04) !important;
        }

        .v-section-center-beam {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%;
            width: 2px;
            background: linear-gradient(to bottom, rgba(212, 175, 55, 0.05), transparent);
            pointer-events: none;
            transform: translateX(-50%);
            z-index: 1;
        }

        .v-celestial-halo {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 500px;
            height: 500px;
            pointer-events: none;
            z-index: 0;
            animation: vHaloRotate 20s infinite linear;
        }

        @keyframes vHaloRotate {
            from { transform: translate(-50%, -50%) rotate(0deg); }
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }

        .v-shimmer-title {
            background: linear-gradient(90deg, #FFF9EC 0%, #d4af37 50%, #FFF9EC 100%);
            background-size: 200% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: vShimmerText 15s linear infinite;
        }

        @keyframes vShimmerText {
            0% { background-position: 0% 50%; }
            100% { background-position: 200% 50%; }
        }

        /* Sidebar Navigation Monument spine & medallions */
        .v-god-topic-nav {
            position: relative;
        }

        .v-god-topic-nav::before {
            content: '';
            position: absolute;
            top: 15px;
            bottom: 15px;
            left: 32px;
            width: 2px;
            background: linear-gradient(to bottom, transparent, rgba(212, 175, 55, 0.25) 15%, rgba(212, 175, 55, 0.25) 85%, transparent);
            z-index: 0;
            pointer-events: none;
            transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        @media (min-width: 981px) {
            .v-god-topic-sidebar.collapsed .v-god-topic-nav::before {
                left: 50% !important;
                transform: translateX(-50%);
            }
        }

        .v-god-topic-nav-number {
            position: relative;
            z-index: 2;
            border: 1px solid rgba(212, 175, 55, 0.35);
            border-radius: 4px;
            background: rgba(7, 15, 35, 0.85);
            transition: all 0.3s ease;
        }

        .v-god-topic-nav-number::before {
            content: '';
            position: absolute;
            inset: -3px;
            border: 1px solid rgba(212, 175, 55, 0.16);
            border-radius: 4px;
            transform: rotate(45deg);
            pointer-events: none;
            transition: all 0.3s ease;
        }

        .v-god-domain-button.active .v-god-topic-nav-number {
            border-color: #d4af37;
            background: rgba(212, 175, 55, 0.15);
            box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
        }

        .v-god-domain-button.active .v-god-topic-nav-number::before {
            border-color: rgba(212, 175, 55, 0.5);
        }

        .v-god-domain-group {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .v-god-domain-group:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
        }

        .v-god-domain-button.active {
            background: 
                radial-gradient(circle at center, rgba(212, 175, 55, 0.12) 0%, transparent 80%),
                rgba(7, 15, 35, 0.95) !important;
            box-shadow: 
                0 0 20px rgba(212, 175, 55, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
        }

        .v-god-domain-copy .v-god-domain-name {
            color: #fff7df;
            font-family: 'Cinzel', serif;
            font-size: 0.85rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .v-god-domain-copy .v-god-domain-subtitle {
            color: rgba(216, 180, 106, 0.65);
            font-size: 0.65rem;
            font-weight: 500;
            letter-spacing: 0.02em;
            line-height: 1.2;
            margin: 2px 0;
        }

        /* Sacred Emblem & Descriptor */
        .v-god-topic-orb {
            animation: vOrbPulseRotate 25s infinite linear;
        }
        .v-god-topic-orb span {
            display: block;
            animation: vOrbTextCounterRotate 25s infinite linear;
        }

        @keyframes vOrbPulseRotate {
            0% { transform: scale(1) rotate(0deg); }
            50% { transform: scale(1.02) rotate(180deg); }
            100% { transform: scale(1) rotate(360deg); }
        }

        @keyframes vOrbTextCounterRotate {
            0% { transform: rotate(360deg); }
            100% { transform: rotate(0deg); }
        }

        .v-god-topic-descriptor {
            font-family: 'Cinzel', serif;
            font-size: 0.68rem;
            color: #d4af37;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            margin-bottom: 8px;
            text-shadow: 0 0 10px rgba(212, 175, 55, 0.35);
        }

        /* Premium Metrics Stat Blocks */
        .v-god-topic-stats {
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 20px 24px;
            border-radius: 14px;
            margin-top: 24px;
        }
        .v-stat-block {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            flex: 1;
            padding: 8px 12px;
            transition: all 0.3s ease;
        }
        .v-stat-block:hover {
            transform: translateY(-2px);
            filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.25));
        }
        .v-stat-num {
            font-size: 1.8rem;
            font-weight: 700;
            color: #fff7df;
            font-family: 'Cinzel', serif;
            font-variant-numeric: tabular-nums;
            margin-bottom: 4px;
            text-shadow: 0 0 12px rgba(212, 175, 55, 0.3);
        }
        .v-stat-lens {
            font-size: 1rem;
            font-weight: 700;
            color: #fff7df;
            font-family: 'Cinzel', serif;
            margin-bottom: 4px;
            text-shadow: 0 0 12px rgba(212, 175, 55, 0.3);
            text-transform: uppercase;
        }
        .v-stat-label {
            font-size: 0.72rem;
            font-weight: 600;
            color: rgba(216, 180, 106, 0.85);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        .v-stat-caption {
            font-size: 0.6rem;
            color: rgba(203, 213, 225, 0.5);
            margin-top: 2px;
        }
        .v-stat-separator {
            width: 1px;
            height: 38px;
            background: linear-gradient(to bottom, transparent, rgba(212, 175, 55, 0.22) 20%, rgba(212, 175, 55, 0.22) 80%, transparent);
        }

        /* Constellation Map */
        .v-god-constellation-map-container {
            padding: 24px;
            border-radius: 16px;
            margin: 28px 0;
        }
        .v-constellation-title {
            display: block;
            font-family: 'Cinzel', serif;
            font-size: 0.75rem;
            color: #d8b26a;
            font-weight: 700;
            letter-spacing: 0.28em;
            text-transform: uppercase;
            text-align: center;
            margin-bottom: 24px;
            text-shadow: 0 0 12px rgba(212, 175, 55, 0.25);
        }
        .v-god-constellation-canvas {
            position: relative;
            width: 100%;
            height: 320px;
            max-width: 480px;
            margin: 0 auto;
        }
        .v-constellation-svg-lines {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
        }
        .v-constellation-node {
            position: absolute;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 0;
            z-index: 2;
            outline: none;
        }
        .v-constellation-node .v-node-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(7, 15, 35, 0.95);
            border: 2px solid rgba(212, 175, 55, 0.5);
            box-shadow: 0 0 8px rgba(212, 175, 55, 0.3);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .v-constellation-node:not(.active) .v-node-dot {
            width: 4px;
            height: 4px;
            border-width: 1px;
            border-color: rgba(212, 175, 55, 0.25);
            background: rgba(7, 15, 35, 0.95);
            box-shadow: none;
        }
        .v-constellation-node .v-node-label {
            font-family: 'Cinzel', serif;
            font-size: 0.65rem;
            color: rgba(232, 217, 181, 0.75);
            margin-top: 6px;
            white-space: nowrap;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            text-shadow: 0 2px 4px rgba(0,0,0,0.6);
        }
        .v-constellation-node:not(.active) .v-node-label {
            opacity: 0;
            pointer-events: none;
        }
        .v-constellation-node:not(.active):hover .v-node-label {
            opacity: 1;
            z-index: 10;
        }
        .v-constellation-node:hover .v-node-dot,
        .v-constellation-node.active .v-node-dot,
        .v-constellation-node.resonates .v-node-dot {
            transform: scale(1.4) !important;
            border-color: #d4af37 !important;
            background: #d4af37 !important;
            width: 8px !important;
            height: 8px !important;
            box-shadow: 
                0 0 15px #d4af37,
                0 0 30px rgba(212, 175, 55, 0.4) !important;
        }
        .v-constellation-node:hover .v-node-label,
        .v-constellation-node.active .v-node-label,
        .v-constellation-node.resonates .v-node-label {
            color: #fff7df !important;
            opacity: 1 !important;
            font-weight: 600;
            text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
        }
        .v-constellation-node.center .v-node-dot {
            width: 14px;
            height: 14px;
            border-width: 3px;
            border-color: #d4af37;
            box-shadow: 0 0 14px rgba(212, 175, 55, 0.5);
        }
        .v-constellation-node.center .v-node-label {
            font-size: 0.75rem;
            font-weight: 600;
            color: #fff7df;
        }

        /* Premium Taxonomy Capsules */
        .v-god-category-filter {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
            padding: 16px 20px;
            border-radius: 16px;
            margin-bottom: 20px;
        }
        .v-god-category-filter button {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 14px;
            border-radius: 999px !important;
            border: 1px solid rgba(212, 175, 55, 0.15);
            background: rgba(255, 255, 255, 0.015);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            color: rgba(232, 217, 181, 0.72);
            font-family: 'Inter', system-ui, sans-serif;
            font-size: 0.72rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.25s ease;
        }
        .v-god-category-filter button:hover {
            border-color: rgba(212, 175, 55, 0.4);
            background: rgba(212, 175, 55, 0.05);
            color: #fff7df;
        }
        .v-god-category-filter button.active {
            border-color: #d4af37 !important;
            background: rgba(212, 175, 55, 0.12) !important;
            color: #fff7df !important;
            box-shadow: 
                0 0 15px rgba(212, 175, 55, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
        }
        .v-mini-medallion {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 18px;
            height: 18px;
            border-radius: 4px;
            border: 1px solid rgba(212, 175, 55, 0.28);
            background: rgba(7, 15, 35, 0.6);
            font-size: 0.58rem;
            font-weight: 700;
            font-family: 'Cinzel', serif;
            color: #d4af37;
            transform: rotate(45deg);
        }
        .v-mini-medallion span {
            display: inline-block;
            transform: rotate(-45deg);
        }

        /* Collectible Card ornaments & custom styles */
        .v-god-major-card {
            position: relative;
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }
        .v-god-major-card:hover {
            transform: translateY(-6px) !important;
            border-color: rgba(212, 175, 55, 0.55) !important;
            box-shadow: 
                0 25px 60px rgba(0, 0, 0, 0.5),
                0 0 30px rgba(212, 175, 55, 0.15) !important;
        }
        .v-card-ornament {
            position: absolute;
            width: 12px;
            height: 12px;
            border: 1px solid #d4af37;
            pointer-events: none;
            z-index: 3;
        }
        .v-card-ornament.top-left {
            top: 6px;
            left: 6px;
            border-right: none;
            border-bottom: none;
        }
        .v-card-ornament.bottom-right {
            bottom: 6px;
            right: 6px;
            border-left: none;
            border-top: none;
        }
        .v-god-card-summary {
            font-size: 0.78rem;
            line-height: 1.5;
            color: rgba(232, 217, 181, 0.8);
            margin: 10px 0;
            padding: 8px 12px;
            border-left: 2px solid rgba(212, 175, 55, 0.25);
            background: rgba(255, 255, 255, 0.01);
            text-align: left;
        }
        .v-god-card-explore-btn {
            display: inline-flex;
            align-items: center;
            justify-content: flex-start;
            align-self: flex-start;
            margin-top: 14px;
            font-family: 'Cinzel', serif;
            font-size: 0.65rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            color: #d4af37;
            cursor: pointer;
            transition: all 0.25s ease;
            text-transform: uppercase;
        }
        .v-god-major-card:hover .v-god-card-explore-btn {
            color: #fff7df;
            text-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
        }

        /* Scholars Manuscript Timeline of Witnesses */
        .v-god-witness-timeline {
            position: relative;
            display: flex;
            align-items: center;
            gap: 24px;
            padding: 24px 0;
        }
        .v-god-witness-timeline::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(to right, transparent, rgba(212, 175, 55, 0.25) 10%, rgba(212, 175, 55, 0.25) 90%, transparent);
            transform: translateY(-50%);
            z-index: 0;
            pointer-events: none;
        }


        /* Star Particles animation */
        @keyframes vStarDrift {
            0% { transform: translateY(0) translateX(0); opacity: 0.15; }
            50% { opacity: 0.4; }
            100% { transform: translateY(-40px) translateX(10px); opacity: 0.15; }
        }
        .v-particle {
            animation: vStarDrift 15s ease-in-out infinite alternate !important;
        }

        .v-god-sidebar-heading {
            padding: 6px 4px 18px;
            margin-bottom: 12px;
            border-bottom: 1px solid rgba(212, 175, 55, 0.16);
            text-align: center;
        }

        .v-god-sidebar-heading span {
            display: block;
            color: #d4af37;
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 1.35rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        .v-god-sidebar-heading strong {
            display: block;
            margin-top: 6px;
            color: rgba(232, 217, 181, 0.86);
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 1rem;
            font-weight: 500;
            letter-spacing: 0.04em;
        }

        .v-god-topic-nav {
            display: flex;
            flex-direction: column;
            gap: 7px;
        }

        .v-god-domain-group {
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.01);
            box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.045);
            overflow: hidden;
        }

        .v-god-domain-button {
            position: relative;
            display: grid;
            grid-template-columns: 42px 1fr;
            gap: 10px;
            align-items: center;
            width: 100%;
            padding: 11px 12px;
            border: 0;
            background:
                linear-gradient(90deg, rgba(212, 175, 55, 0.035), transparent 70%),
                rgba(255, 255, 255, 0.012);
            color: inherit;
            text-align: left;
            cursor: pointer;
            transition: background 0.25s ease-out, box-shadow 0.25s ease-out;
        }

        .v-god-domain-button.active {
            background:
                radial-gradient(circle at 0% 45%, rgba(212, 175, 55, 0.16), transparent 44%),
                linear-gradient(90deg, rgba(212, 175, 55, 0.08), transparent 70%),
                rgba(255, 255, 255, 0.03);
            box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.18);
        }

        .v-god-domain-copy {
            display: grid;
            gap: 4px;
            min-width: 0;
        }

        .v-god-domain-copy span {
            color: #fff7df;
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 0.9rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            line-height: 1.08;
            text-transform: uppercase;
        }

        .v-god-domain-copy small {
            color: rgba(216, 178, 106, 0.78);
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .v-god-domain-topic-list {
            display: none;
            max-height: 185px;
            overflow: auto;
            padding: 7px 8px 9px 54px;
            gap: 6px;
            background: rgba(2, 10, 20, 0.18);
            scrollbar-width: thin;
            scrollbar-color: rgba(212, 175, 55, 0.28) transparent;
        }

        .v-god-domain-group.active .v-god-domain-topic-list {
            display: grid;
        }

        .v-god-domain-zone {
            margin: 7px 0 2px;
            color: rgba(216, 178, 106, 0.72);
            font-family: 'Cinzel', serif;
            font-size: 0.56rem;
            font-weight: 800;
            letter-spacing: 0.1em;
            line-height: 1.35;
            text-transform: uppercase;
        }

        .v-god-topic-nav-domain {
            display: grid;
            gap: 3px;
            padding: 12px 6px 5px;
            color: rgba(216, 178, 106, 0.82);
            font-family: 'Cinzel', serif;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        .v-god-topic-nav-domain span {
            font-size: 0.58rem;
            font-weight: 800;
        }

        .v-god-topic-nav-domain strong {
            color: rgba(255, 247, 223, 0.86);
            font-size: 0.66rem;
            font-weight: 700;
        }

        .v-god-topic-nav-item {
            position: relative;
            display: block;
            align-items: start;
            width: 100%;
            padding: 8px 10px;
            border: 0;
            border-radius: 10px;
            background:
                linear-gradient(90deg, rgba(232, 217, 181, 0.018), transparent 68%),
                rgba(255, 255, 255, 0.012);
            color: inherit;
            text-align: left;
            cursor: pointer;
            box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.045);
            transition: transform 0.25s ease-out, background 0.25s ease-out, box-shadow 0.25s ease-out;
        }

        .v-god-topic-nav-item::before {
            content: '';
            position: absolute;
            inset: 14px auto 14px 0;
            width: 2px;
            border-radius: 999px;
            background: linear-gradient(180deg, transparent, rgba(212, 175, 55, 0.75), transparent);
            opacity: 0;
            box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
            transition: opacity 0.25s ease-out;
        }

        .v-god-topic-nav-item:hover,
        .v-god-topic-nav-item.active {
            transform: translateY(-2px);
            background:
                radial-gradient(circle at 0% 38%, rgba(212, 175, 55, 0.14), transparent 42%),
                linear-gradient(90deg, rgba(212, 175, 55, 0.07), transparent 68%),
                rgba(255, 255, 255, 0.035);
            box-shadow:
                0 22px 58px rgba(0, 0, 0, 0.38),
                0 0 34px rgba(212, 175, 55, 0.09),
                inset 0 0 0 1px rgba(212, 175, 55, 0.18);
        }

        .v-god-topic-nav-item:hover::before,
        .v-god-topic-nav-item.active::before {
            opacity: 1;
        }

        .v-god-topic-nav-number {
            width: 34px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            color: #d4af37;
            font-family: 'Cinzel', serif;
            font-size: 0.68rem;
            font-weight: 800;
            box-shadow:
                inset 0 0 0 1px rgba(212, 175, 55, 0.22),
                0 0 18px rgba(212, 175, 55, 0.05);
        }

        .v-god-topic-nav-copy {
            display: flex;
            min-width: 0;
            flex-direction: column;
            gap: 4px;
        }

        .v-god-topic-nav-copy span,
        .v-god-topic-nav-copy em {
            color: #fff7df;
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 0.9rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            line-height: 1.12;
            text-transform: uppercase;
        }

        .v-god-topic-nav-copy em {
            color: #d8b26a;
            font-style: normal;
            font-size: 0.8rem;
        }

        .v-god-topic-nav-copy small {
            color: rgba(232, 217, 181, 0.68);
            font-size: 0.66rem;
            line-height: 1.48;
        }

        .v-god-topic-content {
            min-width: 0;
        }

        .v-god-source-note {
            margin: 0 0 14px;
            color: rgba(232, 217, 181, 0.72);
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 0.9rem;
            letter-spacing: 0.04em;
            text-align: right;
        }

        /* Premium Theological Domains Overview & Tabs CSS */
        .v-god-architecture-library {
            grid-template-columns: 1fr !important;
            display: flex !important;
            flex-direction: column !important;
            width: 100% !important;
            max-width: 1380px !important;
        }

        .v-god-domain-overview-panel {
            display: flex;
            flex-direction: column;
            gap: 2rem;
            width: 100%;
            transition: opacity 0.3s ease;
        }
        .v-god-domain-overview-panel.hidden {
            display: none !important;
        }
        .v-god-topic-content.hidden {
            display: none !important;
        }

        .v-god-domain-tabs-container {
            display: flex;
            justify-content: center;
            width: 100%;
            margin-bottom: 0.5rem;
            border-bottom: 1px solid rgba(212, 175, 55, 0.15);
            padding-bottom: 1.5rem;
            overflow-x: auto;
            scrollbar-width: none; /* Firefox */
        }
        .v-god-domain-tabs-container::-webkit-scrollbar {
            display: none; /* Chrome/Safari */
        }

        .v-god-domain-tabs {
            display: flex;
            gap: 0.75rem;
            flex-wrap: nowrap;
        }

        .v-god-domain-tab {
            appearance: none;
            border: 1px solid rgba(201, 164, 107, 0.22);
            background: rgba(255, 255, 255, 0.05);
            color: rgba(232, 217, 181, 0.75);
            border-radius: 12px;
            padding: 10px 14px;
            font-family: var(--font-ui);
            font-size: 0.8rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            cursor: pointer;
            text-transform: uppercase;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            white-space: normal;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            line-height: 1.25;
            min-height: 56px;
            min-width: 140px;
        }
        .v-god-domain-tab:hover {
            background: rgba(255, 255, 255, 0.08);
            color: #fff7df;
            border-color: rgba(212, 175, 55, 0.4);
            transform: translateY(-1px);
        }
        .v-god-domain-tab.active {
            background: linear-gradient(135deg, #d4af37, #b8860b);
            color: #0d1223;
            border-color: #d4af37;
            box-shadow: 
                0 0 15px rgba(212, 175, 55, 0.3),
                0 4px 10px rgba(0, 0, 0, 0.25);
            font-weight: 700;
        }

        .v-god-domain-content-block {
            display: none;
            flex-direction: column;
            gap: 1.5rem;
            animation: fadeIn 0.4s ease-out;
        }
        .v-god-domain-content-block.active {
            display: flex;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(6px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .v-god-domain-intro {
            padding: 1.2rem 1.8rem;
            border-radius: 14px;
            background: rgba(255, 255, 255, 0.02);
            border-left: 3px solid #d4af37;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        .v-god-domain-summary {
            margin: 0;
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 1.15rem;
            color: rgba(232, 217, 181, 0.88);
            line-height: 1.5;
            font-style: italic;
        }

        .v-god-domain-topic-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 1.5rem;
            width: 100%;
        }

        .v-god-domain-topic-card {
            background:
                radial-gradient(circle at 88% -8%, rgba(232, 217, 181, 0.08), transparent 34%),
                linear-gradient(135deg, rgba(13, 18, 35, 0.95), rgba(16, 23, 44, 0.9));
            border: 1px solid rgba(201, 164, 107, 0.16);
            border-radius: 18px;
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }
        .v-god-domain-topic-card::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 18px;
            padding: 1px;
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.3), transparent 60%);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
            opacity: 0.5;
            transition: opacity 0.3s ease;
        }
        .v-god-domain-topic-card:hover {
            transform: translateY(-4px);
            border-color: rgba(212, 175, 55, 0.45);
            box-shadow: 
                0 15px 35px rgba(0, 0, 0, 0.35),
                0 0 15px rgba(212, 175, 55, 0.15);
        }
        .v-god-domain-topic-card:hover::after {
            opacity: 1;
        }

        .v-god-domain-topic-card-head {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .v-god-domain-topic-card-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(212, 175, 55, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            padding: 8px;
            transition: all 0.3s ease;
        }
        .v-god-domain-topic-card:hover .v-god-domain-topic-card-icon {
            background: rgba(212, 175, 55, 0.1);
            border-color: #d4af37;
            box-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
        }
        .v-god-domain-topic-card-icon svg {
            width: 100%;
            height: 100%;
            display: block;
        }

        .v-god-domain-topic-card-title {
            margin: 0;
            font-family: 'Cinzel', serif;
            font-size: 1rem;
            color: #fff7df;
            letter-spacing: 0.08em;
            text-shadow: 0 2px 4px rgba(0,0,0,0.4);
            font-weight: 700;
        }

        .v-god-domain-topic-card-description {
            margin: 0;
            font-family: 'Inter', sans-serif;
            font-size: 0.82rem;
            color: rgba(232, 217, 181, 0.75);
            line-height: 1.5;
            flex-grow: 1;
        }

        .v-god-domain-topic-card-btn {
            appearance: none;
            background: transparent;
            border: 0;
            padding: 0;
            margin: 0;
            align-self: flex-start;
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 0.95rem;
            font-weight: 700;
            font-style: italic;
            color: #d4af37;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
            transition: all 0.25s ease;
        }
        .v-god-domain-topic-card:hover .v-god-domain-topic-card-btn {
            color: #fff7df;
            transform: translateX(3px);
            text-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
        }

        /* Active Highlight Card CSS */
        .v-god-domain-topic-card.active {
            border-color: #d4af37 !important;
            background: linear-gradient(135deg, rgba(20, 25, 45, 0.95), rgba(25, 32, 58, 0.9)) !important;
            box-shadow: 
                0 15px 35px rgba(0, 0, 0, 0.4),
                0 0 20px rgba(212, 175, 55, 0.35) !important;
        }
        .v-god-domain-topic-card.active::after {
            opacity: 1 !important;
            background: linear-gradient(135deg, #d4af37, transparent 80%) !important;
        }
        .v-god-domain-topic-card.active .v-god-domain-topic-card-icon {
            background: rgba(212, 175, 55, 0.15) !important;
            border-color: #d4af37 !important;
            box-shadow: 0 0 12px rgba(212, 175, 55, 0.3) !important;
        }
        .v-god-domain-topic-card.active .v-god-domain-topic-card-btn {
            color: #fff7df !important;
            text-shadow: 0 0 8px rgba(212, 175, 55, 0.5) !important;
        }

        /* Scriptural Witnesses Tree List CSS */
        .v-god-witness-container {
            width: 100%;
            margin-top: 1.5rem;
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
        }
        .v-god-witness-mood-filter {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.75rem;
            padding: 8px 12px;
            background: rgba(255, 255, 255, 0.02);
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.04);
        }
        .v-god-witness-filter-label {
            font-family: var(--font-ui);
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: rgba(232, 217, 181, 0.5);
            margin-right: 0.5rem;
        }
        .v-god-witness-mood-filter button {
            appearance: none;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(212, 175, 55, 0.15);
            border-radius: 20px;
            padding: 6px 14px;
            color: rgba(232, 217, 181, 0.75);
            font-family: var(--font-ui);
            font-size: 0.72rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.25s ease;
        }
        .v-god-witness-mood-filter button.active {
            background: rgba(212, 175, 55, 0.12);
            border-color: #d4af37;
            color: #fff7df;
            box-shadow: 0 0 10px rgba(212, 175, 55, 0.15);
        }
        .v-god-witness-mood-filter button:hover:not(.active) {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(212, 175, 55, 0.35);
            color: #fff7df;
        }
        .v-god-witness-list {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            padding: 0;
            margin: 0;
            list-style: none;
            width: 100%;
        }
        .v-god-witness-item {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            position: relative;
            width: 100%;
            transition: all 0.3s ease;
        }
        .v-god-witness-item-header {
            display: flex;
            align-items: center;
            width: 100%;
        }
        .v-god-witness-expand-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.75rem;
            height: 1.75rem;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(212, 175, 55, 0.15);
            color: #d4af37;
            cursor: pointer;
            margin-right: 0.75rem;
            flex-shrink: 0;
            transition: all 0.25s ease;
            padding: 0;
        }
        .v-god-witness-expand-btn:hover {
            background: rgba(212, 175, 55, 0.12);
            border-color: rgba(212, 175, 55, 0.45);
            box-shadow: 0 0 8px rgba(212, 175, 55, 0.25);
            transform: scale(1.05);
        }
        .v-god-witness-expand-icon {
            transition: transform 0.25s ease;
        }
        .v-god-witness-expand-btn.expanded .v-god-witness-expand-icon {
            transform: rotate(90deg);
        }
        .v-god-witness-details-drawer {
            margin-left: 2.5rem;
            margin-top: 0.5rem;
            margin-bottom: 0.75rem;
            padding: 14px 18px;
            background: rgba(13, 18, 35, 0.45);
            border: 1px dashed rgba(212, 175, 55, 0.2);
            border-radius: 12px;
            box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            animation: vFadeInDrawer 0.3s ease;
        }
        @keyframes vFadeInDrawer {
            from { opacity: 0; transform: translateY(-5px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .v-god-witness-drawer-card {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 10px 14px;
            border-left: 3px solid #d4af37;
            background: rgba(255, 255, 255, 0.02);
            border-radius: 4px;
            margin-bottom: 10px;
        }
        .v-god-witness-drawer-card:last-child {
            margin-bottom: 0;
        }
        .v-god-witness-drawer-ref-header {
            display: flex;
            align-items: center;
        }
        .v-god-witness-drawer-verse-body {
            font-family: var(--font-body);
            font-size: 0.88rem;
            color: rgba(255, 247, 223, 0.85);
            line-height: 1.5;
            letter-spacing: 0.01em;
        }
        .v-god-witness-item.v-god-card-hidden {
            display: none !important;
        }
        .v-god-witness-list-marker {
            font-family: 'Courier New', Courier, monospace;
            font-size: 1.15rem;
            font-weight: 700;
            color: #d4af37;
            width: 3rem;
            flex-shrink: 0;
            text-align: center;
            opacity: 0.75;
            letter-spacing: -0.05em;
        }
        .v-god-witness-list-marker::before {
            content: attr(data-branch);
            display: inline-block;
        }
        .v-god-witness-row-btn {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-grow: 1;
            text-align: left;
            appearance: none;
            background: rgba(13, 18, 35, 0.55);
            border: 1px solid rgba(212, 175, 55, 0.1);
            border-radius: 12px;
            padding: 12px 18px;
            cursor: pointer;
            transition: all 0.25s ease;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
        .v-god-witness-row-btn:hover {
            background: rgba(212, 175, 55, 0.08);
            border-color: rgba(212, 175, 55, 0.35);
            transform: translateX(3px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
        }
        .v-god-witness-text {
            font-family: var(--font-body);
            font-size: 0.92rem;
            color: #fff7df;
            font-weight: 500;
            letter-spacing: 0.01em;
        }
        .v-god-witness-ref {
            font-family: 'Cinzel', serif;
            font-size: 0.8rem;
            color: #d4af37;
            font-weight: 700;
            margin-left: 0.75rem;
            letter-spacing: 0.05em;
        }
        .v-god-witness-mood-tag {
            font-family: var(--font-ui);
            font-size: 0.65rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            padding: 3px 8px;
            border-radius: 4px;
            text-transform: uppercase;
            flex-shrink: 0;
            margin-left: auto;
        }
        .v-god-witness-mood-tag.mood-doctrinal {
            background: rgba(91, 126, 216, 0.12);
            border: 1px solid rgba(91, 126, 216, 0.3);
            color: #7ba2ff;
        }
        .v-god-witness-mood-tag.mood-devotional {
            background: rgba(212, 107, 95, 0.12);
            border: 1px solid rgba(212, 107, 95, 0.3);
            color: #ff8e82;
        }
        .v-god-witness-mood-tag.mood-cosmic {
            background: rgba(99, 102, 241, 0.12);
            border: 1px solid rgba(99, 102, 241, 0.3);
            color: #818cf8;
        }
        .v-god-witness-mood-tag.mood-prophetic {
            background: rgba(168, 85, 247, 0.12);
            border: 1px solid rgba(168, 85, 247, 0.3);
            color: #c084fc;
        }
        .v-god-witness-mood-tag.mood-contemplative {
            background: rgba(148, 163, 184, 0.12);
            border: 1px solid rgba(148, 163, 184, 0.3);
            color: #94a3b8;
        }
        .v-god-witness-mood-tag.mood-practical {
            background: rgba(194, 120, 76, 0.12);
            border: 1px solid rgba(194, 120, 76, 0.3);
            color: #ee8844;
        }
        .v-god-witness-mood-tag.mood-redemptive {
            background: rgba(190, 72, 72, 0.12);
            border: 1px solid rgba(190, 72, 72, 0.3);
            color: #f87171;
        }
        .v-god-witness-mood-tag.mood-triumphant {
            background: rgba(250, 204, 21, 0.12);
            border: 1px solid rgba(250, 204, 21, 0.3);
            color: #facc15;
        }
        .v-god-witness-mood-tag.mood-covenantal {
            background: rgba(116, 168, 111, 0.12);
            border: 1px solid rgba(116, 168, 111, 0.3);
            color: #8ee288;
        }
        .v-god-witness-mood-tag.mood-experiential {
            background: rgba(216, 168, 63, 0.12);
            border: 1px solid rgba(216, 168, 63, 0.3);
            color: #ffd166;
        }
        .v-god-witness-mood-tag.mood-other {
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: rgba(232, 217, 181, 0.7);
        }

        /* Back to Domains Button Styling */
        .v-god-back-button-container {
            width: 100%;
            display: flex;
            margin-bottom: 1.5rem;
        }
        .v-god-back-button {
            appearance: none;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(212, 175, 55, 0.2);
            color: rgba(232, 217, 181, 0.88);
            border-radius: 10px;
            padding: 10px 18px;
            font-family: var(--font-ui);
            font-size: 0.8rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.25s ease;
            display: flex;
            align-items: center;
            gap: 6px;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        .v-god-back-button:hover {
            background: rgba(212, 175, 55, 0.1);
            border-color: #d4af37;
            color: #fff7df;
            transform: translateX(-3px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        /* Responsive Breakpoints */
        @media (max-width: 980px) {
            .v-god-domain-tabs-container {
                justify-content: flex-start;
                padding-bottom: 0.75rem;
            }
            .v-god-domain-topic-grid {
                grid-template-columns: 1fr;
                gap: 1.2rem;
            }
            /* On mobile: show cards, hide constellation */
            .v-god-domain-constellation-container {
                display: none !important;
            }
            .v-god-domain-intro,
            .v-god-domain-topic-grid {
                display: block !important;
            }
        }

        /* On desktop: hide cards, show constellation */
        @media (min-width: 981px) {
            .v-god-domain-intro,
            .v-god-domain-topic-grid {
                display: none !important;
            }
            .v-god-domain-constellation-container {
                display: flex !important;
            }
        }

        /* ───── Constellation Container ───── */
        .v-god-domain-constellation-container {
            flex-direction: column;
            gap: 0;
            width: 100%;
            min-height: 520px;
            background:
                radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, 0.06) 0%, transparent 65%),
                linear-gradient(160deg, rgba(10, 14, 30, 0.98) 0%, rgba(13, 18, 40, 0.97) 100%);
            border: 1px solid rgba(212, 175, 55, 0.12);
            border-radius: 20px;
            overflow: hidden;
        }

        /* Header Row */
        .v-god-domain-constellation-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1.5rem;
            padding: 1.6rem 2rem 1rem;
            border-bottom: 1px solid rgba(212, 175, 55, 0.08);
        }
        .v-god-domain-constellation-title-block {
            flex: 1;
        }
        .v-god-domain-constellation-title {
            font-family: 'Cinzel', serif;
            font-size: 1.45rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            color: rgba(232, 210, 150, 0.95);
            margin: 0 0 0.35rem;
        }
        .v-god-domain-constellation-subtitle {
            font-size: 0.82rem;
            color: rgba(232, 217, 181, 0.62);
            margin: 0;
            line-height: 1.5;
        }
        .v-god-domain-constellation-summary-card {
            max-width: 310px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(212, 175, 55, 0.15);
            border-radius: 12px;
            padding: 0.85rem 1rem;
        }
        .v-god-domain-summary-card-text {
            font-size: 0.82rem;
            font-style: italic;
            color: rgba(232, 217, 181, 0.8);
            margin: 0;
            line-height: 1.55;
        }
        .v-god-domain-summary-card-sub {
            display: block;
            margin-top: 0.4rem;
            font-style: normal;
            font-size: 0.73rem;
            color: rgba(212, 175, 55, 0.65);
            letter-spacing: 0.02em;
        }

        /* Main Grid (Left Panel | Canvas | Right Panel) */
        .v-god-domain-constellation-grid {
            display: grid;
            grid-template-columns: 180px 1fr 180px;
            gap: 0;
            flex: 1;
            min-height: 380px;
        }
        .v-god-domain-constellation-side-panel {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 1.4rem 1.2rem;
            border-right: 1px solid rgba(212, 175, 55, 0.07);
        }
        .v-god-domain-constellation-side-panel.right {
            border-right: 0;
            border-left: 1px solid rgba(212, 175, 55, 0.07);
        }
        .v-god-domain-constellation-side-panel h3 {
            font-family: 'Cinzel', serif;
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: rgba(212, 175, 55, 0.7);
            margin: 0 0 0.75rem;
        }
        .v-god-domain-constellation-panel-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 0.45rem;
        }
        .v-god-domain-constellation-panel-list li {
            font-size: 0.73rem;
            color: rgba(220, 210, 190, 0.7);
            line-height: 1.45;
            padding-left: 1rem;
            position: relative;
        }
        .legend-list li::before {
            content: '—';
            position: absolute;
            left: 0;
            color: rgba(212, 175, 55, 0.45);
            font-size: 0.65rem;
        }
        .insights-list li {
            padding-left: 1.4rem;
        }
        .insights-list li::before {
            content: '◆';
            position: absolute;
            left: 0;
            font-size: 0.5rem;
            color: rgba(212, 175, 55, 0.5);
            top: 3px;
        }
        .v-god-domain-constellation-panel-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.45rem 0.9rem;
            background: rgba(212, 175, 55, 0.08);
            border: 1px solid rgba(212, 175, 55, 0.2);
            border-radius: 999px;
            color: rgba(212, 175, 55, 0.85);
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .v-god-domain-constellation-panel-btn:hover {
            background: rgba(212, 175, 55, 0.16);
            border-color: rgba(212, 175, 55, 0.4);
            color: rgba(232, 210, 150, 1);
        }

        /* Canvas */
        .v-god-domain-constellation-canvas {
            position: relative;
            width: 100%;
            min-height: 380px;
        }
        .v-god-domain-constellation-svg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        /* Center Node */
        .v-god-domain-constellation-center-node {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            z-index: 2;
            pointer-events: none;
        }
        .v-god-domain-constellation-center-circle {
            width: 72px;
            height: 72px;
            border-radius: 50%;
            background:
                radial-gradient(circle at 35% 30%, rgba(212, 175, 55, 0.25), transparent 60%),
                rgba(13, 18, 40, 0.9);
            border: 2px solid rgba(212, 175, 55, 0.5);
            box-shadow:
                0 0 20px rgba(212, 175, 55, 0.3),
                0 0 40px rgba(212, 175, 55, 0.12),
                inset 0 0 15px rgba(212, 175, 55, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(212, 175, 55, 0.9);
            animation: vConstellationPulse 3s ease-in-out infinite;
        }
        @keyframes vConstellationPulse {
            0%, 100% { box-shadow: 0 0 20px rgba(212, 175, 55, 0.3), 0 0 40px rgba(212, 175, 55, 0.12); }
            50%       { box-shadow: 0 0 28px rgba(212, 175, 55, 0.5), 0 0 55px rgba(212, 175, 55, 0.2); }
        }
        .v-god-domain-constellation-center-label {
            font-family: 'Cinzel', serif;
            font-size: 0.62rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: rgba(212, 175, 55, 0.8);
            text-align: center;
            max-width: 90px;
            line-height: 1.35;
        }

        /* Peer Orbit Nodes */
        .v-god-domain-constellation-peer-node {
            position: absolute;
            transform: translate(-50%, -50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.4rem;
            z-index: 3;
            cursor: pointer;
            background: none;
            border: none;
            padding: 0;
            outline: none;
            width: 90px;
        }
        .v-god-domain-constellation-peer-circle {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: rgba(13, 18, 40, 0.85);
            border: 1.5px solid rgba(212, 175, 55, 0.22);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }
        .v-god-domain-constellation-peer-circle svg {
            width: 24px;
            height: 24px;
        }
        .v-god-domain-constellation-peer-title {
            font-family: 'Cinzel', serif;
            font-size: 0.6rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: rgba(220, 210, 185, 0.75);
            text-align: center;
            line-height: 1.3;
            transition: color 0.2s ease;
            max-width: 90px;
        }
        .v-god-domain-constellation-peer-desc {
            display: none; /* Hidden — shown in detail panel below */
        }
        .v-god-domain-constellation-peer-node:hover .v-god-domain-constellation-peer-circle,
        .v-god-domain-constellation-peer-node.active .v-god-domain-constellation-peer-circle {
            border-color: rgba(212, 175, 55, 0.7);
            background:
                radial-gradient(circle at 35% 30%, rgba(212, 175, 55, 0.15), transparent 60%),
                rgba(13, 18, 40, 0.95);
            box-shadow:
                0 0 18px rgba(212, 175, 55, 0.35),
                0 6px 20px rgba(0, 0, 0, 0.4);
            transform: scale(1.12);
        }
        .v-god-domain-constellation-peer-node:hover .v-god-domain-constellation-peer-title,
        .v-god-domain-constellation-peer-node.active .v-god-domain-constellation-peer-title {
            color: rgba(232, 210, 150, 1);
        }

        /* Stats Bar */
        .v-god-domain-stats-bar {
            display: flex;
            align-items: stretch;
            border-top: 1px solid rgba(212, 175, 55, 0.1);
        }
        .v-god-domain-stat-item {
            flex: 1;
            display: flex;
            align-items: flex-start;
            gap: 0.65rem;
            padding: 1rem 1.1rem;
            border-right: 1px solid rgba(212, 175, 55, 0.07);
        }
        .v-god-domain-stat-item:last-child {
            border-right: 0;
        }
        .v-god-domain-stat-icon-wrap {
            flex-shrink: 0;
            width: 32px;
            height: 32px;
            border-radius: 8px;
            background: rgba(212, 175, 55, 0.08);
            border: 1px solid rgba(212, 175, 55, 0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(212, 175, 55, 0.75);
            margin-top: 2px;
        }
        .v-god-domain-stat-info {
            display: flex;
            flex-direction: column;
            gap: 0.12rem;
        }
        .v-god-domain-stat-value {
            font-family: 'Cinzel', serif;
            font-size: 1.05rem;
            font-weight: 700;
            color: rgba(232, 210, 150, 0.95);
            line-height: 1.2;
        }
        .v-god-domain-stat-label {
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            color: rgba(212, 175, 55, 0.75);
        }
        .v-god-domain-stat-sub {
            font-size: 0.64rem;
            color: rgba(220, 210, 185, 0.45);
            line-height: 1.4;
        }

        /* Atlas stability: one centered column, clipped panels, wrapped controls. */
        .v-atlas-slide,
        .v-atlas-slide * {
            box-sizing: border-box;
        }

        .v-atlas-slide {
            width: 100%;
            max-width: 100%;
            overflow-x: hidden;
        }

        .v-atlas-shell {
            width: min(100% - 32px, 1180px);
            max-width: 1180px;
            margin-inline: auto;
            display: flex;
            flex-direction: column;
            gap: 32px;
            overflow-x: hidden;
        }

        .v-atlas-intro,
        .v-architecture-flow,
        .v-architecture-reading-column,
        .v-god-architecture-library,
        .v-god-domain-overview-panel,
        .v-god-topic-content,
        .v-god-topic-panel,
        .v-god-topic-panel-host {
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0;
            overflow-x: hidden;
        }

        .v-atlas-intro {
            padding-inline: 0;
        }

        .v-architecture-slide {
            padding-inline: 0;
        }

        .v-architecture-slide::before {
            inset-inline: 0;
        }

        .v-god-domain-tabs-container {
            overflow: hidden;
            padding-inline: 0;
        }

        .v-god-domain-tabs {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 12px;
        }

        .v-god-domain-tab {
            flex: 1 1 172px;
            max-width: 240px;
            min-width: 0;
            overflow-wrap: anywhere;
        }

        .v-god-domain-content-block,
        .v-god-domain-constellation-container,
        .v-god-domain-constellation-grid,
        .v-god-domain-constellation-header,
        .v-god-domain-stats-bar,
        .v-god-topic-hero,
        .v-god-library-section,
        .v-god-related-themes,
        .v-god-scroll-rail,
        .v-god-category-filter,
        .v-god-witness-container,
        .v-god-witness-list {
            max-width: 100%;
            min-width: 0;
            overflow-x: hidden;
        }

        .v-god-domain-constellation-container {
            min-height: auto;
        }

        .v-god-domain-constellation-grid {
            grid-template-columns: minmax(140px, 180px) minmax(0, 1fr) minmax(140px, 180px);
        }

        .v-god-domain-constellation-canvas {
            aspect-ratio: 16 / 9;
            min-height: 0;
            overflow: hidden;
        }

        .v-god-domain-constellation-peer-node {
            max-width: 90px;
            overflow-wrap: anywhere;
        }

        .v-god-domain-constellation-peer-title,
        .v-constellation-node .v-node-label {
            max-width: 120px;
            white-space: normal;
            overflow-wrap: anywhere;
        }

        .v-god-constellation-map-container {
            width: 100%;
            max-width: 100%;
            overflow: hidden;
        }

        .v-god-constellation-canvas {
            aspect-ratio: 16 / 9;
            height: auto;
            max-width: 100%;
            overflow: hidden;
        }

        .v-god-domain-topic-grid {
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        }

        .v-god-domain-topic-card,
        .v-god-domain-topic-card-title,
        .v-god-domain-topic-card-description,
        .v-god-major-card,
        .v-god-major-card h5,
        .v-god-card-summary,
        .v-god-card-ref-row,
        .v-god-card-ref-preview,
        .v-god-witness-row-btn,
        .v-god-witness-text,
        .v-god-witness-ref,
        .v-architecture-ref-token {
            min-width: 0;
            max-width: 100%;
            overflow-wrap: anywhere;
        }

        .v-god-scroll-rail {
            overflow: hidden;
        }

        .v-god-major-grid {
            grid-auto-flow: row;
            grid-auto-columns: initial;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            padding-inline: 0;
        }

        .v-god-witness-list {
            padding-inline: 0;
        }

        .v-god-witness-item-header,
        .v-god-witness-row-btn {
            min-width: 0;
        }

        .v-god-witness-row-btn {
            flex-wrap: wrap;
            gap: 8px;
        }

        .v-god-witness-details-drawer {
            max-width: 100%;
            margin-left: 0;
            overflow-wrap: anywhere;
        }

        .v-god-library-section > header,
        .v-god-related-themes > header {
            background:
                linear-gradient(90deg, rgba(212, 175, 55, 0.08), rgba(7, 20, 37, 0.48) 52%, rgba(212, 175, 55, 0.035)) !important;
            border-color: rgba(212, 175, 55, 0.22);
        }

        @media (prefers-reduced-motion: reduce) {
            .v-atlas-slide *,
            .v-atlas-slide *::before,
            .v-atlas-slide *::after {
                animation-duration: 0.001ms !important;
                animation-iteration-count: 1 !important;
                scroll-behavior: auto !important;
                transition-duration: 0.001ms !important;
            }
        }

        @media (max-width: 980px) {
            .v-atlas-shell {
                width: min(100% - 24px, 1180px);
                gap: 24px;
            }

            .v-god-domain-tabs-container {
                justify-content: center;
            }

            .v-god-domain-tab {
                flex-basis: min(100%, 220px);
                max-width: 100%;
            }

            .v-god-domain-constellation-header,
            .v-god-domain-stats-bar {
                flex-direction: column;
            }

            .v-god-domain-stat-item {
                border-right: 0;
                border-bottom: 1px solid rgba(212, 175, 55, 0.07);
            }

            .v-god-domain-stat-item:last-child {
                border-bottom: 0;
            }
        }

        .v-god-topic-panel {
            display: none;
        }

        .v-god-topic-panel.active {
            display: block;
        }

        .v-god-topic-hero {
            position: relative;
            min-height: 300px;
            display: grid;
            grid-template-columns: 190px minmax(0, 1fr) minmax(250px, 32%);
            grid-template-rows: 1fr auto;
            gap: 24px 28px;
            overflow: hidden;
            padding: 30px 38px 0;
            border-radius: 20px;
            background:
                radial-gradient(circle at 50% 10%, rgba(212, 175, 55, 0.12), transparent 55%),
                radial-gradient(circle at 88% -8%, rgba(232, 217, 181, 0.16), transparent 34%),
                linear-gradient(115deg, rgba(7, 20, 37, 0.95), rgba(10, 28, 49, 0.86)),
                radial-gradient(circle at 72% 18%, rgba(232, 217, 181, 0.05), transparent 48%);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            box-shadow:
                0 25px 80px rgba(0, 0, 0, 0.45),
                inset 0 0 0 1px rgba(212, 175, 55, 0.14),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
        }

        .v-god-topic-hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                linear-gradient(108deg, transparent 54%, rgba(255, 229, 174, 0.085) 56%, transparent 61%),
                linear-gradient(118deg, transparent 60%, rgba(255, 229, 174, 0.06) 62%, transparent 68%),
                radial-gradient(circle at 88% -12%, rgba(255, 232, 170, 0.2), transparent 34%),
                repeating-linear-gradient(90deg, rgba(232, 217, 181, 0.028) 0 1px, transparent 1px 92px),
                repeating-linear-gradient(0deg, rgba(232, 217, 181, 0.018) 0 1px, transparent 1px 74px);
            pointer-events: none;
        }

        .v-god-topic-hero::after {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                radial-gradient(circle, rgba(232, 217, 181, 0.14) 0 1px, transparent 1.7px),
                radial-gradient(circle, rgba(212, 175, 55, 0.09) 0 1px, transparent 1.5px),
                radial-gradient(circle at 18% 42%, rgba(212, 175, 55, 0.12), transparent 18%),
                conic-gradient(from 30deg at 20% 48%, transparent 0 20deg, rgba(212, 175, 55, 0.045) 20deg 22deg, transparent 22deg 80deg);
            background-size: 190px 140px, 260px 180px, auto, auto;
            background-position: 12% 18%, 78% 22%, center, center;
            opacity: 0.42;
            pointer-events: none;
        }

        .v-god-topic-orb,
        .v-god-topic-hero-copy,
        .v-god-topic-hero blockquote,
        .v-god-topic-stats {
            position: relative;
            z-index: 1;
        }

        .v-god-topic-orb {
            position: relative;
            align-self: center;
            justify-self: center;
            width: 164px;
            height: 164px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background:
                repeating-conic-gradient(from -6deg, rgba(212, 175, 55, 0.26) 0deg 1deg, transparent 1deg 7deg),
                radial-gradient(circle at 50% 38%, rgba(212, 175, 55, 0.24), transparent 42%),
                rgba(6, 17, 30, 0.42);
            box-shadow:
                inset 0 0 0 1px rgba(212, 175, 55, 0.42),
                inset 0 0 0 12px rgba(6, 17, 30, 0.82),
                inset 0 0 0 14px rgba(212, 175, 55, 0.22),
                inset 0 0 0 24px rgba(212, 175, 55, 0.025),
                0 0 68px rgba(212, 175, 55, 0.14);
        }

        .v-god-topic-orb::before,
        .v-god-topic-orb::after {
            content: '';
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
        }

        .v-god-topic-orb::before {
            inset: -14px;
            background:
                repeating-conic-gradient(from 4deg, transparent 0deg 5deg, rgba(212, 175, 55, 0.28) 5deg 5.8deg, transparent 5.8deg 12deg);
            mask: radial-gradient(circle, transparent 0 73px, #000 74px 76px, transparent 77px);
            -webkit-mask: radial-gradient(circle, transparent 0 73px, #000 74px 76px, transparent 77px);
            opacity: 0.68;
        }

        .v-god-topic-orb::after {
            inset: 22px;
            border: 1px solid rgba(212, 175, 55, 0.18);
            box-shadow: inset 0 0 34px rgba(212, 175, 55, 0.08);
        }

        .v-god-topic-orb span {
            color: #e8d9b5;
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 4.4rem;
            font-weight: 600;
            line-height: 1;
            letter-spacing: 0.03em;
            text-shadow: 0 2px 20px rgba(212, 175, 55, 0.15);
        }

        .v-god-topic-hero-copy {
            align-self: center;
        }

        .v-god-topic-hero-copy h3 {
            margin: 0;
            color: #fff7df;
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: clamp(3.7rem, 6vw, 4.7rem);
            font-weight: 600;
            line-height: 0.95;
            letter-spacing: 0.03em;
            text-transform: uppercase;
            text-shadow: 0 2px 20px rgba(212, 175, 55, 0.15);
        }

        .v-god-topic-hero-copy h4 {
            margin: 8px 0 12px;
            color: rgba(232, 222, 200, 0.85);
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: clamp(1.85rem, 3vw, 2.35rem);
            font-weight: 500;
            letter-spacing: 0.04em;
        }

        .v-god-topic-hero-copy p {
            max-width: 560px;
            margin: 0;
            color: rgba(232, 217, 181, 0.86);
            font-size: 1.02rem;
            line-height: 1.65;
        }

        .v-god-topic-hero blockquote {
            align-self: center;
            margin: 0;
            color: #e8d9b5;
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-style: italic;
            font-size: 1.22rem;
            line-height: 1.45;
        }

        .v-god-topic-hero blockquote::before {
            content: '“';
            display: block;
            color: rgba(212, 175, 55, 0.82);
            font-size: 2.8rem;
            line-height: 0.6;
        }

        .v-god-topic-hero blockquote p {
            margin: 0;
        }

        .v-god-topic-hero cite {
            display: block;
            margin-top: 12px;
            color: #d8b26a;
            font-family: 'Cinzel', serif;
            font-size: 0.74rem;
            font-style: normal;
            font-weight: 800;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            text-align: right;
        }

        .v-god-topic-stats {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            margin: 20px -38px 0;
            padding: 17px 28px;
            background: rgba(4, 9, 24, 0.45);
            border-top: 1px solid rgba(212, 175, 55, 0.12);
            border-bottom: 1px solid rgba(212, 175, 55, 0.12);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
            align-items: center;
        }

        .v-god-topic-stats span {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            min-width: 0;
            border-left: 1px solid rgba(232, 217, 181, 0.12);
        }

        .v-god-topic-stats span:first-child {
            border-left: 0;
        }

        .v-god-topic-stats strong {
            color: #d8b26a;
            font-family: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
            font-size: 1.35rem;
            font-weight: 700;
            line-height: 1;
        }

        .v-god-topic-stats em {
            color: rgba(232, 217, 181, 0.78);
            font-size: 0.82rem;
            font-style: normal;
            line-height: 1.25;
            text-transform: capitalize;
        }

        .v-stat-lens-col {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 12px !important;
        }

        .v-stat-mood {
            color: #d8b26a;
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 1.65rem !important;
            font-style: italic;
            font-weight: 500 !important;
            text-transform: lowercase;
            line-height: 1;
        }

        .v-stat-lens-details {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            text-align: left;
            gap: 2px;
        }

        .v-stat-lens-row {
            display: flex;
            align-items: baseline;
            gap: 4px;
        }

        .v-stat-lens-row strong {
            font-size: 0.95rem !important;
            font-family: 'Inter', system-ui, sans-serif !important;
            color: #fff7df !important;
            font-weight: 700 !important;
        }

        .v-stat-lens-row em {
            font-size: 0.8rem !important;
            color: rgba(232, 217, 181, 0.7) !important;
            text-transform: none !important;
        }

        .v-stat-lens-details span {
            font-size: 0.7rem !important;
            color: rgba(216, 180, 106, 0.65) !important;
            text-transform: uppercase !important;
            letter-spacing: 0.05em;
            border-left: none !important;
            padding-left: 0 !important;
            display: inline !important;
        }

        .v-god-journey-ribbon {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0;
            margin: 18px 4px 22px;
            padding: 16px 18px;
            border-radius: 16px;
            background:
                linear-gradient(90deg, rgba(212, 175, 55, 0.045), transparent 42%),
                rgba(255, 255, 255, 0.012);
            box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.06);
        }

        .v-god-journey-ribbon::before {
            content: '';
            position: absolute;
            left: 28px;
            right: 28px;
            top: 50%;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.34), transparent);
            pointer-events: none;
        }

        .v-god-journey-ribbon > span {
            position: relative;
            z-index: 1;
            margin-right: 14px;
            color: rgba(212, 175, 55, 0.82);
            font-family: 'Cinzel', serif;
            font-size: 0.66rem;
            font-weight: 800;
            letter-spacing: 0.14em;
            text-transform: uppercase;
        }

        .v-god-journey-ribbon button,
        .v-god-related-themes span {
            position: relative;
            z-index: 1;
            padding: 8px 14px;
            border: 0;
            border-radius: 999px;
            background: rgba(7, 20, 37, 0.72);
            color: rgba(232, 222, 200, 0.78);
            box-shadow:
                inset 0 0 0 1px rgba(212, 175, 55, 0.09),
                0 10px 28px rgba(0, 0, 0, 0.14);
            font-size: 0.82rem;
            cursor: pointer;
        }

        .v-god-journey-ribbon button + button {
            margin-left: 8px;
        }

        .v-god-journey-ribbon button.active {
            color: #e8dec8;
            background:
                radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.22), transparent 62%),
                rgba(7, 20, 37, 0.92);
            box-shadow:
                inset 0 0 0 1px rgba(212, 175, 55, 0.34),
                0 0 0 5px rgba(212, 175, 55, 0.045),
                0 16px 38px rgba(0, 0, 0, 0.28);
        }

        .v-god-library-section {
            margin-top: 22px;
        }

        /* Per-category sub-sections inside Major Revelations */
        .v-god-category-section {
            margin-top: 18px;
        }

        .v-god-category-section:first-of-type {
            margin-top: 6px;
        }

        .v-god-category-header {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 4px 0 8px;
            border-bottom: 1px solid rgba(212, 175, 55, 0.10);
            margin-bottom: 10px;
        }

        .v-god-category-title {
            color: #d8b26a;
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 0.92rem;
            font-weight: 700;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            flex: 0 0 auto;
        }

        .v-god-category-meta {
            color: rgba(232, 222, 200, 0.55);
            font-size: 0.7rem;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            flex: 1 1 auto;
        }

        .v-god-category-rail-actions {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        /* Filter strip above the Major Revelations grid (mirrors Theological Constellation) */
        .v-god-category-filter {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px 10px;
            padding: 12px 16px;
            margin: 8px 0 14px;
            border-radius: 14px;
            border: 1px solid rgba(212, 175, 55, 0.18);
            background:
                radial-gradient(circle at 20% 0%, rgba(212, 175, 55, 0.08), transparent 38%),
                linear-gradient(180deg, rgba(7, 20, 37, 0.82), rgba(3, 11, 22, 0.92));
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }

        .v-god-category-filter-label {
            color: #d8b26a;
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            margin-right: 6px;
            white-space: nowrap;
        }

        .v-god-category-filter button {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            border-radius: 999px;
            border: 1px solid rgba(212, 175, 55, 0.22);
            background: rgba(8, 18, 36, 0.55);
            color: rgba(232, 222, 200, 0.78);
            font-family: 'Inter', system-ui, sans-serif;
            font-size: 0.74rem;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.22s ease-out;
        }

        .v-god-category-filter button em {
            font-style: normal;
            font-weight: 700;
            color: rgba(216, 178, 106, 0.65);
            font-size: 0.7rem;
            margin-left: 2px;
        }

        .v-god-category-filter button:hover {
            border-color: rgba(216, 178, 106, 0.42);
            color: #f4e7c1;
        }

        .v-god-category-filter button.active {
            background: rgba(216, 178, 106, 0.15);
            border-color: #d8b26a;
            color: #fff7df;
            box-shadow: inset 0 0 0 1px rgba(216, 178, 106, 0.35);
        }

        .v-god-category-filter button.active em {
            color: #fff7df;
        }

        .v-atlas-search-row {
            display: flex;
            justify-content: center;
            width: 100%;
            max-width: 640px;
            margin: 14px auto 6px;
            padding: 0 12px;
        }

        .v-atlas-search-wrap {
            display: flex;
            align-items: center;
            flex: 1 1 auto;
            min-width: 0;
            padding: 4px 4px 4px 14px;
            border: 1px solid rgba(212, 175, 55, 0.35);
            border-radius: 24px;
            background: rgba(8, 16, 38, 0.55);
            transition: border-color 0.18s ease, box-shadow 0.18s ease;
        }

        .v-atlas-search-wrap:focus-within {
            border-color: rgba(212, 175, 55, 0.7);
            box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12);
        }

        .v-atlas-search-icon {
            flex: 0 0 auto;
            margin-right: 8px;
            color: rgba(244, 232, 206, 0.7);
            font-size: 15px;
            line-height: 1;
        }

        .v-atlas-search-input {
            flex: 1 1 auto;
            min-width: 0;
            padding: 8px 4px;
            border: 0;
            outline: 0;
            background: transparent;
            color: rgba(244, 232, 206, 0.95);
            font-family: 'Cormorant Garamond', 'EB Garamond', serif;
            font-size: 15px;
            font-style: italic;
            letter-spacing: 0;
        }

        .v-atlas-search-input::placeholder {
            color: rgba(244, 232, 206, 0.45);
        }

        .v-atlas-search-witness-toggle {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            flex: 0 0 auto;
            min-height: 30px;
            margin-left: 8px;
            padding: 6px 10px;
            border: 1px solid rgba(212, 175, 55, 0.32);
            border-radius: 18px;
            background: rgba(244, 232, 206, 0.06);
            color: rgba(244, 232, 206, 0.82);
            font-family: 'Cinzel', serif;
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 0.09em;
            text-transform: uppercase;
            cursor: pointer;
        }

        .v-atlas-search-witness-toggle.is-active {
            border-color: rgba(212, 175, 55, 0.62);
            background: rgba(212, 175, 55, 0.16);
            color: #fff4d7;
        }

        .v-atlas-search-witness-toggle-dot {
            width: 7px;
            height: 7px;
            border-radius: 999px;
            background: currentColor;
            opacity: 0.72;
        }

        .v-atlas-search-go {
            flex: 0 0 auto;
            margin-left: 4px;
            padding: 7px 16px;
            border: 1px solid rgba(212, 175, 55, 0.5);
            border-radius: 20px;
            background: rgba(212, 175, 55, 0.18);
            color: rgba(244, 232, 206, 0.95);
            font-family: 'Cinzel', serif;
            font-size: 10.5px;
            font-weight: 600;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            cursor: pointer;
            transition: background 0.18s ease, color 0.18s ease;
        }

        .v-atlas-search-go:hover {
            background: rgba(212, 175, 55, 0.32);
            color: rgba(255, 240, 210, 1);
        }

        .v-atlas-search-popup {
            position: fixed;
            inset: 0;
            z-index: 10005;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 24px;
        }

        .v-atlas-search-popup.is-open {
            display: flex;
        }

        .v-atlas-search-scrim {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.65);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
        }

        .v-atlas-search-panel {
            position: relative;
            display: flex;
            flex-direction: column;
            width: min(820px, 100%);
            max-height: 86vh;
            overflow: hidden;
            border: 1px solid rgba(212, 175, 55, 0.35);
            border-radius: 14px;
            background: linear-gradient(180deg, #0d1e44 0%, #0a1735 100%);
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
        }

        .v-atlas-search-header {
            position: relative;
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 18px 22px;
            border-bottom: 1px solid rgba(212, 175, 55, 0.28);
            background: linear-gradient(180deg, rgba(10, 26, 60, 0.65), rgba(6, 18, 44, 0.55)), #0a1735;
        }

        .v-atlas-search-header-text {
            flex: 1 1 auto;
            margin: 0;
            color: #daa520;
            font-family: 'Cinzel', serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.18em;
            text-transform: uppercase;
        }

        .v-atlas-search-header-count {
            color: rgba(244, 232, 206, 0.65);
            font-family: 'Cormorant Garamond', serif;
            font-size: 14px;
            font-style: italic;
        }

        .v-atlas-search-close {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            border: 1px solid rgba(212, 175, 55, 0.4);
            border-radius: 50%;
            background: transparent;
            color: rgba(244, 232, 206, 0.85);
            font-size: 18px;
            line-height: 1;
            cursor: pointer;
        }

        .v-atlas-search-body {
            flex: 1 1 auto;
            overflow-y: auto;
            padding: 18px 22px 24px;
        }

        .v-atlas-search-empty {
            padding: 40px 20px;
            color: rgba(244, 232, 206, 0.55);
            font-family: 'Cormorant Garamond', serif;
            font-size: 16px;
            font-style: italic;
            text-align: center;
        }

        .v-atlas-search-topic {
            margin: 18px 0 6px;
            padding: 8px 12px;
            border-left: 3px solid rgba(212, 175, 55, 0.6);
            background: rgba(212, 175, 55, 0.06);
            color: #daa520;
            font-family: 'Cinzel', serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.16em;
            text-transform: uppercase;
        }

        .v-atlas-search-topic:first-child {
            margin-top: 0;
        }

        .v-atlas-search-category {
            margin: 12px 0 4px 14px;
            color: rgba(232, 220, 195, 0.86);
            font-family: 'Cormorant Garamond', serif;
            font-size: 16px;
            font-style: italic;
        }

        .v-atlas-search-item {
            display: flex;
            align-items: baseline;
            gap: 10px;
            width: calc(100% - 30px);
            margin: 4px 0 4px 30px;
            padding: 6px 10px;
            border: 1px solid transparent;
            border-radius: 6px;
            background: transparent;
            color: rgba(244, 232, 206, 0.84);
            font-family: var(--font-reading, 'Source Serif 4', Georgia, serif);
            font-size: 14.5px;
            text-align: left;
            cursor: pointer;
        }

        .v-atlas-search-item:hover {
            border-color: rgba(212, 175, 55, 0.25);
            background: rgba(212, 175, 55, 0.08);
        }

        .v-atlas-search-item-ref {
            flex: 0 0 auto;
            padding: 3px 8px;
            border: 1px solid rgba(212, 175, 55, 0.3);
            border-radius: 3px;
            background: rgba(212, 175, 55, 0.1);
            color: #daa520;
            font-family: 'Cinzel', serif;
            font-size: 10.5px;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .v-atlas-search-item-title {
            flex: 1 1 auto;
            color: rgba(244, 232, 206, 0.92);
        }

        /* Slot wrapper around every card so the filter has a guaranteed hook.
           display: contents lets the inner <article> participate in the grid layout
           exactly as if it were a direct child, while we keep the hook attribute on
           a parent we can hide/show as a unit. */
        .v-god-card-slot {
            display: contents;
        }

        /* Hide cards whose category doesn't match the active filter chip.
           Covers the slot wrapper, the article, and any other tagged child. */
        .v-god-major-grid .v-god-card-hidden,
        .v-god-major-grid [hidden],
        .v-god-witness-list .v-god-card-hidden,
        .v-god-witness-list [hidden],
        .v-god-witness-timeline .v-god-card-hidden,
        .v-god-card-slot.v-god-card-hidden,
        .v-god-card-slot.v-god-card-hidden > * {
            display: none !important;
        }

        /* Book divider chip — small gold marker between book groups in the
           Genesis → Revelation witness timeline */
        .v-god-witness-book-divider {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            padding: 3px 10px;
            border-radius: 999px;
            border: 1px dashed rgba(212, 175, 55, 0.35);
            margin: 0 4px;
            background: rgba(212, 175, 55, 0.04);
            color: #d8b26a;
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
        }
        .v-god-witness-book-divider em {
            font-style: normal;
        }

        /* Role label inside each witness row (primary / attestation / fulfillment …) */
        .v-god-witness-role {
            font-style: normal;
            font-size: 0.62rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: rgba(216, 178, 106, 0.72);
        }



        .v-god-library-section > header,
        .v-god-related-themes > header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 16px;
            padding: 10px 16px;
            border: 1px solid rgba(212, 175, 55, 0.2);
            border-radius: 6px;
            background: linear-gradient(90deg, rgba(29, 78, 216, 0.22) 0%, rgba(30, 58, 138, 0.1) 100%) !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
        }

        .v-god-library-section h4,
        .v-god-related-themes h4 {
            margin: 0;
            color: #fff7df;
            font-family: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
            font-size: 0.95rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .v-god-section-actions {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .v-god-section-actions span {
            color: rgba(232, 222, 200, 0.58);
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .v-god-library-section > header button,
        .v-god-scroll-btn {
            padding: 0;
            border: 0;
            background: transparent;
            color: #d8b26a;
            font-size: 0.84rem;
            cursor: pointer;
        }

        .v-god-scroll-btn {
            width: 28px;
            height: 28px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background:
                radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.13), transparent 70%),
                rgba(7, 20, 37, 0.72);
            box-shadow:
                inset 0 0 0 1px rgba(212, 175, 55, 0.2),
                0 10px 24px rgba(0, 0, 0, 0.24);
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 1.35rem;
            line-height: 1;
            transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
        }

        .v-god-scroll-btn:hover {
            transform: translateY(-1px);
            box-shadow:
                inset 0 0 0 1px rgba(212, 175, 55, 0.34),
                0 14px 30px rgba(0, 0, 0, 0.28),
                0 0 18px rgba(212, 175, 55, 0.08);
        }

        .v-god-scroll-rail {
            overflow-x: auto;
            overflow-y: visible;
            scroll-behavior: smooth;
            scroll-snap-type: x proximity;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
        }

        .v-god-scroll-rail::-webkit-scrollbar {
            display: none;
        }

        .v-god-major-grid {
            display: grid;
            grid-auto-flow: column;
            grid-auto-columns: calc((100% - 40px) / 3);
            grid-template-columns: none;
            gap: 20px;
            padding: 2px 4px 8px;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }

        .v-god-major-card {
            position: relative;
            overflow: hidden;
            min-height: 205px;
            padding: 24px 26px 22px;
            border-radius: 14px;
            border: 1px solid rgba(212, 175, 55, 0.12);
            background:
                radial-gradient(circle at 92% 18%, rgba(212, 175, 55, 0.055), transparent 28%),
                rgba(8, 18, 30, 0.85);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
            cursor: pointer;
            scroll-snap-align: start;
            transition: transform 0.2s ease-out, border-color 0.2s ease-out, box-shadow 0.2s ease-out;
        }

        .v-god-major-card.mood-cosmic {
            border-left: 3px solid rgba(99, 102, 241, 0.46);
        }

        .v-god-major-card.mood-doctrinal {
            border-left: 3px solid rgba(212, 175, 55, 0.5);
        }

        .v-god-major-card.mood-devotional {
            border-left: 3px solid rgba(245, 158, 11, 0.5);
        }

        .v-god-major-card.mood-prophetic {
            border-left: 3px solid rgba(168, 85, 247, 0.44);
        }

        .v-god-major-card.mood-contemplative {
            border-left: 3px solid rgba(148, 163, 184, 0.48);
        }

        .v-god-major-card.mood-practical {
            border-left: 3px solid rgba(194, 120, 76, 0.5);
        }

        .v-god-major-card.mood-redemptive {
            border-left: 3px solid rgba(190, 72, 72, 0.5);
        }

        .v-god-major-card.mood-triumphant {
            border-left: 3px solid rgba(250, 204, 21, 0.5);
        }

        .v-god-card-ref-row {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
            margin-top: 12px;
        }

        .v-god-card-ref-preview {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            min-width: 0;
        }

        .v-god-card-ref-preview em {
            color: rgba(232, 217, 181, 0.48);
            font-size: 0.56rem;
            font-style: normal;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .v-god-major-card::before,
        .v-god-major-card::after {
            content: '';
            position: absolute;
            width: 34px;
            height: 34px;
            pointer-events: none;
            opacity: 0.34;
        }

        .v-god-major-card::before {
            top: 12px;
            right: 12px;
            border-top: 1px solid rgba(212, 175, 55, 0.22);
            border-right: 1px solid rgba(212, 175, 55, 0.22);
            border-radius: 0 10px 0 0;
        }

        .v-god-major-card::after {
            bottom: 12px;
            left: 12px;
            border-bottom: 1px solid rgba(212, 175, 55, 0.16);
            border-left: 1px solid rgba(212, 175, 55, 0.16);
            border-radius: 0 0 0 10px;
        }

        .v-god-major-card:hover,
        .v-god-major-card:focus-visible {
            transform: translateY(-4px);
            border-color: rgba(212, 175, 55, 0.24);
            box-shadow:
                0 30px 80px rgba(0, 0, 0, 0.45),
                0 0 34px rgba(212, 175, 55, 0.075);
            outline: none;
        }

        .v-god-major-eyebrow {
            color: #d8b26a;
            font-family: 'Cinzel', serif;
            font-size: 0.68rem;
            font-weight: 800;
            letter-spacing: 0.16em;
            text-transform: uppercase;
        }

        .v-god-major-card h5 {
            margin: 16px 0 16px;
            color: #fff7df;
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 1.32rem;
            font-weight: 500;
            line-height: 1.42;
            letter-spacing: 0;
        }

        .v-god-major-rule {
            width: 28px;
            height: 1px;
            margin-bottom: 14px;
            background: #d4af37;
            opacity: 0.8;
        }

        .v-god-major-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
            margin-top: 12px;
        }

        .v-god-witness-timeline {
            position: relative;
            display: grid;
            grid-auto-flow: column;
            grid-auto-columns: calc((100% - 80px) / 5);
            grid-template-columns: none;
            gap: 20px;
            padding: 24px 4px 8px;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }

        .v-god-witness-timeline::before {
            content: '';
            position: absolute;
            left: 16px;
            right: 16px;
            top: 13px;
            height: 1px;
            background: rgba(212, 175, 55, 0.45);
            box-shadow: 0 0 12px rgba(212, 175, 55, 0.15);
        }

        .v-god-witness-node {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
            min-width: 0;
            padding: 0;
            border: 0;
            background: transparent;
            color: rgba(232, 217, 181, 0.82);
            text-align: left;
            cursor: pointer;
            scroll-snap-align: start;
            transition: transform 0.2s ease-out;
        }

        .v-god-witness-node:hover {
            transform: translateY(-3px);
        }

        .v-god-witness-dot {
            position: absolute;
            top: -18px;
            left: 0;
            width: 13px;
            height: 13px;
            border-radius: 50%;
            background: #06111e;
            box-shadow:
                inset 0 0 0 2px #d4af37,
                0 0 10px rgba(212, 175, 55, 0.35);
            transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
        }

        .v-god-witness-node:hover .v-god-witness-dot {
            transform: scale(1.18);
            box-shadow:
                inset 0 0 0 2px #e8dec8,
                0 0 0 7px rgba(212, 175, 55, 0.12),
                0 0 26px rgba(212, 175, 55, 0.42);
        }

        .v-god-witness-node strong {
            color: #d8b26a;
            font-family: 'Cinzel', serif;
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.14em;
            text-transform: uppercase;
        }

        .v-god-witness-node span:not(.v-god-witness-dot) {
            color: rgba(232, 217, 181, 0.82);
            font-size: 0.92rem;
            line-height: 1.5;
        }

        .v-god-witness-node em {
            display: inline-flex;
            padding: 4px 8px;
            border-radius: 999px;
            color: #d8b26a;
            box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.2);
            font-size: 0.66rem;
            font-style: normal;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .v-god-related-themes {
            margin-top: 28px;
            padding: 18px 20px;
            border-radius: 14px;
            background: rgba(7, 20, 37, 0.56);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            box-shadow:
                0 25px 80px rgba(0, 0, 0, 0.28),
                inset 0 0 0 1px rgba(212, 175, 55, 0.06);
        }

        .v-god-related-themes > div {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .v-god-topic-templates {
            display: none;
        }

        @keyframes vGodWitnessPulse {
            0%, 74%, 100% {
                box-shadow:
                    inset 0 0 0 2px #d4af37,
                    0 0 0 5px rgba(212, 175, 55, 0.1),
                    0 0 18px rgba(212, 175, 55, 0.36);
            }
            84% {
                box-shadow:
                    inset 0 0 0 2px #d4af37,
                    0 0 0 9px rgba(212, 175, 55, 0.04),
                    0 0 28px rgba(212, 175, 55, 0.42);
            }
        }

        .v-architecture-details-template {
            display: none;
        }

        .v-architecture-popup {
            position: fixed;
            inset: 0;
            z-index: 10030;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 28px;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.22s ease, visibility 0.22s ease;
        }

        .v-architecture-popup.active {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        .v-architecture-popup-scrim {
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 50% 20%, rgba(28, 70, 119, 0.16), transparent 38%),
                rgba(1, 7, 16, 0.78);
            backdrop-filter: blur(8px) saturate(1.08);
            -webkit-backdrop-filter: blur(8px) saturate(1.08);
        }

        .v-architecture-popup-panel {
            position: relative;
            width: min(820px, calc(100vw - 40px));
            max-height: min(760px, calc(100vh - 44px));
            overflow: auto;
            padding: 30px 32px 32px;
            border: 1px solid rgba(218, 177, 80, 0.24);
            border-radius: 22px;
            background:
                radial-gradient(circle at top center, rgba(255, 210, 120, 0.09), transparent 42%),
                radial-gradient(circle at 18% 8%, rgba(255, 247, 214, 0.055), transparent 30%),
                linear-gradient(180deg, #071425, #06101d);
            box-shadow:
                0 34px 110px rgba(0, 0, 0, 0.64),
                0 0 80px rgba(196, 151, 69, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.07);
        }

        .v-architecture-popup-close {
            position: absolute;
            top: 14px;
            right: 14px;
            width: 34px;
            height: 34px;
            border: 0;
            border-radius: 50%;
            background: rgba(255, 247, 214, 0.055);
            color: #f4e7c1;
            font-size: 22px;
            line-height: 1;
            cursor: pointer;
            box-shadow: inset 0 0 0 1px rgba(218, 177, 80, 0.14);
        }

        .v-architecture-popup-body {
            padding-right: 22px;
        }

        .v-architecture-details-content h5 {
            position: relative;
            margin: 0;
            max-width: 720px;
            color: #fff7df;
            background: linear-gradient(180deg, #fff7df, #d8b26a);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            font-family: 'Cormorant Garamond', var(--font-body);
            font-size: clamp(1.7rem, 2.5vw, 2.1rem);
            font-weight: 600;
            line-height: 1.3;
            letter-spacing: 0;
            text-shadow: 0 14px 42px rgba(216, 180, 90, 0.13);
        }

        .v-architecture-details-content h5::before {
            content: '';
            position: absolute;
            inset: -56px 12% auto;
            height: 150px;
            background: radial-gradient(circle, rgba(212, 175, 55, 0.15), transparent 70%);
            pointer-events: none;
            z-index: -1;
        }

        .v-architecture-era-marker {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 2px 0 16px;
            color: rgba(216, 180, 106, 0.78);
            font-family: 'Cinzel', serif;
            font-size: 0.66rem;
            font-weight: 800;
            letter-spacing: 0.18em;
            text-transform: uppercase;
        }

        .v-architecture-era-marker::after {
            content: '';
            width: min(220px, 36%);
            height: 1px;
            background: linear-gradient(90deg, rgba(216, 180, 106, 0.56), transparent);
        }

        .v-architecture-details-content p {
            margin: 10px 0 0;
            color: rgba(235, 241, 249, 0.76);
            font-family: var(--font-body);
            font-size: 13px;
            line-height: 1.65;
        }

        .v-architecture-theological-insight {
            margin-top: 20px;
            padding: 16px 18px 17px;
            border: 0;
            border-radius: 16px;
            background:
                radial-gradient(circle at 0% 0%, rgba(216, 180, 90, 0.08), transparent 36%),
                rgba(255, 255, 255, 0.032);
            box-shadow:
                0 12px 34px rgba(0, 0, 0, 0.24),
                inset 0 1px 0 rgba(255, 255, 255, 0.045);
        }

        .v-architecture-theological-insight > span {
            display: block;
            color: rgba(216, 180, 106, 0.82);
            font-family: 'Cinzel', serif;
            font-size: 0.64rem;
            font-weight: 800;
            letter-spacing: 0.14em;
            text-transform: uppercase;
        }

        .v-architecture-theological-insight p {
            margin-top: 8px;
            color: rgba(246, 241, 229, 0.82);
            font-size: 1.02rem;
            line-height: 1.58;
        }

        .v-architecture-study-capsules {
            display: flex;
            flex-wrap: wrap;
            gap: 9px;
            margin-top: 18px;
        }

        .v-architecture-study-capsule {
            display: inline-flex;
            align-items: center;
            min-height: 25px;
            padding: 5px 10px;
            border: 0;
            border-radius: 999px;
            color: rgba(246, 219, 150, 0.9);
            background: rgba(216, 180, 90, 0.09);
            box-shadow: inset 0 0 0 1px rgba(216, 180, 90, 0.12);
            font-size: 0.68rem;
            font-weight: 800;
            letter-spacing: 0.07em;
            text-transform: uppercase;
        }
        .redemptive-theme-tag {
            background: rgba(190, 72, 72, 0.12) !important;
            border-color: rgba(190, 72, 72, 0.3) !important;
            box-shadow: inset 0 0 0 1px rgba(190, 72, 72, 0.3) !important;
            color: #f87171 !important;
        }
        .redemptive-theme-tag:hover {
            background: rgba(190, 72, 72, 0.22) !important;
            border-color: rgba(190, 72, 72, 0.5) !important;
            color: #fca5a5 !important;
        }
        .cosmic-theme-tag {
            background: rgba(99, 102, 241, 0.12) !important;
            border-color: rgba(99, 102, 241, 0.3) !important;
            box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.3) !important;
            color: #818cf8 !important;
        }
        .cosmic-theme-tag:hover {
            background: rgba(99, 102, 241, 0.22) !important;
            border-color: rgba(99, 102, 241, 0.5) !important;
            color: #a5b4fc !important;
        }
        .doctrinal-theme-tag {
            background: rgba(91, 126, 216, 0.12) !important;
            border-color: rgba(91, 126, 216, 0.3) !important;
            box-shadow: inset 0 0 0 1px rgba(91, 126, 216, 0.3) !important;
            color: #7ba2ff !important;
        }
        .doctrinal-theme-tag:hover {
            background: rgba(91, 126, 216, 0.22) !important;
            border-color: rgba(91, 126, 216, 0.5) !important;
            color: #a5c2ff !important;
        }

        .v-architecture-popup .v-architecture-primary-witness {
            margin-top: 18px;
            opacity: 0.78;
        }

        .v-architecture-popup .v-architecture-witness-list {
            gap: 22px;
            margin-top: 24px;
            padding-top: 24px;
            border-top: 1px solid rgba(218, 177, 80, 0.1);
        }

        .v-architecture-popup .v-architecture-witness-role {
            grid-template-columns: 118px minmax(0, 1fr);
            gap: 20px;
        }

        .v-architecture-popup .v-architecture-witness-role > span:first-child {
            color: rgba(216, 180, 106, 0.82);
            font-size: 0.68rem;
            letter-spacing: 0.12em;
            padding-top: 10px;
        }

        .v-architecture-popup .v-architecture-token-group {
            display: flex !important;
            flex-direction: column;
            align-items: stretch;
            gap: 16px;
            margin-left: 0;
            position: relative;
            padding-left: 26px;
        }

        .v-architecture-popup .v-architecture-token-group::before {
            content: '';
            position: absolute;
            top: 8px;
            bottom: 8px;
            left: 5px;
            width: 1px;
            background: linear-gradient(180deg, transparent, rgba(216, 180, 90, 0.52), transparent);
            box-shadow: 0 0 18px rgba(216, 180, 90, 0.16);
        }

        .v-architecture-popup-ref-card {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
            padding: 16px 18px 18px;
            border: 0;
            border-radius: 16px;
            background:
                radial-gradient(circle at 0% 0%, rgba(196, 151, 69, 0.08), transparent 34%),
                rgba(255, 255, 255, 0.032);
            box-shadow:
                0 12px 40px rgba(0, 0, 0, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.045),
                inset 0 0 0 1px rgba(196, 151, 69, 0.08);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }

        .v-architecture-popup-ref-card::before {
            content: '';
            position: absolute;
            top: 22px;
            left: -26px;
            width: 11px;
            height: 11px;
            border-radius: 50%;
            background: #d8b46a;
            box-shadow:
                0 0 0 5px rgba(216, 180, 106, 0.1),
                0 0 18px rgba(216, 180, 106, 0.28);
        }

        .v-architecture-popup-ref-card .v-architecture-ref-token {
            border: 0;
            background: rgba(216, 180, 90, 0.08);
            box-shadow: inset 0 0 0 1px rgba(216, 180, 90, 0.16);
            color: #d8b46a;
            font-size: 0.69rem;
            letter-spacing: 0.08em;
        }

        .v-architecture-popup-ref-text {
            color: rgba(246, 241, 229, 0.82);
            font-family: var(--font-body);
            font-size: 1.05rem;
            line-height: 1.66;
            letter-spacing: 0;
        }

        @media (max-width: 1240px) {
            .v-architecture-item-grid.major-card-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }

            .v-god-architecture-library {
                grid-template-columns: minmax(230px, 26%) minmax(0, 1fr);
                gap: 16px;
            }

            .v-god-topic-hero {
                grid-template-columns: 140px minmax(0, 1fr);
                min-height: auto;
            }

            .v-god-topic-hero blockquote {
                grid-column: 1 / -1;
            }

            .v-god-topic-orb {
                width: 118px;
                height: 118px;
            }

            .v-god-topic-orb span {
                font-size: 3.6rem;
            }
        }

        @media (max-width: 980px) {
            .v-god-architecture-library {
                display: flex;
                flex-direction: column;
                width: min(100%, calc(100% - 4px));
            }

            .v-god-topic-sidebar {
                position: relative;
                top: auto;
                max-height: none;
            }

            .v-god-topic-hero {
                grid-template-columns: 1fr;
                padding: 24px 20px 0;
            }

            .v-god-topic-orb {
                justify-self: start;
            }

            .v-god-topic-stats {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                margin-inline: -20px;
                padding-inline: 16px;
            }

            .v-god-topic-stats span {
                justify-content: flex-start;
                border-left: 0;
            }

            .v-god-major-grid {
                grid-auto-columns: minmax(260px, 86%);
                grid-template-columns: none;
            }

            .v-god-witness-timeline {
                grid-auto-columns: minmax(220px, 84%);
                grid-template-columns: none;
                gap: 22px;
                padding-left: 24px;
                padding-top: 0;
            }

            .v-god-witness-timeline::before {
                top: 4px;
                bottom: 4px;
                left: 5px;
                right: auto;
                width: 1px;
                height: auto;
                background: linear-gradient(180deg, transparent, rgba(212, 175, 55, 0.7), transparent);
            }

            .v-god-witness-dot {
                top: 2px;
                left: -24px;
            }

            .v-architecture-category-summary {
                grid-template-columns: auto 1fr auto;
            }

            .v-architecture-category-stat,
            .v-architecture-category-mood {
                display: none;
            }

            .v-architecture-item-header {
                grid-template-columns: 1fr;
                gap: 12px;
                align-items: start;
            }

            .v-architecture-primary-witness {
                align-items: center;
            }

            .v-architecture-item-grid.major-card-grid {
                grid-template-columns: 1fr;
            }

            .v-architecture-popup {
                padding: 16px;
            }

            .v-architecture-popup-panel {
                width: min(100%, calc(100vw - 24px));
                padding: 24px 18px 26px;
            }

            .v-architecture-popup-body {
                padding-right: 0;
            }

            .v-architecture-popup .v-architecture-witness-role {
                grid-template-columns: 1fr;
                gap: 8px;
            }

            .v-architecture-popup .v-architecture-witness-role > span:first-child {
                padding-top: 0;
            }
        }

        /* Final Atlas overflow/performance overrides after carousel defaults. */
        .v-atlas-slide .v-god-scroll-rail {
            overflow: hidden;
            max-width: 100%;
        }

        .v-atlas-slide .v-god-major-grid.v-god-scroll-rail {
            overflow-x: auto;
            overflow-y: hidden;
            grid-auto-flow: column;
            grid-auto-columns: calc((100% - 40px) / 3);
            grid-template-columns: none;
            gap: 20px;
            padding: 2px 4px 8px;
            max-width: 100%;
            scroll-behavior: smooth;
            scroll-snap-type: x proximity;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
        }

        .v-atlas-slide .v-god-major-grid.v-god-scroll-rail::-webkit-scrollbar {
            display: none;
        }

        .v-atlas-slide .v-god-witness-timeline {
            grid-auto-flow: row;
            grid-auto-columns: initial;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            padding-inline: 0;
            max-width: 100%;
            overflow: hidden;
        }

        .v-atlas-slide .v-god-witness-timeline::before {
            display: none;
        }

        .v-atlas-slide .v-god-library-section > header,
        .v-atlas-slide .v-god-related-themes > header {
            background:
                linear-gradient(90deg, rgba(212, 175, 55, 0.08), rgba(7, 20, 37, 0.48) 52%, rgba(212, 175, 55, 0.035)) !important;
            border-color: rgba(212, 175, 55, 0.22);
        }

        @media (max-width: 980px) {
            .v-atlas-slide .v-god-major-grid.v-god-scroll-rail {
                grid-auto-flow: column;
                grid-auto-columns: minmax(260px, 86%);
                grid-template-columns: none;
            }

            .v-atlas-slide .v-god-witness-timeline {
                grid-template-columns: 1fr;
            }
        }

        /* -------------------------------------------------------------------------
           PREMIUM SLIDE-OUT SCRIPTURE PANEL
           ------------------------------------------------------------------------- */
        .v-side-drawer-scrim {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(3, 8, 17, 0.7);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            z-index: 10000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.4s ease, visibility 0.4s;
        }

        .v-side-drawer-scrim.active {
            opacity: 1;
            visibility: visible;
        }

        .v-side-drawer {
            position: fixed;
            top: 0; right: 0; bottom: 0;
            width: 440px;
            max-width: 100%;
            background: radial-gradient(circle at 100% 0%, #0c1e36 0%, #061327 100%);
            border-left: 1px solid rgba(212, 175, 55, 0.3);
            box-shadow: -10px 0 45px rgba(0, 0, 0, 0.85);
            z-index: 10001;
            transform: translateX(100%);
            transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
        }

        .v-side-drawer.active {
            transform: translateX(0);
        }

        .v-drawer-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 24px;
            border-bottom: 1px solid rgba(212, 175, 55, 0.15);
        }

        .v-drawer-title {
            font-family: 'Cinzel', serif;
            font-size: 15px;
            color: #f4e7c1;
            margin: 0;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        .v-drawer-close {
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.5);
            font-size: 24px;
            cursor: pointer;
            line-height: 1;
            transition: color 0.2s, transform 0.2s;
        }

        .v-drawer-close:hover {
            color: #d4af37;
            transform: scale(1.15);
        }

        .v-drawer-content {
            flex: 1;
            overflow-y: auto;
            padding: 28px 24px;
            display: flex;
            flex-direction: column;
            gap: 24px;
            box-sizing: border-box;
        }

        .v-drawer-scripture {
            font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
            font-size: 17.5px;
            line-height: 1.65;
            color: #FFF9EC;
            background: rgba(212, 175, 55, 0.03);
            border-left: 2px solid #d4af37;
            padding: 16px 20px;
            border-radius: 4px;
            font-style: italic;
            text-shadow: 0 0 1px rgba(255, 255, 255, 0.15);
            margin: 0;
        }

        .v-drawer-meta-section {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .v-drawer-meta-title {
            font-family: 'Cinzel', serif;
            font-size: 10.5px;
            color: #c9a46b;
            border-bottom: 1px dashed rgba(212, 175, 55, 0.2);
            padding-bottom: 6px;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            margin: 0 0 4px 0;
        }

        .v-drawer-meta-item {
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.04);
            border-radius: 12px;
            padding: 12px 16px;
            display: flex;
            align-items: center;
            gap: 12px;
            transition: background 0.3s, border-color 0.3s;
        }

        .v-drawer-meta-item:hover {
            background: rgba(212, 175, 55, 0.04);
            border-color: rgba(212, 175, 55, 0.15);
        }

        .v-drawer-meta-icon {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: rgba(212, 175, 55, 0.08);
            border: 1px solid rgba(212, 175, 55, 0.2);
            color: #d4af37;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .v-drawer-meta-text {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .v-drawer-meta-label {
            font-size: 8px;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.4);
            letter-spacing: 0.05em;
        }

        .v-drawer-meta-val {
            font-size: 11px;
            font-weight: 600;
            color: #FFF9EC;
        }

        .v-drawer-study-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background: linear-gradient(135deg, #d4af37 0%, #b88a4d 100%);
            border: none;
            color: #061327 !important;
            -webkit-text-fill-color: #061327 !important;
            font-family: 'Cinzel', serif;
            font-size: 12px;
            font-weight: 700;
            padding: 14px;
            border-radius: 30px;
            cursor: pointer;
            text-decoration: none !important;
            text-align: center;
            box-shadow: 0 4px 15px rgba(212, 175, 55, 0.25);
            transition: all 0.3s ease;
            margin-top: auto;
        }

        .v-drawer-study-btn:hover {
            box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
            transform: translateY(-2px);
            filter: brightness(1.1);
        }

        .v-drawer-loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 16px;
            height: 200px;
            color: rgba(255, 255, 255, 0.5);
            font-size: 12px;
            font-family: 'Cinzel', serif;
            letter-spacing: 0.05em;
        }

        .v-drawer-spinner {
            width: 32px;
            height: 32px;
            border: 3px solid rgba(212, 175, 55, 0.1);
            border-radius: 50%;
            border-top-color: #d4af37;
            animation: vSpin 1s infinite linear;
        }

        @keyframes vSpin {
            to { transform: rotate(360deg); }
        }

        /* COMBINED SECTION 02 LAYOUT */
        .v-combined-section {
            display: flex;
            flex-direction: column;
            width: 100%;
            margin-top: 16px;
        }

        .v-combined-headers {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
            position: sticky;
            top: 0;
            background: rgba(6, 19, 39, 0.95);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            z-index: 10;
            padding: 20px 0;
            border-bottom: 1px solid rgba(212, 175, 55, 0.25);
            margin-bottom: 28px;
        }

        .v-combined-header-col {
            font-family: 'Cinzel', serif;
            font-size: 13.5px;
            font-weight: 700;
            color: #d4af37;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            text-align: center;
            display: flex;
            flex-direction: column;
            gap: 6px;
            text-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
        }

        .v-combined-header-col .v-col-sub {
            font-family: 'Cormorant Garamond', serif;
            font-size: 11px;
            font-style: italic;
            color: rgba(255, 255, 255, 0.55);
            text-transform: none;
            letter-spacing: 0.05em;
        }

        .v-combined-rows {
            display: flex;
            flex-direction: column;
            gap: 28px;
        }

        .v-combined-row {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
            position: relative;
            background: rgba(11, 25, 48, 0.15);
            border-radius: 20px;
            padding: 12px;
            border: 1px solid rgba(212, 175, 55, 0.05);
            transition: all 0.4s ease;
        }
        
        .v-combined-row:hover {
            border-color: rgba(212, 175, 55, 0.15);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
            background: rgba(11, 25, 48, 0.25);
        }

        .v-combined-row-badge {
            display: none;
        }

        .v-cell-header-mobile {
            display: none;
        }

        .v-combined-cell {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        /* Premium base card system */
        .v-combined-card {
            flex: 1;
            background: linear-gradient(135deg, rgba(16, 30, 58, 0.75) 0%, rgba(6, 19, 39, 0.9) 100%);
            border: 1px solid rgba(212, 175, 55, 0.2);
            border-radius: 16px;
            padding: 24px 20px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 
                0 8px 32px rgba(0, 0, 0, 0.5),
                inset 0 0 20px rgba(212, 175, 55, 0.03);
            position: relative;
            overflow: hidden;
            box-sizing: border-box;
            justify-content: space-between;
        }

        /* Ambient light reflection sweep on hover */
        .v-combined-card::after {
            content: '';
            position: absolute;
            top: -50%; left: -60%; width: 30%; height: 200%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
            transform: rotate(30deg);
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .v-combined-card:hover::after {
            opacity: 1;
            left: 130%;
            transition: left 0.8s ease-in-out, opacity 0.5s ease;
        }

        .v-combined-card:hover {
            border-color: rgba(212, 175, 55, 0.6);
            transform: translateY(-6px) scale(1.02);
            box-shadow: 
                0 18px 40px rgba(0, 0, 0, 0.6),
                0 0 25px rgba(212, 175, 55, 0.25),
                inset 0 0 15px rgba(212, 175, 55, 0.08);
        }

        .v-combined-card-icon {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: rgba(212, 175, 55, 0.04);
            border: 1px solid rgba(212, 175, 55, 0.25);
            color: #d4af37;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 2px;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .v-combined-card:hover .v-combined-card-icon {
            background: rgba(212, 175, 55, 0.18);
            border-color: rgba(212, 175, 55, 0.6);
            box-shadow: 
                0 0 12px rgba(212, 175, 55, 0.4),
                inset 0 2px 4px rgba(0,0,0,0.2);
            transform: scale(1.05);
        }

        .v-combined-card-icon svg {
            width: 22px;
            height: 22px;
        }

        .v-card-title {
            font-family: 'Cinzel', serif;
            font-size: 14px;
            font-weight: 700;
            color: #FFF9EC;
            margin: 0;
            letter-spacing: 0.08em;
        }

        .v-card-title-hebrew {
            font-family: 'Cinzel', serif;
            font-size: 16px;
            font-weight: 700;
            color: #FFF9EC;
            margin: 0;
            letter-spacing: 0.08em;
            text-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
        }

        .v-card-title-jesus {
            font-family: 'Cinzel', serif;
            font-size: 14px;
            font-weight: 700;
            color: #FFF9EC;
            margin: 0;
            letter-spacing: 0.08em;
            line-height: 1.35;
        }

        .v-card-subtitle-jesus {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 12px;
            font-style: italic;
            color: #e5c185;
            margin: -10px 0 2px 0;
            text-shadow: 0 0 8px rgba(229, 193, 133, 0.2);
            text-align: center;
        }

        .v-card-text-jesus {
            font-size: 10.5px;
            color: #cbd5e1;
            line-height: 1.55;
            margin: 0;
            text-align: center;
        }

        .v-devotional-jesus-panel {
            background: rgba(244, 231, 193, 0.03) !important;
            border: 1px solid rgba(212, 175, 55, 0.15) !important;
            box-shadow: inset 0 2px 8px rgba(0,0,0,0.4), 0 0 10px rgba(212, 175, 55, 0.03) !important;
        }

        .v-jesus-tone-chip {
            background: rgba(244, 231, 193, 0.08) !important;
            border: 1px solid rgba(212, 175, 55, 0.25) !important;
            color: #f4e7c1 !important;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 0 8px rgba(212, 175, 55, 0.1) !important;
        }

        .v-jesus-tone-chip:hover {
            background: rgba(212, 175, 55, 0.18) !important;
            border-color: rgba(212, 175, 55, 0.5) !important;
            box-shadow: 0 2px 6px rgba(0,0,0,0.3), 0 0 12px rgba(212, 175, 55, 0.25) !important;
        }

        .v-card-subtitle-meaning {
            font-family: 'Cormorant Garamond', serif;
            font-size: 12px;
            font-style: italic;
            color: #c9a46b;
            margin: -4px 0 2px 0;
        }

        .v-card-text {
            font-size: 10.5px;
            color: #cbd5e1;
            line-height: 1.6;
            margin: 0;
        }

        .v-card-quote {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 12px;
            font-style: italic;
            color: rgba(255, 249, 236, 0.9);
            line-height: 1.5;
            margin: 0;
            border-left: 2px solid rgba(212, 175, 55, 0.3);
            padding-left: 10px;
            text-align: left;
            width: 100%;
            box-sizing: border-box;
        }

        .v-card-footer {
            margin-top: auto;
            width: 100%;
            display: flex;
            justify-content: center;
        }

        /* COLUMN 1 — WHO GOD IS */
        .v-cell-attribute .v-combined-card {
            background: linear-gradient(135deg, rgba(20, 36, 68, 0.75) 0%, rgba(6, 19, 39, 0.9) 100%);
            border: 1px solid rgba(212, 175, 55, 0.25);
        }
        .v-cell-attribute .v-combined-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: radial-gradient(circle at 50% 25%, rgba(212, 175, 55, 0.1) 0%, transparent 60%);
            pointer-events: none;
        }
        .v-cell-attribute .v-combined-card-icon {
            box-shadow: 
                0 0 15px rgba(212, 175, 55, 0.25),
                inset 0 2px 4px rgba(0, 0, 0, 0.4);
            border-color: rgba(212, 175, 55, 0.45);
        }
        .v-cell-attribute .v-card-title {
            font-family: 'Cinzel', serif;
            font-size: 15px;
            letter-spacing: 0.08em;
            color: #F4E7C1;
            text-shadow: 0 0 10px rgba(212, 175, 55, 0.25);
        }

        /* COLUMN 2 — HOW HE RELATES */
        .v-cell-relational .v-combined-card {
            background: linear-gradient(135deg, rgba(28, 32, 54, 0.75) 0%, rgba(10, 12, 28, 0.9) 100%);
            border: 1px solid rgba(220, 160, 90, 0.2);
        }
        .v-cell-relational .v-combined-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: radial-gradient(circle at 50% 25%, rgba(220, 160, 90, 0.08) 0%, transparent 65%);
            pointer-events: none;
        }
        .v-cell-relational .v-card-quote {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 12.5px;
            font-style: italic;
            color: rgba(255, 240, 220, 0.95);
            line-height: 1.4;
            border-left: none;
            padding: 0;
            margin: 4px 0;
            text-align: center;
            position: relative;
        }
        .v-cell-relational .v-card-quote::before {
            content: '“';
            font-family: 'Cinzel', serif;
            font-size: 24px;
            color: rgba(212, 175, 55, 0.3);
            position: absolute;
            top: -14px;
            left: 50%;
            transform: translateX(-50%);
            height: 12px;
            line-height: 1;
        }
        .v-cell-relational .v-card-title {
            font-family: 'Cinzel', serif;
            font-size: 14px;
            letter-spacing: 0.08em;
            color: #F4E7C1;
            border-bottom: 1px solid rgba(212, 175, 55, 0.15);
            padding-bottom: 8px;
            width: 80%;
            text-align: center;
        }

        /* COLUMN 3 — NAMES REVEALED */
        .v-cell-name .v-combined-card {
            background: linear-gradient(135deg, rgba(30, 24, 15, 0.8) 0%, rgba(12, 10, 6, 0.95) 100%);
            border: 1px solid rgba(212, 175, 55, 0.4);
            box-shadow: 
                0 8px 32px rgba(0, 0, 0, 0.6),
                inset 0 0 30px rgba(212, 175, 55, 0.05);
        }
        .v-cell-name .v-combined-card::before {
            content: '';
            position: absolute;
            top: 4px; left: 4px; right: 4px; bottom: 4px;
            border: 1px dashed rgba(212, 175, 55, 0.2);
            border-radius: 12px;
            pointer-events: none;
        }
        .v-cell-name .v-card-title-hebrew {
            font-family: 'Cinzel', serif;
            font-size: 16px;
            font-weight: 700;
            color: #fff;
            text-shadow: 0 0 12px rgba(212, 175, 55, 0.5);
            letter-spacing: 0.1em;
        }
        .v-cell-name .v-card-subtitle-meaning {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 12.5px;
            font-style: italic;
            color: #e5c185;
            margin-bottom: 6px;
        }
        .v-devotional-insight-panel {
            background: rgba(212, 175, 55, 0.03);
            border: 1px solid rgba(212, 175, 55, 0.1);
            border-radius: 10px;
            padding: 10px 12px;
            width: 100%;
            box-sizing: border-box;
            margin: 6px 0;
            box-shadow: inset 0 2px 6px rgba(0,0,0,0.3);
        }
        .v-devotional-app {
            font-size: 10.5px;
            color: #cbd5e1;
            line-height: 1.55;
            margin: 0;
            font-family: 'Inter', sans-serif;
            font-weight: 400;
            text-align: center;
        }
        .v-tone-chips-container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
            margin-top: 4px;
            width: 100%;
        }
        .v-tone-chip {
            background: rgba(212, 175, 55, 0.08);
            border: 1px solid rgba(212, 175, 55, 0.2);
            color: #e5c185;
            font-size: 8px;
            font-weight: 700;
            padding: 2.5px 8px;
            border-radius: 12px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
        }
        .v-tone-chip:hover {
            background: rgba(212, 175, 55, 0.15);
            border-color: rgba(212, 175, 55, 0.4);
            transform: scale(1.05);
        }

        /* COLUMN 4 — JESUS REVEALED THEMES */
        .v-cell-jesus .v-combined-card {
            border: 1px solid rgba(212, 175, 55, 0.25);
            transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* 1. Alpha & Omega: Cosmic Gold */
        .v-cell-jesus .v-combined-card.v-iam-alpha {
            background: linear-gradient(135deg, rgba(16, 26, 48, 0.8) 0%, rgba(26, 20, 10, 0.9) 100%);
            border-color: rgba(212, 175, 55, 0.4);
        }
        .v-cell-jesus .v-combined-card.v-iam-alpha::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: radial-gradient(circle at 50% 20%, rgba(212, 175, 55, 0.16) 0%, transparent 60%);
            pointer-events: none;
        }
        .v-cell-jesus .v-combined-card.v-iam-alpha:hover {
            box-shadow: 
                0 18px 45px rgba(0, 0, 0, 0.65),
                0 0 25px rgba(212, 175, 55, 0.35);
        }

        /* 2. Cornerstone: Illuminated Stone Foundation */
        .v-cell-jesus .v-combined-card.v-iam-cornerstone {
            background: linear-gradient(135deg, rgba(16, 26, 48, 0.8) 0%, rgba(30, 32, 36, 0.9) 100%);
            border-color: rgba(180, 180, 180, 0.35);
        }
        .v-cell-jesus .v-combined-card.v-iam-cornerstone::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0.08) 0%, transparent 65%);
            pointer-events: none;
        }
        .v-cell-jesus .v-combined-card.v-iam-cornerstone:hover {
            box-shadow: 
                0 18px 45px rgba(0, 0, 0, 0.65),
                0 0 25px rgba(200, 200, 200, 0.25);
        }

        /* 3. Living Water: Flowing Aqua Glow */
        .v-cell-jesus .v-combined-card.v-iam-water {
            background: linear-gradient(135deg, rgba(16, 26, 48, 0.8) 0%, rgba(10, 36, 50, 0.9) 100%);
            border-color: rgba(56, 189, 248, 0.35);
        }
        .v-cell-jesus .v-combined-card.v-iam-water::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: radial-gradient(circle at 50% 20%, rgba(56, 189, 248, 0.16) 0%, transparent 60%);
            pointer-events: none;
        }
        .v-cell-jesus .v-combined-card.v-iam-water:hover {
            box-shadow: 
                0 18px 45px rgba(0, 0, 0, 0.65),
                0 0 25px rgba(56, 189, 248, 0.35);
        }

        /* 4. Light of the World: Radiant Sunburst Glow */
        .v-cell-jesus .v-combined-card.v-iam-light {
            background: linear-gradient(135deg, rgba(16, 26, 48, 0.8) 0%, rgba(45, 38, 20, 0.9) 100%);
            border-color: rgba(250, 204, 21, 0.4);
        }
        .v-cell-jesus .v-combined-card.v-iam-light::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: radial-gradient(circle at 50% 25%, rgba(250, 204, 21, 0.16) 0%, transparent 60%);
            pointer-events: none;
        }
        .v-cell-jesus .v-combined-card.v-iam-light:hover {
            box-shadow: 
                0 18px 45px rgba(0, 0, 0, 0.65),
                0 0 25px rgba(250, 204, 21, 0.35);
        }

        /* 5. Way, Truth & Life: Golden Path */
        .v-cell-jesus .v-combined-card.v-iam-way {
            background: linear-gradient(135deg, rgba(16, 26, 48, 0.8) 0%, rgba(22, 42, 32, 0.9) 100%);
            border-color: rgba(52, 211, 153, 0.35);
        }
        .v-cell-jesus .v-combined-card.v-iam-way::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: radial-gradient(circle at 50% 20%, rgba(52, 211, 153, 0.12) 0%, transparent 60%);
            pointer-events: none;
        }
        .v-cell-jesus .v-combined-card.v-iam-way:hover {
            box-shadow: 
                0 18px 45px rgba(0, 0, 0, 0.65),
                0 0 25px rgba(52, 211, 153, 0.35);
        }

        /* 6. The Door: Warm Sanctuary Glow */
        .v-cell-jesus .v-combined-card.v-iam-door {
            background: linear-gradient(135deg, rgba(16, 26, 48, 0.8) 0%, rgba(38, 24, 22, 0.9) 100%);
            border-color: rgba(248, 113, 113, 0.3);
        }
        .v-cell-jesus .v-combined-card.v-iam-door::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: radial-gradient(circle at 50% 20%, rgba(248, 113, 113, 0.12) 0%, transparent 60%);
            pointer-events: none;
        }
        .v-cell-jesus .v-combined-card.v-iam-door:hover {
            box-shadow: 
                0 18px 45px rgba(0, 0, 0, 0.65),
                0 0 25px rgba(248, 113, 113, 0.3);
        }

        /* 7. Bread of Life: Golden Wheat/Warm Amber */
        .v-cell-jesus .v-combined-card.v-iam-bread {
            background: linear-gradient(135deg, rgba(16, 26, 48, 0.8) 0%, rgba(43, 30, 18, 0.9) 100%);
            border-color: rgba(251, 146, 60, 0.35);
        }
        .v-cell-jesus .v-combined-card.v-iam-bread::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: radial-gradient(circle at 50% 20%, rgba(251, 146, 60, 0.12) 0%, transparent 60%);
            pointer-events: none;
        }
        .v-cell-jesus .v-combined-card.v-iam-bread:hover {
            box-shadow: 
                0 18px 45px rgba(0, 0, 0, 0.65),
                0 0 25px rgba(251, 146, 60, 0.3);
        }

        /* 8. Good Shepherd: Emerald Pastures */
        .v-cell-jesus .v-combined-card.v-iam-shepherd {
            background: linear-gradient(135deg, rgba(16, 26, 48, 0.8) 0%, rgba(12, 40, 24, 0.9) 100%);
            border-color: rgba(16, 185, 129, 0.35);
        }
        .v-cell-jesus .v-combined-card.v-iam-shepherd::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: radial-gradient(circle at 50% 20%, rgba(16, 185, 129, 0.12) 0%, transparent 60%);
            pointer-events: none;
        }
        .v-cell-jesus .v-combined-card.v-iam-shepherd:hover {
            box-shadow: 
                0 18px 45px rgba(0, 0, 0, 0.65),
                0 0 25px rgba(16, 185, 129, 0.3);
        }

        /* 9. Lamb of God: Pure Soft White/Silver Glow */
        .v-cell-jesus .v-combined-card.v-iam-lamb {
            background: linear-gradient(135deg, rgba(16, 26, 48, 0.8) 0%, rgba(32, 36, 48, 0.9) 100%);
            border-color: rgba(226, 232, 240, 0.35);
        }
        .v-cell-jesus .v-combined-card.v-iam-lamb::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: radial-gradient(circle at 50% 20%, rgba(226, 232, 240, 0.12) 0%, transparent 60%);
            pointer-events: none;
        }
        .v-cell-jesus .v-combined-card.v-iam-lamb:hover {
            box-shadow: 
                0 18px 45px rgba(0, 0, 0, 0.65),
                0 0 25px rgba(226, 232, 240, 0.3);
        }

        /* 10. True Vine: Lush Deep Green */
        .v-cell-jesus .v-combined-card.v-iam-vine {
            background: linear-gradient(135deg, rgba(16, 26, 48, 0.8) 0%, rgba(8, 38, 20, 0.9) 100%);
            border-color: rgba(34, 197, 94, 0.35);
        }
        .v-cell-jesus .v-combined-card.v-iam-vine::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: radial-gradient(circle at 50% 20%, rgba(34, 197, 94, 0.12) 0%, transparent 60%);
            pointer-events: none;
        }
        .v-cell-jesus .v-combined-card.v-iam-vine:hover {
            box-shadow: 
                0 18px 45px rgba(0, 0, 0, 0.65),
                0 0 25px rgba(34, 197, 94, 0.3);
        }

        /* 11. Bridegroom: Royal Purple/Covenant Gold */
        .v-cell-jesus .v-combined-card.v-iam-bridegroom {
            background: linear-gradient(135deg, rgba(16, 26, 48, 0.8) 0%, rgba(38, 16, 48, 0.9) 100%);
            border-color: rgba(168, 85, 247, 0.35);
        }
        .v-cell-jesus .v-combined-card.v-iam-bridegroom::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: radial-gradient(circle at 50% 20%, rgba(168, 85, 247, 0.12) 0%, transparent 60%);
            pointer-events: none;
        }
        .v-cell-jesus .v-combined-card.v-iam-bridegroom:hover {
            box-shadow: 
                0 18px 45px rgba(0, 0, 0, 0.65),
                0 0 25px rgba(168, 85, 247, 0.3);
        }

        /* 12. Resurrection & Life: Cosmic Violet & Diamond Ray */
        .v-cell-jesus .v-combined-card.v-iam-resurrection {
            background: linear-gradient(135deg, rgba(16, 26, 48, 0.8) 0%, rgba(20, 20, 48, 0.9) 100%);
            border-color: rgba(192, 132, 252, 0.4);
        }
        .v-cell-jesus .v-combined-card.v-iam-resurrection::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: radial-gradient(circle at 50% 20%, rgba(192, 132, 252, 0.16) 0%, transparent 60%);
            pointer-events: none;
        }
        .v-cell-jesus .v-combined-card.v-iam-resurrection:hover {
            box-shadow: 
                0 18px 45px rgba(0, 0, 0, 0.65),
                0 0 25px rgba(192, 132, 252, 0.35);
        }

        /* -------------------------------------------------------------------------
           NEW PREMIUM SECTION TITLE BAR SYSTEM (Visual Devotion Section Header)
           ------------------------------------------------------------------------- */
        .v-section-header-wrap {
            position: relative;
            overflow: hidden;
            padding: 44px 50px;
            border-radius: 24px;
            border: 1px solid rgba(212, 175, 55, 0.22);
            /* Translucent gradients + inner illumination + radial glow behind title */
            background:
                radial-gradient(circle at 50% 50%, rgba(244, 231, 193, 0.06) 0%, transparent 60%),
                radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.15) 0%, transparent 50%),
                linear-gradient(180deg, rgba(8, 22, 48, 0.82) 0%, rgba(5, 14, 30, 0.92) 100%);
            backdrop-filter: blur(25px) saturate(1.1);
            -webkit-backdrop-filter: blur(25px) saturate(1.1);
            margin-bottom: 35px;
            box-shadow: 
                inset 0 0 40px rgba(212, 175, 55, 0.04),
                inset 0 1px 0 rgba(255, 255, 255, 0.1),
                0 20px 50px rgba(0, 0, 0, 0.55);
            text-align: center;
            z-index: 5;
            transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* Glassmorphism reflection overlay */
        .v-section-header-wrap::after {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12) 20%, rgba(255, 255, 255, 0.12) 80%, transparent);
            pointer-events: none;
        }

        /* Ambient atmospheric backgrounds */
        .v-section-header-atmos {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            z-index: 1;
            overflow: hidden;
            border-radius: 24px;
        }

        .v-atmos-sacred-geometry {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(0deg);
            width: 320px;
            height: 320px;
            pointer-events: none;
            z-index: 2;
            opacity: 0.85;
            color: #d4af37;
            animation: vSacredGeometryRotate 120s infinite linear;
        }

        @keyframes vSacredGeometryRotate {
            from { transform: translate(-50%, -50%) rotate(0deg); }
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }

        .v-atmos-radial {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
            opacity: 0.85;
        }

        .v-atmos-svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 2;
        }

        /* 01 Intro (Awakening / Gold) */
        .v-atmos-awakening .v-atmos-radial {
            background: radial-gradient(circle, rgba(212, 175, 55, 0.18) 0%, rgba(212, 175, 55, 0.04) 55%, transparent 85%);
        }

        /* 02 Timeline (Journey / Blue) */
        .v-atmos-journey .v-atmos-radial {
            background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.03) 60%, transparent 85%);
        }

        /* 03 Revelation (Illumination / Purple) */
        .v-atmos-illumination .v-atmos-radial {
            background: radial-gradient(circle, rgba(168, 85, 247, 0.15) 0%, rgba(168, 85, 247, 0.03) 60%, transparent 85%);
        }

        /* 04 Bridge (Redemption / High-contrast dark red-gold) */
        .v-atmos-redemption .v-atmos-radial {
            background: radial-gradient(circle, rgba(220, 38, 38, 0.1) 0%, rgba(212, 175, 55, 0.05) 50%, transparent 80%);
        }

        /* 05 Garden (Cultivation / Green) */
        .v-atmos-cultivation .v-atmos-radial {
            background: radial-gradient(circle, rgba(16, 185, 129, 0.16) 0%, rgba(16, 185, 129, 0.03) 60%, transparent 85%);
        }

        /* 06 Reflection (Restoration / Pink-Blue) */
        .v-atmos-restoration .v-atmos-radial {
            background: radial-gradient(circle, rgba(244, 114, 182, 0.12) 0%, rgba(59, 130, 246, 0.04) 50%, transparent 85%);
        }

        /* Glowing text elements & structure inside section header wrapper */
        .v-section-identifier {
            display: inline-block;
            position: relative;
            z-index: 2;
            font-family: 'Cinzel', serif;
            font-size: 11px;
            font-weight: 700;
            color: #d4af37;
            letter-spacing: 0.42em;
            line-height: 1;
            text-transform: uppercase;
            margin: 0 auto 16px;
            text-shadow: 0 0 12px rgba(212, 175, 55, 0.45);
        }

        .v-section-main-title {
            position: relative;
            z-index: 2;
            margin: 0 0 14px 0;
            font-size: 1.85rem;
            font-weight: 600;
            font-family: 'Cinzel', serif;
            letter-spacing: 0.12em;
            line-height: 1.35;
            color: #FFF9EC;
            text-transform: uppercase;
            text-rendering: geometricPrecision;
            -webkit-font-smoothing: antialiased;
            text-shadow:
                0 0 24px rgba(244, 231, 193, 0.22),
                0 0 45px rgba(212, 175, 55, 0.15),
                0 3px 18px rgba(0, 0, 0, 0.7);
            animation: vTitleBreathe 6s infinite ease-in-out;
        }

        @keyframes vTitleBreathe {
            0%, 100% {
                text-shadow:
                    0 0 24px rgba(244, 231, 193, 0.22),
                    0 0 45px rgba(212, 175, 55, 0.15),
                    0 3px 18px rgba(0, 0, 0, 0.7);
            }
            50% {
                text-shadow:
                    0 0 32px rgba(244, 231, 193, 0.35),
                    0 0 60px rgba(212, 175, 55, 0.25),
                    0 3px 18px rgba(0, 0, 0, 0.7);
            }
        }

        .v-section-spiritual-subtitle {
            position: relative;
            z-index: 2;
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 0.95rem;
            color: #F4E7C1;
            font-style: italic;
            letter-spacing: 0.085em;
            opacity: 0.85;
            text-shadow:
                0 0 16px rgba(212, 175, 55, 0.18),
                0 2px 10px rgba(0, 0, 0, 0.5);
        }

        /* -------------------------------------------------------------------------
           SACRED PROGRESS TIMELINE
           ------------------------------------------------------------------------- */
        .v-section-header-timeline {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            max-width: 900px;
            margin: 0 auto 30px auto;
            padding: 0 16px;
            width: 100%;
            box-sizing: border-box;
            z-index: 2;
        }

        .v-sht-line {
            content: '';
            position: absolute;
            top: 75%;
            left: 48px;
            right: 48px;
            height: 2px;
            background: rgba(212, 175, 55, 0.08);
            z-index: 1;
            transform: translateY(-50%);
        }

        .v-sht-line-active {
            position: absolute;
            top: 75%;
            left: 48px;
            height: 2px;
            background: linear-gradient(90deg, #d4af37, #fff 25%, #f4e7c1 50%, #fff 75%, #d4af37);
            background-size: 200% 100%;
            z-index: 2;
            transition: width 0.55s cubic-bezier(0.4, 0, 0.2, 1);
            transform: translateY(-50%);
            animation: vPathShimmer 4s infinite linear;
            box-shadow: 
                0 0 10px rgba(212, 175, 55, 0.8),
                0 0 20px rgba(244, 231, 193, 0.4);
        }

        @keyframes vPathShimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }

        .v-sht-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            z-index: 3;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            width: 110px;
            text-align: center;
        }

        .v-sht-num {
            font-family: 'Cinzel', serif;
            font-size: 12.5px;
            font-weight: 600;
            color: rgba(244, 231, 193, 0.45);
            margin-bottom: 3px;
            letter-spacing: 0.15em;
            transition: all 0.3s ease;
        }

        .v-sht-name {
            font-family: 'Cinzel', serif;
            font-size: 10.5px;
            font-weight: 700;
            color: rgba(245, 245, 247, 0.35);
            margin-bottom: 12px;
            text-transform: uppercase;
            letter-spacing: 0.22em;
            white-space: nowrap;
            transition: all 0.3s ease;
        }

        .v-sht-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 1.5px solid rgba(212, 175, 55, 0.45);
            background: rgba(5, 14, 30, 0.95);
            position: relative;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 0 0 6px rgba(212, 175, 55, 0.15);
            opacity: 0.65;
        }

        .v-sht-micro {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 11.5px;
            font-style: italic;
            font-weight: 500;
            color: rgba(212, 175, 55, 0.65);
            letter-spacing: 0.05em;
            margin-top: 8px;
            opacity: 0.5;
            transform: translateY(0);
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            pointer-events: none;
            height: auto;
            overflow: visible;
            white-space: nowrap;
        }

        /* Step active state */
        .v-sht-step.active .v-sht-num {
            color: #f4e7c1;
            text-shadow: 0 0 10px rgba(212, 175, 55, 0.75);
        }

        .v-sht-step.active .v-sht-name {
            color: #d4af37;
            text-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
        }

        .v-sht-step.active .v-sht-dot {
            background: #fff;
            border-color: #d4af37;
            transform: scale(1.4);
            opacity: 1;
            box-shadow: 
                0 0 15px rgba(255, 255, 255, 1),
                0 0 30px rgba(212, 175, 55, 0.9),
                0 0 50px rgba(212, 175, 55, 0.5);
        }

        /* Multi-layered halos and ambient pulse */
        .v-sht-step.active .v-sht-dot::before {
            content: '';
            position: absolute;
            top: -6px; left: -6px; right: -6px; bottom: -6px;
            border-radius: 50%;
            border: 1px solid rgba(244, 231, 193, 0.6);
            animation: vHaloPulse 2.5s infinite cubic-bezier(0.25, 0, 0, 1);
            pointer-events: none;
        }

        .v-sht-step.active .v-sht-dot::after {
            content: '';
            position: absolute;
            top: -12px; left: -12px; right: -12px; bottom: -12px;
            border-radius: 50%;
            border: 1px solid rgba(212, 175, 55, 0.3);
            animation: vHaloPulseOuter 2.5s infinite cubic-bezier(0.25, 0, 0, 1);
            pointer-events: none;
        }

        @keyframes vHaloPulse {
            0% { transform: scale(0.9); opacity: 0; }
            50% { opacity: 0.8; }
            100% { transform: scale(1.3); opacity: 0; }
        }

        @keyframes vHaloPulseOuter {
            0% { transform: scale(0.8); opacity: 0; }
            50% { opacity: 0.5; }
            100% { transform: scale(1.6); opacity: 0; }
        }

        .v-sht-step.active .v-sht-micro {
            opacity: 1;
            color: #f4e7c1;
            transform: translateY(0);
            text-shadow: 0 0 8px rgba(244, 231, 193, 0.35);
        }

        /* Hover behavior */
        .v-sht-step:hover .v-sht-dot {
            opacity: 1;
            border-color: #f4e7c1;
            box-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
            transform: scale(1.2);
        }

        .v-sht-step:hover .v-sht-name {
            color: #f4e7c1;
        }

        .visual-section-selector {
            width: min(1040px, calc(100% - 72px));
            margin: clamp(24px, 3vw, 38px) auto 0;
            padding: 14px 34px 12px;
            border-radius: 999px;
            border: 1px solid rgba(244, 231, 193, 0.2);
            /* Deep, premium layered backgrounds: navy/indigo gradient, gold streaks, cosmic haze, and grid overlay */
            background:
                linear-gradient(90deg, rgba(244, 231, 193, 0.07), transparent 18%, transparent 82%, rgba(244, 231, 193, 0.06)),
                radial-gradient(circle at calc(15% + (var(--v-scroll-percent, 0) * 40%)) 0%, rgba(212, 175, 55, 0.1) 0%, transparent 34%),
                radial-gradient(circle at calc(50% + (var(--v-scroll-percent, 0) * 20% - 10%)) 100%, rgba(59, 130, 246, 0.1) 0%, transparent 54%),
                linear-gradient(180deg, rgba(15, 34, 62, 0.92), rgba(5, 14, 30, 0.96));
            background-blend-mode: screen, normal;
            box-shadow:
                0 20px 46px rgba(0, 0, 0, 0.44),
                inset 0 0 18px rgba(212, 175, 55, 0.055),
                inset 0 1px 0 rgba(255, 255, 255, 0.11);
            backdrop-filter: blur(25px) saturate(1.1);
            -webkit-backdrop-filter: blur(25px) saturate(1.1);
            box-sizing: border-box;
            position: relative;
            z-index: 6;
            transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* Cinematic reflections and grid texture */
        .visual-section-selector::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background-image: 
                linear-gradient(rgba(212, 175, 55, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(212, 175, 55, 0.02) 1px, transparent 1px);
            background-size: 20px 20px;
            background-position: center;
            pointer-events: none;
            z-index: -1;
            opacity: 0.75;
        }

        .visual-section-selector::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: 
                radial-gradient(circle at 10% 20%, rgba(212, 175, 55, 0.04) 0%, transparent 35%),
                radial-gradient(circle at 85% 80%, rgba(139, 92, 246, 0.06) 0%, transparent 45%);
            pointer-events: none;
            z-index: 0;
        }

        .visual-section-selector .v-section-header-timeline {
            margin: 0 auto;
            max-width: 900px;
            min-height: 76px;
            padding: 0 12px;
        }

        .visual-section-selector .v-sht-line {
            background: rgba(212, 175, 55, 0.08);
        }

        .visual-section-selector .v-sht-line-active {
            background: linear-gradient(90deg, #d4af37, #fff 25%, #f4e7c1 50%, #fff 75%, #d4af37);
            background-size: 200% 100%;
            animation: vPathShimmer 4s infinite linear;
            box-shadow: 
                0 0 10px rgba(212, 175, 55, 0.8),
                0 0 20px rgba(244, 231, 193, 0.4);
        }

        .visual-section-selector .v-sht-num {
            font-family: 'Cinzel', serif;
            font-size: 12.5px;
            font-weight: 600;
            color: rgba(244, 231, 193, 0.45);
            letter-spacing: 0.15em;
        }

        .visual-section-selector .v-sht-name {
            font-family: 'Cinzel', serif;
            font-size: 10.5px;
            font-weight: 700;
            color: rgba(245, 245, 247, 0.35);
            letter-spacing: 0.22em;
        }

        .visual-section-selector .v-sht-dot {
            width: 10px;
            height: 10px;
            border: 1.5px solid rgba(212, 175, 55, 0.45);
            background: rgba(5, 14, 30, 0.95);
            box-shadow: 0 0 6px rgba(212, 175, 55, 0.15);
            opacity: 0.65;
        }

        .visual-section-selector .v-sht-step.active .v-sht-num {
            color: #f4e7c1;
            text-shadow: 0 0 10px rgba(212, 175, 55, 0.75);
        }

        .visual-section-selector .v-sht-step.active .v-sht-name {
            color: #d4af37;
            text-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
        }

        .visual-section-selector .v-sht-step.active .v-sht-micro {
            color: #f4e7c1;
            text-shadow: 0 0 8px rgba(244, 231, 193, 0.35);
        }

        .visual-section-selector .v-sht-step.active .v-sht-dot {
            background: #fff;
            border-color: #d4af37;
            box-shadow:
                0 0 15px rgba(255, 255, 255, 1),
                0 0 30px rgba(212, 175, 55, 0.9),
                0 0 50px rgba(212, 175, 55, 0.5);
        }

        /* Particle shift translation inside section header */
        .v-section-header-wrap .v-particle {
            transform: translateY(calc(var(--v-scroll-y, 0px) * -0.15));
            transition: transform 0.1s ease-out;
        }

        /* -------------------------------------------------------------------------
           INTERACTIVE SECTIONS 02/03/04/06/08 PREMIUM VISUAL REFRESH
           ------------------------------------------------------------------------- */
        .v-s02-slide,
        .v-s03-slide,
        .v-s04-slide,
        .v-s06-slide,
        .v-atlas-slide,
        .v-architecture-slide {
            --v-premium-panel: rgba(6, 18, 37, 0.78);
            --v-premium-panel-strong: rgba(4, 13, 29, 0.9);
            --v-premium-panel-soft: rgba(19, 42, 72, 0.54);
            --v-premium-gold: #d4af37;
            --v-premium-gold-soft: rgba(212, 175, 55, 0.32);
            --v-premium-border: rgba(212, 175, 55, 0.26);
            --v-premium-title: #fff9ec;
            --v-premium-copy: rgba(255, 249, 236, 0.82);
            --v-premium-muted: rgba(255, 249, 236, 0.62);
            color: var(--v-premium-copy);
        }

        .v-s02-slide .v-section-header-wrap,
        .v-s03-slide .v-section-header-wrap,
        .v-s04-slide .v-section-header-wrap,
        .v-s06-slide .v-section-header-wrap,
        .v-atlas-slide .v-section-header-wrap,
        .v-architecture-slide .v-section-header-wrap {
            background:
                radial-gradient(circle at 50% 12%, rgba(255, 249, 236, 0.13), transparent 34%),
                radial-gradient(circle at 48% 58%, rgba(212, 175, 55, 0.13), transparent 42%),
                linear-gradient(110deg, rgba(4, 13, 29, 0.94), rgba(9, 27, 52, 0.88) 52%, rgba(4, 13, 29, 0.94)) !important;
            border: 1px solid var(--v-premium-border) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 249, 236, 0.08),
                0 28px 80px rgba(0, 0, 0, 0.22) !important;
        }

        .v-s02-slide .v-section-main-title,
        .v-s03-slide .v-section-main-title,
        .v-s04-slide .v-section-main-title,
        .v-s06-slide .v-section-main-title,
        .v-atlas-slide .v-section-main-title,
        .v-architecture-slide .v-section-main-title {
            color: var(--v-premium-title) !important;
            font-family: 'Cinzel', serif !important;
            font-size: 2.08rem !important;
            font-weight: 600 !important;
            letter-spacing: 0.14em !important;
            text-shadow: 0 0 32px rgba(255, 249, 236, 0.24) !important;
        }

        .v-s02-slide .v-section-identifier,
        .v-s03-slide .v-section-identifier,
        .v-s04-slide .v-section-identifier,
        .v-s06-slide .v-section-identifier,
        .v-atlas-slide .v-section-identifier,
        .v-architecture-slide .v-section-identifier {
            color: var(--v-premium-gold) !important;
            font-weight: 700 !important;
            text-shadow: 0 0 18px rgba(212, 175, 55, 0.34) !important;
        }

        .v-s02-slide .v-section-spiritual-subtitle,
        .v-s03-slide .v-section-spiritual-subtitle,
        .v-s04-slide .v-section-spiritual-subtitle,
        .v-s06-slide .v-section-spiritual-subtitle,
        .v-atlas-slide .v-section-spiritual-subtitle,
        .v-architecture-slide .v-section-spiritual-subtitle {
            color: rgba(255, 249, 236, 0.76) !important;
            font-family: 'Cormorant Garamond', 'EB Garamond', serif !important;
            font-size: 1.08rem !important;
            font-weight: 500 !important;
            letter-spacing: 0.08em !important;
        }

        .v-s02-slide .v-timeline-container {
            max-width: 760px;
            margin-inline: auto;
        }

        .v-s02-slide > div[style] p,
        .v-s06-slide .v-reflection-quote {
            color: rgba(255, 249, 236, 0.76) !important;
            font-family: 'EB Garamond', serif !important;
            font-size: 1.18rem !important;
            font-weight: 400 !important;
            line-height: 1.65 !important;
        }

        .v-s02-slide .v-timeline-line {
            background: linear-gradient(180deg, rgba(212, 175, 55, 0.14), rgba(212, 175, 55, 0.42), rgba(212, 175, 55, 0.14)) !important;
        }

        .v-s02-slide .v-timeline-badge {
            background: var(--v-premium-panel-strong) !important;
            border: 2px solid var(--v-premium-gold) !important;
            color: var(--v-premium-title) !important;
            font-family: 'Cormorant Garamond', serif !important;
            font-size: 1.08rem !important;
            font-weight: 700 !important;
            box-shadow:
                0 0 0 5px rgba(212, 175, 55, 0.08),
                0 0 30px rgba(212, 175, 55, 0.34) !important;
        }

        .v-s02-slide .v-timeline-step-content,
        .v-s03-chapter,
        .v-s03-card,
        .v-s03-progress,
        .v-s03-journey-step,
        .v-s03-atlas-callout,
        .v-s04-slide .v-gospel-node-content,
        .v-s06-block,
        .v-s06-recap-step,
        .v-s06-truth-item,
        .v-s06-prayer-container,
        .v-s06-question-card,
        .v-s06-atlas-node,
        .v-s06-atlas-bridge,
        .v-s06-summit-card,
        .v-atlas-intro,
        .v-atlas-trinity-node,
        .v-atlas-chapter-inner,
        .v-architecture-flow,
        .v-architecture-journey-card,
        .v-architecture-domain,
        .v-architecture-topic,
        .v-architecture-domain-card,
        .v-architecture-category,
        .v-architecture-item-card,
        .v-god-domain-overview-panel,
        .v-god-domain-topic-card,
        .v-god-topic-panel,
        .v-god-library-section,
        .v-god-major-card,
        .v-god-domain-stat-item,
        .v-god-witness-container,
        .v-god-domain-constellation-container {
            background:
                linear-gradient(145deg, rgba(7, 20, 42, 0.86), rgba(5, 14, 30, 0.94)) !important;
            border-color: var(--v-premium-border) !important;
            color: var(--v-premium-copy) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 249, 236, 0.06),
                0 18px 48px rgba(0, 0, 0, 0.18) !important;
        }

        .v-s02-slide .v-timeline-step-text,
        .v-s03-chapter-desc,
        .v-s03-name-app,
        .v-s03-attr-char,
        .v-s03-relational-quote,
        .v-s03-relational-theme,
        .v-s03-jesus-text,
        .v-s03-jesus-app,
        .v-s04-slide .v-gospel-node-desc,
        .v-s06-block-desc,
        .v-s06-recap-desc,
        .v-s06-truth-sub,
        .v-s06-prayer-text,
        .v-s06-atlas-bridge-text,
        .v-s06-summit-text,
        .v-atlas-chapter-purpose,
        .v-atlas-trinity-sub,
        .v-architecture-intro p,
        .v-architecture-journey-card p,
        .v-architecture-domain-header p,
        .v-architecture-topic-intro,
        .v-architecture-domain-card p,
        .v-architecture-category-description,
        .v-architecture-item-card p,
        .v-architecture-major-card p,
        .v-god-domain-topic-card p,
        .v-god-topic-panel p,
        .v-god-major-card p {
            color: var(--v-premium-copy) !important;
            font-family: 'EB Garamond', 'Cormorant Garamond', serif !important;
            font-size: 1.13rem !important;
            font-weight: 400 !important;
            line-height: 1.68 !important;
            letter-spacing: 0 !important;
        }

        .v-s03-chapter-title,
        .v-s03-name-title,
        .v-s03-attr-title,
        .v-s03-relational-action,
        .v-s03-jesus-title-text,
        .v-s04-slide .v-gospel-node-title,
        .v-s06-block-title,
        .v-atlas-chapter-name,
        .v-atlas-trinity-label,
        .v-architecture-journey-card h3,
        .v-architecture-domain-header h3,
        .v-architecture-topic-title,
        .v-architecture-domain-card h3,
        .v-architecture-category-title,
        .v-architecture-item-card h5,
        .v-architecture-major-card h5,
        .v-god-domain-topic-card h4,
        .v-god-major-card h5 {
            color: var(--v-premium-title) !important;
            font-family: 'Cormorant Garamond', 'EB Garamond', serif !important;
            font-weight: 600 !important;
            letter-spacing: 0.01em !important;
        }

        .v-s03-chapter-eyebrow,
        .v-s03-name-card-num,
        .v-s03-name-theme,
        .v-s03-attr-theme,
        .v-s03-jesus-iam-label,
        .v-s06-block-eyebrow,
        .v-s06-recap-num,
        .v-s06-summit-eyebrow,
        .v-atlas-intro-divider-label,
        .v-atlas-chapter-num,
        .v-architecture-journey-label,
        .v-architecture-source-note,
        .v-architecture-domain-header > span,
        .v-architecture-major-eyebrow,
        .v-architecture-category-number {
            color: var(--v-premium-gold) !important;
            font-family: 'Cinzel', serif !important;
            font-weight: 700 !important;
        }

        .v-s03-chip,
        .v-s03-jesus-chip,
        .v-atlas-chapter-topic,
        .v-atlas-level-badge,
        .v-architecture-domain-chip,
        .v-architecture-theme-chip,
        .v-architecture-meta-pill,
        .v-architecture-ref-token,
        .v-god-domain-chip,
        .v-god-filter-pill,
        .v-god-topic-tag {
            background: rgba(212, 175, 55, 0.09) !important;
            border-color: rgba(212, 175, 55, 0.28) !important;
            color: rgba(255, 249, 236, 0.86) !important;
        }

        .v-s04-slide .v-gospel-bridge-line {
            background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.52), transparent) !important;
        }

        .v-s04-slide .v-gospel-node-bullet,
        .v-s06-recap-icon,
        .v-s06-truth-mark,
        .v-s06-atlas-node-icon {
            background: rgba(5, 14, 30, 0.92) !important;
            border-color: var(--v-premium-gold) !important;
            color: var(--v-premium-gold) !important;
            box-shadow: 0 0 28px rgba(212, 175, 55, 0.28) !important;
        }

        .v-s06-question-input {
            background: rgba(4, 13, 29, 0.78) !important;
            border-color: rgba(212, 175, 55, 0.22) !important;
            color: var(--v-premium-title) !important;
            font-family: 'EB Garamond', serif !important;
            font-size: 1.06rem !important;
            line-height: 1.55 !important;
        }

        .v-s06-question-input::placeholder {
            color: rgba(255, 249, 236, 0.48) !important;
        }

        .v-s06-atlas-cta,
        .v-s06-summit-btn,
        .v-architecture-journey-card button,
        .v-architecture-details-btn {
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.22), rgba(10, 28, 55, 0.92)) !important;
            border-color: rgba(212, 175, 55, 0.36) !important;
            color: var(--v-premium-title) !important;
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18) !important;
        }

        .v-atlas-slide .v-god-library-section > header,
        .v-atlas-slide .v-god-related-themes > header,
        .v-architecture-collection > header {
            background:
                linear-gradient(90deg, rgba(4, 13, 29, 0.9), rgba(14, 35, 64, 0.74), rgba(4, 13, 29, 0.9)) !important;
            border-color: rgba(212, 175, 55, 0.28) !important;
            color: var(--v-premium-title) !important;
        }

        .v-s02-slide .v-study-link,
        .v-s03-slide .v-study-link,
        .v-s04-slide .v-study-link,
        .v-s06-slide .v-study-link,
        .v-atlas-slide .v-study-link,
        .v-architecture-slide .v-study-link {
            border-color: rgba(212, 175, 55, 0.36) !important;
            color: var(--v-premium-gold) !important;
            background: rgba(4, 13, 29, 0.76) !important;
        }

        /* Section 07 Atlas final color-schema lock: navy, gold, parchment only. */
        .v-atlas-slide .v-god-domain-tabs-container,
        .v-atlas-slide .v-god-category-filter,
        .v-atlas-slide .v-god-witness-mood-filter,
        .v-atlas-slide .v-god-witness-list,
        .v-atlas-slide .v-god-related-themes {
            background:
                radial-gradient(circle at 18% 0%, rgba(212, 175, 55, 0.08), transparent 42%),
                linear-gradient(180deg, rgba(7, 20, 37, 0.84), rgba(3, 11, 22, 0.94)) !important;
            border-color: rgba(212, 175, 55, 0.2) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 249, 236, 0.045),
                0 18px 44px rgba(0, 0, 0, 0.18) !important;
        }

        .v-atlas-slide .v-god-library-section > header,
        .v-atlas-slide .v-god-related-themes > header,
        .v-atlas-slide .v-architecture-collection > header {
            background:
                linear-gradient(90deg, rgba(3, 11, 22, 0.96), rgba(11, 29, 54, 0.84) 48%, rgba(3, 11, 22, 0.96)) !important;
            border-color: rgba(212, 175, 55, 0.3) !important;
            color: var(--v-premium-title) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 249, 236, 0.055),
                inset 0 -1px 0 rgba(212, 175, 55, 0.08),
                0 16px 34px rgba(0, 0, 0, 0.16) !important;
        }

        .v-atlas-slide .v-god-library-section h4,
        .v-atlas-slide .v-god-related-themes h4,
        .v-atlas-slide .v-architecture-collection h4 {
            color: rgba(255, 249, 236, 0.92) !important;
            text-shadow: 0 0 18px rgba(212, 175, 55, 0.14) !important;
        }

        .v-atlas-slide .v-god-section-actions span,
        .v-atlas-slide .v-god-category-filter-label,
        .v-atlas-slide .v-god-witness-filter-label {
            color: rgba(212, 175, 55, 0.74) !important;
            font-family: 'Cinzel', serif !important;
            font-weight: 700 !important;
        }

        .v-atlas-slide .v-god-library-section > header.v-god-premium-section-header {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            gap: 24px !important;
            min-height: 96px;
            margin: 22px 0 18px !important;
            padding: 16px 28px 16px 34px !important;
            border: 1px solid rgba(212, 175, 55, 0.5) !important;
            border-radius: 18px !important;
            background:
                radial-gradient(circle at 5% 50%, rgba(125, 211, 252, 0.24), transparent 17%),
                radial-gradient(circle at 38% 0%, rgba(255, 249, 236, 0.13), transparent 28%),
                linear-gradient(90deg, rgba(6, 22, 44, 0.97), rgba(15, 54, 104, 0.92) 46%, rgba(6, 22, 44, 0.98)) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 249, 236, 0.12),
                inset 0 -1px 0 rgba(212, 175, 55, 0.16),
                0 0 0 1px rgba(125, 211, 252, 0.05),
                0 0 22px rgba(212, 175, 55, 0.15),
                0 22px 48px rgba(0, 0, 0, 0.26) !important;
            overflow: hidden;
            position: relative;
        }

        .v-atlas-slide .v-god-library-section > header.v-god-premium-section-header::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent),
                radial-gradient(circle at 7% 50%, rgba(125, 211, 252, 0.34), transparent 13%);
            opacity: 0.72;
            pointer-events: none;
        }

        .v-atlas-slide .v-god-section-heading,
        .v-atlas-slide .v-god-section-actions {
            position: relative;
            z-index: 1;
        }

        .v-atlas-slide .v-god-section-heading {
            display: grid;
            grid-template-columns: 78px minmax(0, 1fr);
            align-items: center;
            gap: 24px;
            min-width: 0;
        }

        .v-atlas-slide .v-god-section-icon {
            width: 72px;
            height: 72px;
            display: grid;
            place-items: center;
            border: 2px solid rgba(242, 199, 95, 0.86);
            border-radius: 50%;
            color: #f0c35e;
            background:
                radial-gradient(circle at 50% 42%, rgba(255, 249, 236, 0.2), transparent 33%),
                radial-gradient(circle at 50% 50%, rgba(37, 99, 235, 0.2), transparent 70%),
                rgba(7, 20, 37, 0.74);
            box-shadow:
                0 0 0 5px rgba(212, 175, 55, 0.08),
                0 0 28px rgba(125, 211, 252, 0.28),
                inset 0 0 22px rgba(212, 175, 55, 0.16);
        }

        .v-atlas-slide .v-god-section-icon svg {
            width: 42px;
            height: 42px;
            filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.42));
        }

        .v-atlas-slide .v-god-library-section .v-god-premium-section-header h4 {
            margin: 0 !important;
            color: #fff7df !important;
            font-family: 'Cinzel', 'Cormorant Garamond', Georgia, serif !important;
            font-size: clamp(1.2rem, 2vw, 1.62rem) !important;
            font-weight: 800 !important;
            letter-spacing: 0.045em !important;
            line-height: 1.1 !important;
            text-transform: uppercase !important;
            text-shadow:
                0 0 18px rgba(212, 175, 55, 0.22),
                0 2px 14px rgba(0, 0, 0, 0.28) !important;
        }

        .v-atlas-slide .v-god-library-section .v-god-premium-section-header h4::before {
            content: none !important;
        }

        .v-atlas-slide .v-god-section-heading p {
            margin: 8px 0 0;
            color: rgba(222, 235, 255, 0.84);
            font-family: 'Inter', system-ui, sans-serif;
            font-size: clamp(0.84rem, 1.15vw, 1rem);
            font-weight: 500;
            letter-spacing: 0;
            line-height: 1.45;
        }

        .v-atlas-slide .v-god-premium-section-header .v-god-section-actions {
            display: inline-flex !important;
            align-items: center !important;
            gap: 12px !important;
            flex: 0 0 auto;
        }

        .v-atlas-slide .v-god-premium-section-header .v-god-section-actions span {
            color: #f2c75f !important;
            font-family: 'Cinzel', serif !important;
            font-size: 0.9rem !important;
            font-weight: 800 !important;
            letter-spacing: 0.06em !important;
            white-space: nowrap;
            text-shadow: 0 0 14px rgba(212, 175, 55, 0.2);
        }

        .v-atlas-slide .v-god-premium-section-header .v-god-scroll-btn {
            width: 40px;
            height: 40px;
            display: inline-flex !important;
            flex: 0 0 40px;
            align-items: center;
            justify-content: center;
            min-width: 40px;
            border: 1px solid rgba(212, 175, 55, 0.28);
            color: #f2c75f;
            background:
                radial-gradient(circle at 50% 0%, rgba(255, 249, 236, 0.1), transparent 64%),
                rgba(9, 25, 48, 0.78);
            box-shadow:
                inset 0 1px 0 rgba(255, 249, 236, 0.08),
                0 10px 26px rgba(0, 0, 0, 0.22);
            opacity: 1 !important;
            visibility: visible !important;
        }

        .v-atlas-slide .v-god-premium-section-header--major .v-god-section-icon {
            color: #fff0b8;
            border-color: rgba(242, 199, 95, 0.92);
            background:
                radial-gradient(circle at 50% 50%, rgba(255, 249, 236, 0.28), transparent 24%),
                radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.18), transparent 68%),
                rgba(7, 20, 37, 0.76);
        }

        .v-atlas-slide .v-god-premium-section-header--witness .v-god-section-icon {
            color: #dbeafe;
            border-color: rgba(147, 197, 253, 0.75);
            box-shadow:
                0 0 0 5px rgba(147, 197, 253, 0.07),
                0 0 28px rgba(125, 211, 252, 0.25),
                inset 0 0 22px rgba(212, 175, 55, 0.12);
        }

        @media (max-width: 768px) {
            .v-atlas-slide .v-god-library-section > header.v-god-premium-section-header {
                align-items: flex-start !important;
                gap: 12px !important;
                min-height: 0;
                padding: 14px 14px !important;
                border-radius: 16px !important;
            }

            .v-atlas-slide .v-god-section-heading {
                grid-template-columns: 54px minmax(0, 1fr);
                gap: 12px;
            }

            .v-atlas-slide .v-god-section-icon {
                width: 52px;
                height: 52px;
            }

            .v-atlas-slide .v-god-section-icon svg {
                width: 30px;
                height: 30px;
            }

            .v-atlas-slide .v-god-library-section .v-god-premium-section-header h4 {
                font-size: 0.96rem !important;
                letter-spacing: 0.04em !important;
            }

            .v-atlas-slide .v-god-section-heading p {
                font-size: 0.74rem;
                line-height: 1.3;
            }

            .v-atlas-slide .v-god-premium-section-header .v-god-section-actions {
                gap: 6px !important;
            }

            .v-atlas-slide .v-god-premium-section-header .v-god-section-actions span {
                font-size: 0.66rem !important;
            }

            .v-atlas-slide .v-god-premium-section-header .v-god-scroll-btn {
                width: 30px;
                height: 30px;
                font-size: 1.1rem;
            }
        }

        .v-atlas-slide .v-god-domain-tab,
        .v-atlas-slide .v-god-journey-ribbon button,
        .v-atlas-slide .v-god-category-filter button,
        .v-atlas-slide .v-god-witness-mood-filter button {
            background: rgba(6, 18, 37, 0.76) !important;
            border: 1px solid rgba(212, 175, 55, 0.24) !important;
            color: rgba(255, 249, 236, 0.78) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 249, 236, 0.04),
                0 10px 24px rgba(0, 0, 0, 0.12) !important;
        }

        .v-atlas-slide .v-god-domain-tab:hover,
        .v-atlas-slide .v-god-domain-tab.active,
        .v-atlas-slide .v-god-journey-ribbon button.active,
        .v-atlas-slide .v-god-category-filter button.active,
        .v-atlas-slide .v-god-witness-mood-filter button.active,
        .v-atlas-slide .v-god-category-filter button:hover,
        .v-atlas-slide .v-god-witness-mood-filter button:hover {
            background:
                radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.22), transparent 64%),
                linear-gradient(180deg, rgba(12, 31, 58, 0.94), rgba(5, 15, 31, 0.96)) !important;
            border-color: rgba(212, 175, 55, 0.54) !important;
            color: var(--v-premium-title) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 249, 236, 0.08),
                0 0 0 1px rgba(212, 175, 55, 0.08),
                0 14px 30px rgba(0, 0, 0, 0.2),
                0 0 26px rgba(212, 175, 55, 0.12) !important;
        }

        .v-atlas-slide .v-god-domain-tab.active {
            color: #fff9ec !important;
            text-shadow: 0 0 14px rgba(212, 175, 55, 0.22) !important;
        }

        .v-atlas-slide .v-god-category-filter button em,
        .v-atlas-slide .v-god-witness-mood-filter button em {
            color: rgba(212, 175, 55, 0.78) !important;
        }

        .v-atlas-slide .v-god-major-card,
        .v-atlas-slide .v-god-witness-row-btn {
            border-color: rgba(212, 175, 55, 0.22) !important;
            background:
                radial-gradient(circle at 92% 16%, rgba(212, 175, 55, 0.06), transparent 30%),
                linear-gradient(145deg, rgba(7, 20, 42, 0.88), rgba(3, 11, 22, 0.96)) !important;
        }

        .v-atlas-slide .v-god-major-card.mood-cosmic {
            border-left-color: rgba(99, 102, 241, 0.55) !important;
        }
        .v-atlas-slide .v-god-major-card.mood-doctrinal {
            border-left-color: rgba(212, 175, 55, 0.58) !important;
        }
        .v-atlas-slide .v-god-major-card.mood-devotional {
            border-left-color: rgba(245, 158, 11, 0.58) !important;
        }
        .v-atlas-slide .v-god-major-card.mood-prophetic {
            border-left-color: rgba(168, 85, 247, 0.58) !important;
        }
        .v-atlas-slide .v-god-major-card.mood-contemplative {
            border-left-color: rgba(148, 163, 184, 0.58) !important;
        }
        .v-atlas-slide .v-god-major-card.mood-practical {
            border-left-color: rgba(194, 120, 76, 0.58) !important;
        }
        .v-atlas-slide .v-god-major-card.mood-redemptive {
            border-left-color: rgba(190, 72, 72, 0.58) !important;
        }
        .v-atlas-slide .v-god-major-card.mood-triumphant {
            border-left-color: rgba(250, 204, 21, 0.58) !important;
        }

        .v-atlas-slide .v-god-witness-mood-tag,
        .v-atlas-slide .v-god-witness-mood-tag[class*="mood-"] {
            background: rgba(212, 175, 55, 0.09) !important;
            border: 1px solid rgba(212, 175, 55, 0.3) !important;
            color: rgba(255, 249, 236, 0.82) !important;
            box-shadow: inset 0 1px 0 rgba(255, 249, 236, 0.04) !important;
        }

        .v-atlas-slide .v-god-witness-mood-tag.mood-cosmic {
            background: rgba(99, 102, 241, 0.12) !important;
            border-color: rgba(99, 102, 241, 0.3) !important;
            color: #818cf8 !important;
        }
        .v-atlas-slide .v-god-witness-mood-tag.mood-doctrinal {
            background: rgba(91, 126, 216, 0.12) !important;
            border-color: rgba(91, 126, 216, 0.3) !important;
            color: #7ba2ff !important;
        }
        .v-atlas-slide .v-god-witness-mood-tag.mood-devotional {
            background: rgba(212, 107, 95, 0.12) !important;
            border-color: rgba(212, 107, 95, 0.3) !important;
            color: #ff8e82 !important;
        }
        .v-atlas-slide .v-god-witness-mood-tag.mood-prophetic {
            background: rgba(168, 85, 247, 0.12) !important;
            border-color: rgba(168, 85, 247, 0.3) !important;
            color: #c084fc !important;
        }
        .v-atlas-slide .v-god-witness-mood-tag.mood-contemplative {
            background: rgba(148, 163, 184, 0.12) !important;
            border-color: rgba(148, 163, 184, 0.3) !important;
            color: #94a3b8 !important;
        }
        .v-atlas-slide .v-god-witness-mood-tag.mood-practical {
            background: rgba(194, 120, 76, 0.12) !important;
            border-color: rgba(194, 120, 76, 0.3) !important;
            color: #ee8844 !important;
        }
        .v-atlas-slide .v-god-witness-mood-tag.mood-redemptive {
            background: rgba(190, 72, 72, 0.12) !important;
            border-color: rgba(190, 72, 72, 0.3) !important;
            color: #f87171 !important;
        }
        .v-atlas-slide .v-god-witness-mood-tag.mood-triumphant {
            background: rgba(250, 204, 21, 0.12) !important;
            border-color: rgba(250, 204, 21, 0.3) !important;
            color: #facc15 !important;
        }
        .v-atlas-slide .v-god-witness-mood-tag.mood-covenantal {
            background: rgba(116, 168, 111, 0.12) !important;
            border-color: rgba(116, 168, 111, 0.3) !important;
            color: #8ee288 !important;
        }
        .v-atlas-slide .v-god-witness-mood-tag.mood-experiential {
            background: rgba(216, 168, 63, 0.12) !important;
            border-color: rgba(216, 168, 63, 0.3) !important;
            color: #ffd166 !important;
        }

        .v-atlas-slide .v-architecture-ref-token.ot,
        .v-atlas-slide .v-architecture-ref-token,
        .v-atlas-slide .v-architecture-meta-pill {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            min-height: 24px !important;
            padding: 0.18rem 0.58rem !important;
            font-size: 0.65rem !important;
            font-weight: 700 !important;
            letter-spacing: 0.06em !important;
            text-transform: uppercase !important;
            background: rgba(7, 24, 48, 0.55) !important;
            border: 1px solid rgba(218, 177, 80, 0.22) !important;
            color: rgba(218, 177, 80, 0.72) !important;
            border-radius: 999px !important;
            box-shadow: none !important;
            transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.16s ease !important;
        }

        .v-atlas-slide .v-architecture-meta-pill.mood-cosmic {
            background: rgba(99, 102, 241, 0.12) !important;
            border-color: rgba(99, 102, 241, 0.3) !important;
            color: #818cf8 !important;
        }
        .v-atlas-slide .v-architecture-meta-pill.mood-doctrinal {
            background: rgba(91, 126, 216, 0.12) !important;
            border-color: rgba(91, 126, 216, 0.3) !important;
            color: #7ba2ff !important;
        }
        .v-atlas-slide .v-architecture-meta-pill.mood-devotional {
            background: rgba(212, 107, 95, 0.12) !important;
            border-color: rgba(212, 107, 95, 0.3) !important;
            color: #ff8e82 !important;
        }
        .v-atlas-slide .v-architecture-meta-pill.mood-prophetic {
            background: rgba(168, 85, 247, 0.12) !important;
            border-color: rgba(168, 85, 247, 0.3) !important;
            color: #c084fc !important;
        }
        .v-atlas-slide .v-architecture-meta-pill.mood-contemplative {
            background: rgba(148, 163, 184, 0.12) !important;
            border-color: rgba(148, 163, 184, 0.3) !important;
            color: #94a3b8 !important;
        }
        .v-atlas-slide .v-architecture-meta-pill.mood-practical {
            background: rgba(194, 120, 76, 0.12) !important;
            border-color: rgba(194, 120, 76, 0.3) !important;
            color: #ee8844 !important;
        }
        .v-atlas-slide .v-architecture-meta-pill.mood-redemptive {
            background: rgba(190, 72, 72, 0.12) !important;
            border-color: rgba(190, 72, 72, 0.3) !important;
            color: #f87171 !important;
        }
        .v-atlas-slide .v-architecture-meta-pill.mood-triumphant {
            background: rgba(250, 204, 21, 0.12) !important;
            border-color: rgba(250, 204, 21, 0.3) !important;
            color: #facc15 !important;
        }
        .v-atlas-slide .v-architecture-meta-pill.mood-covenantal {
            background: rgba(116, 168, 111, 0.12) !important;
            border-color: rgba(116, 168, 111, 0.3) !important;
            color: #8ee288 !important;
        }
        .v-atlas-slide .v-architecture-meta-pill.mood-experiential {
            background: rgba(216, 168, 63, 0.12) !important;
            border-color: rgba(216, 168, 63, 0.3) !important;
            color: #ffd166 !important;
        }

        .v-atlas-slide .v-architecture-ref-token:hover {
            background: rgba(9, 28, 56, 0.78) !important;
            border-color: rgba(218, 177, 80, 0.50) !important;
            color: #f3deaa !important;
            transform: translateY(-1px) !important;
        }

        .v-atlas-slide .v-stat-mood,
        .v-atlas-slide .v-god-topic-stats strong,
        .v-atlas-slide .v-stat-num,
        .v-atlas-slide .v-god-topic-orb span {
            color: var(--v-premium-gold) !important;
            text-shadow: 0 0 20px rgba(212, 175, 55, 0.24) !important;
        }

        /* Section 07 premium devotional typography lock. */
        .v-atlas-slide .v-god-domain-summary,
        .v-atlas-slide .v-god-domain-summary-card-text,
        .v-atlas-slide .v-god-topic-hero-copy p,
        .v-atlas-slide .v-god-topic-hero blockquote,
        .v-atlas-slide .v-god-card-summary,
        .v-atlas-slide .v-god-domain-topic-card-description,
        .v-atlas-slide .v-god-witness-text,
        .v-atlas-slide .v-god-witness-node span:not(.v-god-witness-dot),
        .v-atlas-slide .v-god-witness-drawer-verse-body,
        .v-atlas-slide .v-god-domain-constellation-subtitle,
        .v-atlas-slide .v-god-domain-constellation-panel-list li,
        .v-atlas-slide .v-architecture-topic-intro,
        .v-atlas-slide .v-architecture-category-description,
        .v-atlas-slide .v-architecture-domain-header p,
        .v-atlas-slide .v-architecture-journey-card p,
        .v-atlas-slide .v-architecture-domain-card p,
        .v-atlas-slide .v-architecture-item-card p,
        .v-atlas-slide .v-architecture-major-card p,
        .v-atlas-slide .v-architecture-details-content p,
        .v-atlas-slide .v-architecture-theological-insight p {
            color: rgba(255, 249, 236, 0.82) !important;
            font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif !important;
            font-size: 1.12rem !important;
            font-weight: 400 !important;
            line-height: 1.7 !important;
            letter-spacing: 0 !important;
        }

        .v-atlas-slide .v-god-card-summary {
            margin: 12px 0 14px !important;
            padding: 10px 14px !important;
            border-left: 2px solid rgba(212, 175, 55, 0.34) !important;
            background: rgba(255, 249, 236, 0.025) !important;
        }

        .v-atlas-slide .v-god-major-card h5,
        .v-atlas-slide .v-god-domain-topic-card-title,
        .v-atlas-slide .v-god-topic-hero-copy h4,
        .v-atlas-slide .v-god-domain-constellation-title,
        .v-atlas-slide .v-architecture-item-card h5,
        .v-atlas-slide .v-architecture-major-card h5,
        .v-atlas-slide .v-architecture-topic-title,
        .v-atlas-slide .v-architecture-category-title {
            color: #fff9ec !important;
            font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif !important;
            font-size: 1.48rem !important;
            font-weight: 600 !important;
            line-height: 1.34 !important;
            letter-spacing: 0.01em !important;
            text-shadow: 0 2px 18px rgba(0, 0, 0, 0.32) !important;
        }

        .v-atlas-slide .v-god-topic-hero-copy h3 {
            font-family: 'Cinzel', 'Cormorant Garamond', serif !important;
            font-weight: 600 !important;
            letter-spacing: 0.08em !important;
        }

        @media (min-width: 769px) {
            .v-atlas-slide .v-god-library-section .v-god-major-card h5 {
                margin: 14px 0 14px !important;
                color: rgba(255, 249, 236, 0.94) !important;
                font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif !important;
                font-size: clamp(1.22rem, 1.08vw, 1.42rem) !important;
                font-weight: 500 !important;
                line-height: 1.46 !important;
                letter-spacing: 0 !important;
                text-shadow: 0 2px 18px rgba(0, 0, 0, 0.28) !important;
            }
        }

        .v-atlas-slide .v-god-major-eyebrow,
        .v-atlas-slide .v-god-card-explore-btn,
        .v-atlas-slide .v-god-witness-ref,
        .v-atlas-slide .v-god-topic-hero cite,
        .v-atlas-slide .v-god-domain-summary-card-sub,
        .v-atlas-slide .v-god-domain-constellation-side-panel h3,
        .v-atlas-slide .v-architecture-major-eyebrow,
        .v-atlas-slide .v-architecture-category-number {
            color: rgba(212, 175, 55, 0.86) !important;
            font-family: 'Cinzel', serif !important;
            font-weight: 700 !important;
        }

        .v-atlas-slide .v-god-witness-row-btn {
            padding: 17px 24px !important;
            min-height: 58px !important;
        }

        .v-atlas-slide .v-god-witness-text {
            color: rgba(255, 249, 236, 0.9) !important;
            font-size: 1.08rem !important;
            font-weight: 500 !important;
        }

        .v-atlas-slide .v-god-domain-topic-card-description,
        .v-atlas-slide .v-architecture-category-description {
            font-size: 1.04rem !important;
        }

        .v-atlas-slide .v-architecture-entry-grid li,
        .v-atlas-slide .v-architecture-entry-grid.dense li {
            color: rgba(255, 249, 236, 0.8) !important;
            font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif !important;
            font-size: 1.02rem !important;
            font-weight: 400 !important;
            line-height: 1.62 !important;
        }

        /* Section 07 Atlas intro domains: no Trinity cards, two-column desktop grid. */
        .v-atlas-slide .v-atlas-intro {
            width: min(100%, 1120px) !important;
            max-width: 1120px !important;
            margin: 0 auto 22px !important;
            padding-inline: 18px !important;
        }

        .v-atlas-slide .v-atlas-intro-divider {
            margin: 0 0 12px !important;
        }

        .v-atlas-slide .v-atlas-levels {
            margin: 0 0 24px !important;
            gap: 0.65rem 0.85rem !important;
        }

        .v-atlas-slide .v-atlas-level-badge {
            min-height: 32px !important;
            padding: 0.38rem 0.92rem !important;
            border-color: rgba(212, 175, 55, 0.3) !important;
            background: rgba(212, 175, 55, 0.09) !important;
            color: rgba(255, 249, 236, 0.82) !important;
            font-family: 'Cinzel', serif !important;
            font-size: 0.68rem !important;
            letter-spacing: 0.08em !important;
        }

        .v-atlas-slide .v-atlas-chapters {
            display: grid !important;
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            align-items: stretch !important;
            gap: 18px 20px !important;
            width: 100% !important;
        }

        .v-atlas-slide .v-atlas-chapter {
            display: block !important;
            width: 100% !important;
            min-width: 0 !important;
        }

        .v-atlas-slide .v-atlas-chapter-stem {
            display: none !important;
        }

        .v-atlas-slide .v-atlas-chapter-inner {
            height: 100% !important;
            min-height: 148px !important;
            align-items: flex-start !important;
            padding: 24px 26px !important;
            border-radius: 14px !important;
            transform: none !important;
        }

        .v-atlas-slide .v-atlas-chapter:hover .v-atlas-chapter-inner,
        .v-atlas-slide .v-atlas-chapter.active .v-atlas-chapter-inner {
            transform: translateY(-2px) !important;
        }

        .v-atlas-slide .v-atlas-chapter-num {
            width: 44px !important;
            padding-top: 2px !important;
            color: rgba(212, 175, 55, 0.72) !important;
        }

        .v-atlas-slide .v-atlas-chapter-name {
            margin-bottom: 8px !important;
            color: #fff9ec !important;
            font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif !important;
            font-size: 1.18rem !important;
            font-weight: 600 !important;
            letter-spacing: 0.01em !important;
            text-transform: none !important;
        }

        .v-atlas-slide .v-atlas-chapter-body {
            display: flex !important;
            flex-direction: column !important;
            align-self: stretch !important;
        }

        .v-atlas-slide .v-atlas-chapter-purpose {
            display: block !important;
            margin-bottom: 12px !important;
            color: rgba(255, 249, 236, 0.8) !important;
            font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif !important;
            font-size: 1.06rem !important;
            line-height: 1.55 !important;
            font-style: italic !important;
            font-weight: 400 !important;
        }

        .v-atlas-slide .v-atlas-chapter-topics {
            margin-top: auto !important;
            gap: 9px !important;
            flex-wrap: wrap !important;
        }

        .v-atlas-slide .v-atlas-chapter-topic {
            cursor: pointer !important;
            pointer-events: auto !important;
            user-select: none !important;
            appearance: none !important;
            -webkit-appearance: none !important;
            min-height: 26px !important;
            padding: 0.22rem 0.65rem !important;
            font-family: 'Cinzel', serif !important;
            font-size: 0.68rem !important;
            font-weight: 700 !important;
            line-height: 1 !important;
            letter-spacing: 0.08em !important;
            text-transform: uppercase !important;
            background: rgba(7, 24, 48, 0.55) !important;
            border: 1px solid rgba(218, 177, 80, 0.22) !important;
            color: rgba(218, 177, 80, 0.72) !important;
            border-radius: 999px !important;
            transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.16s ease !important;
        }

        .v-atlas-slide .v-atlas-chapter-topic:hover,
        .v-atlas-slide .v-atlas-chapter-topic:focus-visible {
            background: rgba(9, 28, 56, 0.78) !important;
            border-color: rgba(218, 177, 80, 0.50) !important;
            color: #f3deaa !important;
            transform: translateY(-1px) !important;
        }

        .v-atlas-slide .v-atlas-chapter-topic.active {
            background: linear-gradient(180deg, rgba(216, 180, 90, 0.32), rgba(212, 175, 55, 0.18)) !important;
            border-color: rgba(218, 177, 80, 0.92) !important;
            color: #fff5d0 !important;
            box-shadow:
                0 0 0 1px rgba(218, 177, 80, 0.55),
                0 8px 24px rgba(216, 180, 90, 0.22),
                inset 0 1px 0 rgba(255, 240, 200, 0.22) !important;
            transform: none !important;
        }

        .v-atlas-slide .v-god-major-card {
            display: flex !important;
            flex-direction: column !important;
            align-items: stretch !important;
            min-height: 340px !important;
            padding: 30px 30px 28px !important;
            border-radius: 14px !important;
            background:
                radial-gradient(circle at 92% 18%, rgba(212, 175, 55, 0.08), transparent 30%),
                linear-gradient(145deg, rgba(7, 20, 42, 0.9), rgba(3, 11, 22, 0.97)) !important;
        }

        .v-atlas-slide .v-god-major-eyebrow {
            display: block !important;
            margin-bottom: 20px !important;
            font-size: 0.78rem !important;
            letter-spacing: 0.18em !important;
        }

        .v-atlas-slide .v-god-major-card h5 {
            margin: 0 0 18px !important;
            color: rgba(255, 249, 236, 0.94) !important;
            font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif !important;
            font-size: clamp(1.22rem, 1.08vw, 1.42rem) !important;
            font-weight: 500 !important;
            line-height: 1.46 !important;
            letter-spacing: 0 !important;
            text-shadow: 0 2px 18px rgba(0, 0, 0, 0.28) !important;
        }

        .v-atlas-slide .v-god-card-summary {
            margin: 18px 0 18px !important;
            padding: 0 !important;
            border-left: 0 !important;
            background: transparent !important;
            color: rgba(255, 249, 236, 0.82) !important;
            font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif !important;
            font-size: 1.2rem !important;
            line-height: 1.68 !important;
        }

        .v-atlas-slide .v-god-major-rule {
            width: 34px !important;
            margin: 0 0 18px !important;
            background: rgba(212, 175, 55, 0.86) !important;
        }

        .v-atlas-slide .v-god-card-ref-row {
            margin-top: auto !important;
            display: flex !important;
            flex-wrap: wrap !important;
            gap: 9px !important;
        }

        .v-atlas-slide .v-god-major-tags {
            margin-top: 12px !important;
            display: flex !important;
            flex-wrap: wrap !important;
            gap: 9px !important;
        }

        .v-atlas-slide .v-god-card-explore-btn {
            align-self: flex-start !important;
            justify-content: flex-start !important;
            text-align: left !important;
            margin-top: 13px !important;
            font-size: 0.78rem !important;
            letter-spacing: 0.14em !important;
        }

        @media (max-width: 899px) {
            .v-atlas-slide .v-atlas-chapters {
                grid-template-columns: 1fr !important;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .v-s02-slide *,
            .v-s03-slide *,
            .v-s04-slide *,
            .v-s06-slide *,
            .v-atlas-slide *,
            .v-architecture-slide * {
                animation-duration: 0.001ms !important;
                transition-duration: 0.001ms !important;
            }
        }

        /* -------------------------------------------------------------------------
           PREMIUM THEOLOGICAL TOPIC VISUALIZATION MODAL
           ------------------------------------------------------------------------- */
        .v-architecture-popup {
            padding: clamp(16px, 3vw, 28px) !important;
            font-family: var(--font-ui) !important;
        }

        .v-architecture-popup-scrim {
            background:
                radial-gradient(circle at 50% 18%, rgba(234, 215, 173, 0.075), transparent 34%),
                rgba(1, 7, 16, 0.82) !important;
            backdrop-filter: blur(8px) saturate(1.02) !important;
            -webkit-backdrop-filter: blur(8px) saturate(1.02) !important;
        }

        .v-architecture-popup-panel {
            width: 100% !important;
            max-width: min(1120px, 92vw) !important;
            max-height: min(94svh, 900px) !important;
            padding: clamp(24px, 3vw, 42px) !important;
            border: 1px solid rgba(234, 215, 173, 0.18) !important;
            border-radius: 28px !important;
            background:
                linear-gradient(180deg, rgba(14, 24, 36, 0.94), rgba(5, 13, 25, 0.96)) !important;
            box-shadow:
                0 40px 120px rgba(0, 0, 0, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
            scrollbar-width: thin;
            scrollbar-color: rgba(234, 215, 173, 0.28) transparent;
        }

        .v-architecture-popup-panel::-webkit-scrollbar {
            width: 9px;
        }

        .v-architecture-popup-panel::-webkit-scrollbar-thumb {
            border-radius: 999px;
            background: rgba(234, 215, 173, 0.22);
        }

        .v-architecture-popup-close {
            top: clamp(14px, 2vw, 24px) !important;
            right: clamp(14px, 2vw, 24px) !important;
            width: 42px !important;
            height: 42px !important;
            border: 1px solid rgba(234, 215, 173, 0.22) !important;
            background: rgba(234, 215, 173, 0.08) !important;
            color: #ead7ad !important;
            font-family: var(--font-ui) !important;
            font-size: 24px !important;
            box-shadow:
                0 12px 30px rgba(0, 0, 0, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
        }

        .v-architecture-popup-close:hover {
            background: rgba(234, 215, 173, 0.14) !important;
            border-color: rgba(234, 215, 173, 0.34) !important;
        }

        .v-architecture-popup-body {
            padding-right: 0 !important;
        }

        .v-architecture-popup .v-architecture-details-header {
            display: flex !important;
            flex-wrap: wrap !important;
            align-items: center !important;
            gap: 12px !important;
            margin-bottom: 0 !important;
            padding: 0 56px 16px 0 !important;
            border-bottom: 1px solid rgba(234, 215, 173, 0.14) !important;
        }

        .v-architecture-popup .v-architecture-category,
        .v-architecture-popup .v-god-witness-mood-tag {
            display: inline-flex !important;
            align-items: center !important;
            width: auto !important;
            min-height: 30px !important;
            padding: 6px 12px !important;
            border-radius: 999px !important;
            font-family: var(--font-ui) !important;
            font-size: var(--text-xs) !important;
            font-weight: 700 !important;
            letter-spacing: 0.13em !important;
            line-height: 1 !important;
            text-transform: uppercase !important;
        }

        .v-architecture-popup .v-architecture-category {
            color: #c99a4f !important;
            background: rgba(201, 154, 79, 0.1) !important;
            border: 1px solid rgba(201, 154, 79, 0.22) !important;
        }

        .v-architecture-popup .v-god-witness-mood-tag {
            margin-left: auto !important;
            color: #9dbbff !important;
            background: rgba(81, 120, 210, 0.14) !important;
            border: 1px solid rgba(119, 151, 230, 0.25) !important;
            box-shadow: none !important;
        }

        .v-architecture-popup .v-architecture-era-marker {
            margin: clamp(16px, 2vw, 26px) 0 12px !important;
            color: #d4aa5f !important;
            font-family: var(--font-ui) !important;
            font-size: var(--text-xs) !important;
            font-weight: 800 !important;
            letter-spacing: 0.16em !important;
        }

        .v-architecture-popup .v-architecture-era-marker::after {
            background: linear-gradient(90deg, rgba(212, 170, 95, 0.58), transparent) !important;
        }

        .v-architecture-popup .v-architecture-details-content h5 {
            max-width: min(34ch, 100%) !important;
            margin: 0 0 clamp(16px, 1.8vw, 24px) !important;
            color: #ead7ad !important;
            background: none !important;
            -webkit-background-clip: initial !important;
            background-clip: initial !important;
            -webkit-text-fill-color: currentColor !important;
            font-family: var(--font-scripture) !important;
            font-size: clamp(30px, 2.25vw, 42px) !important;
            font-weight: 500 !important;
            line-height: var(--display-line-height) !important;
            letter-spacing: -0.015em !important;
            text-shadow: none !important;
        }

        .v-architecture-popup .v-architecture-details-content h5::before {
            display: none !important;
        }

        .v-architecture-popup .v-architecture-theological-insight {
            margin: 0 0 clamp(16px, 2vw, 24px) !important;
            padding: clamp(14px, 1.7vw, 20px) !important;
            border: 1px solid rgba(234, 215, 173, 0.12) !important;
            border-radius: 18px !important;
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.028)) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.07),
                0 16px 40px rgba(0, 0, 0, 0.22) !important;
        }

        .v-architecture-popup .v-architecture-theological-insight > span,
        .v-architecture-popup .v-architecture-primary-witness > span:first-child,
        .v-architecture-popup .v-architecture-chip-row > span:first-child,
        .v-architecture-popup .v-architecture-witness-role > span:first-child {
            color: rgba(234, 215, 173, 0.58) !important;
            font-family: var(--font-ui) !important;
            font-size: var(--text-xs) !important;
            font-weight: 700 !important;
            letter-spacing: 0.13em !important;
            line-height: 1.2 !important;
            text-transform: uppercase !important;
        }

        .v-architecture-popup .v-architecture-theological-insight p {
            margin-top: 10px !important;
            color: rgba(244, 232, 206, 0.88) !important;
            font-family: var(--font-reading) !important;
            font-size: clamp(16px, 0.86vw, 18px) !important;
            font-weight: 400 !important;
            line-height: 1.55 !important;
        }

        .v-architecture-popup .v-architecture-study-capsules {
            gap: 10px !important;
            margin: 0 0 clamp(16px, 2vw, 24px) !important;
        }

        .v-architecture-popup .v-architecture-study-capsule {
            min-height: 32px !important;
            padding: 7px 13px !important;
            border: 1px solid rgba(132, 163, 230, 0.28) !important;
            border-radius: 999px !important;
            color: #9dbbff !important;
            background: rgba(71, 106, 180, 0.18) !important;
            box-shadow: none !important;
            font-family: var(--font-ui) !important;
            font-size: var(--text-sm) !important;
            font-weight: 700 !important;
            letter-spacing: 0.08em !important;
            line-height: 1 !important;
            text-transform: uppercase !important;
        }

        .v-architecture-popup .v-architecture-primary-witness,
        .v-architecture-popup .v-architecture-chip-row {
            display: flex !important;
            flex-wrap: wrap !important;
            align-items: center !important;
            gap: 10px 12px !important;
            margin-top: 10px !important;
            opacity: 1 !important;
        }

        .v-architecture-popup .v-architecture-primary-witness {
            display: grid !important;
            grid-template-columns: max-content minmax(0, 1fr) !important;
            gap: 9px 12px !important;
            align-items: center !important;
        }

        .v-architecture-popup .v-theological-commentary-trigger {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 10px !important;
            justify-self: end !important;
            min-height: 38px !important;
            padding: 8px 18px !important;
            border: 1px solid rgba(212, 175, 55, 0.5) !important;
            border-radius: 999px !important;
            background: rgba(212, 175, 55, 0.12) !important;
            color: #ead7ad !important;
            box-shadow: 0 0 18px rgba(212, 175, 55, 0.12) !important;
            font-family: var(--font-ui) !important;
            font-size: var(--text-xs) !important;
            font-weight: 800 !important;
            letter-spacing: 0.14em !important;
            line-height: 1 !important;
            text-transform: uppercase !important;
            cursor: pointer !important;
        }

        .v-architecture-popup .v-theological-commentary-trigger:hover {
            border-color: rgba(234, 215, 173, 0.72) !important;
            background: rgba(212, 175, 55, 0.2) !important;
            color: #fff7df !important;
        }

        .v-architecture-popup .v-theological-commentary-trigger-arrow {
            transition: transform 0.18s ease;
        }

        .v-architecture-popup .v-theological-commentary-trigger:hover .v-theological-commentary-trigger-arrow {
            transform: translateX(3px);
        }

        .v-architecture-popup .v-architecture-primary-witness .v-architecture-ref-token,
        .v-architecture-popup .v-architecture-chip-row .v-architecture-theme-chip,
        .v-architecture-popup .v-architecture-journey-chip,
        .v-architecture-popup .v-architecture-muted {
            display: inline-flex !important;
            align-items: center !important;
            min-height: 28px !important;
            padding: 5px 10px !important;
            border: 1px solid rgba(234, 215, 173, 0.24) !important;
            border-radius: 999px !important;
            color: #ead7ad !important;
            background: rgba(234, 215, 173, 0.1) !important;
            font-family: var(--font-ui) !important;
            font-size: var(--text-xs) !important;
            font-weight: 700 !important;
            letter-spacing: 0.07em !important;
            line-height: 1 !important;
            text-transform: uppercase !important;
        }

        .v-architecture-popup .v-architecture-witness-list {
            gap: clamp(16px, 2.2vw, 26px) !important;
            margin-top: clamp(18px, 2.2vw, 28px) !important;
            padding-top: clamp(16px, 2vw, 24px) !important;
            border-top: 1px solid rgba(234, 215, 173, 0.14) !important;
        }

        .v-architecture-popup .v-architecture-witness-role {
            grid-template-columns: 142px minmax(0, 1fr) !important;
            gap: clamp(14px, 1.8vw, 22px) !important;
        }

        .v-architecture-popup .v-architecture-witness-role > span:first-child {
            padding-top: 10px !important;
            color: #d4aa5f !important;
            font-weight: 800 !important;
            letter-spacing: 0.16em !important;
        }

        .v-architecture-popup .v-architecture-token-group {
            gap: clamp(12px, 1.6vw, 18px) !important;
            padding-left: 28px !important;
        }

        .v-architecture-popup .v-architecture-token-group::before {
            left: 6px !important;
            background:
                linear-gradient(180deg, rgba(234, 215, 173, 0.1), rgba(234, 215, 173, 0.32), rgba(234, 215, 173, 0.1)) !important;
            box-shadow: none !important;
        }

        .v-architecture-popup-ref-card {
            gap: 10px !important;
            padding: clamp(16px, 2vw, 24px) !important;
            border: 1px solid rgba(234, 215, 173, 0.14) !important;
            border-radius: 18px !important;
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.08),
                0 18px 45px rgba(0, 0, 0, 0.28) !important;
        }

        .v-architecture-popup-ref-card::before {
            top: 23px !important;
            left: -29px !important;
            width: 14px !important;
            height: 14px !important;
            background: #d4aa5f !important;
            box-shadow:
                0 0 0 6px rgba(212, 170, 95, 0.1),
                0 0 24px rgba(212, 170, 95, 0.35) !important;
        }

        .v-architecture-popup-ref-card .v-architecture-ref-token {
            display: inline-flex !important;
            width: auto !important;
            max-width: 100% !important;
            align-self: flex-start !important;
            padding: 5px 10px !important;
            border: 1px solid rgba(234, 215, 173, 0.28) !important;
            border-radius: 999px !important;
            color: #ead7ad !important;
            background: rgba(234, 215, 173, 0.12) !important;
            box-shadow: none !important;
            font-family: var(--font-ui) !important;
            font-size: var(--text-xs) !important;
            font-weight: 800 !important;
            letter-spacing: 0.1em !important;
            line-height: 1 !important;
            text-decoration: none !important;
            white-space: nowrap !important;
        }

        .v-architecture-popup-ref-text {
            color: rgba(244, 232, 206, 0.88) !important;
            font-family: var(--font-reading) !important;
            font-size: clamp(16px, 0.9vw, 18px) !important;
            font-weight: 400 !important;
            line-height: 1.58 !important;
            letter-spacing: 0 !important;
        }

        .v-architecture-popup .v-architecture-primary-crossrefs {
            display: flex !important;
            grid-column: 1 / -1 !important;
            min-width: 0 !important;
        }

        .v-architecture-popup-ref-card > .v-architecture-primary-crossrefs {
            width: 100% !important;
            margin-top: 12px !important;
            padding-top: 12px !important;
            border-top: 1px solid rgba(234, 215, 173, 0.12) !important;
        }

        .v-architecture-popup-crossrefs {
            display: grid;
            grid-template-columns: max-content minmax(0, 1fr);
            flex-wrap: wrap;
            align-items: center;
            gap: 8px 10px;
            width: 100%;
            min-width: 0;
            margin-left: 0;
        }

        .v-architecture-popup-crossrefs > span {
            display: inline-flex;
            align-items: center;
            white-space: nowrap;
            color: rgba(234, 215, 173, 0.62);
            font-family: var(--font-ui);
            font-size: var(--text-xs);
            font-weight: 800;
            letter-spacing: 0.12em;
            line-height: 1.3;
            text-transform: uppercase;
        }

        .v-architecture-popup-crossrefs > div {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
            min-width: 0;
        }

        .v-architecture-popup-crossref-token,
        .v-architecture-popup-crossref-token.v-synthesis-ref-link {
            display: inline-flex !important;
            align-items: center;
            width: auto !important;
            max-width: 100% !important;
            min-height: 27px;
            padding: 5px 9px;
            border: 1px solid rgba(234, 215, 173, 0.24);
            border-radius: 999px;
            color: #ead7ad;
            background: rgba(234, 215, 173, 0.09);
            box-shadow: none !important;
            font-family: var(--font-ui);
            font-size: var(--text-xs);
            font-weight: 800;
            letter-spacing: 0.07em;
            line-height: 1;
            text-decoration: none !important;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .v-architecture-popup-crossref-token:hover,
        .v-architecture-popup-crossref-token.v-synthesis-ref-link:hover {
            border-color: rgba(234, 215, 173, 0.42);
            background: rgba(234, 215, 173, 0.14);
            color: #fff7df;
        }

        @media (max-width: 900px) {
            .v-architecture-popup-panel {
                max-width: 92vw !important;
                padding: 34px !important;
            }

            .v-architecture-popup .v-architecture-details-content h5 {
                max-width: 100% !important;
            }
        }

        @media (max-width: 640px) {
            .v-architecture-popup {
                align-items: flex-start !important;
                padding: 12px !important;
            }

            .v-architecture-popup-panel {
                width: 96vw !important;
                max-width: 96vw !important;
                max-height: calc(100svh - 24px) !important;
                padding: 22px !important;
                border-radius: 22px !important;
            }

            .v-architecture-popup-close {
                width: 36px !important;
                height: 36px !important;
                font-size: 21px !important;
            }

            .v-architecture-popup .v-architecture-details-header {
                flex-direction: column !important;
                align-items: flex-start !important;
                padding-right: 44px !important;
            }

            .v-architecture-popup .v-god-witness-mood-tag {
                margin-left: 0 !important;
            }

            .v-architecture-popup .v-architecture-details-content h5 {
                font-size: clamp(28px, 8vw, 36px) !important;
                line-height: 1.24 !important;
            }

            .v-architecture-popup .v-architecture-study-capsules,
            .v-architecture-popup .v-architecture-primary-witness,
            .v-architecture-popup .v-architecture-chip-row {
                gap: 8px !important;
            }

            .v-architecture-popup .v-architecture-primary-crossrefs,
            .v-architecture-popup-crossrefs {
                width: 100% !important;
                margin-left: 0 !important;
            }

            .v-architecture-popup .v-architecture-primary-witness,
            .v-architecture-popup-crossrefs {
                grid-template-columns: 1fr !important;
            }

            .v-architecture-popup .v-architecture-primary-crossrefs {
                grid-column: 1 / -1 !important;
            }

            .v-architecture-popup .v-architecture-witness-role {
                display: grid !important;
                grid-template-columns: 1fr !important;
                gap: 10px !important;
            }

            .v-architecture-popup .v-architecture-witness-role > span:first-child {
                padding-top: 0 !important;
            }

            .v-architecture-popup .v-architecture-token-group {
                padding-left: 0 !important;
            }

            .v-architecture-popup .v-architecture-token-group::before,
            .v-architecture-popup-ref-card::before {
                display: none !important;
            }

            .v-architecture-popup-ref-card {
                width: 100% !important;
            }

            .v-architecture-popup-ref-text {
                font-size: clamp(16px, 4.5vw, 18px) !important;
                line-height: 1.65 !important;
            }
        }

        /* -------------------------------------------------------------------------
           TABLET & MOBILE VIEWPORT RESPONSIVE STYLES
           ------------------------------------------------------------------------- */
        @media (min-width: 769px) and (max-width: 1024px) {
            .v-combined-headers {
                display: none !important;
            }
            .v-combined-row {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 20px !important;
                border: 1px solid rgba(212, 175, 55, 0.15) !important;
                padding: 16px !important;
                background: rgba(11, 25, 48, 0.25) !important;
                margin-bottom: 24px !important;
            }
            .v-combined-row-badge {
                display: block !important;
                grid-column: span 2 !important;
                font-family: 'Cinzel', serif !important;
                font-size: 12px !important;
                font-weight: 700 !important;
                color: #d4af37 !important;
                text-transform: uppercase !important;
                letter-spacing: 0.1em !important;
                border-bottom: 1px solid rgba(212, 175, 55, 0.15) !important;
                padding-bottom: 8px !important;
                margin-bottom: 8px !important;
                text-align: left !important;
            }
            .v-cell-header-mobile {
                display: block !important;
                font-size: 9.5px !important;
                font-weight: 700 !important;
                text-transform: uppercase !important;
                color: rgba(255, 255, 255, 0.5) !important;
                letter-spacing: 0.05em !important;
                margin-bottom: 8px !important;
                text-align: left !important;
            }
        }

        /* -------------------------------------------------------------------------
           MOBILE VIEWPORT RESPONSIVE STYLES
           ------------------------------------------------------------------------- */
        @media (max-width: 768px) {
            .visuals-dashboard {
                padding: 24px 16px;
                border-radius: 20px;
                min-height: auto;
            }

            .v-header {
                min-width: auto;
                flex-direction: column;
                gap: 16px;
                text-align: center;
                border-bottom: 1px solid rgba(212, 175, 55, 0.15);
                padding-bottom: 20px;
            }

            .v-header-left {
                justify-content: center;
            }

            .v-title {
                font-size: 1.8rem;
            }

            .v-subtitle {
                font-size: 0.95rem;
            }

            .v-header-right {
                max-width: 100%;
                text-align: center;
            }

            .v-quote-text, .v-quote-ref {
                text-align: center;
            }

            /* Convert grid layout into horizontal scroll columns on mobile */
            .v-grid-table {
                display: flex !important;
                flex-direction: row !important;
                overflow-x: auto !important;
                scroll-snap-type: x mandatory !important;
                gap: 20px !important;
                padding: 16px 4px 32px 4px !important;
                min-width: auto !important;
                background-image: none !important;
            }

            .v-row-label-cell {
                display: none !important;
            }

            .v-pillar-arrow {
                display: none !important;
            }

            /* Style group container as the unified Pillar Card */
            .v-pillar-group {
                display: flex !important;
                flex-direction: column !important;
                width: 290px !important;
                flex-shrink: 0 !important;
                scroll-snap-align: start !important;
                background: linear-gradient(180deg, rgba(11, 30, 58, 0.96) 0%, rgba(6, 19, 39, 0.98) 100%) !important;
                border: 1px solid rgba(212, 175, 55, 0.22) !important;
                border-radius: 24px !important;
                padding: 24px 20px !important;
                gap: 20px !important;
                box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5) !important;
            }

            .v-pillar-bg {
                display: none !important;
            }

            /* Reset grid layout properties of cell elements inside the card */
            .v-pillar-group > * {
                grid-column: auto !important;
                grid-row: auto !important;
                background: none !important;
                border: none !important;
                padding: 0 !important;
                min-height: auto !important;
                box-shadow: none !important;
                transform: none !important;
                text-align: left !important;
                align-items: flex-start !important;
            }

            /* Enable Mobile Labels inside cards */
            .v-mobile-label {
                display: block !important;
                font-size: 8.5px;
                font-weight: 700;
                color: #c9a46b;
                text-transform: uppercase;
                letter-spacing: 0.1em;
                margin-bottom: 6px;
            }

            .v-header-card {
                border-bottom: 1px solid rgba(212, 175, 55, 0.15) !important;
                border-radius: 0 !important;
                padding-bottom: 16px !important;
                margin-bottom: 4px !important;
                align-items: flex-start !important;
                width: 100% !important;
            }

            .v-header-name {
                font-size: 13px !important;
                text-align: left !important;
            }

            .v-quote {
                text-align: left !important;
            }

            /* Section 5 Grid Garden Mobile Responsive rules */
            .v-garden-container {
                padding: 18px 12px 28px !important;
                gap: 22px !important;
                border-radius: 20px !important;
            }

            .v-garden-scripture {
                font-size: 15px !important;
                line-height: 1.5 !important;
            }

            .v-garden-tree-orb {
                width: 140px !important;
                height: 122px !important;
            }

            .v-garden-tree-svg {
                width: 108px !important;
                height: 96px !important;
            }

            .v-fruit-journey {
                display: flex !important;
                flex-direction: column !important;
                gap: 18px !important;
                width: 100% !important;
            }

            .v-fruits-stack {
                display: flex !important;
                flex-direction: column !important;
                gap: 0 !important;
                overflow: visible !important;
                scroll-snap-type: none !important;
                padding: 8px 0 12px !important;
                width: 100% !important;
                box-sizing: border-box !important;
            }

            .v-fruit-card-pillar {
                scroll-snap-align: unset !important;
                width: 100% !important;
                min-height: 104px !important;
                flex-shrink: 1 !important;
                grid-template-columns: 28px 44px minmax(0, 1fr) !important;
                padding: 16px 14px !important;
                margin-top: var(--fruit-mobile-overlap) !important;
                transform: translateY(var(--fruit-mobile-y)) scale(var(--fruit-mobile-scale)) !important;
            }

            .v-fruit-card-pillar.active {
                transform: translateY(calc(var(--fruit-mobile-y) - 4px)) scale(1.015) !important;
            }

            .v-fruit-card-pillar:hover {
                transform: translateY(calc(var(--fruit-mobile-y) - 3px)) scale(1.012) !important;
            }

            .v-fruit-header-title {
                font-size: 16px !important;
            }

            .v-fruit-essence {
                font-size: 11.5px !important;
            }

            .v-fruit-scripture-chip {
                grid-column: 2 / 4 !important;
                font-size: 8px !important;
                padding: 4px 10px !important;
            }

            .v-fruit-reveal-stage {
                position: relative !important;
                top: auto !important;
                min-height: 0 !important;
                width: 100% !important;
            }

            .v-fruit-reveal-panel {
                min-height: 82vh !important;
                padding: 24px 18px !important;
                border-radius: 22px !important;
                transform-origin: center bottom !important;
            }

            .v-fruit-reveal-panel.active {
                animation: vSacredRevealMobile 0.72s cubic-bezier(0.16, 1, 0.3, 1) !important;
            }

            @keyframes vSacredRevealMobile {
                0% { opacity: 0; transform: translateY(28px) scale(0.97); filter: blur(7px); }
                100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
            }

            .v-reveal-hero {
                padding-right: 66px !important;
            }

            .v-reveal-title {
                font-size: 30px !important;
            }

            .v-reveal-scripture {
                font-size: 18px !important;
                padding: 18px 18px !important;
            }

            .v-reveal-map,
            .v-reflection-float-grid,
            .v-walk-steps {
                grid-template-columns: 1fr !important;
            }

            .v-reveal-map {
                display: block !important;
                flex: none !important;
                min-height: 0 !important;
            }

            .v-topic-scroll-box {
                flex: none !important;
                width: auto !important;
                max-height: 240px !important;
                min-height: 0 !important;
                padding: 13px 14px !important;
            }

            .v-reveal-transform {
                padding: 18px 14px !important;
                border-radius: 20px !important;
                gap: 14px !important;
            }

            .v-reflection-float-grid {
                gap: 12px !important;
            }

            .v-transform-card {
                min-height: 148px !important;
                padding: 17px 14px 15px !important;
            }

            .v-transform-card:hover,
            .v-transform-card:focus-visible {
                min-height: 232px !important;
            }

            .v-walk-practice-card {
                min-height: 174px !important;
                padding: 17px 14px 15px !important;
            }

            /* Pilgrimage Path mobile responsive scroll */
            .v-progression {
                min-width: auto;
                padding-top: 28px;
            }

            .v-progression-steps {
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                padding: 10px 4px 20px 4px;
                justify-content: flex-start;
            }

            .v-progression-steps::before {
                display: none;
            }

            .v-progression-step {
                scroll-snap-align: start;
                width: 240px;
                flex-shrink: 0;
            }

            /* Compress Visual Devotion Section Header timeline on mobile */
            .v-section-header-wrap {
                padding: 16px 20px !important;
                margin-bottom: 20px !important;
            }
            .v-section-header-wrap .v-atmos-sacred-geometry {
                width: 240px !important;
                height: 240px !important;
            }
            .v-section-header-timeline {
                max-width: 100% !important;
                margin-bottom: 16px !important;
                padding: 0 8px !important;
            }
            .v-sht-line, .v-sht-line-active {
                left: 20px !important;
                right: 20px !important;
                top: 70% !important;
            }
            .v-sht-step {
                width: auto !important;
            }
            .v-sht-name, .v-sht-micro {
                display: none !important;
            }
            .v-sht-num {
                font-size: 8.5px !important;
                margin-bottom: 2px !important;
            }
            .visual-section-selector {
                width: calc(100% - 32px) !important;
                margin: 16px auto 0 !important;
                padding: 4px 12px !important;
                border-radius: 999px !important;
            }
            .visual-section-selector .v-section-header-timeline {
                margin: 0 auto !important;
                padding: 0 8px !important;
                min-height: 44px !important;
            }
            .v-section-main-title {
                font-size: 1.45rem !important;
                line-height: 1.25 !important;
                hyphens: none !important;
                word-break: keep-all !important;
                overflow-wrap: break-word !important;
            }
            .v-section-spiritual-subtitle {
                font-size: 0.95rem !important;
            }
            .v-architecture-slide {
                padding: 22px 10px 34px !important;
                margin-top: 0 !important;
                margin-bottom: 0 !important;
            }
            .v-architecture-slide .v-section-header-wrap {
                padding: 22px 18px !important;
                margin-bottom: 18px !important;
            }
            .v-architecture-reading-column {
                width: min(100%, calc(100% - 4px)) !important;
                gap: 16px !important;
            }
            .v-architecture-domain-card {
                padding: 16px 14px !important;
                border-radius: 16px !important;
            }
            .v-architecture-domain-card h3 {
                font-size: 13px !important;
                letter-spacing: 0.07em !important;
            }
            .v-architecture-domain-card p {
                font-size: 11.5px !important;
                line-height: 1.55 !important;
            }
            .v-architecture-journeys {
                grid-template-columns: 1fr !important;
                gap: 10px !important;
            }
            .v-architecture-domain-header {
                padding: 16px 14px !important;
            }
            .v-architecture-domain-header h3 {
                font-size: 13px !important;
                letter-spacing: 0.06em !important;
            }
            .v-architecture-topic-summary {
                grid-template-columns: auto 1fr auto !important;
                gap: 10px !important;
                min-height: 64px !important;
                padding: 13px 14px !important;
            }
            .v-architecture-topic-number {
                width: 34px !important;
                height: 34px !important;
                font-size: 9px !important;
            }
            .v-architecture-topic-title,
            .v-architecture-topic.hero .v-architecture-topic-title {
                font-size: 11.5px !important;
                letter-spacing: 0.05em !important;
            }
            .v-architecture-topic-intro {
                font-size: 12.5px !important;
            }
            .v-architecture-topic-count {
                display: none !important;
            }
            .v-architecture-god-summary {
                grid-template-columns: auto 1fr auto !important;
                gap: 10px !important;
                min-height: 66px !important;
                padding: 13px 14px !important;
            }
            .v-architecture-god-body {
                padding: 16px 12px 18px !important;
            }
            .v-architecture-category-summary {
                grid-template-columns: auto 1fr auto !important;
                gap: 10px !important;
                min-height: 64px !important;
                padding: 12px 12px !important;
            }
            .v-architecture-category-number {
                width: 32px !important;
                height: 32px !important;
            }
            .v-architecture-category-description,
            .v-architecture-category-stat,
            .v-architecture-category-mood {
                display: none !important;
            }
            .v-architecture-category-body {
                padding: 14px 11px 16px !important;
            }
            .v-architecture-item-grid {
                grid-template-columns: 1fr !important;
                gap: 10px !important;
            }
            .v-architecture-item-card {
                padding: 13px !important;
            }
            .v-architecture-item-header {
                grid-template-columns: 1fr !important;
            }
            .v-architecture-witness-role {
                grid-template-columns: 1fr !important;
                gap: 5px !important;
            }
            .v-architecture-topic-body {
                padding: 16px 12px 18px !important;
            }
            .v-architecture-entry-grid,
            .v-architecture-entry-grid.dense {
                grid-template-columns: 1fr !important;
                gap: 7px !important;
            }
            .v-architecture-entry-grid li {
                font-size: 11.5px !important;
                line-height: 1.6 !important;
                padding: 6px 7px !important;
            }
            .v-architecture-token-group {
                margin-left: 0 !important;
                margin-top: 4px !important;
                display: flex !important;
            }
        }

        @media (max-width: 640px) {
            .v-architecture-popup .v-architecture-witness-role {
                display: grid !important;
                grid-template-columns: 1fr !important;
                gap: 10px !important;
            }

            .v-architecture-popup .v-architecture-token-group {
                margin-top: 0 !important;
                padding-left: 0 !important;
            }

            .v-architecture-popup .v-architecture-token-group::before,
            .v-architecture-popup-ref-card::before {
                display: none !important;
            }
        }

        @media (max-width: 768px) {
            body.is-mobile .main-content,
            body.is-mobile .content-area {
                width: 100% !important;
                max-width: 100% !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
            }

            body.is-mobile #devotion-view.devotion-container {
                width: 100% !important;
                max-width: 100% !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                padding-top: 0 !important;
                padding-left: 4px !important;
                padding-right: 4px !important;
            }

            body.is-mobile .devotion-tabs {
                width: calc(100vw - 8px) !important;
                max-width: calc(100vw - 8px) !important;
                height: 46px !important;
                min-height: 46px !important;
                margin: -23px auto 12px !important;
                padding: 3px !important;
                gap: 3px !important;
                border-radius: 23px !important;
            }

            body.is-mobile .devotion-tab-btn {
                flex: 1 1 0 !important;
                min-width: 0 !important;
                height: 40px !important;
                min-height: 40px !important;
                padding: 0 6px !important;
                border-radius: 20px !important;
                font-size: clamp(0.78rem, 3.25vw, 0.92rem) !important;
                line-height: 1 !important;
                letter-spacing: 0 !important;
                white-space: nowrap !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
            }

            body.is-mobile #daily-tab-panel {
                width: 100% !important;
                max-width: 100% !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                row-gap: 10px !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
            }

            body.is-mobile #daily-tab-panel .daily-source-tabs {
                width: fit-content !important;
                max-width: calc(100vw - 16px) !important;
                margin: 0 auto 8px !important;
            }

            body.is-mobile #daily-tab-panel .daily-source-tabs .daily-source-menu-toggle {
                min-width: 0 !important;
                width: fit-content !important;
                max-width: calc(100vw - 16px) !important;
                min-height: 42px !important;
                padding: 6px 12px !important;
                gap: 8px !important;
                border-radius: 999px !important;
                font-size: clamp(0.88rem, 3.8vw, 1rem) !important;
                line-height: 1.1 !important;
            }

            body.is-mobile #daily-tab-panel .daily-source-tabs .topical-section-menu-icon {
                flex: 0 0 32px !important;
                width: 32px !important;
                height: 32px !important;
            }

            body.is-mobile #daily-tab-panel .daily-source-tabs .topical-section-menu-label {
                max-width: calc(100vw - 92px) !important;
                font-size: inherit !important;
                line-height: 1.1 !important;
                white-space: nowrap !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
            }

            body.is-mobile #daily-tab-panel > .daily-source-content:not(.hidden) > .devotion-grid,
            body.is-mobile #daily-tab-panel > .daily-source-content:not(.hidden) > #prayer-devotion-grid,
            body.is-mobile #daily-tab-panel > .daily-source-content:not(.hidden) > #me-devotion-grid,
            body.is-mobile #daily-tab-panel > .daily-source-content:not(.hidden) > #imitation-devotion-grid,
            body.is-mobile #daily-tab-panel > .daily-source-content:not(.hidden) > #streams-devotion-grid {
                width: 100% !important;
                max-width: 100% !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                margin-top: 10px !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
            }

            body.is-mobile .devotion-column,
            body.is-mobile #daily-tab-panel :is(#daily-light-source-panel, #morning-evening-source-panel, #prayer-tab-panel, #imitation-source-panel, #streams-source-panel) .devotion-column {
                width: calc(100vw - 8px) !important;
                max-width: calc(100vw - 8px) !important;
                margin-left: auto !important;
                margin-right: auto !important;
                padding-left: clamp(12px, 3.2vw, 16px) !important;
                padding-right: clamp(12px, 3.2vw, 16px) !important;
            }

            html:not(.dark-mode) body.is-mobile #daily-tab-panel :is(#daily-light-source-panel, #morning-evening-source-panel) .devotion-column {
                padding-left: clamp(14px, 3.6vw, 18px) !important;
                padding-right: clamp(14px, 3.6vw, 18px) !important;
            }

            body.is-mobile .theme-verse-p,
            body.is-mobile #prayer-tab-panel .liturgical-verse,
            body.is-mobile .topical-reference-copy {
                width: 100% !important;
                max-width: 100% !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                padding-left: clamp(12px, 3.2vw, 16px) !important;
                padding-right: clamp(12px, 3.2vw, 16px) !important;
            }

            body.is-mobile #daily-light-source-panel .devotion-text .theme-verse-p,
            body.is-mobile #morning-evening-source-panel .devotion-text .theme-verse-p {
                width: 100% !important;
                max-width: 100% !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
            }

            body.is-mobile #topical-tab-panel,
            body.is-mobile #topical-section-content,
            body.is-mobile #topical-topic-detail {
                width: 100% !important;
                max-width: 100% !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
            }

            body.is-mobile .topical-devotion-panel,
            body.is-mobile .topical-topic-detail {
                width: calc(100vw - 8px) !important;
                max-width: calc(100vw - 8px) !important;
                margin-left: auto !important;
                margin-right: auto !important;
                padding: 6px 4px 10px !important;
                border-radius: 22px !important;
            }

            body.is-mobile #topical-section-tabs {
                width: fit-content !important;
                max-width: calc(100vw - 16px) !important;
                margin: 6px auto 8px !important;
            }

            body.is-mobile #topical-section-tabs .topical-section-menu-toggle {
                min-height: 40px !important;
                padding: 5px 10px !important;
                gap: 8px !important;
                border-radius: 999px !important;
            }

            body.is-mobile #topical-section-tabs .topical-section-menu-icon {
                flex: 0 0 30px !important;
                width: 30px !important;
                height: 30px !important;
            }

            body.is-mobile .topical-topic-grid {
                width: 100% !important;
                max-width: 100% !important;
                gap: 8px !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
            }

            body.is-mobile .topical-topic-card,
            body.is-mobile .topical-detail-hero,
            body.is-mobile .topical-reading-intro,
            body.is-mobile .topical-reading-section,
            body.is-mobile .topical-reference-card {
                width: 100% !important;
                max-width: 100% !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                padding-left: 12px !important;
                padding-right: 12px !important;
                border-radius: 18px !important;
            }

            body.is-mobile .topical-topic-card {
                min-height: 0 !important;
                padding-top: 14px !important;
                padding-bottom: 16px !important;
            }

            body.is-mobile .topical-detail-hero,
            body.is-mobile .topical-reading-intro,
            body.is-mobile .topical-reading-section,
            body.is-mobile .topical-reference-card {
                padding-top: 14px !important;
                padding-bottom: 16px !important;
            }

            body.is-mobile .topical-detail-topbar,
            body.is-mobile .topical-detail-actions {
                width: 100% !important;
                gap: 8px !important;
                margin: 0 !important;
            }

            body.is-mobile .topical-back-button,
            body.is-mobile .topical-download-button,
            body.is-mobile .topical-nav-button {
                padding: 8px 10px !important;
                font-size: 0.78rem !important;
                line-height: 1 !important;
                white-space: nowrap !important;
            }

            body.is-mobile .topical-detail-hero {
                gap: 10px !important;
                min-height: 0 !important;
            }

            body.is-mobile .topical-reference-list {
                gap: 8px !important;
            }

            body.is-mobile .topical-topic-head {
                gap: 10px !important;
                margin-bottom: 10px !important;
            }

            body.is-mobile .topical-topic-icon {
                flex: 0 0 44px !important;
                width: 44px !important;
                height: 44px !important;
                border-radius: 14px !important;
            }

            body.is-mobile .topical-topic-meta {
                margin-bottom: 12px !important;
            }

            body.is-mobile .topical-topic-button {
                align-self: flex-end !important;
                justify-content: flex-end !important;
                max-width: 100% !important;
                margin-top: 10px !important;
                margin-left: auto !important;
                padding: 7px 0 2px !important;
                font-size: 0.68rem !important;
                line-height: 1 !important;
                letter-spacing: 0.12em !important;
                white-space: nowrap !important;
            }

            body.is-mobile .topical-topic-head,
            body.is-mobile .topical-detail-shell,
            body.is-mobile .topical-reading-section-list {
                width: 100% !important;
                max-width: 100% !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
            }

            body.is-mobile .topical-detail-shell,
            body.is-mobile .topical-reading-section-list {
                gap: 10px !important;
            }
        }

        /* =================================================================
           INTERACTIVE DEVOTION — MOBILE FIX (Six Domains card overflow)
           User-reported: "Revelation Foundation" title overflows the card
           right edge, and the description paragraph wraps one word per
           line. Both are classic flex/grid min-width:auto bugs where a
           descendant's intrinsic width prevents the container from
           shrinking. Fix: cascade `min-width: 0` down the tree + force
           normal text wrapping + cap h3 letter-spacing on narrow screens.
           ================================================================= */
        @media (max-width: 768px) {
            /* Every flex/grid descendant of the architecture card area
               needs min-width: 0 so it can shrink below content width */
            .v-architecture-slide,
            .v-architecture-reading-column,
            .v-architecture-reading-column > *,
            .v-architecture-domain-card,
            .v-architecture-domain-card > *,
            .v-architecture-flow,
            .v-architecture-flow > * {
                min-width: 0 !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
            }

            /* Title: wrap normally, tighter letter-spacing, shrink to fit */
            .v-architecture-domain-card h3 {
                font-size: clamp(13px, 4vw, 18px) !important;
                line-height: 1.2 !important;
                letter-spacing: 0.04em !important;
                white-space: normal !important;
                word-break: normal !important;
                overflow-wrap: break-word !important;
                hyphens: none !important;
                margin: 6px 0 6px !important;
                max-width: 100% !important;
                display: block !important;
            }

            /* Description: normal block flow, no per-word wrap */
            .v-architecture-domain-card p {
                font-size: clamp(11.5px, 3.4vw, 14px) !important;
                line-height: 1.55 !important;
                letter-spacing: 0 !important;
                word-spacing: normal !important;
                white-space: normal !important;
                word-break: normal !important;
                overflow-wrap: break-word !important;
                margin: 0 0 12px !important;
                max-width: 100% !important;
                width: 100% !important;
                display: block !important;
                writing-mode: horizontal-tb !important;
                column-count: 1 !important;
            }

            /* Card itself: contain content within its border */
            .v-architecture-domain-card {
                padding: 14px 14px !important;
                overflow: hidden !important;
                border-radius: 16px !important;
            }
            .v-architecture-domain-card > span {
                font-size: clamp(8.5px, 2.4vw, 10.5px) !important;
                letter-spacing: 0.14em !important;
                white-space: nowrap !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                display: inline-block !important;
                max-width: 100% !important;
            }

            /* =====================================================================
               INTERACTIVE DEVOTION — MOBILE TYPOGRAPHY SCALING
               Scale headings + body text proportionally to viewport for phones.
               Anchored to 390px iPhone reference. Many existing rules use Nvw
               clamps tuned for 1500px+ desktops (e.g. clamp(28,2.6vw,40) — at
               390px viewport that's 10.1vw → clamps to 28px minimum, which is
               still very large on phone).
               ================================================================= */
            /* Major section titles (was clamp(28-42px, 2-3vw, 40-52px)) */
            .v-section-header-title,
            .v-architecture-slide h1,
            .v-architecture-slide h2,
            .v-architecture-domain-header h3,
            .v-architecture-journey-card h3 {
                font-size: clamp(18px, 5.4vw, 24px) !important;
                line-height: 1.2 !important;
                letter-spacing: 0.04em !important;
            }

            /* Subtitles + section subs (was clamp(20-22px, 1.4-1.6vw, 28-30px)) */
            .v-section-header-sub,
            .v-architecture-slide h3:not(.v-architecture-domain-card h3),
            .v-architecture-domain-card-summary,
            .v-architecture-journey-card-subtitle {
                font-size: clamp(13px, 3.85vw, 16px) !important;
                line-height: 1.45 !important;
                letter-spacing: 0.02em !important;
            }

            /* Body paragraphs / flow text */
            .v-architecture-flow p,
            .v-architecture-paragraph,
            .v-architecture-journey-card p,
            .v-architecture-domain-header p {
                font-size: clamp(12.5px, 3.6vw, 15px) !important;
                line-height: 1.55 !important;
            }

            /* Kicker labels / categories (was various small sizes) */
            .v-architecture-slide .v-kicker,
            .v-architecture-domain-card > span,
            .v-architecture-journey-card > span {
                font-size: clamp(8.5px, 2.4vw, 10.5px) !important;
                letter-spacing: 0.14em !important;
            }

            /* Section header padding tighter */
            .v-architecture-slide .v-section-header-wrap {
                padding: clamp(16px, 4.6vw, 22px) clamp(14px, 4vw, 18px) !important;
                margin-bottom: clamp(12px, 3.6vw, 18px) !important;
            }

            /* =================================================================
               TOPICAL DEVOTION — MOBILE TYPOGRAPHY + WRAP FIX
               Same recipe applied to the .topical-devotion-panel surface:
               cascade min-width: 0, force normal text wrap, scale body +
               heading sizes proportionally to viewport.
               ================================================================= */
            /* Cascade min-width: 0 + max-width: 100% down the topical panel */
            .topical-devotion-panel,
            .topical-devotion-panel *,
            .topical-section-tabs,
            .topical-section-tabs *,
            .topical-nav-button,
            .topical-mobile-topic-actions,
            .topical-mobile-action-link {
                min-width: 0 !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
            }

            /* Force normal wrap on body content (no per-word vertical wrap) */
            .topical-devotion-panel p,
            .topical-devotion-panel h1,
            .topical-devotion-panel h2,
            .topical-devotion-panel h3,
            .topical-devotion-panel h4,
            .topical-devotion-panel li,
            .topical-devotion-panel blockquote,
            .topical-devotion-panel .markdown-body p,
            .topical-devotion-panel .markdown-body h1,
            .topical-devotion-panel .markdown-body h2,
            .topical-devotion-panel .markdown-body h3 {
                white-space: normal !important;
                word-break: normal !important;
                overflow-wrap: break-word !important;
                word-spacing: normal !important;
                letter-spacing: normal !important;
                column-count: 1 !important;
                writing-mode: horizontal-tb !important;
                width: 100% !important;
                max-width: 100% !important;
                display: block !important;
            }

            /* Body paragraphs in topical devotion (was desktop sizes) */
            .topical-devotion-panel p,
            .topical-devotion-panel .markdown-body p,
            .topical-devotion-panel .markdown-body.premium-content p {
                font-size: clamp(13px, 3.85vw, 15.5px) !important;
                line-height: 1.6 !important;
                margin-bottom: clamp(12px, 3.6vw, 18px) !important;
            }

            /* H1 / page title in topical devotion */
            .topical-devotion-panel h1,
            .topical-devotion-panel .markdown-body h1 {
                font-size: clamp(20px, 6vw, 26px) !important;
                line-height: 1.2 !important;
                margin: clamp(12px, 3.6vw, 18px) 0 clamp(8px, 2.6vw, 12px) !important;
            }

            /* H2 — section headings (was 28px) */
            .topical-devotion-panel h2,
            .topical-devotion-panel .markdown-body h2,
            .topical-devotion-panel .markdown-body.premium-content h2 {
                font-size: clamp(17px, 5vw, 22px) !important;
                line-height: 1.25 !important;
                margin-top: clamp(22px, 6vw, 32px) !important;
                margin-bottom: clamp(10px, 3vw, 14px) !important;
            }

            /* H3 — subsection headings (was 21px) */
            .topical-devotion-panel h3,
            .topical-devotion-panel .markdown-body h3,
            .topical-devotion-panel .markdown-body.premium-content h3 {
                font-size: clamp(14.5px, 4.4vw, 17.5px) !important;
                line-height: 1.3 !important;
                margin-top: clamp(18px, 5vw, 24px) !important;
                margin-bottom: clamp(8px, 2.6vw, 12px) !important;
            }

            /* List items */
            .topical-devotion-panel ul,
            .topical-devotion-panel ol {
                margin: 0 0 clamp(14px, 4vw, 20px) !important;
                padding-left: clamp(20px, 5.5vw, 26px) !important;
            }
            .topical-devotion-panel li {
                font-size: clamp(13px, 3.85vw, 15.5px) !important;
                line-height: 1.55 !important;
                margin-bottom: 6px !important;
            }

            /* Blockquote / verse callouts */
            .topical-devotion-panel blockquote {
                font-size: clamp(13.5px, 4vw, 16px) !important;
                line-height: 1.5 !important;
                padding: clamp(10px, 3vw, 14px) clamp(12px, 3.6vw, 18px) !important;
                margin: clamp(14px, 4vw, 18px) 0 !important;
            }

            /* Tab labels + nav buttons — keep readable + tight */
            .topical-section-tab,
            .topical-nav-button {
                font-size: clamp(11.5px, 3.4vw, 13.5px) !important;
                white-space: nowrap !important;
            }

            /* =================================================================
               BROAD CATCH-ALL — all remaining slide / atlas / hero cards
               Targets the canonical revelation hero (CREATION title overflow),
               major revelations carousel, and any other slide that still has
               the one-word-per-line or text-overflow issues. Cascades min-width:0
               and forces normal wrap + sane font sizes across .v-slide and any
               descendant that wasn't covered above.
               ================================================================= */
            .v-slide,
            .v-slide *,
            .v-anchor-card,
            .v-anchor-card *,
            .v-major-rev-card,
            .v-major-rev-card *,
            .v-canonical-entry-card,
            .v-canonical-entry-card *,
            .v-revelation-hero,
            .v-revelation-hero *,
            [class*="v-canonical"],
            [class*="v-canonical"] *,
            [class*="v-major-rev"],
            [class*="v-major-rev"] *,
            [class*="cosmic-theme"],
            [class*="cosmic-theme"] * {
                min-width: 0 !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
            }

            /* Force normal text wrap on EVERY p/h1-6/li/blockquote/span inside
               .v-slide so nothing per-word-wraps and nothing overflows. */
            .v-slide p,
            .v-slide h1,
            .v-slide h2,
            .v-slide h3,
            .v-slide h4,
            .v-slide h5,
            .v-slide h6,
            .v-slide li,
            .v-slide blockquote,
            .v-slide span:not(.v-mood-pill):not(.v-eyebrow-pill) {
                white-space: normal !important;
                word-break: break-word !important;
                overflow-wrap: break-word !important;
                hyphens: auto !important;
                word-spacing: normal !important;
                column-count: 1 !important;
                writing-mode: horizontal-tb !important;
                max-width: 100% !important;
            }

            /* Override any oversized fixed font-sizes on slide titles/heroes
               (e.g. canonical hero "CREATION" was rendering huge and overflowing) */
            .v-slide h1,
            .v-slide .v-canonical-hero-title,
            .v-slide [class*="hero-title"]:not(.hero-title--premium),
            .v-slide [class*="revelation-name"],
            .v-slide [class*="theme-name"] {
                font-size: clamp(22px, 6.5vw, 30px) !important;
                line-height: 1.1 !important;
                letter-spacing: 0.04em !important;
                margin: clamp(8px, 2.6vw, 14px) 0 clamp(6px, 2vw, 10px) !important;
                padding: 0 !important;
                text-align: center !important;
            }

            /* Subtitles / descriptors below the title */
            .v-slide h2,
            .v-slide .v-canonical-hero-subtitle,
            .v-slide [class*="descriptor"],
            .v-slide [class*="hero-sub"] {
                font-size: clamp(11px, 3.2vw, 13.5px) !important;
                line-height: 1.4 !important;
                letter-spacing: 0.12em !important;
                margin: clamp(6px, 2vw, 10px) 0 clamp(10px, 3vw, 14px) !important;
            }

            /* Big numerals (01, 02, etc.) — keep readable but compact */
            .v-slide [class*="numeral"],
            .v-slide .v-canonical-numeral,
            .v-slide .v-canonical-hero-numeral {
                font-size: clamp(42px, 13vw, 60px) !important;
                line-height: 1 !important;
            }

            /* Stats blocks (COSMIC 4, Anchor Ver 18, etc.) */
            .v-slide [class*="stat"],
            .v-slide [class*="metric"] {
                font-size: clamp(11px, 3.2vw, 13.5px) !important;
                line-height: 1.35 !important;
                letter-spacing: 0.06em !important;
            }
            .v-slide [class*="stat"] [class*="number"],
            .v-slide [class*="stat-num"],
            .v-slide [class*="metric-num"] {
                font-size: clamp(20px, 6vw, 28px) !important;
                line-height: 1 !important;
            }

            /* Pill-style verse references / mood badges — keep nowrap but limit size */
            .v-slide [class*="pill"],
            .v-slide [class*="badge"],
            .v-slide [class*="verse-ref"] {
                font-size: clamp(10px, 2.8vw, 12px) !important;
                padding: clamp(4px, 1.4vw, 6px) clamp(8px, 2.4vw, 10px) !important;
                white-space: nowrap !important;
                max-width: 100% !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
            }
        }

        /* =================================================================
           CANONICAL book cards — match THEOLOGICAL domain card colors
           User asked for canonical to be inline with theological palette.
           Theological palette: rgba(7,24,48,0.9) → rgba(3,14,32,0.96)
           (Deep navy, near black at bottom). Canonical was using
           #0e2a5a → #08214b → #02112e — much brighter blue.
           This block forces canonical to the same dark gradient.
           ================================================================= */
        html body .v-canonical-book-card,
        html body .v-canonical-testaments .v-canonical-book-card {
            background:
                radial-gradient(circle at 16% 0%, rgba(216, 180, 90, 0.08), transparent 34%),
                linear-gradient(180deg, rgba(7, 24, 48, 0.92), rgba(3, 14, 32, 0.97)) !important;
            border: 1px solid rgba(218, 177, 80, 0.30) !important;
            border-radius: 18px !important;
            box-shadow:
                0 18px 48px rgba(0, 0, 0, 0.30),
                inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
        }
        html body .v-canonical-book-card:hover,
        html body .v-canonical-book-card:focus-visible,
        html body .v-canonical-book-card.active {
            background:
                radial-gradient(circle at 16% 0%, rgba(216, 180, 90, 0.14), transparent 38%),
                linear-gradient(180deg, rgba(9, 28, 56, 0.94), rgba(4, 16, 36, 0.98)) !important;
            border-color: rgba(218, 177, 80, 0.50) !important;
            box-shadow:
                0 22px 56px rgba(0, 0, 0, 0.36),
                inset 0 1px 0 rgba(255, 255, 255, 0.08),
                0 0 0 1px rgba(212, 175, 55, 0.10) !important;
        }

        /* =================================================================
           ATLAS LEVEL FILTER — clickable badges with single-selection state
           User asked: only one button selected at a time, click to filter
           ================================================================= */
        .v-atlas-level-badge {
            appearance: none;
            -webkit-appearance: none;
            background: rgba(7, 24, 48, 0.6);
            border: 1px solid rgba(218, 177, 80, 0.22);
            border-radius: 999px;
            padding: 6px 16px;
            color: rgba(218, 177, 80, 0.78);
            font-family: 'Cinzel', serif;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            cursor: pointer;
            transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.16s ease;
            user-select: none;
        }
        .v-atlas-level-badge:hover {
            background: rgba(9, 28, 56, 0.78);
            border-color: rgba(218, 177, 80, 0.46);
            color: #f3deaa;
            transform: translateY(-1px);
        }
        .v-atlas-level-badge.is-active {
            background: linear-gradient(180deg, rgba(216, 180, 90, 0.18), rgba(212, 175, 55, 0.10));
            border-color: rgba(218, 177, 80, 0.85);
            color: #f8e7b2;
            box-shadow:
                0 0 0 1px rgba(218, 177, 80, 0.45),
                0 8px 24px rgba(216, 180, 90, 0.18),
                inset 0 1px 0 rgba(255, 240, 200, 0.18);
            transform: none;
        }
        .v-atlas-level-badge:focus-visible {
            outline: 2px solid rgba(218, 177, 80, 0.6);
            outline-offset: 2px;
        }

        /* Hidden chapter when filter excludes it — smooth collapse */
        .v-atlas-chapter.v-atlas-chapter-hidden {
            display: none !important;
        }

        /* =================================================================
           CANONICAL FULL-SURFACE → THEOLOGICAL PALETTE MATCH
           User: "this page and card and text colors should look similar
           to Theological page, cards, and text". Overrides every visible
           canonical surface (outer wrapper, testament headers, book cards,
           journey container, text colors) to use the same deep navy
           rgba(3,14,32) and gold rgba(218,177,80,0.30) accents that the
           v-architecture-domain-card uses on the Theological view.
           ================================================================= */

        /* 1. Outer canonical wrapper — deep navy like theological section */
        html body .v-canonical-atlas,
        html body .v-canonical-atlas-library {
            background:
                radial-gradient(circle at 50% 0%, rgba(216, 180, 90, 0.08), transparent 58%),
                linear-gradient(180deg, rgba(7, 24, 48, 0.92), rgba(3, 14, 32, 0.97)) !important;
            border: 1px solid rgba(218, 177, 80, 0.22) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 249, 236, 0.04),
                0 18px 55px rgba(0, 0, 0, 0.30) !important;
        }

        /* 2. Testament header bars (OLD TESTAMENT / NEW TESTAMENT) — deep navy + gold edge */
        html body .v-canonical-testament > header {
            background:
                radial-gradient(circle at 50% 0%, rgba(216, 180, 90, 0.06), transparent 60%),
                linear-gradient(180deg, rgba(7, 24, 48, 0.90), rgba(3, 14, 32, 0.96)) !important;
            border: 1px solid rgba(218, 177, 80, 0.30) !important;
            border-radius: 14px !important;
            padding: 14px 22px !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.055),
                0 12px 32px rgba(0, 0, 0, 0.26) !important;
        }
        html body .v-canonical-testament > header span,
        html body .v-canonical-testament > header * {
            color: #d8b45a !important;
        }

        /* 3. Book cards — already set above, reinforced */
        html body .v-canonical-book-card,
        html body .v-canonical-testaments .v-canonical-book-card {
            background:
                radial-gradient(circle at 16% 0%, rgba(216, 180, 90, 0.08), transparent 34%),
                linear-gradient(180deg, rgba(7, 24, 48, 0.92), rgba(3, 14, 32, 0.97)) !important;
            border: 1px solid rgba(218, 177, 80, 0.30) !important;
            border-radius: 18px !important;
            box-shadow:
                0 18px 48px rgba(0, 0, 0, 0.30),
                inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
        }

        /* 4. Book card text colors & typography — match theological */
        html body .v-canonical-book-card .v-canonical-book-title,
        html body .v-canonical-book-card .v-canonical-book-name {
            color: #fff9ec !important;
            font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif !important;
            font-size: 1.48rem !important;
            font-weight: 600 !important;
            line-height: 1.34 !important;
            letter-spacing: 0.01em !important;
            text-transform: none !important;
        }
        html body .v-canonical-book-card .v-canonical-book-count {
            color: rgba(255, 249, 236, 0.82) !important;
            font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif !important;
            font-size: 1.12rem !important;
            font-weight: 400 !important;
            line-height: 1.4 !important;
            letter-spacing: 0 !important;
            text-transform: none !important;
        }
        html body .v-canonical-book-card .v-canonical-book-linked {
            display: flex !important;
            flex-direction: column !important;
            gap: 2px !important;
            color: rgba(255, 249, 236, 0.70) !important;
            font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif !important;
            font-size: 0.96rem !important;
            font-weight: 400 !important;
            line-height: 1.3 !important;
            letter-spacing: 0 !important;
            text-transform: none !important;
            margin-top: 2px !important;
        }
        html body .v-canonical-book-card .v-canonical-book-explore,
        html body .v-canonical-book-card .v-canonical-book-arrow {
            color: #d8b45a !important;
        }
        /* Leading numeral */
        html body .v-canonical-book-card::after,
        html body .v-canonical-book-card .v-canonical-book-num {
            color: #d8b45a !important;
        }
        /* Star ornament in card corner — removed */
        html body .v-canonical-book-card::before {
            display: none !important;
        }

        /* 5. Canonical Journey kicker + intro text — gold + cream */
        html body .v-canonical-header p,
        html body .v-canonical-atlas .v-canonical-header p {
            color: rgba(255, 249, 236, 0.78) !important;
        }
        html body .v-canonical-atlas [class*="kicker"],
        html body .v-canonical-atlas [class*="eyebrow"] {
            color: #d8b45a !important;
        }

        /* 6. Hover/focus/active book card — same as theological hover */
        html body .v-canonical-book-card:hover,
        html body .v-canonical-book-card:focus-visible,
        html body .v-canonical-book-card.active {
            background:
                radial-gradient(circle at 16% 0%, rgba(216, 180, 90, 0.14), transparent 38%),
                linear-gradient(180deg, rgba(9, 28, 56, 0.94), rgba(4, 16, 36, 0.98)) !important;
            border-color: rgba(218, 177, 80, 0.50) !important;
            box-shadow:
                0 22px 56px rgba(0, 0, 0, 0.36),
                inset 0 1px 0 rgba(255, 255, 255, 0.08),
                0 0 0 1px rgba(212, 175, 55, 0.10) !important;
        }

        /* 7. Soft blue halos that were brightening the canonical area — dim them */
        html body .v-canonical-testaments::before {
            background:
                radial-gradient(ellipse at 22% 20%, rgba(216, 180, 90, 0.05), transparent 55%),
                radial-gradient(ellipse at 78% 20%, rgba(216, 180, 90, 0.05), transparent 55%) !important;
            opacity: 0.6 !important;
        }
    
        /* =================================================================
           ATLAS LEVEL FILTER — bump specificity over .v-atlas-slide rule
           Earlier .v-atlas-slide .v-atlas-level-badge rule (line 25862)
           was forcing every button to the same gold background, hiding
           the active state. Override with higher specificity + ensure
           cursor: pointer + pointer-events: auto so clicks register.
           ================================================================= */
        html body .v-atlas-slide .v-atlas-level-badge,
        html body .v-atlas-slide [data-atlas-level-filter] {
            cursor: pointer !important;
            pointer-events: auto !important;
            user-select: none !important;
            appearance: none !important;
            -webkit-appearance: none !important;
            background: rgba(7, 24, 48, 0.55) !important;
            border: 1px solid rgba(218, 177, 80, 0.22) !important;
            color: rgba(218, 177, 80, 0.72) !important;
            border-radius: 999px !important;
            padding: 0.45rem 1.05rem !important;
            font-family: 'Cinzel', serif !important;
            font-size: 0.72rem !important;
            font-weight: 700 !important;
            letter-spacing: 0.12em !important;
            text-transform: uppercase !important;
            transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.16s ease !important;
            position: relative !important;
            z-index: 5 !important;
        }
        html body .v-atlas-slide .v-atlas-level-badge:hover,
        html body .v-atlas-slide [data-atlas-level-filter]:hover {
            background: rgba(9, 28, 56, 0.78) !important;
            border-color: rgba(218, 177, 80, 0.50) !important;
            color: #f3deaa !important;
            transform: translateY(-1px) !important;
        }
        html body .v-atlas-slide .v-atlas-level-badge.is-active,
        html body .v-atlas-slide [data-atlas-level-filter].is-active {
            background: linear-gradient(180deg, rgba(216, 180, 90, 0.32), rgba(212, 175, 55, 0.18)) !important;
            border-color: rgba(218, 177, 80, 0.92) !important;
            color: #fff5d0 !important;
            box-shadow:
                0 0 0 1px rgba(218, 177, 80, 0.55),
                0 8px 24px rgba(216, 180, 90, 0.22),
                inset 0 1px 0 rgba(255, 240, 200, 0.22) !important;
            transform: none !important;
        }
        html body .v-atlas-slide .v-atlas-level-badge:focus-visible {
            outline: 2px solid rgba(218, 177, 80, 0.6) !important;
            outline-offset: 2px !important;
        }
        html body .v-atlas-slide .v-atlas-chapter.v-atlas-chapter-hidden {
            display: none !important;
        }
        html body .v-atlas-slide .v-atlas-levels,
        html body .v-atlas-slide [data-atlas-level-filter-bar] {
            pointer-events: auto !important;
            position: relative !important;
            z-index: 5 !important;
        }

    
        /* =================================================================
           CANONICAL JOURNEY — FULLY RESPONSIVE SYSTEM
           Desktop → Tablet → Phone → App Mode (WebView)
           Per user spec: mobile-first, 1/2/4-col grid at 768/1200 breakpoints,
           premium spacing, responsive typography with clamp(),
           touch targets ≥44px, app-mode safe areas, reduced motion.
           ================================================================= */

        /* ── 1. RESPONSIVE TYPOGRAPHY (mobile-first, scales up) ─────────── */
        html body .v-canonical-atlas {
            /* CSS custom properties so children can scale together */
            --cj-side-pad: clamp(16px, 4vw, 28px);
            --cj-stack-gap: clamp(24px, 5vw, 40px);
            --cj-card-gap: clamp(18px, 3vw, 32px);
            --cj-hero-title: clamp(2rem, 8vw, 4.5rem);
            --cj-section-title: clamp(1.2rem, 5vw, 2rem);
            --cj-book-title: clamp(1.75rem, 7vw, 2.4rem);
            --cj-body: clamp(0.85rem, 3.5vw, 1rem);
        }

        /* ── 2. BOOK CARD GRID — auto-fit so columns size to content space.
             At narrow widths (1 testament per row, ≤480 viewport) you get 1 col.
             At ~768-1024 (testaments stacked, full width): 2-3 cols.
             At desktop (testaments side-by-side, each gets half width): 1-2 cols
             per testament. Each card stays ≥250px wide so text doesn't truncate. */
        html body .v-canonical-book-grid {
            display: grid !important;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
            gap: clamp(16px, 2.4vw, 28px) !important;
        }
        @media (max-width: 480px) {
            html body .v-canonical-book-grid {
                grid-template-columns: 1fr !important;
                gap: clamp(14px, 4vw, 20px) !important;
            }
        }

        /* ── 3. TESTAMENT GRID — stacks on phone, side-by-side @1024+ ─── */
        html body .v-canonical-testaments {
            display: grid !important;
            grid-template-columns: 1fr !important;
            gap: clamp(28px, 4vw, 40px) !important;
        }
        @media (min-width: 1024px) {
            html body .v-canonical-testaments {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                gap: clamp(24px, 2.4vw, 32px) !important;
            }
        }

        /* ── 4. RESPONSIVE BOOK CARD TYPOGRAPHY + SPACING ─────────────── */
        html body .v-canonical-book-card {
            padding: clamp(18px, 3.6vw, 24px) !important;
            min-height: clamp(200px, 28vw, 240px) !important;
            /* Premium tap-target & active state */
            -webkit-tap-highlight-color: transparent;
        }
        html body .v-canonical-book-card .v-canonical-book-title {
            font-size: clamp(1.28rem, 5.2vw, 1.48rem) !important;
            line-height: 1.34 !important;
        }
        html body .v-canonical-book-card .v-canonical-book-count {
            font-size: clamp(0.92rem, 3.2vw, 1.12rem) !important;
            line-height: 1.45 !important;
        }
        html body .v-canonical-book-card .v-canonical-book-linked {
            font-size: clamp(0.82rem, 2.8vw, 0.96rem) !important;
            line-height: 1.45 !important;
        }
        html body .v-canonical-book-card .v-canonical-book-explore,
        html body .v-canonical-book-card .v-canonical-book-arrow {
            font-size: clamp(0.78rem, 2.8vw, 0.95rem) !important;
            /* 44px minimum tap target */
            min-height: 44px !important;
            display: inline-flex !important;
            align-items: center !important;
        }

        /* ── 5. TESTAMENT HEADER (OLD TESTAMENT / NEW TESTAMENT) RESPONSIVE */
        html body .v-canonical-testament > header {
            padding: clamp(12px, 2.4vw, 18px) clamp(16px, 4vw, 28px) !important;
        }
        html body .v-canonical-testament > header span {
            font-size: clamp(0.65rem, 2.4vw, 0.85rem) !important;
            letter-spacing: clamp(0.14em, 0.6vw, 0.22em) !important;
        }

        /* ── 6. CANONICAL JOURNEY HEADER (kicker + italic subtitle) ───── */
        html body .v-canonical-header {
            margin-bottom: clamp(24px, 4vw, 36px) !important;
        }
        html body .v-canonical-header p {
            font-size: clamp(1rem, 3.4vw, 1.28rem) !important;
            line-height: 1.5 !important;
            padding: 0 clamp(12px, 4vw, 24px) !important;
        }

        /* ── 7. ATLAS WRAPPER PADDING (responsive page-side) ──────────── */
        html body .v-canonical-atlas {
            padding: clamp(20px, 4vw, 36px) clamp(14px, 4vw, 28px) !important;
        }

        /* ── 8. TOUCH INTERACTION — disable hover on touch devices,
           strong active/pressed state for taps ──────────────────────── */
        @media (hover: none) and (pointer: coarse) {
            html body .v-canonical-book-card:hover {
                transform: none !important;
                box-shadow:
                    0 18px 48px rgba(0, 0, 0, 0.30),
                    inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
            }
            html body .v-canonical-book-card:active {
                transform: translateY(1px) scale(0.985) !important;
                background:
                    radial-gradient(circle at 16% 0%, rgba(216, 180, 90, 0.18), transparent 38%),
                    linear-gradient(180deg, rgba(11, 32, 62, 0.96), rgba(5, 18, 40, 0.98)) !important;
                border-color: rgba(218, 177, 80, 0.55) !important;
                transition: all 0.08s ease !important;
            }
        }

        /* ── 9. APP MODE (WebView / installed PWA) ──────────────────── */
        body.is-app-mode html body .v-canonical-atlas,
        body.is-app-mode .v-canonical-atlas {
            padding-top: max(clamp(20px, 4vw, 36px), env(safe-area-inset-top)) !important;
            padding-bottom: max(clamp(20px, 4vw, 36px), env(safe-area-inset-bottom)) !important;
            padding-left: max(clamp(14px, 4vw, 28px), env(safe-area-inset-left)) !important;
            padding-right: max(clamp(14px, 4vw, 28px), env(safe-area-inset-right)) !important;
            min-height: 100svh !important;
            min-height: 100dvh !important;
        }
        body.is-app-mode {
            margin: 0 !important;
            overflow-x: hidden !important;
        }

        /* ── 10. PHONE-SPECIFIC TIGHTENING (under 480px) ─────────────── */
        @media (max-width: 480px) {
            html body .v-canonical-atlas {
                padding: clamp(16px, 4vw, 22px) clamp(12px, 4vw, 18px) !important;
                border-radius: 16px !important;
            }
            html body .v-canonical-book-card {
                padding: 18px 20px !important;
                min-height: auto !important;
                border-radius: 14px !important;
            }
            html body .v-canonical-book-card .v-canonical-book-title {
                font-size: clamp(1.18rem, 5.5vw, 1.32rem) !important;
            }
        }

        /* ── 11. PREFERS REDUCED MOTION — kill all animations ────────── */
        @media (prefers-reduced-motion: reduce) {
            html body .v-canonical-book-card,
            html body .v-canonical-book-card *,
            html body .v-canonical-atlas,
            html body .v-canonical-atlas * {
                animation: none !important;
                transition: none !important;
            }
            html body .v-canonical-book-card:hover {
                transform: none !important;
            }
        }

        /* ── 12. SCROLLBAR HIDE on mobile horizontal-scroll containers ─ */
        @media (max-width: 768px) {
            html body .v-canonical-atlas *::-webkit-scrollbar {
                display: none !important;
            }
            html body .v-canonical-atlas * {
                scrollbar-width: none !important;
                -ms-overflow-style: none !important;
            }
        }

        /* ─────────────────────────────────────────────────────────────
           13. BACKGROUND BUTTON + INLINE EXPANSION PANEL
           Optional long-form context per entry, sourced from
           the Journey background catalog. The button sits
           on its own divider row between PRIMARY WITNESS and the verse
           block (PRIMARY); clicking it expands a gold-on-navy panel
           in place. Icon: + to expand, − to collapse.
           ───────────────────────────────────────────────────────────── */
        .v-architecture-popup .v-architecture-background-divider-row {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 22px 0 18px;
            padding: 0 12px;
            gap: 14px;
        }
        .v-architecture-popup .v-architecture-background-divider-row::before,
        .v-architecture-popup .v-architecture-background-divider-row::after {
            content: '';
            flex: 1 1 auto;
            height: 1px;
            background: linear-gradient(to right, transparent, rgba(212, 175, 55, 0.28), transparent);
        }

        .v-architecture-popup .v-architecture-background-btn {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 18px;
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.14), rgba(180, 140, 70, 0.08));
            border: 1px solid rgba(212, 175, 55, 0.55);
            border-radius: 999px;
            color: rgba(244, 215, 130, 0.96);
            font-family: 'Cinzel', serif;
            font-size: 0.66rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            cursor: pointer;
            transition: background 0.2s ease, border-color 0.2s ease, transform 0.18s ease, box-shadow 0.2s ease;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
        }
        .v-architecture-popup .v-architecture-background-btn:hover {
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.26), rgba(180, 140, 70, 0.16));
            border-color: rgba(212, 175, 55, 0.82);
            transform: translateY(-1px);
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(212, 175, 55, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
        }
        .v-architecture-popup .v-architecture-background-btn:focus-visible {
            outline: 2px solid rgba(212, 175, 55, 0.7);
            outline-offset: 2px;
        }
        .v-architecture-popup .v-architecture-background-btn:active {
            transform: translateY(0);
        }
        .v-architecture-popup .v-architecture-background-btn[aria-expanded="true"] {
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.32), rgba(180, 140, 70, 0.20));
            border-color: rgba(244, 215, 130, 0.85);
            color: #f6e2a4;
        }
        .v-architecture-popup .v-architecture-background-btn-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            border: 1px solid rgba(244, 215, 130, 0.6);
            background: rgba(244, 215, 130, 0.10);
            line-height: 1;
            color: rgba(244, 215, 130, 0.95);
            font-size: 0.95em;
            font-weight: 700;
        }
        /* Auto-swap + / − based on aria-expanded state */
        .v-architecture-popup .v-architecture-background-btn-icon::before {
            content: '+';
        }
        .v-architecture-popup .v-architecture-background-btn[aria-expanded="true"] .v-architecture-background-btn-icon::before {
            content: '−';
        }
        .v-architecture-popup .v-architecture-background-btn[aria-expanded="true"] .v-architecture-background-btn-icon {
            background: rgba(244, 215, 130, 0.22);
            border-color: rgba(244, 215, 130, 0.85);
        }
        .v-architecture-popup .v-architecture-background-btn-label {
            line-height: 1;
        }

        /* ── Expansion panel ──────────────────────────────────────── */
        .v-architecture-popup .v-architecture-background-panel {
            margin: 18px 0 22px;
            padding: 22px 24px 18px;
            background:
                linear-gradient(180deg, rgba(10, 26, 60, 0.55), rgba(6, 18, 44, 0.6)),
                rgba(0, 0, 0, 0.15);
            border: 1px solid rgba(212, 175, 55, 0.32);
            border-radius: 14px;
            color: rgba(232, 220, 190, 0.96);
            box-shadow:
                inset 0 0 0 1px rgba(255, 255, 255, 0.03),
                0 6px 24px rgba(0, 0, 0, 0.28);
            animation: vBackgroundPanelFadeIn 0.22s ease-out;
        }
        @media (prefers-reduced-motion: reduce) {
            .v-architecture-popup .v-architecture-background-panel {
                animation: none;
            }
        }
        @keyframes vBackgroundPanelFadeIn {
            from { opacity: 0; transform: translateY(-4px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .v-architecture-popup .v-architecture-background-panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 14px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(212, 175, 55, 0.18);
        }
        .v-architecture-popup .v-architecture-background-panel-title {
            font-family: 'Cinzel', serif;
            font-size: 0.74rem;
            font-weight: 800;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: rgba(212, 175, 55, 0.92);
        }
        .v-architecture-popup .v-architecture-background-close {
            background: transparent;
            border: 1px solid rgba(212, 175, 55, 0.32);
            border-radius: 999px;
            width: 28px;
            height: 28px;
            line-height: 0;
            color: rgba(212, 175, 55, 0.78);
            font-size: 1.2rem;
            cursor: pointer;
            transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
        }
        .v-architecture-popup .v-architecture-background-close:hover {
            background: rgba(212, 175, 55, 0.16);
            color: #f6e2a4;
            border-color: rgba(244, 215, 130, 0.65);
        }
        .v-architecture-popup .v-architecture-background-body {
            font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
            font-size: 0.96rem;
            line-height: 1.65;
            color: rgba(236, 226, 200, 0.94);
        }
        .v-architecture-popup .v-architecture-background-body p {
            margin: 0 0 12px;
        }
        .v-architecture-popup .v-architecture-background-body h6.v-background-h {
            margin: 18px 0 8px;
            font-family: 'Cinzel', serif;
            font-size: 0.82rem;
            font-weight: 700;
            letter-spacing: 0.10em;
            text-transform: uppercase;
            color: rgba(244, 215, 130, 0.95);
        }
        .v-architecture-popup .v-architecture-background-body h6.v-background-h:first-child {
            margin-top: 0;
        }
        .v-architecture-popup .v-architecture-background-body strong {
            color: #f6e2a4;
            font-weight: 700;
        }
        .v-architecture-popup .v-architecture-background-body em {
            color: rgba(244, 235, 205, 0.95);
            font-style: italic;
        }
        .v-architecture-popup .v-architecture-background-body ul.v-background-list {
            margin: 6px 0 14px;
            padding-left: 22px;
        }
        .v-architecture-popup .v-architecture-background-body ul.v-background-list li {
            margin-bottom: 6px;
        }
        .v-architecture-popup .v-architecture-background-body blockquote.v-background-quote {
            margin: 10px 0 14px;
            padding: 10px 16px;
            border-left: 3px solid rgba(212, 175, 55, 0.55);
            background: rgba(212, 175, 55, 0.06);
            border-radius: 0 8px 8px 0;
            color: rgba(244, 235, 205, 0.92);
        }
        .v-architecture-popup .v-architecture-background-body blockquote.v-background-quote p {
            margin: 0;
        }
        .v-architecture-popup .v-architecture-background-panel-footer {
            margin-top: 14px;
            padding-top: 10px;
            border-top: 1px solid rgba(212, 175, 55, 0.14);
            font-size: 0.72rem;
            color: rgba(212, 175, 55, 0.62);
            text-align: center;
            letter-spacing: 0.04em;
        }

        /* Mobile refinements */
        @media (max-width: 540px) {
            .v-architecture-popup .v-architecture-background-btn {
                padding: 5px 11px;
                font-size: 0.6rem;
                letter-spacing: 0.10em;
            }
            .v-architecture-popup .v-architecture-background-panel {
                margin: 14px 0 18px;
                padding: 16px 16px 14px;
            }
            .v-architecture-popup .v-architecture-background-body {
                font-size: 0.92rem;
            }
            .v-architecture-popup .v-architecture-background-body h6.v-background-h {
                font-size: 0.76rem;
            }
        }

        /* Grouped Mobile Adjustments for Theological Atlas and Card Grids */
        @media (max-width: 600px) {
            .v-atlas-slide .v-atlas-chapter-inner {
                position: relative !important;
                flex-direction: column !important;
                align-items: stretch !important;
                padding: 18px 16px !important;
                gap: 10px !important;
            }
            .v-atlas-slide .v-atlas-chapter-num {
                position: absolute !important;
                top: 18px !important;
                right: 18px !important;
                width: auto !important;
                text-align: right !important;
                font-size: 1.05rem !important;
            }
            .v-atlas-slide .v-atlas-chapter-icon {
                font-size: 1.2rem !important;
                margin-bottom: 2px !important;
                width: fit-content !important;
            }
            .v-atlas-slide .v-atlas-chapter-body {
                width: 100% !important;
            }
            .v-atlas-slide .v-atlas-chapter-name {
                font-size: 1.05rem !important;
                padding-right: 32px !important;
                hyphens: none !important;
                word-break: keep-all !important;
                overflow-wrap: normal !important;
            }
            .v-atlas-slide .v-atlas-chapter-arrow {
                display: none !important;
            }

            /* Reformat section headers to flex columns on phone screens */
            .v-atlas-slide .v-god-library-section > header.v-god-premium-section-header {
                flex-direction: column !important;
                align-items: stretch !important;
                gap: 14px !important;
                padding: 16px 16px 12px !important;
                min-height: auto !important;
            }
            .v-atlas-slide .v-god-section-heading {
                grid-template-columns: 48px minmax(0, 1fr) !important;
                gap: 12px !important;
                width: 100% !important;
            }
            .v-atlas-slide .v-god-section-icon {
                width: 48px !important;
                height: 48px !important;
            }
            .v-atlas-slide .v-god-section-icon svg {
                width: 24px !important;
                height: 24px !important;
            }
            .v-atlas-slide .v-god-library-section .v-god-premium-section-header h4 {
                font-size: 1.1rem !important;
                letter-spacing: 0.04em !important;
            }
            .v-atlas-slide .v-god-section-heading p {
                font-size: 0.78rem !important;
                line-height: 1.35 !important;
                margin-top: 4px !important;
            }
            .v-atlas-slide .v-god-premium-section-header .v-god-section-actions {
                display: flex !important;
                justify-content: space-between !important;
                align-items: center !important;
                width: 100% !important;
                border-top: 1px solid rgba(212, 175, 55, 0.16) !important;
                padding-top: 12px !important;
                margin-top: 4px !important;
            }
            .v-atlas-slide .v-god-premium-section-header .v-god-section-actions span {
                font-size: 0.78rem !important;
            }
            .v-atlas-slide .v-god-premium-section-header .v-god-scroll-btn {
                width: 32px !important;
                height: 32px !important;
                font-size: 1.1rem !important;
            }

            /* Keep section total navigation visible beside counts on phone. */
            .v-atlas-slide .v-god-premium-section-header .v-god-section-actions {
                display: grid !important;
                grid-template-columns: minmax(0, 1fr) 34px 34px !important;
                column-gap: 8px !important;
            }
            .v-atlas-slide .v-god-premium-section-header .v-god-section-actions span {
                min-width: 0 !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                white-space: nowrap !important;
            }
            .v-atlas-slide .v-god-premium-section-header .v-god-scroll-btn {
                display: inline-flex !important;
                flex: 0 0 34px !important;
                align-items: center !important;
                justify-content: center !important;
                width: 34px !important;
                min-width: 34px !important;
                height: 34px !important;
                opacity: 1 !important;
                visibility: visible !important;
                border: 1px solid rgba(242, 199, 95, 0.46) !important;
                background:
                    radial-gradient(circle at 50% 12%, rgba(255, 249, 236, 0.2), transparent 60%),
                    rgba(8, 21, 42, 0.92) !important;
                color: #ffe19a !important;
                box-shadow:
                    inset 0 1px 0 rgba(255, 249, 236, 0.14),
                    0 0 0 1px rgba(212, 175, 55, 0.08),
                    0 8px 20px rgba(0, 0, 0, 0.26) !important;
            }

            /* Protect elements inside Section 07 from ugly character-by-character wrap or hyphenation */
            .v-atlas-slide .v-constellation-title {
                white-space: normal !important;
                word-break: keep-all !important;
                overflow-wrap: break-word !important;
                hyphens: none !important;
            }
            .v-atlas-slide .v-constellation-node .v-node-label,
            .v-atlas-slide .v-god-premium-section-header h4,
            .v-atlas-slide .v-god-major-eyebrow,
            .v-atlas-slide .v-architecture-meta-pill,
            .v-atlas-slide .v-god-card-ref-preview,
            .v-atlas-slide .v-god-card-ref-row span,
            .v-atlas-slide .v-god-major-tags span {
                white-space: nowrap !important;
                word-break: keep-all !important;
                overflow-wrap: normal !important;
                hyphens: none !important;
            }

            /* Reduce card padding on mobile to optimize screen area */
            .v-atlas-slide .v-god-major-card {
                padding: 20px 20px 18px !important;
                min-height: auto !important;
            }
            .v-atlas-slide .v-god-major-eyebrow {
                margin-bottom: 12px !important;
            }
            .v-atlas-slide .v-god-major-card h5 {
                margin: 0 0 10px !important;
                font-size: calc(clamp(1.02rem, 3.8vw, 1.15rem) * var(--font-scale)) !important;
            }
            .v-atlas-slide .v-god-card-summary {
                margin: 10px 0 !important;
                font-size: calc(0.85rem * var(--font-scale)) !important;
                line-height: 1.55 !important;
            }
            .v-atlas-slide .v-god-major-rule {
                margin: 0 0 12px !important;
            }

            /* Devotional metrics stats to list items one after the other on phone screen */
            .v-atlas-slide .v-god-topic-stats {
                grid-template-columns: 1fr !important;
                gap: 6px !important;
                margin-inline: -16px !important;
                padding: 12px 16px !important;
            }
            .v-atlas-slide .v-god-topic-stats span {
                justify-content: flex-start !important;
                border-left: none !important;
                border-bottom: 1px solid rgba(232, 217, 181, 0.08) !important;
                padding-bottom: 6px !important;
                width: 100% !important;
                display: flex !important;
                flex-direction: row !important;
                align-items: center !important;
                gap: 10px !important;
            }
            .v-atlas-slide .v-god-topic-stats span:last-child {
                border-bottom: none !important;
                padding-bottom: 0 !important;
            }
            .v-atlas-slide .v-god-topic-stats .v-stat-lens-col {
                justify-content: center !important;
                border-bottom: 1px solid rgba(212, 175, 55, 0.16) !important;
                padding-bottom: 6px !important;
            }
            .v-atlas-slide .v-god-topic-stats strong {
                font-size: 1.25rem !important;
                white-space: nowrap !important;
                word-break: keep-all !important;
                hyphens: none !important;
            }
            .v-atlas-slide .v-god-topic-stats em {
                font-size: 0.85rem !important;
                white-space: nowrap !important;
                word-break: keep-all !important;
                hyphens: none !important;
            }

            /* Reduce vertical margins and paddings between components to look premium on mobile screens */
            .v-atlas-slide .v-god-topic-hero {
                row-gap: 10px !important;
            }
            .v-atlas-slide .v-god-topic-stats {
                margin-top: 10px !important;
            }
            .v-atlas-slide .v-god-constellation-map-container {
                margin: 12px 0 !important;
                padding: 14px !important;
            }
            .v-atlas-slide .v-god-category-filter {
                margin-bottom: 12px !important;
                padding: 12px 14px !important;
            }
            .v-atlas-slide .v-god-library-section > header.v-god-premium-section-header {
                margin: 14px 0 10px !important;
            }
        }

        @media (max-width: 768px) {
            .v-s03-card-grid {
                grid-template-columns: 1fr !important;
            }
            .v-devotional-options {
                grid-template-columns: 1fr !important;
            }
            .v-combined-row {
                grid-template-columns: 1fr !important;
            }
            /* Minimize margins on Journey visual sections */
            body:has(#visuals-tab-panel:not(.hidden)) {
                padding: 0 !important;
            }
            body:has(#visuals-tab-panel:not(.hidden)),
            body:has(#visuals-tab-panel:not(.hidden)) .container,
            body:has(#visuals-tab-panel:not(.hidden)) #app-view,
            body:has(#visuals-tab-panel:not(.hidden)) .main-content,
            body:has(#visuals-tab-panel:not(.hidden)) .content-area {
                background: #050e1e !important;
            }
            body:has(#visuals-tab-panel:not(.hidden)) .container {
                border-radius: 0 !important;
                border: none !important;
                box-shadow: none !important;
            }
            body:has(#visuals-tab-panel:not(.hidden)) .content-area {
                padding: 0 !important;
            }
            #devotion-view.devotion-container {
                padding-left: 0 !important;
                padding-right: 0 !important;
            }
            .visuals-dashboard {
                padding: 20px 10px !important;
                border-radius: 0 !important;
                border-left: none !important;
                border-right: none !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                width: 100% !important;
            }
        }

        /* Fluid & scalable typography for Journey visual elements as per screen size and font-scale controls */
        #visuals-tab-panel {
            --font-scale: var(--bible-font-scale, 1);
        }

        /* 1. Main Titles & Subtitles */
        #visuals-tab-panel .v-section-main-title,
        #visuals-tab-panel .v-title {
            font-size: calc(clamp(1.4rem, 4vw, 2.2rem) * var(--font-scale)) !important;
        }
        #visuals-tab-panel .v-section-spiritual-subtitle,
        #visuals-tab-panel .v-subtitle {
            font-size: calc(clamp(0.85rem, 2.5vw, 1.1rem) * var(--font-scale)) !important;
        }

        /* 2. Theological Atlas Domain Cards */
        #visuals-tab-panel .v-atlas-chapter-name {
            font-size: calc(clamp(1.0rem, 3vw, 1.25rem) * var(--font-scale)) !important;
        }
        #visuals-tab-panel .v-atlas-chapter-purpose {
            font-size: calc(clamp(0.9rem, 2.5vw, 1.06rem) * var(--font-scale)) !important;
        }
        #visuals-tab-panel .v-atlas-chapter-topic {
            font-size: calc(clamp(0.72rem, 2vw, 0.8rem) * var(--font-scale)) !important;
        }

        /* 3. Names & Attribute Cards */
        #visuals-tab-panel .v-s03-chapter-title {
            font-size: calc(clamp(1.4rem, 4vw, 2rem) * var(--font-scale)) !important;
        }
        #visuals-tab-panel .v-s03-chapter-desc {
            font-size: calc(clamp(0.9rem, 2.5vw, 1.12rem) * var(--font-scale)) !important;
        }
        #visuals-tab-panel .v-s03-name-title,
        #visuals-tab-panel .v-s03-attr-title,
        #visuals-tab-panel .v-s03-relational-action,
        #visuals-tab-panel .v-s03-jesus-title-text {
            font-size: calc(clamp(1.0rem, 3vw, 1.2rem) * var(--font-scale)) !important;
        }
        #visuals-tab-panel .v-s03-name-meaning {
            font-size: calc(clamp(0.75rem, 2.2vw, 0.85rem) * var(--font-scale)) !important;
        }
        #visuals-tab-panel .v-s03-name-app {
            font-size: calc(clamp(0.75rem, 2.2vw, 0.82rem) * var(--font-scale)) !important;
        }

        /* 4. Fruit Garden */
        #visuals-tab-panel .v-fruit-header-title {
            font-size: calc(clamp(1.1rem, 3vw, 1.35rem) * var(--font-scale)) !important;
        }
        #visuals-tab-panel .v-fruit-essence {
            font-size: calc(clamp(0.85rem, 2.5vw, 1.0rem) * var(--font-scale)) !important;
        }
        #visuals-tab-panel .v-reveal-title {
            font-size: calc(clamp(1.5rem, 4.5vw, 2.5rem) * var(--font-scale)) !important;
        }
        #visuals-tab-panel .v-reveal-scripture {
            font-size: calc(clamp(1.1rem, 3vw, 1.45rem) * var(--font-scale)) !important;
        }

        /* 5. Explorer Quotes & Mobile Labels */
        #visuals-tab-panel .v-quote-text {
            font-size: calc(clamp(1.0rem, 3vw, 1.35rem) * var(--font-scale)) !important;
        }
        #visuals-tab-panel .v-quote-ref {
            font-size: calc(clamp(0.75rem, 2vw, 0.9rem) * var(--font-scale)) !important;
        }
        #visuals-tab-panel .v-header-name {
            font-size: calc(clamp(0.75rem, 2.2vw, 0.95rem) * var(--font-scale)) !important;
        }
        #visuals-tab-panel .v-mobile-label,
        #visuals-tab-panel .v-cell-header-mobile {
            font-size: calc(clamp(0.5rem, 1.8vw, 0.72rem) * var(--font-scale)) !important;
        }

        /* ── MOBILE SCREEN TOP BANNER OPTIMIZATION ── */
        @media (max-width: 768px) {
            #main-header {
                padding: max(44px, env(safe-area-inset-top, 0px)) 12px 16px !important;
                border-bottom-left-radius: 20px !important;
                border-bottom-right-radius: 20px !important;
                min-height: 0 !important;
                height: auto !important;
            }

            .header-lockup {
                gap: 6px !important;
                padding-top: 8px !important;
                padding-bottom: 2px !important;
                justify-content: center !important;
                max-width: calc(100% - 24px) !important;
                margin: 0 auto !important;
            }

            .header-text-group {
                display: grid !important;
                grid-template-columns: auto auto !important;
                justify-content: center !important;
                align-items: center !important;
                column-gap: 12px !important;
                row-gap: 6px !important;
                width: 100% !important;
                margin: 0 auto !important;
            }

            .dove-icon {
                grid-row: 1 !important;
                grid-column: 1 !important;
                width: 44px !important;
                height: 44px !important;
                margin: 0 !important;
                animation: none !important;
                flex-shrink: 0 !important;
                justify-self: end !important;
                filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35)) !important;
            }

            .main-title {
                grid-row: 1 !important;
                grid-column: 2 !important;
                width: min-content !important;
                white-space: normal !important;
                text-align: left !important;
                font-family: 'Playfair Display', 'Cormorant Garamond', 'EB Garamond', serif !important;
                font-size: clamp(1.35rem, 5.8vw, 1.75rem) !important;
                font-weight: 700 !important;
                color: #FFF9EC !important;
                line-height: 1.12 !important;
                margin: 0 !important;
                justify-self: start !important;
                text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
            }

            .hero-subtitle {
                grid-row: 2 !important;
                grid-column: 1 / -1 !important;
                display: block !important;
                font-size: clamp(0.7rem, 3.2vw, 0.8rem) !important;
                line-height: 1.2 !important;
                color: rgba(237, 243, 255, 0.72) !important;
                margin-top: 2px !important;
                justify-self: center !important;
                text-align: center !important;
                letter-spacing: 0.12em !important;
            }

            .header-divider {
                grid-row: 3 !important;
                grid-column: 1 / -1 !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                gap: 8px !important;
                width: 60% !important;
                margin: 4px auto !important;
                justify-self: center !important;
            }

            .header-divider .divider-line {
                flex: 1 !important;
                height: 1px !important;
                background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent) !important;
            }

            .header-divider .compass-star {
                width: 12px !important;
                height: 12px !important;
                color: rgba(212, 175, 55, 0.75) !important;
                flex-shrink: 0 !important;
            }

            .header-quote {
                grid-row: 4 !important;
                grid-column: 1 / -1 !important;
                display: block !important;
                font-family: 'Cormorant Garamond', 'EB Garamond', serif !important;
                font-size: clamp(0.82rem, 3.4vw, 0.96rem) !important;
                line-height: 1.4 !important;
                color: rgba(255, 249, 236, 0.88) !important;
                font-style: italic !important;
                max-width: 280px !important;
                margin: 2px auto 0 !important;
                justify-self: center !important;
                text-align: center !important;
            }

            .header-citation {
                grid-row: 5 !important;
                grid-column: 1 / -1 !important;
                display: block !important;
                font-size: clamp(0.68rem, 2.8vw, 0.76rem) !important;
                color: rgba(212, 175, 55, 0.85) !important;
                margin: 2px auto 0 !important;
                justify-self: center !important;
                text-align: center !important;
                letter-spacing: 0.04em !important;
            }

            .mobile-subtitle {
                grid-row: 6 !important;
                grid-column: 1 / -1 !important;
                display: block !important;
                font-family: 'Cormorant Garamond', 'EB Garamond', serif !important;
                font-size: clamp(0.72rem, 3vw, 0.82rem) !important;
                color: rgba(255, 249, 236, 0.6) !important;
                margin: 2px auto 0 !important;
                justify-self: center !important;
                text-align: center !important;
                font-style: italic !important;
            }
        }

        /* Space-saving phone screen header banner overrides */
        @media (max-width: 480px) {
            #main-header {
                padding: max(20px, env(safe-area-inset-top, 0px)) 12px 12px !important;
                border-bottom-left-radius: 16px !important;
                border-bottom-right-radius: 16px !important;
            }

            .header-lockup {
                padding-top: 0px !important;
                padding-bottom: 2px !important;
            }

            .header-text-group {
                row-gap: 0 !important;
                column-gap: 10px !important;
            }

            .dove-icon {
                width: 36px !important;
                height: 36px !important;
                filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)) !important;
            }

            .main-title {
                font-size: clamp(1.15rem, 5vw, 1.35rem) !important;
                line-height: 1.1 !important;
            }

            /* Hide quote, citation, and header-subtitle. Keep divider and mobile-subtitle */
            header#main-header.study-header .header-subtitle,
            header#main-header.study-header .header-text-group .header-quote,
            header#main-header.study-header .header-text-group .header-citation {
                display: none !important;
            }

            .header-divider {
                margin: 4px auto 2px auto !important;
            }

            .mobile-subtitle {
                margin: 2px auto 0 !important;
            }
        }

        /* Final visibility guard for Section 07 total navigation arrows.
           This sits late so desktop and phone overrides cannot wash out the glyphs. */
        html body .v-atlas-slide .v-god-premium-section-header .v-god-section-actions {
            display: inline-grid !important;
            grid-template-columns: max-content 48px 48px !important;
            align-items: center !important;
            justify-content: end !important;
            gap: 12px !important;
            overflow: visible !important;
            isolation: isolate !important;
        }

        html body .v-atlas-slide .v-god-premium-section-header .v-god-section-actions span {
            color: #ffe6a8 !important;
            opacity: 1 !important;
            text-shadow: 0 2px 14px rgba(0, 0, 0, 0.38), 0 0 16px rgba(242, 199, 95, 0.3) !important;
            white-space: nowrap !important;
        }

        html body .v-atlas-slide .v-god-premium-section-header .v-god-scroll-btn {
            appearance: none !important;
            -webkit-appearance: none !important;
            display: inline-grid !important;
            place-items: center !important;
            width: 48px !important;
            min-width: 48px !important;
            height: 48px !important;
            min-height: 48px !important;
            padding: 0 !important;
            border: 2px solid rgba(255, 222, 140, 0.78) !important;
            border-radius: 999px !important;
            background:
                radial-gradient(circle at 50% 28%, rgba(255, 245, 214, 0.22), transparent 48%),
                linear-gradient(180deg, rgba(23, 43, 84, 0.98), rgba(7, 18, 38, 0.98)) !important;
            color: #fff3c4 !important;
            font-family: Georgia, serif !important;
            font-size: 1.7rem !important;
            font-weight: 800 !important;
            line-height: 1 !important;
            opacity: 1 !important;
            visibility: visible !important;
            text-shadow: 0 0 10px rgba(255, 226, 148, 0.6) !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 249, 236, 0.22),
                0 0 0 1px rgba(7, 18, 38, 0.5),
                0 0 22px rgba(242, 199, 95, 0.24),
                0 12px 26px rgba(0, 0, 0, 0.36) !important;
            transform: none !important;
            z-index: 3 !important;
        }

        html body .v-atlas-slide .v-god-premium-section-header .v-god-scroll-btn:hover,
        html body .v-atlas-slide .v-god-premium-section-header .v-god-scroll-btn:focus-visible {
            border-color: #fff0b8 !important;
            background:
                radial-gradient(circle at 50% 28%, rgba(255, 245, 214, 0.34), transparent 48%),
                linear-gradient(180deg, rgba(34, 68, 135, 0.98), rgba(11, 32, 70, 0.98)) !important;
            color: #fff9ec !important;
            box-shadow:
                inset 0 1px 0 rgba(255, 249, 236, 0.28),
                0 0 0 1px rgba(255, 222, 140, 0.18),
                0 0 30px rgba(242, 199, 95, 0.38),
                0 14px 30px rgba(0, 0, 0, 0.4) !important;
        }

        @media (max-width: 768px) {
            html body .v-atlas-slide .v-god-premium-section-header .v-god-section-actions {
                grid-template-columns: minmax(0, 1fr) 42px 42px !important;
                justify-content: stretch !important;
                gap: 9px !important;
                width: 100% !important;
            }

            html body .v-atlas-slide .v-god-premium-section-header .v-god-scroll-btn {
                width: 42px !important;
                min-width: 42px !important;
                height: 42px !important;
                min-height: 42px !important;
                font-size: 1.45rem !important;
            }
        }

        /* Phone Atlas section headers: title gets its own row, followed by
           icon + supporting copy. This prevents "Anchor Doctrines" from being
           clipped in the narrow phone layout. */
        @media (max-width: 600px) {
            html body .v-atlas-slide .v-god-library-section > header.v-god-premium-section-header {
                display: grid !important;
                grid-template-columns: 1fr !important;
                gap: 14px !important;
                overflow: visible !important;
                padding: 16px 12px 14px !important;
                text-align: center !important;
                margin: 12px 0 12px !important;
                border-radius: 12px !important;
            }

            html body .v-atlas-slide .v-god-section-heading {
                display: grid !important;
                grid-template-columns: 64px minmax(0, 1fr) !important;
                grid-template-areas:
                    "title title"
                    "icon subtitle" !important;
                align-items: center !important;
                gap: 14px 16px !important;
                width: 100% !important;
                min-width: 0 !important;
            }

            html body .v-atlas-slide .v-god-section-heading > .v-god-section-icon {
                grid-area: icon !important;
                width: 58px !important;
                height: 58px !important;
                margin: 0 !important;
            }

            html body .v-atlas-slide .v-god-section-heading > .v-god-section-icon svg {
                width: 34px !important;
                height: 34px !important;
            }

            html body .v-atlas-slide .v-god-section-heading > div:not(.v-god-section-icon) {
                display: contents !important;
            }

            html body .v-atlas-slide .v-god-library-section .v-god-premium-section-header h4 {
                grid-area: title !important;
                width: 100% !important;
                max-width: none !important;
                min-width: 0 !important;
                margin: 0 !important;
                font-size: calc(clamp(1.15rem, 5.5vw, 1.35rem) * var(--font-scale)) !important;
                line-height: 1.15 !important;
                letter-spacing: 0.055em !important;
                text-align: center !important;
                white-space: normal !important;
                overflow: visible !important;
                text-overflow: clip !important;
                overflow-wrap: normal !important;
                word-break: normal !important;
                hyphens: none !important;
            }

            html body .v-atlas-slide .v-god-section-heading p {
                grid-area: subtitle !important;
                width: 100% !important;
                max-width: none !important;
                margin: 0 !important;
                color: rgba(255, 249, 236, 0.9) !important;
                font-size: calc(clamp(0.78rem, 3.8vw, 0.88rem) * var(--font-scale)) !important;
                line-height: 1.35 !important;
                text-align: center !important;
                white-space: normal !important;
                overflow-wrap: break-word !important;
                word-break: normal !important;
                hyphens: none !important;
            }

            html body .v-atlas-slide .v-god-premium-section-header .v-god-section-actions {
                justify-self: stretch !important;
                width: 100% !important;
            }

            /* Minimizing margins and padding on phone viewports */
            .visuals-dashboard {
                padding: 10px 4px !important;
            }
            .v-atlas-shell {
                width: 100% !important;
                max-width: 100% !important;
                margin-inline: 0 !important;
                gap: 12px !important;
                padding-inline: 0 !important;
            }

            /* Snapping cards to prevent partial cutoff layout */
            .v-atlas-slide .v-god-major-grid.v-god-scroll-rail {
                grid-auto-columns: calc(100% - 16px) !important;
                scroll-snap-type: x mandatory !important;
                gap: 16px !important;
                padding-inline: 8px !important;
            }
            .v-atlas-slide .v-god-major-card {
                scroll-snap-align: center !important;
                margin-inline: 0 !important;
                width: 100% !important;
            }
        }