/* ===================================================================

   Aliens Cinematic Learning Experience — Theme CSS

   (c) Aliens Learning Foundation — Aliens School

   Auto-extracted from L1 reference template

=================================================================== */



/* ===== ALIENS BRAND DESIGN TOKENS ===== */

:root{

    /* Brand: Primary = Green, Secondary = Teal, Accent = Soft Purple */

    --brand:#22c55e;--brand-dim:rgba(34,197,94,.12);--brand-glow:rgba(34,197,94,.25);

    --teal:#0ea5e9;--teal-dim:rgba(14,165,233,.10);--teal-glow:rgba(14,165,233,.20);

    --purple:#7c6aff;--purple-dim:rgba(124,106,255,.10);

    --red:#ef4444;--yellow:#f59e0b;--red-dim:rgba(239,68,68,.10);--green-dim:rgba(34,197,94,.10);

    /* Backgrounds — dark navy */

    --bg:#0d1117;--bg2:#111827;--surface:#151d2b;--surface2:#1a2332;--surface3:#1e293b;

    /* Glass */

    --glass:rgba(21,29,43,.78);--glass2:rgba(26,35,50,.65);

    /* Borders */

    --border:rgba(255,255,255,.06);--border2:rgba(255,255,255,.08);

    /* Text */

    --t1:#e2e8f0;--t2:#94a3b8;--t3:#64748b;

    /* Motion */

    --spring:cubic-bezier(.16,1,.3,1);--smooth:cubic-bezier(.4,0,.2,1);--cine:cubic-bezier(.25,.46,.45,.94);

}

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

html,body{height:100%;overflow:hidden;font-family:'Inter','Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--t2);-webkit-font-smoothing:antialiased}



/* ===== CUSTOM CURSOR (DISABLED for performance) ===== */

#cursor-glow,#cursor-dot{display:none!important}



/* ===== LOADER ===== */

#loader{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity 1.2s var(--smooth),transform 1.2s var(--smooth)}

#loader.done{opacity:0;transform:scale(1.06);pointer-events:none}

.loader-logo{width:72px;height:86px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 0 40px rgba(34,197,94,.3));animation:logoPulse 2.5s ease-in-out infinite alternate}

.loader-name{font-family:'Space Grotesk',sans-serif;font-size:1.15rem;letter-spacing:8px;color:var(--t1);margin-top:22px;opacity:0;animation:fadeInUp .8s var(--spring) .4s both}

.loader-sub{font-size:.78rem;color:var(--t3);margin-top:8px;opacity:0;animation:fadeInUp .8s var(--spring) .8s both;letter-spacing:1px}

.loader-pct{font-family:'Space Grotesk',sans-serif;font-size:2.2rem;font-weight:700;color:rgba(34,197,94,.25);margin-top:28px;letter-spacing:2px;font-variant-numeric:tabular-nums}

.loader-track{width:200px;height:2px;margin-top:14px;background:rgba(255,255,255,.04);border-radius:2px;overflow:hidden}

.loader-fill{height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--teal));border-radius:2px;transition:width .3s var(--smooth)}

@keyframes logoPulse{from{filter:drop-shadow(0 0 30px rgba(34,197,94,.2));transform:scale(1)}to{filter:drop-shadow(0 0 60px rgba(34,197,94,.4));transform:scale(1.04)}}



/* ===== VIGNETTE + LETTERBOX ===== */

#vignette{position:fixed;inset:0;z-index:3;pointer-events:none;background:radial-gradient(ellipse 80% 70% at 50% 50%,transparent 50%,rgba(0,0,0,.5) 100%)}

.letterbox{position:fixed;left:0;right:0;height:28px;z-index:4;background:var(--bg);pointer-events:none}

.letterbox-top{top:0}.letterbox-bot{bottom:0}



/* ===== CANVAS + ORBS ===== */

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

.orb{position:fixed;border-radius:50%;pointer-events:none;z-index:1;filter:blur(40px);opacity:.7;contain:strict}

.orb-1{width:400px;height:400px;top:-160px;left:-160px;background:rgba(34,197,94,.06);animation:od1 28s ease-in-out infinite alternate}

.orb-2{width:350px;height:350px;bottom:-100px;right:-100px;background:rgba(14,165,233,.05);animation:od2 22s ease-in-out infinite alternate}

.orb-3{width:300px;height:300px;top:35%;left:60%;background:rgba(124,106,255,.04);animation:od3 25s ease-in-out infinite alternate}

@keyframes od1{to{transform:translate(70px,50px) scale(1.12)}}

@keyframes od2{to{transform:translate(-60px,-40px) scale(1.18)}}

@keyframes od3{to{transform:translate(-50px,60px) scale(.88)}}



/* ===== CINEMATIC BACKGROUND — AURORA + GRID + STREAKS ===== */

#aurora-layer{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;opacity:.7}

.aurora{position:absolute;width:140%;height:140%;border-radius:50%;filter:blur(40px);opacity:.6;will-change:transform;contain:strict}

.aurora-1{top:-60%;left:-30%;background:radial-gradient(ellipse at 40% 50%,rgba(34,197,94,.07),transparent 70%);animation:auroraMove1 20s ease-in-out infinite alternate}

.aurora-2{top:-40%;right:-30%;background:radial-gradient(ellipse at 60% 50%,rgba(14,165,233,.06),transparent 70%);animation:auroraMove2 25s ease-in-out infinite alternate}

.aurora-3{bottom:-60%;left:10%;background:radial-gradient(ellipse at 50% 60%,rgba(124,106,255,.04),transparent 70%);animation:auroraMove3 22s ease-in-out infinite alternate}

@keyframes auroraMove1{0%{transform:translate(0,0) rotate(0deg) scale(1)}50%{transform:translate(8%,5%) rotate(8deg) scale(1.15)}100%{transform:translate(-5%,10%) rotate(-5deg) scale(1.05)}}

@keyframes auroraMove2{0%{transform:translate(0,0) rotate(0deg) scale(1)}50%{transform:translate(-10%,8%) rotate(-10deg) scale(1.1)}100%{transform:translate(5%,-5%) rotate(5deg) scale(.95)}}

@keyframes auroraMove3{0%{transform:translate(0,0) rotate(0deg) scale(1)}50%{transform:translate(6%,-8%) rotate(6deg) scale(1.12)}100%{transform:translate(-8%,3%) rotate(-8deg) scale(1)}}

#grid-layer{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.04;

background-image:linear-gradient(rgba(34,197,94,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(34,197,94,.3) 1px,transparent 1px);

background-size:80px 80px}

@keyframes gridPulse{0%{opacity:.03}50%{opacity:.06}100%{opacity:.03}}

#streak-layer{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}

.light-streak{position:absolute;width:2px;border-radius:2px;background:linear-gradient(180deg,transparent,rgba(34,197,94,.15),rgba(14,165,233,.1),transparent);opacity:0}

.ls-1{height:180px;left:12%;animation:streakFall 7s linear 0s infinite}

.ls-2{height:140px;left:38%;animation:streakFall 9s linear 2s infinite}

.ls-3{height:200px;left:62%;animation:streakFall 8s linear 4s infinite}

.ls-4{display:none}

.ls-5{display:none}

.ls-6{display:none}

@keyframes streakFall{0%{transform:translateY(-200px);opacity:0}10%{opacity:.6}90%{opacity:.4}100%{transform:translateY(110vh);opacity:0}}



/* ===== PLAYER ===== */

#player{position:relative;width:100vw;height:100vh;overflow:hidden;z-index:2}



/* ===== SLIDES ===== */

.slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:56px 60px 110px;text-align:center;

    opacity:0;transform:scale(1.04);

    transition:opacity 1.1s var(--cine),transform 2s var(--cine);

    pointer-events:none;overflow-y:auto;overflow-x:hidden}

.slide.active{opacity:1;transform:scale(1);pointer-events:auto;will-change:transform,opacity}

.slide.exit{opacity:0;transform:scale(.97)}

@keyframes kenBurns{0%{transform:scale(1) translate(0,0)}100%{transform:scale(1.025) translate(-3px,-2px)}}



/* Slide backgrounds — Aliens navy tones */

.bg-1{background:linear-gradient(135deg,rgba(13,17,23,.97),rgba(17,24,39,.97),rgba(21,29,43,.96))}

.bg-2{background:linear-gradient(135deg,rgba(13,17,23,.97),rgba(21,29,43,.96),rgba(30,41,59,.95))}

.bg-3{background:linear-gradient(135deg,rgba(17,24,39,.97),rgba(21,29,43,.96),rgba(15,23,42,.95))}

.bg-4{background:linear-gradient(135deg,rgba(13,17,23,.97),rgba(15,23,42,.96),rgba(26,35,50,.95))}

.bg-5{background:linear-gradient(135deg,rgba(15,23,42,.97),rgba(21,29,43,.96),rgba(30,41,59,.95))}

.bg-6{background:linear-gradient(135deg,rgba(13,17,23,.97),rgba(17,24,39,.96),rgba(15,23,42,.95))}

.bg-7{background:linear-gradient(135deg,rgba(15,23,42,.97),rgba(21,29,43,.96),rgba(26,35,50,.95))}

.bg-8{background:linear-gradient(135deg,rgba(17,24,39,.97),rgba(21,29,43,.96),rgba(15,23,42,.95))}

.bg-9{background:linear-gradient(135deg,rgba(13,17,23,.97),rgba(21,29,43,.96),rgba(30,41,59,.95))}

.bg-10{background:linear-gradient(135deg,rgba(13,17,23,.97),rgba(17,24,39,.97),rgba(21,29,43,.96))}



/* ===== ANIM ITEMS ===== */

.anim-item{opacity:0;transform:translateY(28px);transition:opacity .8s var(--spring),transform .8s var(--spring)}

