:root{
    --bg:#f6f8fa; --card:#ffffff; --ink:#1a2332; --muted:#5b6b7f;
    --accent:#0e7c66; --accent-ink:#ffffff; --accent-soft:#e6f4f1;
    --wrong:#b3402f; --wrong-soft:#faeae7; --right:#0e7c66;
    --border:#e2e8f0; --chip:#eef2f6;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:var(--bg); color:var(--ink); line-height:1.55; min-height:100vh; display:flex; flex-direction:column;}
  header{background:var(--card); border-bottom:1px solid var(--border); padding:14px 20px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
  .logo{font-weight:800; font-size:1.15rem; letter-spacing:-0.02em;}
  .logo span{color:var(--accent);}
  .tagline{color:var(--muted); font-size:0.85rem;}
  .scorebar{margin-left:auto; display:flex; gap:16px; font-size:0.85rem; color:var(--muted);}
  .scorebar b{color:var(--ink); font-variant-numeric:tabular-nums;}
  main{max-width:860px; width:100%; margin:0 auto; padding:24px 20px 60px; flex:1;}
  .topics{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px;}
  .chip{border:1px solid var(--border); background:var(--card); color:var(--muted); border-radius:999px; padding:6px 13px; font-size:0.83rem; cursor:pointer; transition:all .15s;}
  .chip:hover{border-color:var(--accent); color:var(--accent);}
  .chip.active{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600;}
  .card{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:26px; box-shadow:0 1px 3px rgba(16,24,40,.05);}
  .qmeta{display:flex; gap:10px; align-items:center; margin-bottom:14px;}
  .qtopic{background:var(--accent-soft); color:var(--accent); font-size:0.75rem; font-weight:700; padding:3px 10px; border-radius:6px; text-transform:uppercase; letter-spacing:.04em;}
  .qtext{font-size:1.08rem; margin-bottom:20px;}
  /* The rounding instruction. Grading is strict against exactly this, so it has to read as
     part of the question rather than as a footnote the eye skips. */
  .roundnote{display:block; margin-top:12px; font-size:0.85rem; color:var(--accent); background:var(--accent-soft); border-left:3px solid var(--accent); border-radius:0 8px 8px 0; padding:8px 12px;}
  .answer-row{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
  input[type=text]{flex:1; min-width:160px; padding:11px 14px; font-size:1rem; border:1.5px solid var(--border); border-radius:9px; outline:none;}
  input[type=text]:focus{border-color:var(--accent);}
  .unit{color:var(--muted); font-size:0.95rem; min-width:70px;}
  button{padding:11px 20px; font-size:0.95rem; font-weight:600; border-radius:9px; border:1.5px solid var(--accent); cursor:pointer; transition:all .15s;}
  .btn-primary{background:var(--accent); color:var(--accent-ink);}
  .btn-primary:hover{filter:brightness(1.08);}
  .btn-ghost{background:transparent; color:var(--accent);}
  .btn-ghost:hover{background:var(--accent-soft);}
  .feedback{margin-top:16px; padding:13px 16px; border-radius:9px; font-size:0.95rem; display:none;}
  .feedback.right{display:block; background:var(--accent-soft); color:var(--accent); border:1px solid #bfe3da;}
  .feedback.wrong{display:block; background:var(--wrong-soft); color:var(--wrong); border:1px solid #efc8bf;}
  .steps{margin-top:18px; border-top:1px dashed var(--border); padding-top:18px; display:none;}
  .steps.open{display:block;}
  .steps h3{font-size:0.8rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:10px;}
  .step{display:flex; gap:12px; margin-bottom:10px; font-size:0.95rem;}
  .stepnum{background:var(--chip); color:var(--muted); font-weight:700; font-size:0.75rem; min-width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-top:2px;}
  .formula{font-family:"SF Mono",Menlo,Consolas,monospace; background:var(--chip); padding:2px 7px; border-radius:5px; font-size:0.88em;}
  .note{margin-top:12px; font-size:0.85rem; color:var(--muted); background:var(--chip); border-radius:8px; padding:10px 14px;}
  .qtable{border-collapse:collapse; margin:10px 0 4px; font-size:0.9rem;}
  .qtable th,.qtable td{border:1px solid var(--border); padding:5px 12px; text-align:left;}
  .qtable th{background:var(--chip); font-size:0.75rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted);}
  footer{border-top:1px solid var(--border); background:var(--card); padding:18px 20px; font-size:0.78rem; color:var(--muted); text-align:center;}
  footer .byline{margin-bottom:6px; color:var(--ink); font-size:0.83rem;}
  @media(max-width:560px){ .scorebar{width:100%; margin-left:0;} }

/* ---- multi-page additions ---- */
a{color:var(--accent);}
.site-header{background:var(--card);border-bottom:1px solid var(--border);padding:14px 20px;}
.site-header .inner{max-width:900px;margin:0 auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.site-header a.brand{font-weight:800;font-size:1.15rem;letter-spacing:-0.02em;text-decoration:none;color:var(--ink);}
.site-header a.brand span{color:var(--accent);}
.site-header .htag{color:var(--muted);font-size:0.82rem;}
.crumb{max-width:900px;margin:16px auto 0;padding:0 20px;font-size:0.82rem;color:var(--muted);}
.crumb a{text-decoration:none;}
.prose{max-width:820px;margin:0 auto;padding:8px 20px 0;}
.prose h1{font-size:1.7rem;letter-spacing:-0.02em;margin:14px 0 10px;}
.prose .lede{color:var(--muted);font-size:0.9rem;margin-bottom:18px;}
.prose p.intro{font-size:1.02rem;margin-bottom:16px;}
.block{margin:14px 0;}
.blabel{display:block;font-size:0.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;margin-bottom:6px;}
.prose .formula{display:block;margin:5px 0;}
.prose .ex{background:#fafbfc;border-left:3px solid var(--accent);padding:9px 14px;border-radius:0 8px 8px 0;font-size:0.95rem;margin:4px 0;}
.prose .trap{font-size:0.92rem;color:var(--muted);background:var(--chip);border-radius:8px;padding:11px 15px;margin-top:14px;}
.section-label{max-width:820px;margin:26px auto 0;padding:0 20px;font-size:0.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;}
.topic-grid{max-width:900px;margin:14px auto 0;padding:0 20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;}
.topic-grid a{display:block;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:12px 14px;text-decoration:none;color:var(--ink);font-weight:600;font-size:0.92rem;transition:all .15s;}
.topic-grid a:hover{border-color:var(--accent);color:var(--accent);}
.homelede{max-width:820px;margin:0 auto;padding:22px 20px 0;}
.homelede h1{font-size:1.8rem;letter-spacing:-0.02em;margin-bottom:10px;}
.homelede p{color:var(--muted);margin-bottom:10px;}
.more-wrap{margin-top:30px;}
.sharehint{font-size:0.78rem;color:var(--muted);margin:12px 0 0;line-height:1.5;}
#share{white-space:nowrap;}

/* ---- homepage depth sections ---- */
.home h2{max-width:820px;margin:34px auto 10px;padding:0 20px;font-size:1.35rem;letter-spacing:-0.02em;}
.home > p, .home .hp{max-width:820px;margin:0 auto 12px;padding:0 20px;font-size:0.97rem;line-height:1.65;}
.topic-grid a .tg-blurb{display:block;font-weight:400;font-size:0.8rem;color:var(--muted);margin-top:5px;line-height:1.45;}
.formula-sheet{max-width:820px;margin:8px auto 0;padding:0 20px;}
.fs-row{border-bottom:1px solid var(--border);padding:13px 0;}
.fs-row:last-child{border-bottom:none;}
.fs-name{font-weight:700;font-size:0.95rem;margin:0 0 5px;}
.fs-name a{text-decoration:none;}
.fs-f{display:block;font-size:0.9rem;color:var(--ink);margin:3px 0;}
.mistakes{max-width:820px;margin:8px auto 0;padding:0 20px;}
.mk{background:var(--card);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:0 10px 10px 0;padding:12px 16px;margin-bottom:10px;}
.mk-topic{font-size:0.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;margin-bottom:5px;}
.mk-body{font-size:0.92rem;line-height:1.55;}

/* Static worked problems (server-rendered so search engines can read them) */
.worked{max-width:820px;margin:34px auto 0;padding:0 20px;}
.worked h2{font-size:1.35rem;letter-spacing:-0.02em;margin:0 0 8px;}
.worked-lede{color:var(--muted);font-size:0.9rem;margin-bottom:20px;}
.wp{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px 20px;margin-bottom:14px;}
.wp h3{font-size:0.76rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;margin:0 0 8px;}
.wq{font-size:1rem;margin:0 0 12px;line-height:1.55;}
.walabel{display:inline-block;font-size:0.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;margin-right:8px;}
.wans{background:#fafbfc;border-left:3px solid var(--accent);padding:8px 14px;border-radius:0 8px 8px 0;font-weight:700;margin:0 0 12px;font-size:0.98rem;}
.wsteps{font-size:0.92rem;color:var(--ink);}
.wsteps ol{margin:6px 0 0;padding-left:20px;}
.wsteps li{margin-bottom:6px;line-height:1.55;}
.wnote{font-size:0.86rem;color:var(--muted);background:var(--chip);border-radius:8px;padding:9px 13px;margin-top:12px;}
.wp .formula{display:inline-block;margin:2px 0;}

/* No min-height reservation on .card / #waitlist: measured CLS is already 0.000 on
   every page, and forcing a floor only added dead space inside the practice card
   (and on one page actually introduced a 0.06 shift). Measured, not assumed. */