*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,sans-serif;background:linear-gradient(135deg,#1e3c72,#2a5298);color:#fff;height:100vh;overflow:hidden;display:flex;justify-content:center}.app-layout{display:grid;grid-template-areas:"top-bar top-bar top-bar" "side-left main side-right";grid-template-columns:minmax(140px,180px) 1fr minmax(140px,180px);grid-template-rows:auto 1fr;height:100vh;width:100%;max-width:1200px;padding:10px;gap:10px;box-shadow:0 0 50px #0000004d}.top-bar{grid-area:top-bar;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;background:#ffffff0d;padding:10px 15px;border-radius:12px;backdrop-filter:blur(10px);gap:12px}.top-bar h1{display:block;width:100%;text-align:center;font-size:1.2em;text-shadow:2px 2px 4px rgba(0,0,0,.3);margin:0 0 5px;opacity:.8}.top-bar-controls{display:flex;flex-direction:row;justify-content:center;align-items:stretch;gap:20px;width:100%;flex-wrap:nowrap}.vol-group{justify-content:space-between}.tone-shaping-group{display:flex;align-items:stretch;flex-wrap:wrap;justify-content:center;gap:12px}.sidebar-left{grid-area:side-left}.sidebar-right{grid-area:side-right}.main-content{grid-area:main;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;min-width:0}.sidebar{background:#ffffff0d;padding:15px;border-radius:12px;backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:20px;overflow-y:auto;min-width:0;align-self:start}.sidebar .control-group{width:100%}.control-group{display:flex;flex-direction:column;gap:8px;width:auto;align-items:center;justify-content:space-between}.control-group.horizontal{flex-direction:row;align-items:center;width:auto;gap:8px}.control-group label{font-size:.65em;text-transform:uppercase;letter-spacing:1px;opacity:.7;white-space:nowrap}.control-divider{height:1px;background:#ffffff1a;margin:10px 0;width:100%}.control-divider.vertical{width:1px;height:auto;align-self:stretch;margin:0 5px}.dial-container{display:flex;flex-direction:column;align-items:center;gap:4px;user-select:none}.dial{width:32px;height:32px;background:#222;border:2px solid rgba(255,255,255,.2);border-radius:50%;position:relative;cursor:ns-resize;box-shadow:inset 0 2px 5px #00000080}.dial-indicator{position:absolute;top:4px;left:50%;width:2px;height:10px;background:#4ecdc4;transform-origin:50% 12px;border-radius:1px}.dial-value{font-size:.6em;font-family:monospace;opacity:.6}.vertical-slider-container{position:relative;width:24px;height:100%;min-height:50px;cursor:ns-resize;display:flex;justify-content:center}.slider-track.vertical{width:8px;height:100%;background:#0000004d;border-radius:4px;position:relative;overflow:hidden}.slider-fill{position:absolute;bottom:0;width:100%;height:50%;background:#4ecdc4}.slider-handle-v{position:absolute;left:50%;transform:translate(-50%,-50%);width:22px;height:10px;background:#fff;border-radius:3px;box-shadow:0 2px 5px #0000004d;z-index:2}.synth-dials-row{display:flex;align-items:stretch;flex-wrap:wrap;justify-content:center;gap:10px}.multi-range-slider{position:relative;width:100%;height:30px;display:flex;align-items:center;cursor:pointer}.slider-track{position:absolute;width:100%;height:4px;background:#fff3;border-radius:2px}.slider-handle{position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #1e3c72;transform:translate(-50%);z-index:2}.slider-handle.bottom{background:#444}.slider-handle.mid{background:#888}.slider-handle.top{background:#ccc}.root-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}.root-btn{padding:12px 15px;border:1px solid rgba(255,255,255,.1);background:#0003;color:#fff;cursor:pointer;font-size:.85em;font-weight:700;border-radius:4px;transition:all .2s}.root-btn.active{background:#4ecdc4;border-color:#fff}.segmented-control{display:flex;background:#0000004d;padding:2px;border-radius:6px}.segmented-control.vertical{flex-direction:column}.segment-btn{padding:8px 10px;border:none;background:transparent;color:#fff;cursor:pointer;border-radius:4px;font-size:.75em}.segment-btn.active{background:#fff3}.modern-select{width:100%;padding:8px;background:#0000004d;border:1px solid rgba(255,255,255,.1);color:#fff;border-radius:6px;font-size:.85em}#instrument{display:block;width:100%;max-width:600px;aspect-ratio:1.2 / 1;border:3px solid rgba(255,255,255,.3);border-radius:15px;background:#0003;box-shadow:0 10px 30px #0000004d;touch-action:none;flex:0 1 auto}.unlock-overlay{position:fixed;inset:0;width:100vw;height:100vh;background:#000000e6;backdrop-filter:blur(15px);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2000;transition:opacity .5s;overflow:hidden}.unlock-overlay.hidden{opacity:0;pointer-events:none}.unlock-content{text-align:center}.unlock-content h1{font-size:3em;margin-bottom:10px}.unlock-content p{opacity:.7;margin-bottom:30px}#start-btn{padding:15px 40px;font-size:1.2em;background:#4ecdc4;border:none;color:#fff;border-radius:30px;cursor:pointer}@media(max-width:800px){.inner-divider{display:none}}@media(max-width:800px)or (orientation:portrait){body{overflow:hidden;height:100vh}.app-layout{grid-template-areas:"top-bar" "main" "side-left" "side-right";grid-template-columns:100%;grid-template-rows:auto auto auto auto;height:100vh;padding:5px;gap:5px}.sidebar{padding:5px 10px;gap:5px;background:#ffffff08;align-self:stretch}.top-bar{padding:5px 10px;gap:5px}.top-bar h1{font-size:1em}.top-bar-controls{gap:8px;width:100%;justify-content:center}#note-display{display:none}.main-content{gap:2px}.control-group{gap:4px}#instrument{max-width:100%;max-height:40vh}.root-grid{grid-template-columns:repeat(6,1fr);gap:4px;width:100%}.root-btn{padding:0;aspect-ratio:1 / 1;display:flex;align-items:center;justify-content:center;font-size:.8em}.segmented-control.vertical{flex-direction:row}.segment-btn{padding:6px 2px;font-size:.7em}.synth-dials-row{gap:5px;padding:0;background:none;flex-wrap:wrap;justify-content:center}.vertical-slider-container{min-height:40px}}