:root{--navy:#14365c;--orange:#f08a00;--teal:#0ea5a4;--bg:#f6f9fc;--surface:#fff;--muted:#3f526a;--line:#c9d5e3;--navy-soft:#dbe5f0;--font:"Segoe UI", system-ui, sans-serif;--fs-body:16px;--fs-title:22px;--fs-axis:14px;--fs-tick:13px;--gap:12px;--ctl:40px;--dot:18px}[data-mode=ders]{--fs-body:clamp(22px, 1.8vw, 34px);--fs-title:clamp(32px, 2.6vw, 50px);--fs-axis:clamp(18px, 1.45vw, 28px);--fs-tick:clamp(18px, 1.4vw, 26px);--gap:10px;--ctl:48px;--dot:26px}[data-mode=lab]{--fs-body:16px;--fs-title:22px;--fs-axis:14px;--fs-tick:13px}*,:before,:after{box-sizing:border-box}html,body{background:var(--bg);margin:0}[hidden]{display:none!important}.concept-page{font-family:var(--font);font-size:var(--fs-body);color:var(--navy);background:var(--bg);grid-template-rows:auto minmax(0,1fr) auto;height:100dvh;line-height:1.35;display:grid;overflow:hidden}.concept-page button,.concept-page select,.concept-page input{font:inherit;color:inherit}.concept-page :focus-visible{outline:3px solid var(--navy);outline-offset:2px}.concept-page button{cursor:pointer;min-height:var(--ctl);border:2px solid var(--navy);background:var(--surface);border-radius:8px;padding:0 .75em}.concept-page button:where(:hover:not(:disabled)){background:var(--navy-soft)}.concept-page button:disabled{cursor:default;opacity:.4}.top-bar{background:var(--surface);border-bottom:1px solid var(--line);align-items:center;gap:16px;padding:6px 16px;display:flex}.top-bar .home{color:var(--navy);white-space:nowrap;font-weight:600;text-decoration:none}.top-bar .home:hover{text-decoration:underline}.top-bar .heading{flex-wrap:wrap;flex:1;align-items:baseline;column-gap:.75em;min-width:0;display:flex}.top-bar .title{font-size:inherit;margin:0;font-weight:700}.top-bar .chapter{color:var(--muted)}.mode-toggle{flex-shrink:0;display:flex}.mode-toggle button{white-space:nowrap;border-radius:0}.mode-toggle button:first-child{border-radius:8px 0 0 8px}.mode-toggle button:last-child{border-left-width:0;border-radius:0 8px 8px 0}.mode-toggle button[aria-pressed=true]{background:var(--navy);color:#fff}.workspace{min-height:0;display:grid;position:relative}.stage{background:var(--surface);min-width:0;min-height:0;position:relative;overflow:hidden}.concept-page .stage:focus{outline:none}.stage>canvas,.stage>svg{display:block;position:absolute;top:0;left:0}.params,.explain{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 16px}.step-title{font-size:var(--fs-title);margin:0;font-weight:700;line-height:1.2}.step-text{margin:.5em 0 0}.explain-extra:not(:empty){margin-top:.75em}.player-bar{background:var(--surface);border-top:1px solid var(--line);align-items:center;gap:16px;padding:8px 16px;display:flex}.player-bar .transport{gap:8px;display:flex}.player-bar .transport button{min-width:calc(var(--ctl) * 1.2);font-variant-emoji:text}.player-bar .play{background:var(--navy);color:#fff}.player-bar .steps{flex-wrap:wrap;flex:1;align-items:center;gap:6px;min-width:0;display:flex}.concept-page .step-dot{min-height:0;width:var(--dot);height:var(--dot);background:var(--surface);border-radius:50%;padding:0}.concept-page .step-dot.done{background:var(--navy-soft)}.concept-page .step-dot[aria-current=step]{background:var(--navy);transform:scale(1.25)}.step-count{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600}.help{z-index:100;cursor:pointer;background:#14365c8c;place-items:center;display:grid;position:fixed;inset:0}.help-card{background:var(--surface);border-radius:12px;max-width:min(90vw,760px);max-height:90vh;padding:24px 32px;overflow:auto}.help h2{font-size:var(--fs-title);margin:0 0 .5em}.help ul{margin:0;padding:0;list-style:none}.help li{padding:.2em 0}.help kbd{font:inherit;font-weight:700}.help-hint{color:var(--muted);margin:1em 0 0}[data-mode=ders] .workspace{grid-template-rows:minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr) auto}[data-mode=ders] .side{display:contents}[data-mode=ders] .stage{grid-area:1/1}[data-mode=ders] .explain{border:0;border-top:1px solid var(--line);border-radius:0;flex-wrap:wrap;grid-area:2/1/auto/-1;align-items:baseline;column-gap:.75em;padding:6px 20px;display:flex}[data-mode=ders] .step-term{color:var(--muted);margin:0}[data-mode=ders] .params{border:0;border-left:1px solid var(--line);border-radius:0;grid-area:1/2;width:min(440px,45vw);min-height:0;overflow:auto}[data-mode=ders] .params-toggle[aria-expanded=true]{background:var(--navy);color:#fff}[data-mode=ders] .top-bar .home{font-weight:400}[data-mode=lab] .workspace{gap:var(--gap);padding:var(--gap);grid-template-columns:minmax(0,3fr) minmax(300px,2fr)}[data-mode=lab] .stage{border:1px solid var(--line);border-radius:10px}[data-mode=lab] .side{gap:var(--gap);flex-direction:column;min-height:0;display:flex;overflow:auto}@media (width<=900px){[data-mode=lab].concept-page{height:auto;min-height:100vh;overflow:visible}[data-mode=lab] .workspace{grid-template-columns:minmax(0,1fr)}[data-mode=lab] .stage{height:clamp(320px,60vh,640px)}[data-mode=lab] .side{overflow:visible}[data-mode=lab] .player-bar{z-index:5;flex-wrap:wrap;position:sticky;bottom:0}}.axis-title{font-size:var(--fs-axis);fill:var(--navy);font-weight:600}.tick,.tick text{font-size:var(--fs-tick);fill:var(--navy)}.prediction{font-size:var(--fs-title);font-weight:700}