*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;background:#1a1a1a}#app{width:100%;height:100%;position:relative;overflow:hidden;cursor:crosshair}#canvas{position:absolute;top:0;left:0;image-rendering:pixelated;image-rendering:crisp-edges}#hud{position:fixed;bottom:20px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:12px;background:#121212eb;border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:10px 14px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);-webkit-user-select:none;user-select:none;box-shadow:0 4px 24px #00000080}#divider{width:1px;height:28px;background:#ffffff1f;flex-shrink:0}#selected-swatch{width:26px;height:26px;border-radius:6px;outline:2px solid rgba(255,255,255,.35);outline-offset:2px;flex-shrink:0}#palette{display:grid;grid-template-columns:repeat(17,22px);gap:4px}.swatch{width:22px;height:22px;border-radius:5px;border:none;cursor:pointer;transition:transform .1s,outline-color .1s;flex-shrink:0;position:relative;outline:2px solid transparent;outline-offset:1px}.swatch:hover{transform:scale(1.18);z-index:1}.swatch.active{z-index:2;outline-color:#fff}#right-controls{display:flex;align-items:center;gap:8px;flex-shrink:0}#pixel-counter{display:flex;align-items:center;gap:8px}#pixel-count-row{display:flex;align-items:baseline;gap:1px;line-height:1;flex-shrink:0}#pixel-count-row span{color:#fff;font-family:Geist Mono,system-ui,sans-serif;font-size:13px;font-weight:700;letter-spacing:.3px;white-space:nowrap}#pixel-sep{opacity:.4}#refill-bar-wrap{width:56px;height:4px;background:#ffffff1f;border-radius:3px;overflow:hidden;flex-shrink:0}#refill-bar{height:100%;width:0%;background:#4ade80;border-radius:3px;transition:width .05s linear}#refill-secs{color:#ffffff73;font-family:Geist Mono,system-ui,sans-serif;font-size:11px;font-weight:500;white-space:nowrap;flex-shrink:0;min-width:28px}#undo-btn,#grid-btn{width:32px;height:32px;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:#ffffff0f;color:#ffffffbf;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s,border-color .15s;padding:0;flex-shrink:0;line-height:0}#undo-btn:hover:not(:disabled),#grid-btn:hover{background:#ffffff24;color:#fff;border-color:#ffffff4d}#undo-btn:disabled{opacity:.3;cursor:default}#grid-btn.active{background:#ffffff2e;color:#fff;border-color:#ffffff59}#coords{position:fixed;top:12px;right:16px;color:#fff6;font-family:Geist Mono,monospace;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none}#hud.depleted #pixel-count-row span{color:#f87171}#hud.depleted .swatch{cursor:not-allowed;opacity:.45}