/* Section View Learn. Tokens mirror the Section View design system. Shell is fixed; .sv-stage[data-skin] switches series colours. */
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url(/assets/fonts/inter-latin-400-normal.dd05e326cf.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-display:swap;src:url(/assets/fonts/inter-latin-600-normal.62553d1591.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:800;font-display:swap;src:url(/assets/fonts/inter-latin-800-normal.e4a6db9319.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:900;font-display:swap;src:url(/assets/fonts/inter-latin-900-normal.08a195a0cb.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-400-normal.14425ba9c6.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:600;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-600-normal.400c6bfda1.woff2) format("woff2")}

:root{
  --ink-950:#0B0F14;--ink-900:#10161E;--ink-800:#151D27;--line-700:#2A3846;--grid:#141B23;
  --text:#E8ECEF;--text-muted:#8B98A6;--brand:#FF7A1A;--on-brand:#0B0F14;--force:#4FD1E8;--ok:#46D98A;--bad:#FF6B5A;
  --motion-b1-bg:#0B0F14;--motion-b1-a:#FF7A1A;--motion-b1-b:#4FD1E8;
  --motion-b2-bg:#0E2A4F;--motion-b2-a:#FFB020;--motion-b2-b:#5B8CFF;
  --heat-b1-bg:#05031A;--heat-b1-a:#FFB020;--heat-b1-b:#E2304A;
  --heat-b2-bg:#020A1A;--heat-b2-a:#4FC3FF;--heat-b2-b:#FFFFFF;
  --charge-b1-bg:#030806;--charge-b1-a:#3CFF7A;--charge-b2-a:#FFB43C;
  --structures-b1-bg:#E9EEF3;--structures-b1-ink:#1D2733;--structures-b1-a:#E4572E;
  --fluids-b1-bg:#06121F;--fluids-b1-a:#33D1FF;
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-14:56px;
  --radius-s:6px;--radius-m:8px;--radius-l:12px;--radius-full:999px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink-950);color:var(--text);font-family:var(--font-sans);font-size:16px;line-height:1.55;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:40px 40px}
a{color:inherit}
img{max-width:100%}
[hidden]{display:none!important}
:where(a,button,input,summary,[tabindex]):focus-visible{outline:2px solid var(--force);outline-offset:2px}
.wrap{max-width:1160px;margin:0 auto;padding-inline:var(--space-5)}
@media (max-width:600px){.wrap{padding-inline:var(--space-4)}}
.skip{position:absolute;left:-999px;top:0;background:var(--brand);color:var(--on-brand);padding:var(--space-2) var(--space-3);z-index:20}
.skip:focus{left:var(--space-2)}

/* type */
.label{font:600 12px/1.3 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.label.brand{color:var(--brand)}
.display-xl{font:900 clamp(38px,6vw,64px)/1 var(--font-sans);letter-spacing:-.03em;text-transform:uppercase;margin:var(--space-3) 0 18px;text-wrap:balance}
.display-l{font:900 clamp(32px,4.4vw,48px)/1.02 var(--font-sans);letter-spacing:-.025em;margin:10px 0 14px;text-wrap:balance}
.display-xl em,.display-l em{font-style:normal;color:var(--brand)}
h2.heading{font:800 26px/1.2 var(--font-sans);margin:0 0 6px;text-wrap:balance}
.lead{font-size:18px;color:var(--text-muted);max-width:56ch;margin:0 0 var(--space-6)}
.sub{color:var(--text-muted);margin:0 0 var(--space-5);max-width:62ch}

/* header / footer */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:rgba(11,15,20,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-700)}
.top .wrap{display:flex;align-items:center;gap:var(--space-4);height:60px}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none}
.mark img{width:32px;height:32px}
.mark b{font:600 15px var(--font-mono);letter-spacing:.14em;color:var(--brand)}
.top nav{display:flex;gap:var(--space-1);margin-left:auto}
.top nav a{text-decoration:none;font:500 14px var(--font-sans);color:var(--text-muted);padding:6px var(--space-3);border-radius:var(--radius-s)}
.top nav a[aria-current],.top nav a:hover{color:var(--text);background:var(--ink-800)}
.handle{font:600 13px var(--font-sans);text-decoration:none;border:1px solid var(--line-700);padding:7px var(--space-3);border-radius:var(--radius-s);white-space:nowrap}
.handle:hover{border-color:var(--brand)}
@media (max-width:640px){.handle,.mark b{display:none}}
footer{border-top:1px solid var(--line-700);padding-block:28px;color:var(--text-muted);font-size:14px;margin-top:var(--space-14)}
footer .wrap{display:flex;gap:var(--space-4);justify-content:space-between;flex-wrap:wrap}
footer a{text-decoration:none}footer a:hover{color:var(--text)}

