:root{--bg:#e6e4df;--ink:#3b3a37;--quiet:#8d8a83;--paper:#f7f5f0;color:var(--ink);background:var(--bg);font-family:Comic Sans MS,Comic Sans,Comic Neue,Chalkboard SE,cursive}*{box-sizing:border-box}html,body{overscroll-behavior:none;height:100%;margin:0}main{min-height:100dvh;padding:max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));flex-direction:column;justify-content:center;align-items:center;gap:.4rem;display:flex}.frame{--size:min(82vw, calc((100dvh - 5rem) / 1.094), 820px);--pad:calc(var(--size) * 12 / 256);width:var(--size);aspect-ratio:1;margin:var(--pad);background:var(--paper);transition:opacity .2s,filter .2s;position:relative}.frame canvas{width:100%;height:100%;image-rendering:pixelated;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;position:absolute;inset:0}.frame #border{inset:auto;left:calc(-1 * var(--pad));top:calc(-1 * var(--pad));width:calc(100% + 2 * var(--pad));height:calc(100% + 2 * var(--pad));pointer-events:none}.frame[data-state=ready] canvas{cursor:crosshair}.frame:not([data-state=ready]){opacity:.6;filter:grayscale(.35)}.frame:not([data-state=ready]) canvas{cursor:not-allowed}footer{font-variant-numeric:tabular-nums;align-items:center;gap:.55rem;min-height:1.5rem;font-size:1.05rem;display:flex}.swatch{background:0 0;border-radius:50%;width:1rem;height:1rem;box-shadow:inset 0 0 0 1px #00000026}.quiet{color:var(--quiet);font-size:.85rem}.quiet:empty{display:none}