@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Noto+Sans+TC:wght@400;500;600;700&display=swap');
:root{font-family:'DM Sans','Noto Sans TC',sans-serif;color:#e2e9ed;background:#0c1217;--mint:#6ad6bf;--amber:#eab879;--muted:#8a9aa7;--border:#28343d;--panel:#141d25;color-scheme:dark}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--mint);outline-offset:3px}a{color:inherit;text-decoration:none}.topbar{height:73px;padding:0 32px;display:flex;align-items:center;gap:18px;background:#11191f;border-bottom:1px solid #26313a}.logo{display:flex;align-items:center;gap:11px;font-size:23px;letter-spacing:-1px;font-weight:700}.logo>span:last-child span,footer>span{color:#82d9c1}.logo-icon{width:38px;height:38px;display:grid;place-items:center;color:#83e6cb;background:#193e35;border:1px solid #315b4f;border-radius:9px;font-size:23px}.brand-sub{border-left:1px solid #36414a;padding-left:18px;color:#7e909c;font-size:10px;letter-spacing:1.3px}.topbar nav{margin-left:auto;color:#a0b1ba;font-size:12px}.topbar nav a:hover{color:var(--mint)}main{max-width:1440px;padding:0 32px 60px;margin:auto}.breadcrumb{font-size:11px;color:#82939e;margin:26px 0 28px}.breadcrumb a:hover{color:var(--mint)}.breadcrumb span{color:#52636d;margin:0 7px}.breadcrumb span:last-child{color:#bdcbd2;margin:0}.heading{display:flex;justify-content:space-between;align-items:center;gap:15px}.eyebrow{color:#6ad6bf;font-size:10px;font-family:'IBM Plex Mono',monospace;letter-spacing:1.4px}.eyebrow>span:first-child{display:inline-block;width:6px;height:6px;background:#6ad6bf;border-radius:50%;vertical-align:middle;margin-right:6px}.number{color:#637880;margin-left:10px}h1{font-size:29px;letter-spacing:-.7px;margin:10px 0 8px}h2,h3,p{margin:0}.heading p{color:#8a9aa7;font-size:13px;line-height:1.7}.heading-badge{border:1px solid #2e4643;color:#82c9b6;border-radius:7px;padding:10px 13px;font-size:10px;letter-spacing:.7px;white-space:nowrap}.tabs{border-bottom:1px solid #29353e;display:flex;gap:28px;margin:28px 0 22px;font-size:12px}.tabs>*{padding:0 2px 15px;color:#8799a5}.tabs .active{color:#87dcc7;border-bottom:2px solid #6ad6bf}.layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr);gap:18px;align-items:start}.stack{display:grid;gap:18px}.panel{background:var(--panel);border:1px solid var(--border);border-radius:9px;overflow:hidden}.panel-head{display:flex;align-items:center;justify-content:space-between;padding:17px 19px;border-bottom:1px solid #29353e}.panel-head h2{font-size:14px;font-weight:600}.panel-head h2 span{color:#79d4bd;margin-right:8px}.eyebrow-small,.tag{font:10px 'IBM Plex Mono',monospace;letter-spacing:.6px;color:#82949e}.tag{padding:6px 8px;border-radius:5px;background:#1d3431;color:#7cceb5}.panel-body{padding:19px}.workbench{background:#10181e;padding:16px}.canvas-wrap{position:relative;border:1px solid #2c3942;border-radius:7px;background:#0d151b;overflow:hidden}.canvas-wrap canvas{display:block;width:100%;height:305px}.canvas-overlay{position:absolute;top:14px;left:16px;right:16px;display:flex;justify-content:space-between;pointer-events:none}.canvas-label{color:#78909b;font:10px 'IBM Plex Mono',monospace;letter-spacing:.6px}.legend{display:flex;gap:13px;font-size:11px;color:#9caeb8;align-items:center}.legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}.legend .mint{background:#6ad6bf}.legend .amber{background:#eab879}.legend .blue{background:#74b5db}.workbench-note{font-size:11px;color:#82949f;margin:14px 2px 0;line-height:1.7}.actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:15px}.btn{border:1px solid #38504c;background:#213934;color:#a9e6d3;border-radius:6px;padding:10px 15px;font-size:12px;font-weight:600}.btn.primary{background:#79d6bc;color:#10241d;border-color:#79d6bc}.btn:hover{filter:brightness(1.12)}.btn:disabled{opacity:.45;cursor:not-allowed}.control{margin-bottom:19px}.control:last-child{margin-bottom:0}.control label{display:flex;justify-content:space-between;gap:8px;color:#c7d2d8;font-size:12px;margin-bottom:9px}.control label output{font:12px 'IBM Plex Mono',monospace;color:#8ee0c8}.control input[type=range]{width:100%;accent-color:#75d3b9}.control select{width:100%;border:1px solid #34454f;border-radius:6px;background:#101920;color:#dce6e9;padding:9px 10px}.input-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}.control input[type=number]{width:100%;border:1px solid #34454f;border-radius:6px;background:#101920;color:#dce6e9;padding:9px}.control .hint{display:block;color:#788c97;font-size:10px;margin-top:6px;line-height:1.6}.section-caption{font:10px 'IBM Plex Mono',monospace;letter-spacing:1px;color:#748b95;margin-bottom:15px}.metric{display:flex;justify-content:space-between;gap:15px;align-items:center;border-bottom:1px solid #29353e;padding:12px 0;font-size:11px;color:#aabac3}.metric:first-child{padding-top:0}.metric:last-child{border-bottom:0;padding-bottom:0}.metric strong{font:600 13px 'IBM Plex Mono',monospace;color:#e2e9ed;text-align:right}.metric strong.mint{color:#7ddac1}.metric strong.amber{color:#eab879}.summary{background:#1a2c30;border:1px solid #294b48;border-radius:7px;padding:15px;margin-top:17px}.summary small{font-size:10px;color:#8db4a8}.summary strong{display:block;color:#8de1c8;font-size:19px;margin-top:7px}.summary p{font-size:11px;line-height:1.7;color:#9db9b1;margin-top:7px}.chart-wrap canvas{height:205px}.theory{margin-top:18px}.theory-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.theory h3{font-size:12px;color:#cddbdc;margin-bottom:8px}.theory p{font-size:11px;color:#8fa1aa;line-height:1.8}.formula{font:12px 'IBM Plex Mono',monospace;color:#83d9c1;margin-top:10px;line-height:1.7}.warning{font-size:11px;color:#eab879;margin:10px 0 0;line-height:1.6}.warning:empty{display:none}footer{border-top:1px solid #26313a;padding:22px 32px;color:#d3e0df;font-size:14px;font-weight:700;max-width:1440px;margin:auto}footer small{font-size:9px;font-weight:400;letter-spacing:1px;color:#738893}footer a{float:right;font-size:11px;font-weight:400;color:#8ca59e}@media(max-width:850px){.layout{grid-template-columns:1fr}.theory-grid{grid-template-columns:1fr 1fr}.heading-badge{display:none}}@media(max-width:550px){.topbar{padding:0 17px;height:62px}.brand-sub{display:none}main{padding:0 16px 40px}.breadcrumb{margin:20px 0}.heading h1{font-size:24px}.tabs{gap:18px}.panel-head,.panel-body{padding:15px}.canvas-wrap canvas{height:250px}.chart-wrap canvas{height:180px}.theory-grid{grid-template-columns:1fr}.input-pair{grid-template-columns:1fr;gap:0}footer{padding:18px 16px}footer small{display:none}}
.language-switch{display:flex;gap:2px;border:1px solid #31433f;border-radius:7px;padding:3px}.language-switch button{border:0;background:transparent;color:#8fa9a0;border-radius:4px;padding:6px 8px;font-size:11px}.language-switch button[aria-pressed=true]{background:#27463d;color:#a9ead3;font-weight:700}@media(max-width:550px){.topbar{gap:10px}.topbar nav{font-size:11px}}

.spark-icon{display:inline-block;width:1em;height:1em;flex:none;vertical-align:-.12em}.heading-badge .spark-icon{width:11px;height:11px}.playback-control{display:inline-flex;align-items:center;gap:8px;color:#9eb2bc;font-size:11px;margin-left:auto}.playback-control select{border:1px solid #38504c;background:#172a29;color:#bfeadd;border-radius:6px;padding:9px 10px;min-width:70px}.playback-control select:focus-visible{outline:2px solid var(--mint);outline-offset:3px}@media(max-width:480px){.playback-control{margin-left:0}}