/* Coordinated hardware bench. One 12-second CSS timeline drives every element — no JS. */
.hardware-section {
    padding: 48px 0 56px;
    background: #0c0a10;
    border-top: 1px solid var(--border);
    scroll-margin-top: 90px;
}
.hardware-section .hardware-heading { margin-bottom: 32px; }
.hardware-section .hardware-heading p { max-width: none; margin-inline: auto; line-height: 1.6; }
.hardware-lab {
    --hw-panel: #141219;
    --hw-panel-top: #1a1721;
    --hw-line: rgba(178, 156, 219, .22);
    --hw-muted: #a7a0b4;
    --hw-text: #e7e2f1;
    --hw-purple: #a78bfa;
    --hw-green: #6ad6a4;
    --hw-amber: #e6bd66;
    --hw-violet: #a992f2;
    --hw-cyan: #6ab5cb;
    --hw-ctrl: #221e2a;
    --hw-ctrl-line: #3d3548;
    --hw-ctrl-text: #b9b0c8;
    --hw-screen: #0b1110;
    --hw-screen-grid: rgba(157, 189, 163, .06);
    --hw-screen-axis: rgba(157, 189, 163, .16);
    --hw-screen-edge: rgba(121, 154, 129, .12);
    --hw-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
    position: relative;
    container-type: inline-size;
    max-width: 1120px;
    margin: 0 auto;
}
.hw-stage {
    --u: .0892857143cqw;
    height: calc(625 * var(--u));
    position: relative;
    isolation: isolate;
    color: var(--hw-text);
}
.hw-stage *, .hw-stage *::before, .hw-stage *::after { box-sizing: border-box; }

