:root{
  --room:        #130A0B;
  --room-lit:    #241214;
  --enamel:      #63302F;
  --enamel-hi:   #7E4340;
  --enamel-lo:   #4A211F;
  --enamel-edge: #2A0F0E;
  --enamel-deep: #180808;
  --steel:       #B4B8BD;
  --steel-hi:    #E9ECEF;
  --steel-lo:    #6B7076;
  --steel-deep:  #3A3E43;
  --brass:       #C9A227;
  --brass-hi:    #F0D57A;
  --brass-lo:    #7C5E11;
  --silk:        #F0E5D2;
  --silk-dim:    #B29C82;
  --silk-faint:  #7C6A58;
  --amber:       #FFB300;
  --amber-dim:   #8A6300;
  --amber-glow:  rgba(255,179,0,.40);
  --green:       #74F58A;
  --green-dim:   #2E7A3C;
  --green-glow:  rgba(116,245,138,.35);
  --cyan:        #3ED9C9;
  --red:         #FF4133;
  --screen-bg:   #050300;
  --r-none:      0px;
  --r-key:       3px;
  --r-screen:    10px;
  --r-chassis:   20px;
  --f-disp: 'Saira Condensed', 'Arial Narrow', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;
  --f-crt:  'VT323', 'Courier New', monospace;
  --pad: 26px;
  --tape-w: 320px;
  --ease: cubic-bezier(.2,.8,.28,1);
  --ease-back: cubic-bezier(.34,1.56,.5,1);
}
*{box-sizing:border-box}
html,body{margin:0; padding:0; max-width:100%; overflow-x:hidden}
body{
  background:var(--room);
  color:var(--silk);
  font-family:var(--f-disp);
  -webkit-text-size-adjust:100%;
}
.mono{font-family:var(--f-mono); font-weight:500;
  letter-spacing:.12em; text-transform:uppercase}
.room{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(120% 70% at 50% -12%, rgba(255,179,0,.075), transparent 62%),
    radial-gradient(80% 50% at 50% 0%, rgba(255,255,255,.030), transparent 70%),
    radial-gradient(140% 110% at 50% 50%, var(--room-lit), var(--room) 58%);
}
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.30;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.bench{
  position:relative; z-index:2;
  max-width:1300px; margin:0 auto; padding:26px 30px 70px;
}
.bench__tag,.bench__foot{
  display:flex; flex-wrap:wrap; gap:6px 24px; justify-content:space-between;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--silk-faint);
  padding:0 4px 16px;
}
.bench__tag-mid{color:var(--brass-lo)}
.bench__foot{padding:36px 4px 0; border-top:1px solid rgba(240,229,210,.09); margin-top:34px}
.console{
  position:relative;
  padding:var(--pad);
  border-radius:var(--r-chassis);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), transparent 12%),
    linear-gradient(180deg, var(--enamel-hi) 0%, var(--enamel) 26%, var(--enamel-lo) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,240,220,.20),
    inset 0 -4px 0 rgba(0,0,0,.42),
    inset 3px 0 0 rgba(255,255,255,.05),
    inset -3px 0 0 rgba(0,0,0,.28),
    0 16px 0 var(--enamel-edge),
    0 24px 0 var(--enamel-deep),
    0 52px 66px -22px rgba(0,0,0,.9),
    0 0 0 1px rgba(0,0,0,.55);
  display:grid; gap:18px;
}
.console::before{
  content:""; position:absolute; inset:0; border-radius:var(--r-chassis);
  pointer-events:none; opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='turbulence' baseFrequency='.5 .55' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23c)'/%3E%3C/svg%3E");
}
.screw{
  position:absolute; width:13px; height:13px; border-radius:50%;
  background:radial-gradient(circle at 34% 28%, var(--steel-hi), var(--steel) 46%, var(--steel-lo) 78%, var(--steel-deep));
  box-shadow:0 1px 2px rgba(0,0,0,.7), inset 0 -1px 2px rgba(0,0,0,.5);
  z-index:5;
}
.screw::after{
  content:""; position:absolute; left:2px; right:2px; top:calc(50% - 1px);
  height:2px; border-radius:1px; background:rgba(20,22,25,.75);
  box-shadow:0 1px 0 rgba(255,255,255,.35);
  transform:rotate(28deg);
}
.screw--chassis{width:16px; height:16px}
.screw--chassis::after{transform:rotate(-14deg)}
.toprail{
  display:grid; grid-template-columns:auto 1fr auto; gap:22px; align-items:center;
  padding:6px 34px 16px;
  border-bottom:1px solid rgba(0,0,0,.35);
  box-shadow:0 1px 0 rgba(255,255,255,.07);
}
.plate{
  display:grid; gap:2px; padding:10px 14px; border-radius:var(--r-key);
  background:linear-gradient(160deg, #E4C978 0%, var(--brass) 34%, #8E6D14 78%, #B9932A 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(0,0,0,.4),
    0 2px 4px rgba(0,0,0,.55);
  color:#31240A; text-align:center;
  font-family:var(--f-mono); font-size:8.5px; letter-spacing:.14em;
  text-transform:uppercase;
}
.plate b{font-size:10px; letter-spacing:.2em; text-shadow:0 1px 0 rgba(255,255,255,.45)}
.plate em{font-style:normal; font-weight:700}
.nameplate{text-align:center}
.nameplate h1{
  margin:0; font-family:var(--f-disp); font-weight:800;
  font-size:clamp(20px,2.5vw,34px); letter-spacing:.05em; line-height:1;
  color:var(--silk);
  text-shadow:0 1px 0 rgba(0,0,0,.6), 0 -1px 0 rgba(255,255,255,.16);
}
.nameplate p{
  margin:7px 0 0; font-family:var(--f-mono); font-size:9.5px;
  letter-spacing:.19em; color:var(--silk-dim);
}
.statusblock{display:grid; gap:6px; justify-items:end}
.statusline{display:flex; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--silk-dim)}
.statusline--dim{color:var(--silk-faint); font-size:9px}
.led{width:7px; height:7px; border-radius:50%; flex:none}
.led--pwr{background:var(--red);
  box-shadow:0 0 5px 1px rgba(255,65,51,.75), inset 0 -1px 1px rgba(0,0,0,.5);
  animation:ledPulse 2.4s ease-in-out infinite}
