:root {
  color-scheme: dark;
  --screen-scale: 1;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: #0b0d0e; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% -20%, #34383b 0, #171a1c 38%, #090a0b 80%),
    #090a0b;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  opacity: .16;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, #000, transparent 80%);
}

button, select, input { font: inherit; }
button, label, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, select:focus-visible, input:focus-visible, canvas:focus-visible,
label.small-key:focus-within {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

.workbench {
  width: min(1480px, 100%);
  margin: 0 auto;
  padding: 28px clamp(14px, 3vw, 44px) 44px;
}

.masthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 0 4px 18px;
}

.brand-lockup { display: flex; align-items: center; gap: 14px; }
.brand-lockup h1 { margin: 0; font-size: clamp(24px, 3vw, 38px); font-weight: 300; letter-spacing: -.04em; }
.brand-lockup h1 strong { color: var(--amber); font-weight: 800; }
.eyebrow { margin: 0 0 3px; color: var(--muted); font: 700 10px/1.2 ui-monospace, monospace; letter-spacing: .22em; text-transform: uppercase; }
.brand-mark { display: grid; grid-template-columns: repeat(3, 5px); gap: 3px; height: 35px; align-items: end; }
.brand-mark i { display: block; width: 5px; background: var(--amber); box-shadow: 0 0 9px rgba(255,183,67,.35); }
.brand-mark i:nth-child(1) { height: 50%; }
.brand-mark i:nth-child(2) { height: 100%; }
.brand-mark i:nth-child(3) { height: 72%; }
.masthead-meta { display: flex; gap: 20px; color: #a7aaa8; font: 700 10px/1 ui-monospace, monospace; letter-spacing: .13em; text-transform: uppercase; }
.power-state { display: flex; align-items: center; gap: 8px; }

.theme-picker { position: relative; }
.theme-button {
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid #4c5051;
  border-radius: 3px;
  color: #969a98;
  background: linear-gradient(#2c2f31, #191b1d);
  box-shadow: inset 0 1px rgba(255,255,255,.1), 0 1px 2px #070808;
  cursor: pointer;
  font: 700 9px/1 ui-monospace, monospace;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.theme-button strong { color: var(--amber); }
.theme-button:hover { color: #fff; border-color: #6a6e6f; }
.theme-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0;
  width: 224px;
  padding: 7px;
  border: 1px solid #565a5b;
  border-radius: 5px;
  background: #17191b;
  box-shadow: 0 14px 35px rgba(0,0,0,.6), inset 0 1px rgba(255,255,255,.08);
}
.theme-menu[hidden] { display: none; }
.theme-menu::before {
  position: absolute;
  top: -5px;
  right: 24px;
  width: 8px;
  height: 8px;
  content: "";
  border-top: 1px solid #565a5b;
  border-left: 1px solid #565a5b;
  background: #17191b;
  transform: rotate(45deg);
}
.theme-menu button {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 3px;
  color: #b6b8b4;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.theme-menu button:hover { border-color: #3d4142; background: #242729; }
.theme-menu button[aria-checked="true"] { color: #fff; background: #292c2e; }
.theme-menu button[aria-checked="true"]::after { content: "ON"; color: var(--amber); font: 800 8px/1 ui-monospace, monospace; }
.theme-menu button[aria-checked="true"] { grid-template-columns: 36px 1fr auto; }
.theme-menu strong, .theme-menu small { display: block; }
.theme-menu strong { font: 700 10px/1.2 ui-monospace, monospace; text-transform: uppercase; }
.theme-menu small { margin-top: 3px; color: #777b79; font: 500 8px/1 ui-monospace, monospace; }
.theme-swatch { display: block; width: 34px; height: 25px; border: 2px solid #090a0a; border-radius: 3px; box-shadow: 0 1px 2px #000; }
.swatch-sonyhb-f1xd { background: linear-gradient(135deg, #393b3c 0 48%, #151719 49% 65%, #e5252e 66% 83%, #f0b63b 84% 89%, #202324 90%); }
.swatch-crt { background: radial-gradient(ellipse, #15362b 0 42%, #22231f 43% 58%, #c7b995 59%); }
.swatch-sapporo { background: linear-gradient(135deg, #ffdf00 0 42%, #101314 43% 65%, #008c6b 66% 76%, #1b58a8 77% 88%, #d63a31 89%); }
.swatch-sapporo-dark { background: linear-gradient(135deg, #002b36 0 42%, #b58900 43% 62%, #2aa198 63% 75%, #268bd2 76% 87%, #dc322f 88%); }

.receiver {
  overflow: hidden;
  border: 1px solid #5b5f61;
  border-radius: 13px;
  background:
    linear-gradient(115deg, rgba(255,255,255,.055), transparent 22%, rgba(255,255,255,.02) 67%, transparent),
    #1b1e20;
  box-shadow: 0 30px 80px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.18), inset 0 -1px #050606;
}

.receiver-top {
  display: grid;
  grid-template-columns: minmax(180px, .7fr) minmax(280px, 1.5fr) minmax(255px, .75fr);
  gap: 18px;
  align-items: center;
  padding: 16px clamp(16px, 2.5vw, 32px);
  border-bottom: 1px solid #080909;
  background: linear-gradient(#2d3032, #1d2022);
  box-shadow: inset 0 -1px rgba(255,255,255,.06);
}

.model-bank { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px; }
.model-bank > label { padding-top: 13px; }
.model-bank > label, .display-label { color: #a8aaa5; font: 700 9px/1 ui-monospace, monospace; letter-spacing: .17em; text-transform: uppercase; }
.machine-controls { display: grid; min-width: 0; gap: 9px; }
.machine-select-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.select-shell { position: relative; }
.select-shell::after { position: absolute; top: 50%; right: 11px; content: ""; width: 0; height: 0; border: 4px solid transparent; border-top-color: var(--amber); transform: translateY(-15%); pointer-events: none; }
select {
  width: 100%;
  min-height: 36px;
  padding: 0 32px 0 12px;
  border: 1px solid #070808;
  border-radius: 4px;
  color: var(--amber);
  appearance: none;
  background: linear-gradient(#161a19, #080a0a);
  box-shadow: inset 0 1px 5px #000, 0 1px rgba(255,255,255,.08);
  font: 600 12px/1 ui-monospace, monospace;
}
.unified-rom-key {
  min-width: 58px;
  min-height: 36px;
  padding: 5px 8px 4px;
  border: 1px solid #070808;
  border-radius: 4px;
  color: #d7d6ce;
  background: linear-gradient(#55595a, #2d3032 52%, #232527 53%);
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 2px 0 #0c0d0e;
  cursor: pointer;
  text-transform: uppercase;
}
.unified-rom-key:hover { color: #fff; background: linear-gradient(#666a6b, #343739 52%, #292b2d 53%); }
.unified-rom-key:active { transform: translateY(1px); box-shadow: inset 0 1px rgba(255,255,255,.11), 0 1px 0 #0c0d0e; }
.unified-rom-key strong,
.unified-rom-key small { display: block; font-family: ui-monospace, monospace; line-height: 1; }
.unified-rom-key strong { color: var(--amber); font-size: 9px; letter-spacing: .09em; }
.unified-rom-key small { margin-top: 4px; color: #929694; font-size: 7px; font-weight: 700; letter-spacing: .06em; }
.unified-rom-name {
  overflow: hidden;
  color: #777b79;
  font: 600 8px/1.2 ui-monospace, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.unified-rom-name[data-custom="true"] { color: var(--amber); }

.memory-expansion { display: grid; min-width: 0; gap: 5px; cursor: pointer; }
.memory-caption,
.memory-scale { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.memory-caption { color: #8f9390; font: 700 8px/1 ui-monospace, monospace; letter-spacing: .09em; text-transform: uppercase; }
.memory-caption strong { font: inherit; }
.memory-caption output { color: var(--amber); font-weight: 800; letter-spacing: .02em; }
.memory-expansion input[type="range"] {
  width: 100%;
  height: 12px;
  margin: 0;
  accent-color: var(--amber);
  cursor: pointer;
}
.memory-expansion input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border: 1px solid #080909;
  border-radius: 1px;
  background: linear-gradient(90deg, #343839, #111314);
  box-shadow: inset 0 1px 2px #050606;
}
.memory-expansion input[type="range"]::-webkit-slider-thumb {
  width: 12px;
  height: 15px;
  margin-top: -6px;
  border: 1px solid #070808;
  border-radius: 2px;
  appearance: none;
  background: linear-gradient(#f1c75e, var(--amber));
  box-shadow: 0 1px 2px #000;
}
.memory-expansion input[type="range"]::-moz-range-track {
  height: 3px;
  border: 1px solid #080909;
  border-radius: 1px;
  background: linear-gradient(90deg, #343839, #111314);
  box-shadow: inset 0 1px 2px #050606;
}
.memory-expansion input[type="range"]::-moz-range-thumb {
  width: 11px;
  height: 14px;
  border: 1px solid #070808;
  border-radius: 2px;
  background: linear-gradient(#f1c75e, var(--amber));
  box-shadow: 0 1px 2px #000;
}
.memory-scale { color: #666b68; font: 600 7px/1 ui-monospace, monospace; text-transform: uppercase; }
.memory-scale span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.display-panel {
  min-width: 0;
  padding: 9px 16px 10px;
  border: 1px solid #080a09;
  border-radius: 4px;
  background: linear-gradient(180deg, #121a16, #08100c);
  box-shadow: inset 0 0 14px #020403, 0 1px rgba(255,255,255,.08);
}
.display-panel span { display: block; }
#status {
  overflow: hidden;
  margin-top: 5px;
  color: #8bedad;
  font: 500 13px/1.2 "SFMono-Regular", Consolas, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 0 9px rgba(114,227,154,.3);
}

.activity-bank { display: flex; justify-content: flex-end; gap: clamp(12px, 2vw, 24px); }
.activity-bank div { display: grid; grid-template-columns: auto auto; gap: 7px; align-items: center; color: #aaa; font: 700 9px/1 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.led { display: inline-block; width: 9px; height: 9px; border: 1px solid #050505; border-radius: 50%; background: #242424; box-shadow: inset 0 1px 2px #000, 0 1px rgba(255,255,255,.14); transition: background .12s, box-shadow .12s; }
.led-green.on { background: var(--green); box-shadow: 0 0 9px rgba(114,227,154,.9), inset 0 0 2px #fff; }
.led-red.on { background: var(--red); box-shadow: 0 0 10px rgba(255,75,50,.95), inset 0 0 2px #fff; }
.led-amber.on { background: var(--amber); box-shadow: 0 0 10px rgba(255,183,67,.95), inset 0 0 2px #fff; }

.screen-stage {
  position: relative;
  display: flex;
  justify-content: center;
  padding: clamp(14px, 2.5vw, 34px);
  background: #0c0e0f;
  box-shadow: inset 0 12px 30px #030404, inset 0 -8px 20px #050606;
}

.screen-brand {
  position: absolute;
  z-index: 5;
  bottom: clamp(28px, 3vw, 42px);
  left: clamp(18px, 2.6vw, 38px);
  width: clamp(82px, 8vw, 128px);
  height: auto;
  filter: drop-shadow(0 5px 5px rgba(0,0,0,.72));
  pointer-events: none;
  user-select: none;
}

.screen-frame {
  width: min(100%, calc(1024px * var(--screen-scale)));
  padding: clamp(8px, 1.2vw, 15px);
  border: 1px solid #4b4e4d;
  border-radius: 12px;
  background: linear-gradient(135deg, #383b3b, #151718 45%, #292c2d);
  box-shadow: 0 12px 28px #000, inset 0 1px rgba(255,255,255,.18), inset 0 -2px #080909;
  transition: width .2s ease;
}

.screen-glass {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 2px solid #050606;
  border-radius: 5px;
  background: #000;
  box-shadow: inset 0 0 22px #000, 0 1px rgba(255,255,255,.08);
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: default;
  image-rendering: auto;
}
canvas.mouse-ready { cursor: crosshair; }
canvas.mouse-captured { cursor: none; }

.scanline-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .17;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(0,0,0,.4) 3px, rgba(0,0,0,.4) 4px);
  mix-blend-mode: multiply;
}

.screen-glass::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.065), transparent 19%, transparent 77%, rgba(255,255,255,.025));
}

.screen-hint, .drop-hint {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 16px;
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 3px;
  color: #d4d6d2;
  background: rgba(9,11,12,.78);
  font: 600 10px/1 ui-monospace, monospace;
  letter-spacing: .04em;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.screen-glass:hover .screen-hint, canvas:focus + .scanline-overlay + .screen-hint { opacity: 1; transform: translate(-50%, 0); }
.screen-frame.dragging .drop-hint { opacity: 1; transform: translate(-50%, 0); color: var(--amber); }
.screen-frame.dragging .screen-hint { display: none; }
.screen-badge { display: flex; justify-content: space-between; margin: 10px 4px 0; color: #808481; font: 700 9px/1 ui-monospace, monospace; letter-spacing: .13em; text-transform: uppercase; }
.trinitron-mark, .trinitron-console { display: none; }

.control-deck {
  display: grid;
  grid-template-columns: .82fr 1.6fr 1.15fr .9fr;
  border-top: 1px solid #55595a;
  background: linear-gradient(110deg, #25282a, #1a1d1f 45%, #282b2d);
}

.deck-module { min-width: 0; padding: 21px clamp(14px, 1.7vw, 25px) 24px; border-right: 1px solid #080909; box-shadow: inset -1px 0 rgba(255,255,255,.055); }
.deck-module:last-child { border-right: 0; box-shadow: none; }
.module-heading { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; color: #e1dfd7; font: 800 10px/1 ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; }
.module-heading small { color: #777b79; font-size: 8px; letter-spacing: .1em; }

.transport-row { display: grid; grid-template-columns: repeat(2, minmax(58px, 1fr)); gap: 9px; }
.deck-key, .small-key, .wide-key {
  border: 1px solid #0a0b0c;
  border-radius: 3px;
  color: #d7d6ce;
  background: linear-gradient(#55595a, #2d3032 52%, #232527 53%);
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 3px 0 #0c0d0e, 0 4px 5px rgba(0,0,0,.35);
  cursor: pointer;
  text-transform: uppercase;
}
.deck-key:hover, .small-key:hover, .wide-key:hover { color: #fff; background: linear-gradient(#666a6b, #343739 52%, #292b2d 53%); }
.deck-key:active, .small-key:active, .wide-key:active { transform: translateY(2px); box-shadow: inset 0 1px rgba(255,255,255,.11), 0 1px 0 #0c0d0e; }
.deck-key { min-height: 56px; padding: 8px 5px; }
.deck-key span, .deck-key small { display: block; }
.key-icon { color: #e7e5dc; font: 800 11px/1 ui-monospace, monospace; letter-spacing: .08em; }
.deck-key small { margin-top: 7px; color: #929694; font: 700 8px/1 ui-monospace, monospace; letter-spacing: .08em; }
.danger-key .key-icon { color: #ff8b77; }
.expansion-key .key-icon { color: var(--amber); }

.media-slots { display: grid; gap: 10px; }
.media-slot {
  display: grid;
  grid-template-columns: 66px minmax(90px, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 64px;
  padding: 9px;
  border: 1px solid #0b0c0d;
  border-radius: 4px;
  background: linear-gradient(100deg, #141617, #202325);
  box-shadow: inset 0 1px rgba(255,255,255,.055);
  transition: opacity .2s;
}
.media-slot-disabled { opacity: .44; }
.media-slot[aria-disabled="true"] { filter: grayscale(.8); }
.media-slot[aria-disabled="true"] .media-actions label { pointer-events: none; }
.cassette-window { display: flex; align-items: center; justify-content: space-evenly; height: 40px; padding: 0 7px; border: 1px solid #050606; border-radius: 3px; color: #a8aaa5; background: linear-gradient(#090a0b, #181a1b); box-shadow: inset 0 2px 7px #000; font: 800 8px/1 ui-monospace, monospace; }
.cassette-window i { width: 16px; height: 16px; border: 4px dotted #777a77; border-radius: 50%; }
.cartridge-window span { padding: 7px 13px; border: 1px solid #555; border-radius: 2px; color: var(--amber); background: #111; }
.media-copy { min-width: 0; }
.media-copy strong, .media-copy span { display: block; }
.media-copy strong { color: #d7d5ce; font: 700 11px/1.2 ui-monospace, monospace; text-transform: uppercase; }
.media-copy span { overflow: hidden; margin-top: 5px; color: #858987; font: 500 10px/1.2 ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
.media-actions { display: flex; gap: 6px; }
.small-key { display: grid; place-items: center; min-width: 48px; min-height: 28px; padding: 0 8px; font: 700 8px/1 ui-monospace, monospace; letter-spacing: .05em; }
button:disabled, [aria-disabled="true"] { opacity: .42; cursor: not-allowed; }

.input-switches { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.input-device-picker { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; margin-bottom: 12px; }
.input-device-picker > span:first-child { color: #858987; font: 700 8px/1 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.input-device-picker .select-shell { display: block; min-width: 0; }
.input-device-picker select { min-height: 30px; font-size: 10px; }
.toggle-control { display: flex; align-items: center; gap: 9px; min-width: 0; cursor: pointer; }
.toggle-control > input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-track { position: relative; flex: 0 0 auto; width: 33px; height: 17px; border: 1px solid #070808; border-radius: 10px; background: #0d0f10; box-shadow: inset 0 1px 4px #000, 0 1px rgba(255,255,255,.08); }
.toggle-track i { position: absolute; top: 3px; left: 3px; width: 9px; height: 9px; border-radius: 50%; background: #686b69; transition: left .18s, background .18s, box-shadow .18s; }
.toggle-control input:checked + .toggle-track i { left: 19px; background: var(--amber); box-shadow: 0 0 7px rgba(255,183,67,.7); }
.toggle-control strong, .toggle-control small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toggle-control strong { color: #cfcec7; font: 700 10px/1.2 ui-monospace, monospace; text-transform: uppercase; }
.toggle-control small { margin-top: 3px; color: #747876; font: 500 8px/1 ui-monospace, monospace; }
.wide-key { width: 100%; min-height: 30px; font: 700 8px/1 ui-monospace, monospace; letter-spacing: .09em; }
.input-readout { display: grid; gap: 4px; margin-top: 12px; padding: 9px 10px; border: 1px solid #080909; border-radius: 3px; color: #80d59b; background: #0b120e; box-shadow: inset 0 0 8px #030504; font: 500 8px/1.25 ui-monospace, monospace; }
.input-readout span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dial-row { display: grid; grid-template-columns: 54px 1fr; column-gap: 12px; align-items: center; }
.dial-row label span, .dial-row label strong { display: block; }
.dial-row label span { color: #858987; font: 700 8px/1 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.dial-row label strong { margin-top: 5px; color: var(--amber); font: 700 13px/1 ui-monospace, monospace; }
.rotary { position: relative; grid-row: span 2; width: 52px; height: 52px; border: 1px solid #080909; border-radius: 50%; background: repeating-conic-gradient(#70716c 0 2deg, #3e413f 2deg 5deg); box-shadow: 0 3px 7px #090a0a, inset 0 0 0 5px #222526, inset 0 1px 3px #bbb; }
.rotary::after { position: absolute; inset: 8px; content: ""; border-radius: 50%; background: radial-gradient(circle at 38% 30%, #767976, #2c2f2f 65%, #161718); box-shadow: inset 0 1px 2px rgba(255,255,255,.28); }
.rotary i { position: absolute; z-index: 1; top: 7px; left: 24px; width: 3px; height: 14px; border-radius: 2px; background: var(--amber); transform-origin: 2px 19px; transform: rotate(45deg); transition: transform .2s; }
#screenScale { grid-column: 2; width: 100%; height: 3px; margin: 10px 0 2px; appearance: none; border-radius: 4px; background: #080909; box-shadow: inset 0 1px 2px #000; }
#screenScale::-webkit-slider-thumb { width: 13px; height: 13px; appearance: none; border: 1px solid #111; border-radius: 50%; background: var(--metal); box-shadow: 0 1px 2px #000; }
#screenScale::-moz-range-thumb { width: 13px; height: 13px; border: 1px solid #111; border-radius: 50%; background: var(--metal); box-shadow: 0 1px 2px #000; }
.compact-toggle { margin-top: 18px; }
.color-mode-key {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  margin-top: 14px;
  padding: 7px 10px;
  text-align: left;
}
.color-mode-key span { min-width: 0; }
.color-mode-key strong, .color-mode-key small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.color-mode-key strong { font: 700 9px/1.15 ui-monospace, monospace; letter-spacing: .05em; }
.color-mode-key small { margin-top: 4px; color: #8d918e; font: 500 7px/1 ui-monospace, monospace; text-transform: none; }
.mode-lamp { flex: 0 0 auto; width: 14px; height: 14px; border: 2px solid #090a0a; border-radius: 50%; background: conic-gradient(#e94132, #e2c732, #3bb36e, #377ed2, #e94132); box-shadow: inset 0 0 2px #fff, 0 0 5px rgba(255,255,255,.18); }
.color-mode-key.active .mode-lamp { background: #70ef91; box-shadow: inset 0 0 2px #fff, 0 0 9px rgba(112,239,145,.85); }
.expansion-key[aria-expanded="true"] {
  color: #fff;
  box-shadow: inset 0 0 0 2px var(--amber), 0 3px 0 #0c0d0e, 0 4px 5px rgba(0,0,0,.35);
}
.expansion-key.has-expansion .key-icon { text-shadow: 0 0 7px var(--amber); }

body.expansion-open { overflow: hidden; }

.expansion-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  visibility: hidden;
  background: rgba(3,4,4,.66);
  opacity: 0;
  transition: opacity .2s, visibility 0s linear .2s;
}

.expansion-panel {
  position: fixed;
  z-index: 81;
  top: 0;
  bottom: 0;
  left: 0;
  display: grid;
  width: min(390px, calc(100vw - 24px));
  grid-template-rows: auto 1fr;
  overflow: auto;
  color: #e3e4de;
  background: linear-gradient(90deg, rgba(255,255,255,.055), transparent 18%), #181b1a;
  border-right: 2px solid var(--panel-edge);
  box-shadow: 18px 0 55px rgba(0,0,0,.62), inset -1px 0 rgba(255,255,255,.08);
  transform: translateX(-102%);
  visibility: hidden;
  transition: transform .22s ease, visibility 0s linear .22s;
}

body.expansion-open .expansion-backdrop {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}
body.expansion-open .expansion-panel {
  visibility: visible;
  transform: translateX(0);
  transition-delay: 0s;
}

.expansion-panel-header {
  display: flex;
  min-height: 108px;
  padding: 27px 25px 22px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #080909;
  background: linear-gradient(#303432, #232725);
  box-shadow: inset 0 -1px rgba(255,255,255,.07);
}
.expansion-panel-header span,
.expansion-panel-header h2 { display: block; margin: 0; letter-spacing: 0; text-transform: uppercase; }
.expansion-panel-header span { margin-bottom: 7px; color: #858b86; font: 700 9px/1 ui-monospace, monospace; }
.expansion-panel-header h2 { color: #f0f1ea; font: 800 18px/1 Arial, Helvetica, sans-serif; }

.expansion-close {
  position: relative;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #080909;
  border-radius: 3px;
  color: #d8dad3;
  background: linear-gradient(#555a57, #292d2b);
  box-shadow: inset 0 1px rgba(255,255,255,.15), 0 3px #0a0b0a;
  cursor: pointer;
}
.expansion-close:hover { background: linear-gradient(#686d69, #343936); }
.expansion-close:active { transform: translateY(2px); box-shadow: 0 1px #0a0b0a; }
.expansion-close i::before,
.expansion-close i::after {
  position: absolute;
  top: 18px;
  left: 10px;
  width: 17px;
  height: 2px;
  content: "";
  background: currentColor;
}
.expansion-close i::before { transform: rotate(45deg); }
.expansion-close i::after { transform: rotate(-45deg); }

.expansion-device-list {
  align-self: stretch;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px), #111412;
}
.expansion-device {
  display: grid;
  padding: 25px;
  align-content: center;
  gap: 22px;
  border-bottom: 1px solid #353a36;
  box-shadow: inset 0 -1px #070807;
}
.sd-mapper-device { min-height: 430px; }
.unapi-device { min-height: 310px; }
.expansion-device-heading {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.expansion-device-mark {
  display: grid;
  width: 48px;
  height: 40px;
  place-items: center;
  border: 2px solid #080908;
  color: var(--amber);
  background: #222622;
  box-shadow: inset 0 0 0 1px #4d534e, 0 2px #080908;
  font: 900 12px/1 ui-monospace, monospace;
}
.expansion-device-heading h3,
.expansion-device-heading span { overflow-wrap: anywhere; letter-spacing: 0; }
.expansion-device-heading h3 { margin: 0; color: #e9eae4; font: 800 14px/1.15 Arial, Helvetica, sans-serif; text-transform: uppercase; }
.expansion-device-heading div > span { display: block; margin-top: 6px; color: #7f8580; font: 600 9px/1 ui-monospace, monospace; text-transform: uppercase; }
.expansion-device-controls { display: grid; gap: 15px; }
.expansion-device-toggle {
  width: 100%;
  min-height: 43px;
  padding: 8px 10px;
  border: 1px solid #080908;
  background: #1c201d;
  box-shadow: inset 0 1px rgba(255,255,255,.055);
}
.expansion-device-toggle > span:last-child { min-width: 0; }
.expansion-device-toggle strong { color: #dfe1da; }
.expansion-device-toggle small { color: #818780; }
.expansion-device-toggle > input:focus-visible + .toggle-track { outline: 2px solid var(--amber); outline-offset: 3px; }

.firmware-note {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 0 2px;
  color: #7f8580;
  font: 700 8px/1.2 ui-monospace, monospace;
  text-transform: uppercase;
}
.firmware-note strong { color: #adb1ad; }
.firmware-note span,
.firmware-note a { text-align: right; }
.firmware-note a { color: #aebfb1; text-underline-offset: 2px; }
.firmware-note a:hover { color: #d9e6db; }
.expansion-mode-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.expansion-mode-field legend,
.expansion-text-field > span {
  display: block;
  margin: 0 0 8px;
  color: #858b86;
  font: 700 8px/1 ui-monospace, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.segmented-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 3px;
  border: 1px solid #080908;
  border-radius: 4px;
  background: #0d100e;
  box-shadow: inset 0 1px 3px #050605;
}
.segmented-control label { min-width: 0; cursor: pointer; }
.segmented-control input { position: absolute; opacity: 0; pointer-events: none; }
.segmented-control span {
  display: grid;
  min-height: 34px;
  padding: 0 7px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 2px;
  color: #777d78;
  font: 800 9px/1 ui-monospace, monospace;
  text-align: center;
  text-transform: uppercase;
}
.segmented-control input:checked + span { border-color: #4f5651; color: #f1f2eb; background: linear-gradient(#3a403c, #252a27); box-shadow: inset 0 1px rgba(255,255,255,.1), 0 1px #060706; }
.segmented-control input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 2px; }

.extension-media-list { display: grid; gap: 8px; }
.extension-media-slot {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto auto;
  gap: 7px;
  align-items: center;
  min-height: 47px;
  padding: 7px 8px;
  border: 1px solid #080908;
  border-radius: 3px;
  background: #141816;
  transition: opacity .2s;
}
.extension-media-slot[aria-disabled="true"] { opacity: .42; }
.extension-media-slot[aria-disabled="true"] label { pointer-events: none; }
.extension-media-slot div { min-width: 0; }
.extension-media-slot strong,
.extension-media-slot span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.extension-media-slot strong { color: #d9dbd5; font: 800 9px/1 ui-monospace, monospace; }
.extension-media-slot span { margin-top: 4px; color: #777d78; font: 600 8px/1 ui-monospace, monospace; }
.extension-activity-lamp { width: 8px; height: 8px; border: 1px solid #050605; border-radius: 50%; background: #343934; }
.extension-activity-lamp.on { background: #64dc83; box-shadow: 0 0 7px rgba(100,220,131,.7); }
.extension-small-key {
  display: grid;
  min-width: 39px;
  min-height: 25px;
  padding: 0 5px;
  place-items: center;
  border: 1px solid #070807;
  border-radius: 2px;
  color: #cfd2cc;
  background: linear-gradient(#484d49, #282c29);
  box-shadow: inset 0 1px rgba(255,255,255,.1), 0 2px #070807;
  cursor: pointer;
  font: 800 7px/1 ui-monospace, monospace;
  text-transform: uppercase;
}
button.extension-small-key:disabled { opacity: .35; }

.expansion-text-field { display: block; min-width: 0; }
.expansion-text-field input {
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid #080908;
  border-radius: 2px;
  color: #d8dbd4;
  background: #090c0a;
  box-shadow: inset 0 1px 4px #030403;
  font: 600 10px/1 ui-monospace, monospace;
}
.expansion-text-field input[aria-invalid="true"] { border-color: #b74b43; }
.relay-state { display: flex; align-items: center; gap: 8px; min-height: 18px; color: #7d837e; font: 700 8px/1.2 ui-monospace, monospace; text-transform: uppercase; }
.relay-state i { flex: 0 0 auto; width: 8px; height: 8px; border: 1px solid #050605; border-radius: 50%; background: #343934; box-shadow: inset 0 1px rgba(255,255,255,.12); }
.relay-state[data-state="connecting"] i { background: #c6a84a; }
.relay-state[data-state="online"] { color: #9fd4a9; }
.relay-state[data-state="online"] i { background: #64dc83; box-shadow: 0 0 7px rgba(100,220,131,.65); }
.relay-state[data-state="error"] { color: #d78982; }
.relay-state[data-state="error"] i { background: #c44c43; }
.relay-state i.activity { background: #f5f5ef; box-shadow: 0 0 9px rgba(255,255,255,.9); }
.relay-certificate-action { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; }
.relay-certificate-action .extension-small-key { min-width: 112px; min-height: 30px; }
.relay-certificate-action span { color: #777d78; font: 600 8px/1.4 ui-monospace, monospace; }
.relay-details-link { margin: -6px 0 0; color: #777d78; font: 600 8px/1.4 ui-monospace, monospace; }
.relay-details-link a { color: #b7cbbb; text-underline-offset: 2px; }
.relay-details-link a:hover { color: #d9e6db; }
.extension-help { margin: 0; color: #777d78; font: 600 8px/1.45 ui-monospace, monospace; }

.sony-msx-keyboard { display: none; }

.receiver-footer { display: flex; justify-content: space-between; gap: 20px; padding: 11px clamp(16px, 2.5vw, 32px); border-top: 1px solid #343738; color: #666a68; background: #121416; font: 700 8px/1 ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; }

.toast { position: fixed; z-index: 20; right: 22px; bottom: 22px; max-width: min(380px, calc(100vw - 44px)); padding: 12px 15px; border: 1px solid #6b5732; border-radius: 4px; color: #f2dec0; background: rgba(24,20,14,.95); box-shadow: 0 10px 30px #000; font: 600 11px/1.35 ui-monospace, monospace; opacity: 0; transform: translateY(12px); transition: opacity .2s, transform .2s; pointer-events: none; }
.toast.show { opacity: 1; transform: translateY(0); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.screen-frame:fullscreen { display: grid; width: 100vw; height: 100vh; padding: 0; place-items: center; border: 0; border-radius: 0; background: #000; }
.screen-frame:fullscreen .screen-glass { width: min(100vw, calc(100vh * 4 / 3)); height: min(100vh, calc(100vw * 3 / 4)); }
.screen-frame:fullscreen .screen-badge { display: none; }


@media (max-width: 1180px) {
  .screen-stage { padding-bottom: 86px; }
  .screen-brand { bottom: 12px; width: 64px; }
  .control-deck { grid-template-columns: .8fr 1.6fr 1.2fr; }
  .screen-module { grid-column: 1 / -1; border-top: 1px solid #080909; }
  .screen-module .module-heading { margin-bottom: 11px; }
  .screen-module { display: grid; grid-template-columns: auto minmax(250px, 2fr) auto minmax(180px, 1fr); align-items: center; gap: 20px; }
  .screen-module .module-heading { margin: 0; }
  .screen-module .compact-toggle { margin: 0; justify-self: end; }
  .screen-module .color-mode-key { width: 100%; margin: 0; }
}

@media (max-width: 820px) {
  .workbench { padding-inline: 8px; }
  .masthead-meta span:first-child { display: none; }
  .receiver-top { grid-template-columns: 1fr 1fr; }
  .display-panel { grid-column: 1 / -1; grid-row: 2; }
  .activity-bank { justify-content: flex-end; }
  .control-deck { grid-template-columns: 1fr 1fr; }
  .media-module { grid-column: 1 / -1; grid-row: 1; border-bottom: 1px solid #080909; }
  .input-module { border-top: 1px solid #080909; }
  .screen-module { grid-template-columns: 1fr; }
  .screen-module .compact-toggle { justify-self: start; }
}

@media (max-width: 560px) {
  .expansion-panel { width: min(360px, calc(100vw - 12px)); }
  .expansion-panel-header { min-height: 96px; padding: 23px 20px 19px; }
  .expansion-device { padding: 23px 20px; }
  .workbench { padding-top: 16px; }
  .masthead { align-items: center; }
  .brand-mark { display: none; }
  .power-state span { display: none; }
  .receiver-top { grid-template-columns: 1fr; gap: 12px; }
  .display-panel, .activity-bank { grid-column: 1; grid-row: auto; }
  .activity-bank { justify-content: flex-start; }
  .screen-stage { padding: 8px 8px 64px; }
  .screen-brand { bottom: 8px; left: 14px; width: 48px; }
  .screen-frame { padding: 6px; border-radius: 7px; }
  .screen-badge { display: none; }
  .control-deck { grid-template-columns: 1fr; }
  .deck-module { border-right: 0; border-bottom: 1px solid #080909; }
  .media-module { grid-column: auto; grid-row: auto; }
  .media-slot { grid-template-columns: 58px 1fr; }
  .media-actions { grid-column: 1 / -1; }
  .small-key { min-height: 32px; flex: 1; }
  .receiver-footer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}