:root {--wire:#475569;--live:#1d4ed8;--cursor:#b45309;}
:root[data-theme=dark] {--wire:#cbd5e1;--live:#93c5fd;--cursor:#fbbf24;}
@media(prefers-color-scheme:dark) {:root:not([data-theme=light]) {--wire:#cbd5e1;--live:#93c5fd;--cursor:#fbbf24;}}
#board {grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:2px solid var(--line);border-radius:8px;overflow:hidden;}
.cell {position:relative;border-radius:0;border:1px solid var(--line);min-width:44px;min-height:44px;color:var(--wire);}
.cell.in-row,.cell.in-column {background:var(--selected);} .cell.cursor {box-shadow:inset 0 0 0 3px var(--cursor);} .cell.linked {color:var(--live);} .cell:disabled {opacity:1;}
.cell.wire-error::after {content:'!';position:absolute;right:2px;top:0;font-size:.75rem;line-height:1;color:var(--error);background:var(--surface);border-radius:2px;pointer-events:none;}
.arm {position:absolute;background:currentColor;pointer-events:none;} .arm.n {width:8%;height:50%;top:0;left:46%;} .arm.e {height:8%;width:50%;left:50%;top:46%;} .arm.s {width:8%;height:50%;top:50%;left:46%;} .arm.w {height:8%;width:50%;left:0;top:46%;}
.junction {position:absolute;left:39%;top:39%;width:22%;height:22%;border-radius:50%;background:currentColor;pointer-events:none;} .source .junction {left:33%;top:33%;width:34%;height:34%;border-radius:4px;background:var(--surface);border:2px solid currentColor;display:flex;align-items:center;justify-content:center;font-size:1.2rem;}
.selection-label {margin:0 auto 4px;text-align:center;font-size:.8rem;color:var(--muted);} .shift-actions {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;max-width:430px;margin:0 auto 8px;} .shift-actions button {min-height:48px;min-width:44px;padding:4px 2px;font-size:.78rem;line-height:1.25;}
.play-actions {grid-template-columns:repeat(3,minmax(0,1fr));} .metrics {gap:10px;}
@media(max-width:360px) {main {width:calc(100% - 16px);} .source .junction {font-size:.95rem;} .metrics {font-size:.75rem;gap:8px;}}