.led--sig{background:var(--cyan);
  box-shadow:0 0 5px 1px rgba(62,217,201,.7), inset 0 -1px 1px rgba(0,0,0,.5)}
@keyframes ledPulse{0%,100%{opacity:1}50%{opacity:.45}}
.vents{
  width:112px; height:16px; border-radius:2px; margin-top:2px;
  background:repeating-linear-gradient(90deg,
    rgba(0,0,0,.62) 0 3px, transparent 3px 8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.deck{display:grid; grid-template-columns:1fr 372px; gap:18px; align-items:stretch}
.bay--screen{display:flex; flex-direction:column}
.bay--screen .bezel{flex:1 1 auto; display:flex; flex-direction:column}
.panel{
  position:relative; padding:14px 15px 16px; border-radius:var(--r-key);
  background:linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.13));
  box-shadow:
    inset 0 1px 0 rgba(0,0,0,.55),
    inset 0 -1px 0 rgba(255,255,255,.10),
    0 1px 0 rgba(255,255,255,.07);
}
.panel__cap{
  margin:0 0 12px; font-size:9px; letter-spacing:.24em;
  color:var(--silk-dim);
  border-bottom:1px solid rgba(240,229,210,.14); padding-bottom:7px;
}
.panel__note{margin:12px 0 0; font-size:9px; letter-spacing:.13em;
  color:var(--silk-faint); line-height:1.5}
.panel__note b{color:var(--brass-hi); font-size:12px}
.leaders{list-style:none; margin:14px 0 0; padding:12px 0 0; display:grid; gap:5px;
  border-top:1px solid rgba(0,0,0,.34); box-shadow:0 -1px 0 rgba(255,255,255,.06)}
.leaders li{display:flex; align-items:baseline; gap:8px;
  font-size:9px; letter-spacing:.15em; color:var(--silk-faint)}
.leaders i{flex:1 1 auto; min-width:14px; border-bottom:1px dotted currentColor;
  opacity:.55; transform:translateY(-3px)}
