.circuit-theme {
  color-scheme: dark;
  --paper: #0b1116;
  --ink: #e1ebe9;
  --muted: #9baeb6;
  --line: #263640;
  --maroon: #8be5c3;
  --maroon-dark: #b0f4dc;
  --sans: var(--mono);
  --mono: Menlo, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  background: var(--paper);
  color: var(--ink);
}
.circuit-home { height: 100dvh; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.circuit-home .navbar { min-height: 72px; padding-inline: 36px; border-color: var(--line); }
.circuit-home .navbar nav a, .circuit-home .wordmark { color: var(--ink); }
.circuit-home .navbar nav a:hover, .circuit-home .navbar nav a[aria-current] { color: var(--maroon); }
.circuit-home .navbar nav .nav-contact { border-color: #3a5059; }
.circuit-home .builder-avatar img { border-color: #3a5059; }
.circuit-home .scroll-progress { display: none; }
.circuit-main { min-width: 0; min-height: 0; display: flex; }
.circuit-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.die-label { font: .67rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.circuit-experience { flex: 1; min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border-block: 1px solid var(--line); }
.board-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 36px; border-bottom: 1px solid #1b2b33; }
#circuit-help { margin-left: auto; color: var(--muted); font: .7rem var(--mono); }
.board-controls { display: flex; gap: 6px; }
.board-controls button { display: grid; place-items: center; min-width: 44px; min-height: 36px; border: 1px solid #354b55; background: #111c23; color: var(--ink); cursor: pointer; font: 1rem var(--mono); }
.board-controls button:hover { border-color: var(--maroon); color: var(--maroon); }
.board-controls button:disabled { opacity: .3; cursor: default; }
.circuit-viewport { width: 100%; min-height: 0; container-type: size; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-color: #4a756b #101a20; scrollbar-width: thin; scroll-behavior: smooth; scroll-padding-inline: 45px; }
.circuit-viewport:focus-visible { outline: 2px solid var(--maroon); outline-offset: -3px; }
.circuit-die { position: relative; width: 4090px; height: 100%; }
.chip-wiring { position: absolute; inset: 0; width: 4090px; height: 100%; pointer-events: none; }
.ghost-wires { stroke: #1e303a; stroke-width: 1; }
.signal-trace { stroke: #365b57; stroke-width: 2; }
.signal-powered { stroke: #8be5c3; stroke-width: 2; stroke-dasharray: 0 1000; }
.signal-cursor { fill: #cbffea; stroke: #6cbfa3; stroke-width: 6; paint-order: stroke; transition: r .15s ease, stroke .15s ease; }
.signal-cursor.signal-in-component { r: 7; fill: #fff; stroke: #a3ffda; }
.logic-gate, .memory-unit { transform-box: fill-box; transform-origin: center; }
.is-transmitting > path, .is-transmitting > rect, .is-transmitting > circle { stroke: #c4ffe6; }
.is-transmitting > rect { fill: #1b4137; }
.node-branch { stroke: #4b7970; stroke-width: 1.5; }
.node-via { fill: #0b1116; stroke: #8be5c3; stroke-width: 2; }
.logic-gate { fill: #0b1116; stroke: #75ad9b; stroke-width: 1.5; }
.logic-gate text, .memory-unit text, .cache-unit text { stroke: none; fill: #829d9f; font: 10px var(--mono); letter-spacing: 1px; }
.memory-unit rect, .cache-unit rect { fill: #101d23; stroke: #50766e; stroke-width: 1.5; }
.memory-unit path { stroke: #69aa95; }
.memory-unit text:first-of-type { fill: #b8eed8; font-size: 15px; letter-spacing: 3px; }
.cache-unit path { stroke: #2e5551; }
.circuit-milestones { list-style: none; padding: 0; margin: 0; }
.circuit-node { position: absolute; left: var(--node-x); width: 272px; margin: 0; scroll-margin-inline: 45px; outline: 1px solid transparent; outline-offset: 10px; border-radius: 2px; transition: transform .2s ease, outline-color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.node-above { top: 26px; transform-origin: center bottom; }
.node-below { top: calc(48.4375cqh + 70px); transform-origin: center top; }
.circuit-node:focus-within { z-index: 5; }
@media (hover: hover) and (pointer: fine) {
  .circuit-node:hover { z-index: 5; transform: translateY(-3px); }
}
.node-date { display: block; font: .65rem/1.4 var(--mono); color: #9baeb6; }
.circuit-node h2 { font: 500 1.03rem/1.35 var(--sans); letter-spacing: -.02em; margin-block: 9px 12px; }
.circuit-node h2 a { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-height: 28px; }
.circuit-node h2 a:hover { color: var(--maroon); }
.circuit-node h2 a span { color: #8aa59e; font: .85rem var(--mono); }
.node-media { position: relative; border: 1px solid #30454e; background: #101a20; border-radius: 5px; overflow: hidden; animation: border-shimmer 6s ease-in-out infinite; }
@keyframes border-shimmer {
  0%, 100% { border-color: #30454e; }
  50% { border-color: #597369; }
}
.node-media > a { display: block; cursor: zoom-in; }
.node-media img { display: block; width: 270px; height: clamp(70px, calc(50cqh - 180px), 190px); object-fit: contain; object-position: center; }
#michigan .node-media img { object-fit: cover; }
.node-media img[src$=".svg"] { object-fit: contain; }
.node-media button { position: absolute; right: 7px; bottom: 7px; min-height: 32px; border: 1px solid #5c887b; background: #0b161eee; color: #dcf7ec; font: .62rem var(--mono); padding: 7px 10px; cursor: pointer; }
.node-media button:hover { background: #18392f; }
.node-details { margin-top: 7px; color: var(--muted); font: .65rem/1.6 var(--mono); }
.node-details summary { width: fit-content; cursor: pointer; min-height: 28px; display: flex; align-items: center; }
.node-details summary:hover { color: var(--maroon); }
.node-details[open] { position: absolute; z-index: 4; top: 26px; left: 0; right: 0; margin: 0; border: 1px solid #658b80; padding: 12px 16px 18px; background: #101d24; box-shadow: 0 10px 30px #0006; }
.node-details[open] summary { color: var(--maroon); }
.node-details p { color: #c7d5d8; font: .83rem/1.7 var(--sans); margin-top: 9px; }
.circuit-years { display: flex; align-items: center; gap: 35px; padding: 0 36px; min-height: 52px; border-top: 1px solid #1b2b33; }
.circuit-years a { display: flex; align-items: center; min-height: 44px; font: .7rem var(--mono); color: #9baeb6; }
.circuit-years a:hover, .circuit-years a[aria-current] { color: var(--maroon); }
.circuit-years a[aria-current] { box-shadow: inset 0 -2px var(--maroon); }
.path-position { margin-left: auto; font: .65rem var(--mono); color: #9baeb6; }
.circuit-home .site-footer { background: var(--paper); border: 0; padding: 16px 36px; min-height: 62px; gap: 20px; }
.circuit-home .site-footer .wordmark { font-size: .9rem; }
.circuit-home .site-footer a, .circuit-home .site-footer small { color: #9baeb6; }
.circuit-home .site-footer a:hover { color: var(--maroon); }
.circuit-home .site-footer .footer-links { justify-content: flex-end; }
.circuit-home :focus-visible { outline-color: #8be5c3; }
.circuit-home ::selection { background: #295346; color: #f1fff8; }
.circuit-home .skip-link { background: #101d24; color: #e1ebe9; }
@media (max-width: 650px) {
  .circuit-home .navbar { padding: 14px 20px; gap: 12px; flex-wrap: wrap; }
  .circuit-home .navbar nav { width: 100%; gap: 18px; justify-content: space-between; }
  .board-toolbar { padding: 10px 20px; gap: 12px; flex-wrap: wrap; }
  #circuit-help { font-size: .62rem; }
  .board-toolbar > .die-label { display: none; }
  .board-controls { margin-left: auto; }
  .board-controls button, .node-media button { min-height: 44px; }
  .circuit-years { padding-inline: 20px; gap: 24px; flex-wrap: wrap; }
  .path-position { display: none; }
  .circuit-home .site-footer { padding: 16px 20px; }
  .circuit-home .site-footer .footer-links { gap: 14px; }
  .node-details summary { min-height: 44px; }
  .circuit-node { left: calc(var(--node-x) - 52px); }
  .chip-wiring { left: -52px; }
}
@media (max-width: 650px), (max-height: 760px) {
  .chip-wiring { height: 640px; top: calc(100% - 340px); }
  .node-above, .node-below { top: max(26px, calc(100cqh - 350px)); transform-origin: center top; }
  .node-media img { height: clamp(44px, calc(100cqh - 210px), 190px); }
  .branch-below { transform: translateY(620px) scaleY(-1); }
}
@media (max-height: 600px) {
  .circuit-home .site-footer { min-height: 36px; padding: 2px 20px; display: flex; justify-content: center; }
  .circuit-home .site-footer > div:first-child, .circuit-home .site-footer small { display: none; }
  .circuit-home .site-footer .footer-links { gap: 14px; }
  .circuit-home .site-footer .footer-links a { min-height: 32px; }
  .board-toolbar { padding-block: 4px; }
  .circuit-years { min-height: 44px; }
  .node-above, .node-below { top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .circuit-viewport { scroll-behavior: auto; }
  .circuit-node { transition: none; }
  .signal-cursor { transition: none; }
  .circuit-node:hover, .circuit-node:focus-within { transform: none; }
}

/* A native modal keeps enlarged media above the clipped, scrolling circuit. */
.timeline-zoom { color: var(--ink); background: #10191f; border: 1px solid #40584f; border-radius: 12px; padding: 0; width: min(1000px, calc(100vw - 40px)); max-width: none; max-height: calc(100dvh - 40px); margin: auto; overflow: auto; box-shadow: 0 28px 100px #0007; animation: border-shimmer 6s ease-in-out infinite; }
.timeline-zoom::backdrop { background: #05090db8; backdrop-filter: blur(9px); }
.timeline-zoom header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; }
.timeline-zoom h2 { font: 500 clamp(1rem, 2.5vw, 1.3rem)/1.5 var(--sans); }
.timeline-zoom button { flex-shrink: 0; min-width: 44px; min-height: 44px; border: 1px solid #40554e; border-radius: 6px; background: #17232a; color: var(--ink); cursor: pointer; }
.timeline-zoom img { display: block; width: 100%; height: auto; max-height: min(55dvh, 530px); object-fit: contain; background: #0b1116; }
.timeline-zoom footer { padding: 20px 22px; display: grid; gap: 14px; }
.timeline-zoom p { color: #bdcccf; font-size: .85rem; line-height: 1.8; }
.timeline-zoom a { width: fit-content; color: #b6cebf; text-decoration: underline; text-underline-offset: 4px; font-size: .8rem; }
.timeline-zoom:focus-visible, .timeline-zoom :focus-visible { outline: 2px solid #b6cebf; outline-offset: 3px; }
body:has(.timeline-zoom[open]) { overflow: hidden; }
@media (max-width: 650px) {
  .timeline-zoom { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  .timeline-zoom header, .timeline-zoom footer { padding: 14px 16px; }
  .timeline-zoom img { max-height: min(45dvh, 400px); }
}
@media (prefers-reduced-motion: reduce) {
  .node-media, .timeline-zoom { animation: none; }
  .timeline-zoom::backdrop { backdrop-filter: none; }
}