:root{color-scheme:dark;--bg:#080b12;--surface:#111622e0;--surface-strong:#111725;--surface-soft:#ffffff09;--line:#ffffff17;--line-strong:#ffffff29;--text:#f6f8fb;--muted:#929daf;--muted-strong:#bac3d1;--cyan:#5ee7f2;--cyan-soft:#5ee7f224;--lime:#b9f56a;--violet:#a89cff;--positive:#ff8d82;--negative:#7ea5ff;--danger:#ff6b7d;--radius-lg:24px;--radius-md:16px;--radius-sm:11px;--shadow:0 28px 80px #00000061;--font:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--mono:"SFMono-Regular", Consolas, "Liberation Mono", monospace}*{box-sizing:border-box;margin:0;padding:0}html{background:var(--bg);min-width:320px}body{background:radial-gradient(circle at 15% 10%, #5b48be1f, transparent 32rem), radial-gradient(circle at 85% 35%, #00c5d314, transparent 30rem), var(--bg);max-width:100vw;min-height:100vh;color:var(--text);font-family:var(--font);letter-spacing:-.01em;overflow-x:hidden}button,select,input{font:inherit}button,select,input[type=range]{-webkit-tap-highlight-color:transparent}button:focus-visible,select:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}[hidden]{display:none!important}.ambient{z-index:-1;filter:blur(90px);opacity:.09;pointer-events:none;border-radius:50%;width:30rem;height:30rem;position:fixed}.ambient-one{background:var(--cyan);top:-16rem;right:10%}.ambient-two{background:var(--violet);bottom:-18rem;left:-8rem}.app-header{border-bottom:1px solid var(--line);backdrop-filter:blur(22px);z-index:20;background:#080b12c2;justify-content:space-between;align-items:center;gap:2rem;min-height:88px;padding:1.1rem clamp(1rem,3vw,3rem);display:flex;position:sticky;top:0}.brand-group,.brand-line,.tabs,.status-cluster,.viewport-footer,.transport,.label-row,.section-heading,footer{align-items:center;display:flex}.brand-group{flex:none;gap:.85rem}.brand-mark{background:linear-gradient(145deg,#5ee7f229,#a89cff17);border:1px solid #5ee7f25c;border-radius:13px;place-items:center;width:42px;height:42px;display:grid;box-shadow:inset 0 1px #ffffff1f,0 8px 24px #00000038}.brand-mark span,.brand-mark span:before,.brand-mark span:after{background:var(--cyan);content:"";border-radius:999px;width:23px;height:2px;display:block}.brand-mark span{transform:rotate(-10deg);box-shadow:0 0 14px #5ee7f2cc}.brand-mark span:before{transform:translateY(-6px)scaleX(.62)}.brand-mark span:after{transform:translateY(4px)scaleX(.78)}.brand-line{gap:.65rem}h1{letter-spacing:-.035em;font-size:1.18rem;font-weight:730}.brand-group p{color:var(--muted);margin-top:.15rem;font-size:.72rem}.build-badge{border:1px solid var(--line);color:var(--muted-strong);font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:.2rem .42rem;font-size:.6rem}.tabs{border:1px solid var(--line);scrollbar-width:none;background:#ffffff06;border-radius:14px;gap:.3rem;padding:.28rem}.tabs::-webkit-scrollbar{display:none}.tab-btn{min-height:39px;color:var(--muted);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:10px;align-items:center;gap:.48rem;padding:.55rem .78rem;font-size:.78rem;font-weight:610;transition:background .16s,color .16s,border-color .16s,transform .16s;display:flex}.tab-btn:hover{color:var(--text);background:#ffffff0d}.tab-btn:active{transform:translateY(1px)}.tab-btn.active{background:var(--cyan-soft);color:var(--cyan);border-color:#5ee7f233}.tab-index{color:inherit;font-family:var(--mono);opacity:.65;font-size:.58rem}.app-container{grid-template-columns:minmax(0,1fr) minmax(320px,370px);gap:clamp(.9rem,1.5vw,1.5rem);width:min(1680px,100%);min-height:calc(100vh - 145px);margin:0 auto;padding:clamp(.9rem,2vw,1.75rem) clamp(.9rem,2.7vw,2.75rem);display:grid}.app-container,.viewport-panel,.canvas-shell,.viewport-footer,.controls-panel,.interaction-hint{min-width:0;max-width:100%}.viewport-panel,.controls-panel{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow);backdrop-filter:blur(24px)}.viewport-panel{flex-direction:column;min-width:0;padding:clamp(1rem,2vw,1.7rem);display:flex;overflow:hidden}.viewport-header{justify-content:space-between;align-items:flex-start;gap:1rem;min-height:68px;margin-bottom:1.1rem;display:flex}.eyebrow{color:var(--cyan);font-family:var(--mono);letter-spacing:.13em;text-transform:uppercase;margin-bottom:.35rem;font-size:.62rem;font-weight:700}.viewport-header h2,.controls-heading h2{letter-spacing:-.035em;font-size:clamp(1.2rem,2vw,1.65rem);font-weight:680}.viewport-header>div>p:last-child,.controls-heading>p:last-child{max-width:48rem;color:var(--muted);margin-top:.38rem;font-size:.78rem;line-height:1.5}.status-cluster{flex-wrap:wrap;justify-content:flex-end;gap:.38rem}.status-pill{border:1px solid var(--line);min-height:28px;color:var(--muted-strong);white-space:nowrap;background:#0000002e;border-radius:999px;align-items:center;gap:.38rem;padding:.32rem .58rem;font-size:.66rem;display:inline-flex}.status-pill.mono{font-family:var(--mono)}.status-dot{background:var(--lime);border-radius:50%;width:6px;height:6px;box-shadow:0 0 10px #b9f56ad9}body.is-paused .status-dot{background:var(--violet);box-shadow:0 0 10px #a89cffbf}.canvas-shell{background:linear-gradient(#ffffff05 1px,#0000 1px) 0 0/24px 24px,linear-gradient(90deg,#ffffff05 1px,#0000 1px) 0 0/24px 24px,radial-gradient(circle,#1c283cc2,#070a10 72%);border:1px solid #ffffff13;border-radius:18px;flex:1;place-items:center;width:100%;min-height:360px;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 0 60px #0000006b}.canvas-shell:after{border-radius:inherit;content:"";pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 1px #ffffff0e}#sim-canvas{width:min(94%,960px);height:auto;max-height:min(66vh,680px);image-rendering:pixelated;cursor:crosshair;touch-action:none;background:#000;border:1px solid #5ee7f21f;border-radius:10px;display:block;box-shadow:0 24px 58px #0000008a,0 0 0 1px #000000b3}.paused-overlay,.loading-overlay{z-index:4;backdrop-filter:blur(4px);pointer-events:none;background:#06090f9e;place-content:center;justify-items:center;gap:.35rem;display:grid;position:absolute;inset:0}.paused-overlay span{font-size:1.25rem;font-weight:680}.paused-overlay small,.loading-overlay p{color:var(--muted);font-size:.72rem}.loading-overlay{transition:opacity .22s,visibility .22s}body:not(.is-loading) .loading-overlay{opacity:0;visibility:hidden}.loader{border:2px solid #ffffff21;border-top-color:var(--cyan);border-radius:50%;width:26px;height:26px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.viewport-footer{justify-content:space-between;gap:1rem;padding-top:1rem}.interaction-hint{overflow-wrap:anywhere;max-width:48rem;color:var(--muted);font-size:.74rem;line-height:1.5}.interaction-hint:before{content:"↳";color:var(--cyan);margin-right:.45rem}.transport{gap:.42rem}.transport-btn,.small-btn{border:1px solid var(--line-strong);min-height:36px;color:var(--muted-strong);cursor:pointer;background:#ffffff09;border-radius:10px;font-size:.72rem;font-weight:620;transition:transform .15s,border-color .15s,background .15s,color .15s}.transport-btn{min-width:68px;padding:.48rem .72rem}.transport-btn:hover,.small-btn:hover{color:var(--text);background:#5ee7f214;border-color:#5ee7f261}.transport-btn:active,.small-btn:active{transform:translateY(1px)}.transport-btn.primary{background:var(--cyan-soft);color:var(--cyan);border-color:#5ee7f242;justify-content:center;align-items:center;gap:.36rem;display:inline-flex}.controls-panel{flex-direction:column;min-height:0;display:flex;overflow:hidden}.controls-heading{border-bottom:1px solid var(--line);padding:1.35rem 1.35rem 1rem}.controls-heading h2{font-size:1.25rem}.controls-scroll{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ffffff29 transparent;gap:.7rem;padding:.8rem;display:grid;overflow-y:auto}.control-card{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-soft);gap:.9rem;padding:1rem;display:grid}.section-heading{align-items:flex-start;gap:.65rem}.section-number{width:25px;height:25px;color:var(--cyan);font-family:var(--mono);background:#5ee7f20f;border:1px solid #5ee7f22e;border-radius:8px;flex:none;place-items:center;font-size:.58rem;display:grid}.section-heading h3{font-size:.83rem;font-weight:670}.section-heading p{color:var(--muted);margin-top:.16rem;font-size:.68rem;line-height:1.4}.control-group{gap:.47rem;display:grid}.label-row{justify-content:space-between;gap:1rem}.control-group label,.inline-controls label{color:var(--muted-strong);font-size:.72rem;font-weight:580}output{min-width:3.25rem;color:var(--cyan);font-family:var(--mono);text-align:right;background:#0000003d;border-radius:6px;padding:.17rem .34rem;font-size:.64rem}select,input[type=number]{border:1px solid var(--line-strong);width:100%;min-height:40px;color:var(--text);background:#0b101b;border-radius:10px;font-size:.76rem}select{cursor:pointer;padding:.58rem 2rem .58rem .7rem}input[type=number]{padding:.5rem .62rem}input[type=range]{appearance:none;cursor:pointer;background:0 0;width:100%;height:18px}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg,#5ee7f28c,#a89cff73);border-radius:999px;height:4px}input[type=range]::-moz-range-track{background:linear-gradient(90deg,#5ee7f28c,#a89cff73);border-radius:999px;height:4px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--cyan);border:3px solid #101725;border-radius:50%;width:15px;height:15px;margin-top:-5.5px;box-shadow:0 0 0 1px #5ee7f28c,0 0 12px #5ee7f259}input[type=range]::-moz-range-thumb{background:var(--cyan);border:3px solid #101725;border-radius:50%;width:11px;height:11px;box-shadow:0 0 0 1px #5ee7f28c,0 0 12px #5ee7f259}.inline-controls{grid-template-columns:minmax(0,1fr) 4rem minmax(88px,auto);align-items:center;gap:.5rem;display:grid}.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem;display:grid}.small-btn{min-width:0;padding:.5rem .55rem;line-height:1.2}.small-btn.wide,.tool-grid .wide{grid-column:1/-1}.small-btn.active,.small-btn[aria-pressed=true]{background:var(--cyan-soft);color:var(--cyan);border-color:#5ee7f25c;box-shadow:inset 0 0 0 1px #5ee7f20f}.positive-tool{color:#ffc0b8}.negative-tool{color:#aac2ff}.danger-tool{color:#ff9cab}.control-hint,.fourier-legend{color:var(--muted);background:#5ee7f20b;border-left:2px solid #5ee7f259;border-radius:0 8px 8px 0;padding:.65rem .7rem;font-size:.68rem;line-height:1.48}.readout{color:var(--cyan);font-family:var(--mono);background:#0003;border:1px solid #5ee7f21f;border-radius:9px;padding:.7rem;font-size:.64rem;line-height:1.45}.target-key{color:var(--text)}.approximation-key{color:var(--cyan)}.legend-divider{color:var(--line-strong);margin:0 .45rem}.harmonic-controls{scrollbar-width:thin;gap:.32rem;max-height:16rem;padding:.2rem .35rem .2rem 0;display:grid;overflow-y:auto}.harmonic-row{color:var(--muted);font-family:var(--mono);border-radius:8px;grid-template-rows:auto auto;grid-template-columns:1.8rem minmax(60px,1fr) 3rem;align-items:center;gap:.2rem .42rem;padding:.35rem .4rem;font-size:.61rem;display:grid}.harmonic-row:nth-child(odd){background:#ffffff05}.harmonic-name{color:var(--muted-strong);grid-row:1/span 2}.harmonic-value{text-align:right}.shortcut-hint{border-top:1px solid var(--line);color:var(--muted);text-align:center;padding:.72rem 1rem;font-size:.62rem}kbd{border:1px solid var(--line-strong);color:var(--muted-strong);font-family:var(--mono);background:#ffffff0a;border-bottom-width:2px;border-radius:5px;padding:.12rem .34rem;font-size:.58rem}footer{border-top:1px solid var(--line);min-height:54px;color:var(--muted);justify-content:space-between;gap:1rem;padding:.85rem clamp(1rem,3vw,3rem);font-size:.68rem}footer a{color:var(--cyan);text-decoration:none}footer a:hover{text-decoration:underline}@media (width>=1101px){.controls-panel{max-height:calc(100vh - 122px);position:sticky;top:105px}}@media (width<=1100px){.app-header{flex-direction:column;align-items:flex-start;gap:.8rem;position:static}.tabs{width:100%;max-width:100%;overflow-x:auto}.tab-btn{flex:1 0 auto;justify-content:center}.app-container{grid-template-columns:minmax(0,1fr)}.controls-panel{overflow:visible}.controls-scroll{grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}.context-controls{grid-column:1/-1}}@media (width<=700px){.brand-group p,.build-badge,.tab-index,.shortcut-hint{display:none}.app-header{padding:.85rem}.tab-btn{padding-inline:.58rem;font-size:.7rem}.app-container{padding:.65rem}.viewport-panel,.controls-panel{border-radius:18px}.viewport-panel{padding:.82rem}.viewport-header{flex-direction:column;min-height:0}.viewport-header>div>p:last-child{display:none}.status-cluster{justify-content:flex-start}.canvas-shell{contain:inline-size;border-radius:14px;min-height:270px}#sim-canvas{width:calc(100% - 1rem);max-width:none;max-height:56vh}.viewport-footer{flex-direction:column;align-items:stretch}.transport{width:100%}.transport-btn{flex:1}.controls-scroll{grid-template-columns:minmax(0,1fr)}.context-controls{grid-column:auto}footer{flex-direction:column;align-items:flex-start}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}