.leaders span:last-child{color:var(--silk-dim)}
.bezel{
  position:relative; padding:22px; border-radius:14px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.15) 40%, rgba(0,0,0,.55)),
    linear-gradient(180deg, #2B2C2E, #17181A);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.13),
    inset 0 -2px 0 rgba(0,0,0,.75),
    0 3px 0 rgba(0,0,0,.5),
    0 10px 22px -8px rgba(0,0,0,.85);
}
.crt{
  --ph:var(--amber); --ph-dim:var(--amber-dim); --ph-glow:var(--amber-glow);
  --glitch:0; --gy:34%;
  position:relative; overflow:hidden; display:flex;
  flex:1 1 auto;
  border-radius:var(--r-screen);
  min-height:400px;
  background:
    radial-gradient(120% 130% at 50% 0%, #120B02, var(--screen-bg) 62%);
  box-shadow:
    inset 0 0 80px 12px rgba(0,0,0,.95),
    inset 0 0 0 1px rgba(255,179,0,.10),
    0 0 26px -4px rgba(255,179,0,.10);
  filter:brightness(calc(1 + var(--glitch) * .55)) saturate(calc(1 + var(--glitch)));
}
.crt[data-ph="green"]{--ph:var(--green); --ph-dim:var(--green-dim); --ph-glow:var(--green-glow)}
.crt[data-ph="green"]{box-shadow:
  inset 0 0 80px 12px rgba(0,0,0,.95),
  inset 0 0 0 1px rgba(116,245,138,.10),
  0 0 26px -4px rgba(116,245,138,.10)}
.crt__scan{
  position:absolute; inset:0; z-index:40; pointer-events:none;
  background:
    linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,.28) 50%),
    linear-gradient(90deg, rgba(255,0,0,.06), rgba(0,255,0,.02), rgba(0,0,255,.06));
  background-size:100% 4px, 6px 100%;
}
.crt[data-scan="0"] .crt__scan{display:none}
.crt__vig{
  position:absolute; inset:0; z-index:41; pointer-events:none;
  background:radial-gradient(120% 120% at 50% 50%, transparent 52%, rgba(0,0,0,.72));
}
.crt__flick{
  position:absolute; inset:0; z-index:39; pointer-events:none;
  background:var(--ph); opacity:.012;
  animation:flick 3.4s ease-in-out infinite;
}
@keyframes flick{0%,100%{opacity:.010}50%{opacity:.030}}
.crt__tear{
  position:absolute; left:0; right:0; top:var(--gy); z-index:38;
  height:calc(var(--glitch) * 22px);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  opacity:var(--glitch); pointer-events:none;
}
.crt__body{
  position:relative; z-index:20;
  padding:26px 30px 22px;
  font-family:var(--f-crt); font-size:22px; line-height:1.18;
  color:var(--ph);
  -webkit-font-smoothing:none;
  text-shadow:
    calc(var(--glitch) * 3px) 0 rgba(255,60,40,.75),
    calc(var(--glitch) * -3px) 0 rgba(60,190,255,.7),
    0 0 2px var(--ph), 0 0 9px var(--ph-glow);
  animation:bootUp 1.5s steps(60,end) forwards;
  min-height:400px; flex:1 1 auto; display:flex; flex-direction:column;
}
@keyframes bootUp{
  0%{opacity:0; filter:brightness(2.4) blur(9px)}
  10%{opacity:1; filter:brightness(1) blur(0)}
  15%{opacity:0}
  20%{opacity:1}
  100%{opacity:1}
}
.crt__row{
  display:flex; flex-wrap:wrap; gap:6px 22px; justify-content:space-between;
  font-size:17px; letter-spacing:.06em; color:var(--ph-dim);
  border-bottom:1px solid currentColor; padding-bottom:6px; margin-bottom:14px;
}
.crt__row b{color:var(--ph)}
.crt__badge{
  background:var(--ph); color:var(--screen-bg); text-shadow:none;
  padding:0 8px; letter-spacing:.1em;
}
.crt__title{
  margin:0; font-family:var(--f-crt); font-weight:400;
  font-size:clamp(38px,5vw,64px); line-height:.92; letter-spacing:.01em;
}
.crt__sub{margin:6px 0 0; font-size:19px; color:var(--ph-dim); letter-spacing:.08em}
.crt__copy{margin:16px 0 0; font-size:21px; line-height:1.28; max-width:60ch}
.crt__leaders{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:3px}
.crt__leaders li{display:flex; align-items:baseline; gap:9px; font-size:19px}
.crt__leaders i{flex:1 1 auto; border-bottom:1px dotted currentColor;
  opacity:.55; transform:translateY(-4px); min-width:20px}
