:root{--bg:#0f1117;--bg-tint:#1a2030;--panel:#171a23;--panel2:#1d2130;--ink:#e8eaf0;--soft-ink:#d4d9e8;--muted:#9aa3b8;--line:#2a2f40;--accent:#ffb454;--accent2:#7aa2f7;--green:#7ee787;--pink:#ff7eb6;--purple:#bb9af7;--hero-a:#1b2336;--hero-b:#141826;--code-bg:#0d0f16;--demo-bg:#0c0e15;--input-bg:#0d0f16;--canvas-bg:#080a10;--canvas-grid:#1c2333;--canvas-axis:#3a455f;--canvas-guide:#2a3550;--canvas-label:#9aa3b8;--plot-amber:#ffb454;--plot-blue:#7aa2f7;--plot-green:#7ee787;--plot-pink:#ff7eb6;--plot-purple:#bb9af7;--plot-cyan:#73daca;--plot-red:#ff5a6e;--shadow:0 10px 30px #00000059;--r:16px}:root[data-theme=light]{--bg:#f4f6fb;--bg-tint:#e7ecf7;--panel:#fff;--panel2:#eef1f8;--ink:#1b2030;--soft-ink:#333a4d;--muted:#5d667e;--line:#dce1ec;--accent:#c9770f;--accent2:#2f6fd0;--green:#1f9d53;--pink:#c8447f;--purple:#6d49c0;--hero-a:#eef2fb;--hero-b:#e3e9f7;--code-bg:#eef1f7;--demo-bg:#f7f9fc;--input-bg:#fff;--canvas-bg:#fff;--canvas-grid:#e6e9f2;--canvas-axis:#aab3c6;--canvas-guide:#cfd6e6;--canvas-label:#5d667e;--plot-amber:#d97e12;--plot-blue:#2f6fd0;--plot-green:#1f9d53;--plot-pink:#cf4d8c;--plot-purple:#7a52c8;--plot-cyan:#0f8a8f;--plot-red:#d23c55;--shadow:0 10px 30px #1e28461a}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:radial-gradient(1200px 600px at 80% -10%,var(--bg-tint) 0,var(--bg) 55%);min-height:100vh;color:var(--ink);-webkit-font-smoothing:antialiased;margin:0;font:16px/1.65 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}a{color:var(--accent2);text-decoration:none}.wrap{max-width:960px;margin:0 auto;padding:20px 20px 90px}.topbar{justify-content:space-between;align-items:center;gap:12px;padding:8px 0 14px;display:flex}.topbar .brand{color:var(--muted);font-size:14px;font-weight:700}.topbar .brand a{color:var(--muted)}.topbar .right{align-items:center;gap:8px;display:flex}.btn{background:var(--panel2);color:var(--ink);border:1px solid var(--line);cursor:pointer;border-radius:999px;padding:7px 14px;font-family:inherit;font-size:13px}.btn:hover{border-color:var(--accent2)}header.hero{background:linear-gradient(135deg,var(--hero-a),var(--hero-b) 60%);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:24px;padding:40px 30px;position:relative;overflow:hidden}header.hero:before{content:"";background:radial-gradient(circle,#7aa2f729,#0000 60%);width:360px;height:360px;position:absolute;inset:-40% -10% auto auto}.pill{letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:#ffb4541f;border:1px solid #ffb4544d;border-radius:999px;margin-bottom:12px;padding:5px 11px;font-size:12px;display:inline-block}h1{margin:.1em 0 .25em;font-size:33px;line-height:1.15}h2{margin:0;font-size:24px}h3{color:var(--accent);margin:1.4em 0 .3em;font-size:18px}.sub{color:var(--muted);max-width:680px;font-size:17px}.progwrap{background:var(--panel);border:1px solid var(--line);border-radius:14px;margin:24px 0 4px;padding:16px 18px}.progrow{color:var(--muted);justify-content:space-between;align-items:center;font-size:14px;display:flex}.progbar{background:var(--code-bg);border:1px solid var(--line);border-radius:99px;height:12px;margin-top:8px;overflow:hidden}.progfill{background:linear-gradient(90deg,var(--accent),var(--pink));width:0;height:100%;transition:width .45s}.acts{flex-direction:column;gap:14px;margin:22px 0;display:flex}.actcard{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:16px;overflow:hidden}.actcard .head{align-items:flex-start;gap:16px;padding:18px 22px;display:flex}.actcard .emoji{font-size:30px;line-height:1}.actcard .num{color:var(--muted);letter-spacing:.05em;font-size:12px;font-weight:700}.actcard .t{margin-top:2px;font-size:19px;font-weight:650}.actcard .why{color:var(--muted);margin-top:6px;font-size:14.5px}.actcard .status{white-space:nowrap;border-radius:999px;margin-left:auto;padding:4px 10px;font-size:12px;font-weight:700}.status.done{color:var(--green);background:#7ee7871f;border:1px solid #7ee7874d}.status.soon{color:var(--muted);background:var(--panel2);border:1px solid var(--line)}.status.open{color:var(--accent2);background:#7aa2f71f;border:1px solid #7aa2f74d}.status.locked{color:var(--muted);background:var(--panel2);border:1px dashed var(--line)}.actcard .mini{color:var(--accent2);margin-top:6px;font-size:12.5px;font-weight:600}.btn.locked{opacity:.55;cursor:not-allowed;pointer-events:none}.actcard .actions{flex-wrap:wrap;gap:10px;padding:0 22px 18px;display:flex}.disclose{border-top:1px solid var(--line)}.disclose summary{cursor:pointer;color:var(--accent2);-webkit-user-select:none;user-select:none;padding:12px 22px;font-size:13px;font-weight:600;list-style:none}.disclose summary::-webkit-details-marker{display:none}.disclose summary:hover,.disclose[open] summary{color:var(--accent)}.disclose .inner{padding:2px 22px 20px}section.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);margin:26px 0;overflow:hidden}.cardhead{border-bottom:1px solid var(--line);background:linear-gradient(#ffffff05,#0000);align-items:center;gap:14px;padding:20px 26px;display:flex}.cardhead .num{color:var(--muted);font-size:13px;font-weight:700}.cardhead .emoji{font-size:30px}.body{padding:6px 26px 26px}p{margin:.8em 0}.label{letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:6px;font-size:12px;font-weight:700}.story{background:var(--panel2);border-left:3px solid var(--purple);color:var(--soft-ink);border-radius:10px;margin:16px 0;padding:14px 16px;font-size:15px}.story b{color:var(--purple)}.fact{background:#ffb45414;border:1px solid #ffb45438;border-radius:10px;margin:14px 0;padding:12px 15px;font-size:14.5px}.fact .k{color:var(--accent);letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px;font-size:12px;font-weight:700;display:block}.try{background:#7ee78712;border:1px solid #7ee78740;border-radius:12px;margin-top:16px;padding:14px 16px}.try .k{color:var(--green);letter-spacing:.06em;text-transform:uppercase;font-size:12px;font-weight:700}.project{background:#7aa2f712;border:1px solid #7aa2f740;border-radius:12px;margin:14px 0;padding:14px 16px}ul.learn{margin:6px 0;padding-left:20px}ul.learn li{margin:5px 0}code{background:var(--code-bg);border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px}pre{background:var(--demo-bg);border:1px solid var(--line);border-radius:10px;padding:14px;font-size:13px;line-height:1.5;overflow:auto}table.tbl{border-collapse:collapse;width:100%;margin:12px 0;font-size:14px}table.tbl th,table.tbl td{text-align:left;border-bottom:1px solid var(--line);padding:8px 10px}table.tbl th{color:var(--accent2);font-weight:650}table.tbl code{font-size:13px}table.tbl tr.now td{color:var(--pink);font-weight:650}table.mtx th.pick{cursor:pointer;text-underline-offset:3px;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}table.mtx td.hl{color:var(--ink);background:#ff7eb629;font-weight:650}.npcell{background:var(--code-bg);width:3.4em;color:var(--ink);border:1px solid var(--line);border-radius:6px;margin:0 3px;padding:4px 6px;font-family:ui-monospace,monospace}.demo{background:var(--demo-bg);border:1px solid var(--line);border-radius:14px;margin:18px 0;padding:16px}.demo h4{margin:0 0 3px;font-size:15px}.demo .hint{color:var(--muted);margin-bottom:12px;font-size:13px}canvas{background:var(--canvas-bg);border:1px solid var(--line);border-radius:10px;width:100%;max-width:100%;display:block}.controls{flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:12px;display:flex}.ctl{color:var(--muted);flex-direction:column;flex:1;min-width:130px;font-size:12px;display:flex}.ctl input[type=range]{width:100%;accent-color:var(--accent);margin-top:3px}.ctl .v{color:var(--ink);font-family:ui-monospace,monospace;font-weight:700}.readout{color:var(--green);margin-top:12px;font-family:ui-monospace,monospace;font-size:14px;line-height:1.5}.readout .b{color:var(--pink)}button.run{background:linear-gradient(135deg,var(--accent),var(--pink));color:#1a1320;cursor:pointer;border:none;border-radius:10px;padding:9px 16px;font-size:14px;font-weight:700}button.run:hover{filter:brightness(1.08)}button.ghost{color:var(--ink);border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:10px;padding:9px 14px;font-family:inherit}button.ghost:hover{border-color:var(--accent2)}button.opt{color:var(--ink);border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:9px;padding:7px 13px;font-size:13px}button.opt:hover{border-color:var(--accent2)}button.opt.on{border-color:var(--accent2);background:#7aa2f72e}button.opt:disabled{opacity:.45;cursor:default}button.opt:disabled:hover{border-color:var(--line)}.steps{flex-direction:column;gap:6px;margin-top:12px;font-family:ui-monospace,monospace;font-size:15px;display:flex}.steps .step{border-left:3px solid var(--line);color:var(--muted);border-radius:6px;padding:7px 12px}.steps .step.now{border-left-color:var(--accent);color:var(--ink);background:var(--panel2);font-weight:600}select,input[type=number]{background:var(--input-bg);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-family:inherit;font-size:14px}.swatch{vertical-align:-1px;border-radius:3px;width:12px;height:12px;margin-right:6px;display:inline-block}.zoo-btns{flex-wrap:wrap;gap:8px;margin-bottom:12px;display:flex}.scorebar{background:var(--panel2);border:1px solid var(--line);z-index:5;border-radius:12px;justify-content:space-between;align-items:center;margin:14px 0 6px;padding:12px 16px;font-weight:700;display:flex;position:sticky;top:0}.scorebar .out{color:var(--green);font-family:ui-monospace,monospace}.q{background:var(--panel2);border:1px solid var(--line);border-radius:12px;margin:14px 0;padding:16px 18px}.q .qp{margin-bottom:11px;font-weight:650}.q .qp .qn{color:var(--accent);margin-right:6px}.qopts{flex-direction:column;gap:8px;display:flex}.qopts button{text-align:left;background:var(--input-bg);color:var(--ink);border:1px solid var(--line);cursor:pointer;border-radius:9px;padding:10px 12px;font-family:inherit;font-size:14px;transition:all .15s}.qopts button:hover:not(:disabled){border-color:var(--accent2)}.qopts button.correct{border-color:var(--green);color:var(--ink);background:#7ee78729}.qopts button.wrong{background:#ff5a6e24;border-color:#ff5a6e}.qopts button:disabled{cursor:default}.qnum{align-items:center;gap:8px;display:flex}.qnum input{width:130px}.qnum button{color:var(--ink);border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:9px;padding:9px 15px;font-family:inherit}.qnum button:hover{border-color:var(--accent2)}.explain{color:var(--soft-ink);border-left:3px solid var(--accent2);background:#7aa2f714;border-radius:8px;margin-top:11px;padding:9px 12px;font-size:13.5px}.practice{border-top:1px dashed var(--line);margin-top:22px;padding-top:16px}.practice-h{letter-spacing:.07em;text-transform:uppercase;color:var(--green);margin-bottom:6px;font-size:12px;font-weight:700}.practice .q{background:#7ee7870f;border-color:#7ee78738}.toc{flex-wrap:wrap;gap:8px;margin:20px 0 6px;display:flex}.toc button{color:var(--ink);background:var(--panel);border:1px solid var(--line);cursor:pointer;border-radius:999px;padding:6px 13px;font-family:inherit;font-size:13px}.toc button:hover:not(:disabled){border-color:var(--accent2)}.toc button.done{color:var(--green);border-color:#7ee78766}.toc button.cur{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.toc button.locked{opacity:.5;cursor:not-allowed}.pager{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin:18px 0 8px;display:flex}.pager .where{color:var(--muted);font-size:13px}.pager .btn:disabled{opacity:.45;cursor:not-allowed}.pager .btn.go{border-color:var(--green);color:var(--green);font-weight:600}.practice-h .secdone{color:var(--green)}.qn.missed{color:#ff5a6e}.try .cmd{background:var(--code-bg);border:1px solid var(--line);border-radius:8px;margin:10px 0;padding:9px 12px;font-size:13px;overflow-x:auto}.paste{margin-top:12px}.paste summary{cursor:pointer;color:var(--accent2);font-size:13px}.paste textarea{box-sizing:border-box;background:var(--code-bg);width:100%;color:var(--ink);border:1px solid var(--line);border-radius:8px;margin:6px 0 10px;padding:9px 12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}.backlink{color:var(--muted);margin:0 0 4px;font-size:14px;display:inline-block}.coming{background:var(--panel2);border:1px dashed var(--line);color:var(--muted);border-radius:12px;margin:16px 0;padding:18px 20px}.coming b{color:var(--ink)}.adhd{background:var(--panel);border:1px solid var(--line);border-radius:14px;margin:20px 0;padding:20px 22px}.adhd h3{margin-top:0}footer{color:var(--muted);border-top:1px solid var(--line);margin-top:36px;padding-top:22px;font-size:14px}.reset{color:var(--muted);border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:8px;padding:4px 10px;font-family:inherit;font-size:12px}@media (width<=560px){.cardhead{padding:16px}.body{padding:6px 16px 20px}.actcard .head{padding:16px}}:root[data-input=coarse] button,:root[data-input=coarse] a,:root[data-input=coarse] select,:root[data-input=coarse] input,:root[data-input=coarse] summary{touch-action:manipulation}:root[data-input=coarse] .btn{padding:12px 20px;font-size:15px}:root[data-input=coarse] .toc{gap:10px}:root[data-input=coarse] .toc button{padding:12px 18px;font-size:14px}:root[data-input=coarse] button.opt,:root[data-input=coarse] button.ghost{padding:12px 18px;font-size:15px}:root[data-input=coarse] button.run{padding:14px 22px;font-size:15px}:root[data-input=coarse] .pager .btn{padding:12px 18px;font-size:14px}:root[data-input=coarse] .reset{padding:11px 16px;font-size:13px}:root[data-input=coarse] .disclose summary{padding:16px 22px;font-size:14px}:root[data-input=coarse] select,:root[data-input=coarse] input[type=number]{padding:12px 14px;font-size:16px}:root[data-input=coarse] .qnum input{width:160px}:root[data-input=coarse] .qnum button{padding:13px 22px;font-size:15px}:root[data-input=coarse] .qopts{gap:10px}:root[data-input=coarse] .qopts button{padding:14px 16px;font-size:15px}:root[data-input=coarse] .controls{gap:18px 24px}:root[data-input=coarse] .ctl{min-width:170px;font-size:13px}:root[data-input=coarse] .zoo-btns{gap:10px}:root[data-input=coarse] .ctl input[type=range]{appearance:none;background:0 0;height:44px;margin-top:0}:root[data-input=coarse] .ctl input[type=range]::-webkit-slider-runnable-track{background:var(--panel2);border:1px solid var(--line);border-radius:99px;height:10px}:root[data-input=coarse] .ctl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);border:2px solid var(--bg);border-radius:50%;width:30px;height:30px;margin-top:-11px;box-shadow:0 1px 5px #00000059}:root[data-input=coarse] .ctl input[type=range]::-moz-range-track{background:var(--panel2);border:1px solid var(--line);border-radius:99px;height:10px}:root[data-input=coarse] .ctl input[type=range]::-moz-range-thumb{box-sizing:border-box;background:var(--accent);border:2px solid var(--bg);border-radius:50%;width:30px;height:30px;box-shadow:0 1px 5px #00000059}@media (width<=600px){.wrap{padding-left:14px;padding-right:14px}header.hero{border-radius:18px;padding:26px 20px}header.hero:before{width:220px;height:220px}h1{font-size:26px}h2{font-size:20px}h3{font-size:17px}.sub{font-size:15px}.pill{padding:4px 9px;font-size:11px}.topbar .brand{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-size:12px;overflow:hidden}.topbar .right{flex:none}.progwrap{padding:14px}.progrow{flex-direction:column;align-items:flex-start;gap:6px}section.card{margin:18px 0}.cardhead{gap:10px;padding:14px 16px}.cardhead .emoji{font-size:24px}.demo{padding:12px}.readout{font-size:13px}table.tbl{-webkit-overflow-scrolling:touch;white-space:nowrap;display:block;overflow-x:auto}table.tbl th,table.tbl td{padding:7px 9px}.scorebar{padding:11px 13px}}@media (width<=430px){h1{font-size:23px}.sub{font-size:14px}.toc button{font-size:12px}.ctl{min-width:100%}}