.anim-item.from-left{transform:translateX(-28px) translateY(0)}

.anim-item.from-scale{transform:translateY(32px) scale(.95)}

.anim-item.from-right{transform:translateX(24px) translateY(0)}

.anim-item.revealed{opacity:1;transform:none}



/* CONTENT */

.slide-content{position:relative;z-index:1;max-width:1100px;width:100%}



/* ===== TYPOGRAPHY ===== */

.slide-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 18px;border-radius:20px;background:var(--brand-dim);border:1px solid rgba(34,197,94,.18);font-size:.74rem;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:#4ade80;margin-bottom:18px}

.slide-tag .tag-dot{width:6px;height:6px;border-radius:50%;background:var(--brand);animation:tagDotPulse 2s ease-in-out infinite}

@keyframes tagDotPulse{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}

.slide-title{font-family:'Space Grotesk','Inter',sans-serif;font-size:3.1rem;font-weight:700;line-height:1.13;margin-bottom:18px;color:var(--t1);letter-spacing:-.5px}

.slide-title .hl{position:relative;display:inline;background:linear-gradient(135deg,#4ade80 0%,#22c55e 40%,#0ea5e9 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-decoration:none}

.slide-title .hl::after{content:'';position:absolute;left:0;bottom:-2px;width:100%;height:3px;background:linear-gradient(90deg,#22c55e,#0ea5e9);border-radius:2px;opacity:.7}

.slide-text{font-size:1.12rem;line-height:1.8;color:var(--t2)}

.slide-text strong{color:var(--t1)}

.slide-text .acc{color:#4ade80;font-weight:600}

.slide-icon{font-size:4.2rem;margin-bottom:14px;filter:drop-shadow(0 0 28px rgba(34,197,94,.2))}

.slide-icon.revealed{animation:iconB 4s ease-in-out .8s infinite}

@keyframes iconB{0%,100%{transform:translateY(0) scale(1);filter:drop-shadow(0 0 20px rgba(34,197,94,.2))}50%{transform:translateY(-12px) scale(1.06);filter:drop-shadow(0 0 40px rgba(14,165,233,.3))}}



/* ===== KEY POINT CALLOUT ===== */

.key-point{display:flex;align-items:flex-start;gap:12px;margin:16px 0 8px;padding:14px 20px;border-radius:14px;background:linear-gradient(135deg,rgba(34,197,94,.06),rgba(14,165,233,.03));border:1px solid rgba(34,197,94,.12);text-align:left}

.key-point .kp-icon{font-size:1.5rem;flex-shrink:0;margin-top:1px}

.key-point .kp-text{font-size:.96rem;color:var(--t2);line-height:1.55}

.key-point .kp-text strong{color:var(--t1)}



/* ===== SVG ILLUSTRATIONS ===== */

.svg-illust{display:flex;justify-content:center;margin:16px 0 8px}

.svg-illust svg{max-width:100%;height:auto;filter:drop-shadow(0 0 20px rgba(34,197,94,.12))}



/* ===== ANIMATED SCENE ILLUSTRATIONS ===== */

.scene-illust{display:flex;justify-content:center;margin:10px 0 6px;position:relative}

.scene-illust svg{max-width:100%;height:auto;filter:drop-shadow(0 0 24px rgba(34,197,94,.1))}

.scene-illust.float svg{animation:sceneFloat 6s ease-in-out infinite}

.scene-illust.float-slow svg{animation:sceneFloat 8s ease-in-out infinite}

@keyframes sceneFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-10px) rotate(.3deg)}}

@keyframes dataFlow{to{stroke-dashoffset:0}}

@keyframes nodeGlow{0%,100%{opacity:.5}50%{opacity:1}}

@keyframes iconOrbit{from{transform:rotate(0deg) translateX(85px) rotate(0deg)}to{transform:rotate(360deg) translateX(85px) rotate(-360deg)}}



/* ===== ICON GRID ===== */

.icon-row{display:flex;justify-content:center;gap:32px;margin:24px 0 8px;flex-wrap:wrap}

.icon-item{display:flex;flex-direction:column;align-items:center;gap:9px;min-width:88px}

.icon-circle{width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.1rem;background:var(--surface);border:1px solid var(--border);transition:all .45s var(--spring);position:relative}

.icon-circle::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid transparent;transition:border-color .4s}

.icon-circle:hover{transform:scale(1.14) translateY(-4px);border-color:var(--brand);box-shadow:0 8px 28px rgba(34,197,94,.12)}

.icon-circle:hover::after{border-color:rgba(34,197,94,.15)}

.icon-label{font-size:.78rem;color:var(--t3);font-weight:500;transition:color .3s}

.icon-item:hover .icon-label{color:var(--t2)}



/* ===== TIMELINE ===== */

.timeline{position:relative;margin:20px 0 6px;padding-left:40px;text-align:left}

.timeline::before{content:'';position:absolute;left:14px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--brand),var(--teal))}

.tl-item{position:relative;padding:9px 0 9px 24px;margin-bottom:3px}

.tl-dot{position:absolute;left:-32px;top:13px;width:13px;height:13px;border-radius:50%;border:2px solid var(--brand);background:var(--bg);transition:all .4s var(--spring)}

.tl-dot.active{background:var(--brand);box-shadow:0 0 14px rgba(34,197,94,.4)}

.tl-year{font-family:'Space Grotesk',sans-serif;font-size:.8rem;color:#4ade80;font-weight:600;margin-bottom:2px}

.tl-text{font-size:.96rem;color:var(--t2);line-height:1.5}

.tl-text strong{color:var(--t1)}



/* ===== VERSUS ===== */

.vs-container{display:flex;align-items:stretch;gap:0;margin-top:20px;text-align:left}

.vs-side{flex:1;padding:20px;background:var(--glass);border:1px solid var(--border);border-radius:18px;transition:all .45s var(--spring);position:relative;overflow:hidden}

.vs-side::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(34,197,94,.03),transparent 50%);opacity:0;transition:opacity .4s}

.vs-side:hover::before{opacity:1}

.vs-side:hover{transform:translateY(-4px);border-color:rgba(34,197,94,.2);box-shadow:0 16px 48px rgba(34,197,94,.06)}

.vs-side .vs-icon{font-size:2.3rem;margin-bottom:7px;display:block}

.vs-side h3{font-family:'Space Grotesk',sans-serif;font-size:1.02rem;color:#4ade80;margin-bottom:7px}

.vs-side p{font-size:.93rem;color:var(--t2);line-height:1.55}

.vs-divider{display:flex;align-items:center;justify-content:center;padding:0 10px}

.vs-badge{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--teal));display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-size:1.05rem;font-weight:700;color:#0d1117;box-shadow:0 0 22px rgba(34,197,94,.25);flex-shrink:0;animation:vsBadgePulse 3s ease-in-out infinite}

@keyframes vsBadgePulse{0%,100%{box-shadow:0 0 18px rgba(34,197,94,.25)}50%{box-shadow:0 0 34px rgba(34,197,94,.4)}}



/* ===== SPECTRUM ===== */

.spectrum{margin:20px 0 6px;position:relative;height:52px;border-radius:12px;overflow:hidden;background:linear-gradient(90deg,var(--red) 0%,var(--yellow) 35%,var(--brand) 65%,var(--teal) 100%);box-shadow:0 4px 20px rgba(0,0,0,.3)}

.spectrum-labels{display:flex;justify-content:space-between;margin-top:8px}

.spectrum-label{font-size:.78rem;color:var(--t3);display:flex;align-items:center;gap:6px}

.spectrum-label .dot{width:9px;height:9px;border-radius:50%}

.spectrum-pointer{position:absolute;right:18%;top:-5px;width:2px;height:calc(100% + 10px);background:var(--t1);opacity:.8;animation:pointerPulse 2s ease-in-out infinite}

.spectrum-pointer::after{content:'WE ARE HERE';position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-size:.58rem;font-weight:700;color:var(--t1);white-space:nowrap;letter-spacing:1.5px;background:rgba(0,0,0,.7);padding:3px 9px;border-radius:7px}

@keyframes pointerPulse{0%,100%{opacity:.8}50%{opacity:.35}}



/* ===== CARDS ===== */

.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px;text-align:left}

.card-grid.cols-3{grid-template-columns:repeat(3,1fr)}.card-grid.cols-4{grid-template-columns:repeat(4,1fr)}

.g-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px 16px;transition:all .45s var(--spring);position:relative;overflow:hidden}

.g-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(34,197,94,.04),transparent 50%);opacity:0;transition:opacity .4s}

.g-card:hover::before{opacity:1}

.g-card:hover{border-color:rgba(34,197,94,.22);box-shadow:0 16px 48px rgba(34,197,94,.06)}

.g-card .card-icon{font-size:1.9rem;margin-bottom:7px;display:block}

.g-card h3{font-family:'Space Grotesk',sans-serif;font-size:.98rem;color:#4ade80;margin-bottom:5px}

.g-card p{font-size:.9rem;color:var(--t2);line-height:1.5}

.g-card.red-glow:hover{border-color:rgba(239,68,68,.22);box-shadow:0 16px 48px rgba(239,68,68,.04)}

.g-card.green-glow:hover{border-color:rgba(34,197,94,.25);box-shadow:0 16px 48px rgba(34,197,94,.06)}



/* ===== STAT ROW ===== */

.stat-row{display:flex;justify-content:center;gap:22px;margin:20px 0 6px;flex-wrap:wrap}

.stat-item{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:105px;padding:14px 12px;background:var(--surface);border:1px solid var(--border);border-radius:14px;transition:all .4s var(--spring)}

.stat-item:hover{transform:translateY(-4px);border-color:rgba(34,197,94,.2);box-shadow:0 8px 28px rgba(34,197,94,.06)}

.stat-icon{font-size:1.9rem}.stat-label{font-size:.74rem;color:var(--t3);text-align:center;font-weight:500;line-height:1.3}



/* ===== CHECKLIST ===== */

.checklist{text-align:left;margin:20px 0 6px;columns:2;column-gap:26px}

.check-item{break-inside:avoid;display:flex;align-items:flex-start;gap:9px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.03)}

