:root{--bg-board:#0e1726;--bg-chrome:#111c2e;--ink:#c7d2e0;--signal-high:#ffb454;--signal-low:#3a4a63;--accent:#22d3ee;--ink-dim:#7e8ca3;--hairline:#243047;--chrome-hover:#18243a;--grid-fine:#3a4a6338;--grid-coarse:#3a4a6361;--signal-high-glow:#ffb45473;--font-display:"Space Grotesk", system-ui, sans-serif;--font-body:"Inter", system-ui, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, "SF Mono", monospace;--fs-xs:.75rem;--fs-sm:.875rem;--fs-md:1rem;--fs-lg:1.25rem;--fs-xl:1.5rem;--fs-2xl:2rem;--tracking-mono:.04em;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--radius-panel:6px;--canvas-grid:24px;--t-fast:.12s;--ease:cubic-bezier(.4, 0, .2, 1)}:root[data-theme=light]{--bg-board:#f2f4f8;--bg-chrome:#fff;--ink:#1e2a3d;--signal-high:#ffb454;--signal-low:#9aa7bd;--accent:#0e9bb5;--ink-dim:#5a6b85;--hairline:#d5dce7;--chrome-hover:#eef1f6;--grid-fine:#9aa7bd4d;--grid-coarse:#9aa7bd80;--signal-high-glow:#ffb45480}*,:before,:after{box-sizing:border-box}html,body,#app{height:100%;margin:0}body{font-family:var(--font-body);font-size:var(--fs-sm);color:var(--ink);background:var(--bg-board);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility}.app-shell{grid-template-rows:auto 1fr auto;height:100%;display:grid;overflow:hidden}.topbar{align-items:center;gap:var(--sp-4);padding:0 var(--sp-4);background:var(--bg-chrome);border-bottom:1px solid var(--hairline);height:52px;display:flex}.brand{align-items:center;gap:var(--sp-2);font-family:var(--font-display);font-weight:600;font-size:var(--fs-md);letter-spacing:.01em;color:var(--ink);display:flex}.brand__mark{color:var(--signal-high);font-size:var(--fs-lg);line-height:1}.topbar__group{align-items:center;gap:var(--sp-1);display:flex}.topbar__spacer{flex:1}.btn{appearance:none;font-family:var(--font-body);font-size:var(--fs-sm);color:var(--ink);border-radius:var(--radius-panel);padding:var(--sp-1) var(--sp-3);cursor:pointer;transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);background:0 0;border:1px solid #0000}.btn:hover{background:var(--chrome-hover)}.btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.btn.is-stub{color:var(--ink-dim);opacity:.5;cursor:default}.btn.is-stub:hover{background:0 0}.btn--icon{padding:var(--sp-1) var(--sp-2);font-size:var(--fs-md);line-height:1}.menu-anchor{display:inline-flex;position:relative}.menu{z-index:50;min-width:248px;max-height:320px;padding:var(--sp-1);background:var(--bg-chrome);border:1px solid var(--hairline);border-radius:var(--radius-panel);position:absolute;top:calc(100% + 6px);left:0;overflow-y:auto;box-shadow:0 8px 24px #00000059}.menu[hidden]{display:none}.menu__empty{padding:var(--sp-3);color:var(--ink-dim);font-size:var(--fs-xs)}.menu__row{align-items:stretch;gap:var(--sp-1);display:flex}.menu__load{justify-content:space-between;align-items:baseline;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-panel);color:var(--ink);text-align:left;cursor:pointer;background:0 0;border:none;flex:1;display:flex}.menu__load:hover{background:var(--chrome-hover)}.menu__name{font-family:var(--font-body);font-size:var(--fs-sm)}.menu__time{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:var(--tracking-mono);color:var(--ink-dim)}.menu__del{padding:0 var(--sp-2);border-radius:var(--radius-panel);color:var(--ink-dim);font-size:var(--fs-md);cursor:pointer;background:0 0;border:none}.menu__del:hover{color:#ff6b6b;background:var(--chrome-hover)}.menu__load:focus-visible,.menu__del:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.live{align-items:center;gap:var(--sp-2);font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:var(--tracking-mono);color:var(--ink-dim);display:flex}.live__dot{background:var(--accent);width:8px;height:8px;box-shadow:0 0 6px var(--accent);border-radius:50%}.workspace{grid-template-columns:240px 1fr;min-height:0;display:grid}.palette{background:var(--bg-chrome);border-right:1px solid var(--hairline);padding:var(--sp-2) 0 var(--sp-5);overflow-y:auto}.palette__title{justify-content:space-between;align-items:center;gap:var(--sp-2);font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--ink-dim);padding:var(--sp-3) var(--sp-4) var(--sp-2);display:flex}.palette__guide{font-family:var(--font-body);font-size:var(--fs-xs);text-transform:none;letter-spacing:0;color:var(--ink-dim);border:1px solid var(--hairline);border-radius:var(--radius-panel);padding:2px var(--sp-2);cursor:pointer;transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);background:0 0;align-items:center;gap:4px;display:inline-flex}.palette__guide:hover{color:var(--accent);border-color:var(--accent)}.palette__guide:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.cat{border-top:1px solid var(--hairline)}.cat>summary{align-items:center;gap:var(--sp-2);cursor:pointer;padding:var(--sp-3) var(--sp-4);font-family:var(--font-display);font-size:var(--fs-sm);color:var(--ink);-webkit-user-select:none;user-select:none;font-weight:500;list-style:none;display:flex}.cat>summary::-webkit-details-marker{display:none}.cat>summary:hover{background:var(--chrome-hover)}.cat>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.cat__chevron{color:var(--ink-dim);transition:transform var(--t-fast) var(--ease)}.cat[open] .cat__chevron{transform:rotate(90deg)}.cat__items{gap:var(--sp-2);padding:0 var(--sp-4) var(--sp-3);flex-wrap:wrap;display:flex}.chip{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:var(--tracking-mono);color:var(--ink);background:var(--bg-board);border:1px solid var(--hairline);border-radius:var(--radius-panel);padding:var(--sp-1) var(--sp-2);cursor:pointer;transition:border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease)}.chip:hover{border-color:var(--accent);color:var(--accent)}.chip:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.chip.is-soon{color:var(--ink-dim);cursor:default;opacity:.55}.cat__hint{padding:0 var(--sp-2) var(--sp-1);font-size:var(--fs-xs);color:var(--ink-dim);line-height:1.5}.chip.is-soon:hover{border-color:var(--hairline);color:var(--ink-dim)}.chip-row{align-items:stretch;display:inline-flex}.chip-row .chip{border-top-right-radius:0;border-bottom-right-radius:0}.chip-info{color:var(--ink-dim);background:var(--bg-board);border:1px solid var(--hairline);border-top-right-radius:var(--radius-panel);border-bottom-right-radius:var(--radius-panel);cursor:pointer;transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);border-left:none;justify-content:center;align-items:center;padding:0 5px;display:inline-flex}.chip-info:hover{color:var(--accent);border-color:var(--accent)}.chip-info:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.chip-del{font-size:var(--fs-md);line-height:1}.chip-del:hover{color:#ff6b6b;border-color:#ff6b6b}.board-area{--rail-w:132px;grid-template-columns:var(--rail-w) 1fr var(--rail-w);background:var(--bg-board);min-width:0;display:grid;position:relative}.rail-band{padding:var(--sp-4) var(--sp-3);background:var(--bg-chrome);flex-direction:column;display:flex}.rail-band--in{border-right:1px solid var(--hairline)}.rail-band--out{border-left:1px solid var(--hairline)}.rail-band__label{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--ink-dim)}.rail-band__add{z-index:2;font-family:var(--font-body);font-size:var(--fs-xs);color:var(--ink-dim);background:var(--bg-chrome);border:1px dashed var(--hairline);border-radius:var(--radius-panel);padding:var(--sp-2);cursor:pointer;transition:border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);margin-top:auto;position:relative}.rail-band__add:hover{border-color:var(--accent);color:var(--accent)}.rail-band__add:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.board-area.is-drop-target:after{content:"Drop a .json file to import";inset:var(--sp-4);z-index:40;border:2px dashed var(--accent);border-radius:var(--radius-panel);background:color-mix(in srgb, var(--accent) 8%, transparent);color:var(--accent);font-family:var(--font-mono);font-size:var(--fs-sm);letter-spacing:var(--tracking-mono);pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute}.board-center{background-color:var(--bg-board);background-image:linear-gradient(var(--grid-coarse) 1px, transparent 1px), linear-gradient(90deg, var(--grid-coarse) 1px, transparent 1px), linear-gradient(var(--grid-fine) 1px, transparent 1px), linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px);background-size:120px 120px, 120px 120px, var(--canvas-grid) var(--canvas-grid), var(--canvas-grid) var(--canvas-grid);min-width:0;position:relative;overflow:hidden}.canvas{z-index:1;touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}.empty-state{justify-content:center;align-items:center;gap:var(--sp-3);text-align:center;pointer-events:none;padding:var(--sp-5);flex-direction:column;display:flex;position:absolute;inset:0}.empty-state__mark{color:var(--signal-low);font-size:2.5rem}.empty-state__line{font-family:var(--font-display);font-size:var(--fs-lg);color:var(--ink)}.empty-state__hint{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:var(--tracking-mono);color:var(--ink-dim);max-width:46ch;line-height:1.6}.wire{fill:none;stroke:var(--signal-low);stroke-width:2px;stroke-linecap:round;cursor:pointer;transition:stroke var(--t-fast) var(--ease)}.wire:hover{stroke:var(--accent)}.wire.is-high{stroke:var(--signal-high);stroke-width:2.5px;filter:drop-shadow(0 0 3px var(--signal-high-glow))}.wire.is-cycle{stroke:#ff6b6b;stroke-dasharray:5 4}.wire.is-selected{stroke:var(--accent)}.wire--preview{stroke:var(--accent);stroke-width:2px;stroke-dasharray:6 5;pointer-events:none}.wire-pulse{fill:none;stroke:var(--signal-high);stroke-width:2.5px;stroke-linecap:round;stroke-dasharray:5 16;opacity:.7;pointer-events:none;animation:1.8s linear infinite signal-flow}@keyframes signal-flow{to{stroke-dashoffset:-21px}}.canvas.is-pan-ready{cursor:grab}.canvas.is-panning{cursor:grabbing}.term{fill:var(--bg-board);stroke:var(--ink-dim);stroke-width:1.5px;cursor:crosshair;transition:fill var(--t-fast) var(--ease), stroke var(--t-fast) var(--ease)}.term--out{fill:var(--ink-dim)}.term.is-high{fill:var(--signal-high);stroke:var(--signal-high)}.term:hover{stroke:var(--accent)}.canvas.is-wiring .term--in{stroke:var(--accent);fill:color-mix(in srgb, var(--accent) 18%, transparent)}@media (pointer:coarse){.term{r:10px}}.gate-body{fill:var(--bg-chrome);stroke:var(--ink);stroke-width:1.5px;cursor:grab}.gate-label{fill:var(--ink);font-family:var(--font-mono);letter-spacing:var(--tracking-mono);text-anchor:middle;dominant-baseline:central;pointer-events:none;font-size:13px}.gate-sublabel{fill:var(--ink-dim);font-family:var(--font-mono);letter-spacing:var(--tracking-mono);text-anchor:middle;dominant-baseline:central;pointer-events:none;font-size:9px}.pin-label{fill:var(--ink-dim);font-family:var(--font-mono);dominant-baseline:central;pointer-events:none;font-size:8px}.clk-body{fill:var(--bg-chrome);stroke:var(--ink);stroke-width:1.5px;cursor:grab}.comp.is-selected .clk-body{stroke:var(--accent);stroke-width:2px}.clk-wave{fill:none;stroke:var(--ink-dim);stroke-width:2px;stroke-linejoin:miter;pointer-events:none;transition:stroke var(--t-fast) var(--ease)}.clk-wave.is-on{stroke:var(--signal-high)}.seg-body{fill:var(--bg-chrome);stroke:var(--ink);stroke-width:1.5px;cursor:grab}.comp.is-selected .seg-body{stroke:var(--accent);stroke-width:2px}.seg{stroke:var(--signal-low);stroke-width:7px;stroke-linecap:round;opacity:.35;transition:stroke var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease)}.seg.is-on{stroke:var(--signal-high);opacity:1;filter:drop-shadow(0 0 3px var(--signal-high-glow))}.io-body{fill:var(--bg-chrome);stroke:var(--hairline);stroke-width:1.5px;cursor:pointer}.io-label{fill:var(--ink);font-family:var(--font-mono);letter-spacing:var(--tracking-mono);dominant-baseline:central;pointer-events:none;font-size:12px}.comp.is-selected .gate-body,.comp.is-selected .io-body{stroke:var(--accent);stroke-width:2px}.block-body{fill:var(--bg-chrome);stroke:var(--ink);stroke-width:1.5px;rx:7px;cursor:grab}.comp.is-selected .block-body{stroke:var(--accent);stroke-width:2px}.val-chip{fill:var(--signal-low)}.val-chip.is-on{fill:var(--signal-high)}.val-text{fill:var(--ink-dim);font-family:var(--font-mono);text-anchor:middle;dominant-baseline:central;pointer-events:none;font-size:12px}.val-text.is-on{fill:var(--bg-board)}.led-lamp{fill:var(--signal-low);stroke:var(--hairline);stroke-width:1px;transition:fill var(--t-fast) var(--ease), filter var(--t-fast) var(--ease)}.led-lamp.is-on{fill:var(--signal-high);stroke:var(--signal-high);filter:drop-shadow(0 0 5px var(--signal-high-glow))}.statusbar{align-items:center;gap:var(--sp-4);height:30px;padding:0 var(--sp-4);background:var(--bg-chrome);border-top:1px solid var(--hairline);font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:var(--tracking-mono);color:var(--ink-dim);display:flex}.statusbar__spacer{flex:1}.statusbar__sep{opacity:.5}.statusbar__btn{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:var(--tracking-mono);color:var(--ink-dim);border:1px solid var(--hairline);border-radius:var(--radius-panel);padding:1px var(--sp-2);cursor:pointer;transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);background:0 0}.statusbar__btn:hover{color:var(--accent);border-color:var(--accent)}.statusbar__btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.guide-backdrop{z-index:80;opacity:0;pointer-events:none;transition:opacity .16s var(--ease);background:#0006;position:fixed;inset:0}.guide-backdrop.is-open{opacity:1;pointer-events:auto}.guide{z-index:90;background:var(--bg-chrome);border-left:1px solid var(--hairline);width:400px;max-width:92vw;height:100%;transition:transform .2s var(--ease);grid-template-rows:auto auto 1fr;display:grid;position:fixed;top:0;right:0;transform:translate(100%);box-shadow:-10px 0 30px #00000059}.guide.is-open{transform:translate(0)}.guide__head{padding:var(--sp-4);border-bottom:1px solid var(--hairline);justify-content:space-between;align-items:center;display:flex}.guide__title{font-family:var(--font-display);font-weight:600;font-size:var(--fs-md)}.guide__close{color:var(--ink-dim);font-size:var(--fs-xl);padding:0 var(--sp-2);cursor:pointer;border-radius:var(--radius-panel);background:0 0;border:none;line-height:1}.guide__close:hover{color:var(--accent)}.guide__close:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.guide__nav{gap:var(--sp-1);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--hairline);flex-wrap:wrap;max-height:132px;display:flex;overflow-y:auto}.guide__cat{width:100%;margin-top:var(--sp-1);font-family:var(--font-mono);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--tracking-mono);color:var(--ink-dim)}.guide__navitem{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--ink);background:var(--bg-board);border:1px solid var(--hairline);border-radius:var(--radius-panel);padding:2px var(--sp-2);cursor:pointer;transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease)}.guide__navitem:hover{color:var(--accent);border-color:var(--accent)}.guide__navitem.is-active{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb, var(--accent) 12%, transparent)}.guide__navitem:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.guide__body{padding:var(--sp-4) var(--sp-5);overflow-y:auto}.guide__h2{margin:0 0 var(--sp-2);font-family:var(--font-display);font-size:var(--fs-lg);color:var(--ink)}.guide__summary{margin:0 0 var(--sp-3);font-size:var(--fs-sm);color:var(--ink)}.guide__h3{margin:var(--sp-4) 0 var(--sp-2);font-family:var(--font-display);font-size:var(--fs-sm);color:var(--accent)}.guide__body p{margin:0 0 var(--sp-2);font-size:var(--fs-sm);color:var(--ink);line-height:1.65}.guide__body ul{margin:0 0 var(--sp-2);padding-left:var(--sp-4)}.guide__body li{margin-bottom:var(--sp-1);font-size:var(--fs-sm);color:var(--ink);line-height:1.6}.truth{border-collapse:collapse;margin:var(--sp-2) 0 var(--sp-3);font-family:var(--font-mono);font-size:var(--fs-xs)}.truth th,.truth td{border:1px solid var(--hairline);text-align:center;padding:4px 12px}.truth th{color:var(--ink-dim);font-weight:500}.t-cell.is-one{color:var(--signal-high);font-weight:600}.t-cell.is-zero{color:var(--ink-dim)}.tutorial{z-index:70;width:360px;max-width:calc(100vw - 32px);padding:var(--sp-4);background:var(--bg-chrome);border:1px solid var(--accent);border-radius:var(--radius-panel);position:fixed;bottom:44px;left:50%;transform:translate(-50%);box-shadow:0 12px 32px #00000073}.tutorial[hidden]{display:none}.tutorial__head{margin-bottom:var(--sp-2);justify-content:space-between;align-items:center;display:flex}.tutorial__step{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:var(--tracking-mono);color:var(--accent)}.tutorial__skip{color:var(--ink-dim);font-size:var(--fs-xs);cursor:pointer;background:0 0;border:none}.tutorial__skip:hover{color:var(--accent)}.tutorial__title{margin:0 0 var(--sp-2);font-family:var(--font-display);font-size:var(--fs-md);color:var(--ink)}.tutorial__body{margin:0 0 var(--sp-4);font-size:var(--fs-sm);color:var(--ink);line-height:1.6}.tutorial__nav{justify-content:space-between;align-items:center;gap:var(--sp-2);display:flex}.tutorial__back{color:var(--ink-dim);border:1px solid var(--hairline);border-radius:var(--radius-panel);padding:var(--sp-2) var(--sp-4);cursor:pointer;background:0 0}.tutorial__back[hidden]{display:none}.tutorial__back:hover{color:var(--ink);border-color:var(--ink-dim)}.tutorial__next{background:var(--accent);color:var(--bg-board);border-radius:var(--radius-panel);padding:var(--sp-2) var(--sp-4);cursor:pointer;border:none;margin-left:auto;font-weight:600}.tutorial__next:hover{filter:brightness(1.06)}.tutorial__back:focus-visible,.tutorial__next:focus-visible,.tutorial__skip:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.tut-highlight{border-radius:var(--radius-panel);animation:1.4s ease-in-out infinite tut-pulse}@keyframes tut-pulse{0%,to{box-shadow:0 0 #22d3ee8c}50%{box-shadow:0 0 0 7px #22d3ee00}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important}.wire-pulse{display:none}.tut-highlight{outline:2px solid var(--accent);outline-offset:2px}}