:root{color-scheme:dark;--bg:#090b16;--panel:#10172a;--surface:#151d33;--border:rgba(255,255,255,.12);--text:#f7f5ff;--muted:#9ca8bf;--accent:#72d7ff;font-family:Inter,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;min-width:300px;color:var(--text);background:radial-gradient(circle at 85% 5%,rgba(114,215,255,.12),transparent 30rem),var(--bg)}button,input,select{font:inherit;border:1px solid var(--border);border-radius:.6rem;color:var(--text);background:rgba(255,255,255,.055)}button{padding:.55rem .75rem;cursor:pointer;font-weight:750}button:hover{background:rgba(255,255,255,.11)}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #897cff;outline-offset:2px}h1,h2,h3,p{margin:0}header{display:flex;min-height:5rem;padding:.8rem 1.2rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);background:rgba(9,11,22,.88)}header p{color:var(--accent);font-size:.65rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase}main{display:grid;min-height:calc(100vh - 5rem);grid-template-columns:23rem minmax(0,1fr)}#controls{max-height:calc(100vh - 5rem);padding:1rem;overflow:auto;border-right:1px solid var(--border);background:var(--panel)}.panel-head,.actions,footer{display:flex;align-items:center;justify-content:space-between;gap:.6rem}.grid{display:grid;margin-top:.8rem;grid-template-columns:1fr 1fr;gap:.65rem}.grid label{display:grid;gap:.35rem;color:var(--muted);font-size:.68rem}.grid label:first-child{grid-column:1/-1}input,select{width:100%;min-height:2.35rem;padding:.4rem .5rem}.actions{margin-top:.8rem}.actions button{flex:1}.primary{color:#07141a;background:linear-gradient(135deg,var(--accent),#b08cff)}#controls section{margin-top:.85rem;padding:.8rem;border:1px solid var(--border);border-radius:.8rem;background:rgba(255,255,255,.025)}.checks{display:grid;margin-top:.6rem;grid-template-columns:1fr 1fr;gap:.45rem}.checks label{display:flex;gap:.35rem;color:var(--muted);font-size:.7rem}.checks input,.harmonic input[type=checkbox]{width:auto;min-height:auto}.harmonics-section small{color:var(--muted)}#harmonics{display:grid;max-height:38vh;margin-top:.55rem;gap:.45rem;overflow:auto}.harmonic{display:grid;padding:.5rem;grid-template-columns:1.1rem 2.5rem 1fr 1fr 2.1rem;align-items:center;gap:.35rem;border:1px solid var(--border);border-radius:.55rem}.harmonic span{color:var(--muted);font-size:.63rem}.harmonic input{min-width:0;min-height:2rem;padding:.25rem}.harmonic input[type=color]{height:2rem;padding:.1rem}.workspace{display:grid;min-width:0;padding:1rem;grid-template-rows:minmax(20rem,1fr) auto;gap:.7rem}.canvas-wrap{min-height:20rem;overflow:hidden;border:1px solid var(--border);border-radius:1rem;background:#0b0f1d}canvas{display:block;width:100%;height:100%}footer{color:var(--muted);font-size:.72rem}.mobile{display:none}.backdrop{position:fixed;z-index:30;inset:0;background:rgba(0,0,0,.56)}.grid small{color:var(--accent);font-size:.6rem}.plot-legend,.playback-info{display:flex;align-items:center;gap:.75rem}.plot-legend{min-width:0;flex-wrap:wrap}.plot-legend span{white-space:nowrap}.plot-legend span:before{display:inline-block;width:.58rem;height:.58rem;margin-right:.3rem;border-radius:50%;content:""}.epicycles-key:before{background:var(--accent)}.sum-key:before{background:#fff}.components-key:before{background:#b08cff}.spectrum-key:before{background:#ffb866}.playback-info{margin-left:auto;white-space:nowrap}@media(min-width:48.0625rem){body{height:100vh;overflow:hidden}header{height:4.25rem;min-height:4.25rem}main{height:calc(100vh - 4.25rem);min-height:0}#controls{height:100%;max-height:100%;padding:.75rem}.workspace{height:100%;min-height:0;padding:.75rem;grid-template-rows:minmax(0,1fr) auto}.canvas-wrap{min-height:0}}@media(max-width:48rem){.mobile{display:block}main{display:block}#controls{position:fixed;z-index:40;top:0;bottom:0;left:0;width:min(92vw,23rem);max-height:none;transform:translateX(-105%);transition:transform .2s}#controls.open{transform:none}.workspace{min-height:calc(100vh - 5rem)}.canvas-wrap{min-height:72vh}}@media(max-width:25rem){.grid{grid-template-columns:1fr}.grid label:first-child{grid-column:auto}}