:root{
  --bg:#070506;
  --panel:#130d10;
  --ink:#f4eadf;
  --muted:#b8a9a0;
  --cyan:#75f7e1;
  --amber:#ffc766;
  --pink:#ff7fae;
  --orange:#ff9f43;
  --yellow:#ffe26f;
  --green:#75e58f;
  --blue:#79bfff;
  --purple:#c49aff;
  --red:#ff7169;
  --line:#4a343c;
  --shadow:rgba(0,0,0,.58);
  --phosphor-copy:#bff2e6
}

*{box-sizing:border-box}
html{background:var(--bg);height:100%}
body{
  margin:0;
  min-height:100vh;
  padding:0;
  color:var(--ink);
  background:var(--bg);
  font:13px 'Share Tech Mono',monospace;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}

/* =====================================================================
   WR-6 CHASSIS — the entire viewport IS the instrument faceplate
====================================================================== */
.wr6-chassis{
  width:100%;
  max-width:1080px;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  position:relative;
  background:
    linear-gradient(115deg,rgba(255,255,255,.035),transparent 18%,rgba(0,0,0,.12) 42%,rgba(255,255,255,.018) 63%,rgba(0,0,0,.22)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0,rgba(255,255,255,.012) 1px,transparent 1px,transparent 4px),
    repeating-linear-gradient(0deg,transparent 0,transparent 2px,rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 4px),
    linear-gradient(180deg,#32343a 0%,#2a2c32 3%,#232529 50%,#1e2024 80%,#191b1f 100%);
  border-left:1px solid rgba(255,255,255,.06);
  border-right:1px solid rgba(255,255,255,.06);
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.8),
    0 0 80px rgba(0,0,0,.7);
  padding:0 0 2px;
}
.wr6-chassis::before,.wr6-chassis::after,
.wr6-chassis-screw-bl,.wr6-chassis-screw-br{
  content:"";position:absolute;
  width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#9a9c9e,#55585b 55%,#222 100%);
  box-shadow:inset 0 0 0 1px #1a1b1c,0 1px 1px rgba(0,0,0,.7);
  z-index:10;
}
.wr6-chassis::before{top:10px;left:10px}
.wr6-chassis::after{top:10px;right:10px}
.wr6-chassis-screw-bl{position:absolute;bottom:34px;left:10px}
.wr6-chassis-screw-br{position:absolute;bottom:34px;right:10px}

