:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#1f2533;background:#eef1f7;font-synthesis:none}*{box-sizing:border-box}html,body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}input{-webkit-user-select:text;user-select:text}img,canvas{-webkit-user-drag:none;-webkit-touch-callout:none}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;background:#eef1f7}#board{display:block;width:100%;height:100%;cursor:pointer;touch-action:none}.offline{position:fixed;top:6px;left:50%;transform:translate(-50%);padding:5px 12px;border-radius:999px;background:#1f2533;color:#fff;font-size:12px;white-space:nowrap;pointer-events:none;z-index:5}.offline[hidden]{display:none}.round-btn{position:fixed;right:16px;bottom:16px;width:56px;height:56px;border:0;border-radius:16px;background:#fff;box-shadow:0 4px 16px #1e284626;cursor:pointer;transition:transform .15s}.round-btn:hover{transform:scale(1.06)}.round-btn img{width:32px;height:32px;image-rendering:pixelated;display:block;margin:auto}button:focus-visible{outline:2px solid #2f6fdf;outline-offset:2px}#editor{border:0;border-radius:18px;background:#fff;color:inherit;padding:16px;box-shadow:0 12px 40px #1e284633;max-height:calc(100dvh - 24px);overflow-y:auto}#editor::backdrop{background:#1e284640}#editor{width:min(360px,calc(100vw - 24px))}#editor form{display:grid;gap:12px}#editor .controls{display:flex;flex-direction:column;gap:12px;min-width:0}#editor .actions{position:sticky;bottom:-16px;margin:0 -16px -16px;padding:12px 16px 16px;background:#fff;border-radius:0 0 18px 18px}@media(min-width:760px){#editor{width:700px}#editor form{grid-template-columns:320px 1fr;grid-template-areas:"name name" "canvas controls" "actions actions";gap:16px}#name{grid-area:name}#pixels{grid-area:canvas}#editor .controls{grid-area:controls}#editor .actions{grid-area:actions}}#pixels{width:100%;max-width:320px;justify-self:center;aspect-ratio:1;image-rendering:pixelated;touch-action:none;cursor:crosshair;border-radius:8px;background-color:#f6f8fc;background-image:linear-gradient(rgba(30,40,70,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(30,40,70,.08) 1px,transparent 1px);background-size:6.25% 6.25%}.tools{display:flex;gap:8px;align-items:center}.spacer{flex:1}.tools button{font:inherit;font-size:14px;color:inherit;background:#eef1f7;border:0;border-radius:10px;padding:8px 14px;cursor:pointer}.tools button[aria-pressed=true]{background:#d6e3fb}.tools .primary{background:#2f6fdf;color:#fff}.seg{display:flex;gap:4px;padding:4px;background:#eef1f7;border-radius:12px}.seg button{flex:1;font:inherit;font-size:13px;color:#5a6070;background:transparent;border:0;border-radius:9px;padding:8px 0;cursor:pointer}.seg button[aria-pressed=true]{background:#fff;color:#1f2533;font-weight:600;box-shadow:0 1px 3px #1e28462e}.seg-label{align-self:center;padding:0 8px 0 6px;font-size:12px;color:#8a90a0}.mixer{display:flex;gap:14px;align-items:center}.current{display:flex;flex-direction:column;align-items:center;gap:6px}.chip{width:56px;height:56px;border-radius:14px;box-shadow:inset 0 0 0 1px #1e284626}.current code{font-size:12px;color:#5a6070}.channels{flex:1;display:flex;flex-direction:column;gap:10px}.ch{display:grid;grid-template-columns:12px 1fr 20px;gap:10px;align-items:center;font-size:12px;color:#5a6070}.ch output{text-align:right;font-variant-numeric:tabular-nums}.ch input[type=range]{-webkit-appearance:none;appearance:none;height:14px;margin:0;border-radius:7px;outline:none;cursor:pointer;background:linear-gradient(90deg,var(--from, #000),var(--to, #fff));box-shadow:inset 0 0 0 1px #1e284626}.ch input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid #1f2533;box-shadow:0 1px 4px #0000004d}.ch input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid #1f2533;box-shadow:0 1px 4px #0000004d}.ch input[type=range]:focus-visible{outline:2px solid #2f6fdf;outline-offset:3px}.group-label{font-size:11px;color:#8a90a0;margin-bottom:6px}.swatches{display:flex;flex-wrap:wrap;gap:6px}.swatches button{width:28px;height:28px;padding:0;border:0;border-radius:8px;cursor:pointer;box-shadow:inset 0 0 0 1px #1e284626}.swatches button[aria-pressed=true]{outline:2px solid #2f6fdf;outline-offset:2px}.round-btn img:not([src]){visibility:hidden}.tip{position:fixed;left:0;top:0;display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;background:#fff;box-shadow:0 4px 14px #1e28462e;font-size:13px;white-space:nowrap;pointer-events:none}.tip[hidden]{display:none}.tip canvas{width:20px;height:20px;image-rendering:pixelated}.ranking{position:fixed;top:40px;right:16px;width:220px;padding:12px 14px;border-radius:16px;background:#ffffffeb;box-shadow:0 4px 16px #1e28461f;font-size:13px;pointer-events:none}@media(max-width:640px){.ranking{width:160px;padding:8px 10px;font-size:12px}.ranking ol{gap:3px}}.ranking ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}.ranking li{display:flex;align-items:center;gap:8px}.ranking li.mine{font-weight:600}.ranking .rank{width:1.5em;color:#8a90a0;text-align:right;font-variant-numeric:tabular-nums}.ranking img{width:20px;height:20px;image-rendering:pixelated}.ranking .name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ranking .score{font-variant-numeric:tabular-nums}.ranking .empty{color:#8a90a0}.rank-me{margin-top:10px;padding-top:8px;border-top:1px solid #eef1f7;display:flex;justify-content:space-between;color:#5a6070}#name{font:inherit;font-size:15px;padding:8px 12px;border:1px solid #d9e0ec;border-radius:10px;outline:none}#name:focus{border-color:#2f6fdf}