/* VRAMpage MD — workshop interface, no CRT filters or decorative scanlines. */
:root {
  color-scheme: light;
  --paper: #dedbd2;
  --surface: #f4f2eb;
  --surface-2: #e9e6dd;
  --ink: #2b302e;
  --muted: #686b65;
  --rule: #a9aaa1;
  --accent: #b84c2f;
  --dark: #20272a;
  --dark-rule: #647071;
}
* { box-sizing: border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:15px/1.45 Arial, Helvetica, sans-serif; }
button, input, label { font:inherit; }
button { cursor:pointer; border:1px solid #888e89; border-radius:2px; background:#f9f8f3; color:var(--ink); padding:9px 12px; }
button:hover:not(:disabled) { background:#ebe6da; border-color:#434a47; }
button:active:not(:disabled) { background:#d4d0c7; }
button:disabled { opacity:.45; cursor:not-allowed; }
button:focus-visible, label:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible, summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
a { color:#9c402b; }
p { margin:0; }
.shell { width:min(1420px, calc(100% - 44px)); margin:auto; padding:22px 0 30px; }
.masthead { display:flex; align-items:end; justify-content:space-between; gap:20px; border-bottom:2px solid var(--ink); padding-bottom:15px; margin-bottom:20px; }
.brand { display:flex; align-items:baseline; gap:14px; }
h1 { margin:0; font:bold clamp(28px,3vw,38px)/1.08 Arial,Helvetica,sans-serif; letter-spacing:-1.5px; }
h1 span { color:var(--accent); }
.version { font:700 13px ui-monospace,SFMono-Regular,Consolas,monospace; color:var(--muted); white-space:nowrap; }
.subtitle { margin:8px 0 0; color:var(--muted); font-size:13px; }
.machine-status { display:flex; align-items:center; gap:10px; font:700 11px ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.03em; white-space:nowrap; padding-bottom:2px; }
.led { width:9px; height:9px; flex:none; border-radius:50%; background:#797c74; border:1px solid #454b45; }
.led.on { background:#639b51; border-color:#3f6d31; }
.main-grid { display:grid; grid-template-columns:minmax(0,1.57fr) minmax(335px,.86fr); align-items:start; gap:18px; }
.screen-section, .bender-panel, .log-block, .notes-block { background:var(--surface); border:1px solid var(--rule); min-width:0; }
.section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:13px 16px 11px; border-bottom:1px solid var(--rule); }
.section-heading h2 { font-size:15px; font-weight:800; line-height:1.2; margin:0; letter-spacing:.01em; }
.section-heading h2 span { color:var(--rule); font-weight:400; }
.section-heading > span { font:11px ui-monospace,SFMono-Regular,Consolas,monospace; color:var(--muted); text-align:right; }
.screen-well { padding:16px; background:#d8d6ce; }
.screen-frame { position:relative; display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:10/7; overflow:hidden; background:#050708; border:9px solid var(--dark); }
#screen { display:block; width:100%; height:100%; aspect-ratio:10/7; object-fit:contain; image-rendering:pixelated; image-rendering:crisp-edges; }
.screen-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; text-align:center; padding:24px; background:#090e10; color:#b7c2bc; }
.screen-placeholder[hidden] { display:none; }
.screen-placeholder strong { font:700 13px ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.07em; color:#e4e6de; }
.screen-placeholder p { font-size:12px; line-height:1.5; max-width:330px; }
.screen-info { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:9px 16px; color:#505956; background:var(--surface-2); border-block:1px solid var(--rule); font:11px ui-monospace,SFMono-Regular,Consolas,monospace; }
.toolbar { padding:14px 15px; display:flex; flex-wrap:wrap; gap:8px; }
.toolbar button, .load-btn { flex:1; min-width:88px; min-height:40px; text-align:center; font-size:12px; font-weight:700; }
.load-btn { display:flex; align-items:center; justify-content:center; cursor:pointer; border:1px solid #8f3c26; background:var(--accent); color:white; border-radius:2px; padding:9px 13px; }
.load-btn:hover { background:#9c422a; }
.load-btn:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
#romFile, #circuitConfigFile, #compareFileA, #compareFileB { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.instructions { border-top:1px solid var(--rule); background:var(--surface-2); padding:11px 16px 12px; }
.instructions p { font-size:12px; line-height:1.7; color:#555b57; }
.instructions strong { color:var(--ink); font:700 10px ui-monospace,SFMono-Regular,Consolas,monospace; margin-right:9px; }
.bender-panel .explain { padding:14px 16px 12px; color:#4d5550; font-size:13px; }
.chip-box { margin:0 16px 13px; background:#293638; border:1px solid #182022; color:#eee; padding:14px; }
.board-label { margin:0 0 11px; color:#bfc8c3; font:10px ui-monospace,SFMono-Regular,Consolas,monospace; }
.pin-grid { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:5px; }
.pin { font:700 11px ui-monospace,SFMono-Regular,Consolas,monospace; color:#ebede8; background:#394a4c; border:1px solid #788887; padding:10px 0; min-width:0; border-radius:1px; }
.pin:hover:not(:disabled), .pin.selected { background:#677673; color:#fff; }
.pin.connected { background:#f2ae56; border-color:#ffc976; color:#272422; }
.chip-middle { padding:18px 6px; border-inline:1px solid #4f5d5f; margin:6px 8px; display:flex; flex-direction:column; gap:3px; align-items:center; }
.chip-middle strong { font:700 24px Arial,Helvetica,sans-serif; letter-spacing:.12em; color:#ebeee8; }
.chip-middle span { font:10px ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.1em; color:#9cacaa; }
.chip-foot { border-top:1px solid #526165; padding-top:9px; font-size:11px; color:#bac5bf; }
.patch-status { display:flex; justify-content:space-between; gap:8px; align-items:baseline; border-block:1px solid var(--rule); background:var(--surface-2); padding:11px 16px; }
.patch-status span { font:10px ui-monospace,SFMono-Regular,Consolas,monospace; color:var(--muted); }
.patch-status strong { font:700 12px ui-monospace,SFMono-Regular,Consolas,monospace; color:#8d3d29; text-align:right; }
.presets-head { display:flex; justify-content:space-between; align-items:center; padding:14px 16px 10px; gap:8px; }
h3 { font-size:13px; margin:0; }
.presets-head button, .log-block .section-heading button { font-size:11px; padding:5px 8px; }
.preset-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; padding:0 16px; }
.preset { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:51px; padding:7px 2px; font:12px ui-monospace,SFMono-Regular,Consolas,monospace; }
.preset kbd { font-size:10px; color:#74766e; }
.preset.active { background:#f2ae56; color:#222; border-color:#985c2c; }
.preset.active kbd { color:#4c3726; }
.metrics { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:14px 16px 0; }
.metrics > div { border-top:1px solid var(--rule); padding:10px 2px 0; }
.metrics span { display:block; font-size:11px; color:var(--muted); }
.metrics strong { display:block; padding-top:4px; font:700 21px ui-monospace,SFMono-Regular,Consolas,monospace; }
.notice { margin:14px 16px 16px; padding:10px 12px; border-left:3px solid #a3a29a; background:var(--surface-2); color:#555953; font-size:11px; line-height:1.55; }
.notice strong { color:var(--ink); }
.bottom-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:18px; }
.psg-panel > p { padding:11px 16px 0; color:#535954; font-size:12px; }
.psg-panel > .small-note { color:#6b7069; font-size:11px; padding-bottom:14px; }
.fm-panel > p { padding:11px 16px 0; color:#535954; font-size:12px; }
.fm-panel > .small-note { color:#6b7069; font-size:11px; padding-bottom:14px; }
.psg-controls { grid-template-columns:repeat(2,minmax(0,1fr)); padding-top:10px; }
.psg-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
.logic-panel { margin-top:11px; background:var(--surface); border:1px solid var(--rule); min-width:0; }
.logic-panel summary { cursor:pointer; list-style:none; user-select:none; }
.logic-panel summary::-webkit-details-marker { display:none; }
.logic-panel summary::after { content:'+'; color:var(--muted); font:20px/1 ui-monospace,monospace; margin-left:7px; }
.logic-panel[open] summary::after { content:'−'; }
.logic-intro { padding:10px 12px 0; color:#535954; font-size:12px; }
.logic-controls { display:grid; grid-template-columns:repeat(4,minmax(100px,1fr)); gap:8px; padding:11px 12px 8px; }
.logic-controls label { display:flex; flex-direction:column; gap:4px; color:var(--muted); font-size:11px; }
.logic-controls select { min-width:0; width:100%; padding:7px 8px; border:1px solid #888e89; border-radius:2px; background:var(--surface); color:var(--ink); font:12px ui-monospace,SFMono-Regular,Consolas,monospace; }
.logic-actions { display:flex; flex-wrap:wrap; gap:7px; padding:0 12px 9px; }
.logic-actions button { font-size:11px; padding:7px 9px; }
.logic-status { margin:0 12px 9px; color:var(--muted); font:11px ui-monospace,SFMono-Regular,Consolas,monospace; }
.logic-metrics { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border-block:1px solid var(--rule); background:var(--surface-2); }
.logic-metrics > div { min-width:0; padding:8px 10px; border-right:1px solid var(--rule); }
.logic-metrics > div:last-child { border-right:0; }
.logic-metrics span { display:block; color:var(--muted); font-size:10px; }
.logic-metrics strong { display:block; padding-top:2px; overflow-wrap:anywhere; font:700 13px ui-monospace,SFMono-Regular,Consolas,monospace; }
.logic-note { margin:9px 12px 12px; padding:8px 10px; border-left:3px solid #a3a29a; background:var(--surface-2); color:#555953; font-size:10px; line-height:1.55; }
.logic-note strong { color:var(--ink); }
#experimentLog { margin:13px 16px 16px; padding:0 0 0 19px; min-height:90px; max-height:170px; overflow:auto; color:#50564f; font:11px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace; }
#experimentLog li { padding:2px 0; }
.notes-block > p { padding:11px 16px 0; color:#535954; font-size:12px; }
.notes-block > p:last-child { padding-bottom:16px; }
.notes-block .small-note { color:#6b7069; font-size:11px; }
footer { display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; padding-top:15px; font:11px ui-monospace,SFMono-Regular,Consolas,monospace; color:#686b63; }
/* Fullscreen belongs to the video container, never the raw canvas. Keep a strict
   320 x 224 drawing buffer, with CSS scaling and letterboxing only. */
#displayViewport:fullscreen { box-sizing:border-box; width:100vw; height:100vh; max-width:none; max-height:none; padding:0; margin:0; border:0; border-radius:0; aspect-ratio:auto; display:flex; justify-content:center; align-items:center; overflow:hidden; background:#000; }
#displayViewport:fullscreen #screen { box-sizing:border-box; flex:0 0 auto; display:block; width:min(100vw, calc(100vh * 10 / 7)); height:auto; max-width:100vw; max-height:100vh; aspect-ratio:10/7; object-fit:contain; }
#displayViewport:fullscreen .screen-placeholder { inset:0; background:#090e10; }
@media (max-width:1120px) { .main-grid { grid-template-columns:1fr; } .screen-well { max-width:920px; margin:auto; width:100%; } }
@media (max-width:700px) {
  .shell { width:calc(100% - 20px); padding-top:12px; }
  .masthead { align-items:start; margin-bottom:12px; }
  .machine-status { font-size:9px; padding-top:4px; }
  .brand { gap:8px; flex-wrap:wrap; }
  h1 { font-size:26px; }
  .subtitle { font-size:12px; margin-top:5px; }
  .section-heading { padding:11px 12px; }
  .section-heading > span { font-size:9px; }
  .screen-well { padding:7px; }
  .screen-frame { border-width:4px; }
  .toolbar { padding:10px; gap:6px; }
  .toolbar button, .load-btn { min-width:84px; flex:1 1 27%; }
  .screen-info { padding:8px 12px; }
  .instructions { padding:10px 12px; }
  .instructions p { font-size:11px; }
  .bottom-grid { grid-template-columns:1fr; gap:12px; margin-top:12px; }
  .logic-controls { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .logic-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .logic-metrics > div { border-bottom:1px solid var(--rule); }
  .logic-metrics > .cpu-state { grid-column:1/-1; border-bottom:0; }
  .chip-box { margin-inline:10px; padding:9px; }
  .bender-panel .explain { padding-inline:12px; }
  .presets-head { padding-inline:12px; }
  .preset-grid { padding-inline:12px; }
  .pin-grid { gap:3px; }
  .pin { font-size:10px; padding:9px 0; }
  .patch-status { padding-inline:12px; }
  .notice { margin-inline:12px; }
}

/* v0.1.2 compact workbench. Native VDP pixels are NEVER striped or filtered.
   Reduced player size and collapsible diagnostics keep the important controls
   visible without requiring a very tall browser window. */
.shell { width:min(1060px, calc(100% - 28px)); padding:11px 0 18px; }
.masthead { padding-bottom:9px; margin-bottom:11px; }
h1 { font-size:28px; letter-spacing:-.8px; }
.subtitle { margin-top:3px; font-size:11px; }
.main-grid { grid-template-columns:minmax(0,1.64fr) minmax(310px,.93fr); gap:11px; }
.section-heading { padding:9px 12px 8px; }
.screen-well { display:flex; justify-content:center; padding:9px 10px; }
/* Budget the picture after measuring the real heading, controls and help text.
   Include the border outside the 10:7 canvas so the picture never stretches. */
.screen-frame {
  --display-border:4px;
  width:min(100%, calc((var(--window-display-height, 45dvh) - 2 * var(--display-border)) * 10 / 7 + 2 * var(--display-border)));
  max-width:100%; flex:none; border-width:var(--display-border); aspect-ratio:auto;
}
#screen { height:auto; flex:none; }
.screen-info { padding:6px 10px; font-size:10px; }
#romName { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
#fpsIndicator { flex:none; }
.toolbar { padding:9px 10px; gap:5px; }
.toolbar button,.load-btn { min-height:32px; min-width:70px; padding:6px 7px; font-size:11px; }
.instructions { padding:6px 10px; }
.instructions p { font-size:11px; line-height:1.5; }
.help-divider { margin:0 8px; color:var(--rule); }
.fault-hint { color:#8e391f!important; margin-top:4px; }
.fault-hint[hidden] { display:none!important; }
.bender-panel .explain { padding:8px 12px; font-size:12px; }
.chip-box { margin:0 11px 8px; padding:10px; }
.board-label { margin-bottom:7px; }
.pin { padding:8px 0; }
.chip-middle { margin:4px 7px; padding:10px 5px; }
.chip-middle strong { font-size:20px; }
.chip-foot { padding-top:6px; font-size:10px; }
.patch-status { padding:8px 12px; }
.presets-head { padding:8px 11px 7px; }
.preset-grid { padding:0 11px; gap:4px; }
.preset { min-height:39px; padding:4px 2px; }
.metrics { margin:9px 11px 0; }
.metrics > div { padding-top:6px; }
.metrics strong { font-size:17px; padding-top:0; }
.notice { margin:9px 11px 10px; padding:7px 8px; font-size:10px; }
.bottom-grid { gap:11px; margin-top:11px; }
.bottom-grid details { align-self:start; }
.bottom-grid summary { cursor:pointer; list-style:none; user-select:none; }
.bottom-grid summary::-webkit-details-marker { display:none; }
.bottom-grid summary::after { content:'+'; color:var(--muted); font:20px/1 ui-monospace,monospace; margin-left:7px; }
.bottom-grid details[open] summary::after { content:'−'; }
.bottom-grid summary > span { margin-left:auto; }
.clear-log { margin:8px 12px 0; padding:4px 7px; font-size:11px; }
#experimentLog { min-height:0; max-height:140px; margin:5px 11px 11px; }
footer { padding-top:9px; font-size:10px; }
/* Fullscreen rule MUST override width cap applied to the normal screen. */
#displayViewport:fullscreen { width:100vw; height:100vh; max-width:none; }
@media (max-width:840px) {
  .main-grid { grid-template-columns:1fr; }
  .shell { width:min(680px, calc(100% - 20px)); }
}
@media (max-width:540px) {
  .shell { padding-top:10px; }
  .masthead { margin-bottom:8px; }
  h1 { font-size:25px; }
  .screen-well { padding:6px; }
  .screen-frame { --display-border:3px; }
  .toolbar button,.load-btn { flex:1 1 27%; }
  .bottom-grid { grid-template-columns:1fr; }
  .logic-controls { padding-inline:10px; }
  .logic-actions { padding-inline:10px; }
  .logic-actions button { flex:1 1 45%; }
  .logic-intro,.logic-status,.logic-note { margin-inline:10px; }
  .machine-status { font-size:9px; }
  .chip-box { margin-inline:10px; }
}

/* v0.1.3: controls remain legible in both macOS appearance modes.
   The media query is live: no saved manual override or page reload required. */
.video-options {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:8px; padding:5px 10px 7px; background:var(--surface-2);
  border-bottom:1px solid var(--rule); color:var(--muted);
  font:11px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;
}
.video-options label { display:flex; align-items:center; gap:6px; cursor:pointer; }
.video-options input { accent-color:var(--accent); margin:0; }
#videoStatus { font-size:10px; }
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme:dark;
    --paper:#171c20;
    --surface:#242b30;
    --surface-2:#1d2429;
    --ink:#e4e4db;
    --muted:#b6bdbb;
    --rule:#505c61;
    --accent:#e18a65;
    --dark:#14191c;
    --dark-rule:#667578;
  }
  a { color:#ed9d7a; }
  button { background:#303a40; color:var(--ink); border-color:#6b797d; }
  button:hover:not(:disabled) { background:#3b494f; border-color:#a2b1b3; }
  button:active:not(:disabled) { background:#263136; }
  .led { background:#505e62; border-color:#819092; }
  .led.on { background:#73ba84; border-color:#98d3a6; }
  .screen-well { background:#1b2226; }
  .screen-info, .instructions p, .bender-panel .explain,
  .notice, .notes-block > p { color:#c1c9c8; }
  .logic-intro, .logic-note { color:#c1c9c8; }
  .load-btn { background:#b9583d; color:#fff; border-color:#e28970; }
  .load-btn:hover { background:#a34731; }
  .patch-status strong { color:#f2aa8e; }
  .preset kbd { color:#b4c1c0; }
  .preset.active { background:#a86a34; border-color:#d69a60; color:#fff; }
  .preset.active kbd { color:#fce4c4; }
  #experimentLog { color:#c2c6c2; }
  .notes-block .small-note, footer { color:#b1b9b5; }
  .notice { border-left-color:#818c91; }
  .fault-hint { color:#ffc09a !important; }
  .video-options { color:#c2cac7; }
}

.pulse-settings { align-items:center; }
.pulse-settings label { font-size:11px; color:var(--muted); }
.pulse-settings select { max-width:100%; padding:6px; background:var(--surface); color:var(--ink); }

/* Conceptual IC silhouette: positions are not physical package pin numbers. */
.ram-chip { display:grid; grid-template-columns:minmax(64px,1fr) minmax(110px,1.5fr) minmax(64px,1fr); gap:4px 0; max-width:520px; margin:16px auto; padding:0 12px; }
.ram-chip-body { grid-column:2; grid-row:1 / span 8; position:relative; border:2px solid var(--ink); border-radius:5px; background:var(--surface-2); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--ink); text-align:center; }
.ram-chip-body::before { content:''; position:absolute; top:-2px; width:24px; height:12px; border:2px solid var(--ink); border-top:0; border-radius:0 0 14px 14px; background:var(--surface); }
.ram-chip-body strong { font:700 13px ui-monospace,SFMono-Regular,Consolas,monospace; }
.ram-chip-body small { font-size:10px; line-height:1.5; color:var(--muted); }
.chip-pin { display:flex; align-items:center; justify-content:space-between; gap:4px; min-height:32px; padding:4px; border:1px solid transparent; background:transparent; color:var(--ink); font:12px ui-monospace,SFMono-Regular,Consolas,monospace; }
.chip-pin:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.chip-pin[aria-pressed="true"] { color:var(--accent); background:var(--surface); border-color:var(--rule); }
.chip-wire { position:relative; flex:1; min-width:18px; height:2px; background:currentColor; }
.chip-cut { visibility:hidden; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:20px; line-height:18px; background:var(--surface); }
.chip-pin[aria-pressed="true"] .chip-cut { visibility:visible; }
.chip-pin:disabled { opacity:0.45; }

/* Compact conceptual chips: labels sit inside the body; only short legs extend. */
.pin-grid, .ram-chip {
  display:grid; grid-template-columns:64px minmax(96px,1fr) 64px;
  gap:0; padding:0; position:relative; isolation:isolate;
  width:100%; max-width:300px; margin:10px auto;
}
.pin-grid { max-width:248px; }
.chip-middle, .ram-chip-body {
  grid-column:1 / -1; grid-row:1 / span 8; margin:0 12px; padding:12px 48px;
  border:2px solid var(--ink); border-radius:5px; background:var(--surface-2);
  color:var(--ink); gap:6px; z-index:-1;
}
.chip-middle { grid-row:1 / span 4; justify-content:center; }
.chip-middle strong { font-size:18px; color:var(--ink); letter-spacing:.04em; }
.chip-middle span { font-size:10px; color:var(--muted); letter-spacing:0; }
.ram-chip-body strong { font-size:12px; }
.ram-chip-body { gap:3px; padding:7px 48px; }
.ram-chip-body small { font-size:9px; line-height:1.25; }
.ram-chip { max-width:260px; }
.chip-pin, .pin {
  display:flex; align-items:center; justify-content:space-between; gap:3px;
  min-width:0; min-height:32px; margin:0; padding:0;
  border:1px solid transparent; border-radius:2px; background:transparent;
  color:var(--ink); font:12px ui-monospace,SFMono-Regular,Consolas,monospace;
}
.ram-chip .chip-pin { min-height:24px; }
.chip-signal { width:36px; text-align:center; }
.chip-wire { flex:0 0 18px; min-width:18px; }
.pin:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.pin:hover:not(:disabled), .pin.selected { background:var(--surface); color:var(--ink); border-color:var(--ink); }
.pin.connected { background:var(--surface); color:var(--accent); border-color:var(--accent); }

/* Independent VRAM leg switches share the work-RAM cross convention. */
.vram-mode { display:flex; align-items:center; gap:8px; margin:0 11px 8px; font-size:11px; }
.vram-mode select { min-width:0; flex:1; }
.transaction-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px 8px; margin:10px 16px 0; }
.transaction-metrics[hidden] { display:none; }
.transaction-metrics > div { min-width:0; border-top:1px solid var(--rule); padding:7px 2px 0; }
.transaction-metrics span { display:block; color:var(--muted); font-size:10px; }
.transaction-metrics strong { display:block; padding-top:3px; overflow-wrap:anywhere; font:700 14px ui-monospace,SFMono-Regular,Consolas,monospace; }
.circuit-config-preview { max-height:220px; overflow:auto; padding:10px; border:1px solid var(--rule); border-radius:5px; background:var(--surface); white-space:pre-wrap; overflow-wrap:anywhere; font:12px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace; }
#compareOutput { max-height:460px; overflow:auto; }
.experiment-comparison table { display:table; width:760px; table-layout:fixed; border-collapse:collapse; font-size:12px; }
.experiment-comparison th,.experiment-comparison td { padding:7px 9px; border:1px solid var(--rule); text-align:left; vertical-align:top; overflow-wrap:anywhere; }
.experiment-comparison th:first-child,.experiment-comparison td:first-child { width:190px; }
.experiment-comparison th:nth-child(2),.experiment-comparison td:nth-child(2),.experiment-comparison th:nth-child(3),.experiment-comparison td:nth-child(3) { width:220px; }
.experiment-comparison th:last-child,.experiment-comparison td:last-child { width:100px; white-space:nowrap; }
.pin.cut { color:var(--accent); background:var(--surface); border-color:var(--rule); }
.pin.cut .chip-cut { visibility:visible; }

/* One compact workbench keeps the four modeled IC groups visible together. */
.chip-workbench { min-width:0; }
.chip-workbench-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.chip-card { min-width:0; padding:8px; border:1px solid var(--rule); background:var(--surface); }
#keyboardTarget { padding:0 12px 2px; color:var(--ink); font:700 10px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace; }
.chip-card.fault-active .chip-middle,
.chip-card.fault-active .ram-chip-body {
  background:#dcebd8; color:#243d27; outline:2px solid #8eb18a; outline-offset:1px;
}
.chip-card.fault-active .pin:not(.cut):not(.bridged):not(.selected):not(.connected):not(:hover) .chip-signal,
.chip-card.fault-active .chip-pin:not(.cut):not(.bridged):not(.selected):not(.connected):not(:hover) .chip-signal { color:#243d27; }
.chip-card.fault-active .chip-middle strong,
.chip-card.fault-active .chip-middle span,
.chip-card.fault-active .ram-chip-body strong,
.chip-card.fault-active .ram-chip-body span,
.chip-card.fault-active .ram-chip-body small { color:#243d27; }
.chip-card h2 { display:flex; flex-direction:column; gap:1px; margin:0 0 5px; font-size:12px; line-height:1.15; }
.chip-card h2 small { color:var(--muted); font:10px ui-monospace,SFMono-Regular,Consolas,monospace; }
.chip-compact-control { white-space:nowrap; display:flex; align-items:center; justify-content:space-between; gap:4px; margin:3px 0; color:var(--muted); font-size:10px; }
.chip-compact-control select { min-width:0; max-width:72%; padding:3px 4px; border:1px solid var(--rule); border-radius:2px; background:var(--surface); color:var(--ink); font:10px ui-monospace,SFMono-Regular,Consolas,monospace; }
.chip-workbench .pin-grid, .chip-workbench .ram-chip, .data-chip {
  display:grid; grid-template-columns:38px minmax(48px,1fr) 38px; gap:0; padding:0;
  position:relative; isolation:isolate; width:100%; max-width:100%; margin:3px auto;
}
.chip-workbench .pin-grid { grid-template-rows:repeat(4,24px); }
.chip-workbench .ram-chip { grid-template-rows:repeat(8,24px); max-width:100%; }
.chip-workbench .chip-middle, .chip-workbench .ram-chip-body, .data-chip .chip-middle {
  grid-column:1 / -1; margin:0 7px; padding:6px 18px; border:2px solid var(--ink);
  border-radius:4px; background:var(--surface-2); color:var(--ink); z-index:-1;
}
.chip-workbench .chip-middle { grid-row:1 / span 4; justify-content:center; }
.chip-workbench .ram-chip-body { grid-row:1 / span 8; gap:3px; padding:6px 16px; }
.chip-workbench .chip-middle strong, .chip-workbench .ram-chip-body strong { font-size:11px; letter-spacing:0; color:var(--ink); }
.chip-workbench .chip-middle span, .chip-workbench .ram-chip-body span, .chip-workbench .ram-chip-body small { font-size:8px; letter-spacing:0; line-height:1.2; color:var(--muted); }
.chip-workbench .chip-pin, .chip-workbench .pin, .data-chip .pin {
  min-height:24px; padding:0 1px; gap:1px; font-size:9px; line-height:1;
}
.chip-workbench .chip-signal { width:20px; font-size:9px; }
.chip-workbench .chip-wire { flex:0 0 12px; min-width:12px; }
.chip-workbench .chip-cut { font-size:16px; line-height:16px; }
.data-chip { grid-template-rows:repeat(4,24px); }
.data-chip .chip-middle { grid-row:1 / span 4; display:flex; align-items:center; justify-content:center; text-align:center; }
.data-chip .chip-middle strong { font-size:10px; letter-spacing:0; }
.data-chip .chip-middle span { color:var(--muted); font:8px ui-monospace,SFMono-Regular,Consolas,monospace; }
.chip-workbench .pin.selected { background:var(--surface); color:var(--ink); border-color:var(--ink); }
.chip-workbench .pin.cut, .chip-workbench .pin.bridged { color:var(--accent); background:var(--surface); border-color:var(--accent); }
.chip-state { min-height:1.25em; margin:2px 0 0; color:var(--muted); font:9px/1.25 ui-monospace,SFMono-Regular,Consolas,monospace; overflow-wrap:anywhere; }
.chip-card > button { align-self:stretch; min-height:26px; margin-top:3px; padding:4px; font-size:10px; }
.chip-settings { margin-top:8px; border:1px solid var(--rule); background:var(--surface); }
.chip-settings summary { padding:7px 9px; cursor:pointer; color:var(--muted); font-size:11px; }
.chip-settings .explain { padding:5px 9px; font-size:10px; }
.chip-settings .presets-head { padding:5px 9px; }
.chip-settings .preset-grid { padding-inline:9px; }
.chip-settings .metrics { margin:7px 9px 0; }
.chip-settings .notice { margin:8px 9px; padding:6px 8px; font-size:10px; }
.chip-workbench .ram-chip .chip-pin { min-height:24px; }
.randomiser-row { display:flex; align-items:center; flex-wrap:wrap; gap:4px; padding:3px 12px 6px; }
.randomiser-row strong { margin-right:3px; font-size:11px; }
.compact-recovery-actions { display:inline-flex; flex-wrap:wrap; gap:5px; }
.recovery-switch[aria-pressed="true"] { font-weight:700; }
.randomiser-row button { appearance:none; min-width:40px; padding:5px 8px; font-size:10px; }
/* Keep unavailable actions from looking pressed while a RAM contact is held. */
.randomiser-row button:disabled { opacity:1; color:var(--muted); }
.randomiser-row button.ram-contact-blocked:disabled { color:var(--ink); }
.randomiser-status { min-height:1em; margin:0 12px 6px; color:var(--muted); font:9px/1.25 ui-monospace,SFMono-Regular,Consolas,monospace; }
.ram-frame-pairs { margin:0 12px 6px; color:var(--muted); font:9px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; }
.ram-frame-pairs > strong { display:inline-block; margin:0 8px 3px 0; }
.ram-frame-pairs select { padding:2px 4px; background:var(--surface); color:var(--ink); font:inherit; }
.ram-frame-pair-buttons { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px; min-width:0; }
.ram-frame-pair-buttons button { min-width:0; padding:4px 2px; font-size:9px; white-space:nowrap; }
@media (max-width:420px) {
  .chip-workbench-grid { grid-template-columns:1fr; }
}

@media (min-width:1121px) {
  .chip-compact-control select, .ram-frame-pairs select { height:20px; line-height:12px; }
  .randomiser-row button { height:24px; line-height:12px; }
  .compact-recovery-actions button { padding-inline:5px; }
}