/* ===========================================================
   GT · Phone-First Interactive Patterns · Showcase
   Modern, phone-first, dark-themed. No external fonts.
   =========================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── Global scrollbar styling (GT standard) ─────────────────
   Slim (8px), sage-tinted thumb, transparent track. Applied to every
   scrollable element across the course — drawer, stage, panels, modals,
   popups. Overrides the chunky OS-default scrollbar on Chrome/Edge/Safari
   and Firefox alike. Palette uses CSS variables so individual projects
   (e.g. client courses with different accent colors) can override in
   one place without touching every selector.
   Locked as GT standard 2026-04-18 — Top Vibe #10. */
:root {
    --gt-scrollbar-thumb: rgba(168, 196, 180, 0.35);
    --gt-scrollbar-thumb-hover: rgba(168, 196, 180, 0.55);
    --gt-scrollbar-track: transparent;
}
html {
    scrollbar-width: thin;
    scrollbar-color: var(--gt-scrollbar-thumb) var(--gt-scrollbar-track);
}
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
*::-webkit-scrollbar-track {
    background: var(--gt-scrollbar-track);
}
*::-webkit-scrollbar-thumb {
    background: var(--gt-scrollbar-thumb);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
    background: var(--gt-scrollbar-thumb-hover);
    background-clip: content-box;
    border: 2px solid transparent;
}
*::-webkit-scrollbar-corner {
    background: transparent;
}

:root {
    /* ── Surface system ── */
    --bg: #0b1324;
    --bg-elev: #141d33;
    --bg-card: #1b2440;
    --line: rgba(255,255,255,0.08);
    --line-strong: rgba(255,255,255,0.16);

    /* ── Text system ── */
    --ink: #f7f9fc;
    --ink-soft: #b5bed1;
    --ink-muted: #7a849a;

    /* ── Accent palette (swap these to re-theme a course) ── */
    --accent-1: #8b80ff;      /* primary — buttons, active states, progress */
    --accent-2: #4ecdc4;      /* secondary — success, highlights, kickers */
    --accent-3: #fd79a8;      /* tertiary — warnings, scenario labels, emphasis */
    --accent-4: #74b9ff;      /* quaternary — links, info, variety */
    --accent-5: #ffbf4d;      /* quinary — gold, stars, celebration */

    /* ── RGB triplets for alpha blending (must match accents above) ── */
    --a1: 139,128,255;
    --a2: 78,205,196;
    --a3: 253,121,168;
    --a4: 116,185,255;
    --a5: 255,191,77;

    /* ── Mapped aliases (so existing code still works) ── */
    --violet: var(--accent-1);
    --violet-deep: #6c5ce7;
    --lavender: #a29bfe;
    --teal: var(--accent-2);
    --coral: var(--accent-3);
    --gold: var(--accent-5);
    --lime: #a3e635;
    --sky: var(--accent-4);
    --rose: #fb7185;

    /* ── Shape ── */
    --radius: 14px;
    --radius-lg: 22px;
}

/* ── THEME PRESETS ──────────────────────────────────────────
   Uncomment ONE block below to re-theme the entire course.
   Or create your own — just swap the 5 accents + surfaces.
   ─────────────────────────────────────────────────────────── */

/* Warm Sunrise
:root {
    --bg: #1a1207; --bg-elev: #2a1f10; --bg-card: #362a18;
    --line: rgba(255,220,150,0.08); --line-strong: rgba(255,220,150,0.16);
    --ink: #fff8ee; --ink-soft: #d4c4a8; --ink-muted: #9a8b70;
    --accent-1: #f59e0b; --accent-2: #ef4444; --accent-3: #ec4899;
    --accent-4: #f97316; --accent-5: #fbbf24;
    --a1: 245,158,11; --a2: 239,68,68; --a3: 236,72,153;
    --a4: 249,115,22; --a5: 251,191,36;
}
*/

/* Ocean Breeze
:root {
    --bg: #0a192f; --bg-elev: #112240; --bg-card: #1d3461;
    --line: rgba(100,200,255,0.08); --line-strong: rgba(100,200,255,0.16);
    --ink: #e6f1ff; --ink-soft: #8892b0; --ink-muted: #5a6580;
    --accent-1: #64ffda; --accent-2: #5eead4; --accent-3: #f472b6;
    --accent-4: #38bdf8; --accent-5: #fbbf24;
    --a1: 100,255,218; --a2: 94,234,212; --a3: 244,114,182;
    --a4: 56,189,248; --a5: 251,191,36;
}
*/

/* Light & Airy
:root {
    --bg: #f8f9fb; --bg-elev: #ffffff; --bg-card: #ffffff;
    --line: rgba(0,0,0,0.06); --line-strong: rgba(0,0,0,0.12);
    --ink: #1a1a2e; --ink-soft: #555770; --ink-muted: #8b8da3;
    --accent-1: #6c5ce7; --accent-2: #00b894; --accent-3: #e84393;
    --accent-4: #0984e3; --accent-5: #fdcb6e;
    --a1: 108,92,231; --a2: 0,184,148; --a3: 232,67,147;
    --a4: 9,132,227; --a5: 253,203,110;
}
*/

html, body {
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}
body {
    background: var(--bg);
    color: var(--ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    min-height: 100dvh;
    min-height: 100vh;
    padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px));
}

button, input, select, textarea { font-family: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
input, textarea { user-select: text; -webkit-user-select: text; }

/* =========== SETTINGS PANEL =========== */
.settings-panel {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 300px; max-width: 85vw;
    background: var(--bg-elev);
    border-left: 1px solid var(--line-strong);
    z-index: 30;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    display: flex; flex-direction: column;
}
.settings-panel.open { transform: translateX(0); }
.settings-body { padding: 8px 0; flex: 1; overflow-y: auto; }
.setting-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
}
.setting-row.sub { padding: 10px 20px 14px; }
.setting-label {
    display: flex; align-items: center; gap: 10px;
    font-size: 14px; font-weight: 600; color: var(--ink);
}
.setting-label svg { color: var(--ink-muted); }

/* Toggle switch */
.setting-toggle {
    width: 48px; height: 26px; border-radius: 13px;
    background: rgba(255,255,255,0.1); border: 1px solid var(--line-strong);
    position: relative; cursor: pointer; transition: background .2s;
}
.setting-toggle[aria-pressed="true"] {
    background: var(--accent-1); border-color: var(--accent-1);
}
.toggle-knob {
    position: absolute; top: 2px; left: 2px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #fff; transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.setting-toggle[aria-pressed="true"] .toggle-knob { transform: translateX(22px); }

/* Speed / Theme / Font button groups */
.speed-btns, .theme-btns, .font-btns {
    display: flex; gap: 4px;
}
.speed-btn, .theme-btn, .font-btn {
    padding: 6px 10px; border-radius: 8px;
    font-size: 12px; font-weight: 700;
    background: rgba(255,255,255,0.05); border: 1px solid var(--line);
    color: var(--ink-muted); cursor: pointer;
    transition: all .15s;
}
.speed-btn.active, .theme-btn.active, .font-btn.active {
    background: rgba(var(--a1), 0.15); border-color: var(--accent-1);
    color: var(--accent-1);
}

/* =========== RESOURCES (in drawer) =========== */
.drawer-resources {
    padding: 16px 18px; border-top: 1px solid var(--line-strong);
}
.drawer-resources-title {
    font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
    color: var(--ink-muted); font-weight: 800; margin-bottom: 12px;
}
.drawer-resource-link {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; margin-bottom: 4px;
    border-radius: var(--radius);
    font-size: 13px; font-weight: 600; color: var(--accent-1);
    text-decoration: none; transition: all .15s;
}
.drawer-resource-link:hover, .drawer-resource-link:active {
    background: rgba(var(--a1), 0.10); color: var(--accent-warm);
}
.drawer-resource-link svg { color: var(--accent-1); flex-shrink: 0; transition: color .15s; }
.drawer-resource-link:hover svg, .drawer-resource-link:active svg { color: var(--accent-warm); }

/* =========== GLOSSARY TOOLTIPS =========== */
.glossary-term {
    border-bottom: 1px dashed rgba(var(--a1), 0.6);
    cursor: pointer; position: relative;
    color: var(--accent-1);
    font-weight: 600;
}
.glossary-term:hover { background: rgba(var(--a1), 0.08); }
.glossary-term.active { background: rgba(var(--a1), 0.15); border-bottom-color: var(--accent-1); }
/* Global floating glossary tooltip (outside any clipping container) */
#gt-gloss-tip {
    position: fixed;
    background: var(--bg-elev);
    border: 1px solid var(--accent-1);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 13px; line-height: 1.55; color: var(--ink);
    width: 260px; max-width: 85vw;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    z-index: 9999; pointer-events: none;
    opacity: 0; transition: opacity .2s;
    font-weight: 400;
    display: none;
}
#gt-gloss-tip.show { display: block; opacity: 1; pointer-events: auto; }
#gt-gloss-tip strong {
    display: block; color: var(--accent-1); font-size: 12px;
    letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px;
}
#gt-gloss-tip::after {
    content: ''; position: absolute; width: 10px; height: 10px;
    background: var(--bg-elev);
    border-right: 1px solid var(--accent-1);
    border-bottom: 1px solid var(--accent-1);
    left: 50%; bottom: -6px;
    transform: translateX(-50%) rotate(45deg);
}
#gt-gloss-tip.below::after {
    bottom: auto; top: -6px;
    transform: translateX(-50%) rotate(-135deg);
}

.glossary-tip { display: none; }
.glossary-tip strong { color: var(--accent-1); display: block; margin-bottom: 4px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }

/* =========== LIGHT THEME =========== */
body.light {
    --bg: #f5f6fa;
    --bg-elev: #ffffff;
    --bg-card: #ffffff;
    --line: rgba(0,0,0,0.06);
    --line-strong: rgba(0,0,0,0.1);
    --ink: #1a1a2e;
    --ink-soft: #4a4d65;
    --ink-muted: #8b8da3;
    --accent-1: #6c5ce7;
    --accent-2: #00b894;
    --accent-3: #e84393;
    --accent-4: #0984e3;
    --accent-5: #fdcb6e;
    --a1: 108,92,231;
    --a2: 0,184,148;
    --a3: 232,67,147;
    --a4: 9,132,227;
    --a5: 253,203,110;
    --violet-deep: #5b4cdb;
    --lavender: #8577e6;
    --rose: #e84393;
}
body.light .atmosphere { opacity: 0.4; }
body.light .atm-orb { opacity: 0.04; filter: blur(120px); }
body.light .vignette {
    background: radial-gradient(ellipse at center, transparent 60%, rgba(245,246,250,0.6) 100%);
}
body.light .topbar, body.light .bottom-nav {
    background: rgba(255,255,255,0.85);
}
body.light .setting-toggle { background: rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.12); }
body.light .speed-btn, body.light .theme-btn, body.light .font-btn {
    background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); color: var(--ink-muted);
}
body.light .cs-hero-overlay {
    background: linear-gradient(to top, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.4) 60%, transparent 100%);
}
body.light .cs-hero-sub { color: var(--ink-soft); }
body.light .cs-bleed::before { background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(108,92,231,0.15)); }
body.light .cs-bleed-heading { color: var(--ink); text-shadow: none; }
body.light .cs-bleed-sub { color: var(--ink-soft); }
body.light .cs-closing::before { background: linear-gradient(135deg, rgba(245,246,250,0.92), rgba(108,92,231,0.1)); }
body.light .cs-closing-title { color: var(--ink); -webkit-text-fill-color: var(--ink); }
body.light .cs-closing-sub { color: var(--ink-soft); }
body.light .cs-closing-next { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); color: var(--ink-soft); }
body.light .cs-closing-next strong { color: var(--accent-2); -webkit-text-fill-color: var(--accent-2); }
body.light .tf-card { background: #fff; border-color: rgba(0,0,0,0.08); }
body.light .streak-panel { background: #fff; border-color: rgba(0,0,0,0.06); }
body.light .streak-opts button { background: #f8f9fb; border-color: rgba(0,0,0,0.06); }
body.light .feedback-box { background: rgba(0,184,148,0.08); border-color: rgba(0,184,148,0.15); }
body.light .feedback-box.miss { background: rgba(232,67,147,0.06); border-color: rgba(232,67,147,0.12); }
body.light .cs-scenario-img::after { background: linear-gradient(to top, #fff 0%, rgba(255,255,255,0.5) 50%, transparent 100%); }
body.light .cs-vid-controls { background: rgba(255,255,255,0.9); }
body.light .cs-vid-play { color: var(--accent-1); }

/* =========== AUDIO INDICATOR =========== */
.audio-indicator {
    display: none; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: rgba(var(--a1), 0.1);
    border: 1px solid rgba(var(--a1), 0.2);
    border-radius: 999px;
    font-size: 11px; font-weight: 700; color: var(--accent-1);
    letter-spacing: 0.5px;
    position: fixed; top: calc(56px + env(safe-area-inset-top, 0px) + 8px);
    right: 12px; z-index: 9;
}
.audio-indicator.active { display: flex; }
.audio-bars {
    display: flex; gap: 2px; align-items: flex-end; height: 12px;
}
.audio-bar {
    width: 3px; border-radius: 2px;
    background: var(--accent-1);
    animation: audioBar 0.8s ease-in-out infinite;
}
.audio-bar:nth-child(1) { height: 4px; animation-delay: 0s; }
.audio-bar:nth-child(2) { height: 8px; animation-delay: 0.15s; }
.audio-bar:nth-child(3) { height: 5px; animation-delay: 0.3s; }
@keyframes audioBar {
    0%, 100% { transform: scaleY(0.5); }
    50% { transform: scaleY(1.2); }
}

/* =========== FONT SIZE ADJUSTMENTS =========== */
body.font-sm { font-size: 14px; }
body.font-lg { font-size: 18px; }
body.font-sm .pat-title { font-size: 22px; }
body.font-lg .pat-title { font-size: 30px; }

/* =========== IMMERSIVE ATMOSPHERE =========== */

/* Ambient gradient orbs — slow, dreamy, barely there */
.atmosphere {
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.atm-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.06;
    will-change: transform;
}
.atm-orb:nth-child(1) {
    width: 500px; height: 500px;
    background: var(--accent-1);
    top: -15%; left: -10%;
    animation: orbDrift1 30s ease-in-out infinite;
}
.atm-orb:nth-child(2) {
    width: 400px; height: 400px;
    background: var(--accent-2);
    bottom: -10%; right: -10%;
    animation: orbDrift2 25s ease-in-out infinite;
}
.atm-orb:nth-child(3) {
    width: 350px; height: 350px;
    background: var(--accent-3);
    top: 40%; left: 60%;
    animation: orbDrift3 35s ease-in-out infinite;
}
@keyframes orbDrift1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(60px, 40px) scale(1.1); }
    66% { transform: translate(-30px, 70px) scale(0.95); }
}
@keyframes orbDrift2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-50px, -30px) scale(1.05); }
    66% { transform: translate(40px, -60px) scale(0.9); }
}
@keyframes orbDrift3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.08); }
    66% { transform: translate(-60px, 20px) scale(0.92); }
}