/* ── Wires: static harness + bus drawn once, packets ride their own routes ── */
.hw-wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; overflow: visible; }
.hw-wires--mobile { display: none; }
.hw-wires path { stroke-linecap: round; stroke-linejoin: round; }
.hw-wire-halo { stroke: #8b5cf6; stroke-width: 8; opacity: .08; }
.hw-wire { stroke: #9566e8; stroke-width: 1.7; opacity: .65; }
/* the chip → DUT probe wires read heavier than the instrument leads */
.hw-wire-halo.hw-wire--dut { stroke-width: 14; opacity: .1; }
.hw-wire.hw-wire--dut { stroke-width: 3.6; opacity: .8; }
.hw-packet { stroke: #d4bdff; stroke-width: 2.7; stroke-dasharray: 9 105; stroke-dashoffset: 12; opacity: 0; }
.hw-link--control .hw-packet { animation: hwControl 12s linear infinite; }
.hw-link--capture .hw-packet { animation: hwCapture 12s linear infinite; }
/* USB-C cable from the test machine into the chip (faint beam riding it); ribbon from the chip to the DUT: flat band, seven conductors (pin 1 red), IDC plugs */
.hw-wires .hw-ribbon path { stroke-linecap: butt; stroke-linejoin: round; }
.hw-ribbon-halo { stroke: #8b5cf6; stroke-width: 30; opacity: .06; }
.hw-ribbon-band { stroke: #3a3347; stroke-width: 16; }
.hw-ribbon-cond { stroke: #9a8fb2; stroke-width: .9; opacity: .5; }
.hw-ribbon-pin1 { stroke: #e0655a; opacity: .75; }
.hw-plug { fill: #1c1924; stroke: #4d4459; stroke-width: 1; }
.hw-plug-grip { fill: #28232f; stroke: rgba(255, 255, 255, .05); stroke-width: .6; }
.hw-socket { fill: #4a3a6a; stroke: #5d4c80; stroke-width: .6; }
.hw-usb-halo { stroke: #8b5cf6; stroke-width: 16; opacity: .06; }
.hw-usb-cable { stroke: #2f2939; stroke-width: 6; }
.hw-usb-sheen { stroke: #fff; stroke-width: 1; opacity: .07; }
.hw-usb-shell { fill: #6f6880; stroke: #9d95ad; stroke-width: .6; }
.hw-usb-port { fill: #16131c; }
.hw-wires--mobile .hw-usb-halo { stroke-width: 13; }
.hw-wires--mobile .hw-usb-cable { stroke-width: 5; }
.hw-beam { stroke-dasharray: 38 100; stroke-dashoffset: 38; animation: hwBeam 2.4s linear infinite; }
.hw-beam--outer { stroke: #b794ff; stroke-width: 14; opacity: .04; }
.hw-beam--mid { stroke: #d6c2ff; stroke-width: 7; opacity: .1; }
.hw-beam--core { stroke: #f6f0ff; stroke-width: 2.5; opacity: .28; }
/* AssembleAI -> DUT return beam on its own ribbon lane, half a cycle out of phase with the DUT -> AssembleAI beam */
.hw-beam--back { animation-delay: -1.2s; }
.hw-wires--mobile .hw-ribbon-halo { stroke-width: 24; }
.hw-wires--mobile .hw-ribbon-band { stroke-width: 12; }
.hw-wires--mobile .hw-beam--outer { stroke-width: 11; }
.hw-wires--mobile .hw-beam--mid { stroke-width: 5.5; }
.hw-wires--mobile .hw-beam--core { stroke-width: 2; }
/* teardrop pulses (same glow + core as the hero bench); SMIL moves them, head first */
.hw-drop-core { fill: #d1baff; }
.hw-wires--mobile .hw-drop-core { fill: #ffffff; }

/* ── Shared chassis ── */
.hw-node {
    position: absolute;
    background: var(--hw-panel);
    border: 1px solid var(--hw-line);
    border-radius: 12px;
    box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .025);
}
.hw-header {
    height: calc(28 * var(--u)); padding: 0 calc(12 * var(--u));
    display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u));
    font-size: calc(12 * var(--u)); font-weight: 500; white-space: nowrap; letter-spacing: -.01em;
    background: var(--hw-panel-top); border-bottom: 1px solid var(--hw-line);
    border-radius: 11px 11px 0 0;
}
.hw-led { display: block; flex: none; width: calc(4 * var(--u)); height: calc(4 * var(--u)); background: var(--hw-green); border-radius: 50%; box-shadow: 0 0 calc(6 * var(--u)) rgba(106, 214, 164, .4); animation: hwLed 12s linear infinite; }
.hw-port { position: absolute; top: 50%; width: calc(6 * var(--u)); height: calc(6 * var(--u)); margin-top: calc(-3 * var(--u)); border-radius: 50%; background: #b99ae9; box-shadow: 0 0 calc(8 * var(--u)) #8b5cf655; }
.hw-port--out { top: auto; bottom: calc(-3 * var(--u) - 1px); left: 50%; margin: 0 0 0 calc(-3 * var(--u)); }

/* ── Device under test (right of the chip; two probe ports face the chip) ── */
.hw-dut { left: calc(822 * var(--u)); top: calc(287 * var(--u)); width: calc(200 * var(--u)); height: calc(316 * var(--u)); }
.hw-dut-ports { position: absolute; left: calc(-3 * var(--u) - 1px); top: calc(143 * var(--u) - 1px); height: calc(30 * var(--u)); display: flex; flex-direction: column; justify-content: space-between; }
.hw-dut-ports .hw-port { position: static; margin: 0; }
.hw-dut .hw-header { padding-inline: calc(10 * var(--u)); }
.hw-board { position: absolute; inset: calc(28 * var(--u)) calc(5 * var(--u)) calc(23 * var(--u)); overflow: hidden; background: #0f0e13; }
.hw-board img { width: 100%; height: 100%; object-fit: contain; display: block; filter: brightness(1.7); }
.hw-board .hw-board-light { display: none; filter: none; }
/* lit LEDs sit on the board art's own footprints (viewBox 210x300): PWR steady, STS heartbeat, BLE + radio flicker */
.hw-board-leds { position: absolute; top: 0; left: 50%; height: 100%; aspect-ratio: 210 / 300; transform: translateX(-50%); pointer-events: none; }
.hw-bled { position: absolute; width: 2.4%; aspect-ratio: 1; margin: -1.2% 0 0 -1.2%; border-radius: 50%; }
.hw-bled--pwr { left: 10.476%; top: 88.333%; background: #4ade80; box-shadow: 0 0 calc(3 * var(--u)) calc(.6 * var(--u)) rgba(74, 222, 128, .75); }
.hw-bled--sts { left: 15.238%; top: 88.333%; background: #fbbf24; box-shadow: 0 0 calc(3 * var(--u)) calc(.6 * var(--u)) rgba(251, 191, 36, .75); animation: hwBledBeat 1.6s linear infinite; }
.hw-bled--ble { left: 20%; top: 88.333%; background: #60a5fa; box-shadow: 0 0 calc(3 * var(--u)) calc(.6 * var(--u)) rgba(96, 165, 250, .8); animation: hwBledFlicker 2.3s linear infinite; }
.hw-bled--rf { left: 69.048%; top: 46%; width: 2.1%; margin: -1.05% 0 0 -1.05%; background: #60a5fa; box-shadow: 0 0 calc(3 * var(--u)) calc(.6 * var(--u)) rgba(96, 165, 250, .8); animation: hwBledFlicker 2.3s linear infinite -1.1s; }
@keyframes hwBledBeat { 0%, 8%, 20%, 28% { opacity: 1; } 10%, 18%, 30%, 100% { opacity: .15; } }
@keyframes hwBledFlicker { 0%, 100% { opacity: .15; } 6%, 10% { opacity: 1; } 12%, 18% { opacity: .15; } 20%, 23% { opacity: 1; } 25%, 58% { opacity: .15; } 60%, 66% { opacity: 1; } 68% { opacity: .15; } }
.hw-dut-foot { position: absolute; bottom: calc(7 * var(--u)); left: calc(10 * var(--u)); right: calc(10 * var(--u)); display: flex; justify-content: space-between; color: var(--hw-muted); font: calc(7.5 * var(--u))/1.2 var(--hw-mono); letter-spacing: .06em; }
.hw-dut-foot span { color: var(--hw-green); }

/* ── Instruments: four identical chassis in a top row, screen + front-panel controls ── */
.hw-inst { top: calc(20 * var(--u)); width: calc(260 * var(--u)); height: calc(132 * var(--u)); }
.hw-smu { left: calc(10 * var(--u)); }
.hw-scope { left: calc(290 * var(--u)); }
.hw-logic { left: calc(570 * var(--u)); }
.hw-debug { left: calc(850 * var(--u)); }
.hw-face { position: absolute; inset: calc(28 * var(--u)) 0 0; display: flex; gap: calc(8 * var(--u)); padding: calc(9 * var(--u)); }
.hw-screen {
    position: relative; flex: 1; min-width: 0; overflow: hidden;
    display: flex; flex-direction: column;
    background-color: var(--hw-screen);
    background-image: linear-gradient(var(--hw-screen-grid) 1px, transparent 1px), linear-gradient(90deg, var(--hw-screen-grid) 1px, transparent 1px);
    background-size: 10% 25%;
    border: 1px solid var(--hw-screen-edge); border-radius: calc(4 * var(--u));
    box-shadow: inset 0 0 calc(20 * var(--u)) rgba(0, 0, 0, .45);
}
.hw-plot {
    display: block; width: 100%; flex: 1; min-height: 0;
    /* persistence display: the sweep redraws the trace at full brightness over the previous
       capture, which stays on screen at ~30% instead of blanking between loops */
    -webkit-mask-image: linear-gradient(90deg, #000 50%, rgba(0, 0, 0, .3) 50%); mask-image: linear-gradient(90deg, #000 50%, rgba(0, 0, 0, .3) 50%);
    -webkit-mask-size: 200% 100%; mask-size: 200% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    animation: hwReveal 12s linear infinite;
}
.hw-trace { fill: none; stroke: var(--hw-green); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.hw-trace--ch1 { stroke: var(--hw-amber); }
.hw-trace--ch2 { stroke: var(--hw-violet); }
.hw-trace--ch3 { stroke: var(--hw-cyan); }
.hw-ch1 { color: var(--hw-amber); }
.hw-ch2 { color: var(--hw-violet); }
.hw-ch3 { color: var(--hw-cyan); }
.hw-sweep { position: absolute; top: 0; bottom: 0; left: 0; width: 28%; background: linear-gradient(90deg, transparent, #b9a1ef18); border-right: 1px solid #cfbaffb0; transform: translateX(-100%); opacity: 0; animation: hwSweep 12s linear infinite; pointer-events: none; }

/* front panel */
.hw-panel { flex: none; width: calc(50 * var(--u)); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: calc(2 * var(--u)) 0; }
.hw-knob { display: block; width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; position: relative; background: radial-gradient(circle at 35% 30%, #3b3446, #1b1822 72%); border: 1px solid #4a4157; box-shadow: 0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .07); }
.hw-knob::after { content: ''; position: absolute; left: 50%; top: calc(3 * var(--u)); width: calc(2 * var(--u)); height: calc(6 * var(--u)); margin-left: calc(-1 * var(--u)); border-radius: 1px; background: #cbb8ea; }
.hw-knob--sm { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.hw-knob--sm::after { top: calc(2 * var(--u)); height: calc(4.5 * var(--u)); }
.hw-keys { display: flex; flex-direction: column; align-items: center; gap: calc(3 * var(--u)); }
.hw-key { display: grid; place-items: center; width: calc(38 * var(--u)); height: calc(11 * var(--u)); border-radius: calc(2.5 * var(--u)); background: var(--hw-ctrl); border: 1px solid var(--hw-ctrl-line); font: 500 calc(6.5 * var(--u))/1 var(--hw-mono); letter-spacing: .05em; color: var(--hw-ctrl-text); white-space: nowrap; }
.hw-key--on { color: var(--hw-green); border-color: rgba(106, 214, 164, .35); background: rgba(106, 214, 164, .08); box-shadow: 0 0 calc(6 * var(--u)) rgba(106, 214, 164, .12); }
.hw-jacks { display: flex; gap: calc(9 * var(--u)); padding-bottom: calc(8 * var(--u)); }
.hw-jack { position: relative; display: block; width: calc(11 * var(--u)); height: calc(11 * var(--u)); border-radius: 50%; border: calc(2.5 * var(--u)) solid #6f6a78; background: #0e0d12; box-shadow: 0 0 0 1px #2a2530; }
.hw-jack--hi { border-color: #c4524f; }
.hw-jack--lo { border-color: #4d4858; }
.hw-jack--bnc::before { content: ''; position: absolute; inset: 50% auto auto 50%; width: calc(4 * var(--u)); height: calc(4 * var(--u)); margin: calc(-2 * var(--u)) 0 0 calc(-2 * var(--u)); border-radius: 50%; background: #8f8798; }
.hw-jack span { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: calc(2.5 * var(--u)); font: calc(6.5 * var(--u))/1 var(--hw-mono); letter-spacing: .06em; color: var(--hw-muted); }
.hw-pins { display: grid; grid-template-columns: repeat(5, calc(4 * var(--u))); grid-auto-rows: calc(4 * var(--u)); gap: calc(3 * var(--u)); padding: calc(3 * var(--u)); background: #1b1722; border: 1px solid var(--hw-ctrl-line); border-radius: calc(2 * var(--u)); }
.hw-pins--4 { grid-template-columns: repeat(4, calc(4 * var(--u))); }
.hw-pins i { display: block; border-radius: 50%; background: #c9b27a; box-shadow: inset 0 0 0 1px #6f5f3a; }
.hw-tag { font: 500 calc(6.5 * var(--u))/1.2 var(--hw-mono); letter-spacing: .08em; color: var(--hw-muted); text-align: center; white-space: nowrap; }

/* SMU screen */
.hw-readouts { display: flex; align-items: baseline; gap: calc(14 * var(--u)); height: calc(30 * var(--u)); padding: calc(4 * var(--u)) calc(9 * var(--u)) 0; font: calc(8 * var(--u))/1 var(--hw-mono); color: var(--hw-green); }
.hw-readouts b { font-size: calc(17 * var(--u)); font-weight: 500; letter-spacing: -.03em; margin-right: calc(3 * var(--u)); text-shadow: 0 0 calc(8 * var(--u)) rgba(106, 214, 164, .35); }
.hw-modes { display: flex; gap: calc(4 * var(--u)); height: calc(12 * var(--u)); padding: 0 calc(8 * var(--u)); }
.hw-mode { display: grid; place-items: center; padding: 0 calc(4 * var(--u)); border: 1px solid rgba(157, 189, 163, .18); border-radius: calc(2 * var(--u)); font: 500 calc(6.5 * var(--u))/1 var(--hw-mono); letter-spacing: .06em; color: var(--hw-muted); }
.hw-mode--on { color: var(--hw-green); border-color: rgba(106, 214, 164, .4); background: rgba(106, 214, 164, .08); }
.hw-screen--smu .hw-plot { margin: calc(2 * var(--u)) 0 calc(3 * var(--u)); padding: 0 calc(6 * var(--u)); }

/* Oscilloscope screen: 10×8 graticule with centre axes, on-screen readouts, trigger marker */
.hw-screen--scope {
    background-image:
        linear-gradient(90deg, transparent calc(50% - .5px), var(--hw-screen-axis) calc(50% - .5px), var(--hw-screen-axis) calc(50% + .5px), transparent calc(50% + .5px)),
        linear-gradient(transparent calc(50% - .5px), var(--hw-screen-axis) calc(50% - .5px), var(--hw-screen-axis) calc(50% + .5px), transparent calc(50% + .5px)),
        linear-gradient(var(--hw-screen-grid) 1px, transparent 1px), linear-gradient(90deg, var(--hw-screen-grid) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 10% 12.5%, 10% 12.5%;
}
.hw-osd { display: flex; justify-content: space-between; align-items: center; gap: calc(6 * var(--u)); height: calc(15 * var(--u)); padding: 0 calc(6 * var(--u)); font: 500 calc(7 * var(--u))/1 var(--hw-mono); letter-spacing: .03em; color: var(--hw-muted); white-space: nowrap; }
.hw-osd sub { font-size: .85em; vertical-align: baseline; }
.hw-trig-state { position: relative; min-width: calc(30 * var(--u)); height: 1em; text-align: right; }
.hw-trig-state i { position: absolute; inset: 0; font-style: normal; }
.hw-armed { color: var(--hw-amber); animation: hwArmed 12s linear infinite; }
.hw-trigd { color: var(--hw-green); opacity: 0; animation: hwTrigd 12s linear infinite; }
.hw-trig-mark { position: absolute; right: 0; top: 45%; width: 0; height: 0; border: calc(4 * var(--u)) solid transparent; border-right-color: var(--hw-amber); border-left: 0; margin-top: calc(-4 * var(--u)); }

/* Logic analyzer screen: labelled lanes + protocol decode row */
.hw-lanes { position: relative; flex: 1; min-height: 0; padding-top: calc(5 * var(--u)); display: flex; }
.hw-lane-labels { position: absolute; left: 0; top: calc(5 * var(--u)); bottom: 0; width: calc(28 * var(--u)); display: flex; flex-direction: column; justify-content: space-around; padding-left: calc(6 * var(--u)); font: 500 calc(7 * var(--u))/1 var(--hw-mono); }
.hw-lanes .hw-plot { width: 100%; padding: 0 calc(6 * var(--u)) 0 calc(28 * var(--u)); }
.hw-decode { display: flex; align-items: center; gap: calc(4 * var(--u)); height: calc(20 * var(--u)); padding: 0 calc(6 * var(--u)); font: calc(7 * var(--u))/1 var(--hw-mono); white-space: nowrap; overflow: hidden; opacity: .3; animation: hwDecode 12s linear infinite; }
.hw-decode span { padding: calc(2.5 * var(--u)) calc(5 * var(--u)); background: rgba(167, 139, 250, .1); border: 1px solid rgba(167, 139, 250, .22); border-radius: calc(2.5 * var(--u)); color: var(--hw-purple); }
.hw-decode b { color: var(--hw-green); font-weight: 500; }
/* Sweep bar covers only the graticule band, matching the clip-path trace reveal */
.hw-screen--smu .hw-sweep { top: calc(44 * var(--u)); bottom: calc(3 * var(--u)); }
.hw-screen--scope .hw-sweep { top: calc(15 * var(--u)); bottom: calc(15 * var(--u)); }
.hw-screen--logic .hw-sweep { top: calc(5 * var(--u)); bottom: calc(20 * var(--u)); }

/* Debugger screen: target console + run state */
.hw-console { display: flex; flex-direction: column; justify-content: center; gap: calc(1 * var(--u)); flex: 1; padding: calc(4 * var(--u)) calc(8 * var(--u)); font: calc(7.5 * var(--u))/1.6 var(--hw-mono); color: var(--hw-text); white-space: nowrap; }
.hw-line { opacity: .3; }
.hw-line i { font-style: normal; color: var(--hw-purple); margin-right: calc(4 * var(--u)); }
.hw-line b { font-weight: 400; color: var(--hw-muted); }
.hw-line em { font-style: normal; color: var(--hw-green); }
.hw-line--1 { animation: hwLine1 12s linear infinite; }
.hw-line--2 { animation: hwLine2 12s linear infinite; }
.hw-line--3 { animation: hwLine3 12s linear infinite; }
.hw-line--4 { animation: hwLine4 12s linear infinite; }
.hw-target { position: absolute; top: calc(5 * var(--u)); right: calc(6 * var(--u)); width: calc(44 * var(--u)); height: calc(12 * var(--u)); font: 500 calc(6.5 * var(--u))/1 var(--hw-mono); letter-spacing: .08em; }
.hw-target i { position: absolute; inset: 0; display: grid; place-items: center; border-radius: calc(2 * var(--u)); font-style: normal; border: 1px solid; }
.hw-halted { color: var(--hw-amber); border-color: rgba(230, 189, 102, .4); background: rgba(230, 189, 102, .08); animation: hwHalted 12s linear infinite; }
.hw-running { color: var(--hw-green); border-color: rgba(106, 214, 164, .4); background: rgba(106, 214, 164, .08); opacity: 0; animation: hwRunning 12s linear infinite; }

/* ── Assemble AI: a microchip at the centre, rainbow halo behind it ── */
.hw-ai { position: absolute; left: calc(485 * var(--u)); top: calc(370 * var(--u)); width: calc(150 * var(--u)); height: calc(150 * var(--u)); }
.hw-ai-halo { --rainbow-glow-inset: -5px; --rainbow-glow-blur: 10.5px; display: block; width: 100%; height: 100%; border-radius: 12px; }
.hw-chip { position: relative; z-index: 1; height: 100%; border-radius: 12px; background: linear-gradient(135deg, #1f1838, #150f28 55%, #0c0915); border: 1px solid #3f2f60; box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .06); }
.hw-chip-die { position: absolute; inset: calc(11 * var(--u)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(9 * var(--u)); border-radius: calc(7 * var(--u)); border: 1px solid rgba(139, 92, 246, .3); background: linear-gradient(160deg, rgba(255, 255, 255, .035), transparent 60%); }
.hw-chip-die::before { content: ''; position: absolute; top: calc(6 * var(--u)); left: calc(6 * var(--u)); width: calc(4 * var(--u)); height: calc(4 * var(--u)); border-radius: 50%; background: rgba(196, 181, 253, .45); }
.hw-chip-die > strong { font-size: calc(18 * var(--u)); font-weight: 600; letter-spacing: -.04em; color: #f4edff; line-height: 1; white-space: nowrap; }
.hw-chip-pins { position: absolute; display: flex; justify-content: space-between; }
.hw-chip-pins i { display: block; flex: none; border-radius: calc(1.5 * var(--u)); background: linear-gradient(180deg, #4a3a6a, #7a6a99 50%, #4a3a6a); }
.hw-chip-pins--t { left: calc(33 * var(--u) - 1px); right: calc(33 * var(--u) - 1px); top: calc(-12 * var(--u) - 1px); height: calc(12 * var(--u)); }
.hw-chip-pins--t i { width: calc(6 * var(--u)); height: 100%; background: linear-gradient(90deg, #4a3a6a, #7a6a99 50%, #4a3a6a); }
.hw-chip-pins--r { flex-direction: column; right: calc(-12 * var(--u) - 1px); top: calc(60 * var(--u) - 1px); bottom: calc(60 * var(--u) - 1px); width: calc(12 * var(--u)); }
.hw-chip-pins--r i { width: 100%; height: calc(6 * var(--u)); }
/* the ribbon plugs straight into the chip + DUT, so the right pins / DUT probe ports stay hidden */
.hw-chip-pins--r, .hw-dut-ports { display: none; }
.hw-ai-status { position: relative; width: 100%; height: calc(10 * var(--u)); font: calc(8 * var(--u))/1 var(--hw-mono); text-align: center; color: #c7aae9; letter-spacing: .02em; }
.hw-state { position: absolute; inset: 0; }
.hw-state--arm { animation: hwArmState 12s linear infinite; }
.hw-state--capture { opacity: 0; animation: hwCaptureState 12s linear infinite; }
.hw-state--deploy { opacity: 0; animation: hwDeployState 12s linear infinite; color: var(--hw-green); }

/* ── Test Machine: Assemble AI in a mini code editor, keyboard + mouse below ── */
.hw-machine { left: calc(63 * var(--u)); top: calc(320 * var(--u)); width: calc(270 * var(--u)); height: calc(250 * var(--u)); }
.hw-ide { position: absolute; left: calc(9 * var(--u)); right: calc(9 * var(--u)); top: calc(36 * var(--u)); bottom: calc(62 * var(--u)); display: flex; flex-direction: column; overflow: hidden; background: #0f0d15; border: 1px solid rgba(178, 156, 219, .18); border-radius: calc(4 * var(--u)); box-shadow: inset 0 0 calc(20 * var(--u)) rgba(0, 0, 0, .45); }
.hw-ide-bar { display: flex; align-items: center; gap: calc(3 * var(--u)); height: calc(12 * var(--u)); padding: 0 calc(6 * var(--u)); background: #17141f; border-bottom: 1px solid rgba(178, 156, 219, .14); }
.hw-ide-bar i { width: calc(4 * var(--u)); height: calc(4 * var(--u)); border-radius: 50%; background: #5a5266; }
.hw-ide-bar i:nth-child(1) { background: #e0655a; } .hw-ide-bar i:nth-child(2) { background: #e2b34f; } .hw-ide-bar i:nth-child(3) { background: #6ac26e; }
.hw-ide-bar span { margin-left: calc(4 * var(--u)); font: calc(6 * var(--u))/1 var(--hw-mono); color: var(--hw-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw-ide-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.15fr 1fr 1.15fr; grid-template-rows: minmax(0, 1fr); }
.hw-ide-pane { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; border-right: 1px solid rgba(178, 156, 219, .12); }
.hw-ide-pane:last-child { border-right: 0; }
.hw-ide-tab { flex: none; height: calc(11 * var(--u)); padding: 0 calc(5 * var(--u)); display: flex; align-items: center; gap: calc(3 * var(--u)); font: 500 calc(5.5 * var(--u))/1 var(--hw-mono); letter-spacing: .04em; color: var(--hw-muted); background: #14111b; border-bottom: 1px solid rgba(178, 156, 219, .1); white-space: nowrap; overflow: hidden; }
.hw-ide-tab b { font-weight: 500; color: var(--hw-green); }
.hw-code { flex: 1; padding: calc(4 * var(--u)) calc(5 * var(--u)); display: flex; flex-direction: column; justify-content: flex-start; gap: calc(1.5 * var(--u)); font: calc(5.5 * var(--u))/1.35 var(--hw-mono); color: #cfc8dc; white-space: pre; overflow: hidden; }
.hw-code b { font-weight: 400; color: #c792ea; } .hw-code i { font-style: normal; color: #82aaff; } .hw-code em { font-style: normal; color: #f78c6c; }
.hw-mini { display: block; flex: 1; min-height: 0; width: 100%; padding: calc(3 * var(--u)); }
.hw-mini-wires path { fill: none; stroke: #9566e8; stroke-width: .9; opacity: .6; }
.hw-mini-nodes rect { fill: #1d1927; stroke: rgba(178, 156, 219, .35); stroke-width: .7; }
.hw-mini-nodes .hw-mini-chip { fill: #2a2140; stroke: #8b5cf6; }
.hw-mini-nodes .hw-mini-board { fill: #1a1a14; stroke: rgba(180, 140, 60, .5); }
.hw-packet--mini { stroke-width: 1.6; stroke-dasharray: 14 105; }
.hw-chat { flex: 1; padding: calc(4 * var(--u)) calc(5 * var(--u)); display: flex; flex-direction: column; justify-content: flex-start; gap: calc(4 * var(--u)); font: calc(5.5 * var(--u))/1.3 var(--hw-mono); color: #cfc8dc; overflow: hidden; }
.hw-msg { padding: calc(2.5 * var(--u)) calc(4 * var(--u)); border-radius: calc(3 * var(--u)); background: rgba(167, 139, 250, .1); border: 1px solid rgba(167, 139, 250, .18); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw-msg--user { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .08); color: var(--hw-text); }
.hw-msg--ok { color: var(--hw-green); border-color: rgba(106, 214, 164, .3); background: rgba(106, 214, 164, .08); }
.hw-msg--2 { opacity: 0; animation: hwMsg2 12s linear infinite; }
.hw-msg--3 { opacity: 0; animation: hwMsg3 12s linear infinite; }
.hw-msg--4 { opacity: 0; animation: hwMsg4 12s linear infinite; }
.hw-msg--5 { opacity: 0; animation: hwMsg5 12s linear infinite; }
.hw-msg--6 { opacity: 0; animation: hwMsg6 12s linear infinite; }
.hw-kbd { position: absolute; left: calc(9 * var(--u)); right: calc(9 * var(--u)); bottom: calc(10 * var(--u)); height: calc(44 * var(--u)); display: block; overflow: visible; }
.hw-kb-body { fill: #15121c; stroke: rgba(178, 156, 219, .2); stroke-width: .7; }
.hw-kb-key { fill: #2a2535; stroke: rgba(255, 255, 255, .07); stroke-width: .5; }
.hw-kb-hot { fill: #a78bfa; opacity: 0; }
.hw-kb-hot--1 { animation: hwType1 12s linear infinite; }
.hw-kb-hot--2 { animation: hwType2 12s linear infinite; }
.hw-kb-hot--3 { animation: hwType3 12s linear infinite; }
.hw-kb-hot--4 { animation: hwType4 12s linear infinite; }
.hw-kb-hot--5 { animation: hwType5 12s linear infinite; }
.hw-kb-hot--6 { animation: hwType6 12s linear infinite; }
.hw-kb-hot--7 { animation: hwType7 12s linear infinite; }
.hw-kb-hot--8 { animation: hwType8 12s linear infinite; }
.hw-kb-hot--9 { animation: hwType9 12s linear infinite; }
.hw-kb-hot--10 { animation: hwType10 12s linear infinite; }
.hw-kb-hot--11 { animation: hwType11 12s linear infinite; }
.hw-kb-hot--12 { animation: hwType12 12s linear infinite; }
.hw-kb-hot--13 { animation: hwType13 12s linear infinite; }
.hw-kb-hot--14 { animation: hwType14 12s linear infinite; }
.hw-kb-hot--15 { animation: hwType15 12s linear infinite; }
.hw-kb-hot--16 { animation: hwType16 12s linear infinite; }
.hw-kb-hot--17 { animation: hwType17 12s linear infinite; }
.hw-kb-hot--18 { animation: hwType18 12s linear infinite; }
.hw-kb-hot--19 { animation: hwType19 12s linear infinite; }
.hw-kb-hot--20 { animation: hwType20 12s linear infinite; }
.hw-kb-hot--21 { animation: hwType21 12s linear infinite; }
.hw-kb-hot--22 { animation: hwType22 12s linear infinite; }
.hw-kb-hot--23 { animation: hwType23 12s linear infinite; }
.hw-kb-hot--24 { animation: hwType24 12s linear infinite; }
.hw-mousepad { fill: #17141f; stroke: rgba(178, 156, 219, .14); stroke-width: .6; }
.hw-mouse { fill: #2a2535; stroke: rgba(178, 156, 219, .32); stroke-width: .7; }
.hw-mouse-split { fill: none; stroke: rgba(178, 156, 219, .32); stroke-width: .6; }
.hw-mouse-wheel { fill: #9566e8; }

/* Retained lab-memory diagrams also use this shared wire treatment. */
.wire-glow-pulse { animation: wireGlowPulse 4.8s ease-in-out infinite; }
@keyframes wireGlowPulse { 0%,100% { opacity:.62 } 50% { opacity:1 } }

/* ── Timeline (12 s): 0–22% coordinate · 23–72% capture · 73–100% ready ── */
@keyframes hwControl { 0%,1% { opacity:0; stroke-dashoffset:12 } 3% { opacity:1 } 17% { opacity:1; stroke-dashoffset:-100 } 19%,100% { opacity:0; stroke-dashoffset:-100 } }
@keyframes hwCapture { 0%,22% { opacity:0; stroke-dashoffset:12 } 25% { opacity:1 } 43% { opacity:1; stroke-dashoffset:-100 } 44% { opacity:0; stroke-dashoffset:-100 } 45% { opacity:0; stroke-dashoffset:12 } 48% { opacity:1 } 67% { opacity:1; stroke-dashoffset:-100 } 70%,100% { opacity:0; stroke-dashoffset:-100 } }
/* sweep eases in as it enters and keeps moving while it fades out past the right edge */
@keyframes hwSweep { 0%,23% { transform:translateX(-100%); opacity:0 } 26% { opacity:1 } 64% { opacity:1 } 67% { transform:translateX(257%) } 71%,100% { transform:translateX(289%); opacity:0 } }
/* 100% (fully drawn, dimmed to .3) and 0% (undrawn = .3 mask) render identically: no seam */
@keyframes hwReveal { 0%,23% { -webkit-mask-position:100% 0; mask-position:100% 0; opacity:1 } 67%,88% { -webkit-mask-position:0 0; mask-position:0 0; opacity:1 } 99%,100% { -webkit-mask-position:0 0; mask-position:0 0; opacity:.3 } }
@keyframes hwLed { 0%,20% { opacity:.45 } 25%,32%,41%,48%,57%,64%,75%,96% { opacity:1 } 36%,52%,68% { opacity:.4 } 99.5%,100% { opacity:.45 } }
/* status words cross-fade (out, then in) over ~0.25 s; decode + console dim with the traces, never blank */
@keyframes hwArmed { 0%,21% { opacity:1 } 23%,97% { opacity:0 } 99%,100% { opacity:1 } }
@keyframes hwTrigd { 0%,23% { opacity:0 } 25%,95% { opacity:1 } 97%,100% { opacity:0 } }
@keyframes hwDecode { 0%,58% { opacity:.3 } 63%,88% { opacity:1 } 99%,100% { opacity:.3 } }
@keyframes hwLine1 { 0%,16.5% { opacity:.3 } 18.5%,88% { opacity:1 } 99%,100% { opacity:.3 } }
@keyframes hwLine2 { 0%,19% { opacity:.3 } 21%,88% { opacity:1 } 99%,100% { opacity:.3 } }
@keyframes hwLine3 { 0%,21% { opacity:.3 } 23%,88% { opacity:1 } 99%,100% { opacity:.3 } }
@keyframes hwLine4 { 0%,64.5% { opacity:.3 } 66.5%,88% { opacity:1 } 99%,100% { opacity:.3 } }
@keyframes hwHalted { 0%,20% { opacity:1 } 22%,96% { opacity:0 } 98%,100% { opacity:1 } }
@keyframes hwRunning { 0%,22% { opacity:0 } 24%,94% { opacity:1 } 96%,100% { opacity:0 } }
@keyframes hwArmState { 0%,22% { opacity:1 } 22.5%,98.5% { opacity:0 } 99%,100% { opacity:1 } }
@keyframes hwCaptureState { 0%,22.5% { opacity:0 } 23%,72% { opacity:1 } 72.5%,100% { opacity:0 } }
@keyframes hwDeployState { 0%,72.5% { opacity:0 } 73%,98% { opacity:1 } 98.5%,100% { opacity:0 } }
@keyframes hwBeam { 0% { stroke-dashoffset:38 } 100% { stroke-dashoffset:-100 } }
@keyframes hwType1 { 0%,0.8% { opacity:0 } 1% { opacity:.85 } 2.2%,100% { opacity:0 } }
@keyframes hwType2 { 0%,4.3% { opacity:0 } 4.5% { opacity:.85 } 5.7%,100% { opacity:0 } }
@keyframes hwType3 { 0%,7.8% { opacity:0 } 8% { opacity:.85 } 9.2%,100% { opacity:0 } }
@keyframes hwType4 { 0%,11.3% { opacity:0 } 11.5% { opacity:.85 } 12.7%,100% { opacity:0 } }
@keyframes hwType5 { 0%,14.8% { opacity:0 } 15% { opacity:.85 } 16.2%,100% { opacity:0 } }
@keyframes hwType6 { 0%,18.3% { opacity:0 } 18.5% { opacity:.85 } 19.7%,100% { opacity:0 } }
@keyframes hwType7 { 0%,21.8% { opacity:0 } 22% { opacity:.85 } 23.2%,100% { opacity:0 } }
@keyframes hwType8 { 0%,25.3% { opacity:0 } 25.5% { opacity:.85 } 26.7%,100% { opacity:0 } }
@keyframes hwType9 { 0%,28.8% { opacity:0 } 29% { opacity:.85 } 30.2%,100% { opacity:0 } }
@keyframes hwType10 { 0%,32.3% { opacity:0 } 32.5% { opacity:.85 } 33.7%,100% { opacity:0 } }
@keyframes hwType11 { 0%,35.8% { opacity:0 } 36% { opacity:.85 } 37.2%,100% { opacity:0 } }
@keyframes hwType12 { 0%,39.3% { opacity:0 } 39.5% { opacity:.85 } 40.7%,100% { opacity:0 } }
@keyframes hwType13 { 0%,42.8% { opacity:0 } 43% { opacity:.85 } 44.2%,100% { opacity:0 } }
@keyframes hwType14 { 0%,46.3% { opacity:0 } 46.5% { opacity:.85 } 47.7%,100% { opacity:0 } }
@keyframes hwType15 { 0%,49.8% { opacity:0 } 50% { opacity:.85 } 51.2%,100% { opacity:0 } }
@keyframes hwType16 { 0%,53.3% { opacity:0 } 53.5% { opacity:.85 } 54.7%,100% { opacity:0 } }
@keyframes hwType17 { 0%,56.8% { opacity:0 } 57% { opacity:.85 } 58.2%,100% { opacity:0 } }
@keyframes hwType18 { 0%,60.3% { opacity:0 } 60.5% { opacity:.85 } 61.7%,100% { opacity:0 } }
@keyframes hwType19 { 0%,63.8% { opacity:0 } 64% { opacity:.85 } 65.2%,100% { opacity:0 } }
@keyframes hwType20 { 0%,67.3% { opacity:0 } 67.5% { opacity:.85 } 68.7%,100% { opacity:0 } }
@keyframes hwType21 { 0%,70.8% { opacity:0 } 71% { opacity:.85 } 72.2%,100% { opacity:0 } }
@keyframes hwType22 { 0%,74.3% { opacity:0 } 74.5% { opacity:.85 } 75.7%,100% { opacity:0 } }
@keyframes hwType23 { 0%,77.8% { opacity:0 } 78% { opacity:.85 } 79.2%,100% { opacity:0 } }
@keyframes hwType24 { 0%,81.3% { opacity:0 } 81.5% { opacity:.85 } 82.7%,100% { opacity:0 } }
@keyframes hwMsg2 { 0%,3% { opacity:0 } 4%,96% { opacity:1 } 99%,100% { opacity:0 } }
@keyframes hwMsg3 { 0%,23% { opacity:0 } 24%,96% { opacity:1 } 99%,100% { opacity:0 } }
@keyframes hwMsg4 { 0%,73% { opacity:0 } 74%,96% { opacity:1 } 99%,100% { opacity:0 } }
@keyframes hwMsg5 { 0%,63% { opacity:0 } 64%,96% { opacity:1 } 99%,100% { opacity:0 } }
@keyframes hwMsg6 { 0%,79% { opacity:0 } 80%,96% { opacity:1 } 99%,100% { opacity:0 } }

/* ── Light mode: chassis, screens, IDE and board all go light ── */
html.light-mode #power-optimization, html.light-mode #power-optimization-mobile { background: #f9f7fd !important; border-top: 1px solid #d2d2d7 !important; }
html.light-mode .hardware-lab { --hw-panel:#fff; --hw-panel-top:#f6f3fa; --hw-line:#d7cde5; --hw-muted:#746780; --hw-text:#35283f; --hw-purple:#7c4dc1; --hw-green:#218359; --hw-amber:#b45309; --hw-violet:#6d28d9; --hw-cyan:#0e7490; --hw-ctrl:#f1eef6; --hw-ctrl-line:#cfc6dc; --hw-ctrl-text:#5f5470; --hw-screen:#f5f5f7; --hw-screen-grid:rgba(0, 0, 0, .06); --hw-screen-axis:rgba(0, 0, 0, .16); --hw-screen-edge:#d2d2d7; }
html.light-mode .hw-wire { stroke: #8754c9; opacity: .6; }
html.light-mode .hw-packet { stroke: #5b21b6; }
html.light-mode .hw-node { box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 4px 16px rgba(0, 0, 0, .04); }
html.light-mode .hw-screen { box-shadow: inset 0 0 calc(20 * var(--u)) rgba(0, 0, 0, .05); }
html.light-mode .hw-readouts { color: #15803d; }
html.light-mode .hw-readouts b { text-shadow: none; }
html.light-mode .hw-mode { border-color: rgba(0, 0, 0, .14); }
html.light-mode .hw-mode--on { color: #15803d; border-color: rgba(21, 128, 61, .4); background: rgba(21, 128, 61, .08); }
html.light-mode .hw-trigd { color: #15803d; }
html.light-mode .hw-trig-mark { border-right-color: #b45309; }
html.light-mode .hw-sweep { background: linear-gradient(90deg, transparent, rgba(124, 77, 193, .1)); border-right-color: rgba(124, 77, 193, .7); }
html.light-mode .hw-decode span { background: rgba(124, 77, 193, .08); border-color: rgba(124, 77, 193, .25); color: #6d28d9; }
html.light-mode .hw-decode b, html.light-mode .hw-line em { color: #15803d; }
html.light-mode .hw-console { color: #1d1d1f; }
html.light-mode .hw-line i { color: #7c3aed; }
html.light-mode .hw-line b { color: #6e6e73; }
html.light-mode .hw-halted { color: #b45309; border-color: rgba(180, 83, 9, .4); background: rgba(180, 83, 9, .08); }
html.light-mode .hw-running { color: #15803d; border-color: rgba(21, 128, 61, .4); background: rgba(21, 128, 61, .08); }
html.light-mode .hw-board { background: #ececef; }
html.light-mode .hw-board .hw-board-dark { display: none; }
html.light-mode .hw-board .hw-board-light { display: block; }
html.light-mode .hw-knob { background: radial-gradient(circle at 35% 30%, #ffffff, #d9d3e3 72%); border-color: #b5abc5; box-shadow: 0 1px 3px rgba(0, 0, 0, .18), inset 0 1px 0 #fff; }
html.light-mode .hw-knob::after { background: #5b4a7a; }
html.light-mode .hw-key--on { color: #1a6f4b; border-color: rgba(33, 131, 89, .35); background: rgba(33, 131, 89, .08); }
html.light-mode .hw-jack { background: #fff; box-shadow: 0 0 0 1px #e2dcea; }
html.light-mode .hw-jack--lo { border-color: #8a8496; }
html.light-mode .hw-jack--bnc::before { background: #b8b1c2; }
html.light-mode .hw-pins { background: #ece8f2; }
html.light-mode .hw-pins i { background: #d3b56b; box-shadow: inset 0 0 0 1px #a5884a; }
html.light-mode .hw-chip { background: linear-gradient(135deg, #f7f5fb, #e9e5f1 55%, #dfd9ea); border-color: #c9c0d8; box-shadow: 0 6px 22px rgba(60, 30, 110, .12), inset 0 1px 0 #fff; }
html.light-mode .hw-chip-die { border-color: rgba(124, 77, 193, .32); background: linear-gradient(160deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 60%); }
html.light-mode .hw-chip-die::before { background: #8b5cf6; }
html.light-mode .hw-chip-die > strong { color: #1d1d1f; }
html.light-mode .hw-chip-pins i { background: linear-gradient(180deg, #b3aac3, #d6d0e0 50%, #b3aac3); }
html.light-mode .hw-chip-pins--t i { background: linear-gradient(90deg, #b3aac3, #d6d0e0 50%, #b3aac3); }
html.light-mode .hw-ai-status { color: #7c4dc1; }
html.light-mode .hw-ribbon-halo { opacity: .07; }
html.light-mode .hw-ribbon-band { stroke: #d8d2e2; }
html.light-mode .hw-ribbon-cond { stroke: #9d93b0; opacity: .6; }
html.light-mode .hw-ribbon-pin1 { stroke: #d14b40; opacity: .8; }
html.light-mode .hw-plug { fill: #f1eef6; stroke: #b5abc5; }
html.light-mode .hw-plug-grip { fill: #e2dcea; stroke: rgba(0, 0, 0, .06); }
html.light-mode .hw-socket { fill: #b3aac3; stroke: #a197b3; }
html.light-mode .hw-usb-halo { opacity: .07; }
html.light-mode .hw-usb-cable { stroke: #cdc6d9; }
html.light-mode .hw-usb-sheen { opacity: .55; }
html.light-mode .hw-usb-shell { fill: #dcd7e5; stroke: #a197b3; }
html.light-mode .hw-usb-port { fill: #9d93b0; }
html.light-mode .hw-beam--outer { stroke: #8b5cf6; opacity: .05; }
html.light-mode .hw-beam--mid { stroke: #a78bfa; opacity: .12; }
html.light-mode .hw-beam--core { stroke: #7c3aed; opacity: .22; }
html.light-mode .hw-kb-body { fill: #e9e6ef; stroke: #cfc6dc; }
html.light-mode .hw-kb-key { fill: #ffffff; stroke: #d2cbe0; }
html.light-mode .hw-kb-hot { fill: #7c3aed; }
html.light-mode .hw-mousepad { fill: #f1eef6; stroke: #d7cde5; }
html.light-mode .hw-mouse { fill: #ffffff; stroke: #b5abc5; }
html.light-mode .hw-mouse-split { stroke: #b5abc5; }
html.light-mode .hw-mouse-wheel { fill: #7c3aed; }
html.light-mode .hw-ide { background: #fbfbfd; border-color: #d2d2d7; box-shadow: inset 0 0 calc(20 * var(--u)) rgba(0, 0, 0, .04); }
html.light-mode .hw-ide-bar { background: #ececef; border-bottom-color: #d2d2d7; }
html.light-mode .hw-ide-bar span { color: #6e6e73; }
html.light-mode .hw-ide-pane { border-right-color: #e2e2e6; }
html.light-mode .hw-ide-tab { background: #f3f2f7; color: #6e6e73; border-bottom-color: #e2e2e6; }
html.light-mode .hw-ide-tab b { color: #15803d; }
html.light-mode .hw-code { color: #1d1d1f; }
html.light-mode .hw-code b { color: #7c3aed; }
html.light-mode .hw-code i { color: #1d4ed8; }
html.light-mode .hw-code em { color: #c2410c; }
html.light-mode .hw-mini-wires path { stroke: #8754c9; }
html.light-mode .hw-mini-nodes rect { fill: #f3f2f7; stroke: #c7c7cc; }
html.light-mode .hw-mini-nodes .hw-mini-chip { fill: #ede9f8; stroke: #7c3aed; }
html.light-mode .hw-mini-nodes .hw-mini-board { fill: #f1efe6; stroke: rgba(146, 110, 30, .6); }
html.light-mode .hw-chat { color: #1d1d1f; }
html.light-mode .hw-msg { background: rgba(124, 77, 193, .08); border-color: rgba(124, 77, 193, .2); }
html.light-mode .hw-msg--user { background: rgba(0, 0, 0, .04); border-color: rgba(0, 0, 0, .08); color: #1d1d1f; }
html.light-mode .hw-msg--ok { color: #15803d; border-color: rgba(21, 128, 61, .3); background: rgba(21, 128, 61, .07); }

/* ── Split centre unit (desktop): Agent card above a Hardware switch, same format (metallic "AssembleAI Agent" / "AssembleAI Hardware" label row, animation beneath); status row pinned to the bottom of the outer package ── */
.hw-ai--split { left: calc(482 * var(--u)); top: calc(357 * var(--u)); width: calc(156 * var(--u)); height: calc(176 * var(--u)); }
.hw-chip--split { display: flex; flex-direction: column; justify-content: space-between; padding: calc(11 * var(--u)) calc(11 * var(--u)) calc(9 * var(--u)); }
.hw-chip--split .hw-chip-pins--t { left: calc(36 * var(--u) - 1px); right: calc(36 * var(--u) - 1px); }
.hw-chip--split .hw-ai-status { flex: none; }
.hw-unit { position: relative; flex: none; height: calc(57 * var(--u)); display: flex; flex-direction: column; justify-content: space-between; padding: calc(5 * var(--u)) calc(6 * var(--u)) calc(4 * var(--u)); border: 1px solid transparent; overflow: hidden; }
.hw-unit-text { display: flex; align-items: baseline; justify-content: center; width: 100%; gap: calc(4 * var(--u)); }
/* label row: the Get Started metallic finish (white→silver ramp + travelling specular band on the shared 4 s glint clock). background-clip:text only paints inside the element box, and at line-height:1 that box is exactly 1em tall, so the descender of the "g" in Agent was cut off — the .3em padding extends the paint box and the matching negative margin keeps the row height/baseline unchanged */
.hw-unit-brand, .hw-unit-role { font-size: max(10px, calc(11 * var(--u))); line-height: 1; padding-block: .3em; margin-block: -.3em; white-space: nowrap; color: #fff; background-image: linear-gradient(115deg, transparent 42%, #fff 50%, transparent 58%), linear-gradient(to bottom, #fff 0%, #c9c9d2 100%); background-size: 250% 100%, 100% 100%; background-position: var(--glintX) 0, 0 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: headingGlint 4s linear 1.5s infinite; }
.hw-unit-brand { font-weight: 600; letter-spacing: -.035em; }
.hw-unit-role { font-weight: 500; letter-spacing: -.02em; }
/* Agent: purple rounded card that glows while it coordinates; voice-level meter beneath the label (dark rounded tray at a fixed height, soft-white bars that each bob on their own clock; the green halo and the 12 s height pulse were removed at owner request 2026-10-09) */
.hw-unit--agent { border-radius: calc(9 * var(--u)); border-color: rgba(167, 139, 250, .5); background: linear-gradient(180deg, #3b2a6b, #2a1d4f 45%, #1e1440); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 calc(14 * var(--u)) rgba(139, 92, 246, .14); animation: hwAgentGlow 12s linear infinite; }
.hw-voice { display: flex; align-items: center; justify-content: center; gap: calc(2 * var(--u)); width: 65%; height: calc(20 * var(--u)); margin-inline: auto; border-radius: calc(4 * var(--u)); background: rgba(8, 5, 18, .6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
.hw-voice i { display: block; flex: none; width: calc(2.2 * var(--u)); border-radius: calc(1.1 * var(--u)); background: #eeecf7; opacity: .92; transform-origin: 50% 50%; }
.hw-voice i:nth-child(1) { height: calc(9.2 * var(--u)); animation: hwVoice4 1.71s ease-in-out infinite -0.42s; }
.hw-voice i:nth-child(2) { height: calc(11.4 * var(--u)); animation: hwVoice2 1.81s ease-in-out infinite -1.84s; }
.hw-voice i:nth-child(3) { height: calc(10.0 * var(--u)); animation: hwVoice1 2.18s ease-in-out infinite -1.26s; }
.hw-voice i:nth-child(4) { height: calc(10.8 * var(--u)); animation: hwVoice2 1.70s ease-in-out infinite -2.72s; }
.hw-voice i:nth-child(5) { height: calc(10.1 * var(--u)); animation: hwVoice1 2.16s ease-in-out infinite -2.35s; }
.hw-voice i:nth-child(6) { height: calc(12.9 * var(--u)); animation: hwVoice4 2.06s ease-in-out infinite -2.69s; }
.hw-voice i:nth-child(7) { height: calc(10.5 * var(--u)); animation: hwVoice3 1.47s ease-in-out infinite -1.33s; }
.hw-voice i:nth-child(8) { height: calc(11.6 * var(--u)); animation: hwVoice1 1.82s ease-in-out infinite -0.94s; }
.hw-voice i:nth-child(9) { height: calc(10.9 * var(--u)); animation: hwVoice1 2.32s ease-in-out infinite -0.80s; }
.hw-voice i:nth-child(10) { height: calc(13.3 * var(--u)); animation: hwVoice2 1.49s ease-in-out infinite -2.19s; }
.hw-voice i:nth-child(11) { height: calc(10.9 * var(--u)); animation: hwVoice1 1.39s ease-in-out infinite -1.17s; }
.hw-voice i:nth-child(12) { height: calc(10.3 * var(--u)); animation: hwVoice1 1.98s ease-in-out infinite -0.27s; }
.hw-voice i:nth-child(13) { height: calc(12.3 * var(--u)); animation: hwVoice2 2.43s ease-in-out infinite -1.89s; }
.hw-voice i:nth-child(14) { height: calc(10.8 * var(--u)); animation: hwVoice1 1.79s ease-in-out infinite -2.38s; }
.hw-voice i:nth-child(15) { height: calc(9.8 * var(--u)); animation: hwVoice3 1.42s ease-in-out infinite -2.02s; }
.hw-voice i:nth-child(16) { height: calc(11.1 * var(--u)); animation: hwVoice2 2.03s ease-in-out infinite -0.74s; }
.hw-voice i:nth-child(17) { height: calc(8.8 * var(--u)); animation: hwVoice1 1.71s ease-in-out infinite -1.52s; }
/* Hardware: squared-off rack switch — top rail highlight, eight RJ45 ports, activity LEDs centred above each port blinking on independent, random-looking clocks once capture starts */
.hw-unit--switch { border-radius: calc(3 * var(--u)); border-color: #4a4159; background: linear-gradient(180deg, #2c2639, #1b1724 38%, #120f19); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(0, 0, 0, .55), inset 1px 0 0 rgba(255, 255, 255, .04), 0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, .55), 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, .45), 0 0 calc(14 * var(--u)) rgba(139, 92, 246, .14); }
.hw-unit--switch::before { content: ''; position: absolute; left: calc(7 * var(--u)); right: calc(7 * var(--u)); top: calc(2 * var(--u)); height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent); }
.hw-ports { display: flex; justify-content: space-between; align-items: flex-end; width: 100%; color: var(--hw-green); animation: hwPortsPhase 12s linear infinite; }
.hw-port-rj { position: relative; flex: none; width: calc(12 * var(--u)); height: calc(11 * var(--u)); border-radius: calc(1.5 * var(--u)) calc(1.5 * var(--u)) calc(2 * var(--u)) calc(2 * var(--u)); background: #0c0a12; border: 1px solid #4a4160; box-shadow: inset 0 calc(2 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, .6); }
.hw-port-rj::before { content: ''; position: absolute; left: 50%; bottom: -1px; width: calc(5 * var(--u)); height: calc(2.5 * var(--u)); transform: translateX(-50%); background: #0c0a12; border: 1px solid #4a4160; border-top: 0; border-radius: 0 0 calc(1 * var(--u)) calc(1 * var(--u)); }
.hw-port-rj::after { content: ''; position: absolute; top: calc(-4.5 * var(--u)); left: 50%; width: calc(2.5 * var(--u)); height: calc(2.5 * var(--u)); margin-left: calc(-1.25 * var(--u)); border-radius: 50%; background: currentColor; box-shadow: 0 0 calc(4 * var(--u)) currentColor; opacity: .22; }
.hw-port-rj:nth-child(1)::after { animation: hwLedB 2.3s linear infinite -0.01s; }
.hw-port-rj:nth-child(2)::after { animation: hwLedB 3.1s linear infinite -2.57s; }
.hw-port-rj:nth-child(3)::after { animation: hwLedA 2.7s linear infinite -2.11s; }
.hw-port-rj:nth-child(4)::after { animation: hwLedB 3.7s linear infinite -3.18s; }
.hw-port-rj:nth-child(5)::after { animation: hwLedC 2.1s linear infinite -1.01s; }
.hw-port-rj:nth-child(6)::after { animation: hwLedC 3.3s linear infinite -0.14s; }
.hw-port-rj:nth-child(7)::after { animation: hwLedB 2.9s linear infinite -0.22s; }
.hw-port-rj:nth-child(8)::after { animation: hwLedA 2.5s linear infinite -0.14s; }
@keyframes hwAgentGlow { 0%,22% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 calc(18 * var(--u)) rgba(139, 92, 246, .32) } 30%,72% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 calc(10 * var(--u)) rgba(139, 92, 246, .1) } 80%,98% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 calc(16 * var(--u)) rgba(106, 214, 164, .22) } }
@keyframes hwVoice1 { 0% { transform: scaleY(.25) } 20% { transform: scaleY(.9) } 40% { transform: scaleY(.35) } 60% { transform: scaleY(1) } 80% { transform: scaleY(.5) } 100% { transform: scaleY(.25) } }
@keyframes hwVoice2 { 0% { transform: scaleY(.6) } 25% { transform: scaleY(.18) } 50% { transform: scaleY(.85) } 75% { transform: scaleY(.4) } 100% { transform: scaleY(.6) } }
@keyframes hwVoice3 { 0% { transform: scaleY(.35) } 15% { transform: scaleY(.7) } 35% { transform: scaleY(.28) } 55% { transform: scaleY(.95) } 70% { transform: scaleY(.45) } 85% { transform: scaleY(.8) } 100% { transform: scaleY(.35) } }
@keyframes hwVoice4 { 0% { transform: scaleY(.8) } 30% { transform: scaleY(.3) } 50% { transform: scaleY(.62) } 70% { transform: scaleY(.15) } 100% { transform: scaleY(.8) } }
@keyframes hwPortsPhase { 0%,22% { color: rgba(106, 214, 164, .3) } 25%,72% { color: #6ad6a4 } 73%,98% { color: #8ee6bd } 99%,100% { color: rgba(106, 214, 164, .3) } }
@keyframes hwLedA { 0% { opacity: .22 } 6%,26% { opacity: 1 } 32%,100% { opacity: .22 } }
@keyframes hwLedB { 0% { opacity: .22 } 10%,24% { opacity: 1 } 30%,52% { opacity: .22 } 58%,72% { opacity: 1 } 78%,100% { opacity: .22 } }
@keyframes hwLedC { 0%,40% { opacity: .22 } 46%,70% { opacity: 1 } 76%,100% { opacity: .22 } }
html.light-mode .hw-unit-brand, html.light-mode .hw-unit-role { background-image: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .65) 50%, transparent 58%), linear-gradient(to bottom, #17171b 0%, #51515d 100%); }
html.light-mode .hw-unit--agent { border-color: rgba(124, 77, 193, .45); background: linear-gradient(180deg, #ece4ff, #ddd1fa 45%, #d2c4f4); box-shadow: inset 0 1px 0 #fff, 0 0 14px rgba(139, 92, 246, .14); }
html.light-mode .hw-voice { background: rgba(60, 30, 110, .16); }
html.light-mode .hw-voice i { background: #4a3a8a; }
html.light-mode .hw-unit--switch { border-color: #a99fba; background: linear-gradient(180deg, #ffffff, #ece8f3 40%, #ddd8e6); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(60, 30, 110, .18), 0 3px 6px rgba(60, 30, 110, .18), 0 8px 18px rgba(60, 30, 110, .14); }
html.light-mode .hw-unit--switch::before { background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .08), transparent); }
html.light-mode .hw-port-rj, html.light-mode .hw-port-rj::before { background: #cfc8da; border-color: #9d93b0; box-shadow: inset 0 2px 2px rgba(0, 0, 0, .12); }
html.light-mode .hw-ports { color: #1f8a5a; }

@media (min-width:1025px) {
    .hardware-section .hardware-heading p { font-size:clamp(13px,1.13vw,16px); white-space:nowrap; padding:0; letter-spacing:-.01em; }
    .hw-mode, .hw-key, .hw-tag, .hw-target, .hw-jack span { font-size:max(6px, calc(6.5 * var(--u))); }
    .hw-ide-tab, .hw-code, .hw-chat, .hw-ide-bar span { font-size:max(5.5px, calc(5.5 * var(--u))); }
    .hw-osd, .hw-lane-labels, .hw-decode { font-size:max(6.5px, calc(7 * var(--u))); }
    .hw-console, .hw-dut-foot { font-size:max(7px, calc(7.5 * var(--u))); }
}
@media (min-width:1025px) and (max-width:1119px) {
    .hw-chat { padding-inline:calc(3 * var(--u)); }
    .hw-msg { padding-inline:calc(2.5 * var(--u)); }
}

/* ── Mobile: 2×2 instruments → four lanes → chip (centred) → machine (below left, ribbon) + DUT (below right) ── */
@media (max-width:1024px) {
    .hardware-section { padding:36px 0 40px; scroll-margin-top:75px; }
    .hardware-section > .container { max-width:680px; }
    .hardware-section .hardware-heading { margin-bottom:25px; }
    .hardware-section .hardware-heading h2 { max-width:460px; margin-inline:auto; }
    .hardware-section .hardware-heading p { padding:0; max-width:490px; font-size:14px; line-height:1.65; }
    #power-optimization-mobile .hardware-heading p { display:none; }
    .hw-stage { --u:min(.25cqw, 1.2px); width:calc(400 * var(--u)); height:calc(656 * var(--u)); margin-inline:auto; }
    .hw-wires--desktop { display:none; }
    .hw-wires--mobile { display:block; }
    .hw-header { height:calc(26 * var(--u)); padding-inline:calc(9 * var(--u)); gap:calc(5 * var(--u)); font-size:max(10px, calc(12 * var(--u))); }
    .hw-port { display:none; }
    .hw-inst .hw-port--out, .hw-dut-ports .hw-port { display:block; }
    .hw-inst .hw-port--out { top:50%; bottom:auto; margin:calc(-3 * var(--u)) 0 0 0; }
    .hw-smu .hw-port--out, .hw-logic .hw-port--out { left:auto; right:calc(-3 * var(--u) - 1px); }
    .hw-scope .hw-port--out, .hw-debug .hw-port--out { left:calc(-3 * var(--u) - 1px); }
    .hw-inst { width:calc(176 * var(--u)); }
    .hw-inst { height:calc(118 * var(--u)); }
    .hw-inst { transform:scale(.92); }
    .hw-smu, .hw-logic { left:calc(-1.04 * var(--u)); }
    .hw-scope, .hw-debug { left:calc(225.04 * var(--u)); }
    .hw-smu, .hw-scope { top:calc(-4.7 * var(--u)); }
    .hw-logic, .hw-debug { top:calc(115.3 * var(--u)); }
    .hw-machine { left:calc(6 * var(--u)); top:calc(438 * var(--u)); width:calc(188 * var(--u)); height:calc(214 * var(--u)); }
    .hw-ide { top:calc(32 * var(--u)); left:calc(8 * var(--u)); right:auto; bottom:auto; width:calc(280 * var(--u)); height:calc(226 * var(--u)); transform:scale(.6143); transform-origin:0 0; }
    .hw-kbd { left:calc(8 * var(--u)); right:calc(8 * var(--u)); bottom:calc(7 * var(--u)); height:calc(30 * var(--u)); }
    .hw-ide-bar { height:calc(11 * var(--u)); }
    .hw-ide-tab { height:calc(11 * var(--u)); font-size:max(6px, calc(6 * var(--u))); }
    .hw-code, .hw-chat { font-size:max(6px, calc(6 * var(--u))); }
    .hw-chat { gap:calc(2 * var(--u)); padding-block:calc(3 * var(--u)); }
    .hw-msg { padding-block:calc(2 * var(--u)); }
    .hw-code { padding-block:calc(2 * var(--u)); line-height:1.3; }
    .hw-ide-bar span { font-size:max(6px, calc(6 * var(--u))); }
    .hw-face { inset:calc(26 * var(--u)) 0 0; padding:calc(8 * var(--u)); gap:0; }
    .hw-panel { display:none; }
    .hw-readouts { height:calc(27 * var(--u)); gap:calc(11 * var(--u)); padding:calc(4 * var(--u)) calc(8 * var(--u)) 0; font-size:max(7.5px, calc(9 * var(--u))); }
    .hw-readouts b { font-size:max(14px, calc(17 * var(--u))); }
    .hw-modes { height:calc(12 * var(--u)); gap:calc(4 * var(--u)); padding-inline:calc(7 * var(--u)); }
    .hw-mode { font-size:max(6.5px, calc(7.5 * var(--u))); padding-inline:calc(4 * var(--u)); }
    .hw-mode:nth-child(n+3) { display:none; }
    .hw-osd { height:calc(14 * var(--u)); font-size:max(7px, calc(8 * var(--u))); padding-inline:calc(5 * var(--u)); gap:calc(4 * var(--u)); }
    .hw-osd--bottom > span:nth-child(2) { display:none; }
    .hw-lane-labels { width:calc(27 * var(--u)); padding-left:calc(5 * var(--u)); font-size:max(7px, calc(8 * var(--u))); }
    .hw-lanes { padding-top:calc(4 * var(--u)); }
    .hw-lanes .hw-plot { padding:0 calc(5 * var(--u)) 0 calc(27 * var(--u)); }
    .hw-decode { height:calc(19 * var(--u)); gap:calc(3 * var(--u)); font-size:max(6.5px, calc(7.5 * var(--u))); padding-inline:calc(5 * var(--u)); }
    .hw-screen--smu .hw-sweep { top:calc(41 * var(--u)); }
    .hw-screen--scope .hw-sweep { top:calc(14 * var(--u)); bottom:calc(14 * var(--u)); }
    .hw-screen--logic .hw-sweep { top:calc(4 * var(--u)); bottom:calc(19 * var(--u)); }
    .hw-console { font-size:max(7.5px, calc(8.5 * var(--u))); line-height:1.5; padding:calc(3 * var(--u)) calc(7 * var(--u)); gap:0; }
    .hw-target { width:calc(42 * var(--u)); height:calc(12 * var(--u)); font-size:max(6.5px, calc(7 * var(--u))); top:calc(4 * var(--u)); right:calc(5 * var(--u)); }
    .hw-ai { left:calc(135 * var(--u)); top:calc(268 * var(--u)); width:calc(130 * var(--u)); height:calc(130 * var(--u)); }
    .hw-chip-pins--t { left:calc(62 * var(--u) - 1px); right:auto; width:calc(6 * var(--u)); }
    .hw-chip-pins--t i:nth-child(n+2), .hw-chip-pins--r i:nth-child(2), .hw-dut-ports .hw-port:nth-child(2) { display:none; }
    .hw-chip-pins--r { top:calc(62 * var(--u) - 1px); bottom:auto; height:calc(6 * var(--u)); }
    .hw-chip-die > strong { font-size:max(13px, calc(17 * var(--u))); }
    .hw-ai-status { font-size:max(7px, calc(8 * var(--u))); }
    /* split centre unit on the phone stage: 156×164 package centred on the old chip centre (200,333); single top pin stays on the bus at x=200 */
    .hw-ai--split { left:calc(122 * var(--u)); top:calc(251 * var(--u)); width:calc(156 * var(--u)); height:calc(164 * var(--u)); }
    .hw-chip--split { padding:calc(9 * var(--u)) calc(9 * var(--u)) calc(8 * var(--u)); }
    .hw-chip--split .hw-chip-pins--t { left:calc(75 * var(--u) - 1px); right:auto; }
    .hw-unit { height:calc(55 * var(--u)); padding:calc(4 * var(--u)) calc(5 * var(--u)) calc(3 * var(--u)); }
    .hw-unit-brand, .hw-unit-role { font-size:max(9px, calc(11.5 * var(--u))); }
    .hw-unit-text { gap:calc(3.5 * var(--u)); }
    .hw-voice { height:calc(18 * var(--u)); }
    .hw-port-rj { width:calc(11 * var(--u)); height:calc(10 * var(--u)); }
    .hw-bled--rf { display:none; }
    .hw-dut { left:calc(206 * var(--u)); top:calc(438 * var(--u)); width:calc(188 * var(--u)); height:calc(214 * var(--u)); }
    .hw-dut .hw-header { padding-inline:calc(8 * var(--u)); }
    .hw-board { inset:calc(26 * var(--u)) calc(4 * var(--u)) calc(18 * var(--u)); }
    .hw-dut-foot { font-size:max(6.5px, calc(7.5 * var(--u))); left:calc(7 * var(--u)); right:calc(7 * var(--u)); bottom:calc(5 * var(--u)); }
    .hw-dut-ports { flex-direction:row; left:calc(91 * var(--u) - 1px); top:calc(-3 * var(--u) - 1px); width:calc(6 * var(--u)); height:calc(6 * var(--u)); }
}

@media (max-width:359px) {
    .hw-osd { font-size:6px; letter-spacing:0; gap:3px; }
    .hw-trig-state { min-width:22px; }
    .hw-console { font-size:6.5px; }
    .hw-target { font-size:6px; letter-spacing:.05em; }
    .hw-decode { font-size:6px; gap:2px; }
    .hw-msg--2 { display:none; }
    .hw-code span:nth-child(n+9) { display:none; }
}

/* ── Static fallbacks: show the finished capture ── */
@media (prefers-reduced-motion:reduce) {
    .hardware-lab *, .hardware-lab *::before, .hardware-lab *::after, .wire-glow-pulse { animation:none !important; }
    .hw-packet, .hw-sweep, .hw-state--arm, .hw-state--capture, .hw-armed, .hw-halted, .hw-beam, html.light-mode .hw-beam, .hw-kb-hot { opacity:0; }
    .hw-state--deploy, .hw-trigd, .hw-running, .hw-line, .hw-decode, .hw-msg { opacity:1; }
    .hw-drops { display:none; }
}
@media print {
    .hw-packet, .hw-sweep, .hw-state--arm, .hw-state--capture, .hw-armed, .hw-halted, .hw-beam, html.light-mode .hw-beam, .hw-kb-hot { opacity:0; }
    .hw-state--deploy, .hw-trigd, .hw-running, .hw-line, .hw-decode, .hw-msg { opacity:1; }
    .hw-drops { display:none; }
}