:root {
  color-scheme: dark;
  --vsa-shell: #b6a47d;
  --vsa-panel: #c9b98f;
  --vsa-ink: #17150f;
  --vsa-charcoal: #1d1d18;
  --vsa-green: #8cff67;
  --vsa-amber: #ffc44a;
  --vsa-border: rgba(24, 21, 14, 0.64);
}

body.vsa-body {
  background: #100f0c;
  color: #e8d8ad;
}

.vsa-page {
  max-width: 1460px;
  margin: 0 auto;
  padding: 18px clamp(8px, 1.8vw, 24px) 38px;
}

.vsa-back-link {
  display: inline-flex;
  color: #ebdbb4;
  font: 800 0.74rem/1.2 "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
  letter-spacing: 0.06em;
  margin: 0 0 10px;
  text-decoration: none;
  text-transform: uppercase;
}

.vsa-instrument {
  position: relative;
  overflow: hidden;
  border: 2px solid #4b412d;
  border-radius: 20px;
  padding: 12px 16px 14px;
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.18), transparent 18%),
    linear-gradient(90deg, rgba(48, 38, 20, 0.2), transparent 18%, rgba(255, 255, 255, 0.1) 49%, rgba(42, 35, 23, 0.2)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.026) 0 1px, transparent 1px 5px),
    url("./assets/fg82-faceplate-texture.jpg") center / cover,
    var(--vsa-shell);
  background-blend-mode: normal, normal, normal, multiply, normal;
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.62), inset 0 2px 2px rgba(255, 255, 255, 0.38), inset 0 -8px 18px rgba(47, 38, 22, 0.28);
}

.vsa-instrument::before,
.vsa-instrument::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(31, 27, 18, 0.5);
  border-radius: 14px;
  pointer-events: none;
}

.vsa-instrument::after {
  inset: 14px;
  border-color: rgba(246, 231, 185, 0.24);
}

.vsa-rack-top,
.vsa-face-grid,
.vsa-hardware-strip,
.vsa-bottom-black-strip {
  position: relative;
  z-index: 1;
}

.vsa-rack-top {
  display: grid;
  grid-template-columns: 22px auto 1fr auto auto 22px;
  gap: 18px;
  align-items: center;
  min-height: 42px;
  border-bottom: 2px solid rgba(50, 42, 28, 0.46);
  color: var(--vsa-ink);
  text-transform: uppercase;
}

.vsa-rack-top h1 {
  margin: 0;
  font: 900 clamp(1.25rem, 2.1vw, 2rem)/1 "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
  letter-spacing: 0.045em;
}

.vsa-rack-top p {
  margin: 0;
  text-align: center;
  font: 900 clamp(0.82rem, 1.25vw, 1.08rem)/1 "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
  letter-spacing: 0.08em;
}

.vsa-serial-badge {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 2px solid #15130f;
  border-radius: 4px;
  padding: 5px 8px;
  background: rgba(35, 32, 25, 0.18);
  font: 800 0.68rem/1 Consolas, "Liberation Mono", monospace;
}

.vsa-serial-badge strong {
  color: #d9c48d;
  background: #181812;
  padding: 4px 8px;
}

.vsa-screw {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  justify-self: center;
  background:
    linear-gradient(45deg, transparent 42%, #060605 43% 57%, transparent 58%),
    radial-gradient(circle at 35% 28%, #5d553e, #15140f 66%, #050504);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), 0 1px 2px rgba(0, 0, 0, 0.45);
}

.vsa-face-grid {
  display: grid;
  grid-template-columns: 215px minmax(540px, 1fr) 215px 164px;
  gap: 8px;
  align-items: start;
  padding-top: 8px;
}

.vsa-panel,
.vsa-crt-stage,
.vsa-bottom-panel,
.vsa-power-bay,
.vsa-model-plate,
.vsa-output-bay {
  border: 1px solid var(--vsa-border);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.17), transparent 22%, rgba(40, 32, 18, 0.12)),
    url("./assets/fg82-faceplate-texture.jpg") center / cover,
    var(--vsa-panel);
  background-blend-mode: normal, soft-light, normal;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 -4px 8px rgba(50, 40, 22, 0.18);
}

.vsa-panel {
  padding: 8px;
}

