:root{--bg: #f6f5f2;--fg: #1a1a1a;--muted: #5b5b5b;--accent: #2a6df4;--border: #d4d2cd;--pill-idle: #9a9a9a;--pill-ok: #2f9b51;--pill-warn: #c46e1a;--pill-err: #c93131}*{box-sizing:border-box}html,body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--fg)}header{display:grid;grid-template-columns:1fr auto auto;gap:1rem;align-items:center;padding:.75rem 1rem;border-bottom:1px solid var(--border);background:#fff;position:sticky;top:0;z-index:10}h1{margin:0;font-size:1.1rem;letter-spacing:.02em}.pill{display:inline-block;padding:.15rem .6rem;border-radius:999px;background:var(--pill-idle);color:#fff;font-size:.85rem;font-variant-numeric:tabular-nums}.pill[data-state=connected],.pill[data-state=done]{background:var(--pill-ok)}.pill[data-state=receiving],.pill[data-state=rendering]{background:var(--pill-warn)}.pill[data-state=error]{background:var(--pill-err)}#progress{margin-left:.5rem;font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}button{font:inherit;padding:.4rem .8rem;border-radius:.4rem;border:1px solid var(--border);background:#fff;cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}main{display:grid;grid-template-columns:280px 1fr;gap:1rem;padding:1rem}.tools{display:flex;flex-direction:column;gap:.75rem}.tools fieldset{border:1px solid var(--border);border-radius:.4rem;padding:.5rem .75rem}.tools legend{padding:0 .3rem;color:var(--muted);font-size:.85rem}.tools label{display:flex;align-items:center;gap:.4rem;font-size:.9rem}#palette{display:grid;grid-template-columns:repeat(7,1fr);gap:.3rem}#palette button{padding:0;width:100%;aspect-ratio:1;border-radius:.3rem;border:2px solid var(--border)}#palette button[aria-pressed=true]{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:-4px}.canvas-wrap{display:grid;grid-template-columns:1fr 1fr;gap:1rem}canvas{width:100%;height:auto;background:#fff;border:1px solid var(--border);border-radius:.3rem;image-rendering:pixelated;touch-action:none}#canvas{cursor:crosshair}