@import "https://unpkg.com/@sakun/system.css";
:root{--canvas-columns:320;--canvas-rows:180}*{box-sizing:border-box}html,body{width:100%;min-height:100%;margin:0;overflow:hidden}body{color:var(--text,#111);background:#fff}button,a{-webkit-tap-highlight-color:transparent}.loading-screen{place-items:center;min-height:100vh;font-family:Geneva,Chicago,sans-serif;display:grid}.painting-stage{background-color:#fff;background-image:linear-gradient(90deg,#00000009 1px,#0000 1px),linear-gradient(#00000009 1px,#0000 1px);background-size:calc(100vw / var(--canvas-columns)) calc(100vh / var(--canvas-rows)), calc(100vw / var(--canvas-columns)) calc(100vh / var(--canvas-rows));position:fixed;inset:0;overflow:hidden}.painting-canvas{z-index:1;width:100vw;height:100vh;image-rendering:pixelated;touch-action:none;position:absolute;inset:0}.painting-canvas.painting-enabled{cursor:crosshair}.brush-preview{--brush-color:#000;--brush-size:1;z-index:5;width:max(4px, calc(var(--brush-size) * 100vw / var(--canvas-columns)));height:max(4px, calc(var(--brush-size) * 100vh / var(--canvas-rows)));pointer-events:none;background:color-mix(in srgb, var(--brush-color) 28%, transparent);border:1px solid color-mix(in srgb, var(--brush-color) 75%, #000);border-radius:50%;position:fixed;top:0;left:0;box-shadow:0 0 0 1px #ffffffbf}.brush-preview.rainbow-preview{background:conic-gradient(red,#ff8c00,#ff0,#00a36c,#00ced1,#00f,#8a2be2,#ff1493,red)}.brush-preview[hidden]{display:none}.cursor-layer{z-index:6;pointer-events:none;position:absolute;inset:0}.remote-cursor{--cursor-color:#000;filter:drop-shadow(1px 1px #fff);align-items:flex-start;transition:left 70ms linear,top 70ms linear;display:flex;position:absolute;transform:translate(-2px,-2px)}.remote-cursor svg{width:18px;height:22px;fill:var(--cursor-color);stroke:#fff;stroke-width:1.5px;flex:none}.remote-cursor span{color:#fff;text-overflow:ellipsis;white-space:nowrap;background:var(--cursor-color);border:1px solid #fff;max-width:180px;margin:14px 0 0 -2px;padding:2px 5px;font:9px/1.2 Geneva,Chicago,sans-serif;overflow:hidden;box-shadow:1px 1px #000000a6}.agent-cursor span{border-style:dashed}.window{z-index:7;-webkit-user-select:none;user-select:none;width:min(88vw,320px);max-width:320px;position:absolute;box-shadow:2px 2px #000000bf}.window .title-bar{cursor:move;touch-action:none;min-height:20px;position:relative}.window-collapse{color:#111;background:#fff;width:16px;min-width:16px;height:16px;font:700 11px/13px Geneva,Chicago,sans-serif;position:absolute;top:2px;right:3px;padding:0!important}.collapsed-window{width:min(70vw,220px)!important}.window-pane{padding:.75rem}.profile-window{width:286px;top:50%;left:50%;transform:translate(-50%,-50%)}.profile-window .window-pane{padding:.65rem .75rem .7rem}.ascii-mark{color:var(--text,#111);text-align:center;white-space:pre;margin:0 0 .55rem;font:700 .78rem/1 monospace}.info-section p{text-align:center;margin:.15rem 0;font:12px/1.25 Geneva,Chicago,sans-serif}a{color:var(--anchor-text,#00e)}nav[aria-label=Links]{justify-content:center;gap:.35rem;margin-top:.6rem;display:flex}.icon-button{place-items:center;min-width:31px;min-height:23px;display:inline-grid;padding:2px 6px!important}.icon-button img{width:auto;height:13px;image-rendering:pixelated}.palette-window{z-index:10;width:262px;top:2.5%;left:2%}.palette-window .window-pane{padding:.4rem}.presence-row{align-items:center;gap:.35rem;margin-bottom:.25rem;font:10px/1.1 Geneva,Chicago,sans-serif;display:flex}.presence-dot{background:#00a36c;border:1px solid #006341;border-radius:50%;width:7px;height:7px;box-shadow:0 0 0 1px #fff}.sync-status{color:#666;margin-left:auto}.canvas-stats{color:#666;justify-content:space-between;margin-bottom:.35rem;font:9px/1.1 Geneva,Chicago,sans-serif;display:flex}.tool-row{grid-template-columns:34px 1fr;align-items:center;gap:.25rem;margin-bottom:.35rem;display:grid}.tool-label{color:#555;letter-spacing:.04em;text-transform:uppercase;margin:0 0 .18rem;font:700 9px/1 Geneva,Chicago,sans-serif;display:block}.tool-row .tool-label{margin:0}.brush-options{grid-template-columns:repeat(5,1fr);gap:.2rem;display:grid}.brush-options button{min-width:0;height:25px;padding:1px;font:15px/1 serif}.selected-tool{box-shadow:inset 0 0 0 1px #fff;color:#fff!important;background:#111!important}.color-swatches{grid-template-columns:repeat(8,1fr);justify-content:center;gap:.2rem;display:grid}.color-swatch{cursor:pointer;border:1px solid #00000059;width:100%;min-width:0;height:20px;padding:0;box-shadow:inset 0 0 2px #0000001f}.color-swatch.selected-swatch{outline-offset:0;outline:2px solid #000;transform:scale(.82)}.eraser-swatch{color:#111;background:linear-gradient(45deg,#ddd 25%,#0000 25%) 0 0/10px 10px,linear-gradient(45deg,#0000 75%,#ddd 75%) 0 0/10px 10px,linear-gradient(45deg,#0000 75%,#ddd 75%) 5px -5px/10px 10px,linear-gradient(45deg,#ddd 25%,#fff 25%) 5px -5px/10px 10px;font:700 15px/1 monospace}.fun-options{grid-template-columns:repeat(3,1fr);gap:.2rem;margin-top:.35rem;display:grid}.fun-options button{text-overflow:ellipsis;white-space:nowrap;min-width:0;padding:2px 1px;font-size:9px;overflow:hidden}.rainbow-tool:not(.selected-tool){background:linear-gradient(90deg,#ffb3b3,#ffe0a3,#ffffad,#b7f5ce,#b9efff,#d9c2ff,#ffc2e3)}.palette-actions{grid-template-columns:repeat(3,1fr);gap:.3rem;margin-top:.35rem;display:grid}.palette-actions button{min-width:0;padding:3px 2px;font-size:11px}.palette-actions button:disabled{cursor:not-allowed;opacity:.45}.agent-link,.setup-notice{margin:.35rem 0 0;font:9px/1.2 Geneva,Chicago,sans-serif}.setup-notice{color:#5c4100;background:#fff4bf;border:1px solid #bc9200;padding:.35rem}@media (max-width:700px){.profile-window{width:min(76vw,270px);top:29%}.profile-window .window-pane{padding:.55rem}.palette-window{width:min(96vw,374px);top:auto;bottom:.7rem;left:50%;transform:translate(-50%)}.palette-window .window-pane{padding:.5rem}.color-swatches{grid-template-columns:repeat(12,1fr);gap:.18rem}.color-swatch{width:100%;min-width:0;height:21px}.agent-link,.setup-notice{display:none}.remote-cursor span{max-width:130px}}@media (prefers-reduced-motion:reduce){.remote-cursor{transition:none}}