/* controls */
.btn{appearance:none;display:inline-flex;align-items:center;gap:var(--space-2);font:600 15px var(--font-sans);padding:var(--space-3) 18px;border-radius:var(--radius-m);border:1px solid var(--line-700);background:var(--ink-800);color:var(--text);cursor:pointer;text-decoration:none}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.btn:hover{filter:brightness(1.12)}
.chip{appearance:none;font:500 13px var(--font-sans);color:var(--text);background:var(--ink-800);border:1px solid var(--line-700);border-radius:var(--radius-full);padding:7px var(--space-3);cursor:pointer}
.chip:hover{border-color:var(--force)}
.chip.action{border-color:var(--brand);color:var(--brand)}
.pill{display:inline-block;font:600 11px var(--font-mono);letter-spacing:.06em;padding:3px var(--space-2);border-radius:var(--radius-full);border:1px solid var(--line-700);color:var(--text-muted);text-transform:uppercase}
.pill.live{color:var(--ok);border-color:var(--ok)}
.done-mark{color:var(--ok);font:600 12px var(--font-mono)}

/* stage skins */
.sv-stage{--stage-bg:var(--motion-b1-bg);--stage-a:var(--motion-b1-a);--stage-b:var(--motion-b1-b);--stage-ink:var(--text)}
[data-skin="motion-b2"]{--stage-bg:var(--motion-b2-bg);--stage-a:var(--motion-b2-a);--stage-b:var(--motion-b2-b)}
[data-skin="heat-b1"]{--stage-bg:var(--heat-b1-bg);--stage-a:var(--heat-b1-a);--stage-b:var(--heat-b1-b)}
[data-skin="heat-b2"]{--stage-bg:var(--heat-b2-bg);--stage-a:var(--heat-b2-a);--stage-b:var(--heat-b2-b)}
[data-skin="charge-b1"]{--stage-bg:var(--charge-b1-bg);--stage-a:var(--charge-b1-a);--stage-b:var(--charge-b1-a)}
[data-skin="structures-b1"]{--stage-bg:var(--structures-b1-bg);--stage-a:var(--structures-b1-a);--stage-b:var(--structures-b1-a);--stage-ink:var(--structures-b1-ink)}
[data-skin="fluids-b1"]{--stage-bg:var(--fluids-b1-bg);--stage-a:var(--fluids-b1-a);--stage-b:var(--fluids-b1-a)}
.skin-a{color:var(--stage-a)}