.check-mark{width:23px;height:23px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.78rem;margin-top:1px;transition:all .35s var(--spring)}

.check-mark.yes{background:rgba(34,197,94,.12);color:var(--brand);border:1px solid rgba(34,197,94,.2)}

.check-mark.no{background:rgba(239,68,68,.1);color:var(--red);border:1px solid rgba(239,68,68,.18)}

.check-item:hover .check-mark{transform:scale(1.12)}

.check-text{font-size:.95rem;color:var(--t2);line-height:1.5}.check-text strong{color:var(--t1)}



/* ===== QUIZ ===== */

.quiz-options{text-align:left;margin-top:16px}

.quiz-opt{display:flex;align-items:center;gap:12px;width:100%;padding:14px 18px;margin-bottom:9px;background:var(--surface);border:1px solid var(--border);border-radius:12px;color:var(--t2);font-size:1rem;font-family:inherit;cursor:pointer;transition:all .4s var(--spring);text-align:left;position:relative;overflow:hidden}

.quiz-opt .q-letter{display:inline-flex;align-items:center;justify-content:center;width:27px;height:27px;border-radius:7px;background:rgba(34,197,94,.08);color:#4ade80;font-family:'Space Grotesk',sans-serif;font-size:.82rem;font-weight:600;flex-shrink:0;transition:all .3s var(--spring)}

.quiz-opt .q-icon{font-size:1.3rem;flex-shrink:0}

.quiz-opt::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(34,197,94,.06),transparent);opacity:0;transition:opacity .3s}

.quiz-opt:hover::before{opacity:1}

.quiz-opt:hover{border-color:var(--brand);color:var(--t1);transform:translateX(5px);box-shadow:0 4px 20px rgba(34,197,94,.08)}

.quiz-opt:hover .q-letter{background:rgba(34,197,94,.15);transform:scale(1.08)}

.quiz-opt.correct{border-color:var(--brand);background:rgba(34,197,94,.1);color:var(--brand);box-shadow:0 0 32px rgba(34,197,94,.12);transform:scale(1.02)}

.quiz-opt.correct .q-letter{background:rgba(34,197,94,.18);color:var(--brand)}

.quiz-opt.wrong{border-color:var(--red);background:rgba(239,68,68,.08);color:var(--red);animation:shake .55s var(--spring)}

.quiz-opt.wrong .q-letter{background:rgba(239,68,68,.15);color:var(--red)}



/* ===== PROGRESS ===== */

#progress-wrap{position:fixed;bottom:58px;left:0;right:0;z-index:100;height:3px;background:rgba(255,255,255,.04);cursor:pointer;transition:height .2s var(--spring)}

#progress-wrap:hover{height:5px}

#progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--teal));border-radius:0 2px 2px 0;transition:width .4s var(--spring);position:relative}

#progress-bar::after{content:'';position:absolute;right:-5px;top:50%;transform:translateY(-50%);width:11px;height:11px;border-radius:50%;background:var(--brand);opacity:0;transition:opacity .2s;box-shadow:0 0 10px rgba(34,197,94,.4)}

#progress-wrap:hover #progress-bar::after{opacity:1}



/* ===== DOTS ===== */

#progress-dots{display:flex;gap:4px;align-items:center;padding:0 10px}

.pdot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.08);cursor:pointer;transition:all .45s var(--spring);flex-shrink:0}

.pdot.active{width:20px;border-radius:4px;background:var(--brand);box-shadow:0 0 12px rgba(34,197,94,.4)}

.pdot.past{background:rgba(34,197,94,.28)}

.pdot:hover{background:rgba(34,197,94,.5);transform:scale(1.25)}



/* ===== CONTROLS ===== */

#controls{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);z-index:100;display:flex;gap:3px;align-items:center;

    background:rgba(13,17,23,.94);backdrop-filter:blur(10px);padding:7px 14px;border-radius:50px;

    border:1px solid var(--border);box-shadow:0 8px 40px rgba(0,0,0,.4);

    transition:opacity .5s var(--smooth),transform .5s var(--smooth)}

#controls.hidden{opacity:0;transform:translateX(-50%) translateY(18px);pointer-events:none}

.ctrl-btn{background:none;border:none;color:var(--t2);font-size:1.05rem;cursor:pointer;padding:6px 9px;border-radius:9px;transition:all .25s var(--spring)}

.ctrl-btn:hover{color:var(--t1);background:rgba(34,197,94,.1);transform:scale(1.1)}

.ctrl-btn:active{transform:scale(.93)}

#slide-counter{font-size:.68rem;color:var(--t3);padding:0 5px;min-width:32px;text-align:center;font-variant-numeric:tabular-nums;font-family:'Space Grotesk',sans-serif}

#time-display{font-size:.62rem;color:var(--t3);font-variant-numeric:tabular-nums;font-family:'Space Grotesk',sans-serif;padding:0 3px}

.speed-btn{font-family:'Space Grotesk',sans-serif;font-size:.7rem;font-weight:600;color:#4ade80;padding:3px 7px;border-radius:5px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.12);cursor:pointer;transition:all .25s var(--spring)}

.speed-btn:hover{background:rgba(34,197,94,.15);color:var(--t1)}



/* ===== TOP BAR ===== */

#top-bar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:12px 28px;

    background:rgba(13,17,23,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);

    transition:opacity .5s var(--smooth),transform .5s var(--smooth)}

#top-bar.hidden{opacity:0;transform:translateY(-100%);pointer-events:none}

#top-bar .brand{font-family:'Space Grotesk',sans-serif;font-size:.78rem;font-weight:700;letter-spacing:3px;background:linear-gradient(90deg,#22c55e,#0ea5e9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

#top-bar .lesson-info{font-size:.72rem;color:var(--t3)}

.now-playing{display:inline-flex;align-items:center;gap:5px;font-size:.68rem;color:rgba(34,197,94,.5);margin-left:12px}

.wave-bars{display:flex;gap:2px;align-items:flex-end;height:11px}

.wave-bar{width:2px;background:var(--brand);border-radius:1px;animation:wave 1.2s ease-in-out infinite}

.wave-bar:nth-child(1){height:3px;animation-delay:0s}.wave-bar:nth-child(2){height:7px;animation-delay:.15s}

.wave-bar:nth-child(3){height:4px;animation-delay:.3s}.wave-bar:nth-child(4){height:9px;animation-delay:.45s}

.wave-bar:nth-child(5){height:3px;animation-delay:.6s}

@keyframes wave{0%,100%{height:3px;opacity:.4}50%{height:11px;opacity:1}}

.wave-bars.paused .wave-bar{animation-play-state:paused}



/* ===== SUBTITLES ===== */

#subtitle-bar{position:fixed;bottom:74px;left:50%;transform:translateX(-50%);z-index:99;max-width:70vw;padding:12px 28px;

    background:rgba(13,17,23,.95);border-radius:10px;border:1px solid var(--border);

    opacity:0;transition:opacity .5s var(--smooth);pointer-events:none}

#subtitle-bar.visible{opacity:1}

#subtitle-text{font-size:.95rem;color:#cbd5e1;line-height:1.6;text-align:center;display:block}

#subtitle-text .sub-word{display:inline;transition:all .25s ease;padding:1px 0;border-radius:3px}

#subtitle-text .sub-word.active{color:#fff;background:rgba(34,197,94,.28);padding:1px 4px;border-radius:4px;text-shadow:0 0 8px rgba(34,197,94,.3)}



/* ===== TOAST ===== */

#audio-toast{position:fixed;top:52px;left:50%;transform:translateX(-50%) translateY(-22px);z-index:200;padding:7px 20px;border-radius:9px;

    background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.18);color:#86efac;font-size:.8rem;

    opacity:0;transition:opacity .4s ease,transform .4s var(--spring);pointer-events:none}

#audio-toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}



/* ===== KEYBOARD HINT ===== */

#kb-hint{position:fixed;inset:0;z-index:8000;background:rgba(13,17,23,.95);display:none;justify-content:center;align-items:center;opacity:0;transition:opacity .4s}

#kb-hint.show{display:flex;opacity:1}

.kb-grid{display:grid;grid-template-columns:auto 1fr;gap:12px 22px;align-items:center}

.kb-key{display:inline-block;padding:5px 12px;border-radius:7px;background:var(--surface);border:1px solid var(--border2);font-family:'Space Grotesk',sans-serif;font-size:.82rem;font-weight:600;color:var(--t1);min-width:56px;text-align:center}

.kb-desc{font-size:.88rem;color:var(--t2)}

.kb-title{font-family:'Space Grotesk',sans-serif;font-size:1.2rem;font-weight:700;color:var(--t1);margin-bottom:22px;text-align:center;grid-column:span 2}

.kb-close{grid-column:span 2;text-align:center;margin-top:14px;font-size:.78rem;color:var(--t3)}



/* ===== PARTICLE CONTAINER ===== */

#particle-layer{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden}



/* ===== TOPIC SPOTLIGHT SYSTEM ===== */

/* Active spotlight base */

.spot-active{

    position:relative !important;

    z-index:5 !important;

    transition:all .5s var(--spring) !important;

}

/* Animated glow ring — shifts green↔teal */

.spot-glow{

    animation:spotGlow 2s ease-in-out infinite alternate !important;

}

