:root{
  --bg:#fafaf9;--card:#ffffff;--ink:#18181b;--muted:#57575f;--faint:#8a8a93;--line:#e6e6e3;--hover:#f1f1ee;
  --accent:#2457d6;--accent-ink:#fff;--ok:#16794a;--okbg:#e6f4ec;--bad:#c2331f;--badbg:#fbeae7;
  --w:#d6422f;--n:#2457d6;--t:#118a5c;--f:#d98a0b;--a:#7a3fd1;--net:#18181b;--v:#0e8aa8;--ac:#c026a3;
  --obj:#ecece7;--objs:#3a3a42;--water:#9cc7ee;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0f0f11;--card:#17171a;--ink:#ececef;--muted:#a2a2ab;--faint:#6e6e78;--line:#26262b;--hover:#1e1e23;
    --accent:#7aa2ff;--accent-ink:#0f0f11;--ok:#5fd09a;--okbg:#12281d;--bad:#ff8a78;--badbg:#2e1713;
    --w:#ff7a68;--n:#7aa2ff;--t:#4fcf9b;--f:#f0b04a;--a:#b48cff;--net:#ececef;--v:#4fcbe8;--ac:#ee7ad8;
    --obj:#2a2a30;--objs:#b8b8c2;--water:#3b6a99;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
a{color:var(--accent)}
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 20px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{font-weight:650;letter-spacing:-.01em;text-decoration:none;color:var(--ink)}
.brand span{color:var(--faint);font-weight:500}
.brand b{color:var(--accent)}
.nav{display:flex;gap:4px;margin-left:8px}
.nav button,.seg button{border:0;background:none;padding:6px 12px;border-radius:8px;cursor:pointer;color:var(--muted);font-weight:550}
.nav button:hover,.seg button:hover{background:var(--hover)}
.nav button[aria-current=page]{background:var(--hover);color:var(--ink)}
.spacer{flex:1}
.seg{display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:9px;padding:2px;font-size:14px}
.seg>span{padding:0 8px;color:var(--faint)}
.seg button{padding:3px 10px}
.seg button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink)}
.score{font-size:14px;color:var(--muted);white-space:nowrap}
.score b{color:var(--ink)}
main{max-width:1000px;margin:0 auto;padding:22px 20px 70px}
h1,h2,h3{letter-spacing:-.01em;line-height:1.25}
h2{font-size:22px;margin:0 0 4px}
h3{font-size:15px;margin:18px 0 6px}
.sub{color:var(--muted);margin:0 0 14px}
.chips,.pills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.chip,.pill{border:1px solid var(--line);background:var(--card);border-radius:99px;padding:5px 13px;cursor:pointer;font-size:14px;color:var(--muted)}
.chip:hover,.pill:hover{background:var(--hover)}
.chip[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pill[aria-pressed=true]{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--card))}
.pills{margin-bottom:16px}
.tools{display:flex;gap:8px;align-items:center;margin:0 0 14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px}
.qhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.badge{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.qtitle{font-size:18px;font-weight:650}
.qgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:22px;align-items:start}
@media(max-width:780px){.qgrid{grid-template-columns:1fr}.qgrid .figure{order:-1}}
.qtext{margin:0 0 14px}
.figure{border:1px solid var(--line);border-radius:12px;background:var(--bg);padding:6px}
.figure svg{display:block;width:100%;height:auto}
.part{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:12px 0}
.part .pl{font-weight:650;color:var(--faint);padding-top:6px}
.part .pq{grid-column:2}
.ansrow{grid-column:2;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ansrow input[type=text]{width:150px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.ansrow input:focus-visible,.fields input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.unit{color:var(--muted)}
.res{font-size:14px;font-weight:550}
.part.ok input{border-color:var(--ok)}.part.ok .res{color:var(--ok)}
.part.no input{border-color:var(--bad)}.part.no .res{color:var(--bad)}
.opts{grid-column:2;display:grid;gap:6px}
.opt{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer;background:var(--bg)}
.opt:hover{background:var(--hover)}
.opt input{margin-top:5px}
.opt.ok{border-color:var(--ok);background:var(--okbg)}
.opt.no{border-color:var(--bad);background:var(--badbg)}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.btn{border:1px solid var(--line);background:var(--card);padding:8px 15px;border-radius:9px;cursor:pointer;font-weight:550}
.btn:hover{background:var(--hover)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.sm{padding:5px 11px;font-size:14px}
.hint{margin:12px 0 0;padding:10px 13px;border-radius:10px;background:var(--hover);color:var(--muted);font-size:15px}
.err{padding:12px 14px;border-radius:10px;background:var(--badbg);color:var(--bad);margin:10px 0}
details.custom{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
details.custom summary{cursor:pointer;color:var(--muted);font-weight:550}
.fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:10px}
.fields label{display:grid;gap:3px;font-size:13px;color:var(--muted)}
.fields input{padding:6px 9px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.sol{margin-top:22px;border-top:1px solid var(--line);padding-top:6px}
.sol h3{display:flex;align-items:center;gap:8px}
.sol ol,.sol ul{margin:6px 0 10px;padding-left:22px}
.sol li{margin:5px 0}
.final{display:inline-block;margin:2px 0 8px;padding:5px 12px;border-radius:8px;background:var(--okbg);color:var(--ok);font-weight:650}
.m{font-family:ui-serif,Georgia,"Times New Roman",serif;font-style:italic;white-space:nowrap}
.eq{margin:6px 0;padding:8px 12px;background:var(--hover);border-radius:8px;font-family:ui-serif,Georgia,serif;overflow-x:auto}
.fbds{display:flex;flex-wrap:wrap;gap:12px;margin:10px 0}
.fbds .figure{flex:1 1 250px;max-width:340px}
/* --- diagram styling --- */
svg .t{font:13px ui-sans-serif,system-ui,sans-serif;fill:var(--ink)}
svg .t.c{text-anchor:middle}
svg .t.s2{font-size:11.5px;fill:var(--muted)}
svg .t.b{font-weight:650}
svg .t .sb{font-size:10px}
svg .t.ttl{font-size:12px;fill:var(--faint);font-weight:600}
svg .obj{fill:var(--obj);stroke:var(--objs);stroke-width:1.6}
svg .wedge{fill:var(--obj);stroke:var(--objs);stroke-width:1.6;opacity:.75}
svg .gnd{stroke:var(--objs);stroke-width:2}
svg .hat{stroke:var(--faint);stroke-width:1.2}
svg .rope{stroke:var(--t);stroke-width:2.2;fill:none}
svg .thin{stroke:var(--objs);stroke-width:1.4;fill:none}
svg .ref{stroke:var(--faint);stroke-width:1.2;stroke-dasharray:4 4;fill:none}
svg .arc{stroke:var(--ink);stroke-width:1.4;fill:none}
svg .axis{stroke:var(--faint);stroke-width:1.3;stroke-dasharray:3 4}
svg .pers line{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
svg .pers circle{fill:var(--bg);stroke:var(--ink);stroke-width:2.6}
svg .head{fill:var(--bg)}
svg .ar{stroke:var(--c);stroke-width:2.6;fill:none;stroke-linecap:round}
svg .ah{fill:var(--c)}
svg g.dashed .ar{stroke-dasharray:5 4;stroke-width:1.9}
svg .c-w{--c:var(--w)}svg .c-n{--c:var(--n)}svg .c-t{--c:var(--t)}svg .c-f{--c:var(--f)}
svg .c-a{--c:var(--a)}svg .c-net{--c:var(--net)}svg .c-v{--c:var(--v)}svg .c-ac{--c:var(--ac)}
svg .c-comp{--c:var(--faint)}
svg .tx-w{fill:var(--w)}svg .tx-n{fill:var(--n)}svg .tx-t{fill:var(--t)}svg .tx-f{fill:var(--f)}svg .tx-a{fill:var(--a)}svg .tx-v{fill:var(--v)}svg .tx-ac{fill:var(--ac)}
svg .water{fill:var(--water);stroke:var(--objs);stroke-width:1.4}
svg .track{stroke:var(--objs);stroke-width:5;fill:none;stroke-linecap:round}
svg .path{stroke:var(--faint);stroke-width:1.5;stroke-dasharray:5 5;fill:none}
svg .dot{fill:var(--ink)}
svg .dotw{fill:var(--bg);stroke:var(--ink);stroke-width:2}
/* --- learn page --- */
.lesson{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:22px;align-items:start}
@media(max-width:820px){.lesson{grid-template-columns:1fr}}
.lesson ul{padding-left:20px;margin:6px 0 12px}
.lesson li{margin:4px 0}
.fcard{display:grid;gap:6px;margin:8px 0 14px}
.fcard div{padding:7px 12px;border-radius:8px;background:var(--hover);font-family:ui-serif,Georgia,serif}
.sim .controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 16px;margin:12px 0}
.sim label{display:grid;gap:2px;font-size:13px;color:var(--muted)}
.sim label b{color:var(--ink);font-weight:600}
.sim input[type=range]{width:100%;accent-color:var(--accent)}
.readout{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-top:10px}
.readout div{padding:8px 11px;border:1px solid var(--line);border-radius:10px;background:var(--bg);font-size:13px;color:var(--muted)}
.readout b{display:block;font-size:17px;color:var(--ink);font-weight:650}
.readout .bad b{color:var(--bad)}.readout .good b{color:var(--ok)}
.pearls{counter-reset:p;padding:0;list-style:none}
.pearls li{counter-increment:p;padding:8px 12px 8px 40px;position:relative;border-bottom:1px solid var(--line)}
.pearls li::before{content:counter(p);position:absolute;left:8px;top:8px;width:22px;height:22px;border-radius:50%;background:var(--hover);color:var(--muted);font-size:12px;font-weight:650;display:grid;place-items:center}
footer{max-width:1000px;margin:0 auto;padding:0 20px 40px;color:var(--faint);font-size:13px}

.crumbs{display:flex;align-items:center;gap:10px;margin:0 0 14px;flex-wrap:wrap}
.crumb-t{font-weight:650;font-size:18px}
.topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin:8px 0 24px}
.tcard{position:relative;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.tcard:hover{border-color:var(--accent)}
.tmain{display:grid;gap:4px;width:100%;text-align:left;padding:18px 70px 18px 18px;border:0;background:none;cursor:pointer;border-radius:14px}
.tmain b{font-size:17px}.tmain span{color:var(--muted);font-size:14px}
.tlearn{position:absolute;top:14px;right:14px;border:1px solid var(--line);background:var(--bg);border-radius:99px;padding:3px 11px;font-size:13px;cursor:pointer;color:var(--muted)}
.tlearn:hover{background:var(--hover);color:var(--ink)}
details.pearl summary{cursor:pointer;color:var(--muted);font-weight:550;margin-bottom:8px}