:root {
  --bg: #070b11;
  --panel: #0d141d;
  --rule: rgba(255, 255, 255, 0.08);
  --rule-2: rgba(255, 255, 255, 0.16);
  --text: #e6ebf2;
  --text-2: #b4bdc9;
  --muted: #7f8a9b;
  --silk: #c8d3e0;
  --ice: #3ad0ff;
  --amber: #f0a54a;
  --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", ui-monospace, "SF Mono", Consolas, Menlo, monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 15px; line-height: 1.65; overflow-x: hidden; }
a { color: var(--ice); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: #fff; }
:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }
h2, h3, h4 { margin: 0; color: #fff; font-weight: 600; letter-spacing: -0.015em; }
p { margin: 0 0 1em; }
.mono { font-family: var(--mono); }

.bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: stretch; gap: 20px; height: 56px; padding: 0 clamp(16px, 3vw, 32px); background: rgba(7, 11, 17, 0.8); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
.brand { display: flex; align-items: center; flex: 0 0 auto; }
.brand img { display: block; height: 22px; width: auto; }
.hint { margin: 0; flex: 0 1 auto; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.hint::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ice); margin-right: 8px; vertical-align: 1px; animation: blink 1.6s ease-in-out infinite; }
.cta { align-self: center; flex: 0 0 auto; font-size: 13px; color: #fff; text-decoration: none; border: 1px solid var(--rule-2); border-radius: 6px; padding: 8px 12px; }
.cta:hover { border-color: #fff; color: #fff; }

.stage { height: calc(100vh - var(--top, 56px) - 56px); display: grid; place-items: center; padding: 10px clamp(12px, 3vw, 36px) 0; }
#board { width: min(100%, 1400px, calc((100vh - var(--top, 56px) - 66px) * 1.5897)); height: auto; display: block; overflow: visible; }
.foot { height: 56px; display: flex; align-items: center; justify-content: center; }
.x-link { display: inline-flex; padding: 8px; color: var(--text-2); transition: color 0.2s; }
.x-link svg { width: 20px; height: 20px; fill: currentColor; }
.x-link:hover { color: var(--text); }
@media (min-width: 761px) { html, body { overflow: hidden; } }

.pcb { fill: url(#pcb); stroke: #1c2a3b; stroke-width: 1.5; }
.hole { fill: #0a0f16; stroke: #2b3a4e; stroke-width: 1.5; }
.hole-in { fill: #04070b; }
.vias circle { fill: rgba(58, 208, 255, 0.12); }
.silk { font-family: var(--mono); fill: var(--silk); }
.silk-dim { font-size: 9.5px; fill: rgba(200, 211, 224, 0.35); letter-spacing: 0.08em; }
.silk-name { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; fill: var(--silk); }
.silk-sec { font-size: 11.5px; font-weight: 600; fill: #ffc94a; letter-spacing: 0.02em; }

.trace { fill: none; stroke: rgba(58, 208, 255, 0.16); stroke-width: 1.6; stroke-linejoin: round; transition: stroke 0.3s; }
.trace.hot { stroke: rgba(58, 208, 255, 0.55); }
.pulse { fill: none; stroke: var(--ice); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 6 94; stroke-dashoffset: 100; opacity: 0; filter: url(#glow); }
.pulse.run { opacity: 1; animation: flow 1.4s linear infinite; }
@keyframes flow { to { stroke-dashoffset: 0; } }

.part { cursor: pointer; outline: none; }
.part .hit { fill: transparent; stroke: transparent; stroke-width: 1.5; rx: 8; transition: stroke 0.2s, fill 0.2s; }
.part:hover .hit, .part:focus-visible .hit { stroke: rgba(58, 208, 255, 0.55); fill: rgba(58, 208, 255, 0.04); }
.part.active .hit { stroke: var(--ice); fill: rgba(58, 208, 255, 0.07); filter: url(#glow); }
.part:hover .silk-name, .part.active .silk-name, .part:focus-visible .silk-name { fill: var(--ice); }
.part:hover .silk-sec, .part.active .silk-sec, .part.peek .silk-sec { fill: #ffe08a; }

.io { fill: #1a2330; stroke: #2e3c50; stroke-width: 1.2; }
.port { fill: #06090d; stroke: #3a4a60; stroke-width: 1.2; }
.jack { fill: #06090d; stroke: #4a5a70; stroke-width: 2; }
.plug-hole { fill: #1d2430; }
.stick-shine { fill: rgba(255, 255, 255, 0.35); }
.stick-label { font-family: var(--sans); font-weight: 700; font-size: 13px; fill: #06233a; letter-spacing: 0.02em; }
.stick-body { stroke: rgba(6, 35, 58, 0.5); stroke-width: 1; }
.stick-collar { fill: #1683b0; opacity: 0.8; }
.stick-hole { fill: #070b11; stroke: rgba(6, 35, 58, 0.6); stroke-width: 1; }
.housing { fill: #4a5566; stroke: #6b7584; stroke-width: 1; }
.housing-top { fill: #8c95a5; opacity: 0.35; }
.housing-mouth { fill: #1a222d; }
.led { fill: #ffffff; animation: led 1.2s steps(2) infinite; }
@keyframes led { 50% { opacity: 0.35; } }
@keyframes blink { 50% { opacity: 0.3; } }

.socket { fill: #121a25; stroke: #2e3c50; stroke-width: 1.5; }
.pin { fill: #8c7a4a; }
.ihs { stroke: #4a586c; stroke-width: 1.2; }
.pin1 { fill: #c8d3e0; opacity: 0.6; }
.chip-big { font-family: var(--mono); font-size: 18px; font-weight: 700; fill: #e6ebf2; letter-spacing: 0.08em; }
.chip-small { font-family: var(--mono); font-size: 10px; fill: #9aa6b8; letter-spacing: 0.05em; }
.chip-small.strong { fill: #e6ebf2; font-weight: 600; }
.dimm-slot { fill: #0b1018; stroke: #2a3749; stroke-width: 1; }
.dimm { fill: #13361f; stroke: #1f4a2e; stroke-width: 1; }
.dram, .chip { fill: #10151d; stroke: #2e3a4b; stroke-width: 1; }
.notch { fill: #0b1018; }
.atx { fill: #e8e4da; stroke: #b9b2a2; stroke-width: 1; }
.atx-pin { fill: #2a2a2a; }
.m2 { fill: #0f2a2a; stroke: #1f4646; stroke-width: 1; }
.m2-key { fill: #c9a648; }
.screw, .batt-holder { fill: #1a2330; stroke: #4a586c; stroke-width: 2; }
.batt { fill: #b9c2cf; stroke: #e6ebf2; stroke-width: 1.5; }
.batt + text, .batt ~ text { fill: #2a3240; }
.slot { fill: #0b1018; stroke: #33445a; stroke-width: 1.2; }
.slot-in { fill: #05080c; }
.slot-key { fill: #0e1520; }
.heatsink { fill: #1f2a39; stroke: #3a4a60; stroke-width: 1.2; }
.fin { fill: #2c3a4e; }
.badge { fill: #0b1018; stroke: #3a4a60; stroke-width: 1; }
.cap { fill: #1b2532; stroke: #5a6a80; stroke-width: 1.5; }
.cap-mark { stroke: #9aa6b8; stroke-width: 1.4; }

.powerup .stick { animation: plug 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both; }
@keyframes plug { from { transform: translateX(-90px); opacity: 0.2; } 40% { opacity: 1; } to { transform: none; opacity: 1; } }
.powerup .trace { animation: power 1.4s ease-out 1.2s both; }
@keyframes power { from { stroke: rgba(58, 208, 255, 0.7); } to { stroke: rgba(58, 208, 255, 0.16); } }

.drawer { position: fixed; top: var(--top, 56px); right: 0; bottom: 0; width: min(620px, 100%); z-index: 30; background: var(--panel); border-left: 1px solid var(--rule-2); transform: translateX(102%); transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); box-shadow: -30px 0 60px -30px rgba(0, 0, 0, 0.8); }
.drawer.open { transform: none; }
.drawer-in { height: 100%; overflow-y: auto; padding: 28px clamp(18px, 3vw, 32px) 48px; }
.close { position: absolute; top: 14px; right: 16px; z-index: 2; background: none; border: 1px solid var(--rule-2); color: var(--text-2); border-radius: 6px; padding: 5px 10px; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.close:hover { color: #fff; border-color: #fff; }
.scrim { position: fixed; inset: var(--top, 56px) 0 0 0; z-index: 25; background: rgba(0, 0, 0, 0.35); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.scrim.on { opacity: 1; pointer-events: auto; }

.crumb { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ice); margin: 0 0 12px; outline: none; }
.panel h2 { font-size: 22px; line-height: 1.25; margin: 0 0 12px; padding-right: 70px; }
.panel h3 { font-size: 15px; margin: 22px 0 6px; }
.panel h4 { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin: 0 0 6px; }
.intro { font-size: 15.5px; color: var(--text-2); margin: 0 0 16px; }
.panel p { color: var(--text-2); }
.panel p b { color: #fff; }
.quiet { color: var(--muted); font-size: 14px; }
.aside { border-left: 1px solid var(--rule-2); padding-left: 16px; margin-top: 18px; }
.cols { display: grid; grid-template-columns: 1fr; gap: 8px; }
.cols h3:first-child { margin-top: 0; }
.inset { margin: 14px 0 0; }
.inset canvas { display: block; width: 100%; aspect-ratio: 192 / 108; border-radius: 8px; border: 1px solid var(--rule); background: #0a121c; }
.inset figcaption { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.list { margin: 4px 0 16px; padding: 0; }
.list > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-top: 1px solid var(--rule); }
.list > div:first-child { border-top: 0; }
.list dt { color: #fff; font-weight: 500; font-size: 14px; }
.list dd { margin: 0; color: var(--text-2); font-size: 14px; }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 4px 0 0; }
.steps li { counter-increment: s; position: relative; padding: 9px 0 9px 28px; color: var(--text-2); border-top: 1px solid var(--rule); font-size: 14px; }
.steps li:first-child { border-top: 0; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 10px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.steps b { color: #fff; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 4px 0 0; }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 8px 10px 8px 0; border-top: 1px solid var(--rule); }
.tbl thead th { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 500; border-top: 0; padding-top: 0; }
.tbl tbody th { font-weight: 500; color: #fff; width: 40%; }
.tbl td { color: var(--text-2); }
.tbl .us { color: #fff; }
.tbl .no { color: var(--muted); }
.tbl td.mono { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.warn { margin: 18px 0 0; padding: 12px 14px; border: 1px solid rgba(240, 165, 74, 0.45); border-radius: 6px; color: var(--text-2); font-size: 14px; }
.warn b { color: #fff; }
pre { margin: 4px 0 0; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 8px; background: rgba(0, 0, 0, 0.3); font-family: var(--mono); font-size: 11.5px; line-height: 1.6; color: var(--text-2); white-space: pre; overflow-x: auto; }
.codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; margin-top: 6px; font-family: var(--mono); font-size: 11.5px; color: var(--text-2); }
.codes span { display: flex; gap: 10px; }
.codes b { color: var(--muted); font-weight: 400; min-width: 20px; text-align: right; }
.road { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 4px; }
.road ul { margin: 0; padding-left: 16px; font-size: 13.5px; color: var(--text-2); }
.road li { margin: 4px 0; }
.faqs details { border-top: 1px solid var(--rule); }
.faqs summary { cursor: pointer; list-style: none; padding: 11px 26px 11px 0; position: relative; font-weight: 500; color: #fff; font-size: 14px; }
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary::after { content: "+"; position: absolute; right: 4px; top: 9px; font-family: var(--mono); color: var(--muted); }
.faqs details[open] summary::after { content: "\2212"; }
.faqs details p { color: var(--text-2); padding-right: 26px; margin: 0 0 12px; font-size: 14px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.btn { display: inline-flex; align-items: center; font-size: 13.5px; font-weight: 500; text-decoration: none; padding: 10px 16px; border-radius: 6px; border: 1px solid transparent; }
.btn-solid { background: #fff; color: #070b11; }
.btn-solid:hover { background: #e6ebf2; color: #070b11; }
.btn-line { color: #fff; border-color: var(--rule-2); }
.btn-line:hover { border-color: #fff; color: #fff; }

@media (max-width: 760px) {
  .hint { display: none; }
  .stage { height: auto; display: block; place-items: normal; justify-items: start; overflow-x: auto; padding: 16px 12px 24px; -webkit-overflow-scrolling: touch; }
  #board { max-height: none; width: 900px; max-width: none; }
  .stage::before { content: "swipe the board, tap a part"; display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px 4px; }
  .road { grid-template-columns: 1fr; }
  .list > div { grid-template-columns: 1fr; gap: 2px; }
  .codes { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hint::before, .led, .pulse.run { animation: none; }
  .drawer, .scrim { transition: none; }
}

.legend { display: flex; gap: 2px; margin: 0 auto; overflow-x: auto; scrollbar-width: none; align-self: stretch; }
.legend::-webkit-scrollbar { display: none; }
.legend a { flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 6px; padding: 0 11px; font-size: 13px; color: var(--muted); text-decoration: none; position: relative; transition: color 0.15s; }
.legend a::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: -1px; height: 1px; background: var(--ice); transform: scaleX(0); transition: transform 0.2s; }
.legend a:hover { color: #fff; }
.legend a.lit { color: #fff; }
.legend a.lit::after { transform: scaleX(1); }
.legend .num { font-family: var(--mono); font-size: 10px; color: rgba(58, 208, 255, 0.7); letter-spacing: 0.04em; }
.legend a { align-items: center; }
.part.peek .hit { stroke: rgba(58, 208, 255, 0.7); fill: rgba(58, 208, 255, 0.06); }
.part.peek .silk-name { fill: var(--ice); }

.spot { fill: var(--ice); }
.spot-ring { fill: none; stroke: var(--ice); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: ring 2.2s ease-out infinite; }
.part.active .spot-ring, .part:hover .spot-ring { animation-duration: 1.1s; }
.part .spot { transition: fill 0.2s; }
@keyframes ring { 0% { transform: scale(0.5); opacity: 0.9; } 100% { transform: scale(2.2); opacity: 0; } }

.idle { fill: none; stroke: rgba(58, 208, 255, 0.7); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 3 97; stroke-dashoffset: 100; animation: flow 3s linear infinite; opacity: 0.55; }
.trace.hot + .idle { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .idle, .spot-ring { animation: none; } .idle { opacity: 0; } }
.bar > .cta + .cta { margin-left: -10px; }
@media (max-width: 1360px) { .legend a { padding: 0 7px; gap: 4px; } .legend a::after { left: 7px; right: 7px; } .bar { gap: 12px; } .bar > .cta + .cta { margin-left: -4px; } }
@media (max-width: 1180px) { .legend .num { display: none; } }
.params { margin: 4px 0 0; padding: 10px 14px; border: 1px solid var(--rule); border-radius: 8px; background: rgba(0, 0, 0, 0.3); font-family: var(--mono); font-size: 11.5px; line-height: 1.6; }
.params > div { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 10px; padding: 3px 0; }
.params > div + div { border-top: 1px solid rgba(255, 255, 255, 0.04); }
.params dt { color: var(--muted); }
.params dd { margin: 0; color: var(--text-2); }
.params dd span { display: block; padding-left: 2ch; text-indent: -2ch; overflow-wrap: anywhere; }
@media (max-width: 520px) { .params > div { grid-template-columns: 1fr; gap: 0; } }