/* Vignette — focuses attention toward center */
.vignette {
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(11,19,36,0.5) 100%);
}

/* Glass chrome — topbar and bottombar feel like a real app shell */
.topbar, .bottom-nav {
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
}
@media (min-width: 720px) {
    .topbar::after {
        content: ''; position: absolute; bottom: -20px; left: 0; right: 0; height: 20px;
        background: linear-gradient(to bottom, rgba(var(--a1), 0.08), transparent);
        pointer-events: none;
    }
    .bottom-nav::before {
        content: ''; position: absolute; top: -20px; left: 0; right: 0; height: 20px;
        background: linear-gradient(to top, rgba(var(--a1), 0.08), transparent);
        pointer-events: none;
    }
}

/* Slide counter subtle glow on change */
.nav-counter {
    transition: text-shadow .4s ease;
}
.stage-inner.entering ~ .nav-counter,
.nav-counter.pulse {
    text-shadow: 0 0 12px rgba(var(--a1), 0.5);
}

/* Mobile: reduce orbs to save GPU, keep vignette */
@media (max-width: 719px) {
    .atm-orb { opacity: 0.04; filter: blur(80px); }
    .atm-orb:nth-child(3) { display: none; }
}

/* Respect reduced motion — kill ambient animations */
@media (prefers-reduced-motion: reduce) {
    .atm-orb { animation: none !important; opacity: 0.03; }
}

/* =========== Top bar (sticky, not fixed — lets browser chrome auto-hide) =========== */
.topbar {
    position: sticky; top: 0;
    height: calc(56px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    display: flex; align-items: center; justify-content: space-between;
    padding-left: 12px; padding-right: 12px;
    background: rgba(11,19,36,0.85);
    border-bottom: 1px solid var(--line);
    z-index: 10;
}
.topbar-meta { flex: 1; }
.icon-btn {
    width: 40px; height: 40px; border-radius: 10px;
    position: relative;
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-soft);
    transition: background .15s, color .15s;
}
.icon-btn:hover, .icon-btn:active { background: rgba(255,255,255,0.08); color: var(--ink); }
.topbar-actions { display: flex; align-items: center; gap: 2px; }

/* ── Menu hint dot + bubble (first-launch cue) ── */
.menu-hint-dot {
    position: absolute; top: 6px; right: 6px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent-2);
    box-shadow: 0 0 0 0 rgba(var(--a2), 0.7);
    animation: menuHintPulse 2s ease-out infinite;
    display: none;
}
.menu-hint-dot.show { display: block; }
@keyframes menuHintPulse {
    0%   { box-shadow: 0 0 0 0 rgba(var(--a2), 0.7); transform: scale(1); }
    70%  { box-shadow: 0 0 0 10px rgba(var(--a2), 0); transform: scale(1.3); }
    100% { box-shadow: 0 0 0 0 rgba(var(--a2), 0); transform: scale(1); }
}
.menu-hint-bubble {
    position: absolute; top: calc(56px + env(safe-area-inset-top, 0px) + 8px);
    left: 12px; z-index: 15;
    padding: 8px 14px;
    background: var(--accent-1);
    color: #fff;
    border-radius: 10px;
    font-size: 12.5px; font-weight: 600;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 0 1px rgba(var(--a1), 0.3);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .3s, transform .3s;
    pointer-events: none;
    white-space: nowrap;
}
.menu-hint-bubble::before {
    content: ''; position: absolute; top: -5px; left: 16px;
    width: 10px; height: 10px;
    background: var(--accent-1);
    transform: rotate(45deg);
}
.menu-hint-bubble.show {
    opacity: 1; transform: translateY(0);
}

/* =========== Stage (natural flow — body scrolls) =========== */
.stage {
    padding: 20px 16px 28px;
    outline: none;
    min-height: calc(100dvh - 56px - 74px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    touch-action: pan-y;
    /* Vertically center slide content on the stage. If content is taller than
       the viewport, flex honors natural layout and scrolls normally. */
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.stage-inner {
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: opacity .4s ease, transform .4s ease;
}
.stage-inner.entering {
    opacity: 0;
    transform: translateY(20px);
}
@media (min-width: 720px) {
    .stage {
        padding: 32px 24px 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .stage-inner { max-width: 640px; gap: 20px; zoom: 1.1; }
}

.pat-title {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.4px;
    line-height: 1.15;
}
.pat-tagline {
    color: var(--ink-soft);
    font-size: 14px;
    letter-spacing: 0.2px;
    margin-top: 2px;
}
@media (min-width: 720px) {
    .pat-title { font-size: 32px; }
    .pat-tagline { font-size: 15px; }
}

.lesson-bubble {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    position: relative;
}

.lesson-topic {
    font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase;
    color: var(--ink-muted); font-weight: 700;
    margin-bottom: 6px;
}
.lesson-body {
    font-size: 16px; line-height: 1.55; color: var(--ink);
}
.lesson-hint {
    font-size: 13px; color: var(--ink-soft); margin-top: 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.04);
    border-left: 3px solid var(--violet);
    border-radius: 6px;
}
.lesson-hint.teal { border-left-color: var(--teal); }
.lesson-hint.gold { border-left-color: var(--gold); }
.lesson-hint.coral { border-left-color: var(--coral); }
.lesson-hint.lime { border-left-color: var(--lime); }

/* =========== Bottom nav =========== */
.bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0;
    height: calc(74px + env(safe-area-inset-bottom, 0px));
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: rgba(11,19,36,0.85);
    border-top: 1px solid var(--line);
    z-index: 10;
}
.nav-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 11px 18px; border-radius: var(--radius);
    font-size: 14px; font-weight: 700; letter-spacing: 0.3px;
    background: rgba(255,255,255,0.06);
    color: var(--ink-soft);
    border: 1px solid var(--line);
    min-width: 88px; justify-content: center;
    transition: all .15s;
}
.nav-btn:hover, .nav-btn:active { background: rgba(255,255,255,0.1); color: var(--ink); }
.nav-btn.primary {
    background: var(--violet-deep);
    color: #fff; border-color: var(--violet-deep);
}
.nav-btn.primary:hover, .nav-btn.primary:active { background: var(--violet); }
.nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.nav-counter {
    flex: 1;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: var(--ink-soft);
}

/* =========== Drawer (TOC) =========== */
.drawer, .infopanel {
    position: fixed; top: 0; bottom: 0; right: 0;
    width: min(360px, 85vw);
    background: var(--bg-elev);
    border-left: 1px solid var(--line-strong);
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    z-index: 20;
    display: flex; flex-direction: column;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.drawer.open, .infopanel.open { transform: translateX(0); }

/* Desktop: drawer (menu) opens from LEFT, info panel stays on RIGHT */
@media (min-width: 720px) {
    .drawer {
        right: auto; left: 0;
        border-left: none;
        border-right: 1px solid var(--line-strong);
        transform: translateX(-100%);
    }
    .drawer.open { transform: translateX(0); }
}

.drawer-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
}
.drawer-header h2 { font-size: 16px; font-weight: 800; letter-spacing: -0.2px; }

.drawer-list {
    list-style: none; padding: 4px 0; overflow-y: auto; flex: 1;
}

/* Section headers */
.drawer-section { list-style: none; }
.drawer-section-header {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 14px 18px;
    background: none; border: none; border-bottom: 1px solid var(--line);
    cursor: pointer; text-align: left;
    transition: background .15s;
}
.drawer-section-header:hover { background: rgba(255,255,255,0.03); }
.drawer-section-header.active .drawer-section-num {
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.drawer-section-num {
    font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
    color: var(--ink-muted); font-weight: 800; white-space: nowrap;
}
.drawer-section-title {
    font-size: 15px; font-weight: 700; color: var(--ink); flex: 1;
}
.drawer-section-chevron {
    color: var(--ink-muted); flex-shrink: 0;
    transition: transform .25s;
}
.drawer-section-header.expanded .drawer-section-chevron {
    transform: rotate(180deg); color: var(--accent-1);
}

/* Collapsible slide list */
.drawer-section-slides {
    list-style: none; padding: 0; margin: 0;
    max-height: 0; overflow: hidden;
    transition: max-height .3s ease;
}
.drawer-section-slides.open {
    max-height: 600px;
}

/* Individual slide items */
.drawer-section-slides li {
    padding: 10px 18px 10px 36px;
    display: flex; align-items: center; gap: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    cursor: pointer;
    transition: background .15s;
    font-size: 13px;
}
.drawer-section-slides li:hover, .drawer-section-slides li:active { background: rgba(255,255,255,0.04); }
.drawer-section-slides li.current {
    background: rgba(var(--a1),0.1);
    border-left: 3px solid var(--accent-1);
    padding-left: 33px;
}
.drawer-list .d-num {
    font-size: 10px; letter-spacing: 1px;
    color: var(--ink-muted); font-weight: 700; font-variant-numeric: tabular-nums;
    min-width: 20px;
}
.drawer-list .d-title { font-size: 13px; font-weight: 600; color: var(--ink); flex: 1; }
.drawer-list .d-cat {
    font-size: 9px; letter-spacing: 1px; text-transform: uppercase;
    color: var(--accent-1); margin-left: auto; font-weight: 700;
}
.drawer-footer {
    padding: 12px 18px;
    font-size: 12px; color: var(--ink-muted);
    border-top: 1px solid var(--line);
    line-height: 1.5;
}

.infopanel .info-body {
    padding: 18px;
    overflow-y: auto;
    flex: 1;
}
.info-section { margin-bottom: 18px; }
.info-section h3 {
    font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--ink-muted); font-weight: 700; margin-bottom: 6px;
}
.info-section p, .info-section li {
    font-size: 13.5px; line-height: 1.5; color: var(--ink-soft);
}
.info-section ul { padding-left: 18px; }
.info-section li { margin-bottom: 4px; }

.scrim {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
    z-index: 15;
}
.scrim.on { opacity: 1; pointer-events: auto; }

/* Resume / Restart modal */
.resume-modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    z-index: 100;
    padding: 20px;
    animation: fadeIn .25s;
}
.resume-modal-card {
    background: var(--bg-elev);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    max-width: 420px; width: 100%;
    display: flex; flex-direction: column; gap: 14px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
}
.resume-modal-title { font-size: 20px; font-weight: 800; letter-spacing: -0.3px; }
.resume-modal-body { font-size: 15px; color: var(--ink-soft); line-height: 1.5; }
.resume-modal-body strong { color: var(--ink); }
.resume-modal-btns { display: flex; gap: 10px; margin-top: 4px; }
.resume-modal-btns .big-btn { flex: 1; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* =========== Shared demo widgets =========== */

/* -- Cards, buttons, common UI -- */
.tap-card {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 20px;
    cursor: pointer;
    transition: all .2s;
    min-height: 120px;
    display: flex; flex-direction: column; justify-content: center;
    position: relative;
}
.tap-card:hover, .tap-card:active { border-color: var(--violet); background: rgba(var(--a1),0.06); }
.tap-card .card-hint {
    font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--violet); font-weight: 700; margin-bottom: 8px;
}
.tap-card .card-face {
    font-size: 16px; line-height: 1.5;
}

.pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: rgba(var(--a1),0.15);
    color: var(--violet);
    border: 1px solid rgba(var(--a1),0.35);
    border-radius: 999px;
    font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
    font-weight: 700;
}
.pill.teal { background: rgba(var(--a2),0.12); color: var(--teal); border-color: rgba(var(--a2),0.35); }
.pill.gold { background: rgba(var(--a5),0.12); color: var(--gold); border-color: rgba(var(--a5),0.35); }
.pill.coral { background: rgba(var(--a3),0.12); color: var(--coral); border-color: rgba(var(--a3),0.35); }
.pill.lime { background: rgba(163,230,53,0.12); color: var(--lime); border-color: rgba(163,230,53,0.35); }

