:root {
  color-scheme: dark;
  --bg: #101d29; --panel: #162633; --panel-2: #1b2e3d; --line: #2b404d;
  --text: #edf2ed; --muted: #a9bdc6; --accent: #f5c76b;
  --l: #b97a45; --n: #3f86e8; --pe-y: #e3cf3c; --pe-g: #3fae5a;
  --hot: #ff5c4d; --ok: #7ed6a0; --warn: #f5b74e; --flow: #ffe6a8;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.5; }
a { color: var(--accent); }
button { font: inherit; color: inherit; cursor: pointer; border: 1px solid var(--line); background: var(--panel-2); border-radius: 10px; padding: .5rem .9rem; transition: background .15s, border-color .15s; }
button:hover { border-color: #47657a; background: #213849; }
button:disabled { opacity: .4; cursor: default; }
button.quiet { background: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
select { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: .4rem .5rem; width: 100%; }

.topbar { display: flex; justify-content: space-between; align-items: center; padding: 1rem clamp(1rem, 4vw, 2.5rem); border-bottom: 1px solid var(--line); }
.brand { color: var(--text); text-decoration: none; font-weight: 700; letter-spacing: .08em; }
.brand span { color: var(--muted); font-weight: 500; }
.edition { color: var(--muted); font-size: .75rem; letter-spacing: .12em; }
main { max-width: 1320px; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2rem) 4rem; }

.intro { padding: clamp(2rem, 6vw, 4rem) 0 2rem; max-width: 820px; }
.eyebrow { font-size: .72rem; letter-spacing: .16em; color: var(--muted); margin: 0 0 .4rem; text-transform: uppercase; }
h1 { font-family: Georgia, serif; font-weight: 400; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.1; margin: 0 0 1rem; }
h1 em { color: var(--accent); }
h2 { font-family: Georgia, serif; font-weight: 400; font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0; }
h3 { margin: 0 0 .5rem; font-size: 1.15rem; }
.intro p { color: var(--muted); font-size: 1.08rem; }
.intro .prereq { font-size: .92rem; border-left: 3px solid var(--accent); padding-left: .8rem; }
.lead { color: var(--muted); max-width: 760px; margin: .4rem 0 1.4rem; }

.tabs { position: sticky; top: 0; z-index: 5; display: flex; gap: .4rem; overflow-x: auto; padding: .7rem 0; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px); scrollbar-width: none; }
.tabs a { flex: none; text-decoration: none; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: .5rem 1rem; font-size: .92rem; }
.tabs a b { color: var(--accent); margin-right: .3rem; font-weight: 600; }
.tabs a[aria-current="page"] { color: var(--text); background: var(--panel-2); border-color: #47657a; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: clamp(1rem, 3vw, 2rem); margin-top: 1rem; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; }

.safety { margin-top: 2rem; padding: 1rem 1.2rem; border-left: 3px solid var(--warn); background: var(--panel); border-radius: 0 12px 12px 0; color: var(--muted); font-size: .92rem; }
.safety b { color: var(--warn); }

/* Shared SVG vocabulary */
svg text { fill: var(--muted); font-size: 12px; font-family: inherit; pointer-events: none; }
svg .dev-label { text-anchor: middle; fill: var(--text); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
svg .cap { font-size: 11px; }
svg .mid { text-anchor: middle; }
svg .end { text-anchor: end; }
svg .term { font-size: 11px; font-weight: 700; fill: var(--text); }
svg .zone { font-size: 11px; letter-spacing: .16em; fill: #6f8896; }
svg .warn-text { fill: var(--hot); font-weight: 700; font-size: 12px; }
.wire { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.wire.thin { stroke-width: 3; }
.w-l { stroke: var(--l); } .w-n { stroke: var(--n); } .w-pe { stroke: var(--pe-y); } .w-pen { stroke: var(--pe-y); }
.wire-stripe { fill: none; stroke: var(--pe-g); stroke-width: 5; stroke-dasharray: 9 9; stroke-linecap: butt; }
.wire.thin + .wire-stripe { stroke-width: 3; }
.stripe-pen { stroke: var(--pe-g); }
.flow { fill: none; stroke: var(--flow); stroke-dasharray: 3 14; stroke-linecap: round; opacity: 0; transition: opacity .3s; pointer-events: none; }
.flow.on { opacity: .95; }
.flow.f-hot { stroke: #ffb3a8; }
.flow.f-pe, .flow.f-pen { stroke: #fff7c2; }
.enclosure { fill: rgba(255, 255, 255, .025); stroke: var(--line); stroke-dasharray: 6 6; }
.earth-sym path { stroke: var(--pe-y); stroke-width: 3; fill: none; }
.mark { opacity: 0; } .mark.on { opacity: 1; }
.mark path { stroke: var(--hot); stroke-width: 5; stroke-linecap: round; fill: none; }

.toggle { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; font-size: .92rem; }
.toggle input { accent-color: var(--accent); width: 1.05rem; height: 1.05rem; }
.config { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center; margin: .8rem 0; }
.legend { display: inline-flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: center; color: var(--muted); font-size: .82rem; margin-left: auto; }
.legend i { display: inline-block; width: 22px; height: 5px; border-radius: 3px; vertical-align: middle; margin-right: .25rem; }
.lg-l { background: var(--l); } .lg-n { background: var(--n); }
.lg-pe { background: repeating-linear-gradient(90deg, var(--pe-y) 0 5px, var(--pe-g) 5px 10px); }
.lg-flow { background: repeating-linear-gradient(90deg, var(--flow) 0 3px, transparent 3px 8px); }

/* 01 Board */
.board-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.4rem; }
.scenario-picker { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.scenario-picker button { font-size: .88rem; padding: .4rem .75rem; border-radius: 999px; }
.scenario-picker button[aria-selected="true"] { background: var(--accent); color: #1a1408; border-color: var(--accent); font-weight: 600; }
.board-scene { border-radius: 16px; background: #0d1823; border: 1px solid var(--line); transition: box-shadow .3s; }
.board-scene.danger { box-shadow: 0 0 0 2px var(--hot), 0 0 40px rgba(255, 92, 77, .25); }
.board-svg { display: block; width: 100%; height: auto; }
.board-svg .source rect, .device rect:first-child, .device.meter rect { fill: #1d3242; stroke: #4a6576; stroke-width: 1.5; }
.device .lever { fill: var(--ok); stroke: none; transition: transform .25s; }
.device.tripped .lever { fill: var(--hot); transform: translateY(22px); }
.device.tripped > rect:first-child { stroke: var(--hot); }
.device .heat-bg { fill: #0d1823; stroke: none; }
.device .heat { fill: #ff8a4d; stroke: none; transition: width 3.5s ease-in; }
.device:not(.hot) .heat-bg, .device:not(.hot) .heat { opacity: 0; }
.device.hl > rect:first-child, .device.hl circle { stroke: var(--accent); stroke-width: 3; filter: drop-shadow(0 0 6px rgba(245, 199, 107, .6)); }
.device.absent { opacity: .18; }
#spd-wire.absent { opacity: .12; }
.split circle { fill: var(--pe-y); stroke: var(--pe-g); stroke-width: 3; }
.toroid { fill: none; stroke: #c3aff7; stroke-width: 3; opacity: .8; }
.spd .varistor { stroke: #c3aff7; stroke-width: 3; }
.spd .window { fill: var(--ok); }
.spd.conducting > rect:first-child { stroke: #c3aff7; stroke-width: 3; filter: drop-shadow(0 0 10px #c3aff7); }
.spd.spent .window { fill: var(--hot); }
.lamp { fill: #22394a; stroke: #6f8896; stroke-width: 2; }
.lamp-x { stroke: #6f8896; stroke-width: 2; }
.lamp-g.on .lamp { fill: #ffe7a6; stroke: #ffd27a; }
.lamp-g.on .lamp-x { stroke: #b88a2b; }
#lamp-glow { transition: opacity .3s; }
.socket rect { fill: #e9ecea; stroke: #9aa3a8; } .socket circle { fill: #333; }
.chassis { fill: rgba(170, 185, 195, .14); stroke: #aab9c3; stroke-width: 4; transition: stroke .2s; }
.chassis.live { stroke: var(--hot); animation: live 1s infinite; }
.coil { fill: none; stroke: #ff9a6a; stroke-width: 3; }
.appliance[data-state="off"] .coil, .appliance[data-state="burnt"] .coil { stroke: #6f8896; }
.burnt { font-size: 30px; fill: var(--hot); text-anchor: middle; opacity: 0; }
.appliance[data-state="burnt"] .burnt { opacity: 1; }
#mark-bareL, #mark-bareN { opacity: 0; } #mark-bareL.on, #mark-bareN.on { opacity: 1; }
.copper { fill: #e08a4b; }
#mark-bareL.live .copper, #mark-bareN.live .copper { animation: live 1s infinite; }
.live-halo { fill: none; stroke: var(--hot); stroke-width: 14; stroke-linecap: round; opacity: 0; }
.live-halo.live { animation: halo 1s infinite; }
@keyframes live { 50% { filter: drop-shadow(0 0 8px var(--hot)); } }
@keyframes halo { 0%, 100% { opacity: .1; } 50% { opacity: .45; } }
.person circle { fill: none; stroke: #cfd8dc; stroke-width: 3; }
.person path { fill: none; stroke: #cfd8dc; stroke-width: 4; stroke-linecap: round; }
.person[data-state="away"] #arm { opacity: 0; }
.person[data-state="shock"] circle, .person[data-state="shock"] path { stroke: var(--hot); animation: live .4s infinite; }
.person[data-state="safe"] circle, .person[data-state="safe"] path { stroke: var(--ok); }
.earth-line { fill: none; stroke: #ffb3a8; stroke-width: 2; stroke-dasharray: 4 6; opacity: 0; }
.earth-line.on { opacity: .6; }
.board-side { display: flex; flex-direction: column; gap: 1rem; }
.story { background: var(--panel-2); border: 1px solid var(--line); border-radius: 16px; padding: 1.1rem 1.2rem; }
.story p { margin: 0 0 .8rem; }
#st-text { color: #d6e0e3; min-height: 7.5em; }
#st-text b.cl { color: #e3a46e; } #st-text b.cn { color: #78aef5; } #st-text b.cpe { color: var(--pe-y); }
.story-nav { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
#st-dots { display: flex; gap: 5px; }
#st-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
#st-dots i.on { background: var(--accent); }
#st-next { background: var(--accent); color: #1a1408; border-color: var(--accent); font-weight: 600; }
.curve { width: 100%; height: auto; margin: 0 0 .6rem; }
.curve .frame { fill: #0d1823; stroke: var(--line); }
.curve .band { fill: rgba(245, 199, 107, .25); stroke: var(--accent); stroke-width: 1; }
.curve .tick { font-size: 9px; text-anchor: middle; }
.curve .tick.end { text-anchor: end; }
.curve .cursor { stroke: var(--hot); stroke-dasharray: 3 3; }
.curve .dot { fill: var(--hot); }
.readout { margin: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.readout div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .55rem .9rem; background: var(--panel-2); }
.readout dt { color: var(--muted); font-size: .88rem; }
.readout dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.readout .key dt { color: var(--text); }
.readout .alarm dd { color: var(--hot); }
.readout-note { margin: -.4rem 0 0; color: var(--muted); font-size: .8rem; min-height: 1.2em; }
.story-nav button { white-space: nowrap; }
.spark-mark { fill: none; stroke: #fff2a8; stroke-width: 4; stroke-linejoin: round; filter: drop-shadow(0 0 6px #ffd27a); opacity: 0; }
.spark-mark.on { opacity: 1; }

/* 02 Hunt */
.hunt-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.4rem; }
.complaint { background: var(--panel-2); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px; padding: .9rem 1.1rem; margin-bottom: .9rem; }
.complaint p:last-child { margin: 0; font-size: 1.05rem; }
.toolbar { display: flex; flex-wrap: wrap; gap: .4rem; }
.toolbar button { display: inline-flex; align-items: center; gap: .4rem; }
.toolbar button[aria-pressed="true"] { background: var(--accent); color: #1a1408; border-color: var(--accent); font-weight: 600; }
.toolbar small { opacity: .7; font-size: .75rem; }
.ti { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 6px; background: rgba(0, 0, 0, .2); font-weight: 700; font-size: .85rem; }
.tool-hint { color: var(--muted); font-size: .88rem; margin: .5rem 0; min-height: 1.4em; }
.hunt-scene { border-radius: 16px; background: #0d1823; border: 1px solid var(--line); overflow: hidden; }
.hunt-svg { display: block; width: 100%; height: auto; touch-action: manipulation; }
.h-face { fill: #eef0ee; stroke: #b9c1c4; stroke-width: 2; }
.h-hole { fill: #2a2f33; stroke: #8a959a; stroke-width: 2; }
.h-pin { fill: #c9ced0; stroke: #7f8a8f; stroke-width: 2; }
.h-term { fill: #1d3242; stroke: #8fb0c2; stroke-width: 2; }
.hunt-svg[data-tool="tester"] .hit, .hunt-svg[data-tool="meter"] .hit { cursor: crosshair; }
.hunt-svg[data-tool="tester"] .hit:hover, .hunt-svg[data-tool="meter"] .hit:hover { stroke: var(--accent); stroke-width: 3; }
.hunt-svg[data-tool="plug"] .h-face, .hunt-svg[data-tool="open"] .h-box-bg { cursor: pointer; }
.hunt-svg[data-tool="plug"] .h-face:hover { stroke: var(--accent); stroke-width: 3; }
.hunt-svg[data-tool="open"] .h-box-bg:hover { stroke: var(--accent); }
.h-box-bg { fill: #253a49; stroke: #3d5666; stroke-width: 2; stroke-dasharray: 4 4; }
.h-box.open .h-box-cover { display: none; }
.h-box-open { fill: #0f1d28; stroke: #6f8896; stroke-width: 2; }
.h-terminal { fill: #c9a24a; stroke: #6b5520; }
.h-terminal.bad { stroke: var(--hot); stroke-width: 3; }
.hot-spot { fill: rgba(255, 110, 60, .35); stroke: #ff6e3c; animation: live 1s infinite; }
.spark { fill: none; stroke: #fff2a8; stroke-width: 3; filter: drop-shadow(0 0 5px #ffd27a); }
.h-lamp { fill: #3a4f5d; stroke: #8fa4b0; stroke-width: 2; }
.h-heater { fill: #3a4f5d; stroke: #8fa4b0; stroke-width: 2; }
.h-fins { stroke: #8fa4b0; stroke-width: 2; }
.h-cord { stroke: #cfd8dc; stroke-width: 2; fill: none; stroke-dasharray: 2 3; }
.h-board .device.clickable { cursor: pointer; }
.probe circle { stroke: #fff; stroke-width: 2; pointer-events: none; }
.probe.red circle { fill: #e2483d; } .probe.black circle { fill: #111; }
.probe { display: none; }
.tester-mark { pointer-events: none; opacity: 0; }
.tester-mark circle { fill: none; stroke-width: 4; }
.tester-mark.show { animation: tester 1.4s forwards; }
.tester-mark.glow circle { stroke: #ff8a5c; fill: rgba(255, 120, 80, .35); filter: drop-shadow(0 0 10px #ff6e3c); }
.tester-mark.dark circle { stroke: #6f8896; }
@keyframes tester { 0% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
.hunt-side { display: flex; flex-direction: column; gap: .9rem; }
.lcd { background: #b9c7a3; color: #1c2416; border-radius: 12px; padding: .6rem .9rem; border: 3px solid #2d3a26; box-shadow: inset 0 2px 8px rgba(0, 0, 0, .25); }
.lcd span { display: block; font-size: .72rem; letter-spacing: .05em; opacity: .8; min-height: 1.1em; }
.lcd b { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 2rem; letter-spacing: .04em; }
.score { display: flex; justify-content: space-between; align-items: baseline; padding: .5rem .9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.score span { color: var(--muted); } .score b { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.diagnosis { display: grid; gap: .6rem; padding: .9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.diagnosis label { display: grid; gap: .25rem; font-size: .88rem; color: var(--muted); }
.diagnosis button[type="submit"] { background: var(--accent); color: #1a1408; border-color: var(--accent); font-weight: 600; }
.verdict { margin: 0; font-size: .92rem; }
.verdict.ok { color: var(--ok); } .verdict.bad { color: var(--warn); }
.hunt-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.log { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; max-height: 340px; overflow-y: auto; font-size: .86rem; }
.log li { padding: .35rem .6rem; border-radius: 8px; background: rgba(255, 255, 255, .03); border-left: 3px solid var(--line); }
.log li.info { color: var(--muted); }
.log li.glow { border-left-color: #ff8a5c; }
.log li.alarm { border-left-color: var(--hot); color: #ffc2bb; }
.log li.found { border-left-color: var(--ok); }

/* 03 Switches */
.sw-levels { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.sw-levels button { font-size: .88rem; padding: .4rem .75rem; border-radius: 999px; }
.sw-levels button.done { border-color: var(--ok); color: var(--ok); }
.sw-levels button[aria-selected="true"] { background: var(--accent); color: #1a1408; border-color: var(--accent); font-weight: 600; }
.sw-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.4rem; }
.sw-tools { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .7rem; }
.sw-label { color: var(--muted); font-size: .88rem; }
.swatch { display: inline-flex; align-items: center; gap: .35rem; font-size: .84rem; padding: .3rem .6rem; }
.swatch i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .4); }
.swatch.brown i { background: var(--l); } .swatch.black i { background: #222; } .swatch.grey i { background: #9aa3a8; }
.swatch.blue i { background: var(--n); } .swatch.pe i { background: repeating-linear-gradient(90deg, var(--pe-y) 0 4px, var(--pe-g) 4px 8px); }
.swatch[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.sw-tools .toggle { margin-left: auto; }
.sw-scene { position: relative; border-radius: 16px; background: #0d1823; border: 1px solid var(--line); overflow: hidden; }
.sw-svg { display: block; width: 100%; height: auto; touch-action: manipulation; user-select: none; }
.sw-banner { position: absolute; inset: auto 1rem 1rem; padding: .7rem 1rem; border-radius: 10px; background: rgba(120, 20, 15, .92); border: 1px solid var(--hot); color: #fff; font-weight: 700; text-align: center; }
.sw-src rect { fill: #1d3242; stroke: #4a6576; stroke-width: 1.5; }
.sw-box { fill: #e9ecea; stroke: #9aa3a8; stroke-width: 2; }
.sw-slot .dev-label { fill: var(--text); }
.sw-slot .term { fill: #2d3b44; }
.sw-slot .cap { fill: #55656e; }
.type-fixed { fill: #55656e; font-size: 12px; font-weight: 600; }
.type-btn { cursor: pointer; }
.type-btn rect { fill: #d4d9db; stroke: #9aa3a8; }
.type-btn text { fill: #2d3b44; font-weight: 700; font-size: 13px; }
.type-btn:hover rect { fill: #fff; }
.type-btn.sel rect { fill: var(--accent); stroke: #b38a2e; }
.rocker { cursor: pointer; }
.rocker > rect:first-child { fill: #f7f8f7; stroke: #a9b2b6; stroke-width: 2; }
.rocker-tip { fill: #cfd5d8; transition: y .15s; }
.rocker.on .rocker-tip { fill: #b9c2c6; }
.rocker:hover > rect:first-child { stroke: var(--accent); }
.contact { fill: none; stroke: #55656e; stroke-width: 3; stroke-linecap: round; }
.contact.k-L { stroke: var(--hot); } .contact.k-N { stroke: var(--n); }
.sw-lamp .bulb { fill: #22394a; stroke: #6f8896; stroke-width: 2; }
.sw-lamp .filament { fill: none; stroke: #6f8896; stroke-width: 2; }
.sw-lamp.on .bulb { fill: #ffe7a6; stroke: #ffd27a; } .sw-lamp.on .filament { stroke: #c27f17; }
.sw-lamp.dim .bulb { fill: #6b5a33; }
.sw-lamp-base { fill: #1d3242; stroke: #4a6576; }
.sw-wire { cursor: pointer; }
.wire-hit { fill: none; stroke: transparent; stroke-width: 16; }
.wire-case { fill: none; stroke: #0a121a; stroke-width: 8; stroke-linecap: round; }
.sw-wire .wire { stroke-width: 5; }
.sw-wire:hover .wire-case { stroke: var(--hot); }
.sw-brown { stroke: var(--l); } .sw-black { stroke: #2a2a2a; } .sw-grey { stroke: #9aa3a8; } .sw-blue { stroke: var(--n); } .sw-pe { stroke: var(--pe-y); }
.sw-flow { stroke-width: 2.5; animation: dash 1.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -34; } }
.rubber { fill: none; stroke-width: 4; stroke-dasharray: 8 6; pointer-events: none; opacity: .9; }
.sw-term { cursor: pointer; }
.sw-term .screw { fill: #c9a24a; stroke: #5e4a1c; stroke-width: 2; }
.sw-term .halo { fill: transparent; stroke: none; }
.sw-term.k-L .halo { fill: rgba(255, 92, 77, .35); }
.sw-term.k-N .halo { fill: rgba(63, 134, 232, .35); }
.sw-term.k-PE .halo { fill: rgba(227, 207, 60, .3); }
.sw-term:hover .screw { stroke: var(--accent); stroke-width: 3; }
.sw-term.pending .screw { stroke: var(--accent); stroke-width: 4; }
.sw-term.pending .halo { fill: rgba(245, 199, 107, .5); }
.sw-side { display: flex; flex-direction: column; gap: .9rem; }
.sw-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
#sw-check { background: var(--accent); color: #1a1408; border-color: var(--accent); font-weight: 600; }
.sw-result:empty { display: none; }
.sw-result { padding: .9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.sw-result ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .4rem; }
.sw-result li.err { color: #ffc2bb; } .sw-result li.warn { color: var(--warn); }
.sw-result .res-ok { color: var(--ok); margin: 0 0 .6rem; }
.sw-result button { margin-top: .6rem; }
.sw-hint { padding: .9rem; border: 1px dashed var(--accent); border-radius: 12px; color: #e8dcc0; font-size: .92rem; }
.sw-types { font-size: .86rem; color: var(--muted); }
.sw-types p { margin: 0 0 .5rem; }
.sw-types b { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 6px; background: var(--accent); color: #1a1408; margin-right: .3rem; }

/* 04 PEN */
.pen-layout { display: grid; gap: 1.2rem; }
.pen-scene { max-width: 1060px; }
.pen-scene { border-radius: 16px; background: #0d1823; border: 1px solid var(--line); overflow: hidden; }
.pen-svg { display: block; width: 100%; height: auto; }
.trafo circle { fill: #1d3242; stroke: #4a6576; stroke-width: 2; }
.trafo path { stroke: var(--text); stroke-width: 3; fill: none; }
.flat-box rect { fill: #1d3242; stroke: #4a6576; stroke-width: 2; }
.flat-box .flat-v { fill: var(--text); font-weight: 700; font-size: 15px; }
.flat-box.over rect { stroke: var(--hot); fill: #3a1b1a; } .flat-box.over .flat-v { fill: #ffb3a8; }
.flat-box.under rect, .flat-box.dead rect { stroke: var(--warn); }
.pe-house.live text { fill: var(--hot); font-weight: 700; }
.ph-tri { fill: rgba(255, 255, 255, .02); stroke: #2f4655; stroke-dasharray: 4 5; }
.ph-ideal { stroke: #2f4655; stroke-width: 2; }
.ph-load { stroke-width: 5; stroke-linecap: round; transition: all .2s; }
.ph-load.ok { stroke: var(--ok); } .ph-load.over { stroke: var(--hot); } .ph-load.under, .ph-load.dead { stroke: var(--warn); }
.ph-val { font-size: 14px; font-weight: 700; }
.ph-val.ok { fill: var(--ok); } .ph-val.over { fill: #ffb3a8; } .ph-val.under, .ph-val.dead { fill: var(--warn); }
.ph-earth { fill: var(--pe-y); }
.ph-shift { stroke: var(--hot); stroke-width: 2; stroke-dasharray: 5 4; }
.ph-star { fill: var(--n); stroke: #fff; stroke-width: 2; }
.ph-star.loose { fill: var(--hot); }
.danger-toggle { color: #ffc2bb; font-weight: 600; }
.flats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.flat { padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); display: grid; grid-template-columns: auto 1fr; gap: .1rem .8rem; align-items: baseline; }
.flat .eyebrow { grid-column: 1 / -1; margin: 0; }
.flat-u { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.flat-st { color: var(--muted); font-size: .88rem; }
.flat[data-status="over"] { border-color: var(--hot); } .flat[data-status="over"] .flat-u, .flat[data-status="over"] .flat-st { color: #ffb3a8; }
.flat[data-status="under"] .flat-u, .flat[data-status="dead"] .flat-u { color: var(--warn); }
.flat .slider-label { grid-column: 1 / -1; display: flex; justify-content: space-between; color: var(--muted); font-size: .85rem; margin-top: .3rem; }
.flat input { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); }
.presets { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0; }
.presets button { font-size: .85rem; padding: .35rem .7rem; }
.pen-explain { color: #d6e0e3; margin: 0; }

@media (max-width: 1020px) {
  .board-layout, .hunt-layout, .sw-layout { grid-template-columns: 1fr; }
  #st-text { min-height: 0; }
  .legend { margin-left: 0; }
}
@media (max-width: 760px) {
  .board-scene, .hunt-scene, .sw-scene, .pen-scene { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .board-svg, .hunt-svg, .sw-svg, .pen-svg { min-width: 720px; }
  .sw-banner { position: sticky; left: 0; }
}
@media (max-width: 560px) {
  .panel { padding: 1rem; border-radius: 14px; }
  .sw-tools .toggle { margin-left: 0; }
  .flats { grid-template-columns: 1fr; }
  svg text { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}