.crt__leaders span:last-child{color:var(--ph)}
.crt__leaders span:first-child{color:var(--ph-dim)}
.crt__extra{margin:16px 0 0; font-size:18px; color:var(--ph-dim); line-height:1.32}
.crt[data-verbose="0"] .crt__extra{display:none}
.crt__index{
  padding-top:22px;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px 22px;
  font-size:17px; color:var(--ph-dim);
}
.crt__index span{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.crt__index span.is-on{
  background:var(--ph); color:var(--screen-bg); text-shadow:none;
  padding-left:4px; margin-left:-4px;
}
.crt__cmd{margin-top:auto; padding-top:22px; font-size:19px; letter-spacing:.05em}
.cur{display:inline-block; width:10px; height:16px; background:currentColor;
  vertical-align:-2px; margin-left:4px; animation:blink 1.1s steps(1,end) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.bezel__strip{
  display:flex; flex-wrap:wrap; gap:6px 20px; justify-content:space-between;
  padding:9px 6px 0; font-size:9px; letter-spacing:.2em; color:var(--silk-faint);
}
.bay--ctrl{display:grid; gap:18px}
.segwrap{display:flex; align-items:center; gap:14px; margin-bottom:14px}
.seg{
  position:relative; font-family:var(--f-crt); font-size:58px; line-height:.8;
  color:var(--amber); -webkit-font-smoothing:none;
  padding:6px 12px 4px; border-radius:var(--r-key);
  background:radial-gradient(110% 130% at 50% 0%, #150C01, #050300);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,179,0,.14);
  text-shadow:0 0 3px var(--amber), 0 0 14px var(--amber-glow);
  min-width:96px; text-align:center;
}
.seg::before{
  content:attr(data-ghost); position:absolute; inset:6px 12px 4px;
  color:var(--amber); opacity:.11; text-shadow:none;
}
.seg span{position:relative}
.seg.is-step{animation:segStep .28s var(--ease)}
@keyframes segStep{0%{opacity:.25; transform:translateY(-2px)}100%{opacity:1}}
.segside{display:grid; gap:6px; font-size:9.5px; letter-spacing:.18em; color:var(--silk-dim)}
.segside b{color:var(--brass-hi)}
.segside span:last-child{color:var(--silk); font-size:11px; letter-spacing:.1em}
.dialwrap{position:relative; width:186px; height:186px; margin:6px auto 0}
.detents{position:absolute; inset:0}
.detents .dt{
  position:absolute; left:50%; top:50%; width:2px; height:9px; margin:-93px 0 0 -1px;
  background:var(--silk-faint); transform-origin:50% 93px; border-radius:1px;
}
.detents .dt.is-on{background:var(--amber); box-shadow:0 0 6px var(--amber-glow); height:12px}
.detents .dn{
  position:absolute; left:50%; top:50%; width:22px; margin:-108px 0 0 -11px;
  text-align:center; font-family:var(--f-mono); font-size:8px; letter-spacing:.06em;
  color:var(--silk-faint); transform-origin:50% 108px;
}
.detents .dn.is-on{color:var(--amber)}
.detents .dn i{display:block; font-style:normal}
.knob{
  position:absolute; left:50%; top:50%; width:126px; height:126px;
  margin:-63px 0 0 -63px; border-radius:50%; cursor:grab; touch-action:none;
  background:radial-gradient(circle at 34% 28%, #F2F5F8, var(--steel) 44%, var(--steel-lo) 74%, #55595E);
  box-shadow:
    0 7px 0 #3E4247,
    0 16px 22px -8px rgba(0,0,0,.75),
    inset 0 2px 3px rgba(255,255,255,.85);
  outline:none;
}
.knob:active{cursor:grabbing}
.knob:focus-visible{box-shadow:
  0 7px 0 #3E4247, 0 16px 22px -8px rgba(0,0,0,.75),
  inset 0 2px 3px rgba(255,255,255,.85), 0 0 0 3px var(--amber)}
.knob__knurl{
  position:absolute; inset:0; border-radius:50%; will-change:transform;
  background:repeating-conic-gradient(from 0deg,
    #EDF1F6 0 6deg, #767C85 6deg 12deg);
  -webkit-mask:radial-gradient(circle, transparent 0 47%, #000 49%);
          mask:radial-gradient(circle, transparent 0 47%, #000 49%);
}
.knob__light{
  position:absolute; inset:0; border-radius:50%; pointer-events:none; opacity:.55;
  background:conic-gradient(from 210deg, rgba(255,255,255,.9), rgba(0,0,0,.5) 38%,
    rgba(255,255,255,.7) 62%, rgba(0,0,0,.4) 88%, rgba(255,255,255,.85));
  mix-blend-mode:overlay;
}
.knob__hub{
  position:absolute; inset:27%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 36% 30%, #FFF, #B4BAC2 52%, #767C85);
  box-shadow:inset 0 -2px 5px rgba(0,0,0,.45), 0 1px 2px rgba(255,255,255,.6),
    0 0 0 2px rgba(58,62,67,.4);
}
.knob__grip{
  position:absolute; left:50%; top:5px; margin-left:-6px;
  width:12px; height:24px; border-radius:3px 3px 7px 7px; pointer-events:none;
  background:linear-gradient(var(--brass-hi), #A57F13);
  box-shadow:0 1px 3px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.8);
}
.knob::before{
  content:""; position:absolute; inset:-13px; border-radius:50%; pointer-events:none;
  background:conic-gradient(var(--brass) calc(var(--turn,0) * 1deg), rgba(255,255,255,.14) 0);
  -webkit-mask:radial-gradient(circle, transparent 0 calc(50% - 4px), #000 calc(50% - 3px));
          mask:radial-gradient(circle, transparent 0 calc(50% - 4px), #000 calc(50% - 3px));
}
.hint{margin:14px 0 0; text-align:center; font-size:8.5px;
  letter-spacing:.2em; color:var(--silk-faint)}
.lightbox{
  position:relative; display:grid; place-items:center; padding:16px;
  border-radius:var(--r-key);
  background:radial-gradient(120% 120% at 50% 40%, #FFF6E2, #D9CBAE 62%, #7E7362);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5), inset 0 3px 10px rgba(0,0,0,.35),
    0 0 22px -6px rgba(255,240,205,.4);
  transition:filter .32s var(--ease);
}
.lightbox.is-changing{filter:brightness(.35) saturate(.4)}
.mount{
  position:relative; width:196px; height:196px; padding:20px;
  display:grid; place-items:center;
  border-radius:5px;
  background:linear-gradient(160deg, #F4F1EA, #CFC7B7 60%, #B4AC9C);
  box-shadow:0 5px 12px -3px rgba(60,40,20,.55), inset 0 1px 0 rgba(255,255,255,.9);
}
.mount::before,.mount::after{
  content:""; position:absolute; width:15px; height:15px; border:2px solid rgba(70,50,30,.45);
}
.mount::before{top:-6px; left:-6px; border-right:0; border-bottom:0}
.mount::after{bottom:-6px; right:-6px; border-left:0; border-top:0}
.mount__win{
  position:relative; overflow:hidden; background:#0E0B08;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.7);
  width:152px; height:101px;
  transition:width .3s var(--ease), height .3s var(--ease);
}
.mount[data-orient="port"] .mount__win{width:101px; height:152px}
.mount__win img{width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(1.06) contrast(1.05)}
.mount__win img.is-in{animation:slideIn .42s var(--ease-back)}
@keyframes slideIn{
  0%{transform:translateX(115%)}
  78%{transform:translateX(-3%)}
  100%{transform:translateX(0)}
}
.mount__brand,.mount__no{
  position:absolute; font-size:7px; letter-spacing:.16em; color:#6B6152;
}
.mount__brand{left:9px; bottom:6px}
.mount__no{right:9px; bottom:6px; color:#8A3B33}
.testcard{position:absolute; inset:0; display:grid; place-items:center; text-align:center}
.testcard__bars{
  position:absolute; inset:0;
  background:linear-gradient(90deg,
    #C0C0C0 0 14.28%, #C0C000 14.28% 28.56%, #00C0C0 28.56% 42.84%,
    #00C000 42.84% 57.12%, #C000C0 57.12% 71.4%, #C00000 71.4% 85.68%,
    #0000C0 85.68% 100%);
  opacity:.62;
}
.testcard p{
  position:relative; margin:0; font-family:var(--f-mono); font-size:8px;
  letter-spacing:.16em; line-height:1.7; color:#F3EEE3;
  background:rgba(8,6,4,.78); padding:6px 8px;
}
.testcard b{font-size:9px; letter-spacing:.1em}
.mount.has-slide .testcard{display:none}
.slidecap{
  margin:12px 0 0; font-size:9px; letter-spacing:.13em; line-height:1.6;
  color:var(--silk-dim); min-height:2.6em;
}
.lever{
  margin-top:12px; width:100%; display:flex; align-items:center; gap:12px;
  padding:9px 12px; border:0; border-radius:var(--r-key); cursor:pointer;
  background:linear-gradient(180deg, #4A4E54, #2E3237);
  box-shadow:0 3px 0 #1B1E22, 0 6px 10px -4px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.22);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--silk);
}
.lever__arm{
  width:34px; height:11px; border-radius:2px; flex:none;
  background:linear-gradient(180deg, var(--steel-hi), var(--steel-lo));
  box-shadow:0 1px 2px rgba(0,0,0,.6);
  transform-origin:100% 50%;
  transition:transform .22s var(--ease-back);
}
.lever:active{transform:translateY(3px); box-shadow:0 0 0 #1B1E22, inset 0 3px 7px rgba(0,0,0,.75)}
.lever.is-thrown .lever__arm{transform:rotate(-26deg) translateX(-4px)}
.ctrlrail{display:grid; grid-template-columns:1fr 1fr 232px; gap:18px; align-items:stretch}
.modebank{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.pbtn{
  position:relative; border:0; cursor:pointer;
  padding:13px 10px 12px; border-radius:var(--r-key);
  background:linear-gradient(180deg, #E7E0D2, #BCB2A0 62%, #9A9082);
  box-shadow:0 4px 0 #6E665A, 0 8px 12px -5px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.9);
  font-family:var(--f-disp); font-weight:700; font-size:14px;
  letter-spacing:.16em; text-transform:uppercase; color:#33261C;
  transition:transform .07s linear, box-shadow .07s linear, color .18s var(--ease);
}
.pbtn:active{transform:translateY(4px);
  box-shadow:0 0 0 #6E665A, inset 0 3px 8px rgba(0,0,0,.5)}
.pbtn.is-on{
  transform:translateY(3px); color:#7A2412;
  background:linear-gradient(180deg, #C9BEAA, #A89C88);
  box-shadow:0 1px 0 #6E665A, inset 0 3px 8px rgba(0,0,0,.45);
}
.pbtn.is-on::after{
  content:""; position:absolute; left:50%; margin-left:-14px; bottom:5px;
  width:28px; height:2px; background:var(--red); border-radius:1px;
  box-shadow:0 0 6px rgba(255,65,51,.9);
}
.pbtn:focus-visible{outline:3px solid var(--amber); outline-offset:2px}
.pbtn--print{
  background:linear-gradient(180deg, #FF7A5C, #D93E20 60%, #A82A11);
  color:#2B0A02; box-shadow:0 4px 0 #6E1A08, 0 10px 16px -6px rgba(0,0,0,.75),
    inset 0 1px 0 rgba(255,255,255,.55);
  font-size:16px; letter-spacing:.24em; padding:14px 30px;
}
.pbtn--print:active{transform:translateY(4px); box-shadow:0 0 0 #6E1A08, inset 0 3px 9px rgba(0,0,0,.55)}
.pbtn--ghost{
  background:linear-gradient(180deg, #56504A, #3A3531);
  color:var(--silk-dim); box-shadow:0 3px 0 #241F1C, inset 0 1px 0 rgba(255,255,255,.16);
  font-size:11px; letter-spacing:.2em;
}
.pbtn--ghost:active{transform:translateY(3px); box-shadow:0 0 0, inset 0 3px 7px rgba(0,0,0,.6)}
.togglebank{display:grid; gap:12px}
.sw{display:flex; align-items:center; gap:12px; cursor:pointer}
.sw input{position:absolute; opacity:0; width:0; height:0}
.sw__body{
  position:relative; width:46px; height:26px; flex:none; border-radius:var(--r-key);
  background:linear-gradient(180deg, #1D1A18, #332E2A);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.12);
}
.sw__lever{
  position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:2px;
  background:linear-gradient(180deg, var(--steel-hi), var(--steel) 46%, var(--steel-lo));
  box-shadow:0 2px 3px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .16s var(--ease-back), background .16s var(--ease);
}
.sw input:checked + .sw__body .sw__lever{
  transform:translateX(20px);
  background:linear-gradient(180deg, #FFE7A8, var(--brass) 48%, var(--brass-lo));
}
.sw input:focus-visible + .sw__body{outline:3px solid var(--amber); outline-offset:2px}
.sw__lbl{font-size:9.5px; letter-spacing:.18em; color:var(--silk-faint)}
.sw input:checked ~ .sw__lbl{color:var(--brass-hi)}
.meter{position:relative; height:120px; border-radius:var(--r-key); overflow:hidden;
  background:linear-gradient(180deg, #EDE6D6, #C8BFAB);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5), inset 0 3px 8px rgba(0,0,0,.28)}
.meter__face{position:absolute; inset:0}
.meter__ticks{position:absolute; inset:0}
.meter__ticks .mt{
  position:absolute; left:50%; bottom:12px; width:1.5px; height:86px; margin-left:-.75px;
  background:linear-gradient(180deg, #4A3B2C 0 11px, transparent 11px);
  transform-origin:50% 100%;
}
.meter__ticks .mt.maj{width:2.5px; margin-left:-1.25px;
  background:linear-gradient(180deg, #2C2019 0 17px, transparent 17px)}
.meter__needle{
  position:absolute; left:50%; bottom:12px; width:2.5px; height:80px; margin-left:-1.25px;
  background:linear-gradient(180deg, var(--red), #8A1A10);
  transform-origin:50% 100%; transform:rotate(-52deg);
  transition:transform .8s cubic-bezier(.3,1.5,.4,1);
  box-shadow:0 0 4px rgba(0,0,0,.4);
}
.meter__hub{
  position:absolute; left:50%; bottom:6px; width:14px; height:14px; margin-left:-7px;
  border-radius:50%; background:radial-gradient(circle at 34% 30%, #6B6055, #2B2520);
  box-shadow:0 1px 2px rgba(0,0,0,.5);
}
.meter__lo,.meter__hi{position:absolute; bottom:14px; font-size:8px;
  letter-spacing:.1em; color:#5C4B39}
.meter__lo{left:12px}
.meter__hi{right:12px}
.meter__glass{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(150deg, rgba(255,255,255,.55) 0 26%, transparent 46%);
}
.gaugebank{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:rgba(0,0,0,.42); border:1px solid rgba(0,0,0,.42);
  border-radius:var(--r-key); overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.gauge{
  background:linear-gradient(180deg, rgba(0,0,0,.26), rgba(0,0,0,.10));
  padding:13px 16px 16px;
}
.gauge__head{display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--f-mono); font-size:9px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--silk-dim); margin-bottom:9px}
.gauge__head b{font-family:var(--f-crt); font-size:20px; letter-spacing:0;
  color:var(--brass-hi); -webkit-font-smoothing:none; line-height:1}
.gauge__track{
  position:relative; height:13px;
  border-top:1px solid var(--silk-faint); border-bottom:1px solid var(--silk-faint);
}
.gauge__track::before,.gauge__track::after{
  content:""; position:absolute; top:-4px; bottom:-4px; width:2px;
  background:var(--silk-faint);
}
.gauge__track::before{left:0}
.gauge__track::after{right:0}
.gauge__fill{
  position:relative; height:100%; width:0;
  background:linear-gradient(90deg, var(--brass-lo), var(--brass) 60%, var(--brass-hi));
  transition:width .7s var(--ease);
  box-shadow:0 0 10px -2px rgba(201,162,39,.7);
}
.gauge__fill::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,
    transparent 0 2px, rgba(19,10,11,.42) 2px 4px);
}
.printer{
  display:grid; grid-template-columns:var(--tape-w) 1fr; gap:20px 26px;
  align-items:center;
  padding:16px var(--pad) 4px;
  margin:0 calc(var(--pad) * -1) 0;
  border-top:1px solid rgba(0,0,0,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.printer__slotplate{grid-column:1; grid-row:1; order:-1}
.printer__ctrl{grid-column:2; grid-row:1; display:flex; flex-wrap:wrap;
  align-items:center; gap:12px 14px}
.printer__ctrl .panel__note{margin:0; flex:1 1 200px; text-align:right}
.printer__slotplate p{
  margin:0 0 8px; font-size:8.5px; letter-spacing:.2em; color:var(--silk-faint);
}
.slot{
  height:20px; border-radius:3px;
  background:linear-gradient(180deg, #150807, #2E1211);
  box-shadow:inset 0 5px 9px rgba(0,0,0,.95), inset 0 -1px 0 rgba(255,255,255,.14),
    0 1px 0 rgba(255,255,255,.09);
  display:grid; place-items:center;
}
.slot span{display:block; width:calc(100% - 22px); height:5px; border-radius:3px;
  background:#050202; box-shadow:inset 0 1px 2px rgba(0,0,0,.9)}
.silk{
  grid-column:1 / -1; margin:0; padding-top:12px;
  border-top:1px solid rgba(0,0,0,.3);
  font-size:9px; letter-spacing:.18em; color:var(--silk-faint); text-align:center;
  text-shadow:0 1px 0 rgba(255,255,255,.07);
}
.tapewell{display:flex; padding-left:var(--pad)}
.tape{
  position:relative; width:var(--tape-w); height:0; overflow:hidden;
  transition:height .85s cubic-bezier(.16,.86,.3,1), transform .45s var(--ease), opacity .45s var(--ease);
  filter:drop-shadow(0 16px 18px rgba(0,0,0,.6));
}
.tape.is-torn{transform:translateY(46px) rotate(1.4deg); opacity:0}
.tape__lip{
  position:absolute; inset:0 0 auto; height:18px; z-index:3; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.62), transparent);
}
.tape__inner{
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.028) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #F6F1E4, #EDE5D3);
  color:#241A14;
  font-family:var(--f-mono); font-size:11.5px; line-height:1.55;
  padding:14px 16px 26px;
  -webkit-mask:
    linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom/14px 10px repeat-x;
  mask:
    linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom/14px 10px repeat-x;
}
.tape.is-feeding .tape__inner{animation:feed .85s steps(9,end)}
@keyframes feed{
  0%{transform:translateY(-3px)} 25%{transform:translateY(1px)}
  50%{transform:translateY(-2px)} 75%{transform:translateY(1px)}
  100%{transform:translateY(0)}
}
.tape__block{white-space:pre; letter-spacing:0}
.tape__block + .tape__block{margin-top:2px}
.tape__block .hl{background:#241A14; color:#F6F1E4; display:inline-block}
.tape__block .fade{color:#8A7C6E}
.tape__empty{
  font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  color:#8A7C6E; text-align:center; padding:6px 0 0;
}
@media (max-width:1120px){
  .deck{grid-template-columns:1fr}
  .bay--ctrl{grid-template-columns:1fr 1fr; display:grid}
  .ctrlrail{grid-template-columns:1fr 1fr}
  .panel--meter{grid-column:1 / -1}
  .meter{height:104px}
}
@media (max-width:900px){
  .toprail{grid-template-columns:1fr; justify-items:center; gap:14px; padding:6px 0 16px}
  .statusblock{justify-items:center}
  .gaugebank{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  :root{--pad:14px; --tape-w:288px}
  .bench{padding:16px 14px 54px}
  .bay--ctrl{grid-template-columns:1fr}
  .ctrlrail{grid-template-columns:1fr}
  .modebank{grid-template-columns:1fr}
  .printer{grid-template-columns:1fr}
  .printer__slotplate,.printer__ctrl{grid-column:1; grid-row:auto}
  .printer__ctrl{order:-2}
  .printer__ctrl .panel__note{text-align:left}
  .tape__inner{font-size:10.5px; padding:12px 12px 24px}
  .crt__body{padding:18px 16px 16px; font-size:19px}
  .crt__copy{font-size:19px}
  .crt__title{font-size:clamp(30px,10vw,44px)}
  .crt__leaders li,.crt__sub,.crt__row,.crt__cmd{font-size:16px}
  .crt__index{grid-template-columns:1fr; font-size:16px}
  .bezel{padding:14px}
  .console{padding:var(--pad)}
  .screw--chassis{width:12px; height:12px}
  .nameplate h1{font-size:19px}
  .gaugebank{grid-template-columns:1fr}
}
@media (max-width:400px){
  :root{--tape-w:272px}
  .tape__inner{font-size:10px; padding:10px 10px 22px}
  .dialwrap{width:168px; height:168px}
  .knob{width:112px; height:112px; margin:-56px 0 0 -56px}
  .detents .dt{margin-top:-84px; transform-origin:50% 84px}
  .detents .dn{margin-top:-99px; transform-origin:50% 99px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
  .crt__body{opacity:1}
}