.big-btn {
    display: block; width: 100%;
    padding: 14px 20px;
    background: var(--violet-deep);
    color: #fff; font-weight: 700; font-size: 15px;
    border-radius: var(--radius);
    transition: all .15s;
    border: 1px solid var(--violet-deep);
}
.big-btn:hover, .big-btn:active { background: var(--violet); }
.big-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.big-btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.big-btn.ghost:hover { background: rgba(255,255,255,0.05); }
.big-btn.teal { background: var(--teal); color: #0b1324; border-color: var(--teal); }
.big-btn.coral { background: var(--coral); color: #0b1324; border-color: var(--coral); }

.option-btn, .mc-opt {
    display: flex; align-items: center; gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-align: left;
    color: var(--ink);
    font-size: 15px; line-height: 1.45; font-weight: 500;
    transition: all .15s;
    cursor: pointer;
}
.option-btn:hover, .option-btn:active, .mc-opt:hover, .mc-opt:active { background: rgba(var(--a1),0.08); border-color: var(--violet); }

.options-wrap, .mc-opts { display: flex; flex-direction: column; gap: 8px; }
.option-btn.correct, .mc-opt.correct {
    background: rgba(var(--a2),0.12); border-color: var(--teal); color: #d9fffd;
}
.option-btn.correct::before, .mc-opt.correct::before { content: "\2713"; color: var(--teal); font-weight: 700; }
.option-btn.wrong, .mc-opt.wrong {
    background: rgba(251,113,133,0.12); border-color: var(--rose); color: #ffe0e5;
}
.option-btn.wrong::before, .mc-opt.wrong::before { content: "\2717"; color: var(--rose); font-weight: 700; }
.option-btn.selected, .mc-opt.selected { background: rgba(var(--a1),0.12); border-color: var(--violet); }
.option-btn.selected::before, .mc-opt.selected::before { content: "\25CF"; color: var(--violet); font-weight: 700; }
.option-btn:disabled, .mc-opt:disabled { cursor: default; opacity: 0.6; }

.feedback-box {
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px; line-height: 1.5;
    border-left: 3px solid var(--teal);
    background: rgba(var(--a2),0.08);
    color: var(--ink);
}
.feedback-box.miss { border-left-color: var(--gold); background: rgba(var(--a5),0.08); }
.feedback-box strong {
    display: block; font-size: 11px; letter-spacing: 1.3px; text-transform: uppercase;
    font-weight: 700; margin-bottom: 4px;
    color: var(--teal);
}
.feedback-box.miss strong { color: var(--gold); }

/* -- Pattern 1: Flip card -- */
.flip-card {
    perspective: 1200px;
    height: 220px;
    cursor: pointer;
}
.flip-inner {
    position: relative; width: 100%; height: 100%;
    transition: transform .6s cubic-bezier(.4,0,.2,1);
    transform-style: preserve-3d;
}
.flip-card.flipped .flip-inner { transform: rotateY(180deg); }
.flip-face {
    position: absolute; inset: 0;
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.flip-front {
    background: linear-gradient(135deg, #6c5ce7 0%, #8b80ff 100%);
    color: #fff;
}
.flip-back {
    background: linear-gradient(135deg, #1b2440 0%, #2a3556 100%);
    border: 1px solid var(--line-strong);
    color: var(--ink);
    transform: rotateY(180deg);
}
.flip-prompt { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; opacity: 0.9; margin-bottom: 12px; font-weight: 700; }
.flip-q { font-size: 22px; font-weight: 700; line-height: 1.25; }
.flip-a { font-size: 17px; line-height: 1.5; }
.flip-hint-caps { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; opacity: 0.6; margin-top: 16px; }

/* -- Pattern 2: Definition pill -- */
.def-text { font-size: 17px; line-height: 1.65; color: var(--ink); }
.def-text .def-word {
    color: var(--teal);
    font-weight: 700;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    cursor: pointer;
    padding: 2px 2px;
    border-radius: 4px;
}
.def-text .def-word:hover, .def-text .def-word:active { background: rgba(var(--a2),0.12); }
.def-bubble {
    margin-top: 14px;
    background: var(--bg-card);
    border-left: 3px solid var(--teal);
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-soft);
    opacity: 0;
    max-height: 0;
    transition: all .3s ease;
    overflow: hidden;
}
.def-bubble.show { opacity: 1; max-height: 200px; padding: 14px 16px; margin-top: 14px; }
.def-bubble strong { color: var(--teal); display: block; margin-bottom: 4px; font-size: 12px; letter-spacing: 1.3px; text-transform: uppercase; }

/* -- Pattern 3: Accordion -- */
.acc-item {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    transition: all .2s;
}
.acc-q {
    padding: 16px 18px;
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer;
    font-size: 15px; font-weight: 600;
}
.acc-chevron {
    width: 22px; height: 22px;
    transition: transform .25s;
    color: var(--ink-muted);
    flex-shrink: 0;
}
.acc-item.open .acc-chevron { transform: rotate(180deg); }
.acc-body {
    max-height: 0;
    overflow: hidden;
    padding: 0 18px;
    color: var(--ink-soft);
    font-size: 14px; line-height: 1.6;
    transition: all .3s ease;
}
.acc-item.open .acc-body {
    max-height: 300px;
    padding: 0 18px 16px;
}

/* -- Pattern 4: Progressive scroll reveal -- */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s, transform .6s;
}
.reveal.on { opacity: 1; transform: translateY(0); }

/* -- Pattern 6: T/F swipe -- */
.tf-card {
    background: var(--bg-card);
    border: 1px solid var(--line-strong);
    border-radius: 20px;
    padding: 28px 24px;
    min-height: 180px;
    display: flex; flex-direction: column; justify-content: center;
    text-align: center;
    position: relative;
    touch-action: none;
}
.tf-label {
    position: absolute;
    top: 20px;
    padding: 6px 16px; border-radius: 999px;
    font-size: 12px; letter-spacing: 1.5px; font-weight: 800; text-transform: uppercase;
    border-width: 2px; border-style: solid;
    opacity: 0;
    transition: opacity .2s;
}
.tf-label.left { left: 20px; color: var(--rose); border-color: var(--rose); transform: rotate(-8deg); }
.tf-label.right { right: 20px; color: var(--teal); border-color: var(--teal); transform: rotate(8deg); }
.tf-card.swipe-left .tf-label.left { opacity: 1; }
.tf-card.swipe-right .tf-label.right { opacity: 1; }
.tf-card.gone-left { transform: translateX(-120%) rotate(-12deg); opacity: 0; transition: all .35s; }
.tf-card.gone-right { transform: translateX(120%) rotate(12deg); opacity: 0; transition: all .35s; }
.tf-stmt { font-size: 18px; font-weight: 600; line-height: 1.45; }
.tf-nudge {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--ink-muted); font-weight: 700;
    margin-top: 10px; padding: 0 4px;
}

/* -- T/F burst + miss list -- */
.tf-burst {
    position: absolute; top: 50%; left: 50%; pointer-events: none; z-index: 10;
}
.tf-spark {
    position: absolute; width: 8px; height: 8px; border-radius: 50%;
    background: var(--c);
    animation: spark-fly .5s ease-out forwards;
}
@keyframes spark-fly {
    0%   { transform: translate(-50%,-50%) rotate(var(--a)) translateY(0); opacity: 1; }
    100% { transform: translate(-50%,-50%) rotate(var(--a)) translateY(calc(var(--d) * -1)); opacity: 0; }
}
.tf-miss-list {
    margin-top: 12px; padding: 12px 16px;
    background: rgba(255,99,130,0.06); border: 1px solid rgba(255,99,130,0.15);
    border-radius: var(--radius-lg); font-size: 13px; line-height: 1.5;
}
.tf-miss-list strong { color: var(--rose); display: block; margin-bottom: 6px; }
.tf-miss-list ul { margin: 0; padding-left: 18px; }
.tf-miss-list li { margin-bottom: 4px; color: var(--ink-soft); }

/* -- Pattern 8: Star rating -- */
.rate-row { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
.rate-star {
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.05);
    color: var(--ink-muted);
    transition: all .2s;
}
.rate-star.active { background: rgba(var(--a5),0.15); color: var(--gold); transform: scale(1.08); }
.rate-star svg { width: 28px; height: 28px; }

/* -- Pattern 9: Tap-to-order -- */
.order-list { display: flex; flex-direction: column; gap: 8px; }
.order-item {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
    transition: all .2s;
}
.order-item:hover, .order-item:active { background: rgba(var(--a1),0.08); border-color: var(--violet); }
.order-item.picked {
    background: rgba(var(--a2),0.12);
    border-color: var(--teal);
    color: var(--ink);
}
.order-num {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800;
    background: rgba(255,255,255,0.06); color: var(--ink-muted);
    flex-shrink: 0;
}
.order-item.picked .order-num { background: var(--teal); color: #0b1324; }
.order-item.wrong { background: rgba(251,113,133,0.12); border-color: var(--rose); animation: shakeX 0.4s; }
@keyframes shakeX { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* -- Pattern 10: Vertical drag-reorder -- */
.vdrag-list { display: flex; flex-direction: column; gap: 6px; }
.vdrag-item {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 12px;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    transition: box-shadow .2s, transform .2s;
}
.vdrag-item.dragging {
    background: rgba(var(--a1),0.15);
    border-color: var(--violet);
    box-shadow: 0 8px 32px rgba(var(--a1),0.3);
    z-index: 2;
    transform: scale(1.02);
}
.vdrag-handle {
    width: 28px;
    color: var(--ink-muted);
    cursor: grab;
    display: flex; align-items: center; justify-content: center;
}
.vdrag-text { flex: 1; font-size: 15px; }

/* -- Pattern 12: Hotspots -- */
.hotspot-wrap {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    contain: inline-size;
}
.hotspot-stage {
    position: relative;
    background: linear-gradient(135deg, #1b2440 0%, #2a3556 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    aspect-ratio: 4/3;
    overflow: hidden;
}
#hs-info-slot {
    margin-top: 12px;
    overflow-wrap: break-word; word-wrap: break-word;
    min-height: 80px;
}
.hotspot-img-placeholder {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-muted); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; opacity: 0.6;
}
.hotspot {
    position: absolute;
    width: 36px; height: 36px; border-radius: 50%;
    transform: translate(-50%, -50%);
    background: rgba(var(--a1),0.9);
    border: 3px solid #fff;
    box-shadow: 0 0 0 4px rgba(var(--a1),0.4);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 14px;
    cursor: pointer;
    animation: hotspotPulse 2s ease-in-out infinite;
}
.hotspot.tapped {
    background: var(--teal);
    box-shadow: 0 0 0 4px rgba(var(--a2),0.4);
    animation: none;
}
@keyframes hotspotPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(var(--a1),0.4); }
    50% { box-shadow: 0 0 0 10px rgba(var(--a1),0.1); }
}
.hotspot-info {
    position: absolute; left: 12px; right: 12px; bottom: 12px;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(10px);
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13.5px; line-height: 1.5;
    transform: translateY(12px);
    opacity: 0;
    transition: all .3s;
}
.hotspot-info.show { transform: translateY(0); opacity: 1; }
.hotspot-info strong { color: var(--teal); display: block; font-size: 11px; letter-spacing: 1.3px; text-transform: uppercase; margin-bottom: 3px; }

/* -- Pattern 14: Before/After toggle -- */
.ba-wrap {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 18px;
    display: flex; flex-direction: column; gap: 12px;
}
.ba-panel {
    padding: 20px;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    font-size: 15px; line-height: 1.55;
    min-height: 120px;
    transition: all .3s;
}
.ba-panel.after { background: rgba(var(--a2),0.08); }
.ba-label {
    font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700;
    color: var(--ink-muted); margin-bottom: 6px;
}
.ba-panel.after .ba-label { color: var(--teal); }
.ba-toggle {
    display: flex; background: var(--bg); border-radius: 999px; padding: 4px; gap: 2px;
}
.ba-tog-btn {
    flex: 1; padding: 10px 14px; border-radius: 999px;
    font-size: 13px; font-weight: 700; letter-spacing: 0.5px;
    color: var(--ink-muted);
    transition: all .2s;
}
.ba-tog-btn.on { background: var(--violet-deep); color: #fff; }

/* -- Pattern 15: Comparison slider -- */
.compare-wrap {
    position: relative;
    background: linear-gradient(135deg, #1b2440 0%, #2a3556 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    aspect-ratio: 16/10;
    overflow: hidden;
    touch-action: none;
    user-select: none;
}
.compare-layer {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: center;
    padding: 20px;
    font-size: 15px; line-height: 1.4;
}
.compare-after { text-align: left; align-items: flex-start; }
.compare-before { text-align: right; align-items: flex-end; }
.compare-before {
    background: linear-gradient(135deg, #2a3556 0%, #4a5a84 100%);
    color: var(--ink-soft);
}
.compare-after {
    background: linear-gradient(135deg, #0d7a75 0%, #4ecdc4 100%);
    color: #0b1324;
    font-weight: 700;
    clip-path: inset(0 50% 0 0);
}
.compare-handle {
    position: absolute; top: 0; bottom: 0;
    width: 3px; background: #fff;
    left: 50%;
    transform: translateX(-50%);
    cursor: ew-resize;
    box-shadow: 0 0 12px rgba(255,255,255,0.5);
}
.compare-handle::after {
    content: "⇔";
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: #fff; color: #0b1324;
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* -- Pattern 16: Horizontal carousel -- */
.carousel {
    position: relative;
    overflow: hidden;
    margin: 0 -16px;
    padding: 0 16px;
}
.carousel-track {
    display: flex;
    gap: 12px;
    transition: transform .4s cubic-bezier(.4,0,.2,1);
    touch-action: pan-y;
}
.carousel-card {
    flex: 0 0 80%;
    max-width: 360px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 22px 20px;
    scroll-snap-align: start;
    min-height: 220px;
    display: flex; flex-direction: column; gap: 10px;
}
.carousel-n {
    font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--violet); font-weight: 700;
}
.carousel-h {
    font-size: 19px; font-weight: 800; line-height: 1.2;
}
.carousel-body {
    font-size: 14px; line-height: 1.55; color: var(--ink-soft);
}
.carousel-dots {
    display: flex; gap: 6px; justify-content: center; margin-top: 12px;
}
.carousel-dots .cdot {
    width: 7px; height: 7px; border-radius: 50%;
    background: rgba(255,255,255,0.2);
}
.carousel-dots .cdot.active { background: var(--violet); width: 22px; border-radius: 4px; }

/* Stacked variant of the carousel cards (desktop) */
.card-stacked-list { display: flex; flex-direction: column; gap: 12px; }
.carousel-card.stacked {
    flex: 1 1 auto;
    max-width: none;
    min-height: 0;
}

/* -- Pattern 17: Card stack -- */
.stack-wrap { position: relative; height: 260px; }
.stack-card {
    position: absolute; inset: 0;
    background: var(--bg-card);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex; flex-direction: column; justify-content: space-between;
    transition: all .4s cubic-bezier(.4,0,.2,1);
}
.stack-card.pos-top { transform: translateY(0) rotate(-1.5deg) scale(1); z-index: 3; box-shadow: 0 14px 32px rgba(0,0,0,0.35); }
.stack-card.pos-mid { transform: translateY(8px) rotate(1.2deg) scale(0.97); z-index: 2; opacity: 0.85; }
.stack-card.pos-bot { transform: translateY(16px) rotate(-0.8deg) scale(0.94); z-index: 1; opacity: 0.55; }
.stack-card.pos-gone-up    { transform: translateY(-120%) rotate(-6deg) scale(1.02); opacity: 0; z-index: 0; pointer-events: none; }
.stack-card.pos-gone-right { transform: translateX(120%) rotate(14deg)  scale(1.02); opacity: 0; z-index: 0; pointer-events: none; }
.stack-card.pos-gone-left  { transform: translateX(-120%) rotate(-14deg) scale(1.02); opacity: 0; z-index: 0; pointer-events: none; }
.stack-h { font-size: 18px; font-weight: 800; line-height: 1.25; }
.stack-body { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.stack-cta { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--violet); font-weight: 700; text-align: right; }

/* -- Pattern 18: Timeline -- */
.timeline { position: relative; padding-left: 22px; }
.timeline::before {
    content: ""; position: absolute; top: 6px; bottom: 6px; left: 7px;
    width: 2px; background: var(--line-strong);
}
.tl-item {
    position: relative; padding-bottom: 20px;
}
.tl-item::before {
    content: ""; position: absolute; left: -19px; top: 6px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--bg); border: 2px solid var(--violet);
    transition: all .3s;
}
.tl-item.on::before { background: var(--violet); box-shadow: 0 0 0 4px rgba(var(--a1),0.2); }
.tl-date { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--violet); font-weight: 700; }
.tl-title { font-size: 15px; font-weight: 700; margin-top: 2px; }
.tl-desc { font-size: 13.5px; color: var(--ink-soft); margin-top: 3px; line-height: 1.5; }

/* Desktop horizontal timeline (zigzag alternating) */
.timeline-h {
    position: relative;
    padding: 20px 0;
    min-height: 340px;
    width: 90vw;
    max-width: 960px;
    margin-left: 50%;
    transform: translateX(-50%);
}
.tlh-rail {
    position: absolute;
    top: 50%;
    left: 4%;
    right: 4%;
    height: 2px;
    background: var(--line-strong);
    transform: translateY(-50%);
}
.tlh-events {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    position: relative;
    padding: 0 2%;
}
.tlh-event {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    min-height: 340px;
}
.tlh-card {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px 16px;
    position: absolute;
    width: calc(100% - 4px);
}
.tlh-event.above .tlh-card { top: 0; }
.tlh-event.below .tlh-card { bottom: 0; }
.tlh-date {
    font-size: 11px; letter-spacing: 1.3px; text-transform: uppercase;
    color: var(--violet); font-weight: 700;
}
.tlh-title { font-size: 15px; font-weight: 700; margin-top: 4px; }
.tlh-desc { font-size: 13px; color: var(--ink-soft); margin-top: 4px; line-height: 1.45; }
.tlh-node {
    position: absolute;
    top: 50%; left: 50%;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--violet);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 4px rgba(var(--a1),0.2);
    z-index: 2;
}

/* -- Pattern 19: Progress meter -- */
.progress-stage {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 20px;
}
.progress-bar-big {
    height: 10px; background: rgba(255,255,255,0.08);
    border-radius: 999px; overflow: hidden; margin: 14px 0;
}
.progress-bar-big .fill {
    height: 100%; background: linear-gradient(90deg, var(--violet), var(--teal));
    width: 0%; transition: width .5s ease;
}
.progress-meta {
    display: flex; justify-content: space-between;
    font-size: 12px; color: var(--ink-soft);
}
.progress-meta strong { color: var(--ink); }

/* -- Pattern 20: Fill in blank -- */
.fib-sentence {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    font-size: 17px; line-height: 1.8;
}
.fib-blank {
    display: inline-flex;
    min-width: 80px;
    padding: 2px 10px;
    border-bottom: 2px dashed var(--violet);
    color: var(--violet); font-weight: 700;
    vertical-align: baseline;
    border-radius: 6px;
    margin: 0 4px;
}
.fib-blank.filled { border-bottom-style: solid; color: var(--teal); background: rgba(var(--a2),0.1); }
.fib-bank {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px;
}
.fib-chip {
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 14px; font-weight: 600;
    transition: all .2s;
}
.fib-chip:hover, .fib-chip:active { background: rgba(var(--a1),0.1); border-color: var(--violet); }
.fib-chip:disabled { opacity: 0.3; cursor: default; }

/* -- Pattern 21: Matching -- */
.match-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.match-tile {
    padding: 14px 12px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 12px;
    font-size: 14px; font-weight: 600;
    min-height: 56px;
    display: flex; align-items: center; justify-content: center; text-align: center;
    transition: all .2s;
    line-height: 1.35;
}
.match-tile:hover, .match-tile:active { background: rgba(var(--a1),0.08); border-color: var(--violet); }
.match-tile.selected { background: rgba(var(--a1),0.15); border-color: var(--violet); }
.match-tile.paired { background: rgba(var(--a2),0.12); border-color: var(--teal); color: #d9fffd; cursor: default; }
.match-tile.wrong { animation: shakeX .4s; background: rgba(251,113,133,0.15); border-color: var(--rose); }

/* -- Pattern 22: Tap to build -- */
.build-stack {
    min-height: 80px;
    padding: 16px;
    background: rgba(var(--a1),0.06);
    border: 1px dashed var(--violet);
    border-radius: 14px;
    display: flex; flex-wrap: wrap; gap: 8px;
    align-items: center;
    align-content: flex-start;
}
.build-stack:empty::before {
    content: "Tap items below to add them to your stack";
    font-size: 13px; color: var(--ink-muted); font-style: italic;
    width: 100%; text-align: center;
}
.build-chip {
    padding: 8px 14px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 13px; font-weight: 600;
    transition: all .2s;
}
.build-chip.in-stack {
    background: var(--violet-deep);
    border-color: var(--violet-deep);
    color: #fff;
}
.build-options { display: flex; flex-wrap: wrap; gap: 8px; }

/* -- Pattern 24: Streak quickfire -- */
.streak-panel {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 22px;
    text-align: center;
}
.streak-number {
    font-size: 64px; font-weight: 900;
    background: linear-gradient(135deg, var(--violet) 0%, var(--teal) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
}
.streak-label {
    font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
    color: var(--ink-muted); font-weight: 700; margin-top: 6px;
}
.streak-q {
    font-size: 17px; font-weight: 700; margin: 20px 0 12px;
    line-height: 1.3;
}
.streak-opts { display: flex; flex-direction: column; gap: 8px; }
.streak-opts button {
    padding: 14px 16px;
    background: var(--bg); border: 1px solid var(--line);
    border-radius: 12px;
    font-size: 15px; font-weight: 600; color: var(--ink);
    transition: all .15s;
}
.streak-opts button:hover, .streak-opts button:active { background: rgba(var(--a1),0.1); border-color: var(--violet); }
.streak-timer {
    height: 4px; background: rgba(255,255,255,0.08);
    border-radius: 999px; overflow: hidden; margin: 12px 0;
}
.streak-timer .bar {
    height: 100%; background: var(--violet);
    animation: timerFill 8s linear;
    transform-origin: left;
}
@keyframes timerFill {
    from { transform: scaleX(1); } to { transform: scaleX(0); }
}

/* -- Pattern 23: Scenario -- */
.scene-text {
    background: var(--bg-card);
    border-left: 3px solid var(--coral);
    border-radius: 10px;
    padding: 16px 18px;
    font-size: 15px; line-height: 1.55;
    color: var(--ink);
    font-style: italic;
}
.scene-text::before {
    content: "SCENARIO";
    display: block;
    font-size: 10px; letter-spacing: 2px; font-weight: 800;
    color: var(--coral);
    margin-bottom: 6px;
    font-style: normal;
}

/* -- Pattern 5: MC quick -- */
.mc-quick { display: flex; flex-direction: column; gap: 8px; }
.mc-q { font-size: 17px; font-weight: 700; line-height: 1.35; margin-bottom: 6px; }

/* -- Pattern 7: Multi-select -- */
.ms-note {
    font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--ink-muted); font-weight: 700; margin-bottom: 2px;
}

/* -- Pattern 11: Swipe sort -- */
.sort-stage {
    position: relative;
    min-height: 200px;
}
.sort-card {
    background: var(--bg-card);
    border: 1px solid var(--line-strong);
    border-radius: 18px;
    padding: 24px;
    min-height: 160px;
    display: flex; flex-direction: column; justify-content: center;
    text-align: center;
    touch-action: none;
    user-select: none;
    transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .35s;
    position: relative;
}
.sort-card.gone-left { transform: translateX(-140%) rotate(-18deg); opacity: 0; }
.sort-card.gone-right { transform: translateX(140%) rotate(18deg); opacity: 0; }
.sort-card .sort-label {
    position: absolute;
    top: 18px;
    padding: 5px 14px; border-radius: 999px;
    font-size: 11px; letter-spacing: 1.5px; font-weight: 800; text-transform: uppercase;
    border-width: 2px; border-style: solid;
    opacity: 0;
    transition: opacity .2s;
}
.sort-card .sort-label.left { left: 16px; color: var(--coral); border-color: var(--coral); transform: rotate(-8deg); }
.sort-card .sort-label.right { right: 16px; color: var(--teal); border-color: var(--teal); transform: rotate(8deg); }
.sort-card.hint-left .sort-label.left { opacity: 1; }
.sort-card.hint-right .sort-label.right { opacity: 1; }
.sort-buckets {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px;
}
.sort-bucket-tile {
    padding: 14px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all .2s;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.sort-bucket-tile:hover, .sort-bucket-tile:active { border-color: var(--violet); background: rgba(var(--a1),0.08); }
.sort-count {
    display: block; font-size: 22px; margin-bottom: 4px;
    font-weight: 900;
}
.sort-count.teal { color: var(--teal); }
.sort-count.coral { color: var(--coral); }

/* -- Pattern 13: Pinch-zoom detail -- */
.zoom-stage {
    background: linear-gradient(135deg, #1b2440 0%, #2a3556 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    aspect-ratio: 4/3;
    overflow: hidden;
    position: relative;
    cursor: zoom-in;
    padding: 0;
    touch-action: none;
}
.zoom-stage.zoomed { cursor: grab; }
.zoom-stage.zoomed:active { cursor: grabbing; }
.zoom-inner {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center; flex-direction: column;
    color: var(--ink-muted);
    font-size: 14px;
    text-align: center;
    padding: 20px;
    transform-origin: center;
    pointer-events: none;
}
.zoom-caption {
    text-align: center;
    font-size: 12px; color: var(--ink-muted);
    margin-top: 8px;
    letter-spacing: 0.5px;
}

/* -- Pattern badge / reward -- */
.badge-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.badge-tile {
    aspect-ratio: 1;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center; flex-direction: column;
    background: var(--bg-card);
    padding: 10px;
    text-align: center;
    opacity: 0.35;
    transition: all .3s;
}
.badge-tile.earned {
    opacity: 1;
    background: linear-gradient(135deg, rgba(var(--a1),0.2) 0%, rgba(var(--a2),0.2) 100%);
    border-color: var(--violet);
    box-shadow: 0 0 0 1px var(--violet), 0 0 24px rgba(var(--a1),0.25);
}
.badge-icon { font-size: 28px; margin-bottom: 4px; }
.badge-name { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; }

/* Pattern 19 acknowledgment cards (merged grid + rows) */
.progress-meta-compact {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 12px; color: var(--ink-soft); letter-spacing: 1px; text-transform: uppercase;
    font-weight: 700;
    margin-top: 6px;
}
.progress-meta-compact strong { color: var(--ink); font-size: 14px; }

.ack-cards {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
    margin-top: 14px;
}
.ack-card {
    position: relative;
    display: flex; flex-direction: column; gap: 6px;
    padding: 16px 14px 14px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 14px;
    text-align: left;
    color: var(--ink);
    min-height: 130px;
    transition: all .2s;
    cursor: pointer;
}
.ack-card:hover, .ack-card:active {
    background: rgba(var(--a2),0.06);
    border-color: var(--teal);
    transform: translateY(-1px);
}
.ack-card-icon { font-size: 24px; line-height: 1; }
.ack-card-name {
    font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--ink-muted); font-weight: 700;
}
.ack-card-text { font-size: 13px; line-height: 1.4; color: var(--ink); flex: 1; }
.ack-card-check {
    position: absolute; top: 12px; right: 12px;
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.2);
    display: flex; align-items: center; justify-content: center;
    color: var(--teal); opacity: 0;
    transition: all .25s;
}
.ack-card-check svg { width: 12px; height: 12px; }
.ack-card.confirmed {
    background: rgba(var(--a2),0.12);
    border-color: var(--teal);
    cursor: default;
}
.ack-card.confirmed .ack-card-name { color: var(--teal); }
.ack-card.confirmed .ack-card-check {
    opacity: 1;
    background: var(--teal);
    border-color: var(--teal);
    color: var(--green-deep, #054432);
}

/* -- Pattern 01 flip-card: subtle flip icon, no 'TAP ANYWHERE' text -- */
.flip-icon {
    position: absolute;
    bottom: 14px; right: 14px;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    opacity: 0.7;
    color: #fff;
}
.flip-icon svg { width: 22px; height: 22px; }

/* -- Pattern 10 replacement: arrow-based reorder buttons -- */
.ranklist { display: flex; flex-direction: column; gap: 6px; }
.rank-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 12px;
}
.rank-pos {
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800; color: var(--violet);
    background: rgba(var(--a1),0.15);
    flex-shrink: 0;
}
.rank-text { flex: 1; font-size: 15px; font-weight: 600; }
.rank-btns { display: flex; gap: 4px; flex-shrink: 0; }
.rank-btn {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.06);
    color: var(--ink-soft);
    transition: all .15s;
}
.rank-btn:hover:not(:disabled), .rank-btn:active:not(:disabled) { background: rgba(var(--a1),0.15); color: var(--violet); }
.rank-btn:disabled { opacity: 0.25; cursor: not-allowed; }
.rank-btn svg { width: 18px; height: 18px; }

/* -- Pattern 24 start-screen intro -- */
.streak-intro {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.streak-intro .intro-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--violet) 0%, var(--teal) 100%);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: 800;
    margin-bottom: 4px;
}
.streak-intro .intro-title { font-size: 22px; font-weight: 800; letter-spacing: -0.3px; }
.streak-intro .intro-body { font-size: 14.5px; color: var(--ink-soft); max-width: 280px; line-height: 1.5; }

