*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg: #000000;--fg: #ffffff;--muted: #666666;--border: #333333;--font: "Avenir Next", "Segoe UI", system-ui, sans-serif}html{font-family:var(--font);color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{min-height:100vh;overflow:hidden}#app{display:flex;height:100vh}.content-column{flex:1;overflow-y:auto;scroll-snap-type:y mandatory}.synth-panel{width:340px;height:100vh;border-left:1px solid var(--border);overflow-y:auto;display:flex;flex-direction:column;align-items:center;padding:.75rem 1rem;gap:0}.synth-panel:empty{display:none}.stage{min-height:100vh;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;position:relative;transition:opacity .6s ease}.stage.locked{opacity:.15;pointer-events:none}.stage-content{display:flex;flex-direction:column;align-items:center;gap:1.5rem;width:100%;max-width:540px}.control-group{width:100%;display:flex;flex-direction:column;align-items:center;gap:.5rem;border-bottom:1px solid var(--border);overflow:hidden;max-height:0;opacity:0;padding:0;transition:max-height .5s ease,opacity .5s ease,padding .5s ease}.control-group.revealed{max-height:300px;opacity:1;padding:.6rem 0}.control-group.highlight{animation:highlight-flash 1s ease}@keyframes highlight-flash{0%{border-color:var(--fg)}to{border-color:var(--border)}}.control-group-label{font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);align-self:flex-start}.viz-area{width:100%;display:flex;flex-direction:column;align-items:center;gap:.35rem;margin-top:auto;padding-top:.5rem;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s ease,opacity .5s ease}.viz-area.revealed{max-height:300px;opacity:1}h1{font-size:2.5rem;font-weight:300;letter-spacing:.05em;margin-bottom:1rem}h2{font-size:1.75rem;font-weight:300;letter-spacing:.03em;margin-bottom:.75rem}p{font-size:1rem;line-height:1.6;color:var(--muted);max-width:540px;text-align:center}button{font-family:var(--font);font-size:1rem;color:var(--fg);background:transparent;border:1px solid var(--fg);padding:.75rem 2rem;cursor:pointer;transition:background .2s,color .2s;letter-spacing:.05em}button:hover{background:var(--fg);color:var(--bg)}button:active{background:var(--muted);border-color:var(--muted)}button:focus-visible{outline:2px solid var(--fg);outline-offset:2px}canvas{display:block;width:100%;height:120px;border:1px solid var(--border)}.controls{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;justify-content:center}input[type=range]{-webkit-appearance:none;appearance:none;width:110px;height:2px;background:var(--border);outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;background:var(--fg);border-radius:50%;border:none;cursor:pointer}input[type=range]::-moz-range-thumb{width:14px;height:14px;background:var(--fg);border-radius:50%;border:none;cursor:pointer}.slider-group{display:flex;flex-direction:column;align-items:center;gap:.4rem}.slider-group label{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.slider-group .value{font-size:.7rem;font-variant-numeric:tabular-nums;color:var(--fg)}.waveform-picker{display:flex;gap:.35rem}.waveform-picker button{width:48px;height:34px;padding:0;display:flex;align-items:center;justify-content:center}.waveform-picker button.active{background:var(--fg);color:var(--bg)}.waveform-picker button svg{width:28px;height:18px}.note-button{width:64px;height:64px;border-radius:50%;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;user-select:none;-webkit-user-select:none;touch-action:none}.note-button.pressed{background:var(--fg);color:var(--bg)}.next-button{margin-top:2rem;font-size:.875rem;text-transform:uppercase;letter-spacing:.1em}.viz-toggle{display:flex;gap:.25rem}.viz-toggle button{font-size:.65rem;padding:.3rem .6rem;text-transform:uppercase;letter-spacing:.08em}.viz-toggle button.active{background:var(--fg);color:var(--bg)}.knob-group{display:flex;gap:.5rem}.knob-group input[type=range]{width:50px}canvas.envelope-canvas{height:60px}@media(max-width:768px){#app{flex-direction:column-reverse}.synth-panel{width:100%;height:auto;max-height:45vh;border-left:none;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}.content-column{flex:1;min-height:0}.stage{min-height:55vh}h1{font-size:1.75rem}h2{font-size:1.25rem}canvas{height:100px}.note-button{width:64px;height:64px}.knob-group{flex-wrap:wrap;justify-content:center}}