:root{--navy:#16324f;--blue:#2364aa;--teal:#0f8a70;--orange:#d0712f;--rose:#c54b68;--card:#fff;--ink:#17243a;--muted:#637086;--line:#dbe5f1;--shadow:0 12px 30px rgba(22,50,79,.1)}*{box-sizing:border-box}body{margin:0;background:linear-gradient(135deg,#f8fbff,#f2f8f5);color:var(--ink);font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;min-height:100vh}body[data-theme=dark]{--card:#112036;--ink:#edf5ff;--muted:#aabbd0;--line:#29405c;background:#091321}.topbar{min-height:76px;padding:12px 20px;background:linear-gradient(135deg,#0b2948,var(--navy));color:#fff;display:flex;align-items:center;gap:14px}.back{color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.35);border-radius:12px;padding:9px 12px}.title{font-size:clamp(23px,3vw,36px);font-weight:850}.lesson{padding:7px 12px;border-radius:999px;background:var(--blue);font-weight:750}.top-actions{margin-left:auto;display:flex;gap:8px}button{font:inherit;min-height:44px;border:1px solid var(--line);border-radius:12px;padding:9px 12px;background:var(--card);color:var(--ink);font-weight:720;cursor:pointer}.topbar button{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.3)}button:focus-visible,input:focus-visible{outline:3px solid rgba(35,100,170,.28);outline-offset:2px}.tabs{display:flex;gap:6px;margin-left:auto}.tabs button.active{background:#fff;color:var(--navy)}.app{max-width:1580px;margin:auto;padding:16px}.layout{display:grid;grid-template-columns:285px minmax(560px,1fr) 330px;gap:16px;align-items:start}.card{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}.head{padding:13px 15px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.head h2{font-size:18px;margin:0}.body{padding:15px}.stage-number{font-size:44px;color:var(--teal);font-weight:850}.stage-desc{margin-top:6px;line-height:1.55;color:var(--muted)}.range-row{margin:17px 0}.range-row label{display:flex;justify-content:space-between;margin-bottom:8px}input[type=range]{width:100%;accent-color:var(--blue)}.actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.zoom-control{grid-column:1/-1}.primary{background:var(--blue);color:#fff;border-color:var(--blue)}.speed{display:flex;gap:8px;margin:12px 0}.speed button{flex:1}.speed .active{background:var(--navy);color:#fff;border-color:var(--navy)}.toggle{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}.switch{width:48px;height:27px;border-radius:99px;background:#cbd6e3;position:relative;cursor:pointer}.switch::after{content:"";position:absolute;width:21px;height:21px;left:3px;top:3px;border-radius:50%;background:#fff;transition:.18s}.switch.on{background:var(--teal)}.switch.on::after{left:24px}.canvas-card .body{padding:10px}.canvas-wrap{position:relative;min-height:660px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:linear-gradient(180deg,rgba(35,100,170,.035),transparent)}canvas{width:100%;height:650px;display:block;cursor:grab;touch-action:none;user-select:none}canvas.dragging{cursor:grabbing}.prompt{position:absolute;left:18px;right:18px;bottom:12px;padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--card) 92%,transparent);font-weight:750;text-align:center;pointer-events:none}.sequence{font-size:21px;font-family:Georgia,"Times New Roman",serif;text-align:center;padding:13px 8px;border:1px solid #bfd1e8;border-radius:14px;background:rgba(35,100,170,.06);margin-bottom:12px}.formula{font-family:Georgia,"Times New Roman",serif;font-size:24px;text-align:center;padding:15px;border-radius:14px;background:rgba(15,138,112,.08);margin-bottom:12px}.ratio-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:14px}.ratio-table th,.ratio-table td{padding:7px;border-bottom:1px solid var(--line);text-align:right}.ratio-table th:first-child,.ratio-table td:first-child{text-align:center}.steps{margin-top:14px;display:grid;gap:8px}.steps div{padding:10px 12px;border:1px solid var(--line);border-radius:11px}.steps div.done{border-color:rgba(15,138,112,.45);background:rgba(15,138,112,.07)}.note{margin-top:14px;padding:12px;border:1px solid rgba(208,113,47,.35);border-radius:13px;background:rgba(208,113,47,.08);line-height:1.55}body.focus .sidebar,body.focus .evidence{display:none}body.focus .layout{grid-template-columns:1fr}
    @media(max-width:1150px){.tabs{order:4;width:100%;margin:0}.layout{grid-template-columns:270px 1fr}.evidence{grid-column:1/-1}}@media(max-width:760px){.topbar{flex-wrap:wrap}.top-actions{margin-left:0}.layout{grid-template-columns:1fr}.evidence{grid-column:auto}.canvas-wrap{min-height:520px}canvas{height:510px}.title{font-size:23px}}