/* -- Pattern 17 card stack: pointer hint that cards are tappable -- */
.stack-tap-hint {
    font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--ink-muted); font-weight: 700;
    text-align: center; margin-top: 12px;
}

/* -- Pattern 04 scroll-reveal: a slightly more deliberate animation -- */
.reveal {
    opacity: 0;
    transform: translateY(26px) scale(0.98);
    transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1);
}
.reveal.on { opacity: 1; transform: translateY(0) scale(1); }

/* ============================================================
   Landscape phones: compact chrome, more content room
   Activates when viewport is both landscape AND short-height
   (typical phone landscape = ~844×390 on iPhone, 915×412 Pixel)
   ============================================================ */
@media (orientation: landscape) and (max-height: 500px) {
    body { padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px)); }
    .topbar { height: calc(40px + env(safe-area-inset-top, 0px)); }
    .topbar { padding: 0 10px; }
    .icon-btn { width: 36px; height: 36px; }
    .bottom-nav {
        height: calc(50px + env(safe-area-inset-bottom, 0px));
        padding: 6px 14px calc(6px + env(safe-area-inset-bottom, 0px));
    }
    .nav-btn { padding: 8px 14px; font-size: 13px; min-width: 78px; }
    .stage {
        padding: 14px 20px 18px;
        min-height: calc(100dvh - 40px - 50px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    }
    .stage-inner { max-width: 680px; gap: 12px; }
    .pat-title { font-size: 22px; }
    .pat-tagline { font-size: 13px; }
    .lesson-bubble { padding: 14px 18px; }
    .flip-card { height: 180px; }
    .stack-wrap { height: 200px; }
    .hotspot-stage, .zoom-stage, .compare-wrap { max-height: 260px; }
    .tf-card { min-height: 140px; padding: 22px; }
    .sort-card { min-height: 120px; padding: 20px; }
    .carousel-card { flex: 0 0 60%; }
}

