:root{
  --bg:#f7f5f0; --panel:#ffffff; --ink:#1c2430; --muted:#5b6675; --line:#e2ddd3;
  --accent:#1f3b57; --h:#2f80c9; --h-soft:#cfe3f6; --nh:#c98a2f; --nh-soft:#f4e3c8;
  --good:#2e8b57; --good-soft:#dcf1e4; --bad:#c0392b; --bad-soft:#f8dedb;
  --code:#efebe3; --shadow:0 1px 2px rgba(0,0,0,.05),0 4px 16px rgba(0,0,0,.04);
  --radius:12px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0f1720; --panel:#16212d; --ink:#e7ecf2; --muted:#9aa7b6; --line:#273545;
    --accent:#8cc4f2; --h:#58a8ee; --h-soft:#1c3a57; --nh:#e8ad55; --nh-soft:#4a3517;
    --good:#4cc283; --good-soft:#163a28; --bad:#ef6f61; --bad-soft:#45201c;
    --code:#1d2a38; --shadow:none;
  }
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:16px/1.65 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--h)}
h1,h2,h3{font-family:Fraunces,Georgia,serif;line-height:1.2;font-weight:700}
h1{font-size:2.1rem;margin:.2em 0 .4em}
h2{font-size:1.4rem;margin:1.8em 0 .5em}
h3{font-size:1.1rem;margin:1.4em 0 .4em}
code,.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.92em}
code{background:var(--code);padding:.1em .35em;border-radius:5px}

.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;height:56px;padding:0 16px;background:var(--panel);border-bottom:1px solid var(--line)}
.brand{font-family:Fraunces,serif;font-weight:700;font-size:1.2rem;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:10px}
.logo{width:22px;height:22px;border-radius:5px;background:linear-gradient(to right,var(--h) 0 45%,transparent 45%),linear-gradient(var(--nh-soft),var(--nh-soft));position:relative;overflow:hidden}
.logo::after{content:"";position:absolute;right:0;bottom:0;width:55%;height:35%;background:var(--nh)}
.progress-pill{margin-left:auto;font-size:.8rem;font-weight:600;padding:3px 10px;border-radius:99px;background:var(--h-soft);color:var(--ink)}
.menu-btn{display:none;border:0;background:none;color:var(--ink);font-size:1.4rem;cursor:pointer;padding:4px 8px}

.layout{display:grid;grid-template-columns:280px 1fr;min-height:calc(100vh - 56px)}
.sidebar{border-right:1px solid var(--line);padding:18px 12px 40px;position:sticky;top:56px;height:calc(100vh - 56px);overflow-y:auto;background:var(--bg)}
.sidebar h4{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:18px 10px 6px}
.sidebar a{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:.93rem}
.sidebar a:hover{background:var(--code)}
.sidebar a.active{background:var(--h-soft);font-weight:600}
.sidebar a.locked{color:var(--muted)}
.dot{width:18px;height:18px;flex:none;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-size:11px;color:#fff}
.dot.done{background:var(--good);border-color:var(--good)}
.dot.soon{border-style:dashed}

main{padding:28px 20px 80px;outline:none;min-width:0}
.page{max-width:760px;margin:0 auto}
.kicker{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--h);font-weight:600}
.lead{font-size:1.12rem;color:var(--muted)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin:18px 0;box-shadow:var(--shadow)}
.callout{border-left:4px solid var(--h);background:var(--panel);padding:12px 16px;border-radius:0 10px 10px 0;margin:16px 0}
.callout.warn{border-color:var(--nh)}
.callout.key{border-color:var(--good)}
.callout b:first-child{display:block;margin-bottom:2px}
.h{color:var(--h);font-weight:600}.nh{color:var(--nh);font-weight:600}
table.grid{border-collapse:collapse;width:100%;margin:10px 0;font-size:.95rem}
table.grid th,table.grid td{border:1px solid var(--line);padding:8px 10px;text-align:center}
table.grid th{background:var(--code);font-weight:600}
.katex-display{overflow-x:auto;overflow-y:hidden;padding:4px 0}

