:root{--gap: 2px}*{box-sizing:border-box}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;background:#0b0e14;color:#e6e6e6}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px}.title{font-size:20px;font-weight:600;opacity:.95;text-align:center}.stage{display:flex;flex-direction:column;align-items:center}.palette{display:flex;gap:8px;align-items:center;justify-content:center;margin-bottom:12px}.swatch{width:36px;height:36px;border-radius:8px;border:2px solid transparent;cursor:pointer}.swatch.selected{outline:2px solid #e6e6e6;outline-offset:2px}.board{width:512px;height:512px;display:grid;grid-template-columns:repeat(16,1fr);grid-template-rows:repeat(16,1fr);gap:var(--gap);background:#1a1f2b;padding:var(--gap);border-radius:12px;box-shadow:0 0 0 1px #ffffff0d,0 8px 24px #00000059}.cell{border-radius:6px;cursor:crosshair;transition:transform 80ms ease}.cell:active{transform:scale(.98)}.status{font-size:12px;opacity:.85;display:flex;gap:12px;align-items:center;justify-content:center}.status .dot{width:8px;height:8px;border-radius:50%;display:inline-block}.status .online{background:#3ddc97}.status .offline{background:#ff6b6b}.footer{font-size:12px;opacity:.7;text-align:center}.link{color:#a0c4ff;text-decoration:none}.link:hover{text-decoration:underline}@media (max-width: 560px){.board{width:90vw;height:90vw}}