:root{
 --bg:#eef8f6;--surface:#fff;--ink:#0f2320;--muted:#5b7a75;--line:#d3e8e4;
 --ember:#12a3a3;--ember-deep:#0e7d7d;--slate:#2bb3d4;--stone:#6d8c87;--violet:#7c5cff;
 --brand:#0e7d7d;--brand-ink:#fff;--accent:#12a3a3;--cta:#0b6d6d;--cta-ink:#fff;
 --bar:#0e7d7d;--amber:#a05f00;--red:#b3261e;--green:#0a7d33;
 --chip:#e2f2ef;--shadow:0 1px 3px rgb(14 60 55/.08),0 8px 24px rgb(14 60 55/.06);
 --grad1:#0e7d7d;--grad2:#0b5f5f;--banner-ink:#fff}
@media(prefers-color-scheme:dark){:root{
 --bg:#0a1716;--surface:#122120;--ink:#e6f4f1;--muted:#8ab0aa;--line:#22403b;
 --ember:#1cc0bf;--ember-deep:#4fd6d0;--slate:#6fd0e6;--stone:#6d8c87;--violet:#9a80ff;
 --brand:#4fd6d0;--brand-ink:#06201f;--accent:#1cc0bf;--cta:#1cc0bf;--cta-ink:#06201f;
 --bar:#1cc0bf;--amber:#ffb454;--red:#ff8a80;--green:#69db8f;
 --chip:#16241f;--shadow:none;
 --grad1:#1cc0bf;--grad2:#4fd6d0;--banner-ink:#06201f}}
:root[data-theme=light]{
 --bg:#eef8f6;--surface:#fff;--ink:#0f2320;--muted:#5b7a75;--line:#d3e8e4;
 --ember:#12a3a3;--ember-deep:#0e7d7d;--slate:#2bb3d4;--stone:#6d8c87;--violet:#7c5cff;
 --brand:#0e7d7d;--brand-ink:#fff;--accent:#12a3a3;--cta:#0b6d6d;--cta-ink:#fff;
 --bar:#0e7d7d;--amber:#a05f00;--red:#b3261e;--green:#0a7d33;
 --chip:#e2f2ef;--shadow:0 1px 3px rgb(14 60 55/.08),0 8px 24px rgb(14 60 55/.06);
 --grad1:#0e7d7d;--grad2:#0b5f5f;--banner-ink:#fff}
:root[data-theme=dark]{
 --bg:#0a1716;--surface:#122120;--ink:#e6f4f1;--muted:#8ab0aa;--line:#22403b;
 --ember:#1cc0bf;--ember-deep:#4fd6d0;--slate:#6fd0e6;--stone:#6d8c87;--violet:#9a80ff;
 --brand:#4fd6d0;--brand-ink:#06201f;--accent:#1cc0bf;--cta:#1cc0bf;--cta-ink:#06201f;
 --bar:#1cc0bf;--amber:#ffb454;--red:#ff8a80;--green:#69db8f;
 --chip:#16241f;--shadow:none;
 --grad1:#1cc0bf;--grad2:#4fd6d0;--banner-ink:#06201f}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,sans-serif;
 display:flex;justify-content:center;min-height:100vh}
#app{width:min(430px,100vw);padding:0 1rem 3rem}
.screen{display:none;animation:fade .18s ease}
.screen.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1}}
header.app{display:flex;align-items:center;gap:.6rem;padding:.9rem 0 .5rem}
.logo{font-size:1.5rem;line-height:1}
.streak{background:var(--chip);border-radius:99px;padding:.35rem .7rem;font-size:.85rem;white-space:nowrap;align-self:stretch;display:flex;align-items:center}
/* course masthead: prominent, tappable "which course am I in" + switcher */
.course-switch-wrap{position:relative;flex:1;min-width:0}
.course-switch{display:flex;align-items:center;gap:.55rem;width:100%;border:1px solid var(--line);
 background:var(--surface);color:var(--ink);border-radius:14px;padding:.5rem .55rem .5rem .7rem;
 cursor:pointer;font:inherit;text-align:left;box-shadow:var(--shadow);min-height:54px}
.course-switch:hover{border-color:var(--brand)}
.course-switch:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.cs-text{display:flex;flex-direction:column;min-width:0;line-height:1.14}
.cs-eyebrow{font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cs-name{font-size:1.18rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-caret{margin-left:auto;color:var(--muted);font-size:.85rem;transition:transform .18s}
.course-switch[aria-expanded=true] .cs-caret{transform:rotate(180deg)}
.course-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:30;width:min(330px,88vw);
 background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:.35rem;
 box-shadow:0 18px 46px rgb(0 0 0/.24);display:flex;flex-direction:column;gap:.1rem}
.course-menu[hidden]{display:none}
.cm-item{display:flex;align-items:center;gap:.6rem;padding:.55rem .6rem;border-radius:10px;
 color:var(--ink);text-decoration:none;cursor:pointer}
.cm-item:hover{background:var(--chip)}
.cm-item.on{background:color-mix(in srgb,var(--brand) 13%,transparent);cursor:default}
.cm-txt{display:flex;flex-direction:column;min-width:0}
.cm-txt b{font-size:.95rem;font-weight:700}
.cm-txt span{font-size:.74rem;color:var(--muted)}
.cm-check{margin-left:auto;color:var(--brand);font-weight:800}
.cm-all{display:block;margin-top:.15rem;padding:.55rem .6rem;border-top:1px solid var(--line);
 color:var(--brand);font-size:.85rem;font-weight:600;text-decoration:none;border-radius:0 0 8px 8px}
.cm-all:hover{background:var(--chip)}
/* persistent course crumb across subscreens */
.subbar{display:flex;align-items:center;gap:.6rem}
.ccrumb{margin-left:auto;font-size:.78rem;font-weight:600;color:var(--muted);background:var(--chip);
 border:1px solid var(--line);border-radius:99px;padding:.28rem .7rem;white-space:nowrap;
 max-width:64%;overflow:hidden;text-overflow:ellipsis}
.ccrumb[hidden]{display:none}
.tile .tny{display:block;font-size:.68rem;color:var(--muted);margin-top:.2rem;opacity:.85}
.banner{background:linear-gradient(120deg,var(--grad1),var(--grad2));color:var(--banner-ink);border-radius:16px;
 padding:.9rem 1rem;margin:.8rem 0;box-shadow:var(--shadow);cursor:pointer;border:none;
 width:100%;text-align:left;font:inherit}
.banner b{display:block;font-size:.95rem}
.banner span{font-size:.8rem;opacity:.92}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:1rem 0}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1rem;
 box-shadow:var(--shadow);cursor:pointer;text-align:left;font:inherit;color:var(--ink)}
.tile .ico{font-size:1.5rem}
.tile b{display:block;margin-top:.4rem}
.tile span{font-size:.76rem;color:var(--muted)}
.tile.primary{grid-column:1/-1;border-left:4px solid var(--accent)}
.tile .soon{float:right;font-size:.65rem;background:var(--chip);border-radius:99px;padding:.1rem .5rem;color:var(--muted)}
.weak{background:var(--surface);border:1px dashed var(--line);border-radius:14px;padding:.7rem .9rem;
 font-size:.85rem;color:var(--muted)}
.weak b{color:var(--ink)}
.weak button{border:none;background:none;color:var(--brand);cursor:pointer;font:inherit;padding:0;text-decoration:underline}
h2{font-size:1rem;margin:1.2rem 0 .5rem}
.setup-hint{font-size:.82rem;color:var(--muted);margin:-.2rem 0 .5rem}
/* structure sketcher */
.drawhead{display:flex;align-items:center;gap:.7rem;margin:.4rem 0 .2rem}
.drawhead h2{flex:1}
.drawscore{background:var(--chip);border-radius:99px;padding:.25rem .7rem;font-size:.85rem;white-space:nowrap}
.drawprompt{font-size:1.05rem;margin:.1rem 0 .7rem}
.drawprompt b{color:var(--brand)}
.skpalette{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 .6rem}
.skel{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;
 padding:.5rem .7rem;font:inherit;font-weight:700;cursor:pointer;min-height:42px;min-width:42px}
.skel.on{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.skcanvas{width:100%;height:auto;aspect-ratio:5/3;border:1px solid var(--line);border-radius:12px;
 background:var(--surface);touch-action:manipulation;display:block}
.skcanvas .skbond{stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;pointer-events:none}
.skcanvas .skhit{stroke:transparent;stroke-width:16;stroke-linecap:round;cursor:pointer}
.skcanvas .skatom{cursor:pointer}
.skcanvas .skatom circle{fill:var(--surface);stroke:transparent;stroke-width:2.5}
.skcanvas .skatom circle.sel{stroke:var(--brand)}
.skcanvas .skatom text{text-anchor:middle;dominant-baseline:central;font:700 16px system-ui;fill:var(--ink);pointer-events:none}
.skhelp{font-size:.8rem;color:var(--muted);margin:.5rem 0 .2rem}
.sk-row{display:flex;gap:.6rem;margin-top:.7rem}
.sk-row .next{flex:1;margin-top:0}
.skclear{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:12px;
 padding:.75rem 1rem;font:inherit;cursor:pointer;min-height:46px}
.sk-fb{border-radius:12px;padding:.7rem .9rem;font-size:.9rem;margin-top:.7rem}
.sk-fb.ok{background:color-mix(in srgb,var(--green) 12%,transparent)}
.sk-fb.no{background:color-mix(in srgb,var(--red) 10%,transparent)}
#sk-reveal{margin-top:.6rem}
#sk-next{margin-top:.7rem}
.chips{display:flex;gap:.5rem;flex-wrap:wrap}
.chips button{border:1px solid var(--line);background:var(--surface);color:var(--ink);
 border-radius:12px;padding:.55rem .95rem;cursor:pointer;font-size:.9rem;min-height:44px}
.chips button.on{background:var(--brand);color:var(--brand-ink);border-color:var(--brand);font-weight:600}
.modes{display:flex;background:var(--chip);border-radius:12px;padding:.25rem;margin:.4rem 0 1rem}
.modes button{flex:1;border:none;background:none;color:var(--muted);padding:.55rem;border-radius:10px;
 cursor:pointer;font-size:.9rem}
.modes button.on{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--shadow)}
.ladder{display:flex;flex-direction:column;gap:.6rem;margin-top:.6rem}
.ladder[hidden]{display:none}
.lvl{display:flex;align-items:center;gap:.8rem;background:var(--surface);border:1px solid var(--line);
 border-radius:14px;padding:.8rem .9rem;cursor:pointer;box-shadow:var(--shadow);font:inherit;color:var(--ink);text-align:left}
.lvl .face{font-size:1.4rem}
.lvl b{display:block;font-size:.95rem}
.lvl span{font-size:.76rem;color:var(--muted)}
.lvl.on{border-color:var(--brand);outline:2px solid var(--brand)}
.go{width:100%;border:none;background:var(--cta);color:var(--cta-ink);font-weight:700;font-size:1rem;
 border-radius:14px;padding:.9rem;margin-top:1.1rem;cursor:pointer;min-height:48px}
.back{border:none;background:none;color:var(--muted);cursor:pointer;font-size:.85rem;padding:.6rem 0}
.tolanding{display:inline-block;color:var(--muted);font-size:.85rem;padding:.7rem 0 .1rem;text-decoration:none}
.tolanding:hover{color:var(--brand)}
.qbar{display:flex;align-items:center;gap:.7rem;font-size:.8rem;color:var(--muted);margin:.8rem 0}
.qbar .bar{flex:1;height:6px;background:var(--chip);border-radius:99px;overflow:hidden}
.qbar .bar i{display:block;height:100%;background:var(--bar);transition:width .3s}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.1rem;box-shadow:var(--shadow)}
.card .tag{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.stem{font-weight:600;margin:.5rem 0 .9rem}
.opt{display:block;width:100%;text-align:left;border:1.5px solid var(--line);background:none;color:var(--ink);
 border-radius:12px;padding:.75rem .9rem;margin:.45rem 0;font-size:.95rem;cursor:pointer;min-height:44px}
.opt:disabled{cursor:default;opacity:1}
.opt.correct{border-color:var(--green);background:color-mix(in srgb,var(--green) 10%,transparent)}
.opt.wrong{border-color:var(--red);background:color-mix(in srgb,var(--red) 8%,transparent)}
.fb{border-radius:12px;padding:.7rem .9rem;font-size:.88rem;margin-top:.6rem}
.fb.ok{background:color-mix(in srgb,var(--green) 12%,transparent)}
.fb.no{background:color-mix(in srgb,var(--red) 10%,transparent)}
.fb .ref{display:block;margin-top:.4rem;color:var(--brand);font-size:.82rem}
.setup{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:.5rem 0;font-size:.95rem;overflow-x:auto}
.frac{display:inline-flex;flex-direction:column;text-align:center}
.frac .n{border-bottom:1.5px solid currentColor;padding:0 .35rem .05rem}
.frac .d{padding:.05rem .35rem 0}
details{margin-top:.6rem}
summary{font-size:.85rem;cursor:pointer;color:var(--muted)}
.sol li{font-size:.88rem;margin:.2rem 0}
.next{width:100%;border:none;background:var(--cta);color:var(--cta-ink);font-weight:700;
 border-radius:12px;padding:.75rem;margin-top:.8rem;cursor:pointer;min-height:46px}
.big{font-size:2.4rem;font-weight:800;text-align:center;margin:.6rem 0 0}
.subscore{text-align:center;color:var(--muted);font-size:.85rem;margin-bottom:1rem}
.tstat{display:flex;align-items:center;gap:.6rem;font-size:.85rem;margin:.35rem 0}
.tstat .bar{flex:1;height:8px;background:var(--chip);border-radius:99px;overflow:hidden}
.tstat .bar i{display:block;height:100%;background:var(--bar)}
.tstat.badbar .bar i{background:var(--amber)}
.review .card{margin:.8rem 0}
footer{font-size:.72rem;color:var(--muted);text-align:center;padding:1.4rem 0 0}
.uboard{display:grid;gap:.2rem;margin-top:.4rem}
.urow{display:flex;align-items:center;gap:.7rem;border:none;background:none;color:var(--ink);
 font:inherit;font-size:.88rem;padding:.45rem .3rem;border-radius:10px;cursor:pointer;text-align:left}
.urow:hover{background:var(--chip)}
.urow .ut{flex-basis:52%}
.urow .ubar{flex:1;height:8px;background:var(--chip);border-radius:99px;overflow:hidden}
.urow .ubar i{display:block;height:100%;background:var(--bar)}
.urow .upct{font-size:.78rem;color:var(--muted);min-width:2.6rem;text-align:right}
.urow .unew{margin-left:auto;font-size:.78rem;color:var(--brand)}

.daily{width:100%;border:1px dashed var(--line);background:var(--surface);color:var(--ink);font:inherit;
 font-size:.9rem;border-radius:14px;padding:.65rem 1rem;cursor:pointer;text-align:left;margin-bottom:.2rem}
.daily:disabled{color:var(--muted);cursor:default}
.opt.sel{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 10%,transparent)}
.navrow{display:flex;gap:.5rem;margin-top:.8rem}
.navrow button{flex:1;border:1px solid var(--line);background:var(--surface);color:var(--ink);
 border-radius:10px;padding:.6rem;font:inherit;cursor:pointer}
