/* ==========================================================
   Design tokens
   The palette is green: deep green as the primary, amber for
   anything switched on, and a green circuit board. On top of that
   each section of the site carries its own hue, set by --section
   from the level on <html>, and the 8086 page gives the BIU, the
   EU, RAM and the three buses colours of their own.
   Every text pair below is checked for 4.5:1 contrast by
   build/build.mjs in both themes.
   ========================================================== */
:root{
  /* the five text sizes. --fs: page text, in pixels (the smallest, 13 px, is for small print such as
     hints and counters). --ts: text in the diagrams, in drawing units: a diagram is shown at about
     0.85 of its size, so these come out close to the same five sizes on screen. The 8086 simulator
     keeps its own sizes: its diagram is packed tight. */
  --fs-1:13px; --fs-2:15px; --fs-3:17px; --fs-4:20px; --fs-5:30px;
  --ts-1:16px; --ts-2:18px; --ts-3:20px; --ts-4:24px; --ts-5:36px;
  --font-ui:"Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-read:"Newsreader", Georgia, "Times New Roman", serif;
  --font-mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --bg:#EDF0EC; --surface:#FFFFFF; --surface-2:#F5F7F4; --meta-bg:#DEE3DB;
  --ink:#15211C; --ink-2:#3C4943; --ink-3:#56635C;
  --line:#C9D2CC; --line-2:#E0E6E2;
  --accent:#16654F; --accent-2:#0F4E3C; --accent-ink:#FFFFFF;
  --accent-soft:rgba(22,101,79,.10); --accent-glow:rgba(22,101,79,.40);
  --signal:#E39A12; --signal-soft:rgba(227,154,18,.18); --signal-ink:#6B4300;
  --power:#2B7BE8; --power-soft:rgba(43,123,232,.16);
  --out:#2F5FC4;
  --grid-dot:rgba(21,33,28,.10);
  --shadow:0 1px 2px rgba(21,33,28,.05), 0 12px 32px -18px rgba(21,33,28,.28);

  /* one hue per level of the site; --section follows the page */
  --lv-1:#16654F; --lv-2:#0E6B75; --lv-3:#2F5FC4; --lv-4:#6B4AA8; --lv-5:#9A5A1E;
  --section:var(--lv-1);
  --section-soft:rgba(22,101,79,.10);
  /* the parts of the 8086 page */
  --biu:#9A6510; --eu:#16654F; --ram:#1C6E7E;
  --bus-a:#2F5FC4; --bus-d:#12775C; --bus-c:#A96A0E; --ram-done:#EAF2EC;

  /* illustration materials (checked for contrast with build-time script) */
  --i-case:#D5DCD7; --i-case-edge:#76837C; --i-cavity:#B4BFB8;
  --i-board:#2A6150; --i-board-edge:#173F32; --i-trace:#5A9A82;
  --i-chip:#232A27; --i-chip-edge:#46514B;
  --i-metal:#E2E7E4; --i-metal-edge:#6F7C75; --i-metal-2:#66736C; --i-metal-lt:#F4F7F5;
  --i-gold:#C99A3C; --i-copper:#B8703F;
  --i-panel:#FFFFFF; --i-panel-edge:#98A59E; --i-block:#F1F4F2;
  --i-die:#252A34; --i-die-block:#333A48; --i-die-edge:#5A6580; --i-die-cell:#46506A; --i-die-text:#E4EAF5;
  --i-fan:#E8EDEA; --i-blade:#7D8983;
  --i-wire:#76837C; --i-sym:#17221D; --i-sym-fill:#FFFFFF;
  --i-text:#17221D; --i-text-inv:#F4F7F5; --i-text-mut:#4F5C56;
  --i-hole:#FFFFFF; --i-screen:#1F5A49;
  --lbl-bg:#FFFFFF; --lbl-ink:#101814; --lbl-edge:#8E9B94;
  --lbl-hi:#0B5A43; --lbl-hi-inv:#B4F5DC; --on-accent:#FFFFFF;
  --pin-in:#16654F; --pin-out:#8A5600; --pin-bi:#2F5FC4; --pin-pwr:#B24A3A; --pin-nc:#5E6B64;
  /* gradients: greens and yellows (every stop is checked for contrast by the build) */
  --g-bg-1:rgba(22,101,79,.13); --g-bg-2:rgba(22,101,79,.06);          /* no warm (amber) glow in the page corner */
  --g-stage-a:#FFFFFF; --g-stage-b:#F2F8EF; --g-stage-c:#EEF5EC;     /* no cream corner in the diagram window */
  --g-panel-a:#FFFFFF; --g-panel-b:#EBF4EA; --g-block-a:#F5F9F3; --g-block-b:#E4EEE1;
  --g-on-a:#1F7F61; --g-on-b:#0F4E3C;
  --g-sig-a:rgba(242,180,60,.42); --g-sig-b:rgba(227,154,18,.12);
  --g-acc-a:rgba(22,101,79,.20); --g-acc-b:rgba(227,154,18,.22);
  --g-flag-a:#F7C45A; --g-flag-b:#E39A12; --g-board-a:#317260; --g-board-b:#214F40;
  --g-biu-a:rgba(227,154,18,.16); --g-biu-b:rgba(227,154,18,.04); --g-eu-a:rgba(22,101,79,.12); --g-eu-b:rgba(22,101,79,.03);
}
[data-theme="dark"]{
  --bg:#0F1613; --surface:#151E1A; --surface-2:#1B2621; --meta-bg:#090E0C;
  --ink:#E6EDE9; --ink-2:#B3C0B9; --ink-3:#98A69F;
  --line:#33413B; --line-2:#26312C;
  --accent:#4DC39C; --accent-2:#7BD9B9; --accent-ink:#0B1A14;
  --accent-soft:rgba(77,195,156,.12); --accent-glow:rgba(77,195,156,.42);
  --signal:#FFB23A; --signal-soft:rgba(255,178,58,.18); --signal-ink:#FFD591;
  --power:#5DB2FF; --power-soft:rgba(93,178,255,.18);
  --out:#86A9FF;
  --grid-dot:rgba(228,235,231,.07);
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 16px 36px -20px rgba(0,0,0,.7);

  --lv-1:#4DC39C; --lv-2:#4FC8D8; --lv-3:#86A9FF; --lv-4:#B79BFF; --lv-5:#FFB23A;
  --section:var(--lv-1);
  --section-soft:rgba(77,195,156,.12);
  --biu:#FFC46B; --eu:#4DC39C; --ram:#5FC8DC;
  --bus-a:#86A9FF; --bus-d:#4DC39C; --bus-c:#FFB23A; --ram-done:#17302A;

  --i-case:#2A3530; --i-case-edge:#6A7C73; --i-cavity:#0D1411;
  --i-board:#1F5443; --i-board-edge:#45907A; --i-trace:#3F8A70;
  --i-chip:#0A0E0C; --i-chip-edge:#4A5852;
  --i-metal:#3F4B46; --i-metal-edge:#8A9A92; --i-metal-2:#56645E; --i-metal-lt:#4A5852;
  --i-gold:#B8923F; --i-copper:#C07A46;
  --i-panel:#1A2520; --i-panel-edge:#5B6D65; --i-block:#24322C;
  --i-die:#141821; --i-die-block:#222938; --i-die-edge:#4A5670; --i-die-cell:#364059; --i-die-text:#DCE4F2;
  --i-fan:#34423C; --i-blade:#7B8B84;
  --i-wire:#7E8E87; --i-sym:#DCE6E1; --i-sym-fill:#1A2520;
  --i-text:#E8F0EC; --i-text-inv:#F2F6F4; --i-text-mut:#A7B5AE;
  --i-hole:#151E1A; --i-screen:#16463A;
  --lbl-bg:#0B110E; --lbl-ink:#F2F7F4; --lbl-edge:#5B6D65;
  --lbl-hi:#8BE8C6; --lbl-hi-inv:#8BE8C6; --on-accent:#05140E;
  --pin-in:#4DC39C; --pin-out:#FFB23A; --pin-bi:#86A9FF; --pin-pwr:#F08A78; --pin-nc:#8E9C95;
  --g-bg-1:rgba(77,195,156,.11); --g-bg-2:rgba(77,195,156,.05);
  --g-stage-a:#17231E; --g-stage-b:#141E19; --g-stage-c:#131C18;
  --g-panel-a:#1E2B25; --g-panel-b:#17221D; --g-block-a:#27362F; --g-block-b:#1F2C26;
  --g-on-a:#6ADAB3; --g-on-b:#3AA884;
  --g-sig-a:rgba(255,178,58,.36); --g-sig-b:rgba(255,178,58,.10);
  --g-acc-a:rgba(77,195,156,.20); --g-acc-b:rgba(255,178,58,.18);
  --g-flag-a:#FFCB6B; --g-flag-b:#E9A52A; --g-board-a:#2B6857; --g-board-b:#1A4638;
  --g-biu-a:rgba(255,178,58,.14); --g-biu-b:rgba(255,178,58,.03); --g-eu-a:rgba(77,195,156,.12); --g-eu-b:rgba(77,195,156,.02);
}

/* each level of the site takes its own hue */
[data-level="1"]{--section:var(--lv-1);--section-soft:rgba(22,101,79,.10)}
[data-level="2"]{--section:var(--lv-2);--section-soft:rgba(14,107,117,.10)}
[data-level="3"]{--section:var(--lv-3);--section-soft:rgba(47,95,196,.10)}
[data-level="4"]{--section:var(--lv-4);--section-soft:rgba(107,74,168,.10)}
[data-level="5"]{--section:var(--lv-5);--section-soft:rgba(154,90,30,.10)}
[data-theme="dark"][data-level="1"]{--section-soft:rgba(77,195,156,.13)}
[data-theme="dark"][data-level="2"]{--section-soft:rgba(79,200,216,.13)}
[data-theme="dark"][data-level="3"]{--section-soft:rgba(134,169,255,.13)}
[data-theme="dark"][data-level="4"]{--section-soft:rgba(183,155,255,.13)}
[data-theme="dark"][data-level="5"]{--section-soft:rgba(255,178,58,.13)}