/* ============================================================
   CONTENT SLIDE LAYOUTS — GT ENERGY EDITION
   Fun. Learner-centric. Engaging. Every slide has swagger.
   ============================================================ */

/* -- Shared -- */
.cs-body { font-size: 15.5px; line-height: 1.75; color: var(--ink-soft); }
.cs-body p { margin: 0 0 14px; }
.cs-body p:last-child { margin-bottom: 0; }
.cs-body strong {
    color: var(--ink);
    background: linear-gradient(to right, rgba(var(--a1),0.2), rgba(var(--a2),0.15));
    padding: 1px 6px; border-radius: 4px;
}
.cs-img-full {
    width: 100%; display: block;
    border-radius: var(--radius-lg);
    object-fit: cover;
    height: 340px; max-height: 340px;
}
@media (max-width: 600px) {
    .cs-img-full { height: 220px; max-height: 220px; }
}

/* ─── Section break slide (e.g. "The View from Here") ─── */
.cs-section-break {
    text-align: center;
    padding: 48px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
}
.cs-section-heading {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: clamp(40px, 6vw, 68px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--cream, #f4f1e8);
    margin: 14px 0 16px;
    font-weight: 400;
}
.cs-section-sub {
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 520px;
    margin: 0 auto;
}

/* ─── Two-column desktop layout for image-over-text slides ───
   Applies ONLY when a slide has .cs-img-block as a direct child of
   .stage-inner. On desktop (≥ 820px) the image moves to the left
   column spanning the full height, and title + body stack on the right
   FROM THE TOP (not vertically centered — keeps title aligned with the top
   edge of the image so the layout reads as a magazine spread).
   Below 820px, layout falls back to the stacked phone-first flow. */
@media (min-width: 820px) {
    /* Classic magazine-style float layout for image-over-text slides.
       Image floats left; title and body flow naturally beside it from the
       top-right of the image, both starting at Y=0 with the image. Cleaner
       than grid (no row-stretch math) and honors natural text flow. */
    .stage-inner:has(> .cs-img-block) {
        max-width: 880px;
        display: block;
        zoom: 1; /* override the 720px zoom: 1.1 that was inflating content */
    }
    .stage-inner:has(> .cs-img-block)::after {
        content: '';
        display: block;
        clear: both;
    }
    .stage-inner:has(> .cs-img-block) > .cs-img-block {
        float: left;
        width: 400px;
        margin-right: 40px;
        margin-bottom: 16px;
    }
    .stage-inner:has(> .cs-img-block) .cs-img-full {
        width: 100%;
        height: auto;
        min-height: 320px;
        max-height: 480px;
        object-fit: cover;
    }
    /* First non-image element (the title block): kill its phone-layout margin-top
       so it aligns with the top of the image */
    .stage-inner:has(> .cs-img-block) > .cs-img-block + * {
        margin-top: 0 !important;
    }
    /* Body paragraph (or whatever sits 2nd after the image): bump margin-top
       via !important so the inline `margin-top: 12px` on .cs-body is beaten.
       Margin-collapse then lands at this value since title block has no bottom margin. */
    .stage-inner:has(> .cs-img-block) > .cs-img-block + * + * {
        margin-top: 32px !important;
    }
}

/* -- Gradient border utility -- */
.glow-border {
    position: relative;
}
.glow-border::before {
    content: ''; position: absolute; inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--violet), var(--teal), var(--coral));
    z-index: -1; opacity: 0.5;
}

/* -- C01: Hero Title -- */
.cs-hero {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    min-height: 360px;
    background-size: cover; background-position: center;
    display: flex; align-items: flex-end;
}
.cs-hero-overlay {
    width: 100%; padding: 52px 24px 32px;
    background: linear-gradient(to top, rgba(15,23,42,0.95) 0%, rgba(15,23,42,0.6) 50%, transparent 100%);
}
.cs-hero-kicker {
    display: inline-block;
    font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
    color: var(--teal); font-weight: 800; margin-bottom: 12px;
    background: rgba(var(--a2),0.12); padding: 4px 12px;
    border-radius: 999px; border: 1px solid rgba(var(--a2),0.3);
}
.cs-hero-title {
    font-size: 32px; font-weight: 900; line-height: 1.1;
    margin: 0 0 10px;
    background: linear-gradient(135deg, #fff 0%, var(--lavender) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.cs-hero-sub {
    font-size: 16px; color: rgba(255,255,255,0.65); margin: 0;
    line-height: 1.55; font-style: italic;
}

/* -- C02: Text Block — never boring -- */
.cs-text-card .pat-title { margin-bottom: 32px; }
@media (min-width: 720px) {
    .cs-text-card {
        background: var(--bg-card);
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 36px 40px;
        border-left: 3px solid var(--accent-1);
        box-shadow: 0 4px 24px rgba(0,0,0,0.15);
    }
    .cs-text-card .pat-title {
        margin-bottom: 32px;
    }
    .cs-text-card .cs-lead {
        border-left: none; padding-left: 0;
    }
}
.cs-body .cs-lead {
    font-size: 20px; font-weight: 700; line-height: 1.5;
    color: var(--ink);
    border-left: 3px solid;
    border-image: linear-gradient(to bottom, var(--violet), var(--teal)) 1;
    padding-left: 16px; margin-bottom: 16px;
}
.cs-body .cs-highlight {
    display: inline;
    background: linear-gradient(to right, rgba(var(--a3),0.15), rgba(var(--a1),0.15));
    padding: 2px 8px; border-radius: 5px;
    color: var(--ink); font-weight: 700;
}

/* -- C04: Side-by-side (adaptive) -- */
.cs-side-layout {
    display: flex; flex-direction: column; gap: 16px;
}
.cs-side-img {
    flex-shrink: 0;
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 8px 30px rgba(var(--a1),0.15);
}
.cs-img-float {
    position: relative;
    overflow: visible;
    transform: rotate(1.5deg) scale(0.88);
    transition: transform .3s ease;
}
@media (min-width: 720px) {
    .cs-img-float { transform: rotate(1.5deg) scale(1); }
}
.cs-img-float img {
    border-radius: 14px;
    position: relative; z-index: 1;
    box-shadow: 0 12px 40px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.06);
}
.cs-img-deco {
    position: absolute;
    inset: -8px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    opacity: 0.2;
    transform: rotate(-3deg);
    z-index: 0;
}
.cs-img-caption {
    position: relative; z-index: 1;
    text-align: center;
    font-size: 14px; font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--ink-muted);
    margin-top: 12px;
    font-style: italic;
    transform: rotate(-1.5deg);
}
@media (min-width: 720px) {
    .cs-side-layout {
        flex-direction: row; align-items: center; gap: 32px;
    }
    .cs-side-text { flex: 1; }
    .cs-side-img { flex: 0 0 45%; }
}

/* -- Pull stat callout -- */
.cs-pullstat {
    display: flex; align-items: center; gap: 16px;
    padding: 10px 20px;
    margin: 16px 0;
    background: linear-gradient(135deg, rgba(var(--a1),0.1), rgba(var(--a2),0.06));
    border: 1px solid rgba(var(--a1),0.2);
    border-radius: 14px;
}
.cs-pullstat-num {
    font-size: 42px; font-weight: 900; line-height: 1;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    flex-shrink: 0;
}
.cs-pullstat-label {
    font-size: 14px; line-height: 1.5; color: var(--ink-soft);
}
.cs-pullstat-label em {
    color: var(--ink); font-style: normal; font-weight: 700;
}

/* -- C05: Full-bleed image -- */
.cs-bleed {
    position: relative; border-radius: 20px; overflow: hidden;
    min-height: 320px; background-size: cover; background-position: center;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    /* Multi-layer shadow stack for believable depth — lifts the photo off the
       stage so it reads as a 3D object, not a flat image on a dark bg.
       Close shadow = hard edge / contact line.
       Mid shadow = ambient occlusion / grounded feel.
       Far shadow = atmospheric drop for that "floating slab" look. */
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.35),
        0 14px 30px rgba(0, 0, 0, 0.4),
        0 40px 80px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.cs-bleed-content {
    position: relative; z-index: 2;
    padding: 44px 28px;
}
.cs-bleed::before {
    content: ''; position: absolute; inset: 0;
    z-index: 1;
    background:
        /* Top vignette → content readability */
        linear-gradient(180deg, rgba(15,23,42,0.25), rgba(15,23,42,0.55) 55%, rgba(15,23,42,0.85) 100%),
        /* Diagonal wash → brand tint */
        linear-gradient(135deg, rgba(15,23,42,0.55), rgba(108,92,231,0.22));
}
/* Inner edge highlight — subtly catches light on the photo's top edge,
   enhancing the "lifted slab" feel. Sits above the gradient overlay. */