@keyframes spotGlow{

    0%{box-shadow:0 0 0 2px rgba(34,197,94,.5),0 0 24px rgba(34,197,94,.12),0 0 60px rgba(34,197,94,.03),inset 0 0 18px rgba(34,197,94,.02)}

    100%{box-shadow:0 0 0 2px rgba(14,165,233,.5),0 0 32px rgba(14,165,233,.14),0 0 70px rgba(14,165,233,.04),inset 0 0 18px rgba(14,165,233,.02)}

}

/* Scale + brightness pop */

.spot-pop{

    transform:scale(1.04) translateY(-4px) !important;

    filter:brightness(1.12) !important;

}

/* Text-only spotlight (no box-shadow ring) */

.spot-text-glow{

    animation:spotTextGlow 2s ease-in-out infinite alternate !important;

}

@keyframes spotTextGlow{

    0%{text-shadow:0 0 22px rgba(34,197,94,.18),0 2px 32px rgba(34,197,94,.06);filter:brightness(1.1)}

    100%{text-shadow:0 0 32px rgba(14,165,233,.18),0 2px 42px rgba(14,165,233,.08);filter:brightness(1.15)}

}

/* SVG/illustration spotlight */

.spot-svg-glow{

    animation:spotSvgGlow 2s ease-in-out infinite alternate !important;

}

@keyframes spotSvgGlow{

    0%{filter:drop-shadow(0 0 20px rgba(34,197,94,.22)) brightness(1.12)}

    100%{filter:drop-shadow(0 0 30px rgba(14,165,233,.25)) brightness(1.18)}

}

/* Key-point callout when active */

.key-point.spot-active{

    border-color:rgba(34,197,94,.4) !important;

    background:linear-gradient(135deg,rgba(34,197,94,.12),rgba(14,165,233,.06)) !important;

}

/* Dim non-active siblings */

.spot-dim{

    opacity:.3 !important;

    filter:brightness(.55) saturate(.45) !important;

    transform:scale(.97) !important;

    transition:opacity .65s var(--smooth),filter .65s var(--smooth),transform .65s var(--spring) !important;

}

.spot-undim{

    transition:opacity .5s var(--smooth),filter .5s var(--smooth),transform .5s var(--spring) !important;

}

/* Light sweep strip overlaid on active block elements */

.spot-sweep{

    position:absolute !important;inset:0 !important;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:10;

}

.spot-sweep::after{

    content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;

    background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.03) 40%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.03) 60%,transparent 80%);

    animation:sweepMove 2.8s ease-in-out infinite;

}

@keyframes sweepMove{0%{left:-100%}50%,100%{left:150%}}

/* Floating spotlight beam that follows active element */

#spot-beam{

    position:fixed;width:280px;height:280px;border-radius:50%;

    background:radial-gradient(circle,rgba(34,197,94,.06) 0%,rgba(14,165,233,.025) 40%,transparent 70%);

    pointer-events:none;z-index:4;

    transition:left .9s var(--spring),top .9s var(--spring),opacity .6s var(--smooth),width .6s,height .6s;

    transform:translate(-50%,-50%);opacity:0;

    mix-blend-mode:screen;filter:blur(35px);

}

#spot-beam.visible{opacity:1}

/* Animated corner markers on spot-active blocks */

.spot-corners{

    position:absolute !important;inset:-4px !important;pointer-events:none;z-index:11;border-radius:inherit;

}

.spot-corners::before,.spot-corners::after{

    content:'';position:absolute;width:14px;height:14px;border:2px solid rgba(34,197,94,.5);

    animation:cornerPulse 2s ease-in-out infinite alternate;

}

.spot-corners::before{top:0;left:0;border-right:none;border-bottom:none;border-radius:4px 0 0 0}

.spot-corners::after{bottom:0;right:0;border-left:none;border-top:none;border-radius:0 0 4px 0}

@keyframes cornerPulse{

    0%{border-color:rgba(34,197,94,.5);transform:scale(1)}

    100%{border-color:rgba(14,165,233,.5);transform:scale(1.1)}

}



/* ===== KEYFRAMES ===== */

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

@keyframes shake{0%,100%{transform:translateX(0)}15%{transform:translateX(-9px) rotate(-1deg)}30%{transform:translateX(9px) rotate(1deg)}45%{transform:translateX(-5px)}60%{transform:translateX(5px)}75%{transform:translateX(-2px)}}

@keyframes confettiFall{0%{transform:translateY(0) rotate(0deg) scale(1);opacity:1}100%{transform:translateY(100vh) rotate(720deg) scale(.15);opacity:0}}



/* ========================================================================
   LIGHT THEME — Toggle via body.light-theme
   Overrides dark-navy palette to clean white/slate palette.
   Brand colors (green, teal, purple) stay consistent.
   ======================================================================== */

/* --- Core Variable Overrides --- */
body.light-theme{
    --bg:#ffffff;--bg2:#f8fafc;
    --surface:#f1f5f9;--surface2:#e2e8f0;--surface3:#cbd5e1;
    --glass:rgba(255,255,255,.88);--glass2:rgba(248,250,252,.78);
    --border:rgba(15,23,42,.07);--border2:rgba(15,23,42,.10);
    --t1:#0f172a;--t2:#475569;--t3:#94a3b8;
    --brand-dim:rgba(34,197,94,.08);--brand-glow:rgba(34,197,94,.18);
    --teal-dim:rgba(14,165,233,.07);--teal-glow:rgba(14,165,233,.14);
    --purple-dim:rgba(124,106,255,.07);
    --red-dim:rgba(239,68,68,.07);--green-dim:rgba(34,197,94,.07);
}

/* Smooth transition between themes */
body{transition:background .45s var(--smooth),color .45s var(--smooth)}

/* --- Backgrounds & Ambient Layers --- */
body.light-theme #vignette{background:radial-gradient(ellipse 80% 70% at 50% 50%,transparent 60%,rgba(241,245,249,.6) 100%)}
body.light-theme .letterbox{background:var(--bg)}
body.light-theme .orb-1{background:rgba(34,197,94,.04)}
body.light-theme .orb-2{background:rgba(14,165,233,.035)}
body.light-theme .orb-3{background:rgba(124,106,255,.025)}
body.light-theme #aurora-layer{opacity:.35}
body.light-theme .aurora-1{background:radial-gradient(ellipse at 40% 50%,rgba(34,197,94,.05),transparent 70%)}
body.light-theme .aurora-2{background:radial-gradient(ellipse at 60% 50%,rgba(14,165,233,.04),transparent 70%)}
body.light-theme .aurora-3{background:radial-gradient(ellipse at 50% 60%,rgba(124,106,255,.03),transparent 70%)}
body.light-theme #grid-layer{opacity:.03;background-image:linear-gradient(rgba(15,23,42,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.08) 1px,transparent 1px)}
body.light-theme .light-streak{background:linear-gradient(180deg,transparent,rgba(34,197,94,.08),rgba(14,165,233,.06),transparent)}

/* --- Slide Backgrounds --- */
body.light-theme .bg-1{background:linear-gradient(135deg,rgba(255,255,255,.97),rgba(248,250,252,.97),rgba(241,245,249,.96))}
body.light-theme .bg-2{background:linear-gradient(135deg,rgba(255,255,255,.97),rgba(241,245,249,.96),rgba(226,232,240,.95))}
body.light-theme .bg-3{background:linear-gradient(135deg,rgba(248,250,252,.97),rgba(241,245,249,.96),rgba(248,250,252,.95))}
body.light-theme .bg-4{background:linear-gradient(135deg,rgba(255,255,255,.97),rgba(248,250,252,.96),rgba(241,245,249,.95))}
body.light-theme .bg-5{background:linear-gradient(135deg,rgba(248,250,252,.97),rgba(241,245,249,.96),rgba(226,232,240,.95))}
body.light-theme .bg-6{background:linear-gradient(135deg,rgba(255,255,255,.97),rgba(248,250,252,.96),rgba(248,250,252,.95))}
body.light-theme .bg-7{background:linear-gradient(135deg,rgba(248,250,252,.97),rgba(241,245,249,.96),rgba(241,245,249,.95))}
body.light-theme .bg-8{background:linear-gradient(135deg,rgba(248,250,252,.97),rgba(241,245,249,.96),rgba(248,250,252,.95))}
body.light-theme .bg-9{background:linear-gradient(135deg,rgba(255,255,255,.97),rgba(241,245,249,.96),rgba(226,232,240,.95))}
body.light-theme .bg-10{background:linear-gradient(135deg,rgba(255,255,255,.97),rgba(248,250,252,.97),rgba(241,245,249,.96))}

