/* controls.css — the control widgets in all their skins, the covers over them, and the
   gesture hints. Every machine has a kit (look.js): its makers' materials and colours, set
   here as custom properties on .machine and used by every widget on it. */

/* ── kits ── */
.machine {
  --k-face: #0d1216; --k-line: #2a3440; --k-ink: var(--text); --k-dim: var(--faint);
  --k-engrave: #aab4bd; --k-accent: var(--cyan); --k-readout: var(--cyan); --k-glow: #3cc8ff88;
  --k-knob: #2b3138; --k-knob-hi: #4a545e; --k-knob-lo: #14181c; --k-cap: #dde3e8; --k-cap-lo: #8a939c;
  --k-metal: #b9c1c9; --k-metal-lo: #5c656e; --k-plate: #262d34; --k-plate-hi: #3a434c;
  --k-radius: 12px; --k-label: var(--display);
}
.machine.kit-bakelite {
  --k-face: #1d1610; --k-line: #4a3926; --k-engrave: #e8dcc0; --k-accent: #ffb347; --k-readout: #ffc46b; --k-glow: #ffb34788;
  --k-knob: #3d2415; --k-knob-hi: #7d4a29; --k-knob-lo: #1e1009; --k-cap: #f1e5c8; --k-cap-lo: #b9a47a;
  --k-metal: #e3c98a; --k-metal-lo: #8a6a2a; --k-plate: #2c2218; --k-plate-hi: #46372a; --k-radius: 18px;
}
.machine.kit-industrial {
  --k-face: #15191d; --k-line: #3b4148; --k-engrave: #ffd60a; --k-accent: #ffd60a; --k-readout: #ffd60a; --k-glow: #ffd60a77;
  --k-knob: #1d2024; --k-knob-hi: #3b4047; --k-knob-lo: #0b0c0e; --k-cap: #ffd60a; --k-cap-lo: #a88a00;
  --k-metal: #9aa2aa; --k-metal-lo: #4a5157; --k-plate: #23272b; --k-plate-hi: #363b41; --k-radius: 6px;
}
.machine.kit-clinical {
  --k-face: #e3e8ec; --k-line: #b7c2cb; --k-ink: #18212a; --k-dim: #5d6b78; --k-engrave: #3b4a57;
  --k-accent: #1592c8; --k-readout: #0b6d99; --k-glow: #1592c866;
  --k-knob: #f7f9fa; --k-knob-hi: #ffffff; --k-knob-lo: #b8c3cc; --k-cap: #1592c8; --k-cap-lo: #0b5f85;
  --k-metal: #d5dce2; --k-metal-lo: #8a97a2; --k-plate: #cfd7dd; --k-plate-hi: #eef2f4; --k-radius: 16px;
}
.machine.kit-military {
  --k-face: #1a1f15; --k-line: #3d4630; --k-engrave: #d8d2b0; --k-accent: #9fe870; --k-readout: #b6f28a; --k-glow: #9fe87077;
  --k-knob: #2d3524; --k-knob-hi: #4f5c3c; --k-knob-lo: #151a10; --k-cap: #c9c1a0; --k-cap-lo: #7d775c;
  --k-metal: #a8ab98; --k-metal-lo: #55584a; --k-plate: #262d1e; --k-plate-hi: #3a4430; --k-radius: 4px; --k-label: var(--mono);
}
.machine.kit-atomic {
  --k-face: #10232a; --k-line: #2b5560; --k-engrave: #bdf5ec; --k-accent: #5ef0d9; --k-readout: #7ff7e4; --k-glow: #5ef0d988;
  --k-knob: #c9442e; --k-knob-hi: #ff8a6a; --k-knob-lo: #6e2015; --k-cap: #f4efe2; --k-cap-lo: #b8ae95;
  --k-metal: #e4eef0; --k-metal-lo: #8aa0a5; --k-plate: #173038; --k-plate-hi: #24474f; --k-radius: 22px;
}
.machine.kit-emergency {
  --k-face: #1c0909; --k-line: #5a1a1a; --k-engrave: #ffb3b3; --k-accent: #ff4d4d; --k-readout: #ff8a8a; --k-glow: #ff4d4d88;
  --k-knob: #8a1010; --k-knob-hi: #d43030; --k-knob-lo: #3a0505; --k-cap: #ffd60a; --k-cap-lo: #a88a00;
  --k-plate: #2a0e0e; --k-plate-hi: #4a1818;
}