.cs-bleed::after {
    content: ''; position: absolute; inset: 0;
    border-radius: 20px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
    pointer-events: none;
    z-index: 3;
}
.cs-bleed-heading {
    font-size: 28px; font-weight: 900; color: #fff;
    margin: 0 0 12px; line-height: 1.15;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.cs-bleed-sub {
    font-size: 15px; color: rgba(255,255,255,0.8); margin: 0;
    line-height: 1.6; max-width: 400px; margin-inline: auto;
}

/* -- C06: Quote Card — dramatic -- */
.cs-quote-card {
    background: linear-gradient(135deg, rgba(var(--a1),0.08), rgba(var(--a2),0.05));
    border: 1px solid rgba(var(--a1),0.2);
    border-radius: 20px;
    padding: 40px 28px 32px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cs-quote-card::before {
    content: ''; position: absolute; top: -40px; right: -40px;
    width: 120px; height: 120px; border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--a1),0.12), transparent 70%);
}
.cs-quote-mark {
    font-size: 80px; line-height: 1;
    background: linear-gradient(135deg, var(--violet), var(--teal));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0.6; position: absolute; top: 8px; left: 20px;
    font-family: Georgia, serif;
}
.cs-quote-text {
    font-size: 19px; font-weight: 600; line-height: 1.6;
    color: var(--ink); margin: 0 0 24px; font-style: italic;
    position: relative;
}
.cs-quote-attr strong {
    display: block; font-size: 14px;
    background: linear-gradient(135deg, var(--violet), var(--lavender));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.cs-quote-attr span {
    font-size: 12px; color: var(--ink-muted);
}

/* -- C07: Stats Row — BIG energy -- */
.cs-stats-row {
    display: grid; grid-template-columns: 1fr; gap: 14px;
    margin-top: 8px;
}
.cs-stat {
    background: var(--bg-card);
    border-radius: 16px; padding: 24px 20px;
    text-align: center; position: relative; overflow: hidden;
    border: 1px solid var(--line);
}
.cs-stat::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.cs-stat:nth-child(1)::before { background: linear-gradient(to right, var(--violet), var(--lavender)); }
.cs-stat:nth-child(2)::before { background: linear-gradient(to right, var(--teal), #74b9ff); }
.cs-stat:nth-child(3)::before { background: linear-gradient(to right, var(--coral), #ffda6b); }
.cs-stat-num {
    display: block; font-size: 44px; font-weight: 900;
    line-height: 1;
}
.cs-stat:nth-child(1) .cs-stat-num { color: var(--violet); }
.cs-stat:nth-child(2) .cs-stat-num { color: var(--teal); }
.cs-stat:nth-child(3) .cs-stat-num { color: var(--coral); }
.cs-stat-label {
    display: block; font-size: 13px; color: var(--ink-soft);
    margin-top: 8px; line-height: 1.5;
}
@media (min-width: 720px) {
    .cs-stats-row { grid-template-columns: repeat(3, 1fr); }
    .cs-stat-num { font-size: 52px; }
}

/* -- C08: Icon List — gradient circles -- */
.cs-icon-list { display: flex; flex-direction: column; gap: 16px; }
.cs-icon-item {
    display: flex; align-items: flex-start; gap: 16px;
    padding: 14px 16px;
    background: var(--bg-card); border: 1px solid var(--line);
    border-radius: 14px;
    transition: border-color .2s, transform .2s;
}
.cs-icon-item:active { transform: scale(0.98); }
.cs-icon-circle {
    flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
}
.cs-icon-item:nth-child(1) .cs-icon-circle { background: linear-gradient(135deg, rgba(var(--a1),0.2), rgba(var(--a1),0.05)); color: var(--violet); }
.cs-icon-item:nth-child(2) .cs-icon-circle { background: linear-gradient(135deg, rgba(var(--a2),0.2), rgba(var(--a2),0.05)); color: var(--teal); }
.cs-icon-item:nth-child(3) .cs-icon-circle { background: linear-gradient(135deg, rgba(var(--a3),0.2), rgba(var(--a3),0.05)); color: var(--coral); }
.cs-icon-item:nth-child(4) .cs-icon-circle { background: linear-gradient(135deg, rgba(var(--a4),0.2), rgba(var(--a4),0.05)); color: #74b9ff; }
.cs-icon-item:nth-child(5) .cs-icon-circle { background: linear-gradient(135deg, rgba(255,218,107,0.2), rgba(255,218,107,0.05)); color: #ffda6b; }
.cs-icon-content { flex: 1; }
.cs-icon-content strong {
    display: block; font-size: 15px; font-weight: 700; color: var(--ink);
}
.cs-icon-content span {
    font-size: 13.5px; color: var(--ink-soft); line-height: 1.55;
}

/* -- C09: Accordion — playful -- */
.cs-accordion { display: flex; flex-direction: column; gap: 10px; }
.cs-acc-item {
    background: var(--bg-card);
    border-radius: 14px; overflow: hidden;
    transition: all .25s;
    border: 1px solid var(--line);
}
.cs-acc-item.open {
    border-color: transparent;
    box-shadow: 0 0 0 1px var(--violet), 0 4px 20px rgba(var(--a1),0.12);
}
.cs-acc-trigger {
    display: flex; justify-content: space-between; align-items: center;
    width: 100%; padding: 18px 20px; border: none; background: none;
    color: var(--ink); font-size: 15px; font-weight: 700;
    cursor: pointer; text-align: left;
}
.cs-acc-chevron {
    transition: transform .3s; flex-shrink: 0; color: var(--ink-muted);
}
.cs-acc-item.open .cs-acc-chevron { transform: rotate(180deg); color: var(--violet); }
.cs-acc-item.open .cs-acc-trigger { color: var(--violet); }
.cs-acc-body {
    max-height: 0; overflow: hidden;
    padding: 0 20px;
    font-size: 14.5px; line-height: 1.65; color: var(--ink-soft);
    transition: max-height .35s ease, padding .35s ease;
}
.cs-acc-item.open .cs-acc-body {
    max-height: 300px;
    padding: 0 20px 20px;
}

/* -- C10: Flip Card Grid — SCALED for desktop -- */
.cs-flip-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
.cs-flip-card {
    perspective: 800px; cursor: pointer;
    min-height: 160px;
}
.cs-flip-inner {
    position: relative; width: 100%; height: 100%; min-height: 160px;
    transition: transform .55s cubic-bezier(.4,0,.2,1);
    transform-style: preserve-3d;
}
.cs-flip-card.flipped .cs-flip-inner { transform: rotateY(180deg); }
.cs-flip-front, .cs-flip-back {
    position: absolute; inset: 0;
    backface-visibility: hidden;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    padding: 20px; text-align: center;
}
.cs-flip-front {
    font-size: 20px; font-weight: 800;
    border: 1px solid rgba(var(--a1),0.3);
}
.cs-flip-card:nth-child(1) .cs-flip-front { background: linear-gradient(135deg, rgba(var(--a1),0.18), rgba(var(--a1),0.04)); color: var(--violet); }
.cs-flip-card:nth-child(2) .cs-flip-front { background: linear-gradient(135deg, rgba(var(--a2),0.18), rgba(var(--a2),0.04)); color: var(--teal); border-color: rgba(var(--a2),0.3); }
.cs-flip-card:nth-child(3) .cs-flip-front { background: linear-gradient(135deg, rgba(var(--a3),0.18), rgba(var(--a3),0.04)); color: var(--coral); border-color: rgba(var(--a3),0.3); }
.cs-flip-card:nth-child(4) .cs-flip-front { background: linear-gradient(135deg, rgba(var(--a4),0.18), rgba(var(--a4),0.04)); color: #74b9ff; border-color: rgba(var(--a4),0.3); }
.cs-flip-back {
    background: var(--bg-card); border: 1px solid var(--line);
    transform: rotateY(180deg);
    font-size: 13.5px; line-height: 1.55; color: var(--ink-soft);
}
@media (min-width: 720px) {
    .cs-flip-header {
        text-align: center;
    }
    .cs-flip-grid {
        width: 90vw; max-width: 800px;
        margin-left: 50%; transform: translateX(-50%);
        gap: 20px;
    }
    .cs-flip-card { min-height: 220px; }
    .cs-flip-inner { min-height: 220px; }
    .cs-flip-front { font-size: 26px; }
    .cs-flip-back { font-size: 15.5px; padding: 32px; line-height: 1.6; }
}
/* Portrait-mobile: 2×2 gets too narrow. Stack 1×4 at ~80vw so each card
   has plenty of legibility and tap surface. */
@media (orientation: portrait) and (max-width: 719px) {
    .cs-flip-grid {
        grid-template-columns: 1fr;
        width: 80vw;
        max-width: 420px;
        margin-left: 50%;
        transform: translateX(-50%);
        gap: 16px;
    }
    .cs-flip-card { min-height: 180px; }
    .cs-flip-inner { min-height: 180px; }
}

/* -- C11: Numbered Steps — connected line -- */
.cs-steps {
    display: flex; flex-direction: column; gap: 0;
    position: relative; padding-left: 24px;
}
/* Gradient rail runs THROUGH the center of the numbered circles,
   not to their left. Circles sit on top (z-index:1) so the bar visually
   connects them rather than running alongside. */
.cs-steps::before {
    content: ''; position: absolute;
    left: 40px; /* 24px padding + 18px half-circle − 2px half-bar */
    top: 32px; bottom: 32px;
    width: 4px;
    background: linear-gradient(to bottom, var(--violet), var(--teal), var(--coral));
    border-radius: 4px;
    z-index: 0;
}
.cs-step {
    display: flex; gap: 18px; padding: 14px 0;
    position: relative;
}
.cs-step-num {
    flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 800; color: #fff;
    position: relative; z-index: 1;
    box-shadow: 0 0 0 3px var(--bg-0); /* tiny halo matches bg so circles "clip" the bar visibly */
}
.cs-step:nth-child(1) .cs-step-num { background: var(--violet); }
.cs-step:nth-child(2) .cs-step-num { background: #9b8bff; }
.cs-step:nth-child(3) .cs-step-num { background: var(--teal); }
.cs-step:nth-child(4) .cs-step-num { background: #74b9ff; }
.cs-step:nth-child(5) .cs-step-num { background: var(--coral); }
.cs-step-content { flex: 1; }
.cs-step-content strong {
    display: block; font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 4px;
}
.cs-step-content p {
    margin: 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.55;
}

/* -- C12: Image Gallery — with glow -- */
.cs-gallery {
    display: grid; grid-template-columns: 1fr; gap: 14px;
}
.cs-gallery-item {
    position: relative; border-radius: 16px; overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    transition: transform .2s;
}
.cs-gallery-item:active { transform: scale(0.98); }
.cs-gallery-item img { border-radius: 0; }
.cs-gallery-cap {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 20px 14px 10px;
    background: linear-gradient(to top, rgba(15,23,42,0.85), transparent);
    font-size: 13px; color: rgba(255,255,255,0.9);
    font-weight: 600; letter-spacing: 0.3px;
}
@media (min-width: 720px) {
    .cs-gallery { grid-template-columns: repeat(3, 1fr); }
}

/* -- C13: Section Divider — personality -- */
.cs-divider {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    min-height: 280px;
    padding: 40px 20px;
}
.cs-divider-kicker {
    display: inline-block;
    font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
    color: var(--teal); font-weight: 800; margin-bottom: 20px;
    background: rgba(var(--a2),0.1); padding: 5px 14px;
    border-radius: 999px; border: 1px solid rgba(var(--a2),0.25);
}
.cs-divider-title {
    font-size: 36px; font-weight: 900;
    line-height: 1.1;
    background: linear-gradient(135deg, var(--ink) 0%, var(--violet) 50%, var(--teal) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.cs-divider-line {
    width: 60px; height: 3px;
    background: linear-gradient(to right, var(--violet), var(--teal));
    border-radius: 2px; margin: 24px auto;
}
.cs-divider-sub {
    font-size: 15px; color: var(--ink-soft); font-style: italic;
}

/* -- C14: Comparison — color energy -- */
.cs-compare-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.cs-compare-col {
    border-radius: 16px;
    padding: 20px 16px;
    position: relative; overflow: hidden;
}
.cs-compare-a {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
}
.cs-compare-b {
    background: linear-gradient(135deg, rgba(var(--a1),0.08), rgba(var(--a2),0.05));
    border: 1px solid rgba(var(--a1),0.25);
}
.cs-compare-head {
    font-size: 13px; font-weight: 800; margin-bottom: 12px;
    letter-spacing: 1.5px; text-transform: uppercase;
}
.cs-compare-a .cs-compare-head { color: var(--ink-muted); }
.cs-compare-b .cs-compare-head {
    background: linear-gradient(135deg, var(--violet), var(--teal));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.cs-compare-col ul { margin: 0; padding: 0; list-style: none; }
.cs-compare-col li {
    font-size: 13.5px; line-height: 1.55; color: var(--ink-soft);
    padding: 7px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.cs-compare-col li:last-child { border-bottom: none; }
.cs-compare-b li { color: var(--ink); }

/* -- C15: Definition Cards — color-coded -- */
.cs-def-list { display: flex; flex-direction: column; gap: 12px; }
.cs-def-card {
    background: var(--bg-card);
    border-radius: 14px; padding: 18px 20px;
    border-left: 3px solid;
    transition: transform .15s;
}
.cs-def-card:active { transform: scale(0.98); }
.cs-def-card:nth-child(1) { border-left-color: var(--violet); }
.cs-def-card:nth-child(2) { border-left-color: var(--teal); }
.cs-def-card:nth-child(3) { border-left-color: var(--coral); }
.cs-def-card:nth-child(4) { border-left-color: #74b9ff; }
.cs-def-term {
    font-size: 16px; font-weight: 800; margin-bottom: 5px;
}
.cs-def-card:nth-child(1) .cs-def-term { color: var(--violet); }
.cs-def-card:nth-child(2) .cs-def-term { color: var(--teal); }
.cs-def-card:nth-child(3) .cs-def-term { color: var(--coral); }
.cs-def-card:nth-child(4) .cs-def-term { color: #74b9ff; }
.cs-def-meaning {
    font-size: 14px; color: var(--ink-soft); line-height: 1.6;
}

/* -- C16: Video Embed — engaging placeholder -- */
.cs-video-wrap {
    border-radius: 20px; overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}
#cs-vid {
    width: 100%; aspect-ratio: 16/9; object-fit: cover;
    display: block; background: #0b1324;
}
.cs-vid-controls {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    background: rgba(15,23,42,0.95);
    position: relative; z-index: 5;
}
.cs-vid-btn, .cs-vid-play {
    background: none; border: none; color: var(--accent-1);
    cursor: pointer; padding: 4px; display: flex;
    border-radius: 6px;
    transition: color 0.15s ease, background 0.15s ease;
}
.cs-vid-btn:hover, .cs-vid-play:hover {
    color: #fff;
    background: rgba(255,255,255,0.08);
}
.cs-vid-btn.active {
    color: #fff;
    background: rgba(168, 196, 180, 0.22);
}

/* ─── Native range input as video scrub bar ─── */
.cs-vid-range {
    flex: 1;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: pointer;
    height: 20px;           /* generous hit area, visual track is drawn via ::track */
    margin: 0;
    padding: 0;
    outline: none;
}
/* Track (Chrome / Safari / Edge) — accent-1 → accent-2 gradient fills the
   progressed portion, gray fills the remaining */
.cs-vid-range::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right,
        var(--accent-1) 0%,
        var(--accent-2) var(--fill, 0%),
        rgba(255,255,255,0.14) var(--fill, 0%),
        rgba(255,255,255,0.14) 100%);
}
/* Firefox track */
.cs-vid-range::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: rgba(255,255,255,0.14);
}
.cs-vid-range::-moz-range-progress {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right, var(--accent-1), var(--accent-2));
}
/* Thumb (Chrome / Safari / Edge) */
.cs-vid-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--accent-1);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    cursor: pointer;
    margin-top: -5px; /* center on 6px track */
    transition: transform 0.12s ease;
}
.cs-vid-range::-webkit-slider-thumb:hover { transform: scale(1.15); }
.cs-vid-range:active::-webkit-slider-thumb { transform: scale(1.2); }
/* Thumb (Firefox) */
.cs-vid-range::-moz-range-thumb {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--accent-1);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    cursor: pointer;
    transition: transform 0.12s ease;
}
.cs-vid-range::-moz-range-thumb:hover { transform: scale(1.15); }
.cs-vid-range:focus-visible {
    outline: 2px solid var(--accent-1);
    outline-offset: 4px;
}

/* ─── Volume control (hover-to-reveal slider next to mute button) ─── */
.cs-vid-vol-wrap {
    display: flex;
    align-items: center;
    position: relative;
}
.cs-vid-volslider {
    width: 0;
    opacity: 0;
    margin-left: 0;
    pointer-events: none;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    height: 20px;
    cursor: pointer;
    transition: width 0.22s ease, opacity 0.2s ease, margin-left 0.22s ease;
    outline: none;
}
.cs-vid-vol-wrap:hover .cs-vid-volslider,
.cs-vid-vol-wrap:focus-within .cs-vid-volslider {
    width: 72px;
    opacity: 1;
    margin-left: 2px;
    pointer-events: auto;
}
/* Volume slider track (WebKit) — same accent-1 → accent-2 gradient as the
   timeline bar for visual consistency, painted via --vol-fill */
.cs-vid-volslider::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(to right,
        var(--accent-1) 0%,
        var(--accent-2) var(--vol-fill, 100%),
        rgba(255,255,255,0.18) var(--vol-fill, 100%),
        rgba(255,255,255,0.18) 100%);
}
.cs-vid-volslider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--accent-1);
    border: 2px solid #fff;
    margin-top: -4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    cursor: pointer;
}
/* Volume slider (Firefox) */
.cs-vid-volslider::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.18);
}
.cs-vid-volslider::-moz-range-progress {
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(to right, var(--accent-1), var(--accent-2));
}
.cs-vid-volslider::-moz-range-thumb {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--accent-1);
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    cursor: pointer;
}

/* ─── CC button ─── */
.cs-vid-cc-btn {
    padding: 4px 6px;
}
.cs-vid-cc-btn svg {
    display: block;
}
.cs-vid-bar {
    flex: 1;
    height: 10px;
    border-radius: 5px;
    background: rgba(255,255,255,0.14);
    cursor: pointer;
    position: relative;
    pointer-events: auto;
    align-self: center;
}
.cs-vid-progress {
    height: 100%;
    width: 0%;
    background: linear-gradient(to right, var(--accent-1), var(--accent-2));
    border-radius: 5px;
    transition: width .1s linear;
    position: relative;
    pointer-events: none; /* clicks route to the parent .cs-vid-bar */
}
.cs-vid-progress::after {
    content: '';
    position: absolute; right: -7px; top: 50%;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--accent-1);
    border: 2px solid #fff;
    transform: translateY(-50%);
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    box-shadow: 0 0 8px rgba(var(--a1),0.4);
}
.cs-vid-bar {
    cursor: pointer; touch-action: none;
}
.cs-vid-time {
    font-size: 12px; color: var(--ink-muted); font-weight: 600;
    min-width: 36px; text-align: right;
    font-variant-numeric: tabular-nums;
}

/* -- C17: Key Takeaway — bold card -- */
.cs-takeaway {
    background: linear-gradient(135deg, rgba(var(--a1),0.08), rgba(var(--a2),0.04));
    border: 1px solid rgba(var(--a1),0.2);
    border-radius: 20px;
    padding: 28px 24px;
    position: relative; overflow: hidden;
}
.cs-takeaway::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(to right, var(--violet), var(--teal), var(--coral));
}
.cs-takeaway-icon {
    color: var(--violet); margin-bottom: 10px;
}
.cs-takeaway-heading {
    font-size: 20px; font-weight: 900;
    background: linear-gradient(135deg, var(--ink), var(--violet));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 16px;
}
.cs-takeaway-list {
    margin: 0; padding: 0; list-style: none;
}
.cs-takeaway-list li {
    font-size: 14.5px; line-height: 1.6; color: var(--ink-soft);
    margin-bottom: 12px; padding-left: 22px;
    position: relative;
}
.cs-takeaway-list li::before {
    content: ''; position: absolute; left: 0; top: 9px;
    width: 8px; height: 8px; border-radius: 50%;
}
.cs-takeaway-list li:nth-child(1)::before { background: var(--violet); }
.cs-takeaway-list li:nth-child(2)::before { background: var(--teal); }
.cs-takeaway-list li:nth-child(3)::before { background: var(--coral); }
.cs-takeaway-list li:nth-child(4)::before { background: #74b9ff; }
.cs-takeaway-list li:last-child { margin-bottom: 0; }

/* -- C18: Scenario Setup — cinematic -- */
.cs-scenario-card {
    background: var(--bg-card);
    border-radius: 20px; overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}
.cs-scenario-img {
    max-height: 220px; overflow: hidden;
    position: relative;
}
.cs-scenario-img::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, var(--bg-card) 0%, rgba(27,36,64,0.5) 50%, transparent 100%);
}
.cs-scenario-img img { border-radius: 0; }
.cs-scenario-body { padding: 24px; }
.cs-scenario-label {
    display: inline-block;
    font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--coral); font-weight: 800; margin-bottom: 10px;
    background: rgba(var(--a3),0.1); padding: 3px 10px;
    border-radius: 999px; border: 1px solid rgba(var(--a3),0.2);
}
.cs-scenario-title {
    font-size: 22px; font-weight: 900; color: var(--ink);
    margin-bottom: 14px;
}
.cs-scenario-body p {
    font-size: 14.5px; line-height: 1.65; color: var(--ink-soft);
    margin: 0 0 10px;
}
.cs-scenario-body p:last-child { margin-bottom: 0; }
@media (min-width: 720px) {
    .cs-scenario-img { max-height: 400px; }
}

