/* Hazel Foxley — Unit 1 main control board */
:root{
  --cond:'Barlow Condensed','Helvetica Neue',Arial Narrow,sans-serif;
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --steel:#a8ada7;
  --steel-2:#9a9f99;
  --ink:#141414;
}
*{box-sizing:border-box}
html{background:#121413}
body{margin:0;min-height:100vh;color:var(--ink);font-family:var(--cond);
  background:radial-gradient(1400px 700px at 50% -15%,#3b403d 0,#1a1d1c 55%,#0f1110 100%);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit}
button:focus-visible{outline:2px dashed #ffd23a;outline-offset:3px}

.room{padding:28px 20px 60px}
.panel{
  max-width:1500px;margin:0 auto;padding:22px;position:relative;border-radius:5px;
  background:var(--grain),linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 28%,rgba(0,0,0,.06)),var(--steel);
  box-shadow:0 40px 90px rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(0,0,0,.25);
  display:grid;gap:16px;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  grid-template-areas:"head head" "ann meters" "mimic chart" "ledge ledge" "bench bench" "printer plate";
}
.panel.shake{animation:shake .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(4px,-2px)}30%,50%,70%{transform:translate(-6px,2px)}40%,60%{transform:translate(6px,-1px)}}

/* ---------- modules ---------- */
.mod{position:relative;padding:40px 18px 18px;border-radius:3px;
  background:var(--grain),linear-gradient(180deg,#a3a8a2,#979c96);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.25),0 0 0 1px rgba(0,0,0,.3),0 1px 0 1px rgba(255,255,255,.25),0 6px 14px rgba(0,0,0,.16)}
.screw{position:absolute;width:11px;height:11px;border-radius:50%;z-index:2;pointer-events:none;
  background:radial-gradient(circle at 35% 30%,#fafaf6,#b3b5af 40%,#6e706b 78%,#4e504b);
  box-shadow:0 1px 1px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.18)}
.screw::after{content:"";position:absolute;left:1.5px;right:1.5px;top:50%;height:2px;margin-top:-1px;background:rgba(30,30,30,.75);border-radius:1px;transform:rotate(var(--r,0deg));box-shadow:0 1px 0 rgba(255,255,255,.35)}

/* engraved phenolic labels */
.tag{position:absolute;left:18px;top:12px;display:inline-block;padding:5px 10px 4px;border-radius:2px;
  font:600 12px/1 var(--cond);letter-spacing:.16em;color:#efeee6;text-transform:uppercase;white-space:nowrap;
  background:linear-gradient(180deg,#2a2a2a,#121212);
  box-shadow:0 0 0 1px #000,0 1px 0 1px rgba(255,255,255,.3),inset 0 1px 0 rgba(255,255,255,.12);
  text-shadow:0 -1px 0 rgba(0,0,0,.9)}
.tag.red{background:linear-gradient(180deg,#b3251b,#7d120b)}
.tag.sm{position:static;font-size:10.5px;letter-spacing:.14em;padding:4px 8px 3px}

.dymo{display:inline-block;padding:4px 9px 3px;border-radius:2px;transform:rotate(-.8deg);
  font:700 11px/1 var(--cond);letter-spacing:.2em;color:#f4f4ef;white-space:nowrap;
  background:linear-gradient(180deg,#2c2c2c,#0b0b0b 55%,#1b1b1b);
  text-shadow:0 1px 0 rgba(255,255,255,.18),0 -1px 0 rgba(0,0,0,.9);
  box-shadow:0 1px 2px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.18)}
.dymo.red{background:linear-gradient(180deg,#c8241a,#8d0f08 55%,#a8180f)}
.tape{position:absolute;z-index:3;padding:6px 12px 5px;font:400 13px/1.15 'Permanent Marker',cursive;color:#1b1b1b;
  background:linear-gradient(180deg,rgba(236,224,182,.96),rgba(224,210,165,.96));
  clip-path:polygon(0 4%,4% 0,9% 5%,15% 0,22% 4%,30% 0,40% 3%,52% 0,63% 4%,74% 0,84% 3%,93% 0,100% 5%,98% 50%,100% 96%,92% 100%,83% 96%,72% 100%,60% 97%,48% 100%,36% 96%,24% 100%,13% 96%,4% 100%,0 95%,2% 50%);
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));pointer-events:none}

/* ---------- header ---------- */
.head{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:18px 22px}
.nameplate{position:relative;padding:16px 30px 14px;border-radius:3px;
  background:linear-gradient(180deg,#252525,#0d0d0d);
  box-shadow:0 0 0 1px #000,0 2px 0 1px rgba(255,255,255,.28),inset 0 1px 0 rgba(255,255,255,.12),inset 0 -2px 0 rgba(0,0,0,.5),0 8px 16px rgba(0,0,0,.25)}
.np-name{font:700 clamp(34px,5.4vw,72px)/.9 var(--cond);letter-spacing:.2em;color:#f1efe6;margin-right:-.2em;
  text-shadow:0 -1px 0 rgba(0,0,0,1),0 1px 0 rgba(255,255,255,.08)}
.np-sub{display:flex;align-items:center;gap:10px;margin-top:10px;font:600 clamp(10px,1vw,13px)/1 var(--cond);letter-spacing:.28em;color:#bdbbb2}
.np-dot{width:5px;height:5px;border-radius:50%;background:#bdbbb2}
.np-unit{margin-left:6px;padding:4px 8px 3px;background:linear-gradient(#b3251b,#7d120b);color:#fff;letter-spacing:.2em;border-radius:2px;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.head-inst{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap}

/* digital panel meters */
.dpm{display:flex;flex-direction:column;align-items:center;gap:7px}
.dpm>b,.lu>b,.pbu>b{font:600 10px/1 var(--cond);letter-spacing:.14em;color:#efeee6;background:linear-gradient(#262626,#111);padding:4px 7px 3px;border-radius:2px;white-space:nowrap;
  box-shadow:0 0 0 1px #000,0 1px 0 1px rgba(255,255,255,.25)}
.win{position:relative;padding:7px 10px;border-radius:3px;background:linear-gradient(180deg,#140b09,#060404);
  box-shadow:inset 0 3px 8px rgba(0,0,0,.95),0 0 0 2px #1b1b1b,0 0 0 4px #565a55,0 1px 0 4px rgba(255,255,255,.35)}
.win::after{content:"";position:absolute;inset:0;border-radius:3px;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,0) 38%)}
.seg7{height:34px;display:block}
.seg7 svg{height:100%;width:auto;display:block;overflow:visible;filter:drop-shadow(0 0 4px var(--glow))}
.seg7 .sg{fill:var(--off);transition:fill .05s}
.seg7 .sg.on{fill:var(--on)}
.seg7.red{--on:#ff3d1f;--off:rgba(255,50,25,.075);--glow:rgba(255,45,15,.55)}
.seg7.green{--on:#45ff86;--off:rgba(60,255,120,.07);--glow:rgba(40,255,110,.45)}
.seg7.amber{--on:#ffb21c;--off:rgba(255,170,20,.075);--glow:rgba(255,160,10,.5)}
.head .seg7{height:38px}

/* odometer */
.odo{display:flex;gap:2px;padding:6px;border-radius:3px;background:linear-gradient(#2a2a2a,#0e0e0e);
  box-shadow:0 0 0 1px #000,0 0 0 3px #5a5e59,0 1px 0 3px rgba(255,255,255,.35),inset 0 1px 0 rgba(255,255,255,.1)}
.od{position:relative;width:22px;height:38px;overflow:hidden;border-radius:1px;background:#0b0b0b;
  box-shadow:inset 0 0 0 1px #000}
.od::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.85),rgba(0,0,0,0) 30%,rgba(255,255,255,.07) 50%,rgba(0,0,0,0) 70%,rgba(0,0,0,.85))}
.od-s{position:absolute;left:0;right:0;top:0;will-change:transform}
.od-s span{display:block;height:38px;font:600 26px/38px var(--cond);text-align:center;color:#ecebe2}
.od.t{background:#e9e6dc}.od.t .od-s span{color:#b0180d}

/* ---------- annunciator ---------- */
.ann{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;padding:6px;border-radius:3px;background:#0b0b0b;container-type:inline-size;
  box-shadow:0 0 0 3px #262626,0 0 0 5px #6a6e69,0 1px 0 5px rgba(255,255,255,.35),inset 0 2px 8px rgba(0,0,0,.9)}
.w{position:relative;aspect-ratio:1.38;display:grid;place-items:center;padding:4px;text-align:center;white-space:pre-line;
  font:600 clamp(8px,1.85cqi,14px)/1.06 var(--cond);letter-spacing:.06em;text-transform:uppercase;
  color:rgba(36,32,28,.5);background:var(--lens);border-radius:1px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),inset 0 8px 14px rgba(255,255,255,.22),inset 0 -10px 16px rgba(0,0,0,.18)}
.w.r{--lens:linear-gradient(180deg,#d7c4bc,#bba79e)}
.w.a{--lens:linear-gradient(180deg,#d9cfb1,#bdb293)}
.w.w_{--lens:linear-gradient(180deg,#dcdad1,#c0beb4)}
.w::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(160deg,rgba(255,255,255,.25),rgba(255,255,255,0) 40%)}
.w.lit{color:rgba(30,6,0,.92);z-index:1}
.w.r.lit{background:radial-gradient(120% 95% at 50% 45%,#ffb39a 0,#ff4a2c 42%,#c8180b 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.3),0 0 22px 3px rgba(255,55,25,.55)}
.w.a.lit{background:radial-gradient(120% 95% at 50% 45%,#fff0b3 0,#ffbe2e 45%,#cc7a00 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.3),0 0 22px 3px rgba(255,175,20,.5)}
.w.w_.lit{background:radial-gradient(120% 95% at 50% 45%,#ffffff 0,#fff6d8 45%,#dccb93 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.3),0 0 22px 3px rgba(255,245,200,.45)}
.ann-keys{display:flex;align-items:flex-end;gap:16px;margin-top:20px;flex-wrap:wrap}
.keys-dymo{margin-left:auto;align-self:center}

/* ---------- pushbuttons ---------- */
.pbu{display:flex;flex-direction:column;align-items:center;gap:7px}
.pbs{display:flex;gap:14px}
.pb{--c:#5a5a5a;--c2:#1f1f1f;--c3:#050505;appearance:none;border:0;padding:0;cursor:pointer;width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;position:relative;touch-action:manipulation;
  background:radial-gradient(circle,#1c1c1c 0 57%,transparent 58%),conic-gradient(from 200deg,#f7f7f3,#8c8e89,#e9e9e5,#6c6e69,#f7f7f3,#8c8e89,#f7f7f3);
  box-shadow:0 2px 4px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.4)}
.pb .cap{width:38px;height:38px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 40% 30%,var(--c) 0,var(--c2) 58%,var(--c3) 100%);
  box-shadow:0 4px 0 var(--c3),0 6px 6px rgba(0,0,0,.55),inset 0 1px 1px rgba(255,255,255,.4);
  transform:translateY(-3px);transition:transform .05s,box-shadow .05s}
.pb:active .cap,.pb.down .cap{transform:translateY(1px);box-shadow:0 0 0 var(--c3),0 1px 2px rgba(0,0,0,.6),inset 0 1px 1px rgba(255,255,255,.25)}
.pb.sq{border-radius:7px;background:linear-gradient(#1c1c1c,#1c1c1c) center/76% 76% no-repeat,linear-gradient(160deg,#f7f7f3,#8c8e89 40%,#e9e9e5 60%,#6c6e69)}
.pb.sq .cap{border-radius:4px;width:36px;height:36px}
.pb.red{--c:#ff6a58;--c2:#cc1a0e;--c3:#650904}
.pb.green{--c:#5fe08a;--c2:#138a3c;--c3:#063f1a}
.pb.black{--c:#666;--c2:#1f1f1f;--c3:#030303}
.pb.yellow{--c:#ffe878;--c2:#e2a900;--c3:#6d4f00}
.pb.blue{--c:#7cb0ff;--c2:#1c58ba;--c3:#0a2658}
.pb.white{--c:#ffffff;--c2:#cfcec6;--c3:#6c6c64}

/* ---------- lamps ---------- */
.lamps{display:flex;gap:12px;justify-content:center}
.lu{display:flex;flex-direction:column;align-items:center;gap:6px}
.lamp{--l:#ff3b22;--d:#5a1810;position:relative;display:block;width:30px;height:30px;border-radius:50%;
  background:conic-gradient(from 220deg,#f2f2ee,#7b7d78,#e3e3df,#5c5e59,#f2f2ee,#7b7d78,#f2f2ee);
  box-shadow:0 2px 3px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.35)}
.lamp::after{content:"";position:absolute;inset:5px;border-radius:50%;transition:background .06s,box-shadow .06s;
  background:radial-gradient(circle at 40% 35%,color-mix(in srgb,var(--d) 75%,#fff 25%) 0,var(--d) 60%,color-mix(in srgb,var(--d) 60%,#000) 100%);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.7)}
.lamp::before{content:"";position:absolute;inset:5px;border-radius:50%;z-index:1;pointer-events:none;
  background:repeating-conic-gradient(rgba(255,255,255,.07) 0 15deg,rgba(0,0,0,.05) 15deg 30deg),radial-gradient(circle at 35% 30%,rgba(255,255,255,.5),rgba(255,255,255,0) 35%)}
.lamp.on::after{background:radial-gradient(circle at 42% 38%,#fff 0,var(--l) 38%,color-mix(in srgb,var(--l) 65%,#000) 100%);
  box-shadow:0 0 12px 3px color-mix(in srgb,var(--l) 80%,transparent),0 0 28px 6px color-mix(in srgb,var(--l) 35%,transparent)}
.lamp.red{--l:#ff3a1e;--d:#5c1a12}
.lamp.green{--l:#3dff73;--d:#173f22}
.lamp.amber{--l:#ffae17;--d:#5b4013}
.lamp.white{--l:#fff8dc;--d:#58554b}

.led{display:inline-flex;align-items:center;gap:5px;font:600 10px/1 var(--cond);letter-spacing:.12em;color:#cfcdc4}
.led::before{content:"";width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--l) 18%,#111);box-shadow:inset 0 1px 1px rgba(0,0,0,.6)}
.led.on::before{background:var(--l);box-shadow:0 0 6px 1px var(--l)}
.led.green{--l:#3dff73}.led.amber{--l:#ffae17}.led.red{--l:#ff3a1e}

/* ---------- meters ---------- */
.meters-wrap{display:flex;gap:16px;align-items:stretch}
.meters{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:12px;min-width:0}
.meter{position:relative;aspect-ratio:1;border-radius:6px;padding:7px;
  background:linear-gradient(160deg,#2b2b2b,#0b0b0b 60%,#1a1a1a);
  box-shadow:0 0 0 1px #000,0 2px 0 1px rgba(255,255,255,.22),0 8px 14px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.15)}
.meter svg{width:100%;height:100%;display:block;border-radius:3px}
.m-arc{fill:none;stroke:#141414;stroke-width:1.4}
.m-tk{stroke:#161616;stroke-width:1.1}
.m-tk.M{stroke-width:2.4}
.m-num{font:600 13.5px var(--cond);fill:#141414;text-anchor:middle}
.m-title{font:700 11.5px var(--cond);letter-spacing:.16em;fill:#141414;text-anchor:middle}
.m-unit{font:600 9.5px var(--cond);letter-spacing:.2em;fill:#5b5850;text-anchor:middle}
.m-brand{font:600 7px var(--cond);letter-spacing:.3em;fill:#8b877b;text-anchor:middle}
.m-needle{fill:#111}
.m-needle-tip{fill:#c8180b}
.dpms{display:flex;flex-direction:column;justify-content:space-between;gap:10px}
.dpms .dpm{align-items:stretch}
.dpms .win{display:flex;justify-content:flex-end}
.sync-lts{display:flex;justify-content:center;gap:14px;padding-top:4px}

/* ---------- mimic ---------- */
.mimic-face{border-radius:3px;padding:6px;
  background:var(--grain),linear-gradient(180deg,#929790,#8a8f88);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.45),0 1px 0 1px rgba(255,255,255,.3)}
#mimic{display:block;width:100%;height:auto}
#mimic .cmp{fill:#cfd2cb;stroke:#151515;stroke-width:2}
#mimic .cmp-o{fill:none;stroke:#151515;stroke-width:2}
#mimic .furn{fill:#2a2420}
#mimic .water{fill:#2f74ab}
#mimic .water-top{stroke:#8fc3ea;stroke-width:1.5}
#mimic .tubes{stroke:#4b433d;stroke-width:3}
#mimic .tubes.dk{stroke:#8a8d86;stroke-width:2}
#mimic .riser{stroke:#151515;stroke-width:5}
#mimic .nozzle{fill:#555;stroke:#151515;stroke-width:1.5}
#mimic .shaft{stroke:#151515;stroke-width:6}
#mimic .elec{fill:none;stroke:#151515;stroke-width:3}
#mimic .lbl{font:600 11px var(--cond);letter-spacing:.14em;fill:#121212;text-anchor:middle}
#mimic .lbl.sm{font-size:9.5px}
#mimic .lbl.big{font-size:20px;letter-spacing:0;font-weight:700}
#mimic .halo{paint-order:stroke;stroke:#cfd2cb;stroke-width:4px;stroke-linejoin:round}
#mimic .halo-dk{fill:#e8e2d6;paint-order:stroke;stroke:#2a2420;stroke-width:4px}
#mimic .pipe{fill:none;stroke-width:7;stroke-linejoin:miter}
#mimic .casing{fill:none;stroke:#141414;stroke-width:11;stroke-linejoin:miter}
#mimic .flow{fill:none;stroke:rgba(255,255,255,.7);stroke-width:2.2;stroke-dasharray:3 13;stroke-linecap:round}
#mimic .feed{stroke:#2a6ea6}
#mimic .steam{stroke:#bf3329}
#mimic .exh{stroke:#c98479}
#mimic .cond{stroke:#68addb}
#mimic .fuel{stroke:#d4a600}
#mimic .cw{stroke:#2c8f73}
#mimic .pump circle{stroke:#151515;stroke-width:2;fill:#1f9d4a}
#mimic .pump path{fill:#151515}
#mimic .pump.run circle{fill:#d82a1b}
#mimic .pump.trip circle{fill:#f0a500}
#mimic .valve path{stroke:#151515;stroke-width:1.6;fill:#1f9d4a}
#mimic .valve.open path{fill:#d82a1b}
#mimic .brk{stroke:#151515;stroke-width:2;fill:#1f9d4a}
#mimic .brk.closed{fill:#d82a1b}
#mimic .rotor-dot{fill:#151515}
#mimic .flame{fill:url(#flameG);mix-blend-mode:screen}
#mimic .itag rect{fill:#0d0d0d;stroke:#000;stroke-width:1}
#mimic .it-l{font:600 7.5px var(--cond);letter-spacing:.18em;fill:#8f8d85}
#mimic .it-v{font:700 13px var(--cond);letter-spacing:.06em;fill:#ff4a26;text-anchor:end}
#mimic .pf{fill:#f4f4f2;opacity:0}
#puff.on .pf{animation:puff 1.1s linear infinite}
#puff.on .pf:nth-child(2){animation-delay:.37s}
#puff.on .pf:nth-child(3){animation-delay:.74s}
@keyframes puff{0%{opacity:.95;transform:translate(0,4px) scale(.5)}100%{opacity:0;transform:translate(10px,-26px) scale(2.2)}}

/* ---------- trend recorder ---------- */
.recorder{border-radius:5px;padding:10px;background:linear-gradient(180deg,#2a2c2b,#141515);
  box-shadow:0 0 0 1px #000,0 2px 0 1px rgba(255,255,255,.22),inset 0 1px 0 rgba(255,255,255,.1),0 8px 14px rgba(0,0,0,.3)}
.rec-scale{display:flex;flex-wrap:wrap;gap:6px 14px;padding:2px 4px 8px;font:600 10px/1 var(--cond);letter-spacing:.12em;color:#d6d4cb}
.pen{display:inline-flex;align-items:center;gap:6px}
.pen i{width:14px;height:3px;border-radius:2px;background:var(--p)}
.p1{--p:#d42a1d}.p2{--p:#2257b5}.p3{--p:#1d8a46}
.rec-glass{position:relative;border-radius:2px;overflow:hidden;box-shadow:inset 0 0 0 1px #000,0 0 0 2px #3a3d3b}
.rec-glass::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(165deg,rgba(255,255,255,.22),rgba(255,255,255,0) 30%),linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,0) 12%,rgba(0,0,0,0) 85%,rgba(0,0,0,.25))}
#chart{display:block;width:100%;height:300px}
.rec-foot{display:flex;justify-content:space-between;padding:8px 4px 0;font:600 9.5px/1 var(--cond);letter-spacing:.16em;color:#8e8d86}
.rec-led{display:inline-flex;align-items:center;gap:6px}
.rec-led i{width:7px;height:7px;border-radius:50%;background:#ff3a1e;box-shadow:0 0 6px #ff3a1e;animation:blink 2s steps(1) infinite}
@keyframes blink{50%{opacity:.25}}
.t-chart{right:26px;top:8px;transform:rotate(2.5deg)}

/* ---------- benchboard ---------- */
.ledge{height:14px;margin:4px -22px -6px;border-radius:2px;position:relative;z-index:1;
  background:linear-gradient(180deg,#d4d8d2,#a5aaa4 45%,#7f847e);
  box-shadow:0 3px 6px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.7)}
.bench{display:grid;gap:14px;padding:22px 18px 18px;border-radius:3px;
  grid-template-columns:repeat(5,auto);
  background:var(--grain),linear-gradient(180deg,#8f948e,#a3a8a2 40%,#aab0aa);
  box-shadow:inset 0 10px 18px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.3);
  transform:perspective(1800px) rotateX(9deg);transform-origin:50% 0}
.bm{padding-top:44px;padding-bottom:22px}
.crow{display:flex;justify-content:space-around;align-items:flex-start;gap:14px}
.cg{display:flex;flex-direction:column;align-items:center;gap:14px}
.d-feed{position:absolute;right:14px;bottom:-8px;transform:rotate(-1.2deg);z-index:2}
.d-estop{position:absolute;right:16px;bottom:-8px;transform:rotate(1.4deg);z-index:2}
.t-brk{right:-10px;bottom:-14px;transform:rotate(-3deg);font-size:12px}

/* pistol-grip switch */
.pg{position:relative;width:120px;height:112px;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.pg-plate{position:absolute;inset:0;border-radius:6px;background:linear-gradient(180deg,#262626,#0d0d0d);
  box-shadow:0 0 0 1px #000,0 2px 0 1px rgba(255,255,255,.28),inset 0 1px 0 rgba(255,255,255,.12),0 4px 8px rgba(0,0,0,.3)}
.pg .lg{position:absolute;transform:translate(-50%,-50%);font:600 10.5px/1 var(--cond);letter-spacing:.1em;color:#efeee6;white-space:nowrap}
.pg .tk{position:absolute;width:2px;height:7px;margin:-3.5px -1px;background:#efeee6;border-radius:1px}
.pg-grip{position:absolute;left:46px;top:34px;width:28px;height:64px;border:0;padding:0;cursor:pointer;
  transform-origin:14px 38px;transform:rotate(var(--a,0deg));transition:transform .16s cubic-bezier(.34,1.56,.64,1);
  border-radius:14px 14px 10px 10px/30px 30px 12px 12px;
  background:linear-gradient(90deg,#030303,#3d3d3d 32%,#1c1c1c 58%,#050505);
  box-shadow:0 7px 9px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.25)}
.pg-grip::before{content:"";position:absolute;left:50%;top:5px;width:3px;height:20px;margin-left:-1.5px;background:#f2f1ea;border-radius:2px}
.pg-grip::after{content:"";position:absolute;left:50%;top:38px;width:16px;height:16px;margin:-8px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#a3a39d,#2a2a2a 62%,#111)}

/* single loop controller */
.ctl{width:150px;padding:10px 10px 12px;border-radius:4px;display:flex;flex-direction:column;gap:9px;
  background:linear-gradient(180deg,#36383a,#212325);
  box-shadow:0 0 0 1px #000,0 2px 0 1px rgba(255,255,255,.22),inset 0 1px 0 rgba(255,255,255,.14),0 6px 12px rgba(0,0,0,.35)}
.ctl-tag{font:700 11px/1 var(--cond);letter-spacing:.2em;color:#d9d7cf;display:flex;justify-content:space-between}
.ctl-tag::after{content:"MOD 352";color:#8e8d86;font-weight:600;letter-spacing:.14em}
.ctl-win{padding:7px 8px;border-radius:2px;background:#060505;box-shadow:inset 0 2px 6px #000,0 0 0 1px #000,0 1px 0 1px rgba(255,255,255,.12);display:flex;flex-direction:column;gap:6px}
.ctl-row,.ctl-bar{display:flex;align-items:center;justify-content:space-between;gap:6px}
.ctl-row span,.ctl-bar span{font:600 9px/1 var(--cond);letter-spacing:.14em;color:#8e8d86}
.ctl .seg7{height:24px}
.bar{display:flex;gap:2px;flex:1;justify-content:flex-end}
.bar i{width:7px;height:9px;border-radius:1px;background:rgba(255,170,20,.1)}
.bar i.on{background:#ffb21c;box-shadow:0 0 4px rgba(255,170,20,.7)}
.ctl-leds{display:flex;justify-content:space-around}
.ctl-keys{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:6px}
.ck{appearance:none;border:0;cursor:pointer;height:28px;border-radius:3px;font:700 12px/1 var(--cond);letter-spacing:.06em;color:#e7e5dc;touch-action:manipulation;
  background:linear-gradient(180deg,#5b5e61,#3a3c3f);box-shadow:0 3px 0 #141516,0 4px 5px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.2);transform:translateY(-2px);transition:transform .05s,box-shadow .05s}
.ck:active,.ck.down{transform:translateY(1px);box-shadow:0 0 0 #141516,0 1px 2px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.15)}
.ck.am{background:linear-gradient(180deg,#c9c3b1,#a39d8b);color:#1b1b1b;box-shadow:0 3px 0 #5e5a4f,0 4px 5px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.4)}
.ctl-name{font:600 9.5px/1 var(--cond);letter-spacing:.18em;color:#1b1b1b;text-align:center;padding:4px 0 3px;background:linear-gradient(#e7e1cf,#cfc8b3);border-radius:1px}
.gov{gap:12px}
.gwin .seg7{height:30px}
.ctl-leds.sm{gap:14px}
.ctl-leds.sm .led{color:#1b1b1b}

/* emergency stop */
.estop-wrap{position:relative;width:150px;height:150px}
.collar{position:absolute;inset:0;width:100%;height:100%}
.collar-y{fill:#f2c200}
.collar-edge{fill:none;stroke:rgba(0,0,0,.35);stroke-width:2}
.collar-t{font:700 13px var(--cond);letter-spacing:.2em;fill:#151515}
.estop{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px;border-radius:50%;border:0;cursor:pointer;touch-action:manipulation;
  background:radial-gradient(circle at 38% 30%,#ff7a68,#d81e12 42%,#7d0905 100%);
  box-shadow:0 0 0 6px #1b1b1b,0 0 0 8px #555,0 9px 0 6px #4a0402,0 14px 16px 6px rgba(0,0,0,.45),inset 0 -8px 12px rgba(0,0,0,.35),inset 0 4px 6px rgba(255,255,255,.3);
  transform:translateY(-7px);transition:transform .08s,box-shadow .08s}
.estop.in{transform:translateY(1px);box-shadow:0 0 0 6px #1b1b1b,0 0 0 8px #555,0 1px 0 6px #4a0402,0 4px 6px 6px rgba(0,0,0,.45),inset 0 -8px 12px rgba(0,0,0,.35),inset 0 4px 6px rgba(255,255,255,.3)}
.estop.in{animation:estopGlow 1s steps(1) infinite}
@keyframes estopGlow{50%{filter:brightness(1.25)}}
.guard{position:absolute;left:12px;right:12px;top:12px;bottom:12px;border-radius:12px;cursor:pointer;padding:0;
  border:2px solid rgba(255,255,255,.55);background:linear-gradient(150deg,rgba(255,255,255,.45),rgba(255,255,255,.08) 40%,rgba(255,255,255,.18));
  box-shadow:0 6px 10px rgba(0,0,0,.3),inset 0 0 0 1px rgba(0,0,0,.15);backdrop-filter:blur(.5px);
  transform-origin:50% 0;transition:transform .35s cubic-bezier(.3,1.4,.5,1),opacity .35s;transform:perspective(400px) rotateX(0)}
.guard span{position:absolute;left:50%;top:-8px;width:40px;height:10px;margin-left:-20px;border-radius:3px;background:linear-gradient(#cfd1cc,#7f817c);box-shadow:0 1px 2px rgba(0,0,0,.4)}
.guard.open{transform:perspective(400px) rotateX(-74deg)}

/* bat toggle */
.tog{appearance:none;border:0;padding:0;cursor:pointer;position:relative;width:70px;height:96px;border-radius:6px;
  background:linear-gradient(180deg,#262626,#0d0d0d);box-shadow:0 0 0 1px #000,0 2px 0 1px rgba(255,255,255,.28),0 4px 8px rgba(0,0,0,.3)}
.tog::before,.tog::after{position:absolute;left:0;right:0;text-align:center;font:600 10px/1 var(--cond);letter-spacing:.14em;color:#efeee6}
.tog::before{content:"ON";top:8px}.tog::after{content:"OFF";bottom:8px}
.tog-nut{position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px;border-radius:50%;
  background:radial-gradient(circle,#2a2a2a 0 32%,transparent 34%),conic-gradient(from 30deg,#f3f3ef,#7d7f7a,#e5e5e1,#5d5f5a,#f3f3ef,#7d7f7a,#f3f3ef);box-shadow:0 2px 3px rgba(0,0,0,.5)}
.tog-lever{position:absolute;left:50%;width:12px;height:30px;margin-left:-6px;border-radius:6px;
  background:linear-gradient(90deg,#7a7c77,#f4f4f0 40%,#a9aba6 70%,#5d5f5a);box-shadow:0 3px 4px rgba(0,0,0,.5);transition:top .12s,height .12s,transform .12s}
.tog.on .tog-lever{top:20px}
.tog:not(.on) .tog-lever{top:46px}

/* ---------- printer ---------- */
.printer{border-radius:4px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.45),0 8px 14px rgba(0,0,0,.25)}
.paper-win{height:250px;background:#1b1c1b;padding:0 18px;overflow:hidden;box-shadow:inset 0 10px 16px rgba(0,0,0,.6)}
.paper{height:100%;display:flex;flex-direction:column;justify-content:flex-end;background:#f4f2ea;position:relative;
  box-shadow:0 0 12px rgba(0,0,0,.6)}
.paper::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0) 22%)}
.pl{position:relative;flex:none;height:18px;padding:0 34px;font:400 13px/18px 'DotGothic16',monospace;color:#2a2a2a;white-space:pre;overflow:hidden;
  text-shadow:0 0 .6px rgba(40,40,40,.6);animation:feed .14s ease-out}
.pl.g{background:#d8eadb}
.pl.h::before,.pl.h::after{content:"";position:absolute;top:4px;width:10px;height:10px;border-radius:50%;background:#1b1c1b;box-shadow:inset 0 1px 2px rgba(0,0,0,.8)}
.pl.h::before{left:10px}.pl.h::after{right:10px}
.pl .k-ALM{color:#b3150a}
@keyframes feed{from{height:0}to{height:18px}}
.pr-body{position:relative;padding:14px 16px 12px;background:linear-gradient(180deg,#e2dccb,#cfc8b4);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.pr-slot{position:absolute;left:12px;right:12px;top:-4px;height:8px;border-radius:4px;background:#111;box-shadow:inset 0 2px 3px #000,0 1px 0 rgba(255,255,255,.7)}
.pr-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.pr-brand{font:700 11px/1 var(--cond);letter-spacing:.2em;color:#3d3a32;margin-right:auto}
.pr-leds{display:flex;gap:12px}
.pr-leds .led{color:#3d3a32}
.pr-btn{appearance:none;border:0;cursor:pointer;padding:7px 12px 6px;border-radius:3px;font:700 10px/1 var(--cond);letter-spacing:.16em;color:#2a2822;
  background:linear-gradient(#f4efe0,#cbc4ae);box-shadow:0 2px 0 #8d8672,0 3px 4px rgba(0,0,0,.25),inset 0 1px 0 #fff}
.pr-btn:active{transform:translateY(2px);box-shadow:0 0 0 #8d8672,inset 0 1px 0 #fff}

/* ---------- reference card + maker plate ---------- */
.plate-mod{display:flex;flex-direction:column;gap:16px}
.card{position:relative;padding:18px 20px 14px;transform:rotate(-.6deg);font:400 13.5px/1.45 'Courier Prime',monospace;color:#1f1f1f;
  background:linear-gradient(180deg,#fbf8ee,#efe9d8);box-shadow:0 2px 6px rgba(0,0,0,.3),inset 0 0 0 1px rgba(0,0,0,.08)}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(155deg,rgba(255,255,255,.55),rgba(255,255,255,0) 35%)}
.card h2{margin:0 0 8px;font:700 14px/1.2 'Courier Prime',monospace;letter-spacing:.06em;border-bottom:2px solid #1f1f1f;padding-bottom:6px}
.card ol{margin:0;padding-left:22px}
.card li{margin:2px 0}
.card-n{margin:10px 0 0;font-weight:700;color:#a3160d;font-size:12px}
.card-r{margin:4px 0 0;text-align:right;font-size:10.5px;color:#6b665a}
.maker{padding:12px 16px;border-radius:3px;text-align:center;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.1) 0 1px,rgba(0,0,0,.03) 1px 3px),linear-gradient(180deg,#dfe2de,#a9ada8);
  box-shadow:0 0 0 1px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.8),0 2px 4px rgba(0,0,0,.25)}
.mk-1{font:700 14px/1.1 var(--cond);letter-spacing:.28em;color:#202020}
.mk-2{font:600 11px/1.5 var(--cond);letter-spacing:.2em;color:#2e2e2e;margin-top:4px}
.mk-3{font:600 10px/1.4 var(--cond);letter-spacing:.2em;color:#4a4a4a}

.noscript{position:fixed;inset:auto 0 0 0;margin:0;padding:12px;text-align:center;background:#b3150a;color:#fff;font:700 14px var(--cond);letter-spacing:.2em}

/* ---------- responsive ---------- */
@media (max-width:1480px){
  .bench{grid-template-columns:repeat(3,auto)}
}
@media (max-width:1180px){
  .panel{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "ann" "meters" "mimic" "chart" "ledge" "bench" "printer" "plate"}
  .bench{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));transform:none}
}
@media (max-width:760px){
  .room{padding:0}
  .panel{padding:16px;gap:14px;border-radius:0}
  .mod{padding:40px 12px 14px}
  .head{padding:16px 14px}
  .nameplate{padding:12px 16px 11px;width:100%}
  .np-name{font-size:clamp(28px,10vw,48px);letter-spacing:.14em}
  .np-sub{flex-wrap:wrap;gap:6px 8px;letter-spacing:.2em}
  .head-inst{gap:14px 12px;justify-content:space-between;width:100%}
  .head .seg7{height:28px}
  .od{width:17px;height:30px}.od-s span{height:30px;font-size:21px;line-height:30px}
  .ann{grid-template-columns:repeat(4,1fr)}
  .w{font-size:clamp(9px,3cqi,12px)}
  .ann-keys{gap:12px;justify-content:space-between}
  .keys-dymo{display:none}
  .meters-wrap{flex-direction:column}
  .dpms{display:grid;grid-template-columns:1fr 1fr}
  .sync-lts{grid-column:1/-1}
  .bench{padding:14px 10px;grid-template-columns:1fr}
  .crow{flex-wrap:wrap}
  .ledge{margin:0 -16px}
  .paper-win{height:220px;padding:0 6px}
  .pl{font-size:11px;padding:0 26px}
  .pl.h::before{left:6px}.pl.h::after{right:6px}
  .t-chart{display:none}
}
@media (prefers-reduced-motion:reduce){
  .panel.shake{animation:none}
  .pg-grip,.guard{transition:none}
}