:root{--bg:#f6f6f4;--fg:#1d1d1b;--muted:#74746f;--line:#deded8;--accent:#0083c7;--error:#c23a2b;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;font-family:system-ui,sans-serif}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#161615;--fg:#ececea;--muted:#9a9a94;--line:#33332f}}*{box-sizing:border-box}body{background:var(--bg);color:var(--fg);margin:0}h1{margin:0;font-size:1.1rem}h2{text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 .5rem;font-size:.85rem}.app{grid-template-rows:auto 1fr;grid-template-columns:220px 1fr;gap:1rem;min-height:100vh;padding:1rem;display:grid}main{flex-direction:column;align-items:flex-start;gap:.75rem;display:flex}.board,.board-placeholder{aspect-ratio:1;border:1px solid var(--line);width:min(90vw,80vh,768px)}.board{image-rendering:pixelated;cursor:crosshair}.board-placeholder{background:var(--line)}.palette{flex-wrap:wrap;gap:4px;max-width:min(90vw,768px);display:flex}.swatch{border:1px solid var(--line);cursor:pointer;border-radius:4px;width:32px;height:32px;padding:0}.swatch[aria-checked=true]{outline:3px solid var(--fg);outline-offset:1px}.canvas-list ul{margin:0 0 .75rem;padding:0;list-style:none}.canvas-list li button{text-align:left;width:100%;color:inherit;cursor:pointer;font:inherit;background:0 0;border:0;border-radius:4px;padding:.35rem .5rem}.canvas-list li button[aria-current=true]{background:var(--line);font-weight:600}.canvas-list form{gap:.25rem;display:flex}.canvas-list input{min-width:0;font:inherit;flex:1;padding:.35rem}.muted{color:var(--muted);margin:0;font-size:.85rem}.error{color:var(--error);margin:0;font-size:.85rem}@media (width<=640px){.app{grid-template-columns:1fr}}.page{padding:1rem}.auth{flex-direction:column;gap:.75rem;max-width:340px;margin:10vh auto;padding:1rem;display:flex}.auth label{color:var(--muted);flex-direction:column;gap:.25rem;font-size:.85rem;display:flex}.auth input{font:inherit;color:var(--fg);padding:.5rem}.auth button[type=submit]{font:inherit;cursor:pointer;padding:.5rem}.tabs{gap:.25rem;display:flex}.tabs button{font:inherit;cursor:pointer;border:1px solid var(--line);color:inherit;background:0 0;border-radius:4px;flex:1;padding:.4rem}.tabs button[aria-selected=true]{background:var(--line);font-weight:600}.space-bar{flex-wrap:wrap;grid-column:1/-1;align-items:center;gap:.75rem;display:flex}.space-bar .spacer{flex:1}.space-bar select,.space-bar input{font:inherit;padding:.3rem}.space-name{font-weight:600}.invite code{background:var(--line);-webkit-user-select:all;user-select:all;border-radius:4px;padding:.15rem .35rem;font-size:.85rem}.join{align-items:center;gap:.25rem;display:flex}.join input{width:14ch}