/* =====================================================================
   NAMEPLATE — a separate anodized aluminum plate riveted to the
   chassis, distinct in reflectivity and material from the steel shell
   it sits on. The product name no longer shouts across the header.
====================================================================== */
.wr6-nameplate{
  flex:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:16px 20px;
  border-bottom:1px solid rgba(0,0,0,.5);
  background:linear-gradient(180deg,rgba(0,0,0,.1),transparent 60%);
}
.wr6-plate{
  position:relative;
  flex:1;
  max-width:520px;
  padding:8px 16px;
  border-radius:2px;
  background:linear-gradient(160deg,#d8d3c4 0%,#c3bda9 40%,#aaa38c 60%,#c9c3ae 100%);
  box-shadow:
    0 3px 6px rgba(0,0,0,.5),
    0 1px 0 rgba(255,255,255,.5) inset,
    0 -1px 2px rgba(0,0,0,.25) inset;
}
.wr6-plate-rivet{
  position:absolute;width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#f2efe6,#8a8471 55%,#4a4638 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.3);
}
.wr6-plate-rivet.tl{top:4px;left:4px}
.wr6-plate-rivet.tr{top:4px;right:4px}
.wr6-plate-rivet.bl{bottom:4px;left:4px}
.wr6-plate-rivet.br{bottom:4px;right:4px}
.wr6-plate-row1,.wr6-plate-row2,.wr6-plate-row3{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
}
.wr6-mfg{
  font-size:8px;letter-spacing:.2em;text-transform:uppercase;
  color:#5a5442;font-family:'Share Tech Mono',monospace;
}
.wr6-serial{font-size:8px;color:#6b6552;letter-spacing:.08em;font-family:'Share Tech Mono',monospace}
.wr6-model{
  font-family:'Share Tech Mono',monospace;
  font-weight:700;
  font-size:12px;
  color:#2a2620;
  letter-spacing:.1em;
}
.wr6-title{
  font-family:'Share Tech Mono',monospace;
  font-weight:700;
  font-size:11px;
  color:#3a3428;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.wr6-subtitle{
  font-size:7px;letter-spacing:.1em;
  color:#7a7460;text-transform:uppercase;
}
.wr6-cal-due{font-size:7px;color:#7a7460;letter-spacing:.04em}
.wr6-cal-due s{color:#948d76}

.wr6-power-cluster{display:flex;align-items:center;gap:8px;flex:none}
.wr6-lamp-group{display:flex;gap:7px}
.wr6-lamp-pair{display:flex;flex-direction:column;align-items:center;gap:2px}
.wr6-lamp-pair i{font-style:normal;font-size:7px;letter-spacing:.06em;color:rgba(233,226,207,.32)}

.wr6-nav-link{
  font-size:9px;letter-spacing:.12em;color:var(--cyan);text-decoration:none;
  text-transform:uppercase;padding:4px 8px;border:1px solid rgba(117,247,225,.25);
  border-radius:3px;
}
.wr6-nav-link:hover{border-color:var(--cyan);background:rgba(117,247,225,.06)}

/* =====================================================================
   MODE STRIP — thin status banner below nameplate
====================================================================== */
.wr6-mode-strip{
  flex:none;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber);text-align:center;
  padding:5px 12px;
  border-bottom:1px solid rgba(255,199,102,.2);
  background:linear-gradient(90deg,transparent,rgba(255,199,102,.04),transparent);
}

/* =====================================================================
   ANNUNCIATOR — a hardware indicator strip: lamp, small caption, small
   readout, stacked tight and inline. Deliberately not a nav bar: no
   evenly divided full-height cells, no giant dashboard digits.
====================================================================== */
.wr6-annunciator{
  flex:none;
  display:flex;
  gap:0;
  padding:6px 16px;
  background:#101213;
  border-bottom:1px solid rgba(0,0,0,.55);
  box-shadow:inset 0 3px 5px rgba(0,0,0,.4);
}
.wr6-annun-cell{
  display:flex;align-items:center;gap:5px;
  padding:4px 14px 4px 0;
  margin-right:14px;
  border-right:1px solid rgba(233,226,207,.08);
}
.wr6-annun-cell:last-child{border-right:none;margin-right:0}
.wr6-annun-label{
  font-size:8px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(233,226,207,.35);
}
.wr6-annun-value{font-size:11px;letter-spacing:.03em}
.wr6-completion-annun{margin:8px 0;border-radius:4px;border-bottom:none;box-shadow:inset 0 2px 5px rgba(0,0,0,.4)}

/* =====================================================================
   CONTENT — the variable-height middle of the chassis (gate + mission
   body + lower furniture). Grows to fill the space between the
   annunciator and the basebar so short phases (the intro briefing)
   never leave a dead void; grows the furniture band, not blank steel.
====================================================================== */
.wr6-content{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
}

/* =====================================================================
   LOWER CHASSIS FURNITURE — vent grille, aux probe jacks, a folded
   operating card, a calibration reference strip. Always present,
   flexes to absorb leftover vertical space with real case detail.
====================================================================== */
.wr6-lower-furniture{
  position:relative;
  flex:1 1 auto;
  min-height:64px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:14px 24px;
}
.wr6-vent-grille{
  height:14px;
  margin-bottom:14px;
  background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.5) 0,rgba(0,0,0,.5) 3px,transparent 3px,transparent 10px);
  opacity:.5;
  border-top:1px solid rgba(0,0,0,.4);
  border-bottom:1px solid rgba(255,255,255,.03);
}
.wr6-lower-row{
  display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;
}
.wr6-probe-jacks{display:flex;align-items:center;gap:6px}
.wr6-jack-label{font-size:8px;letter-spacing:.1em;color:rgba(233,226,207,.28);margin-left:4px}
.wr6-op-card{
  padding:8px 12px;
  background:linear-gradient(160deg,#d8d3c4,#c3bda9 60%,#aaa38c);
  color:#2a2620;
  border-radius:2px;
  box-shadow:0 3px 6px rgba(0,0,0,.45);
  transform:rotate(-1deg);
  font-family:'Share Tech Mono',monospace;
}
.wr6-op-card-title{display:block;font-size:9px;letter-spacing:.06em;font-weight:700}
.wr6-op-card-sub{display:block;font-size:7px;color:#5a5442;margin-top:2px}
/* one small persistent detail: a pencilled note tucked against the
   operating card, so this reads as one specific recovered WR-6 rather
   than a reusable chassis component */
.wr6-pencil-note{
  position:absolute;top:-9px;right:-14px;
  font-family:'Share Tech Mono',monospace;
  font-size:8px;font-style:italic;
  color:rgba(233,226,207,.35);
  transform:rotate(4deg);
  white-space:nowrap;
}
.wr6-op-card{position:relative}
/* one worn/replaced screw among the otherwise-uniform chassis
   hardware: a visible screwdriver slot at an off angle, slightly
   warmer tarnish, as if it's been turned by hand more than the rest */
.wr6-worn-screw{
  position:absolute;left:42%;top:-3px;
  width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#a89482,#5a4c3c 55%,#221c14 100%);
  box-shadow:inset 0 0 0 1px #1a1510,0 1px 1px rgba(0,0,0,.7);
}
.wr6-worn-screw::after{
  content:"";position:absolute;top:50%;left:12%;width:76%;height:1px;
  background:rgba(0,0,0,.65);transform:rotate(58deg);
}
.wr6-cal-chart{text-align:right}
.wr6-cal-chart-label{
  display:block;font-size:8px;letter-spacing:.1em;
  color:rgba(233,226,207,.28);margin-bottom:4px;
}
.wr6-cal-ticks{
  width:110px;height:10px;margin-left:auto;
  background-image:repeating-linear-gradient(90deg,rgba(233,226,207,.15) 0,rgba(233,226,207,.15) 1px,transparent 1px,transparent 9px);
}

/* =====================================================================
   BAYS — recessed sections of the faceplate
====================================================================== */
.wr6-bay{
  margin:6px 8px;
  padding:14px;
  border-radius:4px;
  background:#15191a;
  border:1px solid #090b0b;
  box-shadow:
    inset 0 8px 14px rgba(0,0,0,.65),
    inset 0 -2px 2px rgba(255,255,255,.03),
    0 1px 0 rgba(255,255,255,.04);
}
.wr6-bay + .wr6-bay{margin-top:0}

.wr6-bay-header{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding-bottom:6px;
  margin-bottom:10px;
  border-bottom:1px solid rgba(0,0,0,.5);
}
.wr6-bay-kicker{
  display:block;
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(233,226,207,.38);
}
.wr6-bay-title{
  display:block;
  font-family:'Share Tech Mono',monospace;
  font-weight:700;
  font-size:11px;
  color:var(--amber);
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-top:2px;
  text-shadow:none;
}
.wr6-phase-readout{font-size:clamp(13px,2vw,17px)}

/* =====================================================================
   KEYS / BUTTONS — physical pushbuttons
====================================================================== */
.wr6-controls-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}

.wr6-key,.wr6-key-primary,.wr6-key-danger{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:9px 14px;
  border-radius:4px;
  border:1px solid rgba(0,0,0,.6);
  font:700 11px 'Share Tech Mono',monospace;
  letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  background:linear-gradient(180deg,#2e3034,#1c1e22);
  color:var(--cyan);
  box-shadow:0 3px 0 rgba(0,0,0,.55),0 4px 6px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .08s ease,box-shadow .08s ease;
}
.wr6-key:active,.wr6-key-primary:active,.wr6-key-danger:active{
  transform:translateY(2px);
  box-shadow:0 1px 0 rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05);
}
.wr6-key:focus-visible,.wr6-key-primary:focus-visible,.wr6-key-danger:focus-visible{
  outline:3px solid rgba(117,247,225,.38);outline-offset:2px;
}
.wr6-key-primary{
  background:linear-gradient(180deg,#4a3520,#2e1f10);
  border-color:rgba(255,199,102,.4);
  color:var(--amber);
  text-shadow:0 0 8px rgba(255,199,102,.4);
}
.wr6-key-danger{color:var(--red);border-color:rgba(255,113,105,.35)}
.wr6-controls-row--center{justify-content:center}
.wr6-key-compact{padding:7px 16px;font-size:10px;text-shadow:none}

/* =====================================================================
   CRT — briefing display and gate display
====================================================================== */
.wr6-briefing-crt{margin-bottom:0}
.wr6-crt-stamp{
  font-size:10px;letter-spacing:.12em;
  color:rgba(93,255,222,.5);margin-bottom:8px;
}
.wr6-crt-emphasis{color:var(--ink);font-weight:700;text-shadow:0 0 10px rgba(244,234,223,.3)}
.wr6-gate-kicker{font-size:10px;letter-spacing:.14em;color:rgba(93,255,222,.5)}
.wr6-gate-title{
  font-family:VT323,monospace;font-size:clamp(24px,5vw,40px);
  margin:8px 0;color:var(--amber);text-shadow:0 0 12px rgba(255,199,102,.5);
}
.wr6-gate-copy{color:var(--phosphor-copy);line-height:1.6}

/* =====================================================================
   TERMINAL — output strip at bottom of each bay
====================================================================== */
.wr6-terminal{
  font-family:'Share Tech Mono',monospace;
  font-size:12px;
  white-space:pre-wrap;
  padding:10px 12px;
  margin:10px 0 0;
  line-height:1.5;
  color:var(--phosphor-copy);
  background:rgba(0,0,0,.35);
  border:1px solid rgba(0,0,0,.4);
  border-radius:4px;
  min-height:36px;
}

/* =====================================================================
   PHASE A — SPECIMEN TEST POSITIONS
   Six physical test bays arranged in a 3x2 grid, each with a specimen
   clip (ward symbol), readout, and test key
====================================================================== */
.wr6-specimen-bay{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin:10px 0;
  padding:14px 10px 10px;
  border:1px solid rgba(0,0,0,.4);
  border-radius:4px;
  background:rgba(0,0,0,.12);
}
.wr6-specimen-bay::before,.wr6-specimen-bay::after{
  content:"";position:absolute;top:5px;
  width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#9a9c9e,#55585b 55%,#222 100%);
  box-shadow:inset 0 0 0 1px #1a1b1c,0 1px 1px rgba(0,0,0,.6);
}
.wr6-specimen-bay::before{left:6px}
.wr6-specimen-bay::after{right:6px}
.wr6-test-pos{
  position:relative;
  display:flex;align-items:center;gap:8px;
  padding:10px 10px 8px;
  border-radius:4px;
  border:1px solid rgba(0,0,0,.45);
  background:rgba(0,0,0,.2);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.3);
  transition:border-color .2s,box-shadow .2s;
}
.wr6-fixture-id{
  position:absolute;top:3px;left:6px;
  font-size:7px;letter-spacing:.06em;
  color:rgba(233,226,207,.3);
  font-family:'Share Tech Mono',monospace;
}
.wr6-fixture-lamp{
  display:inline-block;width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--fn-led-off,#3a2c2c);
  box-shadow:inset 0 0 2px rgba(0,0,0,.8);
}
.wr6-test-pos.tested .wr6-fixture-lamp{
  background:var(--fn-led-green,#5dffa0);
  box-shadow:0 0 6px var(--fn-led-green,#5dffa0),inset 0 0 2px rgba(0,0,0,.4);
}
.wr6-response-window{
  margin-top:4px;
  padding:2px 6px;
  border-radius:2px;
  background:#050605;
  border:1px solid rgba(0,0,0,.6);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.6);
  display:inline-block;
}
.wr6-test-pos.tested{
  border-color:rgba(117,247,225,.4);
  box-shadow:inset 0 0 16px rgba(117,247,225,.05),inset 0 1px 2px rgba(0,0,0,.3);
}
.wr6-test-clip{
  position:relative;
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(0,0,0,.5);
  border-radius:4px;
  background:rgba(0,0,0,.3);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.5);
  flex:none;
}
/* spring-clip contacts, top and bottom edge of the specimen socket */
.wr6-test-clip::before,.wr6-test-clip::after{
  content:"";position:absolute;left:50%;
  width:10px;height:2px;
  background:linear-gradient(90deg,#3a3c3e,#8a8d8f,#3a3c3e);
  transform:translateX(-50%);
}
.wr6-test-clip::before{top:-2px}
.wr6-test-clip::after{bottom:-2px}
.wr6-test-clip .fn-ward-symbol{width:22px;height:22px}
.heart .fn-ward-symbol,.wr6-test-pos[data-shape="hearts"] .fn-ward-symbol{color:var(--pink)}
.star .fn-ward-symbol,.wr6-test-pos[data-shape="stars"] .fn-ward-symbol{color:var(--orange)}
.moon .fn-ward-symbol,.wr6-test-pos[data-shape="moons"] .fn-ward-symbol{color:var(--yellow)}
.clover .fn-ward-symbol,.wr6-test-pos[data-shape="clovers"] .fn-ward-symbol{color:var(--green)}
.diamond .fn-ward-symbol,.wr6-test-pos[data-shape="diamonds"] .fn-ward-symbol{color:var(--blue)}
.horseshoe .fn-ward-symbol,.wr6-test-pos[data-shape="horseshoes"] .fn-ward-symbol{color:var(--purple)}
.wr6-test-pos.tested .fn-ward-symbol{filter:drop-shadow(0 0 5px currentColor)}
.wr6-test-info{flex:1;min-width:0}
.wr6-test-name{
  display:block;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(233,226,207,.6);
}
.wr6-test-source{
  display:inline-block;font-size:8px;letter-spacing:.1em;
  padding:1px 4px;border-radius:2px;margin-top:2px;
}
.source-canon{color:var(--green);border:1px solid rgba(117,229,143,.35)}
.source-model{color:var(--muted);border:1px solid rgba(74,52,60,.6)}
.wr6-test-reading{
  display:block;
  font-size:14px;
}
/* Bakelite-cap pushkey: dark cream cap on a metal surround, not a bare
   <button> — this element previously had no background/color of its
   own and was silently falling back to the browser's native white
   button chrome, which is why it looked like a raw HTML control. */
.wr6-test-key{
  position:relative;
  width:40px;height:40px;
  padding:2px;font-size:7px;line-height:1.15;
  white-space:normal;text-align:center;
  flex:none;
  background:linear-gradient(180deg,#4a4436,#241f18);
  color:#e9e2cf;
  border:1px solid rgba(0,0,0,.65);
  border-radius:3px;
  box-shadow:0 3px 0 rgba(0,0,0,.5),0 4px 6px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.1);
}
.wr6-test-key:active{
  transform:translateY(2px);
  box-shadow:0 1px 0 rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05);
}
.wr6-test-key::after{
  content:"";position:absolute;top:3px;right:3px;
  width:4px;height:4px;border-radius:50%;
  background:var(--fn-led-off,#3a2c2c);
}
.wr6-test-pos.tested .wr6-test-key::after{
  background:var(--fn-led-amber,#ffb347);
  box-shadow:0 0 4px var(--fn-led-amber,#ffb347);
}

/* Tape note (paper label) */
.wr6-tape-note{margin:6px 0 8px;display:inline-block}

/* =====================================================================
   COMBINATION SECTION — material selector strip + meter
====================================================================== */
.wr6-combo-section{
  margin-top:8px;
  padding:10px;
  border-radius:4px;
  border:1px solid rgba(0,0,0,.4);
  background:rgba(0,0,0,.12);
}
.wr6-selector-strip{
  display:flex;gap:4px;flex-wrap:wrap;margin:8px 0;
}
.wr6-shape-select{
  padding:6px 8px;font-size:10px;
  display:inline-flex;align-items:center;gap:4px;
  background:linear-gradient(180deg,#2e3034,#1c1e22);
  color:var(--cyan);
  border:1px solid rgba(0,0,0,.6);
  border-radius:4px;
}
.wr6-shape-select .fn-ward-symbol{width:14px;height:14px}
.wr6-shape-select[aria-pressed="true"]{
  background:rgba(117,247,225,.12);
  border-color:var(--cyan);
  color:var(--ink);
}
.wr6-shape-select:disabled{opacity:.3;cursor:not-allowed}

.wr6-meter-row{
  display:flex;align-items:center;gap:10px;
  margin:8px 0 4px;flex-wrap:wrap;
}
.wr6-combo-reading{font-size:clamp(18px,3vw,28px);flex:none}
.wr6-meter-row .fn-meter-track{flex:1;min-width:80px}

/* =====================================================================
   PHASE B — CONSTRUCTION GRAMMAR
====================================================================== */
.wr6-material-lock-strip{
  display:flex;gap:6px;flex-wrap:wrap;margin:6px 0;
}
.wr6-locked-chip{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 8px;border-radius:999px;
  border:1px solid rgba(0,0,0,.5);
  background:rgba(0,0,0,.25);
  font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);
}
.wr6-locked-chip .fn-ward-symbol{width:14px;height:14px}
.wr6-locked-chip.heart .fn-ward-symbol{color:var(--pink)}
.wr6-locked-chip.moon .fn-ward-symbol{color:var(--yellow)}
.wr6-locked-chip.clover .fn-ward-symbol{color:var(--green)}

.wr6-binding-row{display:flex;align-items:center;gap:14px;margin:8px 0 34px}
.wr6-dial-legend{
  font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(233,226,207,.45);
}
.wr6-dial-hint{
  display:block;margin-top:2px;font-size:7px;letter-spacing:.08em;
  color:rgba(233,226,207,.3);text-transform:none;
}
/* Live dial: the knob is the exposed mouse, touch and keyboard control.
   Its paired select remains the mission's value source and event target,
   but is removed from pointer, focus and accessibility navigation so a
   browser-native menu can never cover the recovered hardware. */
.wr6-rotary.wr6-rotary--live select{
  left:0;bottom:0;width:1px;height:1px;
  margin:-1px;padding:0;border:0;transform:none;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;pointer-events:none;
}
.wr6-rotary--live .fn-knob{cursor:grab;touch-action:none}
.wr6-rotary--live .fn-knob:active{cursor:grabbing}
.wr6-rotary--live .fn-knob:focus-visible{
  outline:3px solid var(--cyan);
  outline-offset:4px;
  box-shadow:0 0 0 4px rgba(117,247,225,.22),0 3px 6px rgba(0,0,0,.65),inset 0 1px 1px rgba(255,255,255,.18);
}
.wr6-dial-readout{
  position:absolute;left:50%;bottom:-24px;transform:translateX(-50%);
  min-width:116px;padding:3px 7px;font-size:13px;line-height:1;
  white-space:nowrap;pointer-events:none;
}


/* Rotary housing. Legacy read-only dial pairs may still use the native
   select overlay below; opted-in .wr6-rotary--live controls override it
   with the physical knob behavior defined above. Values are printed in
   a fixed arc matching the -70deg..+70deg sweep wireDials() uses. */
.wr6-rotary{position:relative;width:176px;height:100px;flex:none}
.wr6-rotary .fn-knob{position:absolute;left:50%;bottom:0;transform:translateX(-50%)}
.wr6-rotary select{
  position:absolute;left:50%;bottom:0;
  width:52px;height:52px;
  transform:translateX(-50%);
  opacity:0;cursor:pointer;
  font-size:16px;border:0;padding:0;margin:0;
}
.wr6-rotary:focus-within .fn-knob{
  box-shadow:
    0 0 0 3px rgba(117,247,225,.4),
    0 3px 6px rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.7),
    inset 0 1px 1px rgba(255,255,255,.18),inset 0 -3px 6px rgba(0,0,0,.6);
}
.wr6-rotary-labels{position:absolute;inset:0;pointer-events:none}
.wr6-rotary-label{
  position:absolute;
  width:34px;text-align:center;
  font-size:6.5px;line-height:1.25;letter-spacing:.02em;text-transform:uppercase;
  color:rgba(233,226,207,.4);
  transform:translate(-50%,-50%);
}
.wr6-rotary-label:nth-child(1){left:33px;top:55px}
.wr6-rotary-label:nth-child(2){left:65px;top:21px}
.wr6-rotary-label:nth-child(3){left:111px;top:21px}
.wr6-rotary-label:nth-child(4){left:143px;top:55px}

.wr6-construction-layout{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:8px;
  margin:10px 0;
}

/* Primitive bank — physical button matrix */
.wr6-primitive-bank{
  padding:10px;
  border:1px solid rgba(0,0,0,.4);
  border-radius:4px;
  background:rgba(0,0,0,.15);
}
.wr6-bank-label{
  display:block;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(233,226,207,.35);margin-bottom:8px;
}
.wr6-prim-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:3px;
  padding:6px;
  background:#0a0b0b;
  border-radius:3px;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.55);
}
/* stencil tiles seated in a recessed rack, not raised push-buttons:
   flat, etched, low-contrast until selected. Each carries its actual
   primitive geometry (via SVG glyph) plus a small engraved identifier,
   not just a text label. */
.wr6-prim-key{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:7px 3px 6px;font-size:7.5px;
  background:#101213;
  border:1px solid rgba(0,0,0,.55);
  color:rgba(233,226,207,.48);
  text-shadow:none;
  letter-spacing:.04em;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.6),inset 0 -1px 0 rgba(255,255,255,.03);
}
.wr6-prim-key:active{transform:translateY(1px)}
.wr6-prim-glyph{width:15px;height:15px;color:rgba(233,226,207,.45)}
.wr6-prim-key::after{
  content:"";position:absolute;top:3px;right:3px;
  width:3px;height:3px;border-radius:50%;
  background:var(--fn-led-off,#3a2c2c);
}
.wr6-prim-key[aria-pressed="true"]{
  background:#0d1f1c;
  border-color:rgba(117,247,225,.4);color:var(--cyan);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.6),0 0 6px rgba(117,247,225,.18);
}
.wr6-prim-key[aria-pressed="true"] .wr6-prim-glyph{color:var(--cyan)}
.wr6-prim-key[aria-pressed="true"]::after{
  background:var(--fn-led-green,#5dffa0);
  box-shadow:0 0 4px var(--fn-led-green,#5dffa0);
}
.wr6-prim-readout{
  margin-top:8px;font-size:10px;
  color:rgba(233,226,207,.5);line-height:1.4;
}

/* Sigil board — construction workspace, an etched drafting surface
   with hardware-shaped grammar sockets, not dashed drop-zone rectangles */
.wr6-sigil-board{
  position:relative;
  min-height:360px;
  border-radius:6px;
  border:1px solid rgba(0,0,0,.5);
  background:
    radial-gradient(circle at center,rgba(117,247,225,.04),transparent 45%),
    #0a0b0c;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.5);
  overflow:hidden;
}
.wr6-sigil-board::before,.wr6-sigil-board::after{
  content:"";position:absolute;top:6px;z-index:1;
  width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#9a9c9e,#55585b 55%,#222 100%);
  box-shadow:inset 0 0 0 1px #1a1b1c,0 1px 1px rgba(0,0,0,.6);
}
.wr6-sigil-board::before{left:6px}
.wr6-sigil-board::after{right:6px}
.wr6-board-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(117,247,225,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(117,247,225,.04) 1px,transparent 1px);
  background-size:24px 24px;
  pointer-events:none;
}
.wr6-slot{
  position:absolute;
  width:128px;min-height:56px;
  padding:8px;
  color:var(--muted);
  background:rgba(10,11,12,.9);
  border:1px solid rgba(0,0,0,.55);
  cursor:pointer;
}
.wr6-slot span{display:block;font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:rgba(233,226,207,.35)}
.wr6-slot b{display:block;margin-top:3px;font:16px VT323,monospace;color:rgba(233,226,207,.2);text-shadow:none}
.wr6-slot.is-filled,.wr6-slot.filled{
  border-color:var(--cyan);
  box-shadow:0 0 14px rgba(117,247,225,.12);
  background:rgba(117,247,225,.05);
}
.wr6-slot.is-filled b,.wr6-slot.filled b{color:var(--cyan);text-shadow:0 0 6px currentColor}

/* Central Node — circular socket */
.slot-node{left:50%;top:38%;transform:translateX(-50%);width:104px;min-height:104px;border-radius:50%;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
/* Closed Loop — hollow ring */
.slot-loop{left:50%;top:6%;transform:translateX(-50%);width:104px;min-height:104px;border-radius:50%;border-width:3px;background:transparent;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
/* Shield Bracket — open three-sided cradle */
.slot-bracket{left:5%;top:38%;border-left-width:3px;border-top-width:3px;border-bottom-width:3px;border-right:none;border-radius:4px 0 0 4px}
/* Signal Trace — thin connector bar with end pins */
.slot-trace{right:5%;top:38%;min-height:34px;padding:6px 14px}
.slot-trace::before,.slot-trace::after{
  content:"";position:absolute;top:50%;width:6px;height:6px;
  background:#2a2c2e;border:1px solid rgba(0,0,0,.6);
  transform:translateY(-50%);
}
.slot-trace::before{left:-3px}
.slot-trace::after{right:-3px}
/* Grounding Line — hatched rail */
.slot-ground{
  left:50%;bottom:8%;transform:translateX(-50%);
  min-height:38px;
  background-image:repeating-linear-gradient(90deg,rgba(233,226,207,.06) 0,rgba(233,226,207,.06) 1px,transparent 1px,transparent 8px);
}

.wr6-board-readout{
  position:absolute;right:10px;bottom:10px;text-align:right;
}
.wr6-board-readout span{display:block;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(233,226,207,.4)}
.wr6-board-readout strong{font-size:clamp(18px,3vw,28px)}

/* =====================================================================
   PHASE C — PROVENANCE / SPECIMEN RACK
====================================================================== */
/* Evidence sorting rack: six carrier grooves, not a sortable web list.
   The rack itself is hatched like a channel; each carrier reads as a
   removable card inserted into its groove, with an alignment notch
   and its own slight wear/rotation so no two look machine-identical. */
.wr6-specimen-rack{
  display:grid;gap:6px;margin:8px 0;
  padding:10px 8px;
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0,rgba(0,0,0,.35) 1px,transparent 1px,transparent 46px),
    #0a0b0b;
  border-radius:4px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.5);
}
.specimen{
  position:relative;
  display:grid;
  grid-template-columns:60px 1fr 90px auto;
  gap:8px;
  align-items:center;
  padding:8px 10px 8px 18px;
  border-radius:1px 4px 4px 1px;
  border:1px solid rgba(0,0,0,.55);
  border-left:none;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.25));
  box-shadow:inset 0 1px 2px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.02),0 1px 3px rgba(0,0,0,.3);
  animation:fn-carrier-settle .25s ease both;
}
/* alignment notch / rack tab at the carrier's leading edge */
.specimen::before{
  content:"";position:absolute;left:0;top:50%;
  width:8px;height:16px;
  transform:translateY(-50%);
  background:linear-gradient(90deg,#1c1d1f,#33363a);
  border-radius:1px 0 0 1px;
  box-shadow:1px 0 0 rgba(0,0,0,.5);
}
@keyframes fn-carrier-settle{from{opacity:.4;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
.specimen-year{
  color:var(--amber);
  font:22px VT323,monospace;
  text-shadow:0 0 6px rgba(255,199,102,.25);
  background:rgba(0,0,0,.3);
  border:1px solid rgba(0,0,0,.5);
  border-radius:2px;
  padding:1px 6px;
  text-align:center;
}
.specimen-strength{
  font-size:9px;letter-spacing:.06em;color:var(--cyan);
}
.specimen-controls{display:flex;flex-direction:column;gap:2px}
/* mechanical rocker keys: the ↑/↓ glyph text is visually replaced by
   a drawn triangle so the control reads as a physical shift switch;
   the original glyph stays in the accessible name via aria-label. */
.specimen-controls button{
  position:relative;
  width:26px;height:18px;
  padding:0;font-size:0;line-height:1;
  background:linear-gradient(180deg,#3a3c3e,#1c1e22);
  border:1px solid rgba(0,0,0,.6);border-radius:2px;
  color:var(--cyan);cursor:pointer;
  box-shadow:0 2px 0 rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1);
}
.specimen-controls button::before{
  content:"";position:absolute;top:50%;left:50%;
  width:0;height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  transform:translate(-50%,-50%);
}
.specimen-controls button[data-move="up"]::before{border-bottom:5px solid var(--cyan)}
.specimen-controls button[data-move="down"]::before{border-top:5px solid var(--cyan)}
.specimen-controls button:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(0,0,0,.5)}
@media(prefers-reduced-motion:reduce){.specimen{animation:none}}

/* =====================================================================
   COMPLETION — physical ending: annunciator summary, CRT conclusion,
   printer report. The reward relay is functionally intact (JS still
   drives its ids) but visually suppressed — Training/prebeta
   completion should not present as a reward dashboard.
====================================================================== */
.wr6-conclusion-crt{margin:10px 0}
.wr6-conclusion-crt .fn-crt-line{
  text-align:center;
  font:clamp(20px,4vw,32px) VT323,monospace;
  letter-spacing:.06em;
  color:var(--green);
  text-shadow:0 0 10px rgba(117,229,143,.5),0 0 20px rgba(117,229,143,.25);
}

.wr6-reward-bay{display:none}

/* Paper-strip printer output — a strip fed from a slot cut into the
   chassis, tractor-feed holes down both edges, torn bottom edge */
.wr6-printer-output{margin:14px 6px 10px;position:relative}
.wr6-printer-output::before{
  content:"PRINTER SLOT";
  display:block;
  font-size:8px;letter-spacing:.16em;text-align:center;
  color:rgba(233,226,207,.28);
  padding:3px 0 6px;
}
.wr6-printer-output details{
  position:relative;
  border:none;
  border-radius:2px;
  background:#e9e2cf;
  margin-top:10px;
  padding:0 16px;
  box-shadow:0 6px 18px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.4) inset;
}
.wr6-printer-output details::before,.wr6-printer-output details::after{
  content:"";position:absolute;top:0;bottom:0;width:16px;
  background-image:radial-gradient(circle,#1c1d1f 2.5px,transparent 2.6px);
  background-size:16px 14px;
  background-position:center;
}
.wr6-printer-output details::before{left:0}
.wr6-printer-output details::after{right:0}
.wr6-printer-header{
  cursor:pointer;
  padding:10px 4px;
  font-family:'Share Tech Mono',monospace;
  font-size:10px;letter-spacing:.1em;
  color:#2a2620;font-weight:700;
  text-transform:uppercase;
}
.wr6-printout{
  padding:6px 4px 16px;
  font-family:'Share Tech Mono',monospace;
  font-size:12px;
  line-height:1.6;
  color:#443d33;
  border-top:1px dashed rgba(42,38,32,.25);
}
.wr6-printout strong{color:#2a2620}
.wr6-printout p{margin:.5em 0}

.wr6-tier-lock{
  padding:6px 4px 16px;
  font-family:'Share Tech Mono',monospace;
  font-size:11px;
  color:#6b4a20;
  border-top:1px dashed rgba(42,38,32,.25);
}

.wr6-commendation{
  margin:10px 0;
  padding:10px 12px;
  border-left:3px solid var(--amber);
  background:rgba(255,199,102,.04);
  font-size:12px;
  line-height:1.55;
}
.wr6-commendation strong{color:var(--amber);display:block;margin-bottom:4px}
.wr6-commendation p{margin:.4em 0;color:var(--muted)}

/* =====================================================================
   TESTER BAY — behind a closed service hatch, not exposed like a QA
   dashboard. Collapsed by default; a small screw-latch opens it.
====================================================================== */
.wr6-tester{border-color:rgba(255,113,105,.2);padding:0;background:#101213}
.wr6-service-latch{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;
  cursor:pointer;
  list-style:none;
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,113,105,.55);
}
.wr6-service-latch::-webkit-details-marker{display:none}
.wr6-service-latch::marker{content:""}
.wr6-service-screw{
  display:inline-block;width:9px;height:9px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 35% 30%,#9a9c9e,#55585b 55%,#222 100%);
  box-shadow:inset 0 0 0 1px #1a1b1c,0 1px 1px rgba(0,0,0,.6);
  position:relative;
}
.wr6-service-screw::after{
  content:"";position:absolute;top:50%;left:15%;width:70%;height:1px;
  background:rgba(0,0,0,.7);transform:rotate(28deg);
}
.wr6-service-hatch[open] .wr6-service-latch{
  color:rgba(255,113,105,.8);
  border-bottom:1px solid rgba(255,113,105,.15);
}
.wr6-service-inside{padding:4px 14px 14px}

/* =====================================================================
   BASEBAR — bottom edge of the chassis
====================================================================== */
.wr6-basebar{
  flex:none;
  position:relative;
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 24px;
  border-top:1px solid rgba(0,0,0,.6);
  background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.32));
  box-shadow:inset 0 3px 6px rgba(0,0,0,.4);
}
/* vent grille texture along the top edge of the basebar */
.wr6-basebar::before{
  content:"";position:absolute;top:-7px;left:24px;right:24px;height:5px;
  background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.5) 0,rgba(0,0,0,.5) 2px,transparent 2px,transparent 7px);
  opacity:.6;
}
.wr6-basebar-text{
  font-size:8px;letter-spacing:.16em;
  color:rgba(233,226,207,.25);text-transform:uppercase;
}
.wr6-basebar-nav{display:flex;gap:8px}