*{box-sizing:border-box}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}   /* not display:none, or some browsers drop the gradients */
html,body{margin:0;height:100%}
body{
  background:radial-gradient(1100px 620px at 0% 0%, var(--g-bg-1), transparent 62%),
             radial-gradient(900px 560px at 100% 0%, var(--g-bg-2), transparent 60%),
             radial-gradient(900px 600px at 50% 110%, var(--g-bg-1), transparent 60%), var(--bg);
  background-attachment:fixed; color:var(--ink);
  font-family:var(--font-ui); font-size:var(--fs-3); line-height:1.45;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
button{font:inherit;color:inherit}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* ---------- App frame ---------- */
.app{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;height:100vh;height:100dvh}
.topbar{display:flex;align-items:center;gap:16px;padding:14px 24px 10px}
.foot{padding:14px 24px;font-size:var(--fs-1);line-height:1.4;color:var(--ink-3);text-align:center;background:var(--bg)}
.foot .foot-c,.foot .foot-name{color:var(--ink);font-weight:700}
.foot .foot-link{color:var(--accent);font-weight:700;text-decoration:none}
.foot .foot-link:hover,.foot .foot-link:focus-visible{text-decoration:underline}
.foot{position:relative}
.foot-priv{position:absolute;left:24px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-2);font:600 12px var(--font-ui,system-ui,sans-serif);cursor:pointer}
.foot-priv svg{width:15px;height:15px;flex:none}
.foot-priv:hover,.foot-priv:focus-visible{border-color:var(--accent);color:var(--accent)}
.pv-body{padding:6px 22px 18px;overflow:auto;max-height:calc(min(80vh,760px) - 128px);font-size:var(--fs-2);line-height:1.55;color:var(--ink-2)}
.pv-body h3{margin:18px 0 6px;font-size:var(--fs-3);color:var(--ink)}
.pv-body ul{margin:0;padding-left:20px}
.pv-body li{margin:3px 0}
.pv-body p{margin:6px 0}
.pv-lead{color:var(--ink)}
@media (max-width: 980px){.foot{padding-bottom:68px}.foot-priv{top:auto;bottom:22px;left:12px;transform:none;height:34px;padding:0 14px;font-size:var(--fs-2)}}   /* room for the floating Feedback button */
.brand{display:flex;align-items:center;gap:12px;min-width:0;text-decoration:none;color:inherit}
.brand svg{flex:none}
.brand .brand-name{margin:0;color:var(--ink);font-size:var(--fs-4);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.topbar .spacer{flex:1}

.btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-size:var(--fs-3);font-weight:600;cursor:pointer;transition:border-color .15s,background .15s,color .15s;white-space:nowrap}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn:disabled{opacity:.4;cursor:default;border-color:var(--line);color:inherit}
.btn.icon{width:36px;padding:0;justify-content:center}
.btn svg{width:17px;height:17px;flex:none}

.toolbar{display:flex;align-items:center;gap:8px;padding:0 24px 12px;min-width:0}
.crumbs{flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.crumbs::-webkit-scrollbar{display:none}
.crumbs ol{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0 4px;white-space:nowrap}
.crumbs li{display:flex;align-items:center}
.crumbs li+li::before{content:"";width:7px;height:7px;border-right:1.5px solid var(--ink-3);border-top:1.5px solid var(--ink-3);transform:rotate(45deg);margin:0 10px 0 6px;opacity:.7}
.crumbs a,.crumbs button{text-decoration:none;display:inline-block;border:0;background:none;padding:6px 6px;border-radius:8px;font-size:var(--fs-3);font-weight:500;color:var(--ink-2);cursor:pointer}
.crumbs a:hover,.crumbs button:hover{color:var(--accent);background:var(--accent-soft)}
.crumbs li:last-child a,.crumbs li:last-child button{color:var(--ink);font-weight:700;cursor:default;background:none;box-shadow:inset 0 -2px 0 var(--section)}

/* ---------- Main grid ---------- */
.main{display:grid;grid-template-columns:minmax(0,68fr) minmax(330px,32fr);gap:16px;padding:0 24px 24px;min-height:0}

.stage{position:relative;min-height:0;border-radius:20px;border:1px solid var(--line);background-color:var(--surface);
  background-image:radial-gradient(var(--grid-dot) 1px, transparent 1.2px), linear-gradient(155deg, var(--g-stage-a) 0%, var(--g-stage-b) 58%, var(--g-stage-c) 100%);
  background-size:22px 22px, 100% 100%;background-position:11px 11px, 0 0;
  overflow:hidden;touch-action:manipulation}
.stage:fullscreen,.stage:-webkit-full-screen{width:100vw;height:100vh;border-radius:0;border:0;box-shadow:none}
.stage:fullscreen #layers,.stage:-webkit-full-screen #layers{inset:0}
#layers{position:absolute;inset:0}
.scroller{position:absolute;inset:0;overflow:hidden}
.zoom-btn{display:none}
.layer{position:absolute;inset:0;width:100%;height:100%;display:block;transform-origin:50% 50%;
  transition:opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1);user-select:none;-webkit-user-select:none;
  will-change:opacity,transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transform:translateZ(0);-webkit-transform:translateZ(0)}
.layer.enter-in{opacity:0;transform:scale(.9)}
.layer.enter-out{opacity:0;transform:scale(1)}
.layer.enter-fade{opacity:0}
.layer.leaving{pointer-events:none}
.layer.leave-in{opacity:0;transform:scale(1.12)}
.layer.leave-out{opacity:0;transform:scale(.9)}
.layer.leave-fade{opacity:0}

.stage-icon-btn{width:38px;height:38px;padding:0;display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);opacity:.85}
.stage-icon-btn:hover,.stage-icon-btn:focus-visible{opacity:1}
.stage-icon-btn svg{width:18px;height:18px}
.fs-btn{position:absolute;right:16px;top:16px;z-index:6}
.stage-nav{position:absolute;left:16px;top:16px;z-index:6;display:none;gap:8px}
.stage-nav.show{display:flex}
.hint[hidden]{display:none}
.hint{position:absolute;left:12px;bottom:6px;z-index:3;max-width:calc(100% - 24px);font-size:var(--fs-1);font-weight:500;color:var(--ink-3);
  padding:2px 4px;background:transparent;border:none;pointer-events:none}
.tip{position:absolute;z-index:7;pointer-events:none;width:min(340px,calc(100% - 24px));max-height:min(60vh,420px);
  display:flex;flex-direction:column;overflow:hidden;
  border-radius:14px;background:var(--surface);color:var(--ink);border:1px solid var(--line);
  font-size:var(--fs-2);line-height:1.4;opacity:0;transform:translateY(4px);transition:opacity .12s, transform .12s;box-shadow:0 16px 40px -12px rgba(0,0,0,.4)}
.tip.show{opacity:1;transform:none;pointer-events:auto}
.tip .dp-head{flex:none;padding:14px 34px 8px 16px;border-bottom:1px solid transparent;transition:box-shadow .15s, border-color .15s}
.tip .dp-head.scrolled{border-bottom-color:var(--line-2);box-shadow:0 8px 12px -10px rgba(0,0,0,.45)}
.tip .dp-lvl{margin:0 0 6px;font-size:var(--fs-1);font-weight:700;color:var(--section);display:flex;align-items:center;gap:6px}
.tip .dp-lvl::before{content:"";width:8px;height:8px;border-radius:2.5px;background:var(--section);flex:none}
.tip .dp-title{margin:0;font-size:var(--fs-3);font-weight:800;letter-spacing:-.01em;line-height:1.15}
.tip .dp-scroll{flex:1;min-height:0;overflow:auto;padding:8px 16px 16px}
.tip .dp-short{margin:0;font-family:var(--font-read);font-size:var(--fs-2);line-height:1.4;color:var(--ink-2)}
.tip .dp-body{margin-top:10px;font-family:var(--font-read);font-size:var(--fs-2);line-height:1.55;color:var(--ink-2)}
.tip .dp-body p{margin:0}
.tip .dp-body p+p{margin-top:8px}
.tip .dp-hint{margin:10px 0 0;font-size:var(--fs-1);font-weight:600;color:var(--ink-3)}
.tip .dp-close{position:absolute;right:8px;top:8px;width:24px;height:24px;padding:0;display:flex;align-items:center;justify-content:center;
  border:none;border-radius:7px;background:transparent;color:var(--ink-3);cursor:pointer;font-size:var(--fs-3);line-height:1;z-index:1}
.tip .dp-close:hover,.tip .dp-close:focus-visible{background:var(--surface-2,var(--line-2));color:var(--ink)}
.tip.pinned{border-color:var(--accent)}
.tip .dp-actions{display:flex;flex-wrap:nowrap;gap:5px;margin-top:12px}
.tip .dp-act{flex:1 1 0;min-width:0;padding:6px 4px;border-radius:7px;border:1px solid var(--line);background:var(--bg);color:var(--ink-2);
  font-size:var(--fs-1);font-weight:600;cursor:pointer;font-family:var(--font-ui,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tip .dp-act:hover,.tip .dp-act:focus-visible{border-color:var(--accent);color:var(--ink)}
.tip .dp-act.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.tip .dp-section:not(:empty){margin-top:10px;font-family:var(--font-read);font-size:var(--fs-2);line-height:1.55;color:var(--ink-2)}
.tip .dp-section p{margin:0}
.tip .dp-section p+p{margin-top:8px}
.tip .dp-fact{margin:22px 0 0;padding:8px 10px;border-radius:8px;background:var(--accent-soft);font-size:var(--fs-1);line-height:1.5;color:var(--ink-2)}
.tip .dp-fact b{color:var(--ink)}
.tip .dp-specs{margin:10px 0 0;display:grid;grid-template-columns:auto 1fr;gap:4px 10px;font-size:var(--fs-1)}
.tip .dp-specs dt{color:var(--ink-3);font-weight:600}
.tip .dp-specs dd{margin:0;color:var(--ink-2);text-align:right}
.tip .dp-section .ex{border-top:1px solid var(--line-2);margin-top:2px}
.tip .dp-section .ex li{font-size:var(--fs-1);padding:7px 0}
.tip .dp-section .ex li span{font-size:var(--fs-1)}
.tip .dp-empty{margin:0;font-size:var(--fs-1);color:var(--ink-3)}

/* ---------- Info panel ---------- */
.panel{min-height:0;overflow-y:auto;border-radius:20px;border:1px solid var(--line);background:linear-gradient(180deg, var(--g-panel-a) 0%, var(--g-panel-a) 40%, var(--g-panel-b) 100%);scroll-behavior:smooth}
.panel-inner{padding:26px 28px 40px}
.p-level{margin:0 0 8px;font-size:var(--fs-2);font-weight:700;color:var(--section);display:inline-flex;align-items:center;gap:7px}
.p-level::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--section)}
.p-title{margin:0;font-size:var(--fs-5);font-weight:800;letter-spacing:-.025em;line-height:1.04}
.p-short{margin:10px 0 0;font-family:var(--font-read);font-size:var(--fs-4);line-height:1.4;color:var(--ink-2)}
.p-badge{display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding:4px 10px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font-size:var(--fs-2);font-weight:600;color:var(--ink-2)}
.p-sec{margin-top:26px}
.p-sec h3,.fact h3{margin:0 0 8px;font-size:var(--fs-3);font-weight:700;letter-spacing:-.005em;color:var(--ink)}
.p-sec p{margin:0;font-family:var(--font-read);font-size:var(--fs-4);line-height:1.62;color:var(--ink-2);max-width:62ch}
.p-sec p+p{margin-top:10px}
.p-sec p b{color:var(--ink);font-weight:500}
.expr{font-family:var(--font-ui)!important;font-size:var(--fs-4)!important;font-weight:700;color:var(--ink)!important;letter-spacing:-.01em}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{text-decoration:none;color:inherit;display:inline-flex;align-items:center;gap:8px;padding:8px 13px 8px 11px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:var(--fs-3);font-weight:600;cursor:pointer;transition:border-color .15s, background .15s}
.chip:hover{border-color:var(--accent);background:var(--accent-soft)}
.chip i{width:8px;height:8px;border-radius:2px;background:var(--accent);opacity:.8;flex:none}
.chip small{font-weight:500;color:var(--ink-3);font-size:var(--fs-1)}