/* -- C19: Callout Box — vibrant -- */
.cs-callout {
    display: flex; gap: 16px; align-items: flex-start;
    padding: 20px;
    border-radius: 16px;
}
.cs-callout.tip {
    background: linear-gradient(135deg, rgba(var(--a2),0.08), rgba(var(--a2),0.02));
    border: 1px solid rgba(var(--a2),0.25);
}
.cs-callout.tip .cs-callout-icon {
    color: var(--teal);
    background: rgba(var(--a2),0.12); padding: 8px; border-radius: 12px;
}
.cs-callout.tip strong { color: var(--teal); }
.cs-callout.warning {
    background: linear-gradient(135deg, rgba(var(--a3),0.08), rgba(var(--a3),0.02));
    border: 1px solid rgba(var(--a3),0.25);
}
.cs-callout.warning .cs-callout-icon {
    color: var(--coral);
    background: rgba(var(--a3),0.12); padding: 8px; border-radius: 12px;
}
.cs-callout.warning strong { color: var(--coral); }
.cs-callout-icon { flex-shrink: 0; }
.cs-callout-body { flex: 1; }
.cs-callout-body strong {
    display: block; font-size: 15px; font-weight: 800; margin-bottom: 6px;
}
.cs-callout-body p {
    margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-soft);
}

