:root{--sf-bg:#1a1a2e;--sf-text:#e2e8f0;--sf-text-muted:#94a3b8;--sf-primary:#f59e0b;--sf-primary-rgb:245, 158, 11;--sf-ctrl-bg:#0000008c;--sf-ctrl-hover:#ffffff1a;--sf-ctrl-active:#f59e0b33;--sf-border:#ffffff1a}._sf-container{background:var(--sf-bg);cursor:crosshair;width:100%;min-height:100vh;position:relative;overflow:hidden}._sf-canvas{width:100%;height:100vh;image-rendering:pixelated;display:block}._sf-counter{bottom:var(--main-space-4);left:var(--main-space-4);color:var(--sf-text-muted);font-size:var(--main-text-xs);font-family:var(--main-font-mono);opacity:.5;pointer-events:none;z-index:5;position:absolute}._sf-gravity-indicator{bottom:var(--main-space-4);right:var(--main-space-4);color:var(--sf-text-muted);opacity:.4;pointer-events:none;z-index:5;position:absolute}@media (max-width:768px){._sf-container{min-height:80vh}._sf-canvas{height:80vh}._sf-counter{bottom:var(--main-space-2);left:var(--main-space-2)}._sf-gravity-indicator{bottom:var(--main-space-2);right:var(--main-space-2)}}._sf-controls{top:var(--main-space-4);align-items:center;gap:var(--main-space-4);padding:var(--main-space-2) var(--main-space-4);background:var(--sf-ctrl-bg);-webkit-backdrop-filter:blur(8px);border-radius:var(--main-radius-full);border-style:solid;border-width:1px;border-color:var(--sf-border);z-index:10;opacity:0;transition:opacity .4s;display:flex;position:absolute;left:50%;translate:-50%}._sf-container:hover ._sf-controls,._sf-controls:hover{opacity:1}._sf-controls-left,._sf-controls-center,._sf-controls-right{align-items:center;gap:var(--main-space-3);display:flex}._sf-tool-group,._sf-color-group{align-items:center;gap:var(--main-space-1);display:flex}._sf-color-group{transition:opacity var(--main-transition)}._sf-ctrl-btn{border-radius:var(--main-radius);width:32px;height:32px;color:var(--sf-text-muted);cursor:pointer;transition:color var(--main-transition), background var(--main-transition);background:0 0;border:none;justify-content:center;align-items:center;display:flex}._sf-ctrl-btn:hover{color:var(--sf-text);background:var(--sf-ctrl-hover)}._sf-ctrl-btn._sf-ctrl-active{background:var(--sf-ctrl-active);color:var(--sf-primary)}._sf-color-btn{cursor:pointer;width:26px;height:26px;transition:border-color var(--main-transition);background:0 0;border:2px solid #0000;border-radius:50%;justify-content:center;align-items:center;padding:0;display:flex}._sf-color-btn:hover{border-color:#ffffff4d}._sf-color-btn._sf-color-active{border-color:var(--sf-primary)}._sf-color-swatch{border-radius:50%;width:16px;height:16px;display:block}._sf-color-rainbow{background:conic-gradient(#ef4444,#f59e0b,#22c55e,#3b82f6,#a855f7,#ef4444)}._sf-color-neon{background:conic-gradient(#0f8,#0cf,#f0f,#f60,#0f8)}._sf-brush-group,._sf-gravity-group{align-items:center;gap:var(--main-space-2);display:flex}._sf-ctrl-label{color:var(--sf-text-muted);align-items:center;display:flex}._sf-brush-slider,._sf-gravity-slider{-webkit-appearance:none;appearance:none;cursor:pointer;background:#ffffff26;border-radius:2px;outline:none;width:60px;height:4px}._sf-brush-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--sf-primary);cursor:pointer;border-radius:50%;width:14px;height:14px}._sf-gravity-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--sf-primary);cursor:pointer;border-radius:50%;width:14px;height:14px}._sf-brush-slider::-moz-range-thumb{background:var(--sf-primary);cursor:pointer;border:none;border-radius:50%;width:14px;height:14px}._sf-gravity-slider::-moz-range-thumb{background:var(--sf-primary);cursor:pointer;border:none;border-radius:50%;width:14px;height:14px}._sf-controls-left:after,._sf-controls-center:after{content:"";background:var(--sf-border);width:1px;height:20px;margin-left:var(--main-space-1)}._sf-presets{bottom:var(--main-space-4);align-items:center;gap:var(--main-space-2);padding:var(--main-space-2) var(--main-space-3);background:var(--sf-ctrl-bg);-webkit-backdrop-filter:blur(8px);border-radius:var(--main-radius-full);border-style:solid;border-width:1px;border-color:var(--sf-border);z-index:10;opacity:0;transition:opacity .4s;display:flex;position:absolute;left:50%;translate:-50%}._sf-container:hover ._sf-presets,._sf-presets:hover{opacity:1}._sf-preset-btn{align-items:center;gap:var(--main-space-1);padding:var(--main-space-1) var(--main-space-3);border-style:solid;border-width:1px;border-color:var(--sf-border);border-radius:var(--main-radius-full);color:var(--sf-text-muted);cursor:pointer;transition:color var(--main-transition), background var(--main-transition);white-space:nowrap;background:0 0;font-size:12px;display:flex}._sf-preset-btn:hover{color:var(--sf-text);background:var(--sf-ctrl-hover)}._sf-preset-btn svg{flex-shrink:0}@media (max-width:768px){._sf-controls{top:var(--main-space-2);gap:var(--main-space-2);padding:var(--main-space-2) var(--main-space-3);opacity:1}._sf-presets{bottom:var(--main-space-2);opacity:1}._sf-controls-center{gap:var(--main-space-2)}._sf-controls-center:after{display:none}._sf-controls-left:after{height:16px}._sf-brush-slider,._sf-gravity-slider{width:40px}._sf-ctrl-btn{width:28px;height:28px}._sf-color-btn{width:22px;height:22px}._sf-color-swatch{width:14px;height:14px}#_sf-save-image,#_sf-sound-toggle{display:none}}@media (max-width:480px){._sf-controls{border-radius:var(--main-radius-lg);max-width:calc(100% - var(--main-space-4));flex-wrap:wrap;justify-content:center}._sf-color-group,._sf-controls-center,._sf-controls-left:after{display:none}._sf-preset-btn{padding:var(--main-space-1) var(--main-space-2);font-size:11px}}