.ex{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.ex li{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:var(--fs-3)}
.ex li b{font-weight:600}
.ex li span{color:var(--ink-3);text-align:right;font-size:var(--fs-2)}

.specs{display:grid;grid-template-columns:minmax(110px,40%) 1fr;margin:0;border-top:1px solid var(--line-2)}
.specs dt,.specs dd{margin:0;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:var(--fs-3)}
.specs dt{color:var(--ink-3);padding-right:12px}
.specs dd{font-weight:500;font-variant-numeric:tabular-nums}

.rel{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.rel a{text-decoration:none;color:inherit;display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;text-align:left;padding:10px 12px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface-2);cursor:pointer;transition:border-color .15s}
.rel a:hover{border-color:var(--accent)}
.rel b{font-size:var(--fs-3)}
.rel span{font-size:var(--fs-2);color:var(--ink-3)}

.tt{border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums;font-size:var(--fs-3);margin-top:2px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tt th,.tt td{padding:7px 16px;text-align:center;border-bottom:1px solid var(--line-2)}
.tt th{background:var(--surface-2);font-weight:700;font-size:var(--fs-2)}
.tt th.out,.tt td.out{border-left:1px solid var(--line)}
.tt tr:last-child td{border-bottom:0}
.tt td.one{font-weight:700;color:var(--ink)}
.tt td{color:var(--ink-2);transition:background .2s}
.tt tr.on td{background:var(--signal-soft);color:var(--ink)}
.hintline{margin-top:8px!important;font-family:var(--font-ui)!important;font-size:var(--fs-2)!important;color:var(--ink-3)!important}

.ic-card{text-decoration:none;color:inherit;display:flex;gap:14px;align-items:center;width:100%;text-align:left;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface-2);cursor:pointer;transition:border-color .15s}
.ic-card:hover{border-color:var(--accent)}
.ic-card svg{flex:none;width:92px;height:52px}
.ic-card b{display:block;font-size:var(--fs-3)}
.ic-card span{display:block;font-size:var(--fs-2);color:var(--ink-3)}
.ic-card em{display:block;font-style:normal;font-size:var(--fs-2);font-weight:600;color:var(--accent);margin-top:3px}

.note{margin-top:12px;padding:13px 15px;border-radius:14px;border:1px dashed var(--line);font-size:var(--fs-3);line-height:1.5;color:var(--ink-2)}
.note b{color:var(--ink)}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.cmp div{padding:10px 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line-2);font-size:var(--fs-2);color:var(--ink-2);line-height:1.4}
.cmp b{display:block;color:var(--ink);font-size:var(--fs-2);margin-bottom:2px}
.fact{margin-top:28px;padding:16px 18px;border-radius:16px;background:var(--accent-soft)}
.fact p{margin:0;font-family:var(--font-read);font-size:var(--fs-4);line-height:1.55;color:var(--ink-2)}