/* buttons & inputs */
.btn{font:inherit;font-weight:600;border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:8px 16px;border-radius:9px;cursor:pointer}
.btn:hover{border-color:var(--h)}
.btn.primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.btn.small{padding:4px 10px;font-size:.85rem}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
input.blank{font:inherit;font-family:"JetBrains Mono",monospace;width:7.5em;padding:3px 8px;border:1.5px solid var(--line);border-radius:7px;background:var(--bg);color:var(--ink);text-align:center}
input.blank.wide{width:10em}
input.blank.ok{border-color:var(--good);background:var(--good-soft)}
input.blank.no{border-color:var(--bad);background:var(--bad-soft)}
input[type=text].field,input[type=number].field,textarea.field{font:inherit;width:100%;padding:8px 10px;border:1.5px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}
input[type=range]{width:100%;accent-color:var(--h)}
label.slider{display:block;margin:10px 0}
label.slider span{display:flex;justify-content:space-between;font-size:.92rem}

/* quiz */
.quiz .q{font-weight:600;margin-bottom:10px}
.opts{display:grid;gap:8px}
.opt{text-align:left;font:inherit;padding:10px 14px;border-radius:9px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer}
.opt:hover:not([disabled]){border-color:var(--h)}
.opt.right{border-color:var(--good);background:var(--good-soft)}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft)}
.opt[disabled]{cursor:default}
.feedback{margin-top:10px;font-size:.95rem;display:none}
.feedback.show{display:block}
.feedback .tag{font-weight:700}
.feedback.ok .tag{color:var(--good)}.feedback.no .tag{color:var(--bad)}
.label-chip{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}

/* dot grid */
.dots{display:grid;gap:3px;margin:12px 0}
.dots i{aspect-ratio:1;border-radius:50%;background:var(--line);transition:background .25s,opacity .25s,transform .25s}
.dots i.h{background:var(--h-soft)}.dots i.nh{background:var(--nh-soft)}
.dots i.h.e{background:var(--h)}.dots i.nh.e{background:var(--nh)}
.dots.filter i:not(.e){opacity:.15;transform:scale(.6)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.88rem;color:var(--muted)}
.legend b{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin-right:5px}

/* area diagram */
.area-wrap{display:grid;grid-template-columns:1fr;gap:14px}
svg.area{width:100%;height:auto;display:block}
.readout{font-size:1.05rem}
.big{font-family:Fraunces,serif;font-size:2rem;font-weight:700}

/* lesson footer */
.lesson-nav{display:flex;justify-content:space-between;gap:10px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line)}
.done-banner{background:var(--good-soft);border:1px solid var(--good);border-radius:var(--radius);padding:14px 18px;margin-top:24px}

/* home */
.hero{padding:10px 0 4px}
.track{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.track a{display:block;text-decoration:none;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.track a:hover{border-color:var(--h)}
.track a small{color:var(--muted);display:block}
.track a.soon{opacity:.65}
.stat-row{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 16px;min-width:120px}
.stat b{display:block;font-family:Fraunces,serif;font-size:1.5rem}
.stat small{color:var(--muted)}

/* practice */
.solution{display:none;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.solution.show{display:block}
.saved-item{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.check-list label{display:block;margin:6px 0}

.scrim{display:none}
@media (max-width:860px){
  .layout{grid-template-columns:1fr}
  .menu-btn{display:block}
  .sidebar{position:fixed;left:0;top:56px;width:280px;z-index:30;transform:translateX(-100%);transition:transform .2s;background:var(--panel)}
  .sidebar.open{transform:none}
  .scrim.show{display:block;position:fixed;inset:56px 0 0;background:rgba(0,0,0,.35);z-index:25}
  h1{font-size:1.7rem}
  .grid2{grid-template-columns:1fr}
}
@media (min-width:700px){ .area-wrap{grid-template-columns:1.2fr 1fr;align-items:center} }