:root{--ink:#090b0a;--panel:#1a2024;--metal:#2b3238;--line:#252c31;--text:#c8cfd6;--muted:#4a545d;--acid:#b8ff3d;--cyan:#7edfe1;--red:#ff2244}
body{background:linear-gradient(#b8ff3d07 1px,transparent 1px),linear-gradient(90deg,#b8ff3d05 1px,transparent 1px),radial-gradient(120% 80% at 50% -10%,#252b30 0,#15191d 46%,#090b0a 100%);background-size:56px 56px,56px 56px,auto}
body::before{background:linear-gradient(112deg,#fff0 22%,#d7ff9d14 48%,#fff0 54%);opacity:.24}.topbar{background:linear-gradient(#2b3238,#1e2428 42%,#161a1e);border-bottom-color:#090a0b;box-shadow:0 1px #4a545d inset,0 8px 18px #0008}.back,.wordmark strong{color:var(--acid);text-shadow:0 0 15px #b8ff3d44}.plugin-preset,.master-meter{border-color:#090b0c;background:#0d0f11}.plugin-preset button{background:linear-gradient(#333b42,#232a30);color:#87939c}.plugin-status span{background:#161a1d;border-color:#30383e}.plugin-status span:first-child{color:var(--acid);border-color:#6f9a33}
.device{border-color:#090a0b;background:repeating-linear-gradient(0deg,#ffffff08 0 1px,transparent 1px 7px),linear-gradient(145deg,#39424a 0,#2b3238 17%,#20262a 56%,#14181c 100%);box-shadow:0 1px 0 #4a545d inset,0 -6px 0 #0d0f11 inset,0 18px 26px #0008,0 50px 90px #000c}.device::before{background:linear-gradient(110deg,#ffffff18,#fff0 25%,#0002 70%,#0007);box-shadow:0 1px #65717a55 inset}.device::after{color:#7b879044;text-shadow:0 1px #000}
.left-rail,.control-bank,.performance{border-color:#090b0c;background:linear-gradient(145deg,#2b3238cc,#161a1dcc);box-shadow:0 1px #4a545d88 inset,-2px -3px 6px #0007 inset,0 4px 7px #0005}.screen{border-color:#050706;background:#080b09;color:var(--acid);box-shadow:0 1px #4a545d55,0 5px 8px #0009,inset 0 0 28px #000,inset 0 0 12px #b8ff3d14}.screen small{color:#719b35}.screen::after{background:linear-gradient(125deg,#d8ff7040,#fff0 35%)}
.history button,.utility button,.selectors button,.mode,.sample-actions button,.lane-actions button{background:linear-gradient(#333b42,#232a30);border-color:#090b0c;border-top-color:#57636d;color:#87939c}.mode small,.utility small,.selectors small{color:#525d65}.mode.active,.lane-actions button.active,.sample-actions button.active{background:linear-gradient(#2a3b20,#182414);border-color:#7fae37;color:var(--acid);box-shadow:0 0 15px #b8ff3d33,0 1px #d5ff7055 inset,0 -3px 5px #0008 inset,0 4px 5px #0007}
.tempo-dial input,.encoder input{background:radial-gradient(circle at 36% 30%,#68737b,#30373d 48%,#161a1d 68%,#090b0c 73%);box-shadow:2px 2px 3px #ffffff22 inset,-6px -7px 10px #000b inset,0 0 0 2px #090b0c}.tempo-dial strong,.tempo-dial span,.encoder{color:#8a959d}.encoder input::-webkit-slider-thumb{background:var(--acid);box-shadow:0 0 8px #b8ff3d}
.transport button{border-color:#090b0c;background:radial-gradient(circle at 36% 30%,#4a545d,#252c31 58%,#111416);box-shadow:2px 2px 2px #ffffff24 inset,-4px -5px 7px #000b inset,0 8px 8px #0009}.transport #play{color:var(--acid)}
.pads{border-color:#090b0c;background:linear-gradient(145deg,#252c31,#111416);box-shadow:1px 1px #4a545d55 inset,-4px -4px 9px #0009 inset}.pad{border-color:#090b0c;background:linear-gradient(145deg,#3a4249,#232a30 45%,#14181c);color:#68747c;box-shadow:2px 2px 2px #ffffff1b inset,-5px -6px 9px #000d inset,0 8px 8px #000b}.pad::after{border-color:#eaffff20;background:linear-gradient(142deg,#ffffff4d,#dffcff14 18%,#ffffff05 44%,#b8ff3d08 74%,#ffffff20)}.pad.on{color:#eef4ef}
.workspace,.sample-deck,.automation-deck{border-color:#090b0c;border-top-color:#4a545d66;background:repeating-linear-gradient(0deg,#ffffff08 0 1px,transparent 1px 7px),linear-gradient(#232a30,#1a2024 60%,#141a1e);box-shadow:0 1px #4a545d66 inset,0 -3px 8px #0007 inset,0 13px 25px #0008}.workspace strong,.automation-deck header strong{color:var(--acid)}.workspace p{color:#707c84}.status-grid span,.sample-controls label,.automation-editor>label,.automation-editor>div{border-color:#1a1e21;background:#0d0f11}.status-grid strong,.sample-controls output,.automation-editor output,.automation-editor strong{color:#b8ff3d}
.sample-deck canvas,.automation-grid{border-color:#090b0c;background:#0d0f11}.automation-grid button{border-color:#1a1e21;background:linear-gradient(#20262a,#131619)}.automation-grid button i::after{background:var(--acid);box-shadow:0 0 8px #b8ff3d}.automation-grid button.locked{color:var(--acid);border-color:#719b3566}.automation-grid button.selected{outline-color:var(--acid)}
.touch-strip input{background:#0d0f11;border-color:#090b0c;accent-color:var(--acid)}

/* SILVER WHITE HARDWARE SKIN — shared Modular Terrace instrument language */
:root{
  --ink:#222a2e;
  --panel:#d4d9dc;
  --metal:#b8bec2;
  --line:#69747a;
  --text:#273036;
  --muted:#69747a;
  --acid:#b8ff3d;
  --cyan:#56852b;
  --red:#d84a43;
  color-scheme:light;
}

body{
  color:var(--text);
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 6px),
    radial-gradient(110% 65% at 50% 0%,#3a4246 0%,#20272b 52%,#101416 100%);
}
body::before{background:linear-gradient(112deg,transparent 22%,rgba(255,255,255,.2) 48%,transparent 54%);opacity:.34}

.topbar{
  color:#283136;
  border-bottom-color:#626c71;
  background-image:linear-gradient(145deg,rgba(255,255,255,.58),rgba(119,128,133,.22)),url('/assets/brushed-metal-texture.avif');
  background-size:auto,cover;
  background-position:center;
  box-shadow:inset 0 2px 1px rgba(255,255,255,.9),inset 0 -4px 8px rgba(34,40,44,.24),0 8px 18px rgba(0,0,0,.42);
}
.back,.wordmark strong{color:#4f7627;text-shadow:0 1px 0 #fff}
.wordmark span,.build{color:#687278}
.plugin-preset,.master-meter{border-color:#667176;background:#111719;box-shadow:inset 0 4px 8px #000,0 1px 0 #fff}
.plugin-preset button,.plugin-status span{
  color:#364047;border-color:#788288;border-top-color:#fff;
  background:linear-gradient(#f8fafb,#c9ced1 52%,#949ca1);
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 3px rgba(30,36,40,.24);
}
.plugin-preset small{color:#879197}.plugin-preset strong{color:var(--acid)}
.plugin-status span:first-child{color:#416820;border-color:#6f942d;background:linear-gradient(#efffc7,#c9ee83 52%,#94bd4d)}

.device{
  border-color:#747e83;
  background-image:linear-gradient(145deg,rgba(255,255,255,.44),rgba(107,116,121,.18)),url('/assets/brushed-metal-texture.avif');
  background-size:auto,cover;
  background-position:center;
  box-shadow:inset 0 3px 2px rgba(255,255,255,.94),inset 0 -7px 0 #858e93,0 18px 28px rgba(0,0,0,.46),0 52px 92px rgba(0,0,0,.62);
}
.device::before{background:linear-gradient(110deg,rgba(255,255,255,.66),transparent 26%,rgba(40,48,52,.12) 72%,rgba(22,27,30,.25));box-shadow:inset 0 1px 0 #fff}
.device::after{color:#566168;text-shadow:0 1px 0 rgba(255,255,255,.78)}

.left-rail,.control-bank,.performance{
  border-color:#727c81;
  background-image:linear-gradient(145deg,rgba(255,255,255,.48),rgba(117,126,131,.14)),url('/assets/brushed-metal-texture.avif');
  background-size:auto,cover;
  box-shadow:inset 0 2px 1px #fff,inset -3px -4px 8px rgba(42,49,53,.2),0 5px 9px rgba(0,0,0,.28);
}
.screen{border-color:#515a5f;background:#080d0b;color:var(--acid);box-shadow:0 1px 0 #fff,0 5px 8px rgba(0,0,0,.45),inset 0 0 28px #000,inset 0 0 14px rgba(184,255,61,.11)}
.screen small{color:#86aa50}

.history button,.utility button,.selectors button,.mode,.sample-actions button,.lane-actions button,.performance-actions button,.scene-slot button{
  color:#354047;
  border-color:#737d82;
  border-top-color:#fff;
  background:linear-gradient(#fbfcfd,#cbd0d3 52%,#949ca1);
  text-shadow:0 1px 0 rgba(255,255,255,.9);
  box-shadow:inset 0 2px 1px #fff,inset 0 -3px 4px rgba(32,38,42,.22),0 4px 6px rgba(0,0,0,.28);
}
.mode small,.utility small,.selectors small{color:#69747a}
.mode.active,.lane-actions button.active,.sample-actions button.active,.performance-actions button.active{
  color:#24300f;border-color:#6e942c;border-top-color:#f3ffd0;
  background:linear-gradient(#eaffb6,#bced68 54%,#81b72e);
  text-shadow:0 1px 0 rgba(255,255,255,.75);
  box-shadow:inset 0 2px 1px #fff,0 0 15px rgba(184,255,61,.32),0 4px 6px rgba(0,0,0,.25);
}
.mode.active small{color:#4c681d}

.tempo-dial input,.encoder input{
  background:radial-gradient(circle at 34% 28%,#f5f7f8,#aab1b5 24%,#596268 52%,#22292d 69%,#cbd0d3 73%,#6d767b 80%);
  box-shadow:inset 2px 2px 3px #fff,inset -6px -7px 10px rgba(20,25,28,.58),0 0 0 2px #707a7f;
}
.tempo-dial strong,.tempo-dial span,.encoder{color:#374148;text-shadow:0 1px 0 #fff}
.encoder input::-webkit-slider-thumb{background:var(--acid);box-shadow:0 0 8px var(--acid)}
.transport button{border-color:#677176;background:radial-gradient(circle at 35% 28%,#fbfcfc,#b7bdc0 34%,#687177 68%,#30373b);box-shadow:inset 2px 2px 2px #fff,inset -5px -6px 8px rgba(20,25,28,.48),0 8px 9px rgba(0,0,0,.34)}

.pads{border-color:#747e83;background:linear-gradient(145deg,#dde1e3,#aeb5b9);box-shadow:inset 2px 2px 2px #fff,inset -4px -4px 9px rgba(45,52,56,.28)}
.pad{
  color:#4f5a61;border-color:#747e83;
  background:linear-gradient(145deg,#fbfcfd 0%,#c7cdd0 43%,#969ea3 100%);
  text-shadow:0 1px 0 #fff;
  box-shadow:inset 2px 2px 2px #fff,inset -5px -6px 9px rgba(43,50,54,.24),0 8px 9px rgba(0,0,0,.3);
}
.pad::after{border-color:rgba(255,255,255,.78);background:linear-gradient(142deg,rgba(255,255,255,.88),rgba(255,255,255,.2) 24%,transparent 50%,rgba(184,255,61,.06) 74%,rgba(255,255,255,.34));mix-blend-mode:normal}
.pad.on{color:#172008;text-shadow:0 1px 0 rgba(255,255,255,.78)}
.touch-strip span{color:#4e595f;text-shadow:0 1px 0 #fff}.touch-strip input{border-color:#6e787d;background:#172023;box-shadow:inset 0 5px 8px #000,0 1px 0 #fff}

.workspace,.sample-deck,.automation-deck,.mixer-deck,.performance-deck,.scene-deck{
  color:#2b353b;
  border-color:#747e83;
  border-top-color:#fff;
  background-image:linear-gradient(145deg,rgba(255,255,255,.5),rgba(117,126,131,.18)),url('/assets/brushed-metal-texture.avif');
  background-size:auto,cover;
  box-shadow:inset 0 2px 1px #fff,inset 0 -4px 8px rgba(43,50,54,.2),0 13px 25px rgba(0,0,0,.34);
}
.workspace strong,.sample-deck header strong,.automation-deck header strong,.mixer-deck header strong,.performance-deck header strong,.scene-deck header strong{color:#486e24;text-shadow:0 1px 0 #fff}
.workspace p,.scene-deck>p{color:#5f6b71}

.status-grid span,.sample-controls label,.automation-editor>label,.automation-editor>div,.fx-footer>label,.fx-footer>div,.mixer-controls label{
  border-color:#586267;background:#111719;color:#96a0a5;box-shadow:inset 0 3px 7px #000;
}
.status-grid strong,.sample-controls output,.automation-editor output,.automation-editor strong,.fx-footer output,.fx-footer strong,.mixer-controls output{color:var(--acid);text-shadow:none}
.sample-deck canvas,.automation-grid,.fx-matrix,.mixer-master{border-color:#566066;background:#0d1315;box-shadow:inset 0 5px 10px #000,0 1px 0 #fff}

.automation-grid button,.fx-matrix button,.scene-slot,.mixer-strip{
  color:#4f5a61;border-color:#747e83;border-top-color:#fff;
  background:linear-gradient(#f7f9fa,#c3c9cc 18%,#959da2);
  box-shadow:inset 0 2px 1px #fff,inset 0 -3px 5px rgba(36,43,47,.22),0 5px 8px rgba(0,0,0,.26);
}
.automation-grid button i,.fx-matrix button i{background:#4d585e}.automation-grid button span,.automation-grid button small,.fx-matrix button span,.fx-matrix button small{color:#58636a}.fx-matrix button strong,.scene-slot>header strong,.mixer-strip>header strong{color:#303a40}
.mixer-strip>header,.scene-slot>header{border-bottom-color:#717b80;background:linear-gradient(#f7f9fa,#b8bec2)}
.channel-meter{border-color:#566066;background:#101618;box-shadow:inset 0 3px 7px #000}
.scene-slot.selected,.mixer-strip.selected{box-shadow:0 0 16px color-mix(in srgb,var(--acid) 34%,transparent),inset 0 2px 1px #fff,0 7px 12px rgba(0,0,0,.3)}
