:root{--y:#FFD60A;--r:#FF3B3B;--c:#00C2E0;--k:#111;--bg:#FFF8E1;--g:#22B26B;--o:#FF9F1C}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC","WenQuanYi Micro Hei",sans-serif;color:var(--k);background:var(--bg);background-image:radial-gradient(rgba(0,0,0,.09) 1.2px,transparent 1.4px);background-size:14px 14px;line-height:1.65}
a{color:inherit}
header.top{background:var(--y);border-bottom:4px solid var(--k);padding:10px 16px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:20;flex-wrap:wrap}
.logo{font-weight:900;font-size:21px;letter-spacing:1px;text-decoration:none}
.logo span{background:var(--r);color:#fff;padding:0 6px;border:2.5px solid var(--k);border-radius:6px;margin-right:6px}
.back{font-weight:800;text-decoration:none;background:#fff;border:2.5px solid var(--k);border-radius:20px;padding:3px 12px;box-shadow:3px 3px 0 var(--k)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.chips a{font-size:14px;font-weight:700;text-decoration:none;background:#fff;border:2px solid var(--k);border-radius:16px;padding:2px 10px}
.chips a:hover{background:var(--c)}
.wrap{max-width:1200px;margin:0 auto;padding:12px 14px 40px}
.card{background:#fff;border:3px solid var(--k);border-radius:16px;box-shadow:6px 6px 0 var(--k);padding:16px;margin:22px 0}
.module h2{margin:0 0 10px;font-size:22px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.module h2 .no{display:inline-grid;place-items:center;min-width:38px;height:38px;background:var(--r);color:#fff;border:3px solid var(--k);border-radius:50%;font-size:18px}
.module h2 .tag{font-size:13px;background:var(--c);border:2px solid var(--k);border-radius:12px;padding:0 8px}
.plain{background:#E8FBFF;border:2.5px solid var(--k);border-radius:12px;padding:10px 12px;margin-bottom:12px;font-size:16px}
.kd{background:#FFF1F1;border:2.5px dashed var(--r);border-radius:12px;padding:10px 12px;margin-top:12px;font-size:15px}
.grid2{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;align-items:start}
@media(max-width:860px){.grid2{grid-template-columns:1fr}.module h2{font-size:19px}}
.viz svg{width:100%;height:auto;display:block;background:#fff;border:2.5px solid var(--k);border-radius:12px;user-select:none;-webkit-user-select:none}
.viz .sub-svg{margin-top:10px}
.hint{font-size:14px;font-weight:700;background:var(--y);display:inline-block;border:2px solid var(--k);border-radius:10px;padding:1px 10px;margin-bottom:6px}
.ctls{display:flex;flex-direction:column;gap:8px}
.ctl{background:#FFFBEA;border:2px solid var(--k);border-radius:10px;padding:6px 10px}
.ctl-top{display:flex;align-items:center;gap:6px;font-weight:700;font-size:15px}
.ctl-top label{flex:1}
.ctl input.num{width:84px;font-size:15px;font-weight:800;border:2px solid var(--k);border-radius:6px;padding:2px 6px;text-align:right;background:#fff}
.ctl .unit{font-size:13px;min-width:20px}
input[type=range]{width:100%;accent-color:var(--r);height:30px;margin:2px 0}
.seg{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.seg button,.btn{font:inherit;font-size:14px;font-weight:800;background:#fff;border:2.5px solid var(--k);border-radius:10px;padding:4px 10px;cursor:pointer;box-shadow:2px 2px 0 var(--k)}
.seg button.on{background:var(--c)}
.btn.red{background:var(--r);color:#fff}.btn.yel{background:var(--y)}
.btn:active,.seg button:active{transform:translate(2px,2px);box-shadow:none}
.btnrow{display:flex;gap:8px;flex-wrap:wrap}
.formula{margin-top:10px;background:#fff;border:2.5px solid var(--k);border-radius:12px;padding:8px 12px;font-size:15.5px}
.formula .row{display:flex;gap:8px;padding:4px 0;border-bottom:1px dashed #ccc;flex-wrap:wrap}
.formula .row:last-child{border-bottom:none}
.formula .k{font-weight:800;min-width:76px;color:#444}
.formula .v{flex:1;min-width:0;word-break:break-word}
.formula .note{color:#333;background:#FFF7CC;border-radius:6px;padding:4px 8px;margin:4px 0;border-bottom:none;display:block}
.formula .bad{color:var(--r);font-weight:800}.formula .good{color:var(--g);font-weight:800}
b.n{color:var(--r)}
.big{font-size:20px;font-weight:900}
/* svg 元素 */
.pbg{fill:#fff}.gl{stroke:#e9e9e9;stroke-width:1}.ax{stroke:#111;stroke-width:2}
.tick{font-size:11px;fill:#444}.axt{font-size:13px;font-weight:800;fill:#111}
.curve{fill:none;stroke:var(--r);stroke-width:4;stroke-linejoin:round}
.sym{stroke:var(--c);stroke-width:2.5;stroke-dasharray:7 5}
.lab{font-size:13px;font-weight:800;fill:#111;paint-order:stroke;stroke:#fff;stroke-width:4px}
.lab.s{font-size:11px}
.hdl{cursor:grab;touch-action:none}.hdl.dragging{cursor:grabbing}
.hit{fill:transparent}
.knob{fill:var(--r);stroke:#111;stroke-width:3}
.hdl.cyan .knob{fill:var(--c)}.hdl.yel .knob{fill:var(--y)}.hdl.blk .knob{fill:#111}.hdl.wht .knob{fill:#fff}
.hdl:hover .knob,.hdl.dragging .knob{stroke-width:4.5}
.dot{stroke:#111;stroke-width:2}.dot.cyan{fill:var(--c)}.dot.yellow{fill:var(--y)}.dot.red{fill:var(--r)}
.handle{touch-action:none}
/* 首页 */
.hero{text-align:center;padding:26px 10px 8px}
.hero h1{font-size:clamp(28px,6vw,48px);margin:0;line-height:1.2;font-weight:900}
.hero h1 em{font-style:normal;background:var(--y);border:3px solid var(--k);padding:0 10px;border-radius:10px;box-shadow:5px 5px 0 var(--k);display:inline-block;transform:rotate(-2deg)}
.hero p{font-size:17px;max-width:720px;margin:18px auto 0}
.subjects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:20px}
@media(max-width:860px){.subjects{grid-template-columns:1fr}}
.subj{display:block;text-decoration:none;border:3.5px solid var(--k);border-radius:18px;box-shadow:7px 7px 0 var(--k);padding:18px;transition:transform .12s}
.subj:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--k)}
.subj h3{margin:0;font-size:30px;font-weight:900}
.subj .ic{font-size:40px}
.subj ul{margin:10px 0 0;padding-left:20px;font-size:16px;font-weight:600}
.subj .go{display:inline-block;margin-top:12px;background:#fff;border:2.5px solid var(--k);border-radius:20px;padding:2px 14px;font-weight:900}
.s-math{background:var(--y)}.s-phy{background:var(--c)}.s-chem{background:#FF7A7A}
.how{font-size:16px}.how li{margin:6px 0}
footer{text-align:center;font-size:13px;color:#555;padding:10px}
@media(max-width:860px){header.top{position:static}.chips{margin-left:0}}

.viz .sub-svg{max-width:360px}