: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;}
  .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;}