/* home */
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--space-10);align-items:center;padding-block:var(--space-14) var(--space-10)}
.cta{display:flex;gap:var(--space-3);flex-wrap:wrap}
.feat{border:1px solid var(--line-700);border-radius:var(--radius-l);overflow:hidden;background:var(--ink-900);text-decoration:none;display:block;max-width:340px;justify-self:end;width:100%}
.feat img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:top}
.feat .cap{padding:14px var(--space-4);border-top:1px solid var(--line-700);display:flex;justify-content:space-between;gap:10px}
.how3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-700);border:1px solid var(--line-700);border-radius:var(--radius-l);overflow:hidden;margin-bottom:var(--space-14)}
.how3 div{background:var(--ink-900);padding:var(--space-5)}
.how3 b{display:block;font:800 20px var(--font-sans);margin:6px 0 var(--space-1)}
.how3 p{margin:0;color:var(--text-muted);font-size:14px}
.series{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-3);margin-bottom:var(--space-14)}
.sc{border:1px solid var(--line-700);border-radius:10px;overflow:hidden;background:var(--ink-900);text-decoration:none;display:block}
a.sc:hover{border-color:var(--brand)}
.sc .sw{height:86px;background:var(--stage-bg)}
.sc .t{padding:var(--space-3) 14px;display:flex;flex-direction:column;gap:var(--space-1)}
.sc .t b{font:600 15px var(--font-mono);letter-spacing:.12em;color:var(--stage-a)}
.sc .t span{font-size:13px;color:var(--text-muted)}
.sw.motion{background:repeating-linear-gradient(45deg,var(--stage-a) 0 3px,transparent 3px 11px),var(--stage-bg)}
.sw.heat{background:linear-gradient(90deg,var(--stage-bg),#5B1A8C,var(--stage-b),#F38A1B,#FFE88A)}
.sw.charge{background:var(--stage-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 86'%3E%3Cpath d='M0 43 Q25 5 50 43 T100 43 T150 43 T200 43' fill='none' stroke='%233CFF7A' stroke-width='3'/%3E%3C/svg%3E") center/cover}
.sw.structures{background:linear-gradient(90deg,#2B59C3,#3FB6D9,#7BD66B,#F2C744,var(--stage-a))}
.sw.fluids{background:var(--stage-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 86'%3E%3Cg fill='none' stroke='%2333D1FF' stroke-width='2' opacity='.8'%3E%3Cpath d='M0 20 C60 20 80 40 200 30'/%3E%3Cpath d='M0 43 C70 43 90 60 200 55'/%3E%3Cpath d='M0 66 C60 66 100 80 200 76'/%3E%3C/g%3E%3C/svg%3E") center/cover}
.bookhead{display:flex;justify-content:space-between;align-items:end;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-4)}
.prog{display:flex;align-items:center;gap:10px;color:var(--text-muted);font-size:14px}
.prog i{display:block;width:140px;height:6px;border-radius:9px;background:var(--ink-800);overflow:hidden}
.prog i s{display:block;height:100%;background:var(--brand);width:0;transition:width .4s}
.lessons{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-3);margin-bottom:var(--space-10)}
.lc{border:1px solid var(--line-700);border-radius:10px;overflow:hidden;background:var(--ink-900);text-decoration:none;display:flex;flex-direction:column}
.lc img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:top;display:block;background:var(--stage-bg)}
.lc .t{padding:var(--space-3) 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.lc .t b{font:600 15px/1.3 var(--font-sans)}
.lc .row{display:flex;justify-content:space-between;align-items:center;margin-top:auto}
a.lc:hover{border-color:var(--brand)}
.lc.soon img{opacity:.55}
.booknext{border:1px dashed var(--line-700);border-radius:var(--radius-l);padding:var(--space-5);color:var(--text-muted)}
.booknext b{color:var(--text)}
@media (max-width:980px){.series{grid-template-columns:repeat(3,1fr)}.lessons{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.hero{grid-template-columns:1fr;padding-block:var(--space-8)}.feat{justify-self:start}.how3{grid-template-columns:1fr}.series,.lessons{grid-template-columns:repeat(2,1fr)}}

/* lesson */
.crumb{padding-block:22px 6px}
.crumb a{text-decoration:none}.crumb a:hover{color:var(--text)}
.lesson{display:grid;grid-template-columns:320px minmax(0,1fr);gap:var(--space-10);padding-bottom:var(--space-10)}
.side{position:sticky;top:84px;align-self:start;display:flex;flex-direction:column;gap:var(--space-3)}
.vid{position:relative;width:100%;aspect-ratio:9/16;border-radius:var(--radius-l);border:1px solid var(--line-700);background:var(--stage-bg);overflow:hidden;padding:0;cursor:pointer;display:block}
.vid img{width:100%;height:100%;object-fit:cover;display:block}
.vid .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;background:var(--brand);display:grid;place-items:center}
.vid .play::before{content:"";border-left:22px solid var(--on-brand);border-top:14px solid transparent;border-bottom:14px solid transparent;margin-left:6px}
.vid iframe{width:100%;height:100%;border:0;display:block}
.links2{display:flex;gap:var(--space-2);flex-wrap:wrap}
.links2 a{font-size:13px;text-decoration:none;border:1px solid var(--line-700);border-radius:var(--radius-s);padding:6px 10px;color:var(--text-muted)}
.links2 a:hover{color:var(--text)}
.main{display:flex;flex-direction:column;gap:44px;min-width:0}
.law{border-left:3px solid var(--brand);padding:var(--space-1) 0 var(--space-1) var(--space-4);font-size:19px;max-width:60ch}
.law strong{color:var(--brand)}
.block h2{font:800 22px var(--font-sans);margin:0 0 6px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.block h2 .label{color:var(--force)}
.sim{border:1px solid var(--line-700);border-radius:var(--radius-l);background:var(--ink-900);overflow:hidden}
.sim canvas{display:block;width:100%;height:360px;background:var(--stage-bg);border-bottom:1px solid var(--line-700)}
.ctrl{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px;padding:18px var(--space-5)}
.ctrl label{display:flex;justify-content:space-between;font-size:14px;color:var(--text-muted);margin-bottom:6px}
.ctrl output{font:600 14px var(--font-mono);color:var(--text)}
input[type=range]{width:100%;accent-color:var(--brand);height:22px}
.presets{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.read{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-700)}
.read div{padding:14px 18px;border-right:1px solid var(--line-700);min-width:0}
.read div:last-child{border-right:0}
.read small{display:block;font:600 11px var(--font-mono);letter-spacing:.08em;color:var(--text-muted);text-transform:uppercase;margin-bottom:var(--space-1)}
.read b{font:600 20px var(--font-mono);font-variant-numeric:tabular-nums}
.status{display:inline-flex;font:600 15px var(--font-mono);padding:var(--space-1) 10px;border-radius:var(--radius-s)}
.status.free{color:var(--force);border:1px solid var(--force)}
.status.lock{color:var(--on-brand);background:var(--brand)}
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
.num{border:1px solid var(--line-700);border-radius:var(--radius-l);padding:var(--space-4) 18px;background:var(--ink-900)}
.num b{display:block;font:800 34px/1 var(--font-sans);color:var(--force);margin-bottom:var(--space-2);font-variant-numeric:tabular-nums}
.num p{margin:0;font-size:14px;color:var(--text-muted)}
.num p strong{color:var(--text);font-weight:600}
.num a{font-size:12px;color:var(--text-muted)}
ol.how{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px;counter-reset:s}
ol.how li{display:grid;grid-template-columns:40px 1fr;gap:var(--space-3);counter-increment:s}
ol.how li::before{content:counter(s);font:600 14px var(--font-mono);color:var(--brand);border:1px solid var(--brand);border-radius:var(--radius-s);width:32px;height:32px;display:grid;place-items:center}
ol.how p{margin:2px 0 0;color:var(--text-muted)}
.backup{margin-top:14px;padding:14px var(--space-4);border:1px dashed var(--line-700);border-radius:10px;color:var(--text-muted);font-size:15px}
.backup strong{color:var(--text)}
.q{border:1px solid var(--line-700);border-radius:10px;background:var(--ink-900);padding:18px var(--space-5);margin-bottom:var(--space-3)}
.q > b{display:block;font-size:17px;margin-bottom:var(--space-3)}
.opts{display:grid;gap:var(--space-2)}
.opt{appearance:none;text-align:left;font:500 15px var(--font-sans);color:var(--text);background:var(--ink-800);border:1px solid var(--line-700);border-radius:var(--radius-m);padding:11px 14px;cursor:pointer}
.opt:hover:not([disabled]){border-color:var(--force)}
.opt.right{border-color:var(--ok)}
.opt.wrong{border-color:var(--bad)}
.opt[disabled]{cursor:default}
.fb{margin:10px 0 0;font-size:14px;color:var(--text-muted)}
.fb strong{color:var(--text)}
.score{font:600 14px var(--font-mono);color:var(--text-muted)}
.bonus{border:1px solid var(--brand);border-radius:var(--radius-l);padding:22px;background:var(--ink-900)}
.bonus p{font-size:19px;margin:var(--space-2) 0 var(--space-3)}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.pn a,.pn span{border:1px solid var(--line-700);border-radius:10px;padding:14px var(--space-4);text-decoration:none;background:var(--ink-900);display:block}
.pn a:hover{border-color:var(--brand)}
.pn small{display:block;color:var(--text-muted);font:600 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase}
.pn .r{text-align:right}
.pn span{color:var(--text-muted)}
@media (max-width:900px){.lesson{grid-template-columns:1fr}.side{position:static;max-width:300px}.read{grid-template-columns:1fr 1fr}.read div:nth-child(2){border-right:0}.read div:nth-child(-n+2){border-bottom:1px solid var(--line-700)}}
@media (max-width:600px){.ctrl{grid-template-columns:1fr}.nums{grid-template-columns:1fr}.sim canvas{height:300px}.pn{grid-template-columns:1fr}.pn .r{text-align:left}}

/* simple pages */
.page{padding-block:var(--space-10)}
.list{display:grid;gap:var(--space-2);margin:0;padding:0;list-style:none}
.list li > a,.list li > span{display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-2) var(--space-4);align-items:center;padding:14px var(--space-4);border:1px solid var(--line-700);border-radius:10px;background:var(--ink-900);text-decoration:none}
.list li > a:hover{border-color:var(--brand)}
.list li > span{color:var(--text-muted)}
.list b{font-weight:600}
@media (max-width:600px){.list li > a,.list li > span{grid-template-columns:1fr auto}.list li .label{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}