:root{--cell: 52px;--bg: #0f1319;--panel: #161c24;--line: #2a333f;--ink: #dfe6ee;--dim: #8b98a8;--accent: #7fd1e8}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.65 ui-sans-serif,-apple-system,Helvetica Neue,Hiragino Sans,sans-serif}main{max-width:1040px;margin:0 auto;padding:32px 20px 64px}header h1{font-size:34px;margin:0 0 8px;letter-spacing:-.02em;font-weight:650}header h1 span{color:var(--accent)}.sub{color:var(--dim);margin:0 0 24px;max-width:74ch}.sub strong{color:var(--ink);font-weight:600}h2{font-size:19px;margin:32px 0 10px;letter-spacing:-.01em}h3{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--dim);margin:0 0 10px;font-weight:600}#wrap{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap}.stage{flex:0 0 auto}.side{flex:1 1 260px;min-width:240px}.grid{position:relative;display:grid;gap:0;background:var(--panel);border:2px solid var(--line);border-radius:6px;touch-action:none;-webkit-user-select:none;user-select:none;width:max-content}#pipes{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.cell{width:var(--cell);height:var(--cell);border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer}.cell.taken{background:color-mix(in srgb,var(--tint) 13%,transparent)}.cell.proved:after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:var(--tint);opacity:.6;bottom:4px;right:4px}.cell.preview{background:color-mix(in srgb,var(--tint) 22%,transparent)}.circ{position:relative;z-index:2;width:calc(var(--cell) * .64);height:calc(var(--cell) * .64);border-radius:50%;background:#0b0f14;border:2px solid var(--ink);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:calc(var(--cell) * .36);font-weight:650;font-variant-numeric:tabular-nums}.cell.sel .circ{border-color:var(--accent);box-shadow:0 0 0 3px #7fd1e847}.arr{position:relative;z-index:2;font-size:calc(var(--cell) * .48);line-height:1;color:#f2c14e;font-weight:700}.budget{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:12px 14px}.brow{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-size:13px}.brow span{color:var(--dim)}.brow b{font-variant-numeric:tabular-nums;font-weight:600}.asidenote{color:var(--dim);font-size:13px;margin:12px 0 0}.asidenote code{color:var(--ink)}.legend{display:flex;flex-wrap:wrap;gap:18px;margin:20px 0 8px;font-size:13px;color:var(--dim)}.legend b{color:var(--ink);font-weight:600}.swatch{display:inline-block;width:14px;height:14px;border-radius:3px;margin-right:6px;vertical-align:-2px}.swatch.circle{border-radius:50%;background:#0b0f14;border:2px solid var(--ink)}.swatch.arrow{background:#f2c14e}.swatch.pipe{background:#7fd1e88c}.swatch.ghost{background:#7fd1e84d}.hud{min-height:26px;margin:8px 0 4px;font-size:14px;color:var(--dim)}.hud b{color:var(--ink)}.hud .good{color:#8fdb5f}.hud .bad{color:#f0806c}#status.good{color:#8fdb5f}#status.bad{color:#f0806c}.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0 8px}.controls label{font-size:13px;color:var(--dim);display:flex;gap:6px;align-items:center}select,button{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:5px;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer}button:hover,select:hover{border-color:var(--accent)}.notes{max-width:78ch}.notes p{color:#c3ccd8}.notes code{background:#1b222c;padding:1px 5px;border-radius:3px;font-size:13px}.thm{border-left:3px solid var(--accent);padding:8px 0 8px 14px;color:var(--ink)!important;font-weight:500}.fine{color:var(--dim)!important;font-size:13px}table{border-collapse:collapse;margin:12px 0;font-size:13px;font-variant-numeric:tabular-nums}th,td{border:1px solid var(--line);padding:5px 12px;text-align:right}th:first-child,td:first-child{text-align:left}th{color:var(--dim);font-weight:600}figure{margin:14px 0}pre.board{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:12px 14px;font-size:13px;line-height:1.5;overflow-x:auto;color:var(--ink)}footer{margin-top:44px;padding-top:18px;border-top:1px solid var(--line)}footer p{color:var(--dim);font-size:13px;max-width:78ch}@media (max-width: 720px){:root{--cell: 38px}main{padding:20px 12px 44px}}.controls .chk{gap:5px;cursor:pointer}.controls .chk input{accent-color:var(--accent);cursor:pointer}
