/* Functional controls are shared by the WebGL hardware and the accessible panel. */
.synth-surface>.synth-strips{contain:size;min-height:0}
@media(max-width:550px){.synth-surface>.synth-strips{height:110px}}
.synth-studio .synth-surface>.perf-pad-grid{width:100%;align-self:start;min-height:0}
.hardware-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:18px;max-width:1120px;margin:30px auto 12px;font-size:11px;color:#b6bec4}
.hardware-toolbar button,.synth-controls button{border:1px solid #75818966;background:linear-gradient(#2e383d,#1b2227);border-radius:5px;min-height:44px;padding:10px 17px;color:#e3e9e8;cursor:pointer;font-size:11px;box-shadow:inset 0 1px #fff1,0 3px 0 #06090b}
.hardware-toolbar button[aria-pressed=true],.synth-controls button[aria-pressed=true]{border-color:#ace4d4;background:#25413c;box-shadow:0 0 18px #a7f9db16}
.hardware-toolbar button:disabled{opacity:.55;cursor:default}
.hardware-toolbar label{display:flex;align-items:center;gap:14px}
.hardware-toolbar input{width:100px;accent-color:#9bbdb9;min-height:32px}
.hardware-render-status{font-size:10px;line-height:1.6;flex:1}
.hardware-viewport{position:relative;max-width:1250px;margin:0 auto;aspect-ratio:1.56;min-height:260px;border-radius:12px;overflow:hidden;background:radial-gradient(ellipse at 50% 65%,#26313855,#090d1200 70%)}
.hardware-viewport[hidden]{display:none}
.hardware-viewport canvas{width:100%;height:100%;display:block;touch-action:pan-y;outline:none}
.hardware-tooltip{position:absolute;left:20px;bottom:15px;background:#060b11ce;color:#ddf8ee;border:1px solid #71887a5e;border-radius:4px;padding:8px 13px;font:10px ui-monospace,monospace;pointer-events:none;opacity:0;transition:opacity .15s}
.hardware-tooltip:not(:empty){opacity:1}
.hardware-viewport[data-active-control]{cursor:grabbing}
[data-hardware-fallback][hidden]{display:none!important}
.synth-panel{max-width:1140px;margin:24px auto 38px;padding:25px 28px 23px;position:relative;isolation:isolate;border:1px solid #767f88;border-radius:9px;background:repeating-linear-gradient(0deg,#fff1 0,transparent .3px,transparent 3px),linear-gradient(135deg,#343b43,#161b22 44%,#1d252d);box-shadow:inset 0 1px 2px #fff6,inset 0 0 0 6px #050a0f66,0 7px 0 #080c10,0 8px 0 #5b6872,0 19px 0 #06090e,0 35px 60px #0009}
.synth-panel:before,.synth-panel:after{content:'';position:absolute;top:13px;width:5px;height:5px;border-radius:50%;border:1px solid #889199;background:linear-gradient(135deg,#080b11 40%,#6d747a 45% 55%,#080b11 60%);pointer-events:none}
.synth-panel:before{left:13px}.synth-panel:after{right:13px}
.synth-engraving{display:flex;align-items:center;justify-content:space-between;margin:0 2px 24px;color:#d8dce0;font-weight:300;font-size:26px;letter-spacing:-.05em;text-shadow:0 1px #000}
.synth-engraving b{font-size:23px;letter-spacing:-.06em}.synth-engraving small{display:block;font:6px monospace;letter-spacing:.16em;margin-top:3px;color:#a1a8ae}
.synth-surface{display:grid;grid-template-columns:100px minmax(0,1fr) 100px;gap:25px;align-items:stretch}
.synth-studio .perf-pad-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));gap:7px;aspect-ratio:1;min-width:0}
.synth-studio .perf-pad{--level:0;display:block;position:relative;min-width:0;min-height:0;width:100%;height:100%;aspect-ratio:auto;cursor:pointer;border:1px solid hsl(var(--hue) 35% 45% / .7);border-radius:5px;background:linear-gradient(150deg,hsl(var(--hue) 55% calc(24% + var(--level)*42%)),hsl(var(--hue) 65% calc(15% + var(--level)*35%)));box-shadow:inset 0 2px 3px #fff3,inset 0 -3px 4px #0004,0 3px 0 #03060b,0 0 calc(var(--level)*24px) hsl(var(--hue) 95% 60% / calc(var(--level)*.6));transition:transform .08s;touch-action:pan-y;color:hsl(var(--hue) 30% 85%);user-select:none}
.synth-studio .perf-pad:after{display:none}.synth-studio .perf-pad span{position:absolute;left:6px;top:5px;bottom:auto;font:7px monospace;opacity:.65}
.synth-studio .perf-pad b{position:absolute;inset:auto 3px 7px;font:7px monospace;text-align:center;color:inherit;letter-spacing:0;line-height:1.2}
.synth-studio .perf-pad.is-held{transform:translateY(2.5px);border-color:#e5fffb;box-shadow:inset 0 2px 4px #fff4,0 0 18px hsl(var(--hue) 100% 65% / .5)}
.synth-studio .perf-pad.is-programmed{border-color:#ffe6a7}.synth-studio .perf-pad.is-step{--hue:44}
.synth-strips{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:26px 13px}
.synth-strip{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;min-height:0;color:#aab7c0;font:7px monospace}
.synth-strip>span{font-size:7px;line-height:1.2;white-space:nowrap}
.synth-strip input{appearance:none;-webkit-appearance:none;writing-mode:vertical-lr;direction:rtl;background:linear-gradient(90deg,#02060b,#121b24,#02060b);border:1px solid #64758370;border-radius:3px;width:27px;min-width:27px;min-height:0;height:100%;box-shadow:inset 0 0 0 4px #0004;cursor:ns-resize;touch-action:none}
.synth-strip input::-webkit-slider-thumb{appearance:none;width:17px;height:3px;background:#e9f6ed;box-shadow:0 0 8px #ccffe970}
.synth-strip input::-moz-range-thumb{width:17px;height:3px;border:0;background:#e9f6ed}
.synth-strip>i{--level:0%;position:absolute;right:0;top:18px;bottom:15px;width:3px;background:repeating-linear-gradient(0deg,#8ce2d6 0 3px,transparent 3px 10px);clip-path:inset(calc(100% - var(--level)) 0 0);pointer-events:none}
.synth-strip output{font-size:7px;color:#90b7aa}
.synth-lower{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:25px;margin-top:27px;align-items:center}
.synth-track-buttons{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.synth-track-buttons button{min-width:0;min-height:43px;border:1px solid #717b83;background:linear-gradient(#3a454e,#222c34);box-shadow:0 2px 0 #03070a;border-radius:3px;color:#b9c3c7;font:10px monospace;cursor:pointer}
.synth-track-buttons button span{display:block;font:5px monospace;margin-top:7px;letter-spacing:.03em}
.synth-track-buttons button[aria-pressed=true]{border-color:#b2e8dd;background:#354d50;color:#e4f5ed}
#synth-oled{width:100%;height:auto;border:2px solid #05080e;border-radius:4px;background:#040a12;box-shadow:0 0 0 1px #677b8844,inset 0 2px 5px #000}
.synth-controls{max-width:1060px;margin:20px auto 0}
.synth-transport,.synth-modes{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px;margin:14px 0}
.synth-controls button{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.synth-controls button .icon{width:14px;height:14px}
#synth-play,#synth-demo-play{background:linear-gradient(135deg,#b8d3c9,#8da89d);color:#12241d;border-color:#d8ebd3}
#synth-record i{width:6px;height:6px;border-radius:50%;background:#bd5162}#synth-record[aria-pressed=true] i{box-shadow:0 0 10px #ff7295;background:#ff7295}
.synth-modes label{display:flex;align-items:center;gap:10px;font-size:10px;color:#a6b3ba}
.synth-modes select{font-size:11px;min-height:44px;padding:9px;border:1px solid #5d6b7488;border-radius:4px;background:#0d1720;color:#e1e6e2}
.synth-settings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:25px auto 15px;max-width:700px}
.synth-settings label{display:grid;grid-template-columns:1fr auto;align-items:center;font:10px monospace;color:#aabcc4;gap:4px 12px}
.synth-settings input{width:100%;grid-row:2;grid-column:1;min-height:38px;accent-color:#bdd6c7}
.synth-settings output{grid-row:2;grid-column:2;color:#e2e7dc;font-size:12px}
.synth-lights{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.synth-lights button{font:8px monospace;letter-spacing:.12em;min-height:36px;background:#15212a}
.synth-status{text-align:center;color:#b9dfd1;min-height:22px;font:12px monospace;margin-top:25px}
.synth-help{text-align:center;max-width:700px;font-size:11px;line-height:1.8;color:#95a4ae;margin:10px auto}
.studio-details{max-width:740px;margin:18px auto;color:#81909b;font-size:10px;line-height:1.7;text-align:center}.studio-details summary{cursor:pointer;min-height:32px}.studio-details p{margin:8px auto}
.synth-studio button:focus-visible,.synth-studio input:focus-visible,.synth-studio select:focus-visible,.hardware-view:focus-visible{outline:2px solid #e5fff7;outline-offset:4px}
.dj-3d-selections{display:grid;grid-template-columns:1fr 1fr;max-width:1080px;gap:25px;margin:15px auto 22px}.dj-3d-selections label{font-size:10px;color:#9fb3be;display:flex;align-items:center;gap:15px}.dj-3d-selections select{min-width:0;flex:1}
.dj-eq-panel{max-width:1060px;margin:24px auto;display:grid;grid-template-columns:1fr 1fr;gap:30px}.dj-eq-bank{border-top:1px solid #78909f3a;padding-top:16px}.dj-eq-bank>b{font:10px monospace;color:#a5b5bc}.dj-eq-bank>div{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:12px}.dj-eq-bank label{font-size:9px;color:#a6b9c2}.dj-eq-bank input{display:block;width:100%;accent-color:#abc5bc;min-height:38px}.dj-eq-bank output{font:9px monospace;color:#b6d9cc}
.dj-live [data-hardware=dj]{aspect-ratio:1.85}.dj-live.hardware-3d .dj-3d-selections{display:grid}.dj-live:not(.hardware-3d) .dj-3d-selections{display:none}
@media(max-width:800px){.synth-panel{padding:21px 15px}.synth-surface{grid-template-columns:65px minmax(0,1fr) 65px;gap:12px}.synth-strips{gap:20px 6px}.synth-strip input{width:22px;min-width:22px}.synth-studio .perf-pad-grid{gap:4px}.synth-studio .perf-pad b{font-size:5px}.synth-lower{gap:15px}.synth-track-buttons button span{font-size:4px}.hardware-toolbar{padding-inline:3%}}
@media(max-width:550px){.synth-studio{padding-inline:3%!important}.synth-panel{padding:18px 10px;border-radius:6px;margin-top:16px}.synth-engraving{margin-bottom:15px;font-size:22px}.synth-engraving b{font-size:20px}.synth-surface{grid-template-columns:1fr 1fr;gap:20px 25px}.synth-studio .perf-pad-grid{grid-column:1/-1;grid-row:1;gap:4px}.synth-strips{grid-template-columns:repeat(4,1fr);grid-template-rows:110px;gap:7px}.synth-strips:first-child{grid-column:1;grid-row:2}.synth-strips:last-child{grid-column:2;grid-row:2}.synth-strip>span{font-size:5px}.synth-strip input{width:22px;min-width:22px}.synth-strip>i{right:-1px;top:13px;bottom:12px;width:2px}.synth-studio .perf-pad b{font-size:5px;bottom:5px}.synth-studio .perf-pad span{font-size:5px;top:3px;left:4px}.synth-lower{grid-template-columns:1fr;gap:14px;margin-top:18px}.synth-track-buttons button{min-height:37px;font-size:9px}.synth-track-buttons button span{font-size:4px}#synth-oled{max-height:100px}.synth-controls button{font-size:9px;padding:9px 12px}.synth-modes label{flex-wrap:wrap;justify-content:center}.synth-settings{gap:16px;margin-inline:5px}.synth-settings label{font-size:8px;gap:3px}.synth-settings output{font-size:10px}.synth-help{font-size:10px;padding-inline:10px}.hardware-toolbar{gap:10px}.hardware-toolbar label{font-size:9px}.hardware-render-status{flex-basis:100%}.hardware-viewport,.dj-live [data-hardware=dj]{aspect-ratio:1.25;min-height:270px}.dj-3d-selections{gap:12px;padding-inline:5px}.dj-3d-selections label{display:block;font-size:8px}.dj-3d-selections select{width:100%;margin-top:6px;font-size:10px}.dj-eq-panel{gap:20px;padding-inline:10px}.dj-eq-bank>div{gap:8px}.dj-eq-bank label{font-size:8px}}
@media(prefers-reduced-motion:reduce){.synth-studio .perf-pad,.hardware-tooltip{transition:none}}

/* Animate a light layer; keep the silicone shading and its shadows cached. */
.synth-studio .perf-pad{background:linear-gradient(150deg,hsl(var(--hue) 55% 24%),hsl(var(--hue) 65% 15%));box-shadow:inset 0 2px 3px #fff3,inset 0 -3px 4px #0004,0 3px 0 #03060b}
.synth-studio .perf-pad:before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(150deg,hsl(var(--hue) 75% 76%),hsl(var(--hue) 75% 52%));opacity:var(--level);pointer-events:none;will-change:opacity}
.synth-studio .perf-pad b,.synth-studio .perf-pad span{z-index:1}
.dj-live .perf-disc{will-change:transform;pointer-events:none}
.synth-studio{scroll-margin-top:125px}