@font-face { font-family: 'Figtree'; src: url(../fonts/figtree.woff2) format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Plex Mono'; src: url(../fonts/plex-mono-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }

:root {
  color-scheme: light;
  --bg: #e6e1d5;
  --panel: #f7f5f0;
  --ink: #23211d;
  --muted: #6b665c;
  --line: #d3cdbf;
  --accent: #b8541d;
  --accent-ink: #fff;
  --chip: #ece8de;
  --good: #1f8a52;
  --bad: #c2362f;
  --plus: #d8343a;
  --minus: #2f6fd6;
  /* the board stays white plastic in both palettes, like the real thing */
  --plastic: #f6f4ee;
  --plastic-edge: #d9d4c6;
  --base: #b9b3a5;
  --hole: #34312d;
  --print: #8a857a;
  --hl-a: #0f9d8c;
  --hl-b: #8b5cf6;
  --hl-sel: #f08a1c;
  --hl-ok: #1f9d55;
  --hl-muted: #8a857a;
  --shadow: rgba(60, 50, 30, .35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #15181c; --panel: #1f2328; --ink: #e9e6df; --muted: #a29d93; --line: #343a42;
    --accent: #e0793a; --accent-ink: #1a1a1a; --chip: #2a3037; --good: #4cc785; --bad: #f0675e;
    --plus: #ff5a5f; --minus: #5b95ff; --shadow: rgba(0, 0, 0, .6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #15181c; --panel: #1f2328; --ink: #e9e6df; --muted: #a29d93; --line: #343a42;
  --accent: #e0793a; --accent-ink: #1a1a1a; --chip: #2a3037; --good: #4cc785; --bad: #f0675e;
  --plus: #ff5a5f; --minus: #5b95ff; --shadow: rgba(0, 0, 0, .6);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font: 17px/1.5 'Figtree', system-ui, sans-serif;
  display: flex; flex-direction: column; height: 100dvh; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; }
code { font: 500 .88em 'Plex Mono', ui-monospace, monospace; background: var(--chip); padding: .05em .35em; border-radius: 4px; }
.noscript { padding: 1rem; }

.top {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem max(1rem, env(safe-area-inset-left)) .45rem;
}
.top img { display: block; border-radius: 7px; }
.top .name { margin: 0; font-weight: 700; font-size: 1.08rem; }
.top .tag { margin: 0; color: var(--muted); font-size: .92rem; }

.app { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 0; }

/* ----- Board side ----- */
.stage { display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: 0 .5rem .5rem 1rem; }
.stage-bar { display: flex; align-items: center; gap: .3rem .7rem; flex-wrap: wrap; min-height: 2.6rem; padding: .15rem 0 .25rem; }
.toggle, .tools button {
  border: 1px solid var(--line); background: var(--panel); border-radius: 999px;
  padding: .32rem .8rem; cursor: pointer; font-size: .92rem; display: inline-flex; align-items: center; gap: .4rem;
}
.toggle[aria-pressed="true"], .tools button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.eye { width: .95em; height: .95em; border-radius: 50%; border: 2px solid currentColor; position: relative; }
.eye::after { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: currentColor; }
.tools { display: flex; gap: .35rem; flex-wrap: wrap; flex-basis: 100%; padding-bottom: .3rem; }
.tools[hidden] { display: none; }
.board-wrap { flex: 1; min-height: 0; position: relative; }
#board { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; }
.zoom { position: absolute; right: .4rem; bottom: .4rem; display: flex; gap: .3rem; align-items: center; }
.zoom button {
  min-width: 2.4rem; height: 2.4rem; padding: 0 .7rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-size: 1.15rem; line-height: 1;
  box-shadow: 0 2px 6px var(--shadow);
}
.zoom #zfit { font-size: .85rem; }
.zoom button:focus-visible { outline: 3px solid var(--hl-sel); outline-offset: 2px; }
.info { flex: 1; min-width: 0; margin: 0; font-size: .92rem; line-height: 1.3; color: var(--muted); padding: .2rem 0; }

/* ----- Panel ----- */
.panel { background: var(--panel); border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.panel-scroll { flex: 1; overflow-y: auto; padding: 1.1rem 1.4rem .5rem; overscroll-behavior: contain; }
.kicker { margin: 0; color: var(--accent); font-weight: 700; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; }
h1 { margin: .15rem 0 .6rem; font-size: 1.55rem; line-height: 1.2; }
.body p, .extra p { margin: 0 0 .75rem; }
.body ul { margin: 0 0 .8rem; padding-left: 1.2rem; }
.body li { margin-bottom: .35rem; }
.hint { color: var(--muted); font-size: .95rem; border-left: 3px solid var(--accent); padding-left: .7rem; }
.plus { color: var(--plus); font-weight: 700; }
.minus { color: var(--minus); font-weight: 700; }

.art { display: block; width: 100%; max-width: 300px; margin: .3rem auto 1rem; overflow: visible; }
.art .a-plastic { fill: var(--plastic); stroke: var(--plastic-edge); }
.art .a-hole { fill: var(--hole); }
.art .a-metal { stroke: #a7b0b9; fill: none; stroke-linecap: round; }
.art .a-leg { fill: #c4cad0; }
.art .a-wire { stroke: #9aa2aa; stroke-width: 3.5; fill: none; stroke-linecap: round; }
.art .a-flat { fill: var(--panel); }
.art .a-text { font: 13px 'Figtree', sans-serif; fill: var(--muted); text-anchor: middle; }
.art .a-text.end { text-anchor: end; }
.art .a-text.start { text-anchor: start; }

.extra { margin-top: .3rem; }
.verdict { font-weight: 700; font-size: 1.08rem; }
.verdict.good { color: var(--good); }
.verdict.bad { color: var(--bad); }
.progress { display: flex; gap: .3rem; margin: .2rem 0 .6rem; }
.progress span { width: 2.2rem; height: .38rem; border-radius: 99px; background: var(--line); }
.progress span.on { background: var(--accent); }
.tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .9rem; }
.tab { border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: .28rem .75rem; cursor: pointer; font-size: .9rem; }
.tab[aria-selected="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }

.btn {
  border: 0; background: var(--accent); color: var(--accent-ink); font-weight: 700;
  padding: .55rem 1.1rem; border-radius: 10px; cursor: pointer;
}
.btn.quiet { background: var(--chip); color: var(--ink); font-weight: 400; }
.btn:disabled { opacity: .4; cursor: default; }
.btn:focus-visible, .toggle:focus-visible, .tab:focus-visible, .tools button:focus-visible, #dots button:focus-visible { outline: 3px solid var(--hl-sel); outline-offset: 2px; }

.steps {
  display: flex; align-items: center; gap: .5rem; border-top: 1px solid var(--line);
  padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom));
}
.steps .btn { min-width: 4.8rem; }
#dots { flex: 1; display: flex; justify-content: center; flex-wrap: wrap; gap: 0; list-style: none; margin: 0; padding: 0; }
#dots button { width: .82rem; height: 1.6rem; border: 0; background: none; padding: 0; cursor: pointer; display: grid; place-items: center; }
#dots button::before { content: ''; width: .48rem; height: .48rem; border-radius: 50%; background: var(--line); transition: transform .2s; }
#dots button[aria-current="step"]::before { background: var(--accent); transform: scale(1.45); }

.jd-foot { margin: 2rem 0 .4rem; text-align: center; font-size: .82rem; color: var(--muted); }
.jd-foot a { color: inherit; text-decoration: none; }
.jd-foot a:hover, .jd-foot a:focus-visible { text-decoration: underline; }

/* ----- The board drawing ----- */
#board text { font-family: 'Plex Mono', ui-monospace, monospace; text-anchor: middle; dominant-baseline: central; }
.bb-shadow { fill: var(--shadow); }
.bb-base { fill: var(--base); }
.clip { fill: url(#metal); stroke: #8e98a2; stroke-width: .5; }
.plastic { fill: var(--plastic); stroke: var(--plastic-edge); stroke-width: .8; }
.channel { fill: #e3dfd4; stroke: #d2cdbf; stroke-width: .5; }
.bb-plastic, .bb-holes, .bb-print { transition: opacity .6s ease; }
.hole { fill: var(--hole); }
.rail-line { stroke-width: 1.3; }
.rail-line.plus { stroke: #d8343a; }
.rail-line.minus { stroke: #2f6fd6; }
.rail-sign { font-size: 7.5px; font-weight: 500; }
.rail-sign.plus { fill: #d8343a; }
.rail-sign.minus { fill: #2f6fd6; }
.num { fill: var(--print); font-size: 4.6px; }
svg.xray-peek .bb-plastic { opacity: .6; }
svg.xray-on .bb-plastic { opacity: .14; }
svg.xray-on .bb-holes { opacity: .55; }
svg.xray-on .bb-print .num { fill: #3d3a34; }

.hl .band { stroke-width: 1; fill-opacity: .2; }
.hl .ring { fill: none; stroke-width: 1.4; animation: ring .5s ease-out both; transform-box: fill-box; transform-origin: center; }
@keyframes ring { from { opacity: 0; transform: scale(1.8); } to { opacity: 1; transform: scale(1); } }
.tone-a { --t: var(--hl-a); } .tone-b { --t: var(--hl-b); } .tone-sel { --t: var(--hl-sel); }
.tone-ok { --t: var(--hl-ok); } .tone-muted { --t: var(--hl-muted); } .tone-bad { --t: #d8343a; }
.tone-plus { --t: #d8343a; } .tone-minus { --t: #2f6fd6; }
.hl .band { fill: var(--t); stroke: var(--t); }
.hl .ring { stroke: var(--t); }

.part.enter { animation: drop .5s cubic-bezier(.2, .9, .3, 1.2) both; transform-box: fill-box; transform-origin: center; }
@keyframes drop { from { opacity: 0; transform: translateY(-6px) scale(1.12); } to { opacity: 1; transform: none; } }
.wire { stroke-width: 3.5; stroke-linecap: round; }
.wire-shine { stroke: rgba(255, 255, 255, .35); stroke-width: 1; stroke-linecap: round; }
.pin { fill: #c4cad0; stroke: #7d868f; stroke-width: .4; }
.leg { stroke: #a9b0b7; stroke-width: 1.3; stroke-linecap: round; }
.res-body { fill: #e2c595; stroke: #b4955f; stroke-width: .5; }
.led-dome { fill: #d23a40; fill-opacity: .9; stroke: #9c2329; stroke-width: .6; transition: fill .3s; }
.led-shine { fill: #fff; opacity: .35; }
.leg-plus { stroke: #d8343a; stroke-width: .9; }
.leg-minus { stroke: #2f6fd6; stroke-width: .9; }
.leg-tag { stroke: #fff; stroke-width: .5; }
.leg-tag.plus { fill: #d8343a; } .leg-tag.minus { fill: #2f6fd6; }
#board .leg-sign { fill: #fff; font: 700 5px 'Figtree', sans-serif; pointer-events: none; }
.led-lit .led-dome { fill: #ff5b52; fill-opacity: 1; stroke: #ffb3a8; }
.led-lit .led-shine { opacity: .8; }
.led-glow { animation: glow 1.6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; pointer-events: none; }
@keyframes glow { from { opacity: .75; transform: scale(.92); } to { opacity: 1; transform: scale(1.06); } }
.led-burned .led-dome { fill: #4a3533; stroke: #2a1d1c; }
.led-burned .led-shine { opacity: .12; }
.smoke { fill: #8d8a85; animation: smoke 2.2s ease-out infinite; transform-box: fill-box; transform-origin: center; opacity: 0; }
@keyframes smoke { 0% { opacity: .55; transform: translate(0, 0) scale(.6); } 100% { opacity: 0; transform: translate(-3px, -14px) scale(2.2); } }
svg[data-orient="v"] .smoke { animation-name: smoke-v; }
@keyframes smoke-v { 0% { opacity: .55; transform: translate(0, 0) scale(.6); } 100% { opacity: 0; transform: translate(-14px, -3px) scale(2.2); } }

.bat-body { fill: #2b3440; stroke: #1b222b; stroke-width: .6; }
.bat-cell { stroke: #45505e; stroke-width: .8; }
.bat-label { fill: #e8e6df; font-size: 5.2px; }
.bat-term.red { fill: #d8343a; } .bat-term.black { fill: #555; }
.bat-sign { font-size: 6px; }
.bat-sign.plus { fill: #d8343a; } .bat-sign.minus { fill: #2f6fd6; }
.part-battery.hot .bat-body { animation: hot .7s ease-in-out infinite alternate; }
@keyframes hot { from { fill: #2b3440; } to { fill: #a3322c; } }

.chip-body { fill: #26272a; stroke: #111; stroke-width: .5; }
.chip-pin { fill: #c4cad0; }
.chip-notch { fill: #3b3d42; }
#board .chip-label { fill: #9a9ca2; font-size: 5px; }

.flow-path { fill: none; stroke: #ffd23f; stroke-opacity: .28; stroke-width: 4.2; stroke-linejoin: round; stroke-linecap: round; }
.flow-dots { fill: none; stroke: #ffc400; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0 6; animation: flow .6s linear infinite; filter: drop-shadow(0 0 1.5px #ffd23f); }
@keyframes flow { to { stroke-dashoffset: -6; } }

.mark .halo { fill: none; stroke-width: 1.4; }
.mark .dot { stroke: none; }
.mark-target .halo { stroke: var(--hl-sel); animation: pulse 1.1s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.mark-target .dot { fill: var(--hl-sel); }
@keyframes pulse { from { transform: scale(.85); opacity: .5; } to { transform: scale(1.35); opacity: 1; } }
.mark-sel .halo { stroke: var(--hl-sel); } .mark-sel .dot { fill: var(--hl-sel); opacity: .8; }
.mark-right .halo { stroke: var(--hl-ok); } .mark-right .dot { fill: var(--hl-ok); }
.mark-wrong .halo { stroke: #d8343a; } .mark-wrong .dot { fill: #d8343a; }
.mark-pending .halo { stroke: var(--hl-sel); stroke-dasharray: 2 1.5; animation: spin 3s linear infinite; transform-box: fill-box; transform-origin: center; }
.mark-pending .dot { fill: var(--hl-sel); }
@keyframes spin { to { transform: rotate(360deg); } }
.hover-ring { fill: none; stroke: var(--hl-sel); stroke-width: 1; opacity: .8; pointer-events: none; }

.note rect { fill: #23211d; fill-opacity: .86; }
#board .note text { fill: #fff; font: 700 5.4px 'Figtree', sans-serif; letter-spacing: .02em; }
.note { animation: fade .5s .15s both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.bb-marks, .bb-flow, .bb-hover, .bb-hl { pointer-events: none; }

/* ----- Narrower screens ----- */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; grid-template-rows: minmax(0, 56fr) minmax(0, 44fr); }
  .stage { padding: 0 .75rem .25rem; }
  .panel { border-left: 0; border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; }
  .panel-scroll { padding: .9rem 1.1rem .4rem; }
  h1 { font-size: 1.3rem; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .top { padding-top: max(.45rem, env(safe-area-inset-top)); }
  .top .tag { display: none; }
  .app { grid-template-rows: minmax(0, 63fr) minmax(0, 37fr); }
  .top { padding-bottom: .2rem; }
  .top img { width: 24px; height: 24px; }
  .stage-bar { min-height: 2.3rem; }
  .toggle, .tools button { padding: .26rem .62rem; font-size: .86rem; }
  .info { font-size: .8rem; }
  .steps .btn { min-width: 4.4rem; padding: .5rem .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
  .flow-dots { stroke-dasharray: 0 6; }
}