/* =====================================================================
   HIDDEN
====================================================================== */
[hidden]{display:none!important}

/* =====================================================================
   REDUCED MOTION
====================================================================== */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* =====================================================================
   RESPONSIVE — tablet
====================================================================== */
@media(max-width:900px){
  .wr6-specimen-bay{grid-template-columns:repeat(2,1fr)}
  .wr6-construction-layout{grid-template-columns:1fr}
  .wr6-prim-grid{grid-template-columns:repeat(4,1fr)}
  .wr6-sigil-board{min-height:340px}
  .specimen{grid-template-columns:55px 1fr auto}
  .specimen-strength{grid-column:2}
  .specimen-controls{grid-column:3;grid-row:1/3}
}

/* =====================================================================
   RESPONSIVE — phone
====================================================================== */
@media(max-width:620px){
  body{padding:0}
  .wr6-nameplate{flex-direction:column;align-items:stretch;gap:8px;padding:14px 12px}
  .wr6-plate{max-width:none}
  .wr6-power-cluster{justify-content:space-between}
  .wr6-annunciator{flex-wrap:wrap;padding:8px 12px}
  .wr6-annun-cell{padding:4px 10px 4px 0;margin-right:10px}
  .wr6-specimen-bay{grid-template-columns:1fr}
  .wr6-bay{margin:4px;padding:10px}
  .wr6-key,.wr6-key-primary,.wr6-key-danger{min-height:44px;padding:10px 12px}
  .wr6-test-key{width:44px;height:44px}
  .wr6-construction-layout{grid-template-columns:1fr}
  .wr6-prim-grid{grid-template-columns:repeat(4,1fr)}
  .wr6-sigil-board{min-height:340px}
  .wr6-slot{width:112px}
  .slot-node,.slot-loop{width:92px;min-height:92px}
  .slot-bracket{left:2%}
  .slot-trace{right:2%}
  .specimen{grid-template-columns:50px 1fr}
  .specimen-controls{grid-column:1/3;grid-row:auto;flex-direction:row}
  .wr6-basebar{flex-direction:column;gap:6px;text-align:center}
  .wr6-basebar-nav{justify-content:center}
  .wr6-rotary{width:100px;transform:scale(.9);transform-origin:left center}
  .wr6-printer-output details{padding:0 12px}
  .wr6-lower-row{flex-direction:column;align-items:stretch;gap:10px}
  .wr6-cal-chart{text-align:left}
  .wr6-cal-ticks{margin-left:0}
  .wr6-prim-grid{grid-template-columns:repeat(3,1fr)}
}