:root{--bg:#000;--text:#f5f5f7;--muted:#a1a1a6;--dim:#6e6e73;--surface:#1c1c1e;--surface2:#2c2c2e;--line:#38383a;--blue:#2f6fe4;--blue2:#4f8cff;--curve:#3b82f6;--g:#c7c7cc;--good:#30d158;--bad:#ff6961;
 --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;--r:14px}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 var(--sans);min-height:100vh;overflow-x:hidden}
#formulas{position:fixed;inset:0;z-index:0;pointer-events:none}
.skip{position:absolute;left:-999px;top:8px;z-index:20;background:var(--surface);color:var(--text);padding:8px 14px;border-radius:99px}.skip:focus{left:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
main,footer,.topbar{position:relative;z-index:1}
.topbar{position:sticky;top:0;padding:10px 16px 0;z-index:5}
.pill{max-width:780px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 18px 8px 10px;border-radius:999px;background:linear-gradient(#2a2a2d,#1d1d20);border:1px solid #3a3a3d;box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 10px 30px rgba(0,0,0,.6)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;letter-spacing:-.01em;cursor:default;user-select:none;border-radius:10px}
.brand.textonly{color:var(--blue2);padding-left:8px}
.logo{width:30px;height:30px;border-radius:8px;background:#0e0e10;border:1px solid #3a3a3d;display:grid;place-items:center}.logo svg{width:22px;height:22px}
.logo-curve{stroke-dasharray:40;stroke-dashoffset:0;animation:logo 6s ease-in-out infinite}
@keyframes logo{0%,70%{stroke-dashoffset:0}80%{stroke-dashoffset:40}100%{stroke-dashoffset:0}}
.topright{display:flex;align-items:center;gap:10px}.tag{font-size:12.5px;color:var(--muted);text-align:right;line-height:1.2}
.iconbtn{width:30px;height:30px;border-radius:99px;border:0;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;padding:0}.iconbtn svg{width:18px;height:18px}.iconbtn:hover{color:var(--text)}.iconbtn.off .wave{opacity:.15}
main{max-width:780px;margin:0 auto;padding:22px 16px 60px;outline:none}
.narrow{max-width:480px;margin:28px auto 0}
.eyebrow{font-size:12.5px;color:var(--muted);margin-bottom:4px}
h1{font-size:clamp(32px,6vw,46px);line-height:1.05;letter-spacing:-.035em;font-weight:800;margin:0 0 10px;outline:none}
h2{font-size:17px;margin:0 0 14px;letter-spacing:-.01em}.sub{font-size:24px;font-weight:800;letter-spacing:-.025em;margin:40px 0 14px}
.muted{color:var(--muted)}.small{font-size:13px}.lead{margin:0 0 22px;font-size:15px}.note{font-size:14px;margin:18px 0}
.mono{font-variant-numeric:tabular-nums}
label{display:block;font-size:14.5px;font-weight:600;margin:14px 0 8px}
input:not([type=radio]):not([type=range]){width:100%;font:inherit;font-size:16px;color:var(--text);background:var(--surface);border:1px solid #2e2e31;border-radius:10px;padding:11px 13px;outline:none;transition:border-color .15s,box-shadow .15s}
input::placeholder{color:#8e8e93}input:focus{border-color:var(--blue2);box-shadow:0 0 0 3px rgba(79,140,255,.25)}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.primary,.secondary{border-radius:999px;padding:10px 26px;font-weight:700;font-size:15px;border:0;transition:transform .12s,filter .15s,opacity .15s}
.primary{background:var(--blue);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 -2px 0 rgba(0,0,0,.18) inset,0 4px 14px rgba(47,111,228,.35)}
.primary:hover{filter:brightness(1.1)}.primary:active,.secondary:active{transform:scale(.97)}
.secondary{background:var(--surface2);color:var(--text);box-shadow:0 1px 0 rgba(255,255,255,.07) inset}.secondary:hover{background:#3a3a3c}
.secondary.blue{color:var(--blue2)}
button:disabled{opacity:.45;cursor:not-allowed;transform:none}
.link{background:none;border:0;color:var(--blue2);font-weight:600;padding:8px 4px;display:inline-flex;align-items:center;gap:6px}.link svg{width:12px;height:12px}.link.quiet{color:var(--muted);font-weight:500;font-size:13.5px}.link:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--blue2);outline-offset:3px}
.error{color:var(--bad);min-height:1px;font-size:14px;margin:6px 0}
.btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
/* run bar */
.runbar{display:flex;align-items:center;gap:14px;margin:6px 0 30px}
.qcount{font-weight:700;font-size:14px;white-space:nowrap}
.track{flex:1;height:5px;border-radius:9px;background:#2c2c2e;overflow:hidden}.track div{height:100%;width:0;background:var(--blue);border-radius:9px;transition:width .5s cubic-bezier(.3,1.4,.5,1)}
.small-btn{padding:8px 14px 8px 16px;font-size:13.5px;display:inline-flex;align-items:center;gap:6px}.small-btn svg{width:12px;height:12px}
.menuwrap{position:relative}
.qmenu{position:absolute;right:0;top:calc(100% + 8px);width:min(320px,86vw);max-height:60vh;overflow:auto;margin:0;padding:6px;list-style:none;background:#1c1c1e;border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.7);z-index:6;animation:drop .18s ease-out}
@keyframes drop{from{opacity:0;transform:translateY(-6px) scale(.98)}}
.qmenu button{width:100%;display:flex;align-items:center;gap:10px;background:none;border:0;color:var(--text);text-align:left;padding:8px 10px;border-radius:10px;font-size:14px}
.qmenu button:hover,.qmenu button:focus-visible{background:#2c2c2e}.qmenu [aria-current]{background:#2a2a2e;font-weight:700}
.qn{font-variant-numeric:tabular-nums;color:var(--dim);min-width:20px;font-size:13px}
.st{margin-left:auto;width:8px;height:8px;border-radius:9px;border:1.5px solid var(--dim);flex:none}.st.yes{background:var(--blue2);border-color:var(--blue2)}
/* question */
.qhead.in{animation:slidein .35s ease-out}.qhead[data-dir="-1"].in{animation-name:slideback}
@keyframes slidein{from{opacity:0;transform:translateX(14px)}}@keyframes slideback{from{opacity:0;transform:translateX(-14px)}}
.qhead p{margin:0 0 26px;font-size:15px}
.qgrid{display:grid;grid-template-columns:400px 1fr;gap:36px;align-items:start}
.graphcard{background:var(--surface);border:1px solid #2a2a2d;border-radius:18px;padding:16px 16px 14px;box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 6px 0 #111,0 24px 50px rgba(0,0,0,.55)}
.graphhead{display:flex;justify-content:space-between;font-size:13.5px}.graphhead span{font-variant-numeric:tabular-nums}
.legend{font-size:12.5px;display:flex;gap:14px;margin:8px 0 2px;min-height:18px}.lf{color:var(--curve)}.lg{color:var(--g)}
#graph,#pgraph{width:100%;height:auto;display:block;touch-action:none;user-select:none;border-radius:10px}
#graph.interactive{cursor:crosshair}
.gl{stroke:#2f2f33;stroke-width:1}.ax{stroke:#8e8e93;stroke-width:1.4}.tk{fill:#8e8e93;font-size:10px;font-family:var(--sans)}.axl{fill:var(--text);font-size:13px;font-weight:700;font-family:var(--sans)}
.curve{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.curve.main{stroke:var(--curve)}.curve.dash{stroke:var(--g);stroke-dasharray:.018 .014;stroke-width:2.2}
.curve.main.draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .9s cubic-bezier(.45,.05,.3,1) forwards}
.curve.dash.draw{opacity:0;animation:fade .6s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}@keyframes fade{to{opacity:1}}
.cursor{fill:none;stroke:#fff;stroke-width:1.5;stroke-dasharray:3 3;transform-box:fill-box;transform-origin:center;animation:spin 8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pinc{fill:var(--curve);stroke:#fff;stroke-width:2.5}.pint{fill:#fff;font:700 10px var(--sans);pointer-events:none}
.pin.pop{animation:pop .42s cubic-bezier(.3,1.8,.5,1)}.pin{transform-box:fill-box}
.pin.pop circle,.pin.pop text{animation:popc .42s cubic-bezier(.3,1.8,.5,1);transform-origin:0 0}
@keyframes popc{0%{transform:scale(.2)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
.spark{stroke:var(--blue2);stroke-width:2;stroke-linecap:round;stroke-dasharray:6 30;stroke-dashoffset:-10;animation:spark .45s ease-out forwards}
@keyframes spark{from{stroke-dashoffset:-10;opacity:1}to{stroke-dashoffset:-24;opacity:0}}
.probeline{stroke:#e5e5ea;stroke-dasharray:4 5;stroke-width:1}.probedot{stroke:#fff;stroke-width:2}.probedot.f{fill:var(--curve)}.probedot.g{fill:#8e8e93}
.probe{margin-top:8px}.probe label{font-size:13px;margin:6px 0}.proberead{display:flex;gap:16px;font-size:13px;font-variant-numeric:tabular-nums}
input[type=range]{width:100%;accent-color:var(--blue);height:26px}
.help{margin:10px 2px 0;line-height:1.45}
.answer h2{margin-top:4px}
.chip{display:inline-block;background:#1f2a40;color:#bcd3ff;border-radius:99px;padding:2px 10px;margin:0 4px 4px 0;font-variant-numeric:tabular-nums;animation:popc .3s ease-out}
.ptform{display:flex;gap:10px;align-items:flex-end}.ptform label{margin:0;font-weight:500;font-size:13.5px;flex:0 0 54px}.ptform input{padding:12px 10px!important;text-align:left}.ptform button{white-space:nowrap;padding:12px 18px}
.choices{border:0;padding:0;margin:0;display:grid;gap:8px}
.choice{display:flex;gap:12px;align-items:flex-start;margin:0;font-weight:500;font-size:14.5px;background:var(--surface);border:1px solid #2a2a2d;border-radius:12px;padding:12px 14px;cursor:pointer;transition:border-color .15s,background .15s,transform .1s}
.choice:hover{border-color:#48484a}.choice:active{transform:scale(.99)}
.choice input{position:absolute;opacity:0;pointer-events:none}
.box{flex:none;width:18px;height:18px;margin-top:2px;border-radius:99px;border:1.5px solid #636366;position:relative;transition:border-color .15s}
.box::after{content:"";position:absolute;inset:3px;border-radius:99px;background:var(--blue2);transform:scale(0);transition:transform .25s cubic-bezier(.3,1.8,.5,1)}
.choice:has(input:checked){border-color:var(--blue2);background:#16203a}.choice:has(input:checked) .box{border-color:var(--blue2)}.choice:has(input:checked) .box::after{transform:scale(1)}
.choice:has(input:focus-visible){outline:2px solid var(--blue2);outline-offset:2px}
.tablewrap{overflow-x:auto;margin-bottom:12px}
.vals{border-collapse:separate;border-spacing:0;width:100%;font-variant-numeric:tabular-nums;background:var(--surface);border-radius:12px;overflow:hidden;font-size:14px}
.vals caption{text-align:left;font-size:12.5px;color:var(--muted);margin-bottom:6px}.vals th,.vals td{padding:8px 10px;text-align:center;border-bottom:1px solid #2a2a2d}.vals tr:last-child>*{border-bottom:0}.vals th{color:var(--muted);font-weight:600;text-align:left}
.typed label{display:flex;align-items:center;gap:12px;font-weight:500}.typed label span{flex:0 0 auto;min-width:130px}.typed input{max-width:120px}
.keys{display:flex;gap:8px;margin-top:6px}.keys button{background:var(--surface2);color:var(--text);border:0;border-radius:99px;padding:6px 14px;font-weight:600}
.navrow{display:flex;align-items:center;gap:14px;margin-top:28px}.wide{flex:1;padding:13px}
#toReview{display:block;margin:12px auto 0}.saved{text-align:center;min-height:1em;margin:2px 0}
/* review */
.rlist{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.rlist button{width:100%;display:flex;gap:10px;align-items:center;background:var(--surface);border:1px solid #2a2a2d;color:var(--text);text-align:left;border-radius:12px;padding:10px 14px;font-size:14px}
.rlist button:hover{border-color:#48484a}.rt{flex:1}.rs{font-size:12.5px}.rs.yes{color:var(--blue2)}.rs.no{color:var(--bad)}
/* result */
.scoreline{display:flex;align-items:center;gap:22px;margin:20px 0 6px}.ring{width:96px;height:96px;transform:rotate(-90deg)}
.ringbg{fill:none;stroke:#2c2c2e;stroke-width:9}.ringfg{fill:none;stroke:var(--blue);stroke-width:9;stroke-linecap:round;stroke-dasharray:var(--p) 100;animation:ring 1.2s cubic-bezier(.3,.8,.3,1)}
@keyframes ring{from{stroke-dasharray:0 100}}
.big{font-size:44px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}.scoreline p{margin:0;font-size:14px}
.revlist{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.revlist li{background:var(--surface);border:1px solid #2a2a2d;border-radius:14px;padding:14px 16px;animation:rise .4s ease-out both;animation-delay:var(--d)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
.rh{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.rh b{font-size:15px}.lvl{margin-left:auto}
.mk{width:20px;height:20px;flex:none}.mk path{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw .5s ease-out forwards;animation-delay:calc(var(--d) + .25s)}
.mk.ok path{stroke:var(--good)}.mk.no path{stroke:var(--bad)}
.revlist dl{margin:8px 0 0;display:grid;gap:4px;font-size:14px}.revlist dl div{display:flex;gap:10px}.revlist dt{color:var(--muted);min-width:96px}.revlist dd{margin:0}
.why{margin:8px 0 0}
.practicebox{margin-top:36px;padding-top:4px}
/* practice */
.sliders label{display:grid;grid-template-columns:24px 34px 1fr;align-items:center;gap:8px;font-size:16px;font-style:italic;font-family:Georgia,serif;margin:6px 0}
.sliders output{font-family:var(--sans);font-style:normal;font-variant-numeric:tabular-nums;font-size:14px;color:var(--blue2);font-weight:700}
.hint{background:#1f2a40;color:#cfe0ff;border-radius:12px;padding:10px 14px;font-size:14px}
.feed{min-height:1.5em;font-size:14.5px}.feed.good{color:var(--good)}.feed.bad{color:var(--bad)}
#pgraph.wob{animation:wob .4s}@keyframes wob{25%{transform:translateX(-5px) rotate(-.6deg)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
#pgraph.glow{animation:glow .9s ease-out}@keyframes glow{30%{filter:drop-shadow(0 0 10px rgba(79,140,255,.7))}}
/* teacher */
.thead{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:18px 0 16px}
.tablebox{background:var(--surface);border-radius:16px;overflow-x:auto;border:1px solid #2a2a2d}
.results{border-collapse:collapse;width:100%;font-size:14.5px;min-width:560px}.results th{text-align:left;padding:14px 16px;font-weight:700}.results td{padding:12px 16px;border-top:1px solid #2a2a2d;font-variant-numeric:tabular-nums}
.results tr.fresh td{animation:rise .35s ease-out both}.results .rm{color:var(--muted);font-size:12.5px;padding:2px 6px}
.pager{display:flex;gap:8px;margin:20px 0 14px}.pager .secondary{padding:9px 18px;font-weight:500}
footer{text-align:right;max-width:780px;margin:0 auto;padding:0 16px 24px}.foot{color:var(--blue2);font-size:13px}
/* dot dash */
dialog{background:#1c1c1e;color:var(--text);border:1px solid var(--line);border-radius:20px;padding:20px;max-width:360px;width:calc(100% - 32px)}
dialog::backdrop{background:rgba(0,0,0,.7)}
.secret-head{display:flex;justify-content:space-between;align-items:center}.secret-head h2{font-size:26px;font-weight:800;margin:0}
#secretClose{background:var(--surface2);color:var(--text);border:0;border-radius:99px;width:32px;height:32px;font-size:18px}
.secret-stats{display:flex;justify-content:space-between;font-weight:700;margin:10px 0}
#secretGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:10px 0}
#secretGrid button{aspect-ratio:1;border-radius:12px;border:0;background:#2c2c2e;display:grid;place-items:center;padding:0}
#secretGrid button span{width:40%;height:40%;border-radius:99px;transform:scale(0);transition:transform .18s cubic-bezier(.3,1.8,.5,1);background:#ffd60a}
#secretGrid button.dot span{transform:scale(1)}
#secretReset{background:none;border:0;color:var(--dim);font-size:12px;margin-top:10px;padding:4px 0}
.actions{display:flex;align-items:center;gap:12px}
@media (max-width:760px){
 .qgrid{grid-template-columns:1fr;gap:26px}.narrow{margin-top:18px}
 .runbar{flex-wrap:wrap;gap:10px 12px;margin-bottom:22px}.runbar .track{order:3;flex-basis:100%;max-width:calc(100% - 140px);margin-top:-6px}.runbar .menuwrap{margin-left:auto}.runbar #answered{display:none}
 .pill{padding:8px 16px 8px 8px}.tag{max-width:76px}
 main{padding:18px 14px 40px}.graphcard{padding:14px 12px 12px}
 .typed label{flex-wrap:wrap}.typed label span{min-width:0}
}
@media (max-width:340px){.ptform{flex-wrap:wrap}.ptform button{flex:1 0 100%}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition:none!important}.curve.main.draw{stroke-dashoffset:0}}
a.brand{color:var(--blue2);text-decoration:none}
@media (max-width:760px){.topbar{position:relative}.results{min-width:0;font-size:13.5px}.results th,.results td{padding:11px 10px}.results td:nth-child(3){white-space:nowrap}.thead .link{flex-basis:100%;justify-content:flex-start}}

/* lesson picker + worksheet graph images */
.lessons{margin:4px 0 14px}
.qimg{display:block;width:100%;max-width:400px;margin:0 auto;background:#fff;border-radius:8px}
.qgrid.solo{grid-template-columns:minmax(0,560px)}
.qimg[hidden]{display:none}