:root{--bg: #0e1218;--panel: #161d27;--line: #232e3d;--ink: #dce4ef;--dim: #8b98ab;--mark: #6fb3e0;--water: #1d4f7c;--water-edge: #2f7cb8;--dry: #f2f5fa;--good: #59b18b;--bad: #d3666c;--warn: #d8a44f}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.65 ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}main{max-width:1080px;margin:0 auto;padding:28px 20px 72px}header h1{font-size:30px;margin:0 0 8px;letter-spacing:-.01em}header h1 span{color:var(--mark)}.sub{color:var(--dim);max-width:70ch;margin:0 0 22px}.sub strong{color:var(--ink);font-weight:600}#wrap{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}.stage{flex:0 0 auto}.side{flex:1 1 260px;min-width:250px}h3{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--dim);margin:0 0 10px;font-weight:600}#board{display:grid;gap:0;background:var(--panel);border:2px solid var(--line);border-radius:8px;padding:3px;touch-action:none;user-select:none;-webkit-user-select:none}.cell{width:var(--cs);height:var(--cs);border:1px solid rgba(190,210,235,.09);display:flex;align-items:center;justify-content:center;font-size:15px;font-variant-numeric:tabular-nums;cursor:crosshair;position:relative;background:#131922}.cell.black{background:var(--water);border-color:var(--water-edge)}.cell.white{background:#1c2430}.cell.white:after{content:"";width:5px;height:5px;border-radius:50%;background:#bed2eb47}.cell.clue{background:var(--dry);color:#14202c;font-weight:650;border-color:#b9c6d6;cursor:default}.cell.clue.ok{background:#cfe9d9}.cell.clue.bad{background:#f0c9cb}.cell.blocked{outline:2px solid var(--bad);outline-offset:-2px;z-index:2}.cell.ghostblack:before,.cell.ghostwhite:before{content:"";position:absolute;top:22%;right:22%;bottom:22%;left:22%;border-radius:3px}.cell.ghostblack:before{background:#6fb3e080}.cell.ghostwhite:before{border:1.5px dashed rgba(190,210,235,.42)}.budget{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}.chip{font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);background:#121924;color:var(--dim);font-variant-numeric:tabular-nums}.chip.ok{border-color:#59b18b8c;color:var(--good)}.chip.bad{border-color:#d3666c8c;color:var(--bad)}.chip.pending{border-color:#d8a44f66;color:var(--warn)}.asidenote{color:var(--dim);font-size:13px;margin:6px 0 0}.asidenote b{color:var(--ink);font-weight:600}.bars{margin:10px 0 0}.bar{height:10px;border-radius:3px;background:#131922;position:relative;overflow:hidden}.bar i{position:absolute;top:0;bottom:0;display:block}.bar i.floor{background:#6fb3e040}.bar i.now{background:var(--water-edge)}.barlab{display:flex;justify-content:space-between;font-size:12px;color:var(--dim)}.legend{display:flex;flex-wrap:wrap;gap:16px;margin:20px 0 6px;font-size:13px;color:var(--dim)}.legend b{color:var(--ink);font-weight:600}.swatch{display:inline-block;width:13px;height:13px;border-radius:3px;margin-right:6px;vertical-align:-2px;border:1px solid var(--line)}.swatch.w{background:var(--water);border-color:var(--water-edge)}.swatch.d{background:#1c2430}.swatch.c{background:var(--dry)}.swatch.g{background:#6fb3e080}.hud{min-height:26px;margin:10px 0 0;font-size:14px}.hud .ok{color:var(--good)}.hud .bad{color:var(--bad)}.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0 0;font-size:13px;color:var(--dim)}.controls label{display:inline-flex;gap:6px;align-items:center}.controls select,.controls button{font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:5px 10px}.controls button{cursor:pointer}.controls button:hover{border-color:var(--mark)}.controls .chk{gap:6px}.notes{margin-top:46px;border-top:1px solid var(--line);padding-top:10px}.notes h2{font-size:19px;margin:34px 0 10px}.notes p,.notes li{color:#c3cddb;max-width:74ch}.notes code{background:#121924;border:1px solid var(--line);border-radius:4px;padding:1px 5px;font-size:13px}.notes table{border-collapse:collapse;margin:14px 0 18px;font-size:13.5px;font-variant-numeric:tabular-nums}.notes th,.notes td{border:1px solid var(--line);padding:5px 11px;text-align:right}.notes th{color:var(--dim);font-weight:600}.notes td{color:var(--ink)}.notes a{color:var(--mark)}footer{margin-top:40px;color:var(--dim);font-size:13px}footer a{color:var(--mark)}@media (max-width: 720px){.side{flex-basis:100%}}