:root{
  --bg:#f7f8fa; --card:#ffffff; --ink:#1f2937; --muted:#6b7280;
  --line:#e5e7eb; --accent:#2563eb;
  --c1:#bfdbfe; --c2:#fde68a; --c3:#bbf7d0; --c4:#fecaca;
  --c5:#ddd6fe; --cut:#f97316;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;line-height:1.6}
.wrap{max-width:1060px;margin:0 auto;padding:0 16px}
.topbar{background:var(--card);border-bottom:1px solid var(--line);padding:20px 0 0}
.topbar h1{margin:0;font-size:1.5rem}
.sub{color:var(--muted);margin:4px 0 12px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:14px}
.tabs button{border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:8px 14px;font-size:.95rem;cursor:pointer}
.tabs button.active{background:var(--accent);border-color:var(--accent);color:#fff}
main{padding:18px 0 8px}
.mod{display:none;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:18px;margin-bottom:18px}
.mod.active{display:block}
.mod h2{margin:0 0 4px;font-size:1.2rem}
.formula{color:var(--accent);font-size:1rem}
.hint{color:var(--muted);margin:6px 0 14px}
.panel{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start}
.panel svg{flex:1 1 340px;max-width:560px;height:auto;border:1px solid var(--line);
  border-radius:10px;background:#fff;touch-action:none}
.controls{flex:1 1 260px;display:flex;flex-direction:column;gap:10px}
.controls label{display:flex;align-items:center;gap:10px}
.controls input[type=range]{flex:1;accent-color:var(--accent)}
.controls b{min-width:2em;text-align:right}
.check{font-size:.9rem;color:var(--muted)}
.live{background:#f1f5f9;border-radius:8px;padding:10px 12px;font-size:1.02rem}
.term{background:#fffbeb;border:1px dashed #f59e0b;border-radius:8px;
  padding:10px 12px;min-height:3em}
.row{display:flex;gap:12px;align-items:center}
.row button{border:1px solid var(--line);background:#fff;border-radius:8px;
  padding:7px 14px;cursor:pointer}
.row button:hover{border-color:var(--accent);color:var(--accent)}
svg text{font-family:inherit;pointer-events:none}
.cell{cursor:pointer}
.handle{cursor:ew-resize}
.handleV{cursor:ns-resize}
.foot{color:var(--muted);font-size:.85rem;padding:6px 16px 26px}
@media (max-width:720px){ .panel{flex-direction:column} }