:root{--ink:#171326;--purple:#6038d6;--purple-dark:#21104d;--lilac:#b9a5f8;--yellow:#f2c94c;--coral:#ff6b5f;--paper:#faf7f0;--muted:#8d869d;--line:rgba(255,255,255,.12);--safe-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}
html{background:#100b22;scroll-behavior:smooth}
body{margin:0;min-width:320px;background:radial-gradient(circle at 74% 8%,rgba(96,56,214,.24),transparent 28%),linear-gradient(160deg,#171326 0%,#160c30 60%,#0e091d 100%);color:#fff;font-family:"DM Sans",sans-serif;overscroll-behavior-y:none}
button,a,select,input{font:inherit}
button,a{touch-action:manipulation}
.demo-nav{position:sticky;top:0;z-index:50;height:72px;display:grid;grid-template-columns:72px 1fr 84px;align-items:center;padding:0 14px;background:rgba(250,247,240,.94);border-bottom:1px solid rgba(23,19,38,.1);backdrop-filter:blur(18px);color:var(--ink)}
.demo-back,.demo-brand,.demo-explore{color:inherit;text-decoration:none;font-weight:800}
.demo-back{display:flex;align-items:center;gap:7px;font-size:13px}.demo-back span{display:none}
.demo-brand{display:flex;align-items:center;justify-content:center;gap:9px;font:800 18px Manrope}.demo-brand img{width:42px;height:42px;border-radius:10px;background:#050505;object-fit:cover;transform:scale(1.03);box-shadow:0 5px 15px rgba(23,19,38,.18)}.demo-brand b{color:var(--purple)}
.demo-explore{text-align:right;font-size:12px}.demo-explore span{color:var(--purple)}
.classroom{width:min(100% - 24px,1240px);margin:0 auto;padding:28px 0 calc(52px + var(--safe-bottom))}
.lesson-heading{display:flex;flex-direction:column;gap:18px;margin-bottom:24px}.lesson-kicker{display:block;margin-bottom:9px;color:var(--yellow);font:800 10px Manrope;letter-spacing:1.4px}.lesson-heading h1{margin:0;font:800 clamp(28px,7vw,46px)/1.06 Manrope;letter-spacing:-1.7px}.lesson-heading p{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:9px 0 0;color:#bdb5cc;font-size:12px}.lesson-heading p i{width:3px;height:3px;border-radius:50%;background:var(--coral)}
.engine-state{display:flex;align-items:center;gap:9px;align-self:flex-start;padding:9px 12px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.06);color:#ddd6e9;font:800 10px Manrope;letter-spacing:.5px}.engine-state span{width:7px;height:7px;border-radius:50%;background:#72e7a7;box-shadow:0 0 0 5px rgba(114,231,167,.1)}
.classroom-layout{display:grid;gap:18px}.player-column{min-width:0}.lesson-stage{--scene-progress:0;position:relative;isolation:isolate;aspect-ratio:16/11;min-height:350px;overflow:hidden;border:1px solid rgba(255,255,255,.13);border-radius:25px;background:#221747;box-shadow:0 30px 80px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08);outline:0}.lesson-stage:focus-visible{box-shadow:0 0 0 3px var(--yellow),0 30px 80px rgba(0,0,0,.35)}
.stage-topline{position:absolute;left:17px;right:17px;top:15px;z-index:12;display:flex;justify-content:space-between;color:rgba(255,255,255,.68);font:800 9px Manrope;letter-spacing:1.1px}.stage-topline span:first-child{padding:7px 9px;border:1px solid rgba(255,255,255,.13);border-radius:999px;background:rgba(16,11,34,.35);backdrop-filter:blur(8px)}.stage-topline span:last-child{padding:7px 0}
.scene{position:absolute;inset:0;display:none;overflow:hidden;opacity:0}.scene.is-active{display:block;animation:sceneIn .55s cubic-bezier(.22,1,.36,1) both}@keyframes sceneIn{from{opacity:0;transform:scale(1.018)}to{opacity:1;transform:none}}
.scene-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(135deg,#000,transparent 80%)}
.scene-intro{background:radial-gradient(circle at 78% 42%,rgba(185,165,248,.66),transparent 26%),linear-gradient(140deg,#171326,#2c1763 58%,#6038d6)}.intro-orb{position:absolute;border-radius:50%;filter:blur(2px)}.intro-orb-one{right:-14%;bottom:-34%;width:70%;aspect-ratio:1;background:rgba(242,201,76,.86)}.intro-orb-two{right:11%;top:23%;width:20%;aspect-ratio:1;background:rgba(255,107,95,.8)}
.scene-copy{position:absolute;left:7%;right:7%;top:22%;z-index:2}.scene-copy small,.visual-title small,.result-copy small{color:var(--yellow);font:900 9px Manrope;letter-spacing:1.5px}.scene-copy h2,.visual-title h2,.result-copy h2{margin:9px 0 0;font:800 clamp(31px,7.7vw,64px)/1.01 Manrope;letter-spacing:-2.6px}.scene-copy h2 em,.visual-title h2 em,.result-copy h2 em{color:#d0c2ff;font-family:Georgia,serif;font-weight:400}.scene-copy p{max-width:480px;margin:15px 0 0;color:#d8d1e4;font-size:13px;line-height:1.5}
.studio-stamp{position:absolute;right:5%;bottom:7%;z-index:3;display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid rgba(255,255,255,.2);border-radius:14px;background:rgba(23,19,38,.54);backdrop-filter:blur(10px)}.studio-stamp>span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--yellow);color:var(--ink)}.studio-stamp b,.studio-stamp small{display:block}.studio-stamp b{font:900 8px Manrope;letter-spacing:1px}.studio-stamp small{margin-top:3px;color:#c9c1d7;font-size:8px}
.scene-landscape{background:radial-gradient(circle at 15% 90%,rgba(255,107,95,.19),transparent 28%),linear-gradient(150deg,#171326,#24134f)}.visual-title{position:absolute;left:6%;top:15%;z-index:3}.visual-title h2{font-size:clamp(26px,6.1vw,52px)}
.loss-chart{position:absolute;left:8%;right:5%;bottom:7%;height:48%;border-left:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18)}.axis-y,.axis-x{position:absolute;color:#928aa6;font:800 7px Manrope;letter-spacing:1px}.axis-y{left:-29px;top:0;writing-mode:vertical-rl;transform:rotate(180deg)}.axis-x{right:0;bottom:-19px}.curve-line{position:absolute;inset:7% 4% 8% 5%;border:4px solid var(--lilac);border-left-color:transparent;border-top-color:transparent;border-radius:0 0 74% 18%;transform:rotate(6deg);filter:drop-shadow(0 0 12px rgba(185,165,248,.32))}.step-point{position:absolute;width:10px;height:10px;border:2px solid #171326;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 5px rgba(242,201,76,.13)}.step-point:after{content:attr(data-label);position:absolute;left:50%;bottom:15px;color:#fff;font:900 8px Manrope;transform:translateX(-50%)}.p1{left:15%;top:27%}.p2{left:36%;top:50%}.p3{left:61%;top:65%}.p4{left:82%;top:72%}.moving-point{position:absolute;left:calc(15% + var(--scene-progress) * 67%);top:calc(27% + var(--scene-progress) * 45%);width:16px;height:16px;border:3px solid #fff;border-radius:50%;background:var(--coral);box-shadow:0 0 0 9px rgba(255,107,95,.17),0 9px 20px rgba(0,0,0,.3);transform:translate(-50%,-50%);transition:left .12s linear,top .12s linear}.moving-point span{position:absolute;left:50%;bottom:21px;padding:4px 6px;border-radius:5px;background:#fff;color:var(--ink);font:900 7px Manrope;transform:translateX(-50%)}
.scene-equation{background:radial-gradient(circle at 78% 74%,rgba(242,201,76,.16),transparent 30%),linear-gradient(145deg,#1b1238,#321778)}.scene-equation .visual-title{top:14%}.equation-card{position:absolute;left:5%;right:5%;top:50%;display:flex;align-items:center;justify-content:center;gap:clamp(7px,2.4vw,24px);padding:25px 10px;border:1px solid rgba(255,255,255,.15);border-radius:20px;background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);font:700 clamp(20px,5.4vw,50px) Georgia;transform:translateY(-50%)}.equation-part{padding:7px 8px;border-radius:10px}.equation-part.weight{color:#fff}.equation-part.current{background:rgba(185,165,248,.18);color:#d8ccff}.equation-part.rate{background:rgba(242,201,76,.16);color:var(--yellow)}.equation-part.gradient{background:rgba(255,107,95,.15);color:#ff9c94}.equation-notes{position:absolute;left:5%;right:5%;bottom:9%;display:flex;justify-content:center;flex-wrap:wrap;gap:8px}.equation-notes span{display:flex;align-items:center;gap:6px;color:#c5bdd2;font-size:9px}.equation-notes i{width:7px;height:7px;border-radius:50%}.current-dot{background:var(--lilac)}.rate-dot{background:var(--yellow)}.gradient-dot{background:var(--coral)}
.scene-code{background:radial-gradient(circle at 92% 10%,rgba(96,56,214,.4),transparent 31%),linear-gradient(145deg,#100d1d,#1a1530)}.code-window{position:absolute;left:4%;right:4%;top:14%;bottom:21%;overflow:hidden;border:1px solid rgba(255,255,255,.13);border-radius:18px;background:#151221;box-shadow:0 26px 60px rgba(0,0,0,.35)}.code-header{height:43px;display:flex;align-items:center;gap:13px;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.09);color:#8d8798;font-size:8px}.code-header>span{display:flex;gap:5px}.code-header i{width:7px;height:7px;border-radius:50%;background:var(--coral)}.code-header i:nth-child(2){background:var(--yellow)}.code-header i:nth-child(3){background:#72e7a7}.code-header b{font-weight:700}.code-header small{margin-left:auto;font-weight:800}.code-window pre{margin:0;padding:17px 15px;color:#eee9f5;font:600 clamp(9px,2.35vw,17px)/1.75 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap}.code-window mark{display:inline-block;padding:0 4px;background:rgba(242,201,76,.15);color:#ffe27a;border-left:2px solid var(--yellow)}.code-muted{color:#716b7e}.code-pink{color:#ef9ad0}.code-blue{color:#91b8ff}.code-callout{position:absolute;left:6%;right:6%;bottom:6%;display:flex;align-items:center;gap:10px}.code-callout>span{display:grid;place-items:center;flex:0 0 29px;width:29px;height:29px;border-radius:50%;background:var(--yellow);color:var(--ink)}.code-callout p{margin:0;color:#beb7c9;font-size:10px;line-height:1.45}
.scene-result{background:radial-gradient(circle at 13% 10%,rgba(96,56,214,.33),transparent 25%),linear-gradient(145deg,#171326,#24104f)}.result-copy{position:absolute;left:6%;top:14%}.result-copy h2{font-size:clamp(26px,6vw,51px)}.terminal-card{position:absolute;right:5%;top:16%;width:43%;min-width:210px;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:17px;background:#0e0c15;box-shadow:0 25px 55px rgba(0,0,0,.4);transform:rotate(1.3deg)}.terminal-card>div{display:flex;justify-content:space-between;padding:12px 13px;border-bottom:1px solid rgba(255,255,255,.09);color:#847f8d;font:800 7px Manrope;letter-spacing:.8px}.terminal-card>div b{color:#72e7a7}.terminal-card ol{list-style:none;margin:0;padding:8px 13px 12px}.terminal-card li{display:flex;justify-content:space-between;padding:6px 0;color:#8e8996;font:600 9px ui-monospace,monospace}.terminal-card li b{color:#f2ecfa}.terminal-card li:last-child b{color:var(--yellow)}.result-badge{position:absolute;left:7%;bottom:9%;display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.07)}.result-badge>span{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:#72e7a7;color:#10271b;font-weight:900}.result-badge b,.result-badge small{display:block}.result-badge b{font:800 11px Manrope}.result-badge small{margin-top:2px;color:#aaa2b7;font-size:8px}
.start-overlay{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(rgba(16,11,34,.08),rgba(16,11,34,.54));backdrop-filter:blur(1px);transition:opacity .3s ease,visibility .3s}.start-overlay.is-hidden{opacity:0;visibility:hidden;pointer-events:none}.start-overlay button{display:grid;place-items:center;width:72px;height:72px;border:1px solid rgba(255,255,255,.55);border-radius:50%;background:#fff;color:var(--purple);font-size:22px;box-shadow:0 20px 60px rgba(0,0,0,.4);cursor:pointer}.start-overlay button span{margin-left:4px}.start-overlay>b{margin-top:13px;font:800 15px Manrope}.start-overlay small{margin-top:4px;color:#cbc4d5;font-size:10px}
.caption-layer{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;min-height:67px;margin-top:10px;padding:12px 14px;border:1px solid rgba(255,255,255,.1);border-radius:15px;background:rgba(255,255,255,.055)}.caption-layer span{padding-top:2px;color:var(--yellow);font:900 8px Manrope;letter-spacing:1px}.caption-layer p{margin:0;color:#e0dae8;font-size:12px;line-height:1.45}
.player-controls{display:grid;grid-template-columns:48px minmax(0,1fr) 58px 42px 42px;gap:8px;align-items:center;margin-top:9px;padding:10px;border:1px solid rgba(255,255,255,.1);border-radius:17px;background:rgba(255,255,255,.065)}.player-controls button,.player-controls select{height:42px;border:1px solid rgba(255,255,255,.11);border-radius:12px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer}.play-control{font-size:15px}.icon-control{font-size:17px}.icon-control.is-on{border-color:rgba(242,201,76,.4);background:rgba(242,201,76,.14);color:var(--yellow)}.player-controls select{width:58px;padding:0 4px;font-size:10px;font-weight:800}.player-controls option{color:var(--ink)}.timeline-wrap{min-width:0}.timeline-wrap input{display:block;width:100%;height:21px;margin:0;accent-color:var(--coral);cursor:pointer}.timeline-wrap>div{display:flex;justify-content:space-between;color:#918a9e;font:700 8px Manrope}.player-hint{margin:9px 3px 0;color:#7f788e;font-size:9px;text-align:center}
.lesson-panel{padding:16px;border:1px solid rgba(255,255,255,.1);border-radius:20px;background:rgba(255,255,255,.055)}.panel-heading{display:flex;justify-content:space-between;margin-bottom:11px}.panel-heading span{color:#fff;font:900 9px Manrope;letter-spacing:1.1px}.panel-heading b{color:#8f879d;font-size:9px}.chapter-list{display:grid;gap:7px}.chapter-button{width:100%;display:grid;grid-template-columns:31px 1fr auto;align-items:center;gap:10px;padding:10px;border:1px solid transparent;border-radius:12px;background:transparent;color:#aaa2b7;text-align:left;cursor:pointer}.chapter-button:hover{background:rgba(255,255,255,.05)}.chapter-button.is-active{border-color:rgba(185,165,248,.2);background:rgba(96,56,214,.18);color:#fff}.chapter-button>span{display:grid;place-items:center;width:31px;height:31px;border-radius:10px;background:rgba(255,255,255,.07);font:900 9px Manrope}.chapter-button.is-active>span{background:var(--purple)}.chapter-button b{font:700 11px/1.3 Manrope}.chapter-button time{font:700 8px Manrope;color:#81798e}.lesson-takeaway{margin-top:14px;padding:14px;border-radius:13px;background:linear-gradient(145deg,rgba(242,201,76,.12),rgba(96,56,214,.12))}.lesson-takeaway span{color:var(--yellow);font:900 8px Manrope;letter-spacing:1px}.lesson-takeaway p{margin:7px 0 0;color:#d0c9db;font-size:10px;line-height:1.5}
.completion-card{display:none;align-items:center;justify-content:space-between;gap:24px;margin-top:20px;padding:24px;border:1px solid rgba(242,201,76,.25);border-radius:22px;background:linear-gradient(135deg,rgba(96,56,214,.25),rgba(242,201,76,.09))}.completion-card.is-visible{display:flex;animation:completionIn .5s ease both}@keyframes completionIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.completion-card>div:first-child{max-width:680px}.completion-card>div:first-child>span{color:var(--yellow);font:900 9px Manrope;letter-spacing:1.2px}.completion-card h2{margin:7px 0 8px;font:800 clamp(23px,4vw,34px)/1.1 Manrope;letter-spacing:-1.5px}.completion-card p{margin:0;color:#bcb5c7;font-size:12px;line-height:1.55}.completion-card>div:last-child{display:flex;gap:8px;flex:0 0 auto}.completion-card button,.completion-card a{display:inline-flex;align-items:center;justify-content:center;min-height:45px;padding:0 15px;border-radius:12px;font:800 11px Manrope;text-decoration:none;cursor:pointer}.completion-card button{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);color:#fff}.completion-card a{background:var(--yellow);color:var(--ink)}
@media(min-width:760px){.demo-nav{height:82px;grid-template-columns:180px 1fr 180px;padding:0 28px}.demo-back span{display:inline}.demo-brand{font-size:21px}.demo-brand img{width:48px;height:48px}.demo-explore{font-size:13px}.classroom{width:min(100% - 48px,1240px);padding-top:38px}.lesson-heading{flex-direction:row;align-items:flex-end;justify-content:space-between}.lesson-stage{aspect-ratio:16/9;min-height:0}.stage-topline{left:22px;right:22px;top:20px}.scene-copy{top:24%}.scene-copy p{font-size:15px}.caption-layer{min-height:72px;padding:14px 17px}.caption-layer p{font-size:13px}.classroom-layout{grid-template-columns:minmax(0,1fr) 265px;align-items:start}.lesson-panel{position:sticky;top:100px;padding:18px}.code-window pre{padding:25px 28px}.player-controls{grid-template-columns:52px minmax(0,1fr) 65px 45px 45px}.player-controls select{width:65px}.terminal-card{top:17%;width:40%;}.result-badge{bottom:12%}}
@media(max-width:620px){.lesson-stage:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;border-radius:0}.lesson-stage:fullscreen .stage-topline{top:max(15px,env(safe-area-inset-top))}.lesson-stage:fullscreen .scene-copy h2{font-size:11vw}.completion-card{align-items:stretch;flex-direction:column}.completion-card>div:last-child{display:grid;grid-template-columns:1fr 1fr}.terminal-card{right:4%;top:38%;width:58%}.result-copy{top:12%}.scene-result .result-copy h2{font-size:27px}.result-badge{left:5%;bottom:7%}}
@media(max-width:390px){.classroom{width:min(100% - 16px,1240px)}.demo-nav{padding-inline:9px}.lesson-heading h1{font-size:26px}.lesson-stage{min-height:334px;border-radius:20px}.scene-copy h2{font-size:29px}.visual-title h2,.result-copy h2{font-size:25px}.player-controls{grid-template-columns:44px minmax(0,1fr) 50px 39px}.player-controls .icon-control:last-child{display:none}.player-controls select{width:50px}.code-window pre{font-size:8.5px}.completion-card>div:last-child{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.scene.is-active,.completion-card.is-visible{animation:none}.moving-point{transition:none}}
.moving-point{left:var(--point-left,15%);top:var(--point-top,27%)}