:root{
 --bg:#f7f4ee;--surface:#fff;--ink:#2b2620;--muted:#6d655b;--line:#e3ddd0;
 --ember:#dd5a2b;--ember-deep:#b8431c;--slate:#3f6a8a;--stone:#8a8175;
 --brand:#b8431c;--brand-ink:#fff;--accent:#dd5a2b;--cta:#b8431c;--cta-ink:#fff;
 --bar:#b8431c;--amber:#a05f00;--red:#b3261e;--green:#0a7d33;
 --chip:#f1ece2;--shadow:0 1px 3px rgb(43 38 32/.08),0 8px 24px rgb(43 38 32/.06);
 --grad1:#b8431c;--grad2:#9a3716;--banner-ink:#fff}
@media(prefers-color-scheme:dark){:root{
 --bg:#17140f;--surface:#211d17;--ink:#ece7de;--muted:#a89f92;--line:#372f25;
 --ember:#f0724a;--ember-deep:#f79268;--slate:#7ea6c4;--stone:#8a8175;
 --brand:#f79268;--brand-ink:#17140f;--accent:#f0724a;--cta:#f0724a;--cta-ink:#17140f;
 --bar:#f0724a;--amber:#ffb454;--red:#ff8a80;--green:#69db8f;
 --chip:#32291c;--shadow:none;
 --grad1:#f0724a;--grad2:#f79268;--banner-ink:#17140f}}
:root[data-theme=light]{
 --bg:#f7f4ee;--surface:#fff;--ink:#2b2620;--muted:#6d655b;--line:#e3ddd0;
 --ember:#dd5a2b;--ember-deep:#b8431c;--slate:#3f6a8a;--stone:#8a8175;
 --brand:#b8431c;--brand-ink:#fff;--accent:#dd5a2b;--cta:#b8431c;--cta-ink:#fff;
 --bar:#b8431c;--amber:#a05f00;--red:#b3261e;--green:#0a7d33;
 --chip:#f1ece2;--shadow:0 1px 3px rgb(43 38 32/.08),0 8px 24px rgb(43 38 32/.06);
 --grad1:#b8431c;--grad2:#9a3716;--banner-ink:#fff}
:root[data-theme=dark]{
 --bg:#17140f;--surface:#211d17;--ink:#ece7de;--muted:#a89f92;--line:#372f25;
 --ember:#f0724a;--ember-deep:#f79268;--slate:#7ea6c4;--stone:#8a8175;
 --brand:#f79268;--brand-ink:#17140f;--accent:#f0724a;--cta:#f0724a;--cta-ink:#17140f;
 --bar:#f0724a;--amber:#ffb454;--red:#ff8a80;--green:#69db8f;
 --chip:#32291c;--shadow:none;
 --grad1:#f0724a;--grad2:#f79268;--banner-ink:#17140f}
*{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:1rem 0 .4rem;flex-wrap:wrap}
header.app>div{min-width:0;flex:1}
.logo{font-size:1.7rem}
header.app h1{font-size:1.05rem;margin:0}
header.app .sub{font-size:.78rem;color:var(--muted)}
.streak{margin-left:auto;background:var(--chip);border-radius:99px;padding:.25rem .7rem;font-size:.85rem;white-space:nowrap}
.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}
.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}
.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}
.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;padding:.5rem .4rem;border-radius:8px;color:var(--ink);text-decoration:none;font-size:.92rem}
.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)}
 header.app h1{font-size:1.25rem}
 .tiles{grid-template-columns:repeat(3,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(4,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}
}