.vsa-panel-dark {
  color: #e9dbb2;
  background: linear-gradient(#353329, #1c1d18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), inset 0 -4px 12px rgba(0, 0, 0, 0.38);
}

.vsa-panel-title,
.vsa-power-bay p,
.vsa-output-bay p {
  margin: 0;
  color: var(--vsa-ink);
  text-align: center;
  font: 900 0.75rem/1 "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vsa-panel-title {
  padding: 5px 7px;
  border-radius: 4px 4px 2px 2px;
  background: rgba(31, 28, 20, 0.16);
  box-shadow: inset 0 -1px rgba(255, 255, 255, 0.22);
}

.vsa-panel-dark .vsa-panel-title {
  color: #e9d7a8;
  background: #11120f;
}

.vsa-panel-title-row {
  display: grid;
  grid-template-columns: 1fr 18px;
  gap: 6px;
  align-items: center;
}

.vsa-control-stack {
  display: grid;
  gap: 5px;
}

.vsa-select-label {
  display: grid;
  gap: 5px;
  padding: 7px 7px 6px;
  border: 1px solid rgba(37, 31, 20, 0.35);
  border-radius: 5px;
  color: var(--vsa-ink);
  font: 900 0.65rem/1 "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.vsa-select-label select {
  width: 100%;
  min-height: 29px;
  border: 2px solid #15150f;
  border-radius: 4px;
  background: linear-gradient(#313028, #0f100d);
  color: var(--vsa-green);
  font: 800 0.72rem/1 Consolas, "Liberation Mono", monospace;
  text-transform: uppercase;
}

.vsa-knob-control {
  display: grid;
  grid-template-columns: 82px 1fr;
  grid-template-areas:
    "label label"
    "knob value"
    "knob number";
  align-items: center;
  gap: 2px 8px;
  padding: 7px 7px 6px;
  border: 1px solid rgba(37, 31, 20, 0.35);
  border-radius: 5px;
}

.vsa-control-label {
  grid-area: label;
  color: var(--vsa-ink);
  text-align: center;
  font: 900 0.68rem/1 "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.vsa-knob-well {
  grid-area: knob;
  justify-self: center;
  position: relative;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background:
    conic-gradient(from -135deg, transparent 0deg 11deg, rgba(28, 24, 16, 0.62) 11deg 13deg, transparent 13deg 27deg, rgba(28, 24, 16, 0.62) 27deg 29deg, transparent 29deg 44deg, rgba(28, 24, 16, 0.62) 44deg 46deg, transparent 46deg 62deg, rgba(28, 24, 16, 0.62) 62deg 64deg, transparent 64deg 78deg, rgba(28, 24, 16, 0.62) 78deg 80deg, transparent 80deg 270deg),
    radial-gradient(circle, rgba(32, 28, 20, 0.1) 0 52%, rgba(34, 30, 22, 0.28) 53% 56%, transparent 57%);
}

.vsa-knob {
  position: relative;
  overflow: hidden;
  width: 58px;
  height: 58px;
  border: 2px solid #312a1c;
  border-radius: 50%;
  background: #1c1b15;
  box-shadow: 0 5px 9px rgba(0, 0, 0, 0.36), inset 0 1px 3px rgba(255, 255, 255, 0.55), inset 0 -7px 10px rgba(0, 0, 0, 0.25);
  cursor: ns-resize;
  touch-action: none;
}

.vsa-knob:hover,
.vsa-knob.is-dragging {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.vsa-knob:focus-visible,
.vsa-mode-button:focus-visible,
.vsa-preset-button:focus-visible,
.vsa-file-button:focus-within {
  outline: 3px solid #7dfd69;
  outline-offset: 2px;
}

.vsa-knob-cap {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: url("./assets/fg82-knob-cap.jpg") center / 122% 122% no-repeat;
  transform: rotate(var(--knob-rotation, 0deg));
}

.vsa-knob-cap::after {
  content: none;
}

.vsa-knob-value,
.vsa-number {
  border: 2px solid #15150f;
  border-radius: 3px;
  background: #071009;
  color: var(--vsa-green);
  font: 800 0.92rem/1 Consolas, "Liberation Mono", monospace;
  text-align: right;
  box-shadow: inset 0 0 8px rgba(33, 255, 82, 0.12), 0 1px rgba(255, 255, 255, 0.12);
}

.vsa-knob-value {
  grid-area: value;
  min-width: 72px;
  padding: 7px 6px 6px;
}

.vsa-number {
  grid-area: number;
  width: 100%;
  min-width: 0;
  padding: 4px 5px;
  font-size: 0.72rem;
}

.vsa-input-plate {
  margin-top: 3px;
  border-top: 1px solid rgba(33, 29, 20, 0.35);
  padding-top: 7px;
  color: #1e1b14;
  text-align: center;
  font: 900 0.62rem/1.25 "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
  letter-spacing: 0.08em;
}

.vsa-crt-stage {
  min-width: 0;
  padding: 10px 12px 8px;
  background: linear-gradient(145deg, #827757, #c5b590 44%, #6b624b);
}

.vsa-crt-bezel {
  display: grid;
  border-radius: 30px;
  padding: clamp(13px, 1.5vw, 22px);
  background:
    radial-gradient(ellipse at 50% 10%, rgba(255, 255, 255, 0.08), transparent 36%),
    url("./assets/fg82-crt-bezel.jpg") center / cover,
    #151612;
  background-blend-mode: screen, normal, normal;
  box-shadow: inset 0 0 0 8px #2a2920, inset 0 0 26px #050504, 0 6px 14px rgba(0, 0, 0, 0.42);
}

.vsa-crt-glass {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  width: 100%;
  border: 2px solid #080a07;
  border-radius: 22px;
  background: #06170b;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.9), inset 0 0 90px rgba(42, 255, 62, 0.08);
}

.vsa-crt-glass canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.vsa-crt-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 54%, rgba(0, 0, 0, 0.34) 100%);
  mix-blend-mode: multiply;
}

.vsa-readout {
  min-height: 23px;
  padding: 6px 2px 0;
  color: #132914;
  font: 900 0.7rem/1.2 Consolas, "Liberation Mono", monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.vsa-command-stack {
  display: grid;
  gap: 6px;
  align-content: start;
}

.vsa-mode-bank,
.vsa-preset-bank {
  display: grid;
  gap: 5px;
  padding-top: 5px;
}

.vsa-mode-button,
.vsa-preset-button,
.vsa-file-button {
  position: relative;
  min-height: 26px;
  border: 2px solid #0e0f0c;
  border-radius: 4px;
  background: linear-gradient(#343229, #151611);
  color: #d7c396;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.13), 0 3px 0 #080906, 0 6px 8px rgba(0, 0, 0, 0.28);
  font: 900 0.62rem/1 "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
  letter-spacing: 0.065em;
  text-transform: uppercase;
  cursor: pointer;
}

.vsa-mode-button::before,
.vsa-preset-button::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: #171812;
  box-shadow: inset 0 0 3px #000;
}

.vsa-mode-button[aria-pressed="true"],
.vsa-preset-button[aria-pressed="true"] {
  color: #f2e6bd;
  transform: translateY(2px);
  box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.1), 0 1px 0 #080906, 0 0 14px rgba(120, 255, 93, 0.22);
}

.vsa-mode-button[aria-pressed="true"]::before,
.vsa-preset-button[aria-pressed="true"]::before {
  background: radial-gradient(circle at 35% 30%, #eaffc5, #81ff4d 40%, #196d20 100%);
  box-shadow: 0 0 10px rgba(130, 255, 76, 0.9);
}

.vsa-mode-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.vsa-amber-lamp {
  width: 13px;
  height: 13px;
  border: 2px solid #13120e;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff2b7, var(--vsa-amber) 45%, #6f3d08);
  box-shadow: 0 0 9px rgba(255, 196, 74, 0.75);
}

.vsa-service-note,
.vsa-model-note {
  margin: 3px 0 0;
  color: #dfd0a6;
  font: 700 0.48rem/1.15 Arial, sans-serif;
}

.vsa-service-note {
  max-height: 1.05em;
  overflow: hidden;
}

.vsa-file-button {
  display: grid;
  place-items: center;
  margin-top: 5px;
}

.vsa-compact-file {
  min-height: 24px;
}

.vsa-file-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.vsa-hardware-strip {
  display: grid;
  grid-template-columns: 282px minmax(128px, 160px) 1fr 170px;
  gap: 8px;
  margin-top: 8px;
}

.vsa-power-bay,
.vsa-model-plate,
.vsa-output-bay,
.vsa-bottom-panel {
  min-width: 0;
  padding: 8px;
}

.vsa-power-bay {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 10px;
  align-items: center;
}

.vsa-power-switch {
  display: grid;
  gap: 2px;
  width: 38px;
  height: 58px;
  margin: 8px auto 0;
  border: 2px solid #11110e;
  border-radius: 4px;
  background: linear-gradient(#23231d 0 49%, #0f100d 50% 100%);
  color: #d8c89d;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.12), 0 3px 5px rgba(0, 0, 0, 0.35);
}

.vsa-power-switch span {
  display: grid;
  place-items: center;
  font: 800 0.7rem/1 Consolas, monospace;
}

.vsa-beam-ready {
  display: grid;
  grid-template-columns: 1fr 42px;
  gap: 8px;
  align-items: center;
}

.vsa-lamp {
  width: 32px;
  height: 32px;
  border: 3px solid #1d1d16;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #e4ffd8 0 8%, #75ff4e 18%, #149220 55%, #082b10 100%);
  box-shadow: 0 0 14px rgba(115, 255, 76, 0.86), inset 0 0 7px rgba(0, 0, 0, 0.7);
}

.vsa-model-plate {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  background: linear-gradient(#b4a17a, #927f5a);
}

.vsa-model-plate strong {
  color: #4a402c;
  font: 900 2rem/1 "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
  letter-spacing: 0.08em;
}

.vsa-model-plate span {
  color: #1e1b14;
  font: 900 0.55rem/1.2 "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vsa-bottom-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.15), transparent 24%, rgba(35, 28, 18, 0.12)),
    url("./assets/fg82-faceplate-texture.jpg") center / cover,
    #b8a67f;
  background-blend-mode: normal, soft-light, normal;
}

.vsa-bottom-panel > .vsa-panel-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.vsa-bottom-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(82px, 1fr));
  gap: 7px;
}

.vsa-bottom-panel .vsa-knob-control {
  grid-template-columns: 1fr;
  grid-template-areas:
    "label"
    "knob"
    "value"
    "number";
  justify-items: center;
  padding: 2px 4px 0;
  border: 0;
}

.vsa-bottom-panel .vsa-knob-well {
  width: 67px;
  height: 67px;
}

.vsa-bottom-panel .vsa-knob {
  width: 53px;
  height: 53px;
  background: #11120e;
}

.vsa-bottom-panel .vsa-control-label {
  font-size: 0.62rem;
}

.vsa-bottom-panel .vsa-knob-value,
.vsa-bottom-panel .vsa-number {
  max-width: 76px;
  font-size: 0.62rem;
}

.vsa-output-bay {
  display: grid;
  align-content: center;
  gap: 8px;
}

.vsa-output-bay .vsa-panel-title {
  padding: 0;
  background: transparent;
}

.vsa-jack-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.vsa-jack {
  display: grid;
  justify-items: center;
  gap: 5px;
  color: #1d1a13;
  font: 900 0.55rem/1 "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

.vsa-jack b {
  width: 34px;
  height: 34px;
  border: 3px solid #2a2518;
  border-radius: 50%;
  background: radial-gradient(circle, #050504 0 22%, #cbb789 24% 38%, #151611 41% 100%);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6), 0 3px 5px rgba(0, 0, 0, 0.25);
}

.vsa-output-bay p {
  font-size: 0.58rem;
  line-height: 1.25;
}

.vsa-bottom-black-strip {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap: 16px;
  align-items: center;
  min-height: 36px;
  margin-top: 8px;
  border: 1px solid #080906;
  border-radius: 4px;
  padding: 4px 18px;
  background: #171812;
  color: #4dca55;
  text-align: center;
  font: 800 0.62rem/1.25 Consolas, "Liberation Mono", monospace;
  letter-spacing: 0.045em;
}

.vsa-footer-note {
  max-width: 930px;
  margin: 20px auto 0;
  color: #e6d6af;
  font: 500 0.92rem/1.55 Arial, sans-serif;
}

.vsa-footer-note a {
  color: #9cff79;
}

@media (max-width: 1260px) {
  .vsa-face-grid {
    grid-template-columns: minmax(190px, 0.7fr) minmax(480px, 1.8fr) minmax(190px, 0.7fr);
  }

  .vsa-command-stack {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .vsa-hardware-strip {
    grid-template-columns: 220px 150px 1fr;
  }

  .vsa-output-bay {
    grid-column: 1 / -1;
  }
}

@media (max-width: 980px) {
  .vsa-rack-top {
    grid-template-columns: 18px 1fr auto 18px;
    gap: 10px;
  }

  .vsa-rack-top p:first-of-type {
    display: none;
  }

  .vsa-face-grid {
    grid-template-columns: 1fr 1fr;
  }

  .vsa-crt-stage {
    grid-column: 1 / -1;
    order: -1;
  }

  .vsa-command-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vsa-hardware-strip {
    grid-template-columns: 1fr;
  }

  .vsa-bottom-grid {
    grid-template-columns: repeat(3, minmax(92px, 1fr));
  }
}

@media (max-width: 640px) {
  .vsa-page {
    padding-inline: 8px;
  }

  .vsa-instrument {
    border-radius: 14px;
    padding: 9px;
  }

  .vsa-rack-top {
    grid-template-columns: 16px 1fr 16px;
  }

  .vsa-rack-top h1 {
    text-align: center;
  }

  .vsa-rack-top p,
  .vsa-serial-badge {
    display: none;
  }

  .vsa-face-grid,
  .vsa-command-stack,
  .vsa-bottom-black-strip {
    grid-template-columns: 1fr;
  }

  .vsa-channel-x,
  .vsa-channel-y,
  .vsa-command-stack {
    order: 2;
  }

  .vsa-crt-bezel {
    border-radius: 20px;
    padding: 10px;
  }

  .vsa-crt-glass {
    border-radius: 13px;
  }

  .vsa-bottom-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}