.navrow #nav-submit{background:var(--cta);color:var(--cta-ink);border-color:var(--cta);font-weight:700}
.navrow button:disabled{opacity:.4;cursor:default}
.next.similar{background:var(--chip);color:var(--ink)}
.flag{display:block;border:none;background:none;color:var(--muted);font-size:.75rem;cursor:pointer;
 margin:.7rem auto 0;text-decoration:underline}
.pdfbtn{width:100%;border:1px dashed var(--line);background:none;color:var(--muted);font:inherit;
 font-size:.85rem;border-radius:12px;padding:.6rem;margin-top:.6rem;cursor:pointer}
.mnote{font-size:.84rem;color:var(--muted);margin:.3rem 0 .6rem}
.mlink{display:block;width:100%;text-align:left;padding:.5rem .4rem;border-radius:8px;border:0;background:none;color:var(--ink);text-decoration:none;font:inherit;font-size:.92rem;cursor:pointer}
.mlink:hover{background:var(--chip)}
.search{width:100%;border:1px solid var(--line);border-radius:12px;padding:.65rem .9rem;margin:.2rem 0 .9rem;
 background:var(--surface);color:var(--ink);font:inherit}
.faqitem{margin:0 0 .6rem;padding:.8rem 1rem}
.faqitem summary{font-weight:600;color:var(--ink);font-size:.95rem}
.faqitem p{font-size:.9rem;margin:.5rem 0 .1rem}

