.hardware-demo--keychain{width:min(520px,100%);max-width:100%}.hardware-demo--keychain .hardware-demo-frame{background:var(--surface);padding:clamp(12px,2vw,18px)}.keychain-demo{display:flex;flex-direction:column;gap:var(--space-8)}.keychain-stage{display:flex;flex-direction:column;gap:var(--space-6);padding:var(--space-8);border:1px solid var(--rule-light);background:var(--bg)}.keychain-stage-label{color:var(--ink-mute);font-size:10px;letter-spacing:.08em;text-transform:uppercase}.keychain-led-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-5)}.keychain-led-cell{display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}.keychain-led{display:block;width:28px;height:28px;border-radius:50%;border:1px solid var(--rule);background:#bda38347;background:color-mix(in oklch,var(--stone) 28%,transparent);box-shadow:inset 0 0 0 1px #faf6ee8c;box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--bg) 55%,transparent);transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}.keychain-led.is-on{background:var(--brand-light);border-color:var(--brand);box-shadow:0 0 0 1px color-mix(in oklch,var(--brand-light) 35%,transparent),inset 0 0 0 1px color-mix(in oklch,var(--bone) 35%,transparent)}.keychain-led-tag{color:var(--ink-mute);font-size:10px;letter-spacing:.08em;text-transform:uppercase}.keychain-path{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:var(--space-4)}.keychain-path-arrow{display:inline-flex;align-items:center;justify-content:center;color:var(--ink-mute);font-size:12px;line-height:1;padding:0 var(--space-1)}.keychain-chip{display:flex;flex-direction:column;justify-content:flex-start;gap:var(--space-2);min-width:0;padding:var(--space-5) var(--space-6);border:1px solid var(--rule-light);background:#faf6eeb3;background:color-mix(in oklch,var(--bg) 70%,transparent);transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}.keychain-chip.is-armed{border-color:var(--rule)}.keychain-chip.is-active{border-color:var(--brand-light);background:#f0efe6;background:color-mix(in oklch,var(--brand-light) 12%,var(--surface))}.keychain-chip-role{color:var(--ink);font-size:13px;line-height:1.2;letter-spacing:-.01em}.keychain-chip-part{color:var(--ink-mute);font-size:10px;letter-spacing:.06em;text-transform:uppercase}.keychain-chip-live{margin-top:var(--space-1);color:var(--brand);font-size:11px;letter-spacing:.04em;text-transform:uppercase;font-variant-numeric:tabular-nums;font-family:var(--font-mono)}.keychain-chip:not(.is-armed) .keychain-chip-live{color:var(--ink-mute)}.keychain-chip .keychain-chip-explain{margin:var(--space-2) 0 0;max-width:none;color:var(--ink-mute);font-family:var(--font-body);font-size:11px;line-height:1.4;letter-spacing:0;text-transform:none;min-height:2.8em}.keychain-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-6);padding-top:var(--space-7);border-top:1px solid var(--rule-light)}.keychain-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-5) var(--space-7);min-width:0}.keychain-status{color:var(--brand);font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;font-family:var(--font-mono)}.keychain-loop-meter{display:inline-flex;align-items:center;gap:3px}.keychain-loop-tick{display:block;width:8px;height:12px;border-radius:1px;background:#bda3834d;background:color-mix(in oklch,var(--stone) 30%,transparent);transition:background var(--dur-fast) var(--ease)}.keychain-loop-tick.is-on{background:var(--brand-light)}.keychain-loop-readout{color:var(--ink-mute);font-size:11px;letter-spacing:.04em;font-variant-numeric:tabular-nums;font-family:var(--font-mono)}.keychain-press{appearance:none;min-height:44px;min-width:88px;padding:var(--space-4) var(--space-7);border:1px solid var(--rule);background:var(--bg);color:var(--ink);font:inherit;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;touch-action:manipulation;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}.keychain-press:active:not(:disabled){transform:translateY(1px)}.keychain-press:disabled{color:var(--ink-faint);border-color:var(--rule-light);cursor:not-allowed;opacity:.7}.keychain-press:focus-visible{outline:2px solid var(--accent-blue);outline-offset:2px}@media(hover:hover)and (pointer:fine){.keychain-press:hover:not(:disabled){background:var(--sand);border-color:var(--rule);color:var(--ink)}}@media(max-width:560px){.keychain-led{width:24px;height:24px}.keychain-path{grid-template-columns:1fr;gap:var(--space-3)}.keychain-path-arrow{justify-content:center;padding:0;width:100%;font-size:14px;transform:rotate(90deg)}.keychain-chip{display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:var(--space-6);row-gap:var(--space-1)}.keychain-chip-role{grid-column:1;grid-row:1}.keychain-chip-live{grid-column:2;grid-row:1;margin-top:0;text-align:right;justify-self:end}.keychain-chip-part{grid-column:1;grid-row:2}.keychain-chip .keychain-chip-explain{grid-column:1 / -1;grid-row:3;min-height:0}.keychain-controls{align-items:stretch}.keychain-press{width:100%}}@media(max-width:900px){.writeup-section .hardware-demo--keychain{grid-column:1}}