/* --- Typography --- */
body.light-theme .slide-tag{background:rgba(34,197,94,.06);border-color:rgba(34,197,94,.16);color:#16a34a}
body.light-theme .slide-title .hl{background:linear-gradient(135deg,#16a34a 0%,#15803d 40%,#0284c7 100%);-webkit-background-clip:text;background-clip:text}
body.light-theme .slide-title .hl::after{background:linear-gradient(90deg,#16a34a,#0284c7);opacity:.55}
body.light-theme .slide-text .acc{color:#16a34a}
body.light-theme .slide-icon{filter:drop-shadow(0 0 20px rgba(34,197,94,.12))}

/* --- Cards & Components --- */
body.light-theme .g-card::before{background:linear-gradient(135deg,rgba(34,197,94,.03),transparent 50%)}
body.light-theme .g-card:hover{border-color:rgba(34,197,94,.18);box-shadow:0 12px 40px rgba(34,197,94,.06)}
body.light-theme .icon-circle:hover{box-shadow:0 8px 28px rgba(34,197,94,.08)}
body.light-theme .key-point{background:linear-gradient(135deg,rgba(34,197,94,.05),rgba(14,165,233,.02));border-color:rgba(34,197,94,.12)}
body.light-theme .vs-side::before{background:linear-gradient(135deg,rgba(34,197,94,.02),transparent 50%)}
body.light-theme .vs-side:hover{box-shadow:0 12px 40px rgba(34,197,94,.05)}
body.light-theme .vs-badge{color:#fff}
body.light-theme .stat-item:hover{box-shadow:0 8px 24px rgba(34,197,94,.05)}
body.light-theme .check-item{border-bottom-color:rgba(15,23,42,.04)}
body.light-theme .check-mark.yes{background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.16)}
body.light-theme .check-mark.no{background:rgba(239,68,68,.06);border-color:rgba(239,68,68,.14)}

/* --- Quiz --- */
body.light-theme .quiz-opt:hover{box-shadow:0 4px 16px rgba(34,197,94,.06)}
body.light-theme .quiz-opt .q-letter{background:rgba(34,197,94,.06);color:#16a34a}
body.light-theme .quiz-opt.correct{background:rgba(34,197,94,.06);border-color:#22c55e;color:#16a34a}
body.light-theme .quiz-opt.wrong{background:rgba(239,68,68,.05);border-color:#ef4444;color:#dc2626}

/* --- Timeline --- */
body.light-theme .tl-year{color:#16a34a}
body.light-theme .tl-dot.active{box-shadow:0 0 10px rgba(34,197,94,.3)}

/* --- Controls & UI Bars --- */
body.light-theme #controls{background:rgba(255,255,255,.92);border-color:var(--border);box-shadow:0 4px 30px rgba(15,23,42,.08)}
body.light-theme .ctrl-btn{color:var(--t2)}
body.light-theme .ctrl-btn:hover{color:var(--t1);background:rgba(34,197,94,.08)}
body.light-theme .speed-btn{color:#16a34a;background:rgba(34,197,94,.06);border-color:rgba(34,197,94,.1)}
body.light-theme #top-bar{background:rgba(255,255,255,.92);border-bottom-color:var(--border)}
body.light-theme .now-playing{color:rgba(34,197,94,.6)}
body.light-theme #subtitle-bar{background:rgba(255,255,255,.95);border-color:var(--border)}
body.light-theme #subtitle-text{color:#334155}
body.light-theme #subtitle-text .sub-word.active{color:#0f172a;background:rgba(34,197,94,.15);text-shadow:none}
body.light-theme #audio-toast{background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.14);color:#16a34a}
body.light-theme #kb-hint{background:rgba(255,255,255,.96)}
body.light-theme .kb-key{background:var(--surface);border-color:var(--border2)}

/* --- Progress Bar --- */
body.light-theme #progress-wrap{background:rgba(15,23,42,.04)}
body.light-theme .pdot{background:rgba(15,23,42,.08)}
body.light-theme .pdot.past{background:rgba(34,197,94,.3)}
body.light-theme .pdot:hover{background:rgba(34,197,94,.45)}

/* --- Loader --- */
body.light-theme .loader-pct{color:rgba(34,197,94,.4)}
body.light-theme .loader-track{background:rgba(15,23,42,.06)}
body.light-theme .loader-logo{filter:drop-shadow(0 0 30px rgba(34,197,94,.2))}

/* --- Spotlight System (light bg adjustments) --- */
body.light-theme .spot-dim{opacity:.35!important;filter:brightness(.75) saturate(.55)!important}
body.light-theme .spot-sweep::after{background:linear-gradient(105deg,transparent 20%,rgba(34,197,94,.02) 40%,rgba(34,197,94,.04) 50%,rgba(34,197,94,.02) 60%,transparent 80%)}
body.light-theme #spot-beam{background:radial-gradient(circle,rgba(34,197,94,.04) 0%,rgba(14,165,233,.02) 40%,transparent 70%)}

/* --- Mode Panel --- */
body.light-theme .mode-btn{background:rgba(255,255,255,.85);border-color:var(--border2);color:var(--t2)}
body.light-theme .mode-btn:hover{background:var(--surface);color:var(--t1);border-color:var(--brand)}
body.light-theme .mode-btn.active{background:var(--brand-dim);border-color:var(--brand);color:var(--brand)}
body.light-theme .mode-tip{background:var(--surface);border-color:var(--border2);color:var(--t2)}

/* --- Presenter Panel --- */
body.light-theme #presenter-panel{background:linear-gradient(180deg,var(--surface) 0%,var(--bg) 100%)}
body.light-theme .pres-next-preview{background:var(--surface);border-color:var(--border)}
body.light-theme .pres-thumb:hover{border-color:var(--teal);color:var(--t1)}
body.light-theme .pres-thumb.current{border-color:var(--brand);background:var(--brand-dim);color:var(--t1)}

/* --- Pen Toolbar --- */
body.light-theme #pen-toolbar{background:rgba(255,255,255,.94);border-color:rgba(34,197,94,.15);box-shadow:0 8px 30px rgba(15,23,42,.1)}
body.light-theme .pen-btn{border-color:rgba(15,23,42,.08);background:rgba(15,23,42,.03);color:var(--t1)}
body.light-theme .pen-btn:hover{background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.2)}
body.light-theme .pen-btn.active{background:rgba(34,197,94,.12);border-color:#22c55e}
body.light-theme .pen-sep{background:rgba(15,23,42,.08)}
body.light-theme .pen-color.active{border-color:#0f172a;box-shadow:0 0 6px rgba(15,23,42,.15)}

/* --- Spectrum --- */
body.light-theme .spectrum{box-shadow:0 4px 16px rgba(0,0,0,.1)}
body.light-theme .spectrum-pointer{background:var(--t1)}
body.light-theme .spectrum-pointer::after{background:rgba(15,23,42,.85);color:#fff}

/* --- Countdown & End Overlays --- */
body.light-theme #vid-countdown{background:rgba(255,255,255,.95)}
body.light-theme .cd-num{color:var(--t1);text-shadow:0 0 40px rgba(34,197,94,.2)}
body.light-theme #vid-end-overlay{background:rgba(255,255,255,.92)}

/* ===== END LIGHT THEME ===== */



/* ===== RESPONSIVE ===== */

@media(max-width:768px){

    html,body,body *,button,a,.ctrl-btn,.pdot,.quiz-opt,.icon-circle{cursor:auto!important}

    #cursor-glow,#cursor-dot{display:none!important}

    .slide{padding:46px 16px 100px}.slide-title{font-size:1.85rem}.slide-text{font-size:.93rem}.slide-icon{font-size:2.9rem}

    .card-grid,.card-grid.cols-3,.card-grid.cols-4{grid-template-columns:1fr}

    .vs-container{flex-direction:column}.vs-divider{padding:7px 0;transform:rotate(90deg)}

    .icon-row{gap:16px}.stat-row{gap:9px}.checklist{columns:1}

    .loader-logo{width:52px;height:62px}

    #controls{padding:6px 9px;gap:2px;bottom:76px}#progress-dots{gap:3px;padding:0 4px}.pdot{width:5px;height:5px}.pdot.active{width:15px}

    #progress-wrap{bottom:120px}

    .svg-illust svg{max-width:200px}

    .scene-illust svg{max-width:220px}

    #subtitle-bar{max-width:80vw;padding:9px 14px;bottom:162px; width:100% }#subtitle-text{font-size:.83rem}

    #top-bar{padding:9px 14px}.letterbox{height:16px}.key-point{padding:10px 12px;gap:8px}

    #time-display,.speed-btn,.now-playing{display:none}

}

@media(prefers-reduced-motion:reduce){

    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.15s!important}

    .orb{display:none}#neural-canvas{display:none}.slide.active{animation:none}.wave-bar{animation:none;height:5px}

}

/* ===== COURSE INDEX PANEL (Left Sidebar) ===== */

#course-panel{position:fixed;top:0;left:0;width:380px;height:100vh;background:linear-gradient(180deg,var(--surface) 0%,var(--bg) 100%);border-right:1px solid var(--border2);z-index:8600;display:none;flex-direction:column;overflow:hidden;font-family:'Inter',sans-serif;transform:translateX(-100%);transition:transform .35s var(--smooth)}
#course-panel.open{display:flex;transform:translateX(0)}

.cp-header{padding:16px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.cp-title{font-family:'Space Grotesk',sans-serif;font-size:.92rem;font-weight:700;color:var(--t1);letter-spacing:.5px;display:flex;align-items:center;gap:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px}
.cp-title-icon{font-size:1.1rem;flex-shrink:0}
.cp-close{background:none;border:1px solid var(--border2);color:var(--t3);width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:.85rem;display:flex;align-items:center;justify-content:center;transition:all .2s var(--smooth);flex-shrink:0}
.cp-close:hover{color:var(--t1);border-color:var(--brand);background:var(--surface2)}

.cp-body{flex:1;overflow-y:auto;padding:10px 0;scrollbar-width:thin;scrollbar-color:var(--border2) transparent}
.cp-body::-webkit-scrollbar{width:4px}
.cp-body::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}

.cp-type-badge{margin:0 18px 10px;padding:4px 12px;background:var(--brand-dim);border:1px solid rgba(34,197,94,.15);border-radius:6px;font-size:.62rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--brand);display:inline-block}

.cp-module{border-bottom:1px solid var(--border)}
.cp-module-head{padding:10px 18px;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .2s;user-select:none}
.cp-module-head:hover{background:var(--surface2)}
.cp-module-arrow{font-size:.6rem;color:var(--t3);transition:transform .25s var(--smooth);flex-shrink:0;width:12px;text-align:center}
.cp-module.expanded .cp-module-arrow{transform:rotate(90deg)}
.cp-module-name{font-size:.78rem;font-weight:600;color:var(--t2);flex:1;line-height:1.3}
.cp-module-count{font-size:.6rem;color:var(--t3);background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:1px 7px;flex-shrink:0}

.cp-submodule{overflow:hidden;max-height:0;transition:max-height .35s ease}
.cp-module.expanded .cp-submodule{max-height:3000px}

.cp-sub-head{padding:7px 18px 7px 34px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .2s;user-select:none}
.cp-sub-head:hover{background:var(--surface2)}
.cp-sub-arrow{font-size:.55rem;color:var(--t3);transition:transform .25s var(--smooth);width:10px;text-align:center;flex-shrink:0}
.cp-sub.expanded .cp-sub-arrow{transform:rotate(90deg)}
.cp-sub-name{font-size:.72rem;font-weight:500;color:var(--t3);flex:1;line-height:1.3}

.cp-lessons{overflow:hidden;max-height:0;transition:max-height .3s ease}
.cp-sub.expanded .cp-lessons{max-height:2000px}

.cp-lesson{display:flex;align-items:center;gap:8px;padding:6px 18px 6px 50px;cursor:pointer;transition:all .2s;text-decoration:none;position:relative}
.cp-lesson:hover{background:rgba(34,197,94,.04)}
.cp-lesson-dot{width:6px;height:6px;border-radius:50%;background:var(--border2);flex-shrink:0;transition:all .25s}
.cp-lesson-name{font-size:.7rem;color:var(--t3);line-height:1.35;transition:color .2s}
.cp-lesson:hover .cp-lesson-name{color:var(--t1)}
.cp-lesson:hover .cp-lesson-dot{background:var(--brand)}

.cp-lesson.active{background:rgba(34,197,94,.07)}
.cp-lesson.active .cp-lesson-dot{background:var(--brand);box-shadow:0 0 8px var(--brand-glow);width:8px;height:8px}
.cp-lesson.active .cp-lesson-name{color:var(--brand);font-weight:600}

/* Skill flat lesson list */
.cp-skill-lessons{padding:4px 0}
.cp-skill-lesson{display:flex;align-items:center;gap:8px;padding:7px 18px;cursor:pointer;transition:all .2s;text-decoration:none}
.cp-skill-lesson:hover{background:rgba(34,197,94,.04)}
.cp-skill-num{width:24px;height:24px;border-radius:6px;background:var(--surface2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:700;color:var(--t3);flex-shrink:0;font-family:'Space Grotesk',sans-serif}
.cp-skill-lesson-name{font-size:.72rem;color:var(--t3);line-height:1.35;transition:color .2s}
.cp-skill-lesson:hover .cp-skill-lesson-name{color:var(--t1)}
.cp-skill-lesson:hover .cp-skill-num{border-color:var(--brand);color:var(--brand)}

.cp-skill-lesson.active{background:rgba(34,197,94,.07)}
.cp-skill-lesson.active .cp-skill-num{background:var(--brand-dim);border-color:var(--brand);color:var(--brand)}
.cp-skill-lesson.active .cp-skill-lesson-name{color:var(--brand);font-weight:600}

/* Course panel light theme */
body.light-theme #course-panel{background:linear-gradient(180deg,#fff 0%,#f8fafc 100%);border-right-color:var(--border)}
body.light-theme .cp-close:hover{background:var(--surface)}
body.light-theme .cp-lesson:hover,body.light-theme .cp-skill-lesson:hover{background:rgba(34,197,94,.06)}
body.light-theme .cp-lesson.active,body.light-theme .cp-skill-lesson.active{background:rgba(34,197,94,.1)}

/* ===== LESSON NAVIGATION (Prev / Next) ===== */

#lesson-nav{position:fixed;bottom:120px;left:50%;transform:translateX(-50%);z-index:110;display:none;align-items:center;gap:8px;font-family:'Inter',sans-serif}
#lesson-nav.show{display:flex}

.lnav-btn{padding:6px 14px;border:1px solid var(--border2);background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:10px;color:var(--t2);font-size:.72rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .25s var(--smooth);white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis;text-decoration:none}
.lnav-btn:hover{background:var(--surface2);color:var(--t1);border-color:var(--brand)}
.lnav-btn .lnav-arrow{font-size:.8rem;flex-shrink:0}
.lnav-btn .lnav-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

body.light-theme .lnav-btn{background:rgba(255,255,255,.85);border-color:var(--border);color:var(--t2)}
body.light-theme .lnav-btn:hover{background:#fff;color:var(--brand);border-color:var(--brand)}

/* ===== LESSON COMPLETE OVERLAY ===== */

#lesson-end-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9200;display:none;align-items:center;justify-content:center;background:rgba(13,17,23,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);flex-direction:column;gap:18px;font-family:'Inter',sans-serif;opacity:0;transition:opacity .4s var(--smooth)}
#lesson-end-overlay.show{display:flex;opacity:1}

.leo-icon{font-size:3.2rem;animation:leoPulse 1.5s ease infinite}
@keyframes leoPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.leo-title{font-family:'Space Grotesk',sans-serif;font-size:1.5rem;font-weight:800;color:var(--t1);letter-spacing:.5px}
.leo-sub{font-size:.82rem;color:var(--t3)}
.leo-actions{display:flex;gap:12px;margin-top:8px;flex-wrap:wrap;justify-content:center}

.leo-btn{padding:10px 22px;border-radius:10px;font-size:.78rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .25s var(--smooth);text-decoration:none;border:1px solid var(--border2)}
.leo-btn-primary{background:var(--brand);color:#0d1117;border-color:var(--brand)}
.leo-btn-primary:hover{background:#4ade80;transform:translateY(-2px);box-shadow:0 6px 25px var(--brand-glow)}
.leo-btn-secondary{background:var(--glass);color:var(--t2);backdrop-filter:blur(10px)}
.leo-btn-secondary:hover{background:var(--surface2);color:var(--t1);border-color:var(--brand)}
.leo-btn-ghost{background:transparent;color:var(--t3);border-color:transparent}
.leo-btn-ghost:hover{color:var(--t1)}

body.light-theme #lesson-end-overlay{background:rgba(248,250,252,.88)}
body.light-theme .leo-btn-secondary{background:rgba(255,255,255,.8);color:var(--t2)}

/* ===== MULTI-EXPORT MODE SYSTEM ===== */

#mode-panel{position:fixed;top:50%;right:14px;transform:translateY(-50%);z-index:8500;display:flex;flex-direction:column;gap:7px;opacity:0;pointer-events:none;transition:opacity .4s var(--smooth)}#mode-panel.show{opacity:1;pointer-events:auto}

.mode-btn{width:44px;height:44px;border:1px solid var(--border2);background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:11px;color:var(--t2);font-size:1.15rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s var(--smooth);position:relative;outline:none}

.mode-btn:hover{background:var(--surface2);color:var(--t1);border-color:var(--brand);transform:scale(1.1)}

.mode-btn.active{background:var(--brand-dim);border-color:var(--brand);color:var(--brand);box-shadow:0 0 18px var(--brand-glow)}

.mode-btn:hover .mode-tip{opacity:1;transform:translateX(-10px)}

.mode-tip{position:absolute;right:54px;white-space:nowrap;background:var(--surface);border:1px solid var(--border2);color:var(--t2);font-size:.72rem;font-family:'Inter',sans-serif;padding:5px 11px;border-radius:7px;pointer-events:none;opacity:0;transform:translateX(4px);transition:all .2s var(--smooth)}

#rec-indicator{position:fixed;top:20px;right:20px;z-index:9600;display:none;align-items:center;gap:8px;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:7px 16px;border-radius:22px;font-family:'Space Grotesk',sans-serif;font-size:.8rem;color:#ef4444;font-weight:600;letter-spacing:.6px}

.rec-dot{width:10px;height:10px;border-radius:50%;background:#ef4444;animation:recPulse 1.2s ease-in-out infinite}

@keyframes recPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.15;transform:scale(.7)}}

#rec-elapsed{margin-left:4px;font-variant-numeric:tabular-nums;color:#ef4444;font-size:.75rem}

#rec-stop-btn{margin-left:8px;background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.35);color:#ef4444;font-family:'Space Grotesk',sans-serif;font-size:.65rem;font-weight:700;letter-spacing:1.5px;padding:4px 12px;border-radius:14px;cursor:pointer;transition:all .2s}

#rec-stop-btn:hover{background:rgba(239,68,68,.3);transform:scale(1.05)}

#rec-esc-hint{margin-left:4px;font-size:.6rem;color:rgba(239,68,68,.5);font-weight:400;letter-spacing:.5px}

#vid-countdown{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;flex-direction:column;background:rgba(0,0,0,.92);font-family:'Space Grotesk',sans-serif}

#vid-countdown.show{display:flex!important}

.cd-badge{font-size:.7rem;font-weight:800;letter-spacing:6px;color:var(--brand,#22c55e);margin-bottom:32px;padding:8px 28px;border:2px solid rgba(34,197,94,.25);border-radius:6px}

.cd-num{font-size:8rem;font-weight:900;color:var(--t1,#e2e8f0);line-height:1;animation:cdPop .35s cubic-bezier(.34,1.56,.64,1);text-shadow:0 0 60px rgba(34,197,94,.3)}

.cd-text{font-size:.85rem;color:var(--t3,#64748b);margin-top:18px;letter-spacing:1px}

.cd-progress{width:120px;height:4px;background:rgba(255,255,255,.06);border-radius:2px;margin-top:24px;overflow:hidden}

.cd-fill{height:100%;background:linear-gradient(90deg,#22c55e,#0ea5e9);border-radius:2px;transition:width 1s linear}

@keyframes cdPop{0%{transform:scale(1.6);opacity:0}100%{transform:scale(1);opacity:1}}

#vid-end-overlay{position:fixed;inset:0;z-index:99998;display:none;align-items:center;justify-content:center;flex-direction:column;background:rgba(0,0,0,.88);font-family:'Space Grotesk',sans-serif}

#vid-end-overlay.show{display:flex!important}

.ve-icon{font-size:3rem;margin-bottom:16px}

.ve-title{font-size:1.2rem;font-weight:700;color:var(--brand,#22c55e);letter-spacing:1px}

.ve-text{font-size:.8rem;color:var(--t3,#64748b);margin-top:8px}

.ve-spinner{width:28px;height:28px;border:3px solid rgba(34,197,94,.15);border-top-color:#22c55e;border-radius:50%;animation:spin .8s linear infinite;margin-top:18px}

@keyframes spin{to{transform:rotate(360deg)}}

#presenter-panel{position:fixed;top:0;right:0;width:420px;height:100vh;background:linear-gradient(180deg,var(--surface) 0%,var(--bg) 100%);border-left:1px solid var(--border2);z-index:8600;display:none;flex-direction:column;overflow-y:auto;font-family:'Inter',sans-serif}

.pres-header{padding:16px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}

.pres-timer-wrap{text-align:right}.pres-timer{font-family:'Space Grotesk',sans-serif;font-size:1.7rem;font-weight:700;color:var(--brand);letter-spacing:1.5px}

.pres-label{font-size:.62rem;text-transform:uppercase;letter-spacing:2px;color:var(--t3);font-weight:600}

.pres-slide-info{font-size:.82rem;color:var(--t1);font-weight:600}

.pres-section{padding:16px 18px;border-bottom:1px solid var(--border)}

.pres-section-title{font-size:.65rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--t3);margin-bottom:10px;font-weight:700}

.pres-notes{color:var(--t2);font-size:.85rem;line-height:1.65}

.pres-next-preview{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:12px;margin-top:6px;color:var(--t3);font-size:.78rem;line-height:1.5}

.pres-next-title{color:var(--t2);font-weight:600;font-size:.82rem;margin-bottom:4px}

.pres-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:16px 18px}

.pres-thumb{aspect-ratio:16/9;background:var(--surface2);border:2px solid var(--border);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:.62rem;color:var(--t3);cursor:pointer;transition:all .2s var(--smooth);padding:6px;text-align:center;line-height:1.25;font-weight:500}

.pres-thumb:hover{border-color:var(--teal);color:var(--t1);transform:scale(1.03)}

.pres-thumb.current{border-color:var(--brand);background:var(--brand-dim);color:var(--t1)}

.video-mode,.video-mode *{cursor:none!important}

.video-mode #cursor-glow,.video-mode #cursor-dot{display:none!important}

.video-mode #controls,.video-mode #top-bar,.video-mode #progress-wrap,.video-mode #kb-hint,.video-mode #mode-panel{display:none!important}

.video-mode #aurora-layer,.video-mode #grid-layer,.video-mode #streak-layer{display:none!important}

.video-mode #rec-indicator{display:flex!important}

.video-mode .letterbox{height:0!important}

.presenter-mode #presenter-panel{display:flex}

.presenter-mode #player{width:calc(100vw - 420px);margin-right:0}

.presenter-mode #top-bar{right:420px}

.presenter-mode #controls{left:calc((100vw - 420px) / 2);margin-right:0}

.presenter-mode #progress-wrap{right:420px;margin-right:0}

.presenter-mode #mode-panel{right:436px}

.presenter-mode #subtitle-bar{left:calc((100vw - 420px) / 2);transform:translateX(-50%);max-width:calc(70vw - 420px);margin-right:0}
.presenter-mode #lesson-nav{left:calc((100vw - 420px) / 2);transform:translateX(-50%)}

/* Course panel + presenter mode layout */
.index-mode #course-panel{display:flex;transform:translateX(0)}
.index-mode #player{width:calc(100vw - 380px);margin-left:380px}
.index-mode #top-bar{left:380px}
.index-mode #controls{left:calc(380px + (100vw - 380px) / 2);transform:translateX(-50%)}
.index-mode #progress-wrap{left:380px}
.index-mode #subtitle-bar{left:calc(380px + (100vw - 380px) / 2);transform:translateX(-50%);max-width:calc(70vw - 380px)}
.index-mode #lesson-nav{left:calc(380px + (100vw - 380px) / 2);transform:translateX(-50%)}
.index-mode #mode-panel{left:394px}
.index-mode.presenter-mode #player{width:calc(100vw - 380px - 420px);margin-left:380px}
.index-mode.presenter-mode #top-bar{left:380px;right:420px}
.index-mode.presenter-mode #controls{left:calc(380px + (100vw - 380px - 420px) / 2)}
.index-mode.presenter-mode #progress-wrap{left:380px;right:420px}
.index-mode.presenter-mode #subtitle-bar{left:calc(380px + (100vw - 380px - 420px) / 2);max-width:calc(60vw - 800px)}
.index-mode.presenter-mode #lesson-nav{left:calc(380px + (100vw - 380px - 420px) / 2)}
.index-mode.presenter-mode #mode-panel{left:auto;right:436px}

/* ===== PRINT / PDF / BOOK — PREMIUM BRAND THEME ===== */

@media print{

    /* ── Hide interactive UI ── */

    #controls,#top-bar,#loader,#cursor-glow,#cursor-dot,#vignette,.letterbox,#neural-canvas,.orb,#particle-layer,#spot-beam,#mode-panel,#progress-wrap,#subtitle-bar,#audio-toast,#kb-hint,#rec-indicator,#presenter-panel,#course-panel,#lesson-nav,#lesson-end-overlay,.spot-sweep,.spot-corners,#pen-canvas,#pen-toolbar,.pen-laser,#aurora-layer,#grid-layer,#streak-layer{display:none!important}

    /* ── Clean white base ── */

    html,body{overflow:visible!important;height:auto!important;background:#ffffff!important;color:#0f172a!important;cursor:auto!important;font-size:11pt;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}

    *{animation:none!important;transition:none!important}

    .anim-item{opacity:1!important;transform:none!important}

    @page{size:16in 9in;margin:0}

    #player{display:block!important;position:static!important;overflow:visible!important}

    /* ── Full-page slide ── */

    .slide{display:flex!important;flex-direction:column!important;align-items:stretch!important;position:static!important;opacity:1!important;transform:none!important;page-break-after:always;page-break-inside:avoid;width:16in!important;min-height:9in!important;height:9in!important;padding:0!important;margin:0!important;background:#fff!important;border:none!important;border-radius:0!important;overflow:hidden!important}

    .slide:last-child{page-break-after:auto}

    .bg-1,.bg-2,.bg-3,.bg-4,.bg-5,.bg-6,.bg-7,.bg-8,.bg-9,.bg-10{background:#fff!important}

    .slide-content{flex:1 1 auto!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;position:static!important;transform:none!important;max-width:100%!important;width:100%!important;padding:16px 72px!important;box-sizing:border-box!important;overflow:hidden!important}

    /* ── Header — green gradient bar ── */

    .slide::before{content:'Aliens School';display:flex!important;align-items:center!important;flex-shrink:0!important;width:100%;height:52px;font-family:'Space Grotesk',Arial,sans-serif;font-size:10pt;font-weight:800;letter-spacing:6px;color:#fff;background:linear-gradient(135deg,#166534 0%,#22c55e 60%,#0ea5e9 100%);padding:0 60px;box-sizing:border-box}

    /* ── Footer ── */

    .slide::after{content:'\00A9  Aliens Learning Foundation  |  Module 1  \00B7  What Is AI?  \00B7  Lesson 1';display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important;width:100%;height:40px;font-size:8pt;color:#64748b;font-family:'Inter',Arial,sans-serif;background:#f8fafc;border-top:3px solid #22c55e;letter-spacing:.3px;box-sizing:border-box}

    /* ── Typography ── */

    .slide-title{color:#0f172a!important;font-size:2rem!important;font-weight:800!important;background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;-webkit-text-fill-color:#0f172a!important;margin-bottom:8px!important}

    .slide-title .hl{-webkit-text-fill-color:#166534!important;color:#166534!important;background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important}

    .slide-text{color:#334155!important;font-size:1.05rem!important;line-height:1.7!important}

    .slide-text strong{color:#0f172a!important}

    .slide-icon{font-size:2.5rem!important;margin-bottom:4px!important}

    .acc{color:#166534!important;font-weight:600!important}

    /* ── Tags ── */

    .slide-tag{background:#ecfdf5!important;color:#166534!important;border:2px solid #86efac!important;font-weight:700!important;font-size:.82rem!important;padding:5px 18px!important;border-radius:20px!important;margin-bottom:8px!important}

    .tag-dot{background:#22c55e!important;width:8px!important;height:8px!important}

    /* ── Key Points ── */

    .key-point{background:#ecfdf5!important;border:2px solid #86efac!important;border-left:6px solid #22c55e!important;border-radius:10px!important;padding:14px 18px!important;margin:8px 0!important}

    .kp-icon{font-size:1.2rem!important}

    .kp-text{color:#334155!important;font-size:.95rem!important}.kp-text strong{color:#0f172a!important}

    /* ── Cards ── */

    .g-card{background:#f8fafc!important;border:2px solid #cbd5e1!important;border-radius:12px!important;border-top:5px solid #22c55e!important;page-break-inside:avoid;box-shadow:0 2px 8px rgba(0,0,0,.06)!important;padding:16px!important}

    .g-card::before{display:none!important}

    .g-card h3{color:#166534!important;font-weight:700!important;font-size:.95rem!important}

    .g-card p{color:#334155!important;font-size:.9rem!important;line-height:1.5!important}.g-card p strong{color:#0f172a!important}

    .g-card .card-icon{font-size:1.8rem!important;margin-bottom:4px!important}

    .card-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))!important;gap:16px!important;width:100%!important}

    .card-grid.cols-3{grid-template-columns:repeat(3,1fr)!important}

    .card-grid.cols-4{grid-template-columns:repeat(4,1fr)!important}

    /* ── VS Comparison ── */

    .vs-container{gap:20px!important;width:100%!important}

    .vs-side{background:#f8fafc!important;border:2px solid #cbd5e1!important;border-radius:14px!important;border-top:5px solid #22c55e!important;padding:18px!important;box-shadow:0 2px 8px rgba(0,0,0,.06)!important}

    .vs-side::before{display:none!important}

    .vs-side.red-glow{border-top-color:#ef4444!important}

    .vs-side.green-glow{border-top-color:#22c55e!important}

    .vs-side h3{color:#166534!important;font-weight:700!important;font-size:1.05rem!important}

    .vs-side p{color:#334155!important;font-size:.92rem!important;line-height:1.55!important}.vs-side p strong{color:#0f172a!important}

    .vs-side .vs-icon{font-size:1.8rem!important}

    .vs-badge{background:#166534!important;color:#fff!important;font-weight:800!important;box-shadow:none!important;border:3px solid #dcfce7!important;font-size:1rem!important}

    .vs-divider{padding:0 14px!important}

    /* ── Inline-styled comparison boxes (Slide 7) ── */

    .vs-container>div[style*="rgba(239,68,68"]{background:#fef2f2!important;border:2px solid #fecaca!important;border-top:4px solid #ef4444!important;border-radius:12px!important}

    .vs-container>div[style*="rgba(34,197,94"]{background:#ecfdf5!important;border:2px solid #86efac!important;border-top:4px solid #22c55e!important;border-radius:12px!important}

    /* ── Checklist ── */

    .checklist{columns:2!important;column-gap:24px!important;width:100%!important}

    .check-item{border-bottom:2px solid #f1f5f9!important;padding:10px 0!important;page-break-inside:avoid}

    .check-mark{width:28px!important;height:28px!important;font-size:.9rem!important;font-weight:800!important;border-radius:8px!important}

    .check-mark.yes{background:#dcfce7!important;color:#166534!important;border:2px solid #86efac!important}

    .check-mark.no{background:#fef2f2!important;color:#dc2626!important;border:2px solid #fecaca!important}

    .check-text{color:#334155!important;font-size:.95rem!important}.check-text strong{color:#0f172a!important}

    /* ── Icon Grid ── */

    .icon-circle{background:#ecfdf5!important;border:2px solid #86efac!important}

    .icon-circle::after{display:none!important}

    .icon-label{color:#334155!important;font-weight:600!important}

    .icon-row{gap:20px!important}

    /* ── Stat Row ── */

    .stat-row{gap:14px!important;width:100%!important}

    .stat-item{background:#f8fafc!important;border:2px solid #cbd5e1!important;border-radius:12px!important;border-top:4px solid #0ea5e9!important;padding:14px!important;box-shadow:0 2px 6px rgba(0,0,0,.05)!important}

    .stat-label{color:#334155!important;font-weight:600!important;font-size:.85rem!important}

    .stat-icon{font-size:1.8rem!important}

    /* ── Timeline ── */

    .timeline{padding-left:48px!important;width:100%!important}

    .timeline::before{background:linear-gradient(180deg,#22c55e,#0ea5e9)!important;width:4px!important}

    .tl-dot{border:3px solid #22c55e!important;background:#fff!important;width:16px!important;height:16px!important}

    .tl-dot.active{background:#22c55e!important}

    .tl-year{color:#166534!important;font-weight:700!important;font-size:.88rem!important}

    .tl-text{color:#334155!important;font-size:.95rem!important}.tl-text strong{color:#0f172a!important}

    /* ── Spectrum ── */

    .spectrum{background:linear-gradient(90deg,#ef4444 0%,#f59e0b 35%,#22c55e 65%,#0ea5e9 100%)!important;border-radius:10px!important;box-shadow:none!important;height:44px!important}

    .spectrum-pointer{background:#0f172a!important;width:3px!important}

    .spectrum-pointer::after{background:#0f172a!important;color:#ffffff!important;font-weight:700!important}

    .spectrum-label{color:#334155!important;font-weight:600!important}

    /* ── Quiz ── */

    .quiz-options{gap:10px!important;width:100%!important}

    .quiz-opt{background:#f8fafc!important;border:2px solid #cbd5e1!important;color:#334155!important;border-radius:12px!important;page-break-inside:avoid;font-size:1rem!important;padding:14px 18px!important;box-shadow:0 1px 4px rgba(0,0,0,.04)!important}

    .quiz-opt::before{display:none!important}

    .q-letter{background:#ecfdf5!important;color:#166534!important;border:2px solid #86efac!important;font-weight:700!important;width:32px!important;height:32px!important;border-radius:8px!important}

    .q-icon{font-size:1.3rem!important}

    /* ── SVG ── */

    .svg-illust svg{display:block!important;margin:0 auto 14px!important;filter:none!important}

    .svg-illust svg text{fill:#0f172a!important}

    /* ── Inline styles in slides ── */

    [style*="color:var(--t1)"]{color:#0f172a!important}

    [style*="color:var(--t2)"]{color:#334155!important}

    [style*="color:var(--t3)"]{color:#64748b!important}

    [style*="color:var(--red)"]{color:#dc2626!important}

    [style*="color:#22c55e"]{color:#15803d!important}

    [style*="color:#4ade80"]{color:#15803d!important}

    [style*="color:var(--brand)"]{color:#166534!important}

    [style*="color:var(--teal)"]{color:#0284c7!important}

    [style*="background:rgba(239,68,68"]{background:#fef2f2!important}

    [style*="background:rgba(34,197,94"]{background:#ecfdf5!important}

    [style*="border:1px solid rgba(239,68,68"]{border:2px solid #fecaca!important}

    [style*="border:1px solid rgba(34,197,94"]{border:2px solid #86efac!important}

    [style*="border-left:3px solid #22c55e"]{border-left:4px solid #22c55e!important}

    p[style]{color:#334155!important}

    h3[style]{color:#166534!important}

    strong[style]{color:#0f172a!important}

}

@media(max-width:768px){

    #mode-panel{bottom:20px;top:auto;right:auto;left:50%;transform:translateX(-50%);flex-direction:row;position:fixed}

    .mode-btn{width:36px;height:36px;font-size:.95rem}

    .mode-tip{display:none}

    #presenter-panel{width:100vw;height:50vh;top:auto;bottom:0;border-left:none;border-top:1px solid var(--border2)}

    .presenter-mode #player{width:100vw;margin-right:0;margin-bottom:50vh}
    .presenter-mode #controls,.presenter-mode #progress-wrap,.presenter-mode #subtitle-bar{margin-right:0;margin-bottom:50vh}
    .presenter-mode #controls{left:50%}
    .presenter-mode #subtitle-bar{left:50%;max-width:70vw}
    .presenter-mode #top-bar{right:0}

    .presenter-mode #mode-panel{right:auto;left:50%;transform:translateX(-50%);bottom:20px;top:auto}

    /* Course panel mobile: full overlay */
    #course-panel{width:85vw;max-width:340px;z-index:9500}
    .index-mode #player,.index-mode #top-bar,.index-mode #controls,.index-mode #progress-wrap,.index-mode #subtitle-bar,.index-mode #mode-panel{margin-left:0;left:auto;width:auto}
    .index-mode #player{width:100vw;margin-left:0}
    .index-mode #top-bar{left:0}
    .index-mode #controls{left:50%;transform:translateX(-50%)}
    .index-mode #progress-wrap{left:0}

    /* Lesson nav mobile */
    #lesson-nav{bottom:132px}
    .lnav-btn{max-width:42vw;padding:5px 10px;font-size:.65rem}

    /* Lesson end overlay mobile */
    .leo-title{font-size:1.15rem}
    .leo-actions{flex-direction:column;align-items:stretch;gap:8px;padding:0 20px}
    .leo-btn{justify-content:center}

}

/* ===== PEN / DRAWING TOOLS (Live Class) ===== */

#pen-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:800;pointer-events:none;touch-action:none}

.pen-active #pen-canvas{pointer-events:auto;cursor:crosshair}

#pen-toolbar{position:fixed;left:50%;bottom:80px;transform:translateX(-50%);display:none;align-items:center;gap:8px;padding:10px 20px;background:rgba(13,17,23,.92);border:1px solid rgba(34,197,94,.2);border-radius:16px;backdrop-filter:blur(20px);z-index:920;box-shadow:0 8px 32px rgba(0,0,0,.4)}

.presenter-mode #pen-toolbar{display:flex}

.pen-btn{width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.04);color:#fff;font-size:1.1rem;cursor:pointer;transition:all .25s;display:flex;align-items:center;justify-content:center}

.pen-btn:hover{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.3)}

.pen-btn.active{background:rgba(34,197,94,.18);border-color:#22c55e;box-shadow:0 0 12px rgba(34,197,94,.15)}

.pen-sep{width:1px;height:24px;background:rgba(255,255,255,.08);margin:0 4px}

.pen-colors{display:flex;gap:6px;align-items:center}

.pen-color{width:22px;height:22px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all .2s}

.pen-color:hover{transform:scale(1.2)}

.pen-color.active{border-color:#fff;box-shadow:0 0 8px rgba(255,255,255,.2)}

#pen-size{width:80px;height:4px;accent-color:#22c55e;cursor:pointer}

.pen-laser{position:fixed;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle,#ff3333 40%,rgba(255,51,51,.4) 70%,transparent 100%);pointer-events:none;z-index:850;display:none;box-shadow:0 0 20px rgba(255,51,51,.5),0 0 40px rgba(255,51,51,.2);transition:left .05s,top .05s}