:root{--board:#fbfaf6;--outside:#e7e5dd;--edge:#0000002e;--cell:#1f6b49;--grid:#0000000f;--ghost:#2a7a5573;--hover:#2a7a55b3}@media (prefers-color-scheme:dark){:root{--board:#0c0e0d;--outside:#060707;--edge:#ffffff1f;--cell:#6fe0a6;--grid:#ffffff0d;--ghost:#5ccb9373;--hover:#5ccb93b3}}#board,#board-gpu{width:100%;height:100%;display:block;position:absolute;inset:0}#board-gpu[hidden]{display:none}#board{cursor:crosshair;touch-action:none}.zoom{border:1px solid var(--border);background:color-mix(in srgb, var(--surface) 90%, transparent);border-radius:8px;align-items:center;gap:2px;padding:3px;display:flex;position:absolute;bottom:12px;right:12px}.zoom button{background:0 0;border-color:#0000;min-width:28px;padding:3px 8px}.zoom button:hover{border-color:var(--border);background:var(--surface-2)}.zoom output{text-align:center;min-width:6ch;font:12px var(--mono);color:var(--muted)}select,.patterns h2{margin:0 0 4px;font-size:13px;font-weight:600}.patterns h3{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:12px 0 6px;font-size:11px;font-weight:500}.pattern-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;display:grid}.pattern{text-align:left;align-items:center;gap:8px;padding:4px 8px 4px 4px;line-height:1.2;display:flex}.pattern span{-webkit-hyphens:auto;hyphens:auto;min-width:0;font-size:12px}.pattern canvas{background:var(--board);border-radius:4px;flex:none;width:36px;height:36px}.pattern[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.stage{background:var(--outside)}