:root{
  --bg:#FFF8EC; --card:#ffffff; --ink:#2D2A32; --muted:#7A7385;
  --orange:#FF8A3D; --orange-l:#FFE3CF; --blue:#3D8BFF; --blue-l:#DCEBFF;
  --green:#2BB673; --green-l:#D6F5E6; --red:#F2545B; --red-l:#FDE0E1;
  --purple:#8E6CFF; --purple-l:#E9E2FF; --yellow:#FFC93C; --yellow-l:#FFF3CC;
  --radius:20px; --shadow:0 6px 0 rgba(0,0,0,.06), 0 10px 30px rgba(60,40,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  background:var(--bg); color:var(--ink); font-size:20px; line-height:1.6;
  background-image:radial-gradient(#f3e6cf 1.2px,transparent 1.2px); background-size:26px 26px;
  -webkit-tap-highlight-color:transparent;
}
button{font-family:inherit}
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:14px;
  padding:10px 22px;background:rgba(255,248,236,.92);backdrop-filter:blur(8px);border-bottom:2px solid #F2E4CB}
.topbar .home{font-size:18px;text-decoration:none;color:var(--ink);background:#fff;border:2px solid #EADBC0;
  padding:6px 14px;border-radius:999px;font-weight:600}
.topbar{flex-wrap:wrap}
.topbar h1{font-size:24px;margin:0;flex:1 1 auto;white-space:nowrap}
.topbar h1 small{font-size:15px;color:var(--muted);font-weight:500;margin-left:10px}
.icon-btn{border:2px solid #EADBC0;background:#fff;border-radius:999px;padding:6px 14px;font-size:18px;cursor:pointer}
.lesson-nav{display:flex;gap:8px;flex-wrap:wrap}
.lesson-nav a{font-size:15px;text-decoration:none;color:var(--muted);padding:4px 12px;border-radius:999px;background:#fff;border:2px solid #EADBC0}
.lesson-nav a.on{background:var(--orange);color:#fff;border-color:var(--orange)}

main{max-width:1180px;margin:0 auto;padding:24px 22px 80px}
.section{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 30px;margin:0 0 28px;position:relative}
.section>h2{margin:0 0 6px;font-size:28px;display:flex;align-items:center;gap:12px}
.section>h2 .tag{font-size:15px;background:var(--orange);color:#fff;padding:2px 12px;border-radius:999px;font-weight:600}
.section .lead{color:var(--muted);margin:0 0 18px}
.row{display:flex;gap:22px;flex-wrap:wrap;align-items:stretch}
.col{flex:1 1 320px;min-width:0}
.center{text-align:center}

.btn{border:none;cursor:pointer;font-size:20px;font-weight:700;padding:12px 24px;border-radius:16px;
  background:var(--orange);color:#fff;box-shadow:0 5px 0 #D96A22;transition:transform .08s,box-shadow .08s;user-select:none}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #D96A22}
.btn.blue{background:var(--blue);box-shadow:0 5px 0 #2A68C9}.btn.blue:active{box-shadow:0 1px 0 #2A68C9}
.btn.green{background:var(--green);box-shadow:0 5px 0 #1E8A56}.btn.green:active{box-shadow:0 1px 0 #1E8A56}
.btn.purple{background:var(--purple);box-shadow:0 5px 0 #6C4DD8}.btn.purple:active{box-shadow:0 1px 0 #6C4DD8}
.btn.ghost{background:#fff;color:var(--ink);border:2px solid #EADBC0;box-shadow:0 5px 0 #EADBC0}
.btn.ghost:active{box-shadow:0 1px 0 #EADBC0}
.btn.small{font-size:16px;padding:8px 16px;border-radius:12px}
.btn[disabled]{opacity:.45;pointer-events:none}

.chip{display:inline-block;padding:2px 12px;border-radius:999px;font-weight:700;font-size:.9em}
.c-orange{color:var(--orange)} .c-blue{color:var(--blue)} .c-green{color:var(--green)} .c-red{color:var(--red)} .c-purple{color:var(--purple)}
.bg-orange{background:var(--orange-l)} .bg-blue{background:var(--blue-l)} .bg-green{background:var(--green-l)} .bg-purple{background:var(--purple-l)} .bg-yellow{background:var(--yellow-l)} .bg-red{background:var(--red-l)}

.big-ratio{font-size:64px;font-weight:800;letter-spacing:2px;font-variant-numeric:tabular-nums}
.tip{background:var(--yellow-l);border-left:6px solid var(--yellow);padding:12px 18px;border-radius:12px;margin:14px 0}
.tip.blue{background:var(--blue-l);border-color:var(--blue)}
.tip.green{background:var(--green-l);border-color:var(--green)}
.tip.red{background:var(--red-l);border-color:var(--red)}
.hidden{display:none!important}

/* 分数 */
.frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.05;margin:0 .12em;font-size:.9em}
.frac>span:first-child{border-bottom:.08em solid currentColor;padding:0 .15em}
.frac>span:last-child{padding:0 .15em}

/* 反馈 */
.feedback{min-height:44px;margin-top:14px;padding:10px 16px;border-radius:14px;font-weight:700;display:none}
.feedback.show{display:block;animation:pop .35s}
.feedback.ok{background:var(--green-l);color:#14794A}
.feedback.no{background:var(--red-l);color:#B3262C}
.feedback.info{background:var(--blue-l);color:#1F5BB5}
@keyframes pop{0%{transform:scale(.85);opacity:0}60%{transform:scale(1.04)}100%{transform:scale(1);opacity:1}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(10px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
@keyframes bounce{0%,100%{transform:scale(1)}40%{transform:scale(1.15)}70%{transform:scale(.95)}}
.shake{animation:shake .45s}
.bounce{animation:bounce .5s}

input.num{font-size:28px;font-weight:700;width:110px;text-align:center;padding:8px;border-radius:14px;border:3px solid #EADBC0;outline:none;font-family:inherit;background:#fff}
input.num:focus{border-color:var(--blue)}
input.num.ok{border-color:var(--green);background:var(--green-l)}
input.num.no{border-color:var(--red);background:var(--red-l)}

/* 测验组件 */
.quiz{background:#FFFDF8;border:3px dashed #F0DDBD;border-radius:18px;padding:20px 24px}
.quiz .q-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;color:var(--muted);font-size:16px}
.quiz .dots{display:flex;gap:6px}
.quiz .dots i{width:14px;height:14px;border-radius:50%;background:#EADBC0;display:block}
.quiz .dots i.cur{background:var(--blue);transform:scale(1.25)}
.quiz .dots i.ok{background:var(--green)} .quiz .dots i.no{background:var(--red)}
.quiz .q-text{font-size:26px;font-weight:700;margin:6px 0 16px}
.quiz .opts{display:flex;flex-wrap:wrap;gap:12px}
.quiz .opt{flex:1 1 200px;font-size:22px;font-weight:700;padding:14px;border-radius:16px;border:3px solid #EADBC0;background:#fff;cursor:pointer;transition:transform .1s}
.quiz .opt:hover{transform:translateY(-2px);border-color:var(--blue)}
.quiz .opt.right{background:var(--green-l);border-color:var(--green)}
.quiz .opt.wrong{background:var(--red-l);border-color:var(--red)}
.quiz .opt[disabled]{cursor:default}
.quiz .done{text-align:center;padding:10px}
.quiz .done .stars{font-size:54px;letter-spacing:6px}

#confetti{position:fixed;inset:0;pointer-events:none;z-index:999}
.toast{position:fixed;left:50%;top:90px;transform:translateX(-50%);z-index:1000;padding:14px 28px;border-radius:18px;font-size:24px;font-weight:800;box-shadow:var(--shadow);animation:pop .35s}
.toast.ok{background:var(--green);color:#fff}.toast.no{background:var(--red);color:#fff}.toast.info{background:var(--blue);color:#fff}

.stepper{display:inline-flex;align-items:center;gap:10px}
.stepper button{width:52px;height:52px;border-radius:50%;font-size:30px;font-weight:800;border:none;cursor:pointer;color:#fff}

@media (max-width:1150px){.topbar h1 small{display:none}.topbar h1{font-size:20px}}
@media (max-width:700px){body{font-size:18px}.big-ratio{font-size:44px}.section{padding:20px}}

/* ===== 数字身份证：区分「实际的量 / 比的项 / 比值」 ===== */
.nq,.nt,.nv{display:inline-flex;align-items:baseline;gap:.12em;font-weight:800;cursor:help;line-height:1.25;vertical-align:baseline;white-space:nowrap}
.nq{padding:0 .35em;border:2px solid var(--blue);border-radius:8px;background:var(--blue-l);color:#1F5BB5}
.nq .u{font-size:.72em;font-weight:700;color:#3D8BFF}
.nt{padding:0 .3em;border-bottom:4px solid var(--orange);color:#C2551A;background:var(--orange-l);border-radius:6px 6px 0 0}
.nv{padding:0 .45em;border-radius:999px;background:var(--green);color:#fff}
.nv .frac>span:first-child{border-color:#fff}
.legend{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch;margin:0 0 16px}
.legend .it{flex:1 1 230px;background:#fff;border:2px solid #EFE3CC;border-radius:14px;padding:8px 12px;font-size:16px}
.legend .it .nq,.legend .it .nt,.legend .it .nv{font-size:22px;margin-right:6px}