:root{--edge-light:#d9dfdb44;--edge-dark:#050706aa;--glass:#dfffff0a;--depth:0 2px 2px #fff2 inset,0 -3px 5px #0007 inset,0 7px 12px #0007}
body{background:radial-gradient(ellipse at 50% -18%,#3a4741 0,#202a25 24%,#101512 57%,#070908 100%);perspective:1500px}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(115deg,#fff0 22%,#fff2 48%,#fff0 53%);opacity:.16;mix-blend-mode:screen}
.topbar{height:78px;gap:16px;background:linear-gradient(#171c19,#090c0a);box-shadow:0 1px #ffffff18 inset,0 8px 18px #0008}.wordmark{margin:0 auto 0 0}.plugin-preset{display:flex;align-items:center;height:42px;border:1px solid #303934;border-radius:5px;background:#080b09;box-shadow:0 1px #fff2,0 3px 7px #0007 inset}.plugin-preset button{height:100%;width:30px;border:0;background:linear-gradient(#303732,#171c19);color:#758079;cursor:pointer}.plugin-preset span{display:grid;min-width:150px;padding:0 12px}.plugin-preset small{color:#647068;font-size:6px;letter-spacing:.12em}.plugin-preset strong{color:var(--acid);font-size:9px;letter-spacing:.08em;text-shadow:0 0 7px #b8ff3d66}.master-meter{display:grid;grid-template-columns:5px 5px auto;gap:3px;align-items:end;height:40px;padding:6px 7px;border:1px solid #2c342f;background:#080b09;box-shadow:0 3px 6px #0008 inset}.master-meter i{display:block;height:72%;border-radius:2px;background:linear-gradient(to top,#36e879 0 64%,#e9e83d 64% 86%,#ff554d 86%);box-shadow:0 0 6px #36e87988}.master-meter i:nth-child(2){height:54%;opacity:.8}.master-meter span{color:#667169;font-size:5px;line-height:1.55}.plugin-status{display:flex;gap:4px}.plugin-status span{padding:6px;border:1px solid #29312c;border-radius:3px;background:#111613;color:#76827a;font-size:6px}.plugin-status span:first-child{color:var(--cyan);border-color:#31d8d255}.build{max-width:90px}
.stage{perspective:1600px}.device{position:relative;transform:rotateX(1.5deg);transform-origin:50% 100%;border-color:#9aa19d55;background:linear-gradient(135deg,#969c98 0,#727975 18%,#5d645f 55%,#444a46 100%);box-shadow:0 2px 0 #c9cfcb88 inset,0 -6px 0 #2d322f inset,0 16px 24px #0007,0 48px 85px #000b}
.device::before{content:"";position:absolute;z-index:0;inset:5px;border-radius:14px;pointer-events:none;background:linear-gradient(110deg,#fff2,#fff0 24%,#0002 72%,#0005);box-shadow:0 1px #fff4 inset}
.device::after{content:"SYNARX-9  •  POLYPHONIC GROOVE INSTRUMENT";position:absolute;z-index:2;right:28px;bottom:7px;color:#171c19aa;font-size:6px;font-weight:900;letter-spacing:.16em;text-shadow:0 1px #ffffff30}
.device>*{position:relative;z-index:1}.left-rail,.control-bank,.performance{border-color:#202622aa;background:linear-gradient(145deg,#30363255,#12171433);box-shadow:1px 1px 0 #fff2 inset,-2px -2px 5px #0005 inset,0 3px 5px #0004}
.screen{position:relative;background:linear-gradient(145deg,#020403,#0b100d);border-color:#090c0a;box-shadow:0 1px 0 #aab3ad33,0 4px 7px #0008,inset 0 0 26px #000,inset 0 0 9px #b8ff3d0d;text-shadow:0 0 8px #b8ff3daa}
.screen::after{content:"";position:absolute;inset:2px;border-radius:3px;pointer-events:none;background:linear-gradient(125deg,#fff2,#fff0 35%);mix-blend-mode:screen}
.history button,.utility button,.selectors button,.mode,.sample-actions button,.lane-actions button{transform:translateZ(4px);border-color:#252b28;box-shadow:0 1px 1px #fff5 inset,0 -3px 4px #15191699 inset,0 4px 5px #0007;transition:transform .11s ease,filter .11s ease,box-shadow .11s ease}
.history button,.utility button,.selectors button,.mode,.sample-actions button,.lane-actions button,.transport button,.plugin-preset button{position:relative;overflow:hidden;isolation:isolate}
.history button::after,.utility button::after,.selectors button::after,.mode::after,.sample-actions button::after,.lane-actions button::after,.transport button::after,.plugin-preset button::after{content:"";position:absolute;z-index:3;inset:1px;border:1px solid #e8ffff25;border-radius:inherit;pointer-events:none;background:linear-gradient(155deg,#ffffff5c 0,#dffcff18 18%,#ffffff05 47%,#9de9ff12 72%,#ffffff26 100%);box-shadow:0 1px 0 #fff6 inset,1px 0 0 #dffcff22 inset,-1px -1px 0 #0005 inset;mix-blend-mode:screen;opacity:.72}
.history button::before,.utility button::before,.selectors button::before,.mode::before,.sample-actions button::before,.lane-actions button::before,.plugin-preset button::before{content:"";position:absolute;z-index:4;left:-35%;top:-90%;width:74%;height:220%;pointer-events:none;background:linear-gradient(90deg,#fff0,#fff7 46%,#fff0);transform:rotate(19deg);opacity:.28;transition:left .35s ease,opacity .2s ease}
.history button:hover::before,.utility button:hover::before,.selectors button:hover::before,.mode:hover::before,.sample-actions button:hover::before,.lane-actions button:hover::before,.plugin-preset button:hover::before{left:75%;opacity:.52}
.history button:active,.utility button:active,.selectors button:active,.mode:active,.sample-actions button:active,.lane-actions button:active{transform:translateY(3px);box-shadow:0 1px 2px #0008 inset,0 1px 1px #fff2}
.mode.active{box-shadow:0 0 14px #b8ff3d44,0 1px 1px #fff2 inset,0 -3px 5px #0008 inset,0 4px 5px #0007}
.tempo-dial input{filter:drop-shadow(0 9px 8px #0009);box-shadow:2px 2px 3px #fff4 inset,-6px -7px 10px #1119 inset,0 0 0 2px #242a26}
.encoder input{filter:drop-shadow(0 7px 5px #0009);box-shadow:2px 2px 2px #fff4 inset,-4px -5px 7px #111b inset,0 0 0 2px #252a27}
.transport button{box-shadow:2px 2px 2px #fff4 inset,-4px -5px 7px #111a inset,0 8px 8px #0008;transition:transform .1s ease,box-shadow .1s ease}.transport button:active{transform:translateY(5px);box-shadow:0 2px 3px #0009 inset,0 2px 2px #fff2}
.pads{perspective:900px;background:linear-gradient(145deg,#444b46,#252b27);box-shadow:2px 2px 2px #fff2 inset,-4px -4px 8px #0007 inset}.pad{transform:translateZ(9px);background:linear-gradient(145deg,#68706a 0,#4a514c 40%,#303632 100%);border-color:#222824;box-shadow:2px 2px 2px #fff3 inset,-5px -6px 9px #171b18cc inset,0 8px 8px #0009;transition:transform .075s ease,filter .075s ease,box-shadow .075s ease}.pad::after{content:"";position:absolute;inset:3px;border-radius:5px;pointer-events:none;background:linear-gradient(130deg,#fff2,#fff0 32%,#0002 78%)}.pad::before{height:8px;background:linear-gradient(90deg,color-mix(in srgb,var(--pad-color) 65%,#fff),var(--pad-color),color-mix(in srgb,var(--pad-color) 68%,#000));box-shadow:0 0 8px var(--pad-color),0 0 18px color-mix(in srgb,var(--pad-color) 55%,transparent),0 1px #fff8 inset}.pad:active,.pad.playing{transform:translateY(6px) translateZ(1px) scale(.985);box-shadow:1px 1px 1px #fff2 inset,-2px -3px 5px #101411aa inset,0 2px 3px #0008}.pad.on{box-shadow:2px 2px 2px #fff3 inset,-5px -6px 12px #171b18cc inset,0 7px 8px #0008,0 0 18px color-mix(in srgb,var(--pad-color) 55%,transparent)}
.touch-strip input{border:1px solid #141915;box-shadow:1px 1px #fff3 inset,-2px -2px 4px #0008 inset,0 5px 7px #0007}
.workspace,.sample-deck,.automation-deck{background:linear-gradient(145deg,#1c231f,#101411);border-color:#3b463f;box-shadow:0 1px #fff2 inset,0 -3px 8px #0005 inset,0 12px 24px #0006}
.sample-deck canvas,.automation-grid{box-shadow:0 1px #fff2,0 5px 10px #0007 inset,0 6px 10px #0004}.automation-grid button{box-shadow:1px 1px #fff1 inset,-2px -3px 4px #0007 inset,0 4px 5px #0006;transition:transform .08s ease,filter .08s ease}.automation-grid button.selected{transform:translateY(-3px);box-shadow:0 0 12px #b8ff3d33,1px 1px #fff2 inset,0 6px 7px #0008}
@media(max-width:900px){.plugin-status,.master-meter{display:none}.plugin-preset span{min-width:120px}}@media(max-width:720px){.device{transform:none}.pad{transform:none}.plugin-preset{display:none}.topbar{height:62px}}
@media(prefers-reduced-motion:reduce){.pad,.mode,.transport button,.automation-grid button{transition:none}}
.pad::after{z-index:3;border:1px solid #eaffff29;background:linear-gradient(142deg,#ffffff66 0,#dffcff20 16%,#ffffff08 42%,#8ae5ff0e 73%,#ffffff29 100%);box-shadow:0 2px 1px #fff5 inset,1px 0 #dffcff20 inset,-2px -2px 3px #0005 inset;mix-blend-mode:screen}.pad.on::after{border-color:color-mix(in srgb,var(--pad-color) 30%,#fff);background:linear-gradient(142deg,#ffffff70,#dffcff18 24%,color-mix(in srgb,var(--pad-color) 10%,transparent) 70%,#ffffff2b)}