/* ── the control box ── */
.ctl { position: relative; background: var(--k-face); color: var(--k-ink); border: 1px solid var(--k-line); border-radius: var(--k-radius); padding: 8px 10px 10px; box-shadow: inset 0 1px 0 #ffffff10, inset 0 -2px 6px #0004; }
.ctl.pending { border-color: var(--amber); }
.ctl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.ctl-name { font-family: var(--k-label); letter-spacing: 0.08em; font-size: 1rem; color: var(--k-ink); }
.ctl-msg { font-size: 0.75rem; color: var(--amber); font-family: var(--crt); letter-spacing: 0.06em; }
.ctl-msg.on { margin-top: 4px; }
.kit-clinical .ctl-msg { color: #b45309; }
.ctl-legend { font-size: 0.7rem; color: var(--k-dim); text-align: center; }
.sl-val { font-family: var(--crt); color: var(--k-readout); font-size: 1.3rem; text-shadow: 0 0 8px var(--k-glow); }
.kit-clinical .sl-val { text-shadow: none; }
.ctl svg { overflow: visible; }
.ctl :focus-visible, .cover :focus-visible { outline: 2px solid var(--k-accent); outline-offset: 3px; border-radius: 6px; }
.nudge { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid var(--k-line); background: radial-gradient(circle at 40% 30%, var(--k-knob-hi), var(--k-knob) 70%); color: var(--k-ink); font-size: 1.4rem; box-shadow: 0 3px 0 var(--k-knob-lo), 0 4px 8px #0006; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.kit-clinical .nudge { color: #18212a; }
.nudge:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--k-knob-lo); }

/* ── switch ── */
.sw2 { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 2px 0; }
.sw2-state { display: grid; gap: 4px; font-family: var(--display); letter-spacing: 0.14em; font-size: 1rem; }
.sw2-state span { padding: 2px 10px; border-radius: 6px; border: 1px solid var(--k-line); color: var(--k-dim); text-align: center; transition: all 0.15s; }
.sw2:not(.on) .sw2-off { color: var(--k-ink); border-color: var(--k-ink); }
.sw2.on .sw2-on { color: #0b1a10; background: var(--k-accent); border-color: var(--k-accent); box-shadow: 0 0 12px var(--k-glow); }

/* bat-handle toggle */
.tg { width: 92px; height: 104px; touch-action: none; cursor: pointer; }
.tg-plate { fill: var(--k-plate-hi); stroke: var(--k-knob-lo); stroke-width: 2; }
.tg-screw { fill: var(--k-metal-lo); }
.tg-lbl { fill: var(--k-engrave); font-family: var(--display); font-size: 11px; letter-spacing: 1px; opacity: 0.6; transition: opacity 0.15s, fill 0.15s; }
.tg:not(.on) .tg-lbl-off, .tg.on .tg-lbl-on { opacity: 1; }
.tg.on .tg-lbl-on { fill: var(--k-accent); }
.tg-nut { fill: var(--k-metal); stroke: var(--k-metal-lo); stroke-width: 1.5; }
.tg-bush { fill: var(--k-metal-lo); }
.tg-lever { transform: scaleY(-1); transition: transform 0.13s cubic-bezier(0.5, 0, 0.3, 1.5); }
.tg.on .tg-lever { transform: scaleY(1); }
.tg-bat { fill: var(--k-metal); stroke: var(--k-metal-lo); stroke-width: 1; }
.tg-tip { fill: var(--k-metal); stroke: var(--k-metal-lo); stroke-width: 1; }
.tg-shine { stroke: #fff9; stroke-width: 1.4; stroke-linecap: round; }
.kit-industrial .tg-tip, .kit-emergency .tg-tip { fill: var(--k-cap); }
.kit-bakelite .tg-bat, .kit-bakelite .tg-tip { fill: var(--k-cap); }

/* guarded toggle */
.sk-guarded { position: relative; perspective: 500px; }
.gd-cover { position: absolute; left: 4px; right: 4px; top: 4px; bottom: 4px; border-radius: 10px; border: 2px solid #7a0c0c; background: #d4202099; overflow: hidden; transform-origin: 50% 0; transition: transform 0.28s cubic-bezier(0.3, 0.9, 0.4, 1.2); box-shadow: 0 6px 12px #0008, inset 0 1px 0 #fff6; display: grid; place-items: end center; padding-bottom: 6px; touch-action: none; }
.gd-stripes { position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, #ffd60a55 0 8px, transparent 8px 16px); }
.gd-txt { position: relative; font-family: var(--display); font-size: 0.75rem; letter-spacing: 0.2em; color: #fff; text-shadow: 0 1px 2px #000; }
.sk-guarded.lifted .gd-cover { transform: rotateX(-125deg); pointer-events: none; }
.kit-military .gd-cover { background: #4f5c3c99; border-color: #2d3524; }

/* illuminated rocker */
.rk-bezel { padding: 6px; border-radius: 12px; background: var(--k-knob-lo); box-shadow: inset 0 2px 6px #000a; }
.rk-body { width: 76px; height: 108px; display: grid; grid-template-rows: 1fr 1fr; border-radius: 8px; overflow: hidden; transform: perspective(260px) rotateX(-16deg); transition: transform 0.12s cubic-bezier(0.4, 0, 0.3, 1.6); touch-action: none; cursor: pointer; box-shadow: 0 6px 10px #0008; }
.sk-rocker.on .rk-body { transform: perspective(260px) rotateX(16deg); }
.rk-half { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-family: var(--display); letter-spacing: 0.12em; background: linear-gradient(180deg, var(--k-knob-hi), var(--k-knob)); color: var(--k-dim); user-select: none; }
.rk-bot { background: linear-gradient(0deg, var(--k-knob-hi), var(--k-knob)); border-top: 1px solid var(--k-knob-lo); }
.rk-lamp { width: 26px; height: 8px; border-radius: 4px; background: #0006; transition: all 0.15s; }
.sk-rocker.on .rk-top { color: var(--k-accent); text-shadow: 0 0 10px var(--k-glow); }
.sk-rocker.on .rk-lamp { background: var(--k-accent); box-shadow: 0 0 14px var(--k-accent); }
.sk-rocker:not(.on) .rk-bot { color: var(--k-ink); }

/* push-pull knob */
.pp { width: 108px; height: 108px; touch-action: none; cursor: pointer; }
.pp-bezel { fill: var(--k-plate-hi); stroke: var(--k-knob-lo); stroke-width: 2; }
.pp-lbl { fill: var(--k-engrave); font-family: var(--display); font-size: 8px; letter-spacing: 1px; }
.pp-knob { transition: transform 0.16s cubic-bezier(0.3, 0.8, 0.4, 1.5); }
.pp.on .pp-knob { transform: scale(1.14); }
.pp-knob.pressing { transform: scale(0.96); }
.pp-shadow { fill: #0009; transition: transform 0.16s; }
.pp.on .pp-shadow { transform: translate(3px, 6px); }
.pp-band { fill: var(--k-accent); opacity: 0; transition: opacity 0.15s; }
.pp.on .pp-band { opacity: 1; }
.pp-cap { fill: var(--k-knob); stroke: var(--k-knob-lo); stroke-width: 1.5; }
.pp-dimple { fill: var(--k-knob-hi); opacity: 0.5; }
.pp-shine { fill: #fff3; }

/* chicken-head rotary */
.rs { width: 120px; height: 92px; touch-action: none; cursor: pointer; }
.rs-arc { fill: none; stroke: var(--k-engrave); stroke-width: 1.5; stroke-dasharray: 2 4; opacity: 0.6; }
.rs-lbl { fill: var(--k-engrave); font-family: var(--display); font-size: 11px; letter-spacing: 1px; opacity: 0.55; }
.rs:not(.on) .rs-lbl-off { opacity: 1; }
.rs.on .rs-lbl-on { opacity: 1; fill: var(--k-accent); }
.rs-skirt { fill: var(--k-knob-lo); }
.rs-head { transform: rotate(-50deg); transition: transform 0.18s cubic-bezier(0.3, 0.8, 0.3, 1.4); }
.rs.on .rs-head { transform: rotate(50deg); }
.rs-body { fill: var(--k-knob); stroke: var(--k-knob-lo); stroke-width: 1.5; }
.rs-ptr { stroke: var(--k-cap); stroke-width: 3; stroke-linecap: round; }

/* ── hold ── */
.hold2 { display: flex; align-items: center; gap: 18px; justify-content: center; }
.hold-lamp-box { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 0.65rem; color: var(--k-dim); letter-spacing: 0.1em; }
.hold-lamp { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #111; background: radial-gradient(circle at 35% 30%, #fff2, #1a3a22 60%); transition: all 0.12s; }
.hold-lamp.active { background: radial-gradient(circle at 35% 30%, #fff8, var(--green) 60%); box-shadow: 0 0 16px var(--green); }
.hold-lamp.amber { background: radial-gradient(circle at 35% 30%, #fff8, var(--amber) 60%); box-shadow: 0 0 22px var(--amber); }
.hb-mushroom, .hb-guarded { position: relative; border: 0; padding: 0; background: none; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.hb-mushroom { width: 136px; height: 136px; }
.hb-mushroom .hb-collar { position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(#ffd60a 0 10deg, #e5bf00 10deg 20deg); box-shadow: inset 0 -4px 8px #0006, 0 6px 14px #0009; }
.hb-mushroom .hb-cap { position: absolute; inset: 14px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 28%, #ff9a9a, #d42020 50%, #6a0808); box-shadow: 0 9px 0 #4a0606, 0 12px 18px #000a; transition: transform 0.06s, box-shadow 0.06s, filter 0.1s; }
.hold2.down .hb-mushroom .hb-cap { transform: translateY(7px) scale(0.97); box-shadow: 0 2px 0 #4a0606, 0 0 30px #ff4d4d88; filter: brightness(1.15); }
.hb-txt { font-family: var(--display); letter-spacing: 0.2em; color: #fff; font-size: 1rem; text-shadow: 0 1px 2px #0008; }
.kit-atomic .hb-mushroom .hb-cap { background: radial-gradient(circle at 35% 28%, #fff, var(--k-accent) 45%, #0d6a5c); box-shadow: 0 9px 0 #0a4a40, 0 12px 18px #000a; }
.kit-atomic .hb-txt { color: #053; text-shadow: none; }
.hb-guarded { width: 132px; height: 132px; }
.hb-guarded .hb-collar { position: absolute; inset: 0; border-radius: 14px; background: repeating-linear-gradient(-45deg, #ffd60a 0 12px, #1a1a1a 12px 24px); box-shadow: 0 6px 14px #0009, inset 0 0 0 3px #0008; }
.hb-guarded .hb-cap { position: absolute; inset: 22px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(180deg, var(--k-knob-hi), var(--k-knob)); box-shadow: inset 0 3px 0 #ffffff22, 0 6px 0 var(--k-knob-lo), inset 0 0 0 2px #0006; transition: transform 0.06s, box-shadow 0.06s; }
.hold2.down .hb-guarded .hb-cap { transform: translateY(5px); box-shadow: inset 0 3px 8px #0008, 0 1px 0 var(--k-knob-lo), 0 0 24px var(--k-glow); }
.kit-clinical .hb-guarded .hb-txt { color: #18212a; text-shadow: none; }
.ch-rig { --pull: 0px; position: relative; width: 120px; height: 150px; display: flex; flex-direction: column; align-items: center; }
.hold2.down .ch-rig { --pull: 22px; }
.ch-box { width: 70px; height: 26px; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, var(--k-metal), var(--k-metal-lo)); box-shadow: 0 3px 6px #0008; }
.ch-chain { width: 14px; height: calc(52px + var(--pull)); transition: height 0.25s cubic-bezier(0.3, 1.8, 0.5, 1); }
.ch-rig .ch-chain:has(+ .ch-handle:active) { transition: none; }
.ch-links { width: 100%; height: 100%; }
.ch-link { fill: none; stroke: var(--k-metal); stroke-width: 1.6; }
.ch-handle { width: 92px; height: 40px; margin-top: -2px; border-radius: 20px; display: grid; place-items: center; background: linear-gradient(180deg, var(--k-knob-hi), var(--k-knob)); border: 2px solid var(--k-knob-lo); box-shadow: 0 6px 10px #0009; font-family: var(--display); letter-spacing: 0.2em; color: var(--k-ink); touch-action: none; cursor: grab; user-select: none; }
.kit-clinical .ch-handle { color: #18212a; }
.hold2.down .ch-handle { box-shadow: 0 2px 4px #0009, 0 0 18px var(--k-glow); }

/* ── breakers ── */
.brk2-row { display: flex; gap: 8px; justify-content: space-between; }
.brk2 { flex: 1; background: none; border: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; }
.brk2-body { position: relative; width: 100%; max-width: 54px; height: 80px; border-radius: 7px; background: var(--k-knob-lo); border: 2px solid var(--k-line); box-shadow: inset 0 3px 8px #000a; }
.brk2-act { position: absolute; left: 7px; right: 7px; height: 32px; bottom: 7px; border-radius: 5px; background: linear-gradient(180deg, var(--k-knob-hi), var(--k-knob)); box-shadow: 0 3px 0 #0008; transition: bottom 0.11s cubic-bezier(0.4, 0, 0.3, 1.5), background 0.12s; }
.brk2.on .brk2-act { bottom: 37px; background: linear-gradient(180deg, var(--k-accent), var(--k-cap-lo)); }
.brk2.on .brk2-body { border-color: var(--k-accent); }
.brk2-n { font-family: var(--display); color: var(--k-dim); }
.brk2.on .brk2-n { color: var(--k-ink); }
.brk2.kick .brk2-body { animation: brkJolt 0.15s; }
@keyframes brkJolt { 40% { transform: translateY(1px) scale(0.98); } }
.sk-rocker .brk2-act { inset: 7px; height: auto; bottom: 7px; transform: perspective(120px) rotateX(-18deg); transition: transform 0.1s; }
.sk-rocker .brk2.on .brk2-act { transform: perspective(120px) rotateX(18deg); bottom: 7px; }
.sk-rocker .brk2-glow { position: absolute; left: 30%; right: 30%; top: 8px; height: 6px; border-radius: 3px; background: #0005; }
.sk-rocker .brk2.on .brk2-glow { background: #fff; box-shadow: 0 0 10px var(--k-accent); }
.sk-fuse .brk2-body { background: linear-gradient(90deg, var(--k-metal-lo), var(--k-metal) 30%, var(--k-metal-lo)); border-radius: 20px; }
.sk-fuse .brk2-act { left: 12px; right: 12px; bottom: 40px; height: 34px; border-radius: 8px; background: linear-gradient(90deg, #cfd6dc66, #ffffffaa 40%, #cfd6dc55); border: 2px solid var(--k-metal); opacity: 0.75; }
.sk-fuse .brk2.on .brk2-act { bottom: 8px; opacity: 1; }
.sk-fuse .brk2-glow { position: absolute; left: 50%; top: 4px; bottom: 4px; width: 2px; margin-left: -1px; background: #555; }
.sk-fuse .brk2.on .brk2-glow { background: #ffd68a; box-shadow: 0 0 8px #ffb020; }

/* ── selector ── */
.sk-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.key2 { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px 12px; border-radius: 8px; border: 1px solid var(--k-knob-lo); background: linear-gradient(180deg, var(--k-knob-hi), var(--k-knob)); box-shadow: 0 6px 0 var(--k-knob-lo), 0 8px 10px #0008; transition: transform 0.08s, box-shadow 0.08s; color: var(--k-ink); }
.kit-clinical .key2 { color: #18212a; }
.key2.on { transform: translateY(5px); box-shadow: 0 1px 0 var(--k-knob-lo), inset 0 2px 6px #0005; }
.key2-lens { width: 60%; height: 7px; border-radius: 4px; background: #0006; transition: all 0.12s; }
.key2.on .key2-lens { background: var(--k-accent); box-shadow: 0 0 12px var(--k-accent); }
.key2-face { font-family: var(--display); letter-spacing: 0.06em; font-size: 0.95rem; line-height: 1.1; text-align: center; }
.sk-rotsel { position: relative; height: 196px; }
.rsel-lbl { position: absolute; transform: translate(-50%, -50%); max-width: 92px; padding: 3px 6px; border-radius: 6px; border: 1px solid transparent; background: none; color: var(--k-engrave); font-family: var(--display); font-size: 0.78rem; letter-spacing: 0.06em; line-height: 1.1; text-align: center; opacity: 0.7; transition: all 0.15s; }
.rsel-lbl.on { opacity: 1; color: var(--k-accent); border-color: var(--k-accent); text-shadow: 0 0 8px var(--k-glow); }
.kit-clinical .rsel-lbl.on { text-shadow: none; }
.rsel-knob { position: absolute; left: 50%; top: 60px; width: 120px; height: 120px; margin-left: -60px; touch-action: none; cursor: grab; }
.rsel-tick { stroke: var(--k-engrave); stroke-width: 2.5; stroke-linecap: round; }
.rsel-skirt { fill: var(--k-knob-lo); }
.rsel-grip { fill: var(--k-knob); }
.rsel-knurl { stroke: var(--k-knob-hi); stroke-width: 1.4; opacity: 0.6; }
.rsel-cap { fill: var(--k-knob-hi); opacity: 0.55; }
.rsel-ptr { fill: var(--k-cap); stroke: var(--k-knob-lo); stroke-width: 1; }
.rsel-body.snap { transition: transform 0.2s cubic-bezier(0.3, 0.8, 0.3, 1.5); }
.sk-slide { display: grid; gap: 4px; }
.ss-plate { position: relative; height: 56px; border-radius: 10px; background: var(--k-plate-hi); border: 1px solid var(--k-knob-lo); box-shadow: inset 0 1px 0 #ffffff14; touch-action: pan-y; cursor: pointer; }
.ss-slot { position: absolute; left: 8%; right: 8%; top: 24px; height: 8px; border-radius: 4px; background: var(--k-knob-lo); box-shadow: inset 0 2px 3px #000c; }
.ss-notch { position: absolute; top: 8px; width: 2px; height: 10px; margin-left: -1px; background: var(--k-engrave); opacity: 0.7; }
.ss-thumb { position: absolute; top: 6px; width: 44px; height: 44px; margin-left: -22px; border-radius: 10px; background: linear-gradient(180deg, var(--k-knob-hi), var(--k-knob)); box-shadow: 0 4px 0 var(--k-knob-lo), 0 6px 10px #0008; display: grid; place-items: center; }
.ss-thumb.snap { transition: left 0.18s cubic-bezier(0.3, 0.8, 0.3, 1.4); }
.ss-grip { width: 18px; height: 22px; background: repeating-linear-gradient(90deg, var(--k-knob-lo) 0 2px, transparent 2px 5px); opacity: 0.8; }
.ss-labels { display: grid; gap: 4px; }
.ss-lbl { background: none; border: 0; padding: 4px 2px; color: var(--k-engrave); font-family: var(--display); font-size: 0.78rem; letter-spacing: 0.04em; line-height: 1.1; opacity: 0.7; }
.ss-lbl.on { opacity: 1; color: var(--k-accent); }

/* ── continuous: sliders and valves ── */
.cont { display: flex; align-items: center; gap: 10px; }
.cont > :nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.cont .stop { animation: stopShake 0.25s; }
@keyframes stopShake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.sk-fader { align-items: stretch !important; }
.fd-track { position: relative; height: 52px; touch-action: pan-y; cursor: pointer; }
.fd-slot { position: absolute; left: 0; right: 0; top: 22px; height: 8px; border-radius: 4px; background: var(--k-knob-lo); box-shadow: inset 0 2px 3px #000c; }
.fd-fill { position: absolute; left: 0; top: 23px; height: 6px; border-radius: 3px; background: var(--k-accent); box-shadow: 0 0 10px var(--k-glow); opacity: 0.85; }
.fd-cap { position: absolute; top: 4px; width: 30px; height: 44px; margin-left: -15px; border-radius: 6px; background: linear-gradient(180deg, var(--k-cap), var(--k-cap-lo)); box-shadow: 0 4px 8px #000a; border: 1px solid #0006; transition: transform 0.1s; display: grid; place-items: center; }
.fd-cap.held { transform: scale(1.08); }
.fd-line { width: 70%; height: 3px; background: #000a; border-radius: 2px; }
.fd-factory, .tw-factory { position: absolute; top: -10px; transform: translateX(-50%); color: var(--yellow); font-size: 0.8rem; text-shadow: 0 1px 2px #000; pointer-events: none; }
.fd-scale { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.66rem; color: var(--k-dim); padding: 2px 0 0; }
.lv { width: 100%; max-width: 250px; touch-action: pan-y; cursor: pointer; }
.lv-band { fill: none; stroke: var(--k-plate-hi); stroke-width: 12; stroke-linecap: round; opacity: 0.8; }
.lv-tick { stroke: var(--k-engrave); stroke-width: 1.2; }
.lv-tick.major { stroke-width: 2; }
.lv-num { fill: var(--k-engrave); font-family: var(--mono); font-size: 10px; }
.lv-factory, .vk-factory, .ql-factory { fill: var(--yellow); stroke: #0008; stroke-width: 0.5; }
.lv-base { fill: var(--k-knob-lo); }
.lv-rod { fill: var(--k-metal); stroke: var(--k-metal-lo); stroke-width: 1; }
.lv-grip { fill: var(--k-knob); stroke: var(--k-knob-lo); stroke-width: 1.5; }
.lv-ridges { stroke: var(--k-knob-hi); stroke-width: 1.5; }
.lv-hub { fill: var(--k-metal-lo); stroke: var(--k-metal); stroke-width: 2; }
.lv.held .lv-grip { fill: var(--k-knob-hi); }
.sk-wheel { gap: 6px; width: 100%; }
.tw-head { display: flex; align-items: baseline; gap: 6px; }
.odo { display: flex; padding: 2px 8px; border-radius: 6px; background: #0b0d0f; border: 2px solid var(--k-metal-lo); box-shadow: inset 0 3px 6px #000; font-family: var(--crt); font-size: 1.8rem; line-height: 1; color: #f4f0e4; }
.odo-ch { width: 0.65em; text-align: center; }
.odo-d { position: relative; display: inline-block; width: 0.65em; height: 1em; overflow: hidden; }
.odo-strip { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; transition: transform 0.25s cubic-bezier(0.3, 0.8, 0.3, 1.2); }
.odo-strip span { height: 1em; text-align: center; }
.tw-unit { font-family: var(--crt); color: var(--k-dim); }
.tw-drum { position: relative; width: 100%; height: 50px; border-radius: 10px; overflow: hidden; background: var(--k-knob-lo); border: 2px solid var(--k-knob-lo); touch-action: pan-y; cursor: ew-resize; }
.tw-ribs { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--k-knob) 0 4px, var(--k-knob-hi) 4px 6px, var(--k-knob-lo) 6px 12px); }
.tw-shade { position: absolute; inset: 0; background: linear-gradient(90deg, #000c, transparent 25%, #ffffff18 50%, transparent 75%, #000c); }
.tw-drum.held { border-color: var(--k-accent); }
.tw-scale { display: flex; align-items: center; gap: 8px; width: 100%; font-family: var(--mono); font-size: 0.66rem; color: var(--k-dim); }
.tw-bar { position: relative; flex: 1; height: 6px; border-radius: 3px; background: var(--k-knob-lo); }
.tw-needle { position: absolute; top: -5px; width: 3px; height: 16px; margin-left: -1.5px; background: var(--k-accent); border-radius: 2px; box-shadow: 0 0 6px var(--k-glow); transition: left 0.15s; }
.vk { width: 168px; height: 168px; touch-action: none; cursor: grab; }
.vk-tick { stroke: var(--k-engrave); stroke-width: 1; opacity: 0.7; }
.vk-tick.major { stroke-width: 2; opacity: 1; }
.vk-num { fill: var(--k-engrave); font-family: var(--mono); font-size: 7.5px; }
.vk-skirt { fill: var(--k-knob-lo); }
.vk-grip { fill: var(--k-knob); }
.vk-knurl { stroke: var(--k-knob-hi); stroke-width: 1.3; opacity: 0.55; }
.vk-cap { fill: var(--k-knob-hi); opacity: 0.45; }
.vk-ptr { stroke: var(--k-accent); stroke-width: 5; stroke-linecap: round; }
.vk.held .vk-skirt { fill: var(--k-knob-hi); }
.sk-handwheel { flex-direction: row !important; justify-content: center; gap: 12px; }
.hw { width: 150px; height: 150px; touch-action: none; cursor: grab; }
.hw-rim { fill: none; stroke: var(--k-knob); stroke-width: 10; }
.hw-rim-hi { fill: none; stroke: var(--k-knob-hi); stroke-width: 2; opacity: 0.6; transform: translate(-1px, -2px); }
.hw-spoke { stroke: var(--k-metal-lo); stroke-width: 6; stroke-linecap: round; }
.hw-hub { fill: var(--k-metal); stroke: var(--k-metal-lo); stroke-width: 2; }
.hw-spinner { fill: var(--k-cap); stroke: var(--k-knob-lo); stroke-width: 2; }
.kit-military .hw-rim, .kit-industrial .hw-rim { stroke: #b0281c; }
.hw-side { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hw-g-lbl { font-family: var(--display); font-size: 0.62rem; letter-spacing: 0.12em; color: var(--k-dim); }
.hw-gauge { position: relative; width: 18px; height: 104px; border-radius: 9px; background: var(--k-knob-lo); box-shadow: inset 0 2px 4px #000c; overflow: visible; }
.hw-fill { position: absolute; left: 3px; right: 3px; bottom: 3px; max-height: calc(100% - 6px); border-radius: 6px; background: linear-gradient(0deg, var(--k-cap-lo), var(--k-accent)); box-shadow: 0 0 8px var(--k-glow); transition: height 0.12s; }
.hw-factory { position: absolute; left: -14px; transform: translateY(50%) rotate(-90deg); color: var(--yellow); font-size: 0.75rem; }
.ql { width: 100%; max-width: 230px; touch-action: pan-y; cursor: grab; }
.ql-pipe { fill: var(--k-metal-lo); }
.ql-pipe-hi { fill: var(--k-metal); opacity: 0.5; }
.ql-arc { fill: none; stroke: var(--k-engrave); stroke-width: 1; opacity: 0.6; }
.ql-tick { stroke: var(--k-engrave); stroke-width: 1; }
.ql-tick.major { stroke-width: 2; }
.ql-lbl { fill: var(--k-engrave); font-family: var(--display); font-size: 8.5px; letter-spacing: 1px; }
.ql-body { fill: var(--k-metal); stroke: var(--k-metal-lo); stroke-width: 2; }
.ql-bar { fill: var(--k-metal); stroke: var(--k-metal-lo); stroke-width: 1; }
.ql-grip { fill: #c0281c; stroke: #5a0c08; stroke-width: 1.5; }
.kit-clinical .ql-grip, .kit-atomic .ql-grip { fill: var(--k-accent); stroke: var(--k-cap-lo); }
.ql-nut { fill: var(--k-metal-lo); stroke: var(--k-metal); stroke-width: 2; }

/* ── keypad ── */
.seq2-keys { display: flex; gap: 8px; flex-wrap: wrap; }
.seq2-key { flex: 1; min-width: 54px; height: 62px; border: 0; padding: 0; background: none; display: grid; place-items: center; touch-action: manipulation; }
.seq2-cap { display: grid; place-items: center; width: 100%; height: 100%; font-size: 1.6rem; color: var(--k-ink); transition: transform 0.06s, box-shadow 0.06s, filter 0.1s; }
.seq2-key.hit .seq2-cap { animation: keyHit 0.18s; }
@keyframes keyHit { 30% { transform: translateY(4px) scale(0.96); filter: brightness(1.35); } }
.seq2-key.clr { flex: 0 0 64px; }
.seq2-key.clr .seq2-cap { font-family: var(--display); font-size: 0.95rem; color: var(--amber); }
.sk-arcade .seq2-cap { border-radius: 50%; width: 58px; height: 58px; background: radial-gradient(circle at 38% 30%, var(--k-knob-hi), var(--k-knob) 70%); box-shadow: 0 5px 0 var(--k-knob-lo), 0 7px 10px #0009, inset 0 0 0 3px #ffffff18; }
.sk-membrane .seq2-cap { border-radius: 6px; background: var(--k-plate-hi); border: 1px solid var(--k-line); box-shadow: inset 0 0 0 6px var(--k-plate), inset 0 1px 0 #ffffff22; }
.sk-typewriter .seq2-cap { border-radius: 50%; width: 56px; height: 56px; background: radial-gradient(circle, var(--k-cap) 55%, var(--k-metal) 58%, var(--k-metal-lo) 68%); color: #222; box-shadow: 0 6px 0 #0008; font-size: 1.4rem; }
.seq2-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.seq2-leds { display: flex; gap: 6px; }
.seq2-led { width: 11px; height: 11px; border-radius: 50%; background: #0006; border: 1px solid #0008; transition: all 0.1s; }
.seq2-led.on { background: var(--k-accent); box-shadow: 0 0 8px var(--k-accent); }
.seq2-ok { font-family: var(--display); font-size: 0.75rem; letter-spacing: 0.12em; padding: 2px 8px; border-radius: 4px; color: var(--k-dim); border: 1px solid var(--k-line); }
.seq2-ok.on { color: #0b1a10; background: var(--green); border-color: var(--green); }

/* ── patch bay ── */
.patch2 { width: 100%; max-width: 340px; display: block; margin: 0 auto; touch-action: none; }
.pc-nut { fill: var(--k-metal); stroke: var(--k-metal-lo); stroke-width: 2; }
.pc-hole { fill: #050607; }
.pc-sock.sel .pc-nut { fill: var(--amber); }
.pc-sock.target .pc-nut { fill: var(--k-accent); }
.pc-lbl { fill: var(--k-engrave); font-size: 13px; font-family: var(--display); }
.pc-cable { fill: none; stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 4px 3px #000b); }
.pc-live { opacity: 0; pointer-events: none; }
.pc-live.on { opacity: 0.9; }
.pc-plug { stroke: #0008; stroke-width: 2; }
.pc-plug-tip { fill: #0007; }

/* ── pump ── */
.pump2 { display: flex; gap: 16px; align-items: stretch; }
.pump2-gauge { position: relative; width: 66px; height: 176px; flex: none; background: #06090c; border: 3px solid var(--k-metal-lo); border-radius: 33px; overflow: hidden; }
.pump2-fill { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(0deg, #1d6fb3, var(--cyan)); transition: height 0.18s cubic-bezier(0.3, 0.8, 0.3, 1.3); }
.pump2-surface { position: absolute; left: -20%; right: -20%; top: -5px; height: 10px; border-radius: 50%; background: #8fe4ff99; animation: slosh 1.6s ease-in-out infinite; }
@keyframes slosh { 50% { transform: translateX(6px) scaleY(0.6); } }
.pump2-marks { position: absolute; inset: 14px 6px 14px 10px; display: flex; flex-direction: column; justify-content: space-between; font-size: 0.62rem; color: #fff; text-shadow: 0 0 3px #000; font-family: var(--crt); }
.pump2-glass { position: absolute; right: 8px; top: 10px; bottom: 10px; width: 6px; border-radius: 3px; background: #ffffff22; }
.pump2-side { flex: 1; display: flex; flex-direction: column; gap: 10px; align-items: stretch; justify-content: center; }
.pump2-val { font-family: var(--crt); font-size: 1.8rem; color: var(--k-readout); text-align: center; }
.pump2-act { border: 0; background: none; padding: 0; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.pump2-btn { height: 100px; border-radius: 14px; border: 3px solid #1d4f7a; background: linear-gradient(180deg, #2b7cc4, #164a78); font-family: var(--display); font-size: 1.8rem; letter-spacing: 0.2em; color: #fff; box-shadow: 0 8px 0 #0b263f; }
.pump2-btn.stroke { animation: kick 0.15s; }
@keyframes kick { 50% { transform: translateY(6px); box-shadow: 0 2px 0 #0b263f; } }
.pl-box, .bl-box { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pump2-word { font-family: var(--display); letter-spacing: 0.2em; font-size: 0.8rem; color: var(--k-dim); }
.pl { width: 90px; height: 130px; overflow: visible; }
.pl-rod { transition: transform 0.12s; }
.pl-box.stroke .pl-rod { animation: plunge 0.22s; }
@keyframes plunge { 45% { transform: translateY(24px); } }
.pl-shaft { fill: var(--k-metal); }
.pl-handle { fill: var(--k-knob); stroke: var(--k-knob-lo); stroke-width: 2; }
.pl-barrel { fill: var(--k-metal-lo); stroke: var(--k-knob-lo); stroke-width: 2; }
.pl-shine { fill: #ffffff30; }
.bl { width: 110px; height: 110px; overflow: visible; }
.bl-neck { fill: #333; }
.bl-bulb { fill: #b0281c; stroke: #5a0c08; stroke-width: 2; transform-origin: 0 6px; }
.kit-clinical .bl-bulb { fill: #1592c8; stroke: #0b5f85; }
.bl-shine { fill: #ffffff40; pointer-events: none; }
.bl-box.stroke .bl-bulb { animation: squish 0.24s; }
@keyframes squish { 40% { transform: scale(1.18, 0.72); } }

/* ── crank ── */
.crank2-box { display: flex; gap: 14px; align-items: center; }
.crank2 { width: 170px; height: 170px; touch-action: none; flex: none; cursor: grab; }
.crank2-ring { fill: var(--k-knob-lo); stroke: var(--k-line); stroke-width: 2; stroke-dasharray: 3 7; }
.crank2-wheel { fill: none; stroke: var(--k-metal-lo); stroke-width: 6; }
.crank2-spoke { stroke: var(--k-metal-lo); stroke-width: 3; }
.crank2-arm { fill: var(--k-metal); stroke: var(--k-metal-lo); stroke-width: 1.5; }
.crank2-handle { fill: var(--k-knob); stroke: var(--k-knob-lo); stroke-width: 2; }
.crank2-handle-top { fill: var(--k-knob-hi); }
.sk-brass .crank2-arm { fill: #e3c98a; stroke: #8a6a2a; }
.sk-white .crank2-handle { fill: #f7f9fa; }
.crank2-hub { fill: var(--k-metal-lo); stroke: var(--k-metal); stroke-width: 2; }
.crank-side { flex: 1; display: grid; gap: 6px; }
.crank-bar { height: 22px; background: #06090c; border: 1px solid var(--k-line); border-radius: 6px; overflow: hidden; }
.crank-fill { height: 100%; background: linear-gradient(90deg, #8a6100, var(--amber)); transition: width 0.2s; }
.crank-val { font-family: var(--crt); font-size: 1.6rem; color: var(--amber); }

/* ── level ── */
.level-box { display: grid; justify-items: center; gap: 6px; }
.level { width: 220px; height: 220px; touch-action: none; }
.lv-face { fill: #0e1a12; stroke: var(--k-metal-lo); stroke-width: 4; }
.lv-zone { fill: #ffffff08; stroke: #ffffff30; stroke-width: 2; stroke-dasharray: 3 4; }
.lv-zl { fill: #ffffff70; font-size: 14px; font-family: var(--display); }
.lv-centre { fill: none; stroke: var(--green); stroke-width: 2.5; }
.lv-cross { stroke: #ffffff14; stroke-width: 1; }
.lv-bubble { fill: #d9ff9ecc; stroke: #fff; stroke-width: 2; filter: drop-shadow(0 0 6px #b5ff5e); }
.lv-bubble-hi { fill: #fffc; }
.lv-glass { fill: none; stroke: #ffffff18; stroke-width: 10; pointer-events: none; }
.lv-mode { text-align: center; }

/* ── microphone ── */
.mic-meter { position: relative; height: 26px; background: #06090c; border: 1px solid var(--k-line); border-radius: 6px; overflow: hidden; }
.mic-fill { height: 100%; background: var(--green); transition: width 0.08s, background 0.15s; }
.mic-fill.loud { background: var(--red); }
.mic-zone { position: absolute; top: 0; bottom: 0; border-left: 2px dashed #fff8; padding-left: 4px; font-family: var(--display); font-size: 0.7rem; letter-spacing: 0.12em; line-height: 26px; color: #fffc; text-shadow: 0 0 3px #000; pointer-events: none; }
.mic-q { left: 6%; width: 39%; background: #3ddc8414; } .mic-l { left: 45%; right: 0; background: #ff4d4d14; }
.mic-pitch { font-family: var(--crt); color: var(--k-readout); margin: 6px 0; }
.mic-status { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rub-pad { position: relative; height: 140px; margin-top: 8px; border-radius: 12px; border: 2px dashed var(--k-line); background: repeating-linear-gradient(90deg, #121920 0 6px, #0d1318 6px 12px); touch-action: none; display: grid; place-items: center; }
.rub-hi, .rub-lo { position: absolute; left: 8px; font-size: 0.65rem; color: var(--faint); letter-spacing: 0.1em; }
.rub-hi { top: 6px; } .rub-lo { bottom: 6px; }
.rub-pad::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed #3a4652; }
.rub-txt { font-family: var(--display); letter-spacing: 0.3em; color: #3a4652; }

/* ── sync ── */
.sync { display: grid; justify-items: center; gap: 8px; }
.sync-btn { position: relative; width: 100%; height: 90px; border-radius: 14px; border: 3px solid #7a5a00; background: linear-gradient(180deg, #ffd23f, #d49b00); color: #231800; font-family: var(--display); font-size: 1.8rem; letter-spacing: 0.25em; box-shadow: 0 8px 0 #6a4a00; touch-action: manipulation; overflow: hidden; }
.sync-ring { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; border: 3px solid #fff; opacity: 0; }
.sync-btn.kick { animation: kick 0.15s; }
.sync-btn.kick .sync-ring { animation: ring 0.6s ease-out; }
@keyframes ring { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(30); } }
.sync-txt { position: relative; }
.sync-lamp { font-family: var(--display); letter-spacing: 0.14em; padding: 4px 12px; border-radius: 6px; color: #3a4652; border: 1px solid #3a4652; }
.sync-lamp.on { background: var(--green); color: #0b1a10; border-color: var(--green); }

/* ── gesture hints ── */
.g-hint { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: opacity 0.35s; }
.g-hint.gone { opacity: 0; }
.g-hint-ico { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #fff; border-top-color: transparent; box-shadow: 0 0 10px #0009; animation: hintSpin 1.6s linear infinite; opacity: 0.85; }
.g-twist .g-hint-ico { animation-direction: reverse; }
.g-hint-txt { font-family: var(--display); letter-spacing: 0.1em; font-size: 0.72rem; color: #fff; text-shadow: 0 1px 3px #000, 0 0 8px #000; white-space: nowrap; }
@keyframes hintSpin { to { transform: rotate(360deg); } }
.g-roll .g-hint-ico, [class*='g-cover-'] .g-hint-ico { width: 18px; height: 18px; border: 0; background: radial-gradient(circle, #fff 40%, #fff6 60%, transparent 70%); box-shadow: 0 0 12px #fff8; }
.g-roll .g-hint-ico, .g-cover-door .g-hint-ico, .g-cover-slide .g-hint-ico { animation: hintSlide 1.4s ease-in-out infinite; }
.g-cover-flap .g-hint-ico, .g-cover-plate .g-hint-ico { animation: hintLift 1.4s ease-in-out infinite; }
.g-cover-door, .g-cover-flap, .g-cover-plate, .g-cover-slide { left: auto; right: 22px; transform: translateY(-50%); }
@keyframes hintSlide { 0%, 100% { transform: translateX(-14px); opacity: 0.2; } 50% { transform: translateX(14px); opacity: 0.9; } }
@keyframes hintLift { 0%, 100% { transform: translateY(8px); opacity: 0.2; } 50% { transform: translateY(-10px); opacity: 0.9; } }
.ctl .sk-knob, .ctl .sk-handwheel, .ctl .sk-rotsel, .ctl .crank2-box, .ctl .sk-wheel, .ctl .tw-drum, .cv-handle, .fx-box, .cv-keybox { position: relative; }
.crank2-box .g-hint { left: 85px; }

/* ── covers ──
   Closed, the door shows its fasteners and handle. Open, a hinge bar with CLOSE sits over
   the cavity with the controls in it. While it moves the door flies over the cavity. */
.cover { border-radius: 12px; }
.cv-stage { position: relative; }
.cover:not(.open) .cv-bar, .cover:not(.open) .cv-inside { display: none; }
.cv-door.flying { position: absolute; left: 0; right: 0; top: 0; z-index: 4; pointer-events: none; backface-visibility: hidden; }
.cv-door.gone { display: none; }
.cv-door { position: relative; display: grid; gap: 8px; padding: 12px 14px 14px; border-radius: 12px; border: 2px solid #5f6a75; background: linear-gradient(180deg, #ffffff0d, transparent 30%), repeating-linear-gradient(135deg, #2b333b 0 6px, #272e35 6px 12px); box-shadow: inset 0 1px 0 #ffffff1c, inset 0 -3px 0 #0006, 0 5px 12px #0008; }
.cv-door.inner { border-color: #8a7840; background: linear-gradient(180deg, #ffffff0a, transparent 30%), repeating-linear-gradient(45deg, #302a1b 0 6px, #2b2619 6px 12px); }
.cv-door.dragging { transition: none; }
.cv-door.cvs-door { transform-origin: 0 50%; }
.cv-door.cvs-flap, .cv-door.cvs-lid { transform-origin: 50% 0; }
.cv-door.cvs-plate { transform-origin: 50% 50%; }
.cv-door.cvs-door::before { content: ''; position: absolute; left: -2px; top: 16px; bottom: 16px; width: 7px; border-radius: 3px; background: repeating-linear-gradient(180deg, #9aa4ad 0 18px, #4d565f 18px 22px); }
.cv-door.cvs-flap::before, .cv-door.cvs-lid::before { content: ''; position: absolute; top: -3px; left: 18px; right: 18px; height: 7px; border-radius: 3px; background: repeating-linear-gradient(90deg, #9aa4ad 0 22px, #4d565f 22px 26px); }
.cv-door.cvs-slide::before, .cv-door.cvs-slide::after { content: ''; position: absolute; left: 10px; right: 10px; height: 4px; border-radius: 2px; background: #0007; }
.cv-door.cvs-slide::before { top: 4px; } .cv-door.cvs-slide::after { bottom: 4px; }
.cv-door.cvs-lid { background: linear-gradient(180deg, #ffffff12, transparent 40%), linear-gradient(180deg, #3a434c, #262d34); }
.cv-rivets::before, .cv-rivets::after { content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #e6eaee, #5c656e); top: 8px; }
.cv-rivets::before { right: 8px; } .cv-rivets::after { right: 8px; top: auto; bottom: 8px; }
.cv-door.rattle { animation: rattle 0.32s; }
@keyframes rattle { 15% { transform: translate(-3px, 1px) rotate(-0.6deg); } 35% { transform: translate(3px, -1px) rotate(0.5deg); } 55% { transform: translate(-2px, 1px); } 75% { transform: translate(2px, 0); } }
.cv-door.shut { animation: shut 0.25s; }
@keyframes shut { 30% { transform: scale(0.985) translateY(2px); filter: brightness(1.25); } }
.cv-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; padding-right: 12px; }
.cv-name { font-family: var(--display); letter-spacing: 0.14em; font-size: 1rem; color: var(--text); }
.cv-what { font-family: var(--crt); font-size: 0.75rem; color: var(--yellow); letter-spacing: 0.04em; }
.cv-what.unk { color: var(--faint); }
.cv-hint { font-size: 0.7rem; color: var(--faint); text-align: center; }
.cv-hint b { color: var(--text); }
.cv-msg { display: none; text-align: center; font-family: var(--crt); color: var(--amber); letter-spacing: 0.06em; }
.cv-msg.on { display: block; animation: msgIn 0.25s; }
@keyframes msgIn { from { transform: translateY(-4px); opacity: 0; } }
.cv-handle { justify-self: stretch; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 8px 16px; border-radius: 10px; border: 2px solid #8a96a3; background: linear-gradient(180deg, #5f6b76, #3a434c); color: var(--text); font-family: var(--display); letter-spacing: 0.16em; font-size: 1rem; box-shadow: 0 4px 0 #1d2329, inset 0 1px 0 #ffffff30; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.cv-handle:active { box-shadow: 0 2px 0 #1d2329; transform: translateY(2px); }
.cv-grip { width: 36px; height: 14px; border-radius: 7px; background: repeating-linear-gradient(90deg, #1d2329 0 2px, #8a96a3 2px 5px); }
.cv-locked { display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; font-family: var(--display); letter-spacing: 0.08em; color: var(--muted); font-size: 0.85rem; padding: 10px; border: 1px dashed #4a5560; border-radius: 8px; }
.cv-lock-ico { width: 14px; height: 12px; border-radius: 2px; background: var(--muted); position: relative; margin-top: 6px; }
.cv-lock-ico::before { content: ''; position: absolute; left: 2px; right: 2px; top: -8px; height: 9px; border: 2px solid var(--muted); border-bottom: 0; border-radius: 6px 6px 0 0; }
.cv-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 12px 12px 0 0; background: linear-gradient(180deg, #46505a, #333b43); border: 2px solid #5f6a75; border-bottom: 0; }
.cover.inner > .cv-stage > .cv-bar { background: linear-gradient(180deg, #4a4330, #3a3424); border-color: #8a7840; }
.cv-close { padding: 10px 16px; border-radius: 8px; border: 2px solid var(--amber); background: #2a2210; color: var(--amber); font-family: var(--display); letter-spacing: 0.14em; }
.cv-close.rattle { animation: rattle 0.32s; }
.cv-inside { position: relative; display: grid; gap: 10px; padding: 12px 10px; border: 2px solid #5f6a75; border-top: 0; border-radius: 0 0 12px 12px; background: radial-gradient(ellipse at top, #10161b, #050709 70%); box-shadow: inset 0 10px 20px #000c; overflow: hidden; }
.cover.inner > .cv-stage > .cv-inside { border-color: #8a7840; }
.cv-light { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 0%, #fff6dc55, transparent 60%); z-index: 2; }
.cv-inside.reveal > .cv-light { animation: lightSpill 0.9s ease-out; }
.cv-inside.reveal > :not(.cv-light) { animation: riseIn 0.45s cubic-bezier(0.3, 0.8, 0.3, 1.1) both; }
.cv-inside.reveal > :nth-child(3) { animation-delay: 0.06s; } .cv-inside.reveal > :nth-child(4) { animation-delay: 0.12s; }
@keyframes lightSpill { 15% { opacity: 1; } 100% { opacity: 0; } }
@keyframes riseIn { from { transform: translateY(10px); opacity: 0; } }

/* fasteners */
.cv-fix { display: grid; gap: 4px; }
.cv-screws, .cv-latches { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 4px 10px; }
.fx-box { display: grid; justify-items: center; }
.fx { width: 84px; height: 84px; touch-action: none; cursor: grab; }
.fx-hole { fill: #0b0e11; stroke: #59636d; stroke-width: 2; }
.fx-bore { fill: #050607; }
.fx-mark { stroke: var(--yellow); stroke-width: 2.5; }
.fx-mark-t { fill: var(--yellow); font-family: var(--display); font-size: 6.5px; letter-spacing: 0.5px; }
.fx-shadow { fill: #000a; transition: transform 0.2s; }
.fx-shank { opacity: 0; transition: opacity 0.2s; }
.fx-shank rect { fill: #b9c1c9; stroke: #4a525a; stroke-width: 1; }
.fx-thread { stroke: #4a525a; stroke-width: 1; }
.fx-cap { fill: #b3bcc5; stroke: #3d454d; stroke-width: 1.5; }
.fx-cap-rim { fill: none; stroke: #ffffff70; stroke-width: 1.5; stroke-dasharray: 20 80; transform: rotate(-120deg); }
.fx-drive { fill: #2d343b; }
.fx-knurl-cap { fill: #9da7b1; }
.fx-knurl { stroke: #4a525a; stroke-width: 1.4; }
.fx-cap-top { fill: #c8d0d7; stroke: #6a737c; stroke-width: 1; }
.fx-dot { fill: #e06030; }
.fx-wing { fill: #c3cad1; stroke: #4a525a; stroke-width: 1.5; }
.fx-bolt-end { fill: #6a737c; }
.fx-dome { fill: #d0d6dc; }
.fx-index { fill: #e06030; }
.fx-lift { transition: transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1); }
.fx-box.loose .fx-shadow { transform: translate(2px, 3px); }
.fx-box.out .fx-lift { transform: translate(14px, 13px) rotate(32deg); }
.fx-box.out .fx-shank { opacity: 1; }
.fx-box.out .fx-shadow { transform: translate(3px, 4px); }
.fx-box.held .fx-hole { stroke: var(--amber); }
.fx-box.popout .fx-lift { animation: popout 0.5s cubic-bezier(0.3, 0.8, 0.4, 1); }
@keyframes popout { 0% { transform: none; } 40% { transform: translate(6px, -14px) rotate(15deg) scale(1.15); } 100% { transform: translate(14px, 13px) rotate(32deg); } }
.fx-box.home .fx { animation: home 0.25s; }
@keyframes home { 40% { transform: scale(0.94); } }
.fx-state { font-family: var(--crt); font-size: 0.66rem; letter-spacing: 0.08em; color: var(--faint); margin-top: -4px; }
.fx-box.loose .fx-state { color: var(--yellow); }
.fx-box.out .fx-state { color: var(--amber); }
.fx-seal rect { fill: #f3eedf; stroke: #b91c1c; stroke-width: 1.2; }
.fx-seal text { font-family: var(--display); font-size: 6px; fill: #b91c1c; letter-spacing: 0.3px; }
.fx-seal { pointer-events: none; }
.fx-seal-l, .fx-seal-r { transition: transform 0.45s cubic-bezier(0.3, 1.4, 0.5, 1), opacity 0.45s; }
.fx-seal.torn .fx-seal-l { transform: translate(-10px, 16px) rotate(-28deg); opacity: 0.75; }
.fx-seal.torn .fx-seal-r { transform: translate(12px, 20px) rotate(22deg); opacity: 0.75; }

/* latches */
.lt { display: grid; justify-items: center; gap: 4px; }
.lt-lbl { font-family: var(--crt); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--faint); }
.lt.on .lt-lbl { color: var(--amber); }
.tlatch, .bolt, .catch { position: relative; touch-action: none; cursor: pointer; }
.tlatch { width: 60px; height: 72px; perspective: 260px; }
.tl-keeper { position: absolute; left: 18px; right: 18px; top: 4px; height: 14px; border-radius: 4px; background: #59636d; box-shadow: inset 0 -2px 0 #0006; }
.tl-hook { position: absolute; left: 24px; right: 24px; top: 10px; height: 26px; border: 3px solid #b9c1c9; border-top: 0; border-radius: 0 0 8px 8px; transition: transform 0.2s; }
.tl-lever { position: absolute; left: 8px; right: 8px; top: 22px; height: 46px; border-radius: 8px; background: linear-gradient(180deg, #d4dbe2, #7a8590); box-shadow: 0 4px 0 #2a3138, 0 6px 8px #0008; transform-origin: 50% 100%; transition: transform 0.18s cubic-bezier(0.3, 0.8, 0.3, 1.4); display: grid; place-items: center; }
.tl-grip { width: 60%; height: 16px; background: repeating-linear-gradient(0deg, #4a525a 0 2px, transparent 2px 5px); border-radius: 3px; }
.lt.on .tl-lever { transform: rotateX(-150deg); background: linear-gradient(180deg, #ffb020, #a86a00); }
.lt.on .tl-hook { transform: translateY(14px); opacity: 0.6; }
.bolt { width: 96px; height: 52px; }
.bolt-keeper { position: absolute; right: 2px; top: 14px; width: 18px; height: 24px; border-radius: 3px; background: #4a525a; box-shadow: inset 0 0 0 3px #2d343b; }
.bolt-barrel { position: absolute; left: 6px; right: 20px; top: 18px; height: 16px; border-radius: 3px; background: linear-gradient(180deg, #9aa4ad, #5c656e); }
.bolt-rod { position: absolute; left: 10px; width: 80px; top: 21px; height: 10px; border-radius: 5px; background: linear-gradient(180deg, #e6eaee, #8a939c); transition: transform 0.18s cubic-bezier(0.3, 0.8, 0.3, 1.3); }
.bolt-knob { position: absolute; left: 22px; top: -18px; width: 16px; height: 22px; border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, #ffb020, #a86a00); box-shadow: 0 2px 4px #0008; }
.lt.on .bolt-rod { transform: translateX(-26px); }
.catch { width: 60px; height: 60px; }
.catch-ring { position: absolute; inset: 4px; border-radius: 50%; background: #2d343b; box-shadow: inset 0 3px 6px #000c, 0 0 0 3px #59636d; }
.catch-btn { position: absolute; inset: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e6eaee, #7a8590); box-shadow: 0 1px 0 #0008; transition: transform 0.2s cubic-bezier(0.3, 1.8, 0.5, 1), box-shadow 0.2s; }
.lt.on .catch-btn { transform: scale(1.22) translateY(-3px); background: radial-gradient(circle at 35% 30%, #fff, #ffb020 60%, #a86a00); box-shadow: 0 6px 8px #000a, 0 0 0 3px #ffb02055; }

/* key switch and LID RELEASE */
.cv-keyrow { display: flex; justify-content: space-around; align-items: center; gap: 10px; padding: 10px 8px; margin-bottom: 8px; border-radius: 12px; background: linear-gradient(180deg, #1b2229, #0f1418); border: 1px solid #2a3440; box-shadow: inset 0 1px 0 #ffffff10; }
.cv-keybox, .cv-relbox { display: grid; justify-items: center; gap: 4px; }
.keysw { width: 136px; height: 136px; touch-action: none; cursor: grab; }
.ks-bezel { fill: #2b3239; stroke: #9aa4ad; stroke-width: 3; }
.ks-face { fill: #11161b; }
.ks-tick { stroke: #7d8893; stroke-width: 2; }
.ks-lbl { font-family: var(--display); font-size: 11px; fill: var(--muted); letter-spacing: 0.5px; transition: fill 0.15s; }
.ks-lbl.on { fill: var(--amber); }
.ks-slot { fill: #050607; }
.ks-blade { fill: #c9a227; stroke: #6b5410; stroke-width: 1; }
.ks-bow { fill: #e0bc3a; stroke: #6b5410; stroke-width: 2; }
.ks-ring { fill: #11161b; }
.ks-key.snap { transition: transform 0.16s cubic-bezier(0.3, 0.8, 0.3, 1.5); }
.cv-release { position: relative; width: 100px; height: 100px; border: 0; padding: 0; background: none; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.rel-collar { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, #1a3b5a 62%, #0b1e30 63%, #2a4a6a 70%, #0b1e30 100%); box-shadow: 0 6px 12px #0009; }
.rel-cap { position: absolute; inset: 12px; border-radius: 50%; display: grid; place-items: center; align-content: center; background: radial-gradient(circle at 35% 28%, #b8dcff, #2b7cc4 55%, #164a78); color: #fff; font-family: var(--display); letter-spacing: 0.1em; font-size: 0.85rem; line-height: 1.1; box-shadow: 0 7px 0 #0b263f; text-shadow: 0 1px 2px #0008; }
.cv-release.kick .rel-cap { animation: relPress 0.18s; }
@keyframes relPress { 50% { transform: translateY(6px); box-shadow: 0 1px 0 #0b263f; } }
.rel-lamp { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3a1010; vertical-align: middle; }
.rel-lamp.blink { animation: relBlink 0.3s 5; }
@keyframes relBlink { 50% { background: var(--red); box-shadow: 0 0 8px var(--red); } }

@media (prefers-reduced-motion: reduce) {
  .pump2-surface, .g-hint-ico { animation: none; }
  .cv-inside.reveal > * { animation: none; }
}
.kit-emergency .sk-rocker.on .rk-top { color: #ffd60a; text-shadow: 0 0 10px #ffd60a99; }
.cv-stage.peek { border-radius: 12px; background: radial-gradient(ellipse at 30% 40%, #fff6dc22, transparent 55%), radial-gradient(ellipse at top, #10161b, #050709 70%); box-shadow: inset 0 0 0 2px #5f6a75, inset 0 10px 24px #000; }
.fx-box.out .g-hint, .lt.on .g-hint { display: none; }

/* Dead controls: nothing behind them. */
.ctl.limp { animation: limp 0.25s; }
@keyframes limp { 30% { transform: translateY(1px) scale(0.995); } }

/* ── service access and repairs ── */
.cv-section { display: grid; gap: 10px; margin-top: 6px; }
.cv-section-h { font-family: var(--display); letter-spacing: 0.2em; font-size: 0.75rem; color: var(--faint); text-align: center; border-top: 1px dashed #3a4550; padding-top: 8px; }
.rp { display: grid; gap: 6px; padding: 8px; border-radius: 10px; border: 1px solid #2a3440; background: #0b1014; }
.rp-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--display); letter-spacing: 0.16em; font-size: 0.8rem; color: var(--muted); }
/* The mechanism's own lamp: steady green when sound, blinking red while it wants mending. */
.rp-lamp { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 1px solid #111; background: radial-gradient(circle at 35% 30%, #d6ffe6, #19c26a 50%, #0a4a26); box-shadow: 0 0 8px #19c26a99; }
.rp-lamp.bad { background: radial-gradient(circle at 35% 30%, #ffd0d0, var(--red) 50%, #6a0808); box-shadow: 0 0 10px var(--red); animation: lampFlash 0.7s steps(1) infinite; }
.rp-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.rp-msg { display: none; text-align: center; font-family: var(--crt); color: var(--amber); letter-spacing: 0.06em; }
.rp-msg.on { display: block; animation: msgIn 0.25s; }
.rp-col { display: grid; gap: 8px; align-content: center; }
.rp-btn { min-width: 64px; padding: 10px 12px; border-radius: 8px; border: 1px solid #4a5560; background: #1a2128; color: var(--text); font-family: var(--display); letter-spacing: 0.1em; cursor: pointer; touch-action: manipulation; }
.rp-btn.on { border-color: var(--amber); color: var(--amber); background: #2a2210; }
.rp-btn:disabled { opacity: 0.35; cursor: default; }
.rp-btn.hold { touch-action: none; user-select: none; -webkit-user-select: none; }
.rp-btn.down { background: #10324a; border-color: #3aa7c9; }
.rp-btn.kick, .rp-btn.nudge { animation: rattle 0.32s; }
.rp-box { display: grid; gap: 4px; padding: 6px; border-radius: 8px; background: #1a1610; border: 1px dashed #5a4a30; }
.rp-box-h { font-family: var(--display); letter-spacing: 0.16em; font-size: 0.7rem; color: #a08a60; text-align: center; }
/* jam: a rotor with something wedged in it */
.jam { width: 130px; height: 130px; touch-action: none; cursor: grab; }
.jam-housing { fill: #12171c; stroke: #4a525a; stroke-width: 2; }
.jam-tooth { fill: #8a96a3; }
.jam-disc { fill: #5f6b76; stroke: #2d343b; stroke-width: 2; }
.jam-spoke { stroke: #2d343b; stroke-width: 4; stroke-linecap: round; }
.jam-hub { fill: #b9c1c9; }
.jam.stuck .jam-rotor { animation: strain 0.9s ease-in-out infinite; transform-origin: 0 0; }
@keyframes strain { 50% { filter: brightness(1.15); } }
.jam-thing { fill: var(--mc); stroke: #0008; stroke-width: 1; }
.jam-thing-line { fill: none; stroke: #0007; stroke-width: 1.2; }
.jam-culprit { transition: transform 0.35s cubic-bezier(0.3, 1.4, 0.5, 1), opacity 0.3s; }
.jam-culprit.loose { transform: translate(22px, -6px) rotate(25deg); animation: bob 1.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translate(22px, -9px) rotate(18deg); } }
.jam-culprit.gone { opacity: 0; transform: translate(40px, -40px); }
/* flush: a sight glass that runs clear */
.fl-glass { position: relative; width: 46px; height: 120px; border-radius: 10px; border: 3px solid #8a96a3; background: #0b1014; overflow: hidden; box-shadow: inset 0 0 8px #000a; }
.fl-liquid { position: absolute; inset: 0; background: color-mix(in srgb, var(--mc) calc(var(--dirt) * 100%), #bfe6f7); opacity: calc(0.35 + var(--dirt) * 0.6); }
.fl-flow { position: absolute; inset: 0; opacity: 0; background: repeating-linear-gradient(180deg, #ffffff30 0 6px, transparent 6px 14px); }
.fl-glass.flowing .fl-flow { opacity: 1; animation: flow 0.4s linear infinite; }
@keyframes flow { to { background-position: 0 14px; } }
/* swap: a holder and a box of spares */
.sw { display: grid; gap: 8px; }
.sw-slot { display: grid; justify-items: center; gap: 4px; padding: 10px; border-radius: 10px; border: 2px solid #4a5560; background: #12181d; color: var(--text); cursor: pointer; }
.sw-slot.seat { animation: home 0.25s; }
.sw-slot.nudge { animation: rattle 0.32s; }
.sw-label { font-family: var(--crt); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--muted); }
.sw-empty { font-family: var(--crt); color: var(--faint); padding: 8px; }
.sw-fitted, .sw-spare { display: grid; justify-items: center; gap: 3px; }
.sw-el { width: 64px; height: 20px; border-radius: 4px; background: repeating-linear-gradient(90deg, #e8e4d8 0 4px, #c9c4b4 4px 8px); border: 1px solid #5a5446; }
.sw-fitted.spent .sw-el { background: repeating-linear-gradient(90deg, var(--mc) 0 4px, color-mix(in srgb, var(--mc) 70%, #000) 4px 8px); }
.sw-name { font-family: var(--crt); font-size: 0.72rem; color: var(--text); }
.sw-spare { padding: 8px 6px; border-radius: 6px; border: 1px solid #3a3226; background: #241e15; color: var(--text); cursor: pointer; }
.sw-spare.held { border-color: var(--amber); box-shadow: 0 0 0 2px #ffb02055; transform: translateY(-2px); }
/* bleed: a sight tube full of bubbles */
.bl-tube { position: relative; width: 34px; height: 120px; border-radius: 16px; border: 3px solid #8a96a3; background: linear-gradient(90deg, #3aa7c955, #3aa7c9aa, #3aa7c955); overflow: hidden; }
.bl-bubble { position: absolute; left: calc(8px + (var(--k) * 5px) % 14px); bottom: calc(var(--k) * 14px); width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #ffffffcc; background: #ffffff22; opacity: 0; }
.bl-bubble.on { opacity: 1; animation: rise 1.6s ease-in infinite; animation-delay: calc(var(--k) * -0.2s); }
@keyframes rise { from { transform: translateY(20px); } to { transform: translateY(-20px); } }
.bl-tube.full { background: linear-gradient(90deg, #3aa7c999, #3aa7c9, #3aa7c999); }
/* cool: a thermometer with a reset line */
.co-thermo { position: relative; width: 26px; height: 120px; border-radius: 13px; border: 3px solid #8a96a3; background: #0b1014; }
.co-merc { position: absolute; left: 5px; right: 5px; bottom: 6px; height: calc(var(--heat) * 100px); border-radius: 6px; background: linear-gradient(0deg, #e0603a, #ffb020); transition: height 0.3s; }
.co-thermo.cold .co-merc { background: linear-gradient(0deg, #3aa7c9, #7fd0f0); }
.co-line { position: absolute; left: -8px; right: -8px; bottom: calc(6px + var(--line) * 100px); border-top: 2px dashed var(--green); }
.co-bulb { position: absolute; left: 50%; bottom: -12px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: #e0603a; border: 3px solid #8a96a3; }
.co-status { display: flex; align-items: center; gap: 8px; font-family: var(--crt); letter-spacing: 0.08em; color: var(--muted); }
/* scrape: a surface under a deposit */
.sc-surface { position: relative; height: 90px; border-radius: 10px; border: 2px solid #4a5560; overflow: hidden; touch-action: none; cursor: grab; background: linear-gradient(135deg, #9aa4ad, #e6eaee 40%, #8a96a3 60%, #cfd6dc); }
.sc-deposit { position: absolute; inset: 0; opacity: var(--dirt); background: radial-gradient(ellipse 30% 40% at 20% 30%, var(--mc), transparent 70%), radial-gradient(ellipse 40% 50% at 70% 60%, var(--mc), transparent 70%), radial-gradient(ellipse 30% 30% at 45% 80%, var(--mc), transparent 70%), color-mix(in srgb, var(--mc) 80%, transparent); transition: opacity 0.2s; }
.sc-shine { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, #ffffff66 45%, transparent 60%); }
.sc-surface.clean .sc-shine { animation: shine 1.4s ease-out; }
@keyframes shine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.sc-tool { position: absolute; top: 18px; left: 50%; width: 16px; height: 54px; margin-left: -8px; border-radius: 3px; background: linear-gradient(90deg, #6a737c, #c9d0d6); border: 1px solid #2d343b; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.sc-surface.scrubbing .sc-tool { opacity: 1; }
/* align: a mark to bring onto the line */
.al { display: grid; gap: 8px; }
.al-track { position: relative; height: 40px; border-radius: 8px; background: repeating-linear-gradient(90deg, #2a3440 0 1px, transparent 1px 10%), #0b1014; border: 1px solid #4a5560; }
.al-line { position: absolute; left: 50%; top: 4px; bottom: 4px; border-left: 2px solid var(--green); }
.al-mark { position: absolute; top: 8px; bottom: 8px; left: calc(50% + var(--off) * 9%); width: 12px; margin-left: -6px; border-radius: 3px; background: var(--amber); transition: left 0.15s; }
.al-mark.on { background: var(--green); box-shadow: 0 0 8px var(--green); }

/* The certification stamp across a certified unit's controls. */
.controls { position: relative; }
.cert-stamp { position: absolute; left: 50%; top: 50%; z-index: 6; display: none; flex-direction: column; align-items: center; padding: 6px 18px 8px; border: 5px solid #19c26a; border-radius: 10px; color: #19c26a; background: #06140bcc; font-family: var(--display); letter-spacing: 0.16em; line-height: 1.05; transform: translate(-50%, -50%) rotate(-11deg); pointer-events: none; box-shadow: 0 0 0 2px #06140b, 0 10px 30px #000c; -webkit-mask-image: radial-gradient(circle at 30% 40%, #000 55%, #000c 70%, #000 88%); mask-image: radial-gradient(circle at 30% 40%, #000 55%, #000c 70%, #000 88%); }
.cert-stamp span { font-size: 2.2rem; }
.cert-stamp small { font-size: 0.7rem; letter-spacing: 0.4em; }
.cert-stamp.on { display: flex; }
.cert-stamp.slam { animation: slam 0.42s cubic-bezier(0.3, 0, 0.4, 1); }
@keyframes slam { 0% { transform: translate(-50%, -50%) rotate(-24deg) scale(3); opacity: 0; } 55% { transform: translate(-50%, -50%) rotate(-9deg) scale(0.92); opacity: 1; } 75% { transform: translate(-50%, -50%) rotate(-12deg) scale(1.04); } 100% { transform: translate(-50%, -50%) rotate(-11deg) scale(1); } }