@font-face{font-family:Inter;src:url(fonts/inter-v20-latin-regular.woff2)format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter-v20-latin-500.woff2)format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter-v20-latin-600.woff2)format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Newsreader;src:url(fonts/newsreader-v26-latin-regular.woff2)format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Newsreader;src:url(fonts/newsreader-v26-latin-italic.woff2)format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Newsreader;src:url(fonts/newsreader-v26-latin-500.woff2)format('woff2');font-weight:500;font-display:swap}
/* Theme: base+accent in OKLCH (Linear's LCH approach). Dark: elevated surfaces lighter, borders over shadows. */
:root{--bg:oklch(98.6% .004 160);--s1:#fff;--s2:oklch(96.5% .005 160);--line:oklch(91.5% .006 160);--tx:oklch(21% .01 160);--mu:oklch(54% .01 160);--fa:oklch(70% .008 160);--ac:oklch(47% .1 160);--acs:oklch(94.5% .035 160);--ok:oklch(50% .12 150);--okb:oklch(96% .04 150);--bad:oklch(53% .17 25);--badb:oklch(96.5% .03 25);--serif:Newsreader,Georgia,serif;--sans:Inter,system-ui,sans-serif}
[data-theme=dark]{--bg:oklch(16.5% .006 160);--s1:oklch(20.5% .007 160);--s2:oklch(23.5% .008 160);--line:oklch(28% .008 160);--tx:oklch(94% .005 160);--mu:oklch(67% .01 160);--fa:oklch(48% .01 160);--ac:oklch(75% .11 160);--acs:oklch(27% .04 160);--ok:oklch(77% .13 150);--okb:oklch(26% .05 150);--bad:oklch(73% .15 25);--badb:oklch(27% .05 25)}
*{box-sizing:border-box;margin:0}html{background:var(--bg)}body{color:var(--tx);font:15px/1.55 var(--sans);font-feature-settings:"tnum","cv11";-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-radius:6px}
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:14px;padding:14px 32px;background:color-mix(in oklch,var(--bg) 85%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);font-size:13px;color:var(--mu)}
.brand{color:var(--tx);font-weight:600;letter-spacing:-.01em;display:flex;gap:8px;align-items:center}.dot{width:10px;height:10px;border-radius:3px;background:var(--ac)}
.course{padding:4px 8px;border-radius:6px;color:var(--mu)}.course:hover{background:var(--s2);color:var(--tx)}
.sp{flex:1}nav{display:flex;gap:4px}nav a{padding:4px 10px;border-radius:6px}nav a:hover{color:var(--tx)}nav a.on{color:var(--tx);background:var(--s2)}
.icon{width:28px;height:28px;border-radius:6px;color:var(--mu)}.icon:hover{background:var(--s2)}
.kbd{display:inline-block;min-width:20px;text-align:center;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:0 5px;font:500 11px/18px var(--sans);color:var(--mu);background:var(--s1)}
.hair{height:2px;background:transparent}.hair i{display:block;height:100%;width:0;background:var(--ac);transition:width .3s cubic-bezier(.2,.8,.2,1)}
main{max-width:720px;margin:0 auto;padding:64px 24px 120px}
.eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mu)}
h1{font:400 44px/1.12 var(--serif);letter-spacing:-.02em;margin:14px 0 12px}h1 em{color:var(--ac)}
.sub{color:var(--mu);font-size:16px;max-width:56ch}
.btn{display:inline-flex;gap:10px;align-items:center;background:var(--tx);color:var(--bg);border-radius:10px;padding:11px 16px;font-weight:500;transition:transform .1s}
.btn:active{transform:scale(.97)}.btn .kbd{background:transparent;color:inherit;border-color:color-mix(in oklch,var(--bg) 35%,transparent)}
.btn.ghost{background:none;color:var(--tx);border:1px solid var(--line)}.btn.ghost:hover{background:var(--s2)}.btn.ghost .kbd{border-color:var(--line);color:var(--mu)}
.btn[disabled]{opacity:.4;pointer-events:none}
.actions{display:flex;gap:10px;margin-top:32px;flex-wrap:wrap}
.sec{margin-top:64px}.sec h2{font-size:13px;font-weight:500;color:var(--mu);margin-bottom:10px;display:flex;justify-content:space-between}
.srow{display:grid;grid-template-columns:22px 48px 1fr 110px 64px;align-items:center;gap:14px;padding:13px 4px;border-top:1px solid var(--line);font-size:14px;cursor:pointer;border-radius:4px}
.srow:hover{background:var(--s2)}.srow b{font-weight:600}
.chk{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--fa);display:grid;place-items:center}.on .chk{background:var(--ac);border-color:var(--ac)}.on .chk:after{content:"";width:7px;height:4px;border:solid var(--bg);border-width:0 0 2px 2px;transform:rotate(-45deg) translate(1px,-1px)}
.srow:not(.on){color:var(--mu)}
.bar{height:4px;background:var(--line);border-radius:4px;overflow:hidden;display:flex}.bar i{height:100%;background:var(--ac)}.bar i.l{background:color-mix(in oklch,var(--ac) 40%,var(--line))}
.m{color:var(--mu);font-size:13px}.r{text-align:right}
.fc{display:flex;gap:6px;align-items:flex-end;height:64px}.fc div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:6px}.fc i{display:block;background:var(--acs);border-radius:3px;min-height:2px}.fc div:first-child i{background:var(--ac)}
.fcl{display:flex;justify-content:space-between;font-size:11px;color:var(--fa);margin-top:8px}
/* Drill */
.meta{display:flex;justify-content:space-between;gap:12px}
.stem{font:400 25px/1.45 var(--serif);letter-spacing:-.01em;margin:18px 0 30px;white-space:pre-wrap}
.opt{width:100%;text-align:left;display:flex;gap:16px;align-items:flex-start;padding:15px 18px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;background:var(--s1);line-height:1.5}
.opt:hover{border-color:var(--fa)}.opt .k{width:24px;height:24px;flex:none;border-radius:6px;border:1px solid var(--line);display:grid;place-items:center;font-size:12px;color:var(--mu);margin-top:-1px}
.done .opt{pointer-events:none}.done .opt:not(.ok):not(.bad){opacity:.55}
.opt.ok{border-color:var(--ok);background:var(--okb)}.opt.ok .k{background:var(--ok);color:var(--bg);border:0}
.opt.bad{border-color:var(--bad);background:var(--badb)}.opt.bad .t{text-decoration:line-through;color:var(--mu)}
.reveal{animation:rise .18s cubic-bezier(.2,.8,.2,1)}@keyframes rise{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.reveal{animation:none}.hair i{transition:none}}
.panel{margin-top:28px;padding-left:18px;border-left:2px solid var(--ac)}.panel.badl{border-color:var(--bad)}
.panel b{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ac)}.panel.badl b{color:var(--bad)}
.panel p,.panel pre{margin-top:8px;font:17px/1.65 var(--serif);white-space:pre-wrap}
.hint{margin-top:-14px;margin-bottom:24px;color:var(--mu);font:italic 17px/1.6 var(--serif)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:40px;font-size:13px;color:var(--mu);flex-wrap:wrap}
.grades{display:flex;gap:8px}.grades .btn{padding:9px 14px}
.lnk{color:var(--mu);font-size:13px;display:inline-flex;gap:6px;align-items:center}.lnk:hover{color:var(--tx)}
.empty{text-align:center;padding-top:80px}.empty h1{font-size:36px}
.stats{display:flex;gap:40px;margin-top:36px}.stats div b{display:block;font:400 36px/1 var(--serif)}.stats div span{font-size:13px;color:var(--mu)}
.mrow{padding:16px 4px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:6px 16px}.mrow p{font:16px/1.45 var(--serif);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.menu{position:fixed;inset:0;background:color-mix(in oklch,var(--bg) 60%,transparent);backdrop-filter:blur(4px);z-index:9;display:grid;place-items:start center;padding-top:14vh}
.menu ul{list-style:none;padding:6px;width:420px;background:var(--s1);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 60px -20px #0004}
.menu li{padding:10px 12px;border-radius:8px;display:flex;justify-content:space-between;cursor:pointer}.menu li:hover,.menu li.sel{background:var(--s2)}
@media (max-width:640px){main{padding:40px 18px 100px}h1{font-size:34px}.stem{font-size:21px}.srow{grid-template-columns:20px 40px 1fr 54px}.srow .bar{display:none}.top{padding:12px 16px}.course span{display:none}}
/* ---- M3 */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-40px;z-index:20;background:var(--tx);color:var(--bg);padding:6px 10px;border-radius:6px}.skip:focus{top:10px}
h1:focus,main:focus,.stem:focus,.panel:focus{outline:none}
.course .kbd{margin-left:6px}
button.srow{width:100%;text-align:left;font:inherit}.srow.static{cursor:default}.srow.static:hover{background:none}.srow .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
mark{background:none;color:var(--ac);font-weight:600}
details.off{margin-top:14px}details.off summary{cursor:pointer;font-size:13px;color:var(--mu)}details.off p{font-size:15px;color:var(--mu)}
.form{display:grid;grid-template-columns:auto 1fr;gap:14px 16px;align-items:center;margin-top:32px;font-size:14px}
.form label{display:flex;gap:12px;align-items:center;justify-content:space-between;min-width:220px}
input[type=number]{width:84px;font:inherit;color:var(--tx);background:var(--s1);border:1px solid var(--line);border-radius:8px;padding:7px 10px}
.btn.sm{padding:6px 12px;font-size:13px}
.exbar{position:sticky;top:51px;z-index:4;display:flex;gap:16px;align-items:center;padding:10px 0;background:var(--bg);margin-top:-40px}
.timer{font:500 22px/1 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.01em}.timer.warn{color:var(--bad)}
.grid{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 40px}
.cell{width:32px;height:32px;border-radius:7px;border:1px solid var(--line);font-size:12px;color:var(--mu);position:relative;background:var(--s1)}
.cell.a{background:var(--acs);color:var(--tx);border-color:transparent}.cell.cur{border-color:var(--tx);color:var(--tx);font-weight:600}
.cell.f:after{content:"";position:absolute;top:3px;right:3px;width:6px;height:6px;border-radius:50%;background:oklch(72% .16 70)}
.lnk.flagged{color:oklch(62% .16 70)}
.opt.sel{border-color:var(--ac);box-shadow:inset 0 0 0 1px var(--ac)}.opt.sel .k{background:var(--ac);color:var(--bg);border:0}
.opt[disabled],.btn.ghost[disabled]{opacity:.35}
.scrim{position:fixed;inset:0;z-index:30;background:color-mix(in oklch,var(--bg) 55%,transparent);backdrop-filter:blur(3px);display:grid;place-items:start center;padding:14vh 16px 0;animation:fade .12s ease-out}
.dlg{width:min(460px,100%);background:var(--s1);border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:0 30px 80px -30px #0005;animation:pop .14s cubic-bezier(.2,.8,.2,1)}
.dlg h2{font:500 20px/1.3 var(--serif)}.dlg .actions{margin-top:20px}
@keyframes fade{from{opacity:0}}@keyframes pop{from{opacity:0;transform:scale(.98)}}
@media (prefers-reduced-motion:reduce){.scrim,.dlg{animation:none}}
.pal{padding:0;width:min(600px,100%);overflow:hidden}
.pin input{width:100%;font:inherit;font-size:16px;color:var(--tx);background:none;border:0;border-bottom:1px solid var(--line);padding:16px 18px;outline:none}
#pl{max-height:min(420px,55vh);overflow:auto;padding:6px}
.pg{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fa);padding:10px 12px 4px}
.po{display:flex;justify-content:space-between;gap:16px;padding:9px 12px;border-radius:8px;cursor:pointer;font-size:14px}.po>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.po.sel{background:var(--s2)}.pempty{padding:28px 16px;text-align:center;color:var(--mu);font-size:14px}
.pfoot{display:flex;gap:16px;padding:9px 14px;border-top:1px solid var(--line);font-size:12px;color:var(--fa)}
.stats{flex-wrap:wrap}.stats small{font-size:16px;color:var(--fa)}
.tbl{width:100%;border-collapse:collapse;font-size:14px}.tbl th{font-weight:500;color:var(--mu);text-align:right;padding:8px 4px;font-size:12px}.tbl td{padding:11px 4px;border-top:1px solid var(--line);text-align:right}.tbl td:first-child,.tbl th:first-child{text-align:left}
.note{font-size:12px;color:var(--fa);margin-top:10px}
.heat{display:grid;grid-template-rows:repeat(7,12px);grid-auto-flow:column;grid-auto-columns:12px;gap:3px}.heat i{border-radius:3px;background:var(--s2)}
.heat .h1{background:color-mix(in oklch,var(--ac) 30%,var(--s2))}.heat .h2{background:color-mix(in oklch,var(--ac) 55%,var(--s2))}.heat .h3{background:color-mix(in oklch,var(--ac) 80%,var(--s2))}.heat .h4{background:var(--ac)}
.hb div{display:grid;grid-template-columns:80px 1fr 40px;gap:14px;align-items:center;padding:7px 0;font-size:13px}.hb .bar{height:8px}
details.rv{border-top:1px solid var(--line)}details.rv summary{display:grid;grid-template-columns:18px 26px 1fr auto;gap:10px;padding:13px 4px;cursor:pointer;list-style:none;font-size:14px}
details.rv summary::-webkit-details-marker{display:none}.rv .mk{color:var(--ok)}.rv.x .mk{color:var(--bad)}.rv .n{color:var(--fa)}.rv .st{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rvb{padding:0 4px 20px 58px}.ro{display:flex;gap:10px;padding:6px 0;font-size:14px;color:var(--mu)}.ro .k{width:18px;flex:none}.ro.ok{color:var(--ok);font-weight:500}.ro.bad{color:var(--bad);text-decoration:line-through}
@media (max-width:640px){.form{grid-template-columns:1fr}.rvb{padding-left:4px}.exbar{top:49px}}