:root {
    --ground: #05090b;
    --ground-lift: #0a1216;
    --ink: #c8dedd;
    --ink-dim: #6e8a8b;
    --ink-faint: #3d5254;
    --edge: rgba(156, 220, 218, 0.18);
    --edge-hot: rgba(156, 220, 218, 0.45);

    --idle-bg: #00405b;
    --idle-fg: #9cdcda;
    --error-bg: #3c1200;
    --error-fg: #dc9c9c;
    --success-bg: #245b00;
    --success-fg: #98e09b;

    --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  }

  * { box-sizing: border-box; }

  html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
  }

  body {
    background: var(--ground);
    color: var(--ink);
    font-family: var(--mono);
    -webkit-font-smoothing: antialiased;
  }

  /* ---- stage ---------------------------------------------------------- */

  .stage {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: clamp(12px, 3vh, 40px);
  }

  .bezel {
    position: relative;
    width: min(100%, calc((100vh - 2 * clamp(12px, 3vh, 40px)) * 4 / 3));
    aspect-ratio: 4 / 3;
    border: 1px solid var(--edge);
    background: #000;
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.8),
      0 24px 80px -20px rgba(0, 0, 0, 0.9);
  }

  #screen {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
  }

  /* scanline + vignette pass, purely decorative */
  .crt {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.16) 0px,
        rgba(0, 0, 0, 0.16) 1px,
        rgba(0, 0, 0, 0) 1px,
        rgba(0, 0, 0, 0) 3px
      ),
      radial-gradient(
        ellipse 78% 68% at 50% 50%,
        rgba(0, 0, 0, 0) 40%,
        rgba(0, 0, 0, 0.55) 100%
      );
  }

  /* ---- readout -------------------------------------------------------- */

  .hud {
    position: fixed;
    top: clamp(14px, 2.4vh, 28px);
    left: clamp(14px, 2.4vw, 32px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: 0.06em;
    pointer-events: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  }

  .hud h1 {
    margin: 0;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ink);
  }

  .hud h1 span {
    display: block;
    margin-top: 4px;
    font-weight: 400;
    letter-spacing: 0.14em;
    color: var(--ink-faint);
  }

  .readout {
    display: grid;
    grid-template-columns: auto auto;
    gap: 2px 16px;
    font-variant-numeric: tabular-nums;
  }

  .readout dt {
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.14em;
  }

  .readout dd {
    margin: 0;
    color: var(--ink-dim);
  }

  .readout dd.hot { color: var(--ink); }

  .swatches {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .swatch {
    width: 9px;
    height: 9px;
    border: 1px solid rgba(255, 255, 255, 0.25);
  }

  /* ---- dock ----------------------------------------------------------- */

  .dock {
    position: fixed;
    left: 50%;
    bottom: clamp(14px, 3vh, 34px);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: min(100%, 760px);
    padding: 0 16px;
  }

  .keys {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .key {
    appearance: none;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 132px;
    padding: 9px 14px 10px;
    border: 1px solid var(--edge);
    border-radius: 0;
    background: rgba(5, 12, 15, 0.82);
    backdrop-filter: blur(6px);
    color: var(--ink-dim);
    font-family: var(--mono);
    font-size: 11px;
    text-align: left;
    cursor: pointer;
    transition: border-color 120ms linear, color 120ms linear, background-color 120ms linear;
  }

  .key .label {
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
  }

  .key .sub {
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--ink-faint);
  }

  .key .sub b {
    font-weight: 400;
    color: var(--ink-dim);
  }

  .key:hover,
  .key:focus-visible {
    border-color: var(--tint, var(--edge-hot));
    background: rgba(10, 22, 27, 0.9);
    outline: none;
  }

  .key:focus-visible {
    box-shadow: 0 0 0 1px var(--tint, var(--edge-hot));
  }

  .key[aria-pressed="true"] {
    border-color: var(--tint, var(--edge-hot));
    background: color-mix(in srgb, var(--tint, #9cdcda) 14%, rgba(5, 12, 15, 0.86));
  }

  .key[aria-pressed="true"] .label { color: var(--tint, var(--ink)); }

  /* the sound key toggles rather than selecting a disc state, so it sits
     slightly apart and stays dim until it is actually on */
  .key-sound {
    margin-left: 10px;
    border-style: dashed;
  }

  .key-sound[aria-pressed="true"] {
    border-style: solid;
  }

  .hint {
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--ink-faint);
    text-align: center;
    font-family: var(--sans);
    letter-spacing: 0.02em;
    max-width: 62ch;
    line-height: 1.6;
    text-wrap: balance;
  }

  .hint code {
    font-family: var(--mono);
    color: var(--ink-dim);
  }

  @media (max-width: 720px) {
    .hud { font-size: 10px; }
    .key { min-width: 0; flex: 1 1 44%; }
    .key .sub { display: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .crt { display: none; }
  }