.notice{background:var(--chip);border:1px solid var(--line);border-radius:12px;
 padding:.7rem .9rem;font-size:.88rem;color:var(--ink);margin:.6rem 0}
.error-box{background:color-mix(in srgb,var(--red) 8%,transparent);border:1px solid var(--red);
 border-radius:12px;padding:.8rem 1rem;font-size:.9rem;color:var(--ink);margin:.6rem 0}
.retry-btn{display:inline-block;border:none;background:var(--cta);color:var(--cta-ink);font:inherit;
 font-weight:700;font-size:.9rem;border-radius:10px;padding:.55rem 1.1rem;margin-top:.6rem;
 cursor:pointer;min-height:44px}

.ref-note{display:block;margin-top:.45rem;border:none;background:none;color:var(--brand);
 font:inherit;font-size:.84rem;cursor:pointer;padding:0;text-decoration:underline}
#note-overlay{position:fixed;inset:0;background:rgb(0 0 0/.45);z-index:20;display:flex;
 align-items:center;justify-content:center;padding:1rem}
#note-overlay[hidden]{display:none}
.notebox{background:var(--surface);color:var(--ink);border-radius:16px;max-width:640px;width:100%;
 max-height:86vh;overflow-y:auto;padding:1.2rem 1.3rem;box-shadow:0 12px 48px rgb(0 0 0/.3)}
