:root {--wire:#475569;--live:#1d4ed8;} :root[data-theme=dark] {--wire:#cbd5e1;--live:#93c5fd;}
@media(prefers-color-scheme:dark) {:root:not([data-theme=light]) {--wire:#cbd5e1;--live:#93c5fd;}}
#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.linked {color:var(--live);} .cell:disabled {opacity:1;} .cell.selected {outline:3px solid #2563eb;outline-offset:-4px;}
.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;} .play-actions {grid-template-columns:repeat(3,minmax(0,1fr));}
@media(max-width:360px) {main {width:calc(100% - 16px);} .source .junction {font-size:.95rem;}}