/* ---------- Overview dialog ---------- */
dialog{border:1px solid var(--line);border-radius:20px;padding:0;background:var(--surface);color:var(--ink);width:min(720px,calc(100vw - 32px));max-height:min(80vh,760px);box-shadow:0 30px 80px -30px rgba(0,0,0,.5)}
dialog::backdrop{background:rgba(10,18,15,.45);backdrop-filter:blur(2px)}
.dlg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line-2);position:sticky;top:0;background:var(--surface)}
.dlg-head h2{margin:0;font-size:var(--fs-4);letter-spacing:-.02em}
.dlg-head p{margin:2px 0 0;font-size:var(--fs-2);color:var(--ink-3)}
.tree{padding:14px 22px 24px;overflow:auto;max-height:calc(min(80vh,760px) - 128px)}
.dlg-foot{margin:0;padding:10px 22px;font-size:var(--fs-1);color:var(--ink-3);border-top:1px solid var(--line-2);position:sticky;bottom:0;background:var(--surface)}
.dlg-foot a{color:var(--accent,var(--ink-2));font-weight:600;text-decoration:none}
.dlg-foot a:hover{text-decoration:underline}
dialog.dt{width:min(420px,calc(100vw - 32px))}
.dt-body{padding:20px 22px 4px}
.dt-body video:not([hidden]),.dt-body #dt-photo:not([hidden]){display:block;width:100%;aspect-ratio:4/3;border-radius:12px;background:#000;object-fit:cover}
.dt-body video{transform:scaleX(-1)}
.dt-body [hidden]{display:none}
.dt-meter{height:16px;border-radius:8px;background:var(--line-2);overflow:hidden}
.dt-meter-fill{height:100%;width:0;background:var(--accent);border-radius:8px;transition:width .08s linear}
.dt-status{margin:14px 0 0;font-size:var(--fs-2);line-height:1.4;color:var(--ink-2);min-height:1.4em}
.dt-actions{display:flex;flex-wrap:wrap;gap:10px;padding:16px 22px 22px}
.dt-actions .btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.device-flow-dot{fill:url(#g-led);stroke:var(--signal);stroke-width:2;filter:drop-shadow(0 0 6px var(--signal))}
.monitor-photo-ov{animation:mp-fade .4s ease}
@keyframes mp-fade{from{opacity:0}to{opacity:1}}
.hot.device-playing{animation:device-pulse 1s ease-in-out infinite}
.flow-lit{filter:drop-shadow(0 0 8px var(--signal))}
/* the walkthrough's dots and current: power is blue, signals and data are yellow */
.pw-dot{transform-box:fill-box;transform-origin:center;animation:pw-dot-pulse .8s ease-in-out infinite}
@keyframes pw-dot-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
.device-flow-dot.is-power{fill:#D6EAFF;stroke:var(--power);filter:drop-shadow(0 0 8px var(--power))}
.pw-trail-glow,.pw-trail{fill:none;stroke:var(--signal);stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.pw-trail-glow{stroke-width:8;opacity:.16}
.pw-trail{stroke-width:3.5;stroke-dasharray:2 13;opacity:.85;animation:pw-flow .55s linear infinite;filter:drop-shadow(0 0 2px var(--signal))}
.pw-trail-glow.is-power,.pw-trail.is-power{stroke:var(--power)}
.pw-trail.is-power{filter:drop-shadow(0 0 2px var(--power))}
@keyframes pw-flow{to{stroke-dashoffset:-15}}
@media (prefers-reduced-motion:reduce){.pw-dot,.pw-trail,.pw-glow{animation:none!important}}
/* thin ash line (the grey used for the outlines of the metal parts) inside the bezel, around the screen */
.mon-rim{fill:none;stroke:var(--i-metal-edge);stroke-width:1.5;pointer-events:none}
/* the monitor during the walkthrough: black, then the start-up page, then the welcome message */
.mon-cover{opacity:0;pointer-events:none;transition:opacity .6s ease}
.pw-screen .mon-cover{opacity:1}
.mon-boot,.mon-spin,.mon-del{opacity:0;transition:opacity .5s ease}
.pw-boot .mon-boot{opacity:1}
.pw-boot .mon-del{opacity:1}
.pw-spin .mon-del{opacity:0}
.pw-spin .mon-spin{opacity:1}
.mon-spin{transform-box:fill-box;transform-origin:center;animation:mon-rot 1s linear infinite}
@keyframes mon-rot{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.mon-spin{animation:none}}
.flow-pop .fp-head{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.flow-pop.dragging .fp-head{cursor:grabbing}
.flow-pop{max-width:calc(100% - 16px);max-height:calc(100% - 16px)}   /* never larger than the stage, even after it shrinks */
.flow-pop .fp-rs{position:absolute;z-index:2;touch-action:none}
.flow-pop .fp-rs-e{top:0;right:0;bottom:18px;width:8px;cursor:ew-resize}
.flow-pop .fp-rs-s{left:0;bottom:0;right:18px;height:8px;cursor:ns-resize}
.flow-pop .fp-rs-se{right:0;bottom:0;width:20px;height:20px;cursor:nwse-resize;
  background:linear-gradient(135deg,transparent 0 46%,var(--accent) 46% 54%,transparent 54% 68%,var(--accent) 68% 76%,transparent 76%)}
.flow-pop.dragging{user-select:none;-webkit-user-select:none}
/* "Learn more" links at the bottom of a part's description */
.learn{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.lk{position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);text-decoration:none;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.lk:hover,.lk:focus-visible{border-color:var(--accent);box-shadow:0 8px 20px -12px var(--accent-glow)}
.lk-ic{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.lk-v .lk-ic{background:rgba(217,48,37,.12);color:#D93025}
[data-theme="dark"] .lk-v .lk-ic{background:rgba(255,99,88,.16);color:#FF7A70}
.lk-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;font:600 15px/1.3 var(--font-ui)}
.lk-t em{font-style:normal;font-weight:500;font-size:var(--fs-1);color:var(--ink-3)}
.lk-go{flex:none;color:var(--ink-3)}
.lk:hover .lk-go,.lk:focus-visible .lk-go{color:var(--accent)}
.lk-thumb{position:relative;flex:none;width:120px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--line)}
.lk-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.lk-thumb-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.72);color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.9)}
.lk-thumb-play svg{width:15px;height:15px;margin-left:2px}
.lk:hover .lk-thumb-play,.lk:focus-visible .lk-thumb-play{background:#D93025}
.tip .lk-thumb{width:84px;border-radius:6px}
.tip .lk-thumb-play{width:24px;height:24px}
.tip .lk-thumb-play svg{width:12px;height:12px}
@media (max-width: 420px){.lk-thumb{width:96px}}
.lk-play{flex:none;font:700 12px var(--font-ui);color:var(--accent);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.lk:hover .lk-play,.lk:focus-visible .lk-play{border-color:var(--accent)}
dialog.vd{width:min(960px,calc(100vw - 32px),calc((80vh - 140px) * 16 / 9))}
/* the page behind a playing video: darker and more blurred, so the video stands out */
dialog.vd::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.vd .dlg-head h2{font-size:var(--fs-3);line-height:1.3}
.vd-frame{aspect-ratio:16/9;background:#000}
.vd-frame iframe{display:block;width:100%;height:100%;border:0}
.vd-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.p-sec p.learn-note{margin-top:10px;font-family:var(--font-ui);font-size:var(--fs-1);line-height:1.4;color:var(--ink-3)}
.tip .dp-learn-h{margin:12px 0 6px;font-size:var(--fs-1);color:var(--ink)}
.tip .lk{padding:7px 9px;gap:9px}
.tip .lk-ic{width:28px;height:28px}
.tip .lk-t{font-size:var(--fs-1)}
.pw-key{display:none;align-items:center;gap:6px;margin:0 0 12px;font:600 12px var(--font-ui);color:var(--ink-3)}
.pw-key i{width:10px;height:10px;border-radius:50%;display:inline-block}
.pw-key .k-pow{background:var(--power)}
@media (max-width: 980px){.pw-key{display:flex}}
.pw-key .k-sig{background:var(--signal);margin-left:10px}
/* the colour key on the diagram, above the tower, while the walkthrough runs */
.pw-legend{opacity:0;pointer-events:none;transition:opacity .35s;filter:drop-shadow(0 3px 8px rgba(0,0,0,.22))}
.pw-standby .pw-legend{opacity:1}
[data-theme="dark"] .pw-legend{filter:drop-shadow(0 0 10px rgba(255,255,255,.16))}
.pw-legend rect{fill:var(--surface);stroke:var(--line);stroke-width:1.2}
.pw-tag{font:700 14px var(--font-ui);fill:var(--signal-ink);stroke:var(--surface);stroke-width:4px;paint-order:stroke;pointer-events:none}
.pw-tag.is-power{fill:var(--power)}
.pw-legend text{font:700 13px var(--font-ui);fill:var(--ink);dominant-baseline:central}
.pw-legend .k-pow{fill:var(--power)}
.pw-legend .k-sig{fill:var(--signal)}
.flow-note{position:absolute;left:16px;right:64px;top:14px;z-index:5;display:flex;align-items:baseline;gap:10px;width:fit-content;max-width:calc(100% - 80px);
  padding:8px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);
  font-size:var(--fs-2);line-height:1.35;font-weight:500;color:var(--ink);pointer-events:none;animation:mp-fade .3s ease}
.flow-note[hidden]{display:none}
.flow-note .fn-step{flex:none;font-size:var(--fs-1);font-weight:700;color:var(--signal-ink);background:var(--signal-soft);border-radius:999px;padding:1px 8px}
.stage:fullscreen .flow-note,.stage:-webkit-full-screen .flow-note{left:108px}
.stage-tools.show ~ .flow-note{max-width:calc(100% - 210px)}
@media (max-width: 600px){.flow-note{font-size:var(--fs-1);padding:7px 11px;left:12px;top:10px}}

/* power-on walkthrough: the step log (details panel, or a pop-up over the stage) */
.pw-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.pw-head h3{margin:0!important}
.p-sec p.pw-hint{font-family:var(--font-ui);font-size:var(--fs-1);line-height:1.4;color:var(--ink-3);margin:0 0 12px;max-width:none}
.pw-ctrl{display:flex;align-items:center;gap:4px}
.pw-btn{height:26px;padding:0 9px;border-radius:7px;border:1px solid var(--line);background:var(--bg);color:var(--ink-2);
  font:600 12px var(--font-ui);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.pw-btn.pw-ic{width:26px;padding:0}
.pw-btn.pw-run{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pw-btn svg{width:13px;height:13px}
.pw-btn:not(:disabled):hover,.pw-btn:not(:disabled):focus-visible{border-color:var(--accent);color:var(--ink)}
.pw-btn.pw-run:not(:disabled):hover,.pw-btn.pw-run:not(:disabled):focus-visible{color:var(--accent-ink)}
.pw-btn:disabled{opacity:.4;cursor:default}
.pw-btn .i-play{display:none}
.pw-btn.is-play .i-play{display:block}
.pw-btn.is-play .i-pause{display:none}

/* "How it works" on the I/O devices' inside views (engine.js, scenes/device-anims.js) */
.dv-bar{position:absolute;right:16px;bottom:14px;z-index:6;display:flex;align-items:center;gap:6px;padding:6px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.dv-bar[hidden]{display:none}
/* while it plays, the step note stands in for the diagram's own subtitle */
.stage:has(.dv-bar.running) .scene-title{opacity:0;transition:opacity .3s}
.dv-bar .pw-btn{height:32px}
.dv-bar .pw-btn.pw-ic{width:32px}
.dv-bar .pw-btn svg{width:14px;height:14px}
.dv-bar .dv-run{display:inline-flex;align-items:center;gap:7px;padding:0 14px;font-weight:700;font-size:var(--fs-2)}
.dv-bar .dv-run.is-stop svg{display:none}
.dv-bar:not(.running) .pw-ctrl .pw-ic:not(.sfx-btn){display:none}
.pw-btn.sfx-btn.is-off{color:var(--ink-3)}
.sfx-pop{position:fixed;z-index:1000;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 6px 6px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow),0 12px 30px -12px rgba(0,0,0,.35);color:var(--ink)}
.sfx-pop[hidden]{display:none}
.sfx-pop.below{flex-direction:column-reverse;padding:6px 6px 10px}
.sfx-pop .pw-btn{width:32px;height:32px}
.sfx-pop .pw-btn svg{width:15px;height:15px}
/* vertical: bottom is 0, top is 100 */
.sfx-pop input[type=range]{writing-mode:vertical-lr;direction:rtl;width:28px;height:130px;margin:0;accent-color:var(--accent);cursor:pointer}
.sfx-pop output{font:600 12px var(--font-ui);color:var(--ink-2);text-align:center;min-width:40px}
.dv-note{max-width:min(720px,calc(100% - 80px))}
.dv-note .fn-txt{font-size:var(--fs-2);line-height:1.45}
.dv-note .fn-step{font-size:var(--fs-1)}
.dv-note .fn-txt > b{color:var(--ink)}
.dfx{pointer-events:none}
.dfx-dot{stroke:var(--surface);stroke-width:2;filter:drop-shadow(0 0 4px currentColor)}
.dfx-bits{font:700 13px var(--font-mono,ui-monospace,monospace);fill:var(--signal-ink);stroke:var(--surface);stroke-width:4px;paint-order:stroke;letter-spacing:.04em}
.dfx-wave{fill:none;stroke-width:4;stroke-linecap:round}
.dfx-sine{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.dfx-ring{fill:none;stroke-width:3}
.dfx-spoke{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round}
.dfx-roll{fill:none;stroke:var(--signal);stroke-width:6;stroke-dasharray:8 16;stroke-linecap:round}
.dfx-ink{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round}
.dfx-tag rect{fill:var(--surface);stroke:var(--signal);stroke-width:1.5}
.dfx-tag text{font:600 12.5px var(--font-ui,system-ui,sans-serif);fill:var(--ink)}
/* the nine device diagrams: text a quarter bigger, to read clearly (part names: DLB in scenes/devices.js) */
.devscene .t-xs{font-size:var(--ts-2)}
.devscene .t-sm{font-size:var(--ts-3)}
.devscene .dfx-tag text{font-size:var(--ts-1)}
.devscene .dfx-bits{font-size:var(--ts-1)}
@media (max-width: 760px){
  .dv-bar{right:10px;bottom:10px;padding:5px}
  .dv-bar .dv-run{font-size:var(--fs-1);padding:0 11px}
}
/* one-column layout (tablets, phones): the note goes just below the diagram, so it never covers the drawing */
.stage .dv-note.center{left:50%;right:auto;transform:translateX(-50%);max-width:min(680px,calc(100% - 160px))}
.dv-note.below.center{transform:none}
.dv-note.below{position:static;width:auto;max-width:none;margin:0;box-shadow:none;align-items:flex-start}
.dv-note.below .fn-txt{font-size:var(--fs-2)}
/* what is always powered / what a press changes: lit lines over the cables and the PWR_SW# wire */
.pw-glow{fill:none;stroke:var(--signal);stroke-linecap:round;opacity:0;pointer-events:none;transition:opacity .35s,stroke-width .35s;filter:drop-shadow(0 0 3px var(--signal))}
.pw-glow.pw-sb,.pw-glow.pw-sb-mb,.pw-glow.pw-main{stroke:var(--power);stroke-dasharray:2 11;filter:drop-shadow(0 0 4px var(--power))}
.pw-standby .pw-sb,.pw-standby .pw-sb-mb,.pw-standby .pw-sw{opacity:.95}
.pw-standby.pw-low .pw-sw{opacity:0}
.pw-rails .pw-main{opacity:.95}
.pw-rails .pw-sb-mb{stroke-width:4}
.pw-standby .pw-sb,.pw-standby .pw-sb-mb,.pw-rails .pw-main{animation:pw-flow .7s linear infinite}
.pw-glow.pw-sb{animation-direction:reverse}    /* the cord carries current from the wall plug into the PSU */
.pw-kind-power .flow-lit{filter:drop-shadow(0 0 8px var(--power))}
.pw-low .hot[data-id="power-button"] .m-panel{transform:scale(.82);transform-box:fill-box;transform-origin:center}
.pw-log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.pw-log li{display:flex;gap:10px;align-items:flex-start;animation:mp-fade .35s ease}
.pw-log .pw-n{flex:none;min-width:24px;height:24px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-1);font-weight:700;color:var(--signal-ink);background:var(--signal-soft)}
.pw-log b{display:block;font-size:var(--fs-2);font-weight:700;color:var(--ink);line-height:1.3}
.pw-log p{margin:2px 0 0;font-size:var(--fs-1);line-height:1.45;color:var(--ink-2)}
.pw-log p b{display:inline;font-size:inherit;color:var(--ink)}
.pw-log li:last-child .pw-n{background:var(--signal);color:var(--accent-ink)}
/* bottom-left, over the keyboard/printer area, so it doesn't hide the tower where the flow happens */
.flow-pop{position:absolute;left:16px;bottom:16px;z-index:5;width:min(420px,calc(100% - 32px));height:min(46%,380px);display:flex;flex-direction:column;
  border-radius:14px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
.flow-pop[hidden]{display:none}
/* stands out from the diagram: accent border and header, a dark shadow in light mode, a light glow in dark mode */
.flow-pop{border:2px solid var(--accent);box-shadow:0 0 0 4px var(--accent-soft),0 24px 50px -14px rgba(0,0,0,.6),0 6px 14px -6px rgba(0,0,0,.35)}
[data-theme="dark"] .flow-pop{box-shadow:0 0 0 4px var(--accent-soft),0 0 28px -2px var(--accent-glow),0 18px 44px -14px rgba(255,255,255,.22)}
.flow-pop .fp-head{background:var(--accent-soft);border-bottom-color:var(--accent-glow)}
.flow-pop .fp-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px 8px 14px;border-bottom:1px solid var(--line);font-size:var(--fs-2);color:var(--ink)}
.flow-pop .fp-tools{display:flex;align-items:center;gap:8px}
.flow-pop .fp-close{flex:none;width:26px;height:26px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink-2);font-size:var(--fs-3);line-height:1;cursor:pointer}
.flow-pop .fp-close:hover,.flow-pop .fp-close:focus-visible{border-color:var(--accent);color:var(--ink)}
.flow-pop .pw-log{flex:1;min-height:0;overflow:auto;padding:12px 14px 14px}
@media (max-width: 700px){.flow-pop{height:min(40%,300px)}}
@keyframes device-pulse{0%,100%{filter:none}50%{filter:drop-shadow(0 0 10px var(--signal))}}
.tree ul{list-style:none;margin:0;padding-left:18px;border-left:1px solid var(--line-2)}
.tree>ul{padding-left:0;border:0}
.tree li{margin:2px 0}
.tree a{text-decoration:none;color:inherit;border:0;background:none;padding:5px 8px;border-radius:8px;cursor:pointer;font-size:var(--fs-3);font-weight:500;text-align:left;display:inline-flex;gap:8px;align-items:baseline}
.tree a:hover{background:var(--accent-soft);color:var(--accent)}
.tree a small{font-size:var(--fs-1);color:var(--ink-3);font-weight:600;font-variant-numeric:tabular-nums}
.tree .cur{color:var(--accent);font-weight:700}

/* ==========================================================
   SVG illustration styles
   ========================================================== */
.scene text{font-family:var(--font-ui)}
.t{fill:var(--i-text);font-size:var(--ts-3);font-weight:600}
.t-xs{font-size:var(--ts-1);font-weight:600}
.t-sm{font-size:var(--ts-2);font-weight:500}
.t-lg{font-size:var(--ts-4);font-weight:700;letter-spacing:-.01em}
.t-xl{font-size:var(--ts-5);font-weight:800;letter-spacing:-.02em}
.t-mid{text-anchor:middle}.t-end{text-anchor:end}
.t-inv{fill:var(--i-text-inv)}
.t-mut{fill:var(--i-text-mut)}
.t-die{fill:var(--i-die-text)}
.t-num{font-variant-numeric:tabular-nums}
.t-glyph{font-size:var(--ts-5);font-weight:300;fill:var(--i-text)}
.t-expr{font-size:var(--ts-5);font-weight:700;fill:var(--i-text);letter-spacing:-.01em}
.ol{text-decoration:overline}

.m-case{fill:var(--i-case);stroke:var(--i-case-edge);stroke-width:2}
.m-cavity{fill:var(--i-cavity)}
.m-shadow{fill:#000;opacity:.12}
.m-board{fill:url(#g-board);stroke:var(--i-board-edge);stroke-width:2}
.m-chip{fill:var(--i-chip);stroke:var(--i-chip-edge);stroke-width:1.5}
.m-plastic{fill:var(--i-chip-edge);stroke:var(--i-chip);stroke-width:1}
.m-slot{fill:#241C3C;stroke:#120C22;stroke-width:1}
[data-theme="dark"] .m-slot{fill:#0B0716;stroke:#372C58}
.m-metal{fill:var(--i-metal);stroke:var(--i-metal-edge);stroke-width:1.5}
.m-metal2{fill:var(--i-metal-2);stroke:var(--i-metal-edge);stroke-width:1.5}
.m-metal-lt{fill:var(--i-metal-lt);stroke:var(--i-metal-edge);stroke-width:1.5}
.m-gold{fill:var(--i-gold)}
.m-copper{fill:var(--i-copper)}
.m-panel{fill:url(#g-panel);stroke:var(--i-panel-edge);stroke-width:1.5}
.m-block{fill:url(#g-block);stroke:var(--i-panel-edge);stroke-width:1.5}
.m-die{fill:var(--i-die);stroke:var(--i-die-edge);stroke-width:1.5}
.m-die-block{fill:var(--i-die-block);stroke:var(--i-die-edge);stroke-width:1.5}
.m-die-cell{fill:var(--i-die-cell)}
.m-hole{fill:var(--i-hole);stroke:var(--i-board-edge);stroke-width:1.5}
.m-accent{fill:var(--accent)}
.m-acc-soft{fill:url(#g-acc);stroke:var(--accent);stroke-width:1.5}
.m-on{fill:var(--signal)}
.m-fan{fill:var(--i-fan);stroke:var(--i-metal-edge);stroke-width:2}
.blades path{fill:var(--i-blade)}
.m-hub{fill:var(--i-chip-edge)}
.ln{fill:none;stroke:var(--i-wire);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ln-thin{fill:none;stroke:var(--i-wire);stroke-width:1.2}
.ln-trace{fill:none;stroke:var(--i-trace);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.ln-die{fill:none;stroke:var(--i-die-edge);stroke-width:1.5}
.ln-dash{fill:none;stroke:var(--i-wire);stroke-width:1.6;stroke-dasharray:6 6}
.arr{fill:none;stroke:var(--i-wire);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.arr-h{fill:var(--i-wire)}
.arr.on{stroke:var(--signal)} .arr-h.on{fill:var(--signal)}
.m-cable{fill:none;stroke:#2A2E2C;stroke-width:12;stroke-linecap:round;opacity:.85}

/* logic */
.g-body{fill:var(--i-sym-fill);stroke:var(--i-sym);stroke-linejoin:round}
.g-back{fill:none;stroke:var(--i-sym)}
.g-bub{fill:var(--i-sym-fill);stroke:var(--i-sym)}
.wire{fill:none;pointer-events:none;stroke:var(--i-wire);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
.wire.on{stroke:var(--signal)}
.rail0{fill:none;stroke:var(--i-wire);stroke-width:3;stroke-linecap:round}
.zero-src rect{fill:var(--i-panel);stroke:var(--i-wire);stroke-width:2}
.zero-src text{font-size:var(--ts-1);font-weight:700;text-anchor:middle;fill:var(--i-text)}
.junc{fill:var(--i-wire);transition:fill .2s}.junc.on{fill:var(--signal)}
.ctl{cursor:pointer}
.sw-track{fill:var(--i-block);stroke:var(--i-panel-edge);stroke-width:1.5;transition:fill .2s,stroke .2s}
.sw.on .sw-track{fill:var(--signal-soft);stroke:var(--signal)}
.sw-knob{fill:var(--i-panel);stroke:var(--i-sym);stroke-width:2;transition:transform .2s ease}
.sw.on .sw-knob{transform:translateX(26px);fill:var(--signal);stroke:var(--signal)}
.sw-val{font-size:var(--ts-1);font-weight:700;fill:var(--i-text);pointer-events:none;text-anchor:middle;transition:transform .2s ease}
.sw.on .sw-val{transform:translateX(26px);fill:var(--signal-ink)}
.sw:hover .sw-track{stroke:var(--accent)}
.led-c{fill:var(--i-block);stroke:var(--i-sym);stroke-width:2;transition:fill .2s}
.led-c.on{fill:var(--signal);stroke:var(--signal)}
.led-c.on + .led-v{fill:var(--signal-ink)}
.led-v{font-size:var(--ts-1);font-weight:700;text-anchor:middle;fill:var(--i-text);pointer-events:none}
.btn-s rect{fill:var(--i-panel);stroke:var(--i-panel-edge);stroke-width:1.5;transition:all .15s}
.btn-s text{font-size:var(--ts-1);font-weight:600;fill:var(--i-text);text-anchor:middle;pointer-events:none}
.btn-s:hover rect{stroke:var(--accent);filter:drop-shadow(0 4px 12px var(--accent-glow))}
.btn-s.on rect{fill:url(#g-on);stroke:var(--accent)}
.btn-s.on text{fill:var(--accent-ink)}
.btn-s[style] text{font-size:inherit}   /* a button's own font-size (set on the group) wins */
.mux-path{fill:none;stroke:var(--i-panel-edge);stroke-width:2;stroke-dasharray:4 5}
.mux-path.on{stroke:var(--signal);stroke-dasharray:none;stroke-width:3}
.bit{fill:var(--i-panel);stroke:var(--i-panel-edge);stroke-width:1.5;transition:fill .2s,stroke .2s}
.bit.on{fill:var(--signal-soft);stroke:var(--signal)}
.bit-t{font-size:var(--ts-4);font-weight:700;text-anchor:middle;fill:var(--i-text);font-variant-numeric:tabular-nums}

/* IC */
.m-ic{fill:var(--i-chip);stroke:var(--i-chip-edge);stroke-width:2}
.m-notch{fill:var(--i-chip-edge)}
.m-dot{fill:var(--i-chip-edge)}
.m-pin{fill:var(--i-metal);stroke:var(--i-metal-edge);stroke-width:1.2}
.pin{transition:opacity .2s}
.pin .m-pin{transition:fill .2s}
.pin.in .pin-l{fill:var(--pin-in)}
.pin.bi .pin-l{fill:var(--pin-bi)}
.pin.nc .pin-l{fill:var(--pin-nc)}
.pin.out .pin-l{fill:var(--pin-out)}
.pin.pwr .pin-l{fill:var(--pin-pwr)}
.pin-l{font-size:var(--ts-1);font-weight:700;text-anchor:middle}
.ic-dim .pin:not(.lit){opacity:.25}
.ic-dim .ukey:not(.lit){opacity:.6}
.pin.lit .m-pin{fill:var(--signal)}
.ukey{cursor:default;transition:opacity .2s}

/* animations */

/* hotspots */
.hot{cursor:pointer;outline:none;transform-box:fill-box;transform-origin:center;transition:transform .28s cubic-bezier(.2,.7,.2,1), filter .28s, opacity .4s}
.hit{fill:transparent}
.bar{text-decoration:overline}
.hot .hl{pointer-events:none;fill:transparent;stroke:var(--accent);stroke-width:2.5;opacity:0;transition:opacity .2s}
.hot.is-hover>.hl,.hot:focus-visible>.hl,.hot.sel>.hl,.hot.selected>.hl{opacity:1}
.hot.is-hover{transform:scale(1.025);filter:drop-shadow(0 8px 16px var(--accent-glow))}
.hot.flat.is-hover{transform:none;filter:none}
.hot.sel{filter:drop-shadow(0 0 14px var(--accent-glow))}
.hot.selected>.hl{stroke-dasharray:5 4}
.bg,.ov{transition:opacity .45s}
.ov{pointer-events:none}
.scene.zooming .bg,.scene.zooming .ov,.scene.zooming .hot:not(.sel):not(.sel-anc){opacity:.2}
.scene.zooming .sel .hot{opacity:1}
.scene.focus-mode .bg,.scene.focus-mode .ov{opacity:.28}
.scene.focus-mode .hot:not(.focused):not(.focus-anc){opacity:.22}
.scene.focus-mode .focused .hot{opacity:1}
.scene.focus-mode .focused>.hl{opacity:1;stroke-dasharray:6 6}
.scene.select-dim .bg,.scene.select-dim .ov{opacity:.42;filter:blur(3px) brightness(.62)}
.scene.select-dim .hot:not(.selected){opacity:.38;filter:blur(3.4px) brightness(.55)}
.scene.select-dim .lbl:not(.selected-lbl){opacity:.3;filter:blur(2.2px) brightness(.6)}
/* the stage's own background darkens too while something is in focus */
.stage{transition:box-shadow .35s ease}
.stage:has(.scene.select-dim){box-shadow:inset 0 0 0 3000px rgba(10,20,16,.16)}
:root[data-theme="dark"] .stage:has(.scene.select-dim){box-shadow:inset 0 0 0 3000px rgba(0,0,0,.32)}
/* focus: what isn't in focus fades and blurs, smoothly (power-on, "How it works", right-click, the camera/mic flows) */
.scene .bg,.scene .ov,.scene .hot,.scene .lbl{transition:opacity .35s ease,filter .35s ease}
@media (prefers-reduced-motion: reduce){.scene .bg,.scene .ov,.scene .hot,.scene .lbl{transition:none}}

/* ---------- signal flow, gate evaluation ---------- */
.flow{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:3 13;opacity:0;pointer-events:none;transition:opacity .2s}
.wire.on + .flow{opacity:.8;animation:flow .9s linear infinite}
@keyframes flow{to{stroke-dashoffset:-16}}
.gate-g .g-body,.gate-g .g-back,.gate-g .g-bub{transition:stroke .15s}
.gate-g.eval .g-body,.gate-g.eval .g-back,.gate-g.eval .g-bub{stroke:var(--signal)}
.gate-g.eval{filter:drop-shadow(0 0 6px var(--signal-soft))}

/* ---------- clickable bit cells & op buttons in SVG ---------- */
.bitc{cursor:pointer}
.bitc rect{fill:var(--i-panel);stroke:var(--i-panel-edge);stroke-width:1.5;transition:fill .2s,stroke .2s}
.bitc text{font-size:var(--ts-4);font-weight:700;text-anchor:middle;fill:var(--i-text);pointer-events:none;font-variant-numeric:tabular-nums}
.bitc.on rect{fill:url(#g-sig);stroke:var(--signal)}
.bitc:hover rect{stroke:var(--accent)}
.bitc.ro{cursor:default}.bitc.ro:hover rect{stroke:var(--i-panel-edge)}
.bitc.ro.on:hover rect{stroke:var(--signal)}
.unit-out{font-size:var(--ts-2);font-weight:700;fill:var(--i-text-mut);font-variant-numeric:tabular-nums}
.unit-out.on{fill:var(--signal-ink)}
[data-theme="dark"] .unit-out.on{fill:var(--signal)}
.m-block.active,.m-panel.active{stroke:var(--signal);stroke-width:2.5}
.flag rect{fill:var(--i-panel);stroke:var(--i-panel-edge);stroke-width:1.5;transition:fill .2s}
.flag text{font-size:var(--ts-2);font-weight:700;text-anchor:middle;fill:var(--i-text)}
.flag.on rect{fill:url(#g-flag);stroke:var(--signal)}
.flag.on text{fill:var(--signal-ink)}
.pill rect{fill:var(--i-block);stroke:var(--i-panel-edge);stroke-width:1.5;transition:fill .2s,stroke .2s}
.pill text{font-size:var(--ts-2);font-weight:700;text-anchor:middle;fill:var(--i-text-mut)}
.pill.on rect{fill:var(--accent);stroke:var(--accent)}
.pill.on text{fill:var(--accent-ink)}
.mem-row rect{fill:transparent;transition:fill .2s}
.mem-row.on rect{fill:var(--signal-soft)}
.mem-row.on text{fill:var(--i-text)}
.caption{font-size:var(--ts-3);font-weight:500;fill:var(--i-text)}

.colhl{fill:var(--signal-soft);stroke:var(--signal);stroke-width:1.5;stroke-dasharray:6 5;opacity:0;transition:opacity .2s}
.colhl.on{opacity:1}
.m-acc-soft.active{stroke-width:3}
.cu-arr .arr{stroke-width:2.4}

/* ---------- name labels: drawn last so they sit on top of every component ---------- */
.labels{transition:opacity .4s}
.lbl{transition:transform .45s cubic-bezier(.2,.7,.2,1), opacity .3s}
.lbl text{font-weight:700;fill:var(--lbl-ink);transform-box:fill-box;transform-origin:center;transition:transform .18s, fill .18s}
.lbl.inv text{fill:var(--i-text-inv)}
.lbl[data-for]{cursor:pointer}
.lbl.hover text{fill:var(--lbl-hi);transform:scale(1.1);text-decoration:underline;text-decoration-thickness:2px}
.lbl.inv.hover text{fill:var(--lbl-hi-inv)}
.lbl-dot{transition:transform .18s;transform-box:fill-box;transform-origin:center}
.lbl.hover .lbl-dot{transform:scale(1.3)}
/* the arrow from a name to its part (the device diagrams) */
.lbl-ptr{fill:none;stroke:var(--lbl-ink);stroke-width:1.6;stroke-linecap:round;pointer-events:none;opacity:.75}
.lbl-ptr-h{fill:var(--lbl-ink);pointer-events:none;opacity:.75}
.lbl.hover .lbl-ptr{stroke:var(--lbl-hi);opacity:1} .lbl.hover .lbl-ptr-h{fill:var(--lbl-hi);opacity:1}
/* names inside a hotspot light up with it too */
.hot.is-hover > text.t,.hot.focused > text.t{fill:var(--lbl-hi)}
.hot.is-hover > text.t-inv,.hot.is-hover > text.t-die,.hot.focused > text.t-inv{fill:var(--lbl-hi-inv)}
.lbl-dot.in{fill:var(--accent)}
.lbl-dot.out{fill:var(--out)}
.scene.zooming .labels{opacity:.12}
.scene.focus-mode .lbl:not(.focused){opacity:.28}
.lbl.dragging{transition:none}
.legend text{font-size:var(--ts-1);font-weight:600;fill:var(--i-text)}

/* ---------- draggable parts ---------- */
.dragwrap{transition:transform .45s cubic-bezier(.2,.7,.2,1);cursor:grab;touch-action:none}
.dragwrap .hot{cursor:grab}
.dragwrap.dragging{transition:none;cursor:grabbing}
.dragwrap.dragging .hot{cursor:grabbing;filter:drop-shadow(0 16px 24px rgba(0,0,0,.30))}
.conn,.cables{transition:opacity .3s}
.scene.moved .conn,.scene.moved .cables{opacity:0}
.m-screen{fill:var(--i-screen)}
.stage-tools{position:absolute;right:16px;top:16px;z-index:4;display:none;gap:8px}
.stage-tools.show{display:flex}
.chip i.in{background:var(--accent)} .chip i.out{background:var(--out)}
.p-sec p.p-sub{margin:16px 0 8px;font-family:var(--font-ui);font-size:var(--fs-2);line-height:1.4;font-weight:700;color:var(--ink-3)}

/* ---------- instruction tables and chip lists ---------- */
.ic-list{display:grid;gap:10px}
table.instr{width:100%;border-collapse:collapse;font-family:var(--font-ui);font-size:var(--fs-2)}
table.instr th{text-align:left;font-size:var(--fs-1);font-weight:700;color:var(--ink-3);padding:6px 8px;border-bottom:1.5px solid var(--line)}
table.instr td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2);line-height:1.45}
table.instr td:first-child{white-space:nowrap}
table.instr code{font-family:var(--font-mono);font-weight:700;color:var(--ink);font-size:var(--fs-2)}

/* ---------- chip internals ---------- */
.ib{fill:var(--i-panel);stroke:var(--i-panel-edge);stroke-width:1.5}
.ib.acc{fill:var(--accent-soft);stroke:var(--accent)}
.ib.dk{fill:var(--i-die-block);stroke:var(--i-die-edge)}
.ib-t{font-size:var(--ts-1);font-weight:700;fill:var(--i-text);text-anchor:middle}
.ib-s{font-size:var(--ts-1);font-weight:500;fill:var(--i-text-mut);text-anchor:middle}
.ib.dk + .ib-t,.ib.dk ~ .ib-t.dk{fill:var(--i-die-text)}
.ia{fill:none;stroke:var(--i-wire);stroke-width:2}
.ia-h{fill:var(--i-wire)}
.ipin{font-size:var(--ts-1);font-weight:700}
.ipin.in{fill:var(--pin-in)} .ipin.out{fill:var(--pin-out)} .ipin.bi{fill:var(--pin-bi)} .ipin.pwr{fill:var(--pin-pwr)}
.chip-body-in{fill:var(--i-block);stroke:var(--i-chip-edge);stroke-width:2}
.pin-dot{fill:var(--i-wire)}
.btn-s.dis{opacity:.45;cursor:not-allowed}
/* 8086 page: buses, moving dot, memory, queue, program list */
.busline{cursor:default}
.bus-hit{fill:transparent}
.bus-line{fill:none;stroke:var(--i-sym);stroke-width:7;stroke-linecap:round;opacity:.55;transition:stroke .25s,opacity .25s,stroke-width .25s}
.busline:hover .bus-line,.busline:focus-visible .bus-line{opacity:1;stroke-width:9;stroke:var(--accent)}
.busline.on .bus-line{opacity:1;stroke:var(--signal);stroke-width:9}
.flow-dot{fill:url(#g-led);stroke:var(--signal);stroke-width:2;filter:drop-shadow(0 0 6px var(--signal))}
.flow-track{fill:none;stroke:var(--signal);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.flow-lab{font-size:13px;font-weight:700;font-family:var(--font-mono);fill:var(--i-text);paint-order:stroke;stroke:var(--surface);stroke-width:4px}
.qcell.flush rect{stroke-dasharray:4 3;opacity:.5}
.x86-outbox{height:60px;overflow:auto;font-family:var(--font-mono);font-size:14px;line-height:1.45;color:var(--i-text);white-space:pre-wrap;word-break:break-all}
.x86-outbox.lit{color:var(--accent);font-weight:700}

/* 8086 architecture view */
.band-biu{fill:url(#g-biu);stroke:var(--signal);stroke-width:1.5;stroke-opacity:.55}
.band-eu{fill:url(#g-eu);stroke:var(--accent);stroke-width:1.5;stroke-opacity:.5}
.bus86{fill:none;stroke:var(--i-sym);stroke-width:8;stroke-linecap:round;transition:stroke .25s}
.bus86.on{stroke:var(--signal)}
.qcell rect{fill:url(#g-panel);stroke:var(--i-panel-edge);stroke-width:1.2;transition:fill .25s,stroke .25s}
.qcell.empty rect{stroke-dasharray:3 3;opacity:.6}
.qcell.on:not(.empty) rect{fill:url(#g-sig);stroke:var(--signal);stroke-width:2}
.alu86.active{stroke:var(--signal);stroke-width:3}
[data-reg] rect{transition:fill .3s,stroke .3s}
.flag.keep rect{opacity:.35}.flag.keep text{opacity:.5}
/* 8086 ALU: clickable flags going in, changed flags coming out */
.flag.fin{cursor:pointer}
.flag.fin:hover rect{stroke:var(--accent)}
.flag.fin:not(.on) rect{fill:var(--i-panel)}
.flag.fin.on rect{fill:var(--signal-soft);stroke:var(--signal)}
.flag.fin.on text{fill:var(--i-text)}
.flag.fout.chg rect{stroke:var(--accent);stroke-width:3}
/* 8086 ALU: registers and memory */
.memc{cursor:pointer}
.memc rect{fill:var(--i-panel);stroke:var(--i-panel-edge);stroke-width:1.5;transition:fill .25s,stroke .25s}
.memc text{font-family:var(--font-mono);font-weight:600;text-anchor:middle;fill:var(--i-text);pointer-events:none}
.memc:hover rect{stroke:var(--accent)}
.memc.pick rect{stroke:var(--accent);stroke-dasharray:4 3}
.memc.sel rect{fill:var(--accent-soft);stroke:var(--accent);stroke-width:2.5}
.memc.will rect,[data-reg].will rect{stroke:var(--signal);stroke-width:2.5;stroke-dasharray:5 3}
.memc.flash rect,[data-reg].flash rect{fill:var(--signal-soft);stroke:var(--signal);stroke-dasharray:none}

/* ---------- mobile parts strip & touch pads ---------- */
.strip{display:none}
.tap-pad{fill:transparent!important;stroke:none!important}
.nojs{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;color:var(--ink-3);font-size:var(--fs-2)}
.js .nojs{display:none}
.live{margin-top:10px;padding:12px 14px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line-2);font-size:var(--fs-2);line-height:1.5;color:var(--ink-2)}
.live b{color:var(--ink)}

/* collapsible details panel (wide screens only; on small screens the panel sits below) */
.panel-btn{margin-left:auto}
@media (min-width: 981px){
  .panel-hidden .main{grid-template-columns:minmax(0,1fr)}
  .panel-hidden .panel{display:none}
}
@media (prefers-reduced-motion: reduce){
  *{transition-duration:.01ms!important;animation:none!important}
  .flow{display:none}
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .panel-btn{display:none}
  .app{height:auto;min-height:100dvh}
  .main{grid-template-columns:1fr;padding:0 12px 16px}
  .stage{height:62vh;height:62dvh;min-height:360px;max-height:640px}
  .panel{overflow:visible}
  .topbar{padding:12px 14px 8px}
  .toolbar{padding:0 12px 10px}
  .strip{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 4px;margin:-4px 0 0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .strip::-webkit-scrollbar{display:none}
  .strip .chip{flex:none;min-height:44px;padding:10px 15px;background:var(--surface)}
  .strip .chip.cur{border-color:var(--section);background:var(--section-soft);color:var(--section)}
  .strip .strip-label{flex:none;align-self:center;font-size:var(--fs-1);font-weight:600;color:var(--ink-3);padding:0 2px 0 4px}
  .btn{height:44px;min-width:44px}
  .btn.icon{width:44px}
  .crumbs a,.crumbs button{padding:10px 6px}
}
@media (max-width: 600px){
  .hint{display:none}
  .btn .lbl{display:none}
  .btn{padding:0 10px}
  .panel-inner{padding:22px 18px 32px}
  .stage{height:auto;min-height:0;aspect-ratio:1000/900}
  .stage-tools{top:auto;right:auto;left:10px;bottom:10px}
  .stage-tools .btn{height:40px;font-size:var(--fs-2)}
  .zoom-btn{display:inline-flex;position:absolute;right:10px;bottom:10px;z-index:4;height:40px;min-width:0;font-size:var(--fs-2);background:var(--surface)}
  .zoom-btn[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
  .stage.magnified{aspect-ratio:auto;height:calc((100vw - 24px) * 1.3)}
  .stage.is-html{aspect-ratio:auto;height:82vh;height:82dvh;max-height:760px}
  .stage.is-html .zoom-btn{display:none}
  .stage.magnified .scroller{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
  .stage.magnified #layers{right:auto;width:200%}
  .cmp{grid-template-columns:1fr}
}

/* ---------- generic HTML scene ---------- */
.html-scene{overflow:auto;padding:18px 18px 18px;font-family:var(--font-ui);color:var(--ink)}
.btn-p{background:linear-gradient(160deg, var(--g-on-a), var(--g-on-b));border-color:var(--accent);color:var(--on-accent,#fff)}
.btn.btn-p:hover,.btn.btn-p:focus-visible{color:var(--on-accent);background:linear-gradient(160deg, var(--g-on-a), var(--g-on-b));border-color:var(--accent)}
.btn-p:hover:not(:disabled){filter:brightness(1.08)}

/* ==========================================================
   The 8086 page (scenes/i8086.js)
   Everything is namespaced under .s86 so the other diagrams,
   which share class names like .flag, are left alone.
   ========================================================== */
/* The 8086 diagrams are packed tight, so they keep the sizes they were drawn with instead of the
   site's five-step scale: here, and in the ALU's 8086 mode (.a86, scenes/alu86.js). */
.s86 .t,.a86 .t{font-size:18.5px}
.a86 .t-xs{font-size:14.5px} .a86 .t-sm{font-size:16.5px} .a86 .t-lg{font-size:24px} .a86 .t-xl{font-size:36px}
.a86 .sw-val{font-size:14px} .a86 .led-v{font-size:15px} .a86 .btn-s text{font-size:16px} .a86 .bit-t{font-size:22px}
.a86 .bitc text{font-size:23px} .a86 .unit-out{font-size:16.5px} .a86 .flag text{font-size:16.5px} .a86 .pill text{font-size:16.5px}
.a86 .caption{font-size:18.5px} .a86 .legend text{font-size:16px} .a86 .btn-s[style] text{font-size:inherit}
.s86 .ttl{font-size:24px;font-weight:700;fill:var(--i-text)}
.s86 .lab{font-size:18.5px;font-weight:600;fill:var(--i-text-mut);letter-spacing:.02em}
.s86 .sn{font-size:19.5px;font-weight:600;fill:var(--i-text)}
.s86 .sig{font-size:25px;font-weight:700;fill:var(--i-text)}
.s86 .val{font-family:var(--font-mono);font-size:19px;font-weight:700;fill:var(--i-text)}
.s86 [data-txt="cu"]{font-size:15.5px}   /* the control unit's own box is too narrow for the general value size */
.s86 .asm{font-family:var(--font-mono);font-size:17.5px;font-weight:600;fill:var(--i-text)}
.s86 .story{font-size:19.5px;font-weight:500;fill:var(--i-text-mut)}
.s86 .acc{fill:var(--accent)}
.s86 .val.t-mut{fill:var(--i-text-mut);font-weight:600}
.s86 .rule86{stroke:var(--i-panel-edge);stroke-width:1.2}
/* the BIU, the EU and RAM each carry their own colour */
.s86 .band-biu{stroke:var(--biu);stroke-opacity:.75;stroke-width:1.8}
.s86 .band-eu{stroke:var(--eu);stroke-opacity:.7;stroke-width:1.8}
.s86 .biu-t{fill:var(--biu)} .s86 .eu-t{fill:var(--eu)} .s86 .ram-t{fill:var(--ram)}
.s86 .ram-panel{stroke:var(--ram);stroke-opacity:.6;stroke-width:1.8}

/* the three bus colours, used by the trunk lines, the key and the dot */
.s86 .b-addr{--bc:var(--bus-a)} .s86 .b-data{--bc:var(--bus-d)}
.s86 .b-ctrl{--bc:var(--bus-c)} .s86 .b-int{--bc:var(--eu)}
.s86 .bus-line{stroke:var(--bc);stroke-width:6;opacity:.5}
.s86 .busline:hover .bus-line,.s86 .busline:focus-visible .bus-line{opacity:.95;stroke-width:8;stroke:var(--bc)}
.s86 .busline.on .bus-line{opacity:1;stroke:var(--bc);stroke-width:9;filter:drop-shadow(0 0 7px var(--bc))}
.s86 .bus-key{stroke:var(--bc);stroke-width:5;stroke-linecap:round}
.s86 .flow-lab{text-anchor:middle;font-size:14px}
.s86 .flow-dot{fill:var(--bc,var(--signal));stroke:var(--surface);stroke-width:1.5;filter:drop-shadow(0 0 8px var(--bc,var(--signal)))}
.s86 .flow-track{fill:none;stroke:var(--bc,var(--signal));stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round;opacity:.9;filter:drop-shadow(0 0 5px var(--bc,var(--signal)));transition:opacity .15s}

/* wiring inside the chip */
.s86 .w86{fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;opacity:.75}
.s86 .w86.a{stroke:var(--bus-a)} .s86 .w86.d{stroke:var(--bus-d)} .s86 .w86.c{stroke:var(--bus-c)}
.s86 .w86.t{stroke-width:1.4;opacity:.55}
.s86 .bus86{stroke:var(--eu);stroke-width:7;opacity:.45}

/* blocks that light up while a move is on screen */
.s86 .m-block.lit{fill:url(#g-sig);stroke:var(--signal);stroke-width:2.4}
.s86 [data-half].lit{fill:url(#g-sig);stroke:var(--signal);stroke-width:2.4}
.s86 .m-acc-soft.active,.s86 .m-block.active{stroke:var(--signal);stroke-width:3}
.s86 .qcell.flush rect{stroke-dasharray:4 3;opacity:.45}
.s86 .flag rect{stroke-width:1.2}
.s86 .flag .fn{font-size:11.5px;font-weight:700;text-anchor:middle;fill:var(--i-text-mut)}
.s86 .flag .fv{font-size:16.5px;font-weight:700;text-anchor:middle;fill:var(--i-text)}
.s86 .flag.on .fn{fill:var(--signal-ink)}
.s86 .flag.chg rect{stroke:var(--accent);stroke-width:2.6}

.s86 .btn-s text{font-size:17.5px}   /* Play/Step/Reset, which carry no inline font-size of their own */

/* one frame per segment, so CS/DS/SS/ES read as four distinct boxes rather
   than rows loose on the RAM panel's own background -- all four the same
   colour, so the box reads as "a segment", not as which one it is (that's
   what the label inside is for) */
.s86 .seg-box{stroke-width:1.6;opacity:.9;stroke:var(--signal)}

/* each segment box is real HTML (a foreignObject), not fixed SVG rows, so
   it can hold as many rows as the program actually touched and scroll once
   there are more than fit -- the same pattern the flow list on the left
   already uses. Bigger type throughout, since this is meant to be read. */
.x86-segbox{height:100%;width:100%;box-sizing:border-box;display:flex;flex-direction:column;font-family:var(--font-ui);overflow:hidden}
.x86-seghead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:8px 12px 4px;flex:none}
.x86-seghead b{font-size:19px;font-weight:700;color:var(--i-text)}
.x86-seghead span{font-family:var(--font-mono);font-size:16px;color:var(--i-text-mut)}
.x86-segcols{display:grid;grid-template-columns:110px 1fr 1fr;padding:2px 12px 6px;flex:none;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--i-text-mut)}
.x86-segbox[data-segbox="SS"] .x86-segcols,.x86-segbox[data-segbox="ES"] .x86-segcols{grid-template-columns:110px 1fr}
.x86-segrows{flex:1;overflow-y:auto;min-height:0;border-top:1px solid var(--i-panel-edge)}
.x86-segempty{padding:14px 12px;font-size:16px;color:var(--i-text-mut)}
.x86-crow,.x86-srow{display:grid;grid-template-columns:110px 1fr 1fr;align-items:center;gap:8px;padding:0 12px;height:34px;font-family:var(--font-mono);font-size:17px;color:var(--i-text);cursor:default;border-bottom:1px solid var(--i-panel-edge, transparent)}
.x86-crow{cursor:pointer}
.x86-segbox[data-segbox="SS"] .x86-srow,.x86-segbox[data-segbox="ES"] .x86-srow{grid-template-columns:110px 1fr}
.x86-crow .t{font-family:var(--font-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x86-crow .n,.x86-srow .n{font-family:var(--font-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--i-text-mut)}
.x86-crow:hover{background:var(--accent-soft)}
.x86-crow.cur{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.x86-crow.done{color:var(--i-text-mut)}
.x86-crow.lit,.x86-srow.lit{background:var(--signal-soft);box-shadow:inset 3px 0 0 var(--signal)}

/* the narration box (bottom right) and the control-strip buttons (left) are UI
   around the simulation, not part of the chip itself — shaded a touch darker
   than the chip's own blocks so that reads at a glance */
.s86 .m-block.meta{fill:var(--meta-bg)}
.s86 .btn-s rect{fill:var(--meta-bg)}

/* the animation-speed slider (a single continuous 0-100 range, not fixed
   presets — 0 is instant, 100 is the slowest the flow ever plays) */
.x86-speed{height:34px;display:flex;align-items:center}
.x86-speed input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:4px;background:var(--meta-bg);border:1px solid var(--line);outline:none;cursor:pointer}
.x86-speed input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:linear-gradient(160deg,var(--g-on-a),var(--g-on-b));border:1px solid var(--accent);cursor:pointer}
.x86-speed input[type="range"]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:linear-gradient(160deg,var(--g-on-a),var(--g-on-b));border:1px solid var(--accent);cursor:pointer}
.x86-speed input[type="range"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- the panels drawn with HTML inside foreignObject ---- */
/* the example picker, collapsed to a single combo box showing only the current pick */
.x86-cur{height:64px;box-sizing:border-box;display:flex;align-items:stretch}
.x86-curbox{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;font-family:var(--font-ui);background:var(--meta-bg);border:1px solid var(--line);border-radius:12px;padding:8px 14px;box-sizing:border-box;cursor:pointer}
.x86-curbox:hover{border-color:var(--accent)}
.x86-cur:focus-visible .x86-curbox{border-color:var(--accent);outline:none}
.x86-curtxt{display:flex;flex-direction:column;gap:2px;overflow:hidden;min-width:0}
.x86-curtxt b{font-size:19px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x86-curtxt em{font-style:normal;font-size:15.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x86-curchev{width:20px;height:20px;flex:none;color:var(--ink-3)}

/* the full example list, shown only inside the overlay dropdown */
.x86-exs-ov{max-height:600px;overflow:auto;padding-right:6px}
.x86-exg{margin-bottom:10px}
.x86-exg b{display:block;font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:2px 0 5px}
.x86-exg button{font-family:var(--font-mono);font-size:15.5px;font-weight:700;padding:4px 8px;margin:0 5px 5px 0;border-radius:7px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.x86-exg button:hover{border-color:var(--accent);background:var(--accent-soft)}
.x86-exg button.on{background:linear-gradient(160deg,var(--g-on-a),var(--g-on-b));border-color:var(--accent);color:var(--on-accent)}
.x86-exg button.big{display:block;width:100%;margin:0 0 6px;text-align:left;font-family:var(--font-ui);font-size:17px;font-weight:600;padding:8px 10px;line-height:1.3}
.x86-exg button.big em{display:block;font-style:normal;font-size:15.5px;font-weight:500;color:var(--ink-3);margin-top:2px}
.x86-exg button.big.on em{color:var(--on-accent);opacity:.85}

.x86-flow{height:100%;overflow:auto;font-family:var(--font-ui);background:var(--meta-bg);border:1px solid var(--line);border-radius:12px;padding:4px 10px 8px;box-sizing:border-box}
.x86-flow .fg{display:flex;align-items:center;gap:7px;margin:10px 0 4px;font-size:16px;color:var(--ink-3)}
.x86-flow .fg .fn{flex:none;width:24px;height:24px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center}
/* the assembly instruction stands out — bigger, bold, in the accent colour */
.x86-flow .fg code{font-family:var(--font-mono);font-size:19.5px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x86-flow .fg i{margin-left:auto;font-style:normal;font-family:var(--font-mono);font-size:14px}
/* the micro-step list under it stays muted, so the instruction itself reads first */
.x86-flow .fl{display:flex;align-items:center;gap:7px;width:100%;text-align:left;font-size:16.5px;font-weight:400;line-height:1.34;padding:5px 7px;margin:1px 0 0 20px;width:calc(100% - 20px);border:0;border-radius:7px;background:none;color:var(--ink-3);cursor:pointer}
.x86-flow .fl:hover{background:var(--accent-soft);color:var(--ink)}
.x86-flow .fl .fb{flex:none;width:8px;height:8px;border-radius:50%;background:var(--bc,var(--accent))}
.x86-flow .fl.past{color:var(--ink-3);opacity:.55}
.x86-flow .fl.on{background:var(--signal-soft);color:var(--ink);font-weight:700;box-shadow:inset 3px 0 0 var(--signal)}
.x86-flow .x86-bad{margin:4px 0;font-size:16.5px;color:var(--pin-pwr)}

.x86-outbox{height:42px;overflow:auto;font-family:var(--font-mono);font-size:17px;line-height:1.4;color:var(--i-text);white-space:pre-wrap;word-break:break-all}
.x86-outbox.lit{color:var(--accent);font-weight:700}

.s86 .scrim86{fill:rgba(8,6,24,.5)}
.x86-ov{height:750px;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 18px;box-shadow:var(--shadow);font-family:var(--font-ui)}
.x86-ov .ovh{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.x86-ov h3{margin:0;font-size:21.5px;font-weight:700}
.x86-ov .prim{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:9px;padding:6px 14px;font-size:16px;font-weight:600;cursor:pointer}
.x86-ov .prim{background:linear-gradient(160deg,var(--g-on-a),var(--g-on-b));border-color:var(--accent);color:var(--on-accent)}
/* the same cross-sign close button as the rest of the site (the details
   card, the overview dialog), not the text "Close" this used to be */
.x86-ov .ovh button{flex:none;width:34px;height:34px;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--surface);border-radius:9px;color:var(--ink);cursor:pointer}
.x86-ov .ovh button svg{width:18px;height:18px}
.x86-ov .ovh button:hover{border-color:var(--accent);color:var(--accent)}
.x86-ov .orow{display:grid;grid-template-columns:126px 1fr 200px;gap:16px;width:100%;text-align:left;align-items:center;padding:5px 10px;border:0;border-radius:8px;background:none;color:var(--ink);font-size:17px;cursor:pointer}
.x86-ov .orow.head{color:var(--ink-3);font-size:14px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;cursor:default}
.x86-ov .orow:not(.head):hover{background:var(--accent-soft)}
.x86-ov .orow.sel{background:var(--signal-soft);font-weight:700}
.x86-ov .mono{font-family:var(--font-mono);font-size:15.5px}
.x86-ov .dim{color:var(--ink-3)}
.x86-ov .acc{color:var(--accent)}
.x86-ov .olist{flex:1;overflow:auto;min-height:0}
.x86-ov .odet{margin-top:10px;background:var(--surface-2);border-radius:12px;padding:10px 14px;font-size:17.5px;line-height:1.55;color:var(--ink-2)}
.x86-ov .odet p{margin:0 0 5px}
.x86-ov .odet p:last-child{margin:0}
.x86-ov .x86-ta{flex:1;width:100%;resize:none;font-family:var(--font-mono);font-size:16px;line-height:1.6;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.x86-ov .ovf{display:flex;align-items:center;gap:14px;margin-top:12px;font-size:15px;color:var(--ink-3)}

.x86-ov .x86-segref{flex:1;overflow:auto;min-height:0}
.x86-segtab{width:100%;border-collapse:collapse;font-size:16px;margin-bottom:16px}
.x86-segtab th,.x86-segtab td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--line)}
.x86-segtab th{color:var(--ink-3);font-size:13.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.x86-segtab td:first-child{font-family:var(--font-mono);font-weight:700;color:var(--accent)}
.x86-segnote{font-size:16px;line-height:1.55;color:var(--ink-2);margin:0 0 12px}
.x86-segmap{display:flex;flex-direction:column;gap:10px;margin:10px 0 14px}
.x86-segtrack{display:grid;grid-template-columns:34px 1fr 150px;align-items:center;gap:10px;font-size:14.5px}
.x86-segtrack b{font-family:var(--font-mono);color:var(--ink)}
.x86-segtrack em{font-family:var(--font-mono);font-style:normal;color:var(--ink-3);text-align:right}
.x86-segrail{position:relative;height:14px;border-radius:7px;background:var(--surface-2);overflow:hidden}
.x86-segbar{position:absolute;top:0;bottom:0;min-width:3px;border-radius:7px;background:var(--accent)}
.x86-segbar.seg-cs{background:var(--bus-a)}
.x86-segbar.seg-ds{background:var(--bus-d)}
.x86-segbar.seg-ss{background:var(--bus-c)}
.x86-segbar.seg-es{background:var(--ram)}
.x86-segfoot{font-family:var(--font-mono);font-size:14.5px;color:var(--ink-3);margin:4px 0 0}

.x86-exs-ov::-webkit-scrollbar,.x86-flow::-webkit-scrollbar{width:8px}
.x86-exs-ov::-webkit-scrollbar-thumb,.x86-flow::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.x86-exs-ov,.x86-flow{scrollbar-width:thin;scrollbar-color:var(--line) transparent}

/* ---------- the start screen (engine.js) ---------- */
.intro{position:fixed;inset:0;z-index:2000;opacity:0;transition:opacity .45s ease}
.intro.show{opacity:1}
.intro.leaving{opacity:0;pointer-events:none}
.intro.leaving-go{opacity:0;pointer-events:none;transition:opacity .6s ease .1s}
/* the hole: a circle over the power button whose huge shadow is the dark screen */
.intro-hole{position:fixed;border-radius:50%;border:0;padding:0;margin:0;background:transparent;cursor:pointer;
  box-shadow:0 0 0 200vmax rgba(0,0,0,.94),0 0 0 3px rgba(255,255,255,.85) inset;outline:none}
.intro-hole::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:3px solid var(--accent-2,#4DC39C);animation:intro-pulse 1.6s ease-out infinite}
.intro-hole:focus-visible{box-shadow:0 0 0 200vmax rgba(0,0,0,.94),0 0 0 4px #fff inset}
.intro-hole.nudge::after{animation:intro-pulse .5s ease-out 3}
.intro.leaving-go .intro-hole{transition:transform .6s ease;transform:scale(6)}
@keyframes intro-pulse{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion: reduce){.intro-hole::after{animation:none}.intro.leaving-go .intro-hole{transform:none}}
.intro-msg{position:fixed;max-width:280px;color:#fff;text-align:right;pointer-events:none}
.intro-msg b{display:block;font:700 22px/1.25 var(--font-ui);letter-spacing:-.01em}
.intro-msg span{display:block;margin-top:4px;font:500 15px/1.4 var(--font-ui);color:rgba(255,255,255,.72)}
.intro-skip{position:fixed;right:20px;bottom:20px;height:36px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.35);
  background:transparent;color:rgba(255,255,255,.8);font:600 14px var(--font-ui);cursor:pointer}
.intro-skip:hover,.intro-skip:focus-visible{color:#fff;border-color:#fff}

/* the first-visit intro's fast boot: only the diagram shows, the rest fades in afterwards */
.intro-cinema .topbar,.intro-cinema .toolbar,.intro-cinema .panel,.intro-cinema .strip,.intro-cinema .foot,.intro-cinema .fbk-btn,
.intro-cinema .hint,.intro-cinema .fs-btn,.intro-cinema .zoom-btn,.intro-cinema .flow-pop,.intro-cinema .dv-note,.intro-cinema .stage-tools{
  opacity:0 !important;visibility:hidden !important;pointer-events:none !important}
.intro-reveal .topbar,.intro-reveal .toolbar,.intro-reveal .panel,.intro-reveal .strip,.intro-reveal .foot,.intro-reveal .fbk-btn,.intro-reveal .hint,.intro-reveal .fs-btn{
  animation:intro-in .9s ease both}
.intro-reveal .panel,.intro-reveal .strip{animation-delay:.15s}
.intro-reveal .foot,.intro-reveal .fbk-btn{animation-delay:.3s}
@keyframes intro-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.intro-reveal *{animation:none !important}}
/* the film look: letterbox bars and a soft vignette while the intro's camera moves */
.cine{position:fixed;inset:0;z-index:1600;pointer-events:none}
.cine-bar{position:absolute;left:0;right:0;height:9vh;background:#000;transition:transform .8s cubic-bezier(.45,0,.2,1)}
.cine-bar.top{top:0;transform:translateY(-100%)}
.cine-bar.bottom{bottom:0;transform:translateY(100%)}
.cine.on .cine-bar{transform:none}
.cine-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.42) 100%);opacity:0;transition:opacity .8s ease}
.cine.on .cine-vignette{opacity:1}
.cinema-skip{z-index:2100;bottom:calc(4.5vh - 18px)}
.intro-cinema .stage{box-shadow:none;border:0}
.intro-cinema .stage .layer{will-change:transform}