/* -- C20: Closing — celebration -- */
.cs-closing {
    position: relative; border-radius: 20px; overflow: hidden;
    min-height: 400px; background-size: cover; background-position: center;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
}
.cs-closing-overlay {
    position: relative; z-index: 1;
    padding: 44px 28px;
}
.cs-closing::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(15,23,42,0.92), rgba(15,23,42,0.8));
}
.cs-closing-check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: 50%;
    background: linear-gradient(135deg, rgba(var(--a2),0.2), rgba(var(--a2),0.05));
    border: 2px solid var(--teal);
    color: var(--teal); margin-bottom: 20px;
    box-shadow: 0 0 30px rgba(var(--a2),0.2);
}
.cs-closing-title {
    font-size: 30px; font-weight: 900;
    margin: 0 0 14px;
    background: linear-gradient(135deg, #fff, var(--lavender));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.cs-closing-sub {
    font-size: 15px; color: rgba(255,255,255,0.92);
    margin: 0 0 24px; line-height: 1.65;
}
.cs-closing-next {
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 16px;
    padding: 18px 20px;
    font-size: 14px; color: rgba(255,255,255,0.95);
    line-height: 1.6;
}
.cs-closing-next strong {
    display: block; margin-bottom: 6px; font-size: 11px;
    letter-spacing: 2px; text-transform: uppercase;
    background: linear-gradient(to right, var(--teal), #74b9ff);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* -- C23: Showcase Gallery -- */
.cs-showcase-gallery {
    display: flex; flex-direction: column; gap: 16px;
}
.cs-showcase-card {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    transition: transform .2s;
}
.cs-showcase-card:active { transform: scale(0.98); }
.cs-showcase-img {
    height: 180px; overflow: hidden;
    position: relative;
}
.cs-showcase-img::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 50%;
    background: linear-gradient(to top, var(--bg-card), transparent);
}
.cs-showcase-img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.cs-showcase-body {
    padding: 16px 20px 20px;
}
.cs-showcase-label {
    font-size: 13px; font-weight: 800; letter-spacing: 1.5px;
    text-transform: uppercase; margin-bottom: 6px;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.cs-showcase-body p {
    margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-soft);
}
@media (min-width: 720px) {
    .cs-showcase-gallery {
        display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
        width: 90vw; max-width: 900px;
        margin-left: 50%; transform: translateX(-50%);
    }
    .cs-showcase-img { height: 200px; }
    .cs-showcase-card {
        box-shadow: 0 8px 30px rgba(0,0,0,0.15), 0 0 0 1px rgba(var(--a1),0.08);
    }
}

/* -- Image block helper -- */
.cs-img-block {
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

/* ═══════════════════════════════════════════════════════
   COURSE GLOSSARY MODAL
   Opened from the drawer's Resources. Overlays the full viewport with
   a dimmed scrim + centered panel that shows every term in the GLOSSARY
   object, alphabetized, with definitions.
   ═══════════════════════════════════════════════════════ */
.glossary-modal {
    position: fixed; inset: 0;
    z-index: 60;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.glossary-modal.open {
    opacity: 1;
    pointer-events: auto;
}
.glossary-modal-panel {
    background: var(--bg-elev, #12203a);
    border: 1px solid var(--line-strong, rgba(255,255,255,0.1));
    border-radius: 16px;
    max-width: 600px;
    width: 100%;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.4),
        0 32px 70px rgba(0, 0, 0, 0.45),
        0 80px 160px rgba(0, 0, 0, 0.3);
    transform: translateY(20px) scale(0.96);
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.glossary-modal.open .glossary-modal-panel {
    transform: translateY(0) scale(1);
}
.glossary-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.glossary-modal-header h2 {
    font-family: 'DM Serif Display', 'Fraunces', Georgia, serif;
    font-size: 24px;
    font-weight: 400;
    color: var(--ink, #e8ede9);
    margin: 0;
    letter-spacing: -0.01em;
}
.glossary-modal-list {
    padding: 20px 24px 24px;
    overflow-y: auto;
    margin: 0;
}
.glossary-modal-list dt {
    font-family: 'DM Serif Display', serif;
    font-size: 17px;
    font-weight: 400;
    color: var(--accent-1, #a8c4b4);
    margin-bottom: 6px;
    text-transform: capitalize;
    letter-spacing: -0.005em;
}
.glossary-modal-list dt:not(:first-child) {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.glossary-modal-list dd {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-soft, #b8c4be);
    margin: 0;
}

/* ═══════════════════════════════════════════════════════
   UNIVERSAL IMAGE DEPTH LIFT
   Applies the cs-bleed "floating slab" treatment to EVERY image/media
   container across the course. Content appears to physically lift off
   the dark slide background — augmented-reality-ish feel, award-level
   polish. Same multi-layer shadow grammar as Top Vibe #? (cs-bleed):
   close shadow (contact) + mid (ambient occlusion) + far (atmospheric drop)
   + inset edge highlights (top catch-light + bottom shadow crease).
   ═══════════════════════════════════════════════════════ */
.cs-img-block,
.cs-side-img,
.cs-video-wrap,
.cs-gallery-item,
.cs-img-float img {
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.4),
        0 16px 36px rgba(0, 0, 0, 0.42),
        0 48px 96px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 -1px 0 rgba(0, 0, 0, 0.25);
    position: relative;
}

/* Inset edge highlight — top catch-light for that physical-object feel.
   Skip on .cs-img-float img (tilted, has its own inner shadow) AND on
   .cs-video-wrap (the edge highlight pseudo would sit above the video
   controls and interfere with pointer-event handling for scrubbing, even
   with pointer-events: none — observed in Chrome 2026). */
.cs-img-block::after,
.cs-side-img::after,
.cs-gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    pointer-events: none;
    z-index: 3;
}

/* Ensure the lift is visible on the hero-bleed pattern too (without overriding
   the richer treatment cs-bleed already has) */
.cs-hero {
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.35),
        0 24px 56px rgba(0, 0, 0, 0.38),
        0 56px 112px rgba(0, 0, 0, 0.28);
}

/* ═══════════════════════════════════════════════════════
   CARD-LIFT TIER — for interactive / secondary surfaces
   ~60% intensity of the full image lift. Applied to cards you interact
   with (flip cards, swipe cards, quiz options) and visual callouts
   (quote cards, pull-stats). Text containers are NEVER lifted — language
   belongs to the slide, not to a floating object.

   Hierarchy:
     .cs-bleed / .cs-hero / image containers  → FULL LIFT (hero level)
     .tf-card / .cs-quote-card / .streak-panel / .cs-flip-*
       / .cs-pullstat / .feedback-box / .order-item  → CARD LIFT (this rule)
     Paragraphs, titles, inline UI  → NO LIFT
   ═══════════════════════════════════════════════════════ */
.tf-card,
.cs-quote-card,
.streak-panel,
.cs-flip-front,
.cs-flip-back,
.cs-pullstat,
.feedback-box,
.order-item {
    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.32),
        0 10px 24px rgba(0, 0, 0, 0.3),
        0 28px 56px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ============================================================
   CELEBRATIONS
   ============================================================ */
.cele-container {
    position: fixed; inset: 0;
    pointer-events: none; z-index: 50;
    overflow: hidden;
}
.cele-piece { position: absolute; }
.cele-btns {
    display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
}
.cele-btn {
    padding: 8px 14px; border-radius: var(--radius);
    font-size: 12px; font-weight: 700;
    background: var(--bg-card); border: 1px solid var(--line);
    color: var(--ink-soft); cursor: pointer;
    transition: all .15s;
}
.cele-btn:hover, .cele-btn:active {
    border-color: var(--accent-1); color: var(--accent-1);
    background: rgba(var(--a1), 0.1);
}

/* 1. Confetti */
.cele-confetti {
    top: -20px; border-radius: 2px;
    animation: confettiFall 3s ease-in forwards;
}
@keyframes confettiFall {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* 2. Fireworks */
.cele-burst-origin { position: absolute; }
.cele-fw-flash {
    width: 8px; height: 8px; border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
    animation: fwFlash 0.6s ease-out forwards;
}
@keyframes fwFlash {
    0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.8); transform: translate(-50%,-50%) scale(1); }
    50% { box-shadow: 0 0 40px 20px rgba(255,255,255,0.3); transform: translate(-50%,-50%) scale(3); }
    100% { box-shadow: 0 0 0 0 transparent; transform: translate(-50%,-50%) scale(0); opacity: 0; }
}
.cele-fw-spark {
    width: 5px; height: 5px; border-radius: 50%;
    position: absolute;
    animation: fwExplode 1.6s ease-out forwards;
    box-shadow: 0 0 6px currentColor;
}
@keyframes fwExplode {
    0% { transform: rotate(var(--angle)) translateY(0) scale(1.5); opacity: 1; }
    30% { transform: rotate(var(--angle)) translateY(calc(var(--dist) * -0.5)) scale(1); opacity: 1; }
    70% { transform: rotate(var(--angle)) translateY(calc(var(--dist) * -0.85)) scale(0.7); opacity: 0.5; }
    100% { transform: rotate(var(--angle)) translateY(calc(var(--dist) * -1.2)) scale(0.3); opacity: 0; }
}

/* 3. Bubbles */
.cele-bubble {
    bottom: -40px;
    border-radius: 50%;
    border: 2px solid;
    background: transparent;
    animation-name: bubbleRise;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}
@keyframes bubbleRise {
    0% { transform: translateY(0) scale(0.5); opacity: 0.6; }
    60% { transform: translateY(-80vh) scale(1.1); opacity: 0.5; }
    85% { transform: translateY(-95vh) scale(1.3); opacity: 0.4; }
    90% { transform: translateY(-95vh) scale(1.8); opacity: 0.3; }
    100% { transform: translateY(-95vh) scale(2.5); opacity: 0; }
}

/* 4. Sparkle Rain */
.cele-sparkle {
    top: -10px;
    width: 5px; height: 5px; border-radius: 50%;
    animation-name: sparkleDown;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
    box-shadow: 0 0 8px rgba(var(--a1), 0.6), 0 0 16px rgba(var(--a2), 0.3);
}
@keyframes sparkleDown {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    30% { transform: translateY(30vh) scale(1.3); opacity: 0.9; }
    60% { transform: translateY(60vh) scale(0.8); opacity: 0.7; }
    80% { transform: translateY(80vh) scale(1.5); opacity: 0.5; }
    100% { transform: translateY(100vh) scale(0); opacity: 0; }
}

/* 5. Star Burst */
.cele-star {
    animation: starFly 1.8s ease-out forwards;
    text-shadow: 0 0 8px currentColor;
}
@keyframes starFly {
    0% { transform: rotate(var(--angle)) translateY(0) scale(0); opacity: 0; }
    15% { transform: rotate(var(--angle)) translateY(-5px) scale(1.5); opacity: 1; }
    40% { transform: rotate(var(--angle)) translateY(calc(var(--dist) * -0.5)) scale(1); opacity: 0.9; }
    70% { transform: rotate(var(--angle)) translateY(calc(var(--dist) * -0.85)) scale(0.8); opacity: 0.5; }
    100% { transform: rotate(var(--angle)) translateY(calc(var(--dist) * -1)) scale(0.3); opacity: 0; }
}

/* 6. Spark Fountain — shoots up from bottom corners */
.cele-fountain {
    border-radius: 50%;
    animation-name: fountainUp;
    animation-timing-function: cubic-bezier(.1,.8,.3,1);
    animation-fill-mode: forwards;
}
@keyframes fountainUp {
    0% { transform: translateY(0) translateX(0) scale(1); opacity: 1; }
    30% { transform: translateY(-40vh) translateX(var(--drift)) scale(1.2); opacity: 0.9; }
    60% { transform: translateY(-65vh) translateX(calc(var(--drift) * 1.5)) scale(0.8); opacity: 0.6; }
    100% { transform: translateY(-85vh) translateX(calc(var(--drift) * 2)) scale(0.2); opacity: 0; }
}

/* 7. Ring Pulse — multiple origins with glow */
.cele-ring {
    left: 50%; top: 50%;
    width: 10px; height: 10px;
    border: 2px solid;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: ringExpand 2s ease-out forwards;
    box-shadow: 0 0 12px currentColor, inset 0 0 12px currentColor;
}
@keyframes ringExpand {
    0% { width: 10px; height: 10px; opacity: 1; border-width: 3px; }
    50% { opacity: 0.6; border-width: 2px; }
    100% { width: 400px; height: 400px; opacity: 0; border-width: 1px; }
}

/* 8. Glitter Shower — twinkling fall */
.cele-glitter {
    top: -8px;
    width: 4px; height: 4px;
    border-radius: 50%;
    animation-name: glitterFall;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
    box-shadow: 0 0 4px currentColor;
}
@keyframes glitterFall {
    0% { transform: translateY(0) rotate(0) scale(1); opacity: 1; }
    20% { transform: translateY(20vh) rotate(90deg) scale(0.6); opacity: 0.9; }
    40% { transform: translateY(40vh) rotate(180deg) scale(1.3); opacity: 0.7; }
    60% { transform: translateY(60vh) rotate(270deg) scale(0.5); opacity: 0.8; }
    80% { transform: translateY(80vh) rotate(360deg) scale(1.1); opacity: 0.4; }
    100% { transform: translateY(100vh) rotate(450deg) scale(0); opacity: 0; }
}

/* 9. Comet Trail — glowing streaks shooting upward */
.cele-comet {
    border-radius: 3px;
    animation-name: cometUp;
    animation-timing-function: cubic-bezier(.1,.7,.3,1);
    animation-fill-mode: forwards;
}
@keyframes cometUp {
    0% { transform: translateY(0) scaleY(0.5); opacity: 0; }
    10% { opacity: 1; transform: translateY(-10vh) scaleY(1); }
    50% { transform: translateY(-50vh) scaleY(1.3); opacity: 0.8; }
    100% { transform: translateY(calc(-100vh - 100px)) scaleY(0.3); opacity: 0; }
}

/* 10. Gold Rain — celebratory golden shower */
.cele-goldrain {
    top: -20px;
    animation-name: goldFall;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}
@keyframes goldFall {
    0% { transform: translateY(0) rotate(0) scale(1); opacity: 1; }
    25% { transform: translateY(25vh) rotate(90deg) scale(0.9); opacity: 0.9; }
    50% { transform: translateY(50vh) rotate(200deg) scale(1.1); opacity: 0.7; }
    75% { transform: translateY(75vh) rotate(310deg) scale(0.8); opacity: 0.5; }
    100% { transform: translateY(100vh) rotate(420deg) scale(0.4); opacity: 0; }
}

/* ============================================================
   Respect user's reduced-motion preference
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   Portrait-mobile overrides
   — Phones in portrait are the primary mobile experience.
     Hide the video volume UI (use hardware volume) and the
     calibration map (desktop-only analytical view).
   — Landscape-phone sees the "rotate for best experience" overlay.
   ============================================================ */
@media (orientation: portrait) and (max-width: 768px) {
    .cs-vid-vol-wrap { display: none !important; }
}

/* Portrait-lock overlay — shown when a phone-sized device is in landscape */
.portrait-lock-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 99999;
    background: radial-gradient(ellipse at center, #0f1b15 0%, #071511 80%);
    align-items: center; justify-content: center; flex-direction: column;
    padding: 40px 32px; text-align: center; color: #e8ede9;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased; animation: plo-fade-in .3s ease;
}
.portrait-lock-overlay svg {
    width: 64px; height: 64px; color: #a8c4b4;
    margin-bottom: 22px;
    animation: plo-rotate 2.4s ease-in-out infinite;
}
.portrait-lock-overlay .plo-title {
    font-size: 20px; font-weight: 700; line-height: 1.3;
    color: #e8ede9; margin-bottom: 10px; letter-spacing: -0.01em;
}
.portrait-lock-overlay .plo-body {
    font-size: 14px; line-height: 1.55; color: #b8c4be;
    max-width: 320px;
}
.portrait-lock-overlay .plo-kicker {
    font-family: 'JetBrains Mono', 'SFMono-Regular', monospace;
    font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
    color: #3e7361; font-weight: 700; margin-bottom: 14px;
}
@keyframes plo-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes plo-rotate {
    0%, 100% { transform: rotate(-12deg); }
    50% { transform: rotate(78deg); }
}
@media (orientation: landscape) and (max-height: 500px) {
    .portrait-lock-overlay { display: flex; }
    /* Hide course chrome under the overlay so nothing peeks through */
    .topbar, .stage, .bottom-nav { visibility: hidden; }
}