:root{color-scheme:light dark;--bg:#f4f6fa;--card:#fff;--fg:#182539;--muted:#455570;--curve:#1556b0;--in:#7d5100;--out:#c12735;--ext:#733ca2;--chord:#08734a;--line:#69758a}
@media(prefers-color-scheme:dark){:root{--bg:#111925;--card:#1b2839;--fg:#eef3ff;--muted:#c0cce0;--curve:#8cbbff;--in:#ffce64;--out:#ff9b9f;--ext:#d8abff;--chord:#77e3ad;--line:#a4b2c8}}
:root[data-theme=light]{color-scheme:light;--bg:#f4f6fa;--card:#fff;--fg:#182539;--muted:#455570;--curve:#1556b0;--in:#7d5100;--out:#c12735;--ext:#733ca2;--chord:#08734a;--line:#69758a}
:root[data-theme=dark]{color-scheme:dark;--bg:#111925;--card:#1b2839;--fg:#eef3ff;--muted:#c0cce0;--curve:#8cbbff;--in:#ffce64;--out:#ff9b9f;--ext:#d8abff;--chord:#77e3ad;--line:#a4b2c8}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.7 system-ui,sans-serif}main{max-width:1040px;margin:auto;padding:20px}h1{font-size:clamp(1.6rem,4vw,2.3rem)}h2{font-size:1.25rem}section,figure,details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;margin:18px 0}.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}label{display:flex;flex-direction:column;gap:6px}input,select,button{font:inherit;max-width:100%;min-height:44px}input[type=range]{width:100%}button{padding:6px 14px;cursor:pointer;background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:7px}output,figcaption,footer,header p{color:var(--muted)}svg{display:block;width:100%;height:auto;background:var(--card)}svg text{fill:var(--fg);font:16px system-ui}svg .curve{stroke:var(--curve)}svg .incoming{stroke:var(--in)}svg .outgoing{stroke:var(--out)}svg .extension{stroke:var(--ext);stroke-dasharray:8 6}svg .chord{stroke:var(--chord)}svg .guide{stroke:var(--line);stroke-dasharray:3 6}svg .tangent{stroke:var(--fg)}svg .normal{stroke:var(--line)}#readout{overflow-wrap:anywhere}summary{cursor:pointer;font-weight:600}form{display:flex;flex-wrap:wrap;gap:14px;align-items:end}p{overflow-wrap:anywhere}@media(max-width:450px){svg text{font-size:24px}main{padding:12px}section,figure,details{padding:12px}}