:root{
  /* RX-78 palette: off-white armour, deep navy, red, V-fin gold */
  --panel:#1b2333; --panel-2:#242e42; --panel-3:#101520;
  --ink:#e8ecf4; --ink-dim:#8592ab;
  --blue:#2f6df0; --blue-dim:#1b3f8c;
  --gold:#f2c14e; --red:#e0413a; --green:#3fd28b;
  --line:#33405a;
  --disp:"Avenir Next Condensed","Arial Narrow","Helvetica Neue",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:#080b12;color:var(--ink);font-family:var(--disp)}
body{display:flex;justify-content:center;padding:24px 12px 48px}
.rack{position:relative;width:min(980px,100%);
  background:linear-gradient(180deg,var(--panel-2),var(--panel) 12%,var(--panel) 88%,#141a26);
  border:1px solid #000;border-radius:10px;
  box-shadow:0 24px 60px rgba(0,0,0,.65),inset 0 1px 0 #46567a;padding:20px 22px 26px}
/* armour stripe along the top edge — white / blue / red / gold */
.rack::before{content:"";position:absolute;left:14px;right:14px;top:0;height:3px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,#e8ecf4 0 22%,var(--blue) 22% 52%,var(--red) 52% 74%,var(--gold) 74% 100%);
  opacity:.85}
.screw{position:absolute;width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#7285a6,#161c28 70%);box-shadow:inset 0 0 2px #000}
.screw.tl{top:12px;left:10px}.screw.tr{top:12px;right:10px}
.screw.bl{bottom:10px;left:10px}.screw.br{bottom:10px;right:10px}

header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding-bottom:14px}
.brand h1{margin:0;font-size:30px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-wrap:balance}
.brand h1 em{font-style:normal;color:var(--blue)}
.brand h1 i{font-style:normal;color:var(--red)}
.brand p{margin:2px 0 0;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim)}
.algo{font-family:var(--mono);font-size:11px;color:var(--gold);border:1px solid #6b551f;
  border-radius:4px;padding:6px 10px;background:var(--panel-3);white-space:nowrap}

.scopewrap{margin:16px 0;background:var(--panel-3);border:1px solid #000;border-radius:6px;
  box-shadow:inset 0 2px 10px #000;padding:8px;display:flex;gap:12px;align-items:stretch;flex-wrap:wrap}
canvas#scope{flex:1 1 380px;min-width:0;height:118px;display:block;border-radius:3px;
  background:radial-gradient(ellipse at center,#0b1626 0%,#060a12 80%)}
.lcd{flex:0 1 280px;font-family:var(--mono);font-size:11.5px;line-height:1.7;color:var(--gold);
  padding:6px 10px;background:#0a0f18;border-radius:3px;overflow:hidden;
  text-shadow:0 0 6px rgba(242,193,78,.4);font-variant-numeric:tabular-nums}
.lcd b{color:#ffe6a8;font-weight:400}
.lcd .ok{color:var(--green)}

.label{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-dim);margin:18px 0 8px}
.labelrow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.lockbtn{appearance:none;font-family:var(--disp);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-dim);cursor:pointer;background:var(--panel-3);border:1px solid var(--line);
  border-radius:4px;padding:5px 10px;box-shadow:inset 0 1px 0 #2c3750}
.lockbtn .led{display:inline-block;width:7px;height:7px;border-radius:50%;background:#2b3446;margin-right:7px;
  box-shadow:inset 0 0 2px #000;vertical-align:0}
.lockbtn:hover{border-color:#6b551f}
.lockbtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.lockbtn.on{color:var(--gold);border-color:#6b551f;box-shadow:0 0 6px rgba(242,193,78,.25)}
.lockbtn.on .led{background:var(--gold);box-shadow:0 0 8px var(--gold)}

.pads{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:640px){.pads{grid-template-columns:repeat(2,1fr)}}
.pad{appearance:none;border:1px solid #000;border-radius:6px;cursor:pointer;
  background:linear-gradient(180deg,#33405c,#222b3d);color:var(--ink);
  padding:14px 10px 10px;text-align:left;position:relative;
  box-shadow:0 3px 0 #0c1018,inset 0 1px 0 #55679010;
  transition:transform .05s,box-shadow .05s}
.pad:hover{border-color:var(--blue-dim)}
.pad:active,.pad.lit{transform:translateY(2px);box-shadow:0 1px 0 #0c1018,inset 0 1px 0 #556790}
.pad:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.pad .name{font-size:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.pad .key{position:absolute;top:8px;right:8px;font-family:var(--mono);font-size:10px;color:var(--ink-dim);
  border:1px solid var(--line);border-radius:3px;padding:1px 5px}
.pad .led{display:inline-block;width:7px;height:7px;border-radius:50%;background:#2b3446;margin-right:7px;
  box-shadow:inset 0 0 2px #000;vertical-align:1px}
.pad.lit .led{background:var(--gold);box-shadow:0 0 8px var(--gold)}
.pad .hint{display:block;font-size:11px;letter-spacing:.1em;color:var(--ink-dim);margin-top:3px;text-transform:uppercase}

.presets{display:grid;gap:8px}
.pgroup{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pgroup .gname{flex:0 0 96px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.pbtn{appearance:none;font-family:var(--mono);font-size:11px;color:var(--ink);cursor:pointer;
  background:var(--panel-3);border:1px solid var(--line);border-radius:4px;padding:6px 11px;
  box-shadow:inset 0 1px 0 #2c3750}
.pbtn:hover{border-color:var(--blue-dim)}
.pbtn.on{color:var(--blue);border-color:var(--blue);box-shadow:0 0 6px rgba(47,109,240,.3)}
.pbtn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.console{display:grid;grid-template-columns:1fr auto;gap:18px;margin-top:6px}
@media(max-width:720px){.console{grid-template-columns:1fr}}
.faders{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 18px}
@media(max-width:640px){.faders{grid-template-columns:repeat(2,1fr)}}
.faders.fx{margin-top:2px}
/* locked: the block is still editable, it just survives pad / preset / mutate changes */
.faders.fx.locked{border-left:2px solid var(--gold);padding-left:10px;margin-left:-12px}
.faders.fx .fader output{color:var(--gold)}
.faders.fx input[type=range]::-webkit-slider-thumb{background:linear-gradient(180deg,#ffd97a,#8a6a15)}
.faders.fx input[type=range]::-moz-range-thumb{background:var(--gold)}
.fader label{display:block;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:4px}
.fader output{float:right;font-family:var(--mono);font-size:10.5px;color:var(--blue);font-variant-numeric:tabular-nums}
input[type=range]{width:100%;appearance:none;height:22px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:4px;background:#0a0e16;border-radius:2px;box-shadow:inset 0 1px 2px #000}
input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:20px;margin-top:-8px;border-radius:3px;
  background:linear-gradient(180deg,#5b8dff,#1b3f8c);border:1px solid #070a10;box-shadow:0 2px 3px rgba(0,0,0,.6)}
input[type=range]::-moz-range-track{height:4px;background:#0a0e16;border-radius:2px}
input[type=range]::-moz-range-thumb{width:12px;height:20px;border-radius:3px;background:#2f6df0;border:1px solid #070a10}
input[type=range]:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.transport{display:flex;flex-direction:column;gap:10px;justify-content:flex-start;min-width:158px}
.tbtn{appearance:none;font-family:var(--disp);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);background:linear-gradient(180deg,#33405c,#222b3d);border:1px solid #000;border-radius:5px;
  padding:11px 16px;cursor:pointer;box-shadow:0 3px 0 #0c1018,inset 0 1px 0 #556790}
.tbtn:hover{border-color:var(--blue-dim)}
.tbtn:active{transform:translateY(2px);box-shadow:0 1px 0 #0c1018}
.tbtn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.tbtn.rec{color:var(--red)}
footer{margin-top:20px;border-top:1px solid var(--line);padding-top:10px;display:flex;justify-content:space-between;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);flex-wrap:wrap;gap:6px}
@media (prefers-reduced-motion:reduce){.pad,.tbtn{transition:none}}

.headright{display:flex;align-items:center;gap:10px}
.helpbtn{appearance:none;width:30px;height:30px;flex:0 0 30px;border-radius:50%;cursor:pointer;
  font-family:var(--disp);font-size:15px;font-weight:700;line-height:1;
  color:var(--gold);background:var(--panel-3);border:1px solid #6b551f}
.helpbtn:hover{box-shadow:0 0 8px rgba(242,193,78,.35)}
.helpbtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

dialog#help{width:min(470px,calc(100% - 28px));padding:0;color:var(--ink);border:1px solid #000;border-radius:10px;
  background:linear-gradient(180deg,var(--panel-2),var(--panel) 14%,var(--panel) 86%,#141a26);
  box-shadow:0 24px 60px rgba(0,0,0,.7),inset 0 1px 0 #46567a}
dialog#help::backdrop{background:rgba(3,6,12,.66)}
dialog#help .hd{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-bottom:1px solid var(--line);padding:16px 18px 12px}
dialog#help h2{margin:0;font-size:17px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
dialog#help .bd{padding:16px 18px 20px;font-size:13px;line-height:1.65}
dialog#help .sect{margin:0 0 16px}
dialog#help .sect:last-child{margin-bottom:0}
dialog#help h3{margin:0 0 6px;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-dim);font-weight:400}
dialog#help p{margin:0}
dialog#help kbd{font-family:var(--mono);font-size:11px;color:var(--blue);
  border:1px solid var(--line);border-radius:3px;padding:1px 6px;background:var(--panel-3)}
dialog#help .keys{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:baseline}
dialog#help .lic{font-family:var(--mono);font-size:11.5px;line-height:1.7;color:var(--gold);
  background:#0a0f18;border-radius:3px;padding:8px 10px}
dialog#help .by{font-family:var(--mono);font-size:12px;color:var(--blue)}
.xbtn{appearance:none;font-family:var(--mono);font-size:12px;color:var(--ink);cursor:pointer;
  background:var(--panel-3);border:1px solid var(--line);border-radius:4px;padding:5px 11px}
.xbtn:hover{border-color:var(--blue-dim)}
.xbtn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}