#note-close{float:right;border:1px solid var(--line);background:var(--chip);color:var(--ink);
 border-radius:8px;padding:.25rem .6rem;cursor:pointer;font:inherit;font-size:.8rem}
.notebox h2{font-size:1.15rem;margin:.2rem 0 .6rem}
.notebox h3{font-size:1rem;margin:1rem 0 .3rem}
.notebox h4{font-size:.92rem;margin:.8rem 0 .2rem}
.notebox p,.notebox li{font-size:.92rem}
.notebox blockquote{border-left:3px solid var(--accent);margin:.6rem 0;padding:.4rem .8rem;
 background:var(--chip);border-radius:0 8px 8px 0;font-size:.9rem}
.notebox .twrap{overflow-x:auto}
.notebox table{border-collapse:collapse;font-size:.85rem;margin:.5rem 0}
.notebox th,.notebox td{border:1px solid var(--line);padding:.3rem .55rem;text-align:left}

/* tablet */
@media(min-width:700px){
 body{font-size:17px}
 #app{width:min(880px,94vw)}
 .cs-name{font-size:1.32rem}
 .course-switch-wrap{flex:0 1 auto;min-width:min(360px,60%)}
 .tiles{grid-template-columns:1fr 1fr}
 .tile.primary{grid-column:1/-1}
 .ladder{display:grid;grid-template-columns:1fr 1fr}
 .qbar,.card{max-width:660px;margin-inline:auto}
 .review .card{margin:.8rem auto}
 .go,.next{max-width:660px;display:block;margin-inline:auto}
 .big{font-size:3rem}
}
/* laptop / desktop */
@media(min-width:1100px){
 #app{width:min(1020px,92vw)}
 .tiles{grid-template-columns:repeat(3,1fr)}
 .tile.primary{grid-column:1/-1}
 .ladder{grid-template-columns:repeat(4,1fr)}
 .lvl{flex-direction:column;text-align:center;gap:.4rem}
 .uboard{grid-template-columns:1fr 1fr;gap:.2rem 1.6rem}
}