@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600&family=Space+Mono:wght@400;700&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}:root{--bg: #070714;--surface: rgba(12, 10, 30, .85);--surface-2: rgba(20, 16, 50, .9);--border: rgba(120, 80, 255, .2);--border-glow: rgba(120, 80, 255, .5);--text: #e0d8ff;--text-dim: rgba(200, 180, 255, .5);--accent: #8040ff;--accent-glow: rgba(128, 64, 255, .4);--danger: #ff4060;--active: #a060ff;--active-glow: rgba(160, 96, 255, .5);--font-ui: "Space Grotesk", sans-serif;--font-mono: "Space Mono", monospace;--radius: 12px;--radius-sm: 8px;--transition: .2s cubic-bezier(.4, 0, .2, 1)}html,body,#root{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font-ui)}.app-root{width:100%;height:100%;display:flex;flex-direction:column;position:relative;overflow:hidden}.app-header{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;background:linear-gradient(to bottom,rgba(7,7,20,.9) 60%,transparent);pointer-events:none}.app-logo{display:flex;align-items:center;gap:8px}.logo-cube{font-size:18px;filter:hue-rotate(200deg) brightness(1.5)}.logo-text{font-family:var(--font-mono);font-size:16px;font-weight:700;letter-spacing:.08em;background:linear-gradient(135deg,#a060ff,#40e0ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.app-hint{font-size:11px;color:var(--text-dim);letter-spacing:.04em;font-weight:300}.canvas-container{flex:1;width:100%;touch-action:none;cursor:crosshair}.canvas-container canvas{display:block;width:100%!important;height:100%!important;touch-action:none}.palette-ui{position:absolute;bottom:0;left:0;right:0;z-index:20;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 12px 16px;pointer-events:none;background:linear-gradient(to top,rgba(7,7,20,.95) 60%,transparent)}.palette-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:40px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 4px 24px #0006,inset 0 1px #ffffff0d;pointer-events:all;flex-wrap:wrap;justify-content:center;max-width:600px;width:100%}.palette-colors{display:flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:center}.color-swatch{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);flex-shrink:0;position:relative}.color-swatch:hover{transform:scale(1.15);box-shadow:0 0 10px currentColor}.color-swatch.selected{border-color:#fff;transform:scale(1.2);box-shadow:0 0 14px #fff9,0 0 28px #ffffff4d}.color-swatch.custom-color{background:conic-gradient(#ff0080,#ff8c00,#ffe500,#00ff41,#0ff,#0080ff,#8000ff,#ff0080);display:flex;align-items:center;justify-content:center;color:#fff}.hidden-color-picker{position:absolute;bottom:44px;left:50%;transform:translate(-50%);width:40px;height:40px;opacity:0;cursor:pointer}.palette-palette-btn,.action-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:#5032964d;color:var(--text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition);flex-shrink:0}.palette-palette-btn:hover,.action-btn:hover{background:#7850c866;color:var(--text);border-color:var(--border-glow)}.sound-btn{font-size:16px;line-height:1}.sound-off{opacity:.55;animation:soundPulse 2s ease-in-out infinite}@keyframes soundPulse{0%,to{opacity:.55}50%{opacity:.9}}.sound-on{opacity:1;background:#00c87826;border-color:#00c8784d}.action-btn.active{background:var(--active);color:#fff;border-color:transparent;box-shadow:0 0 12px var(--active-glow)}.palette-actions{display:flex;gap:5px;flex-shrink:0}.selected-color-preview{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10px;color:var(--text-dim);letter-spacing:.06em;pointer-events:none}.color-indicator{width:12px;height:12px;border-radius:50%;border:1px solid rgba(255,255,255,.3);flex-shrink:0}.mode-badge{background:var(--active);color:#fff;font-size:8px;padding:2px 5px;border-radius:4px;letter-spacing:.1em}.region-badge{background:linear-gradient(135deg,#ff40a0,#8040ff)}.color-label{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.palette-popup{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:12px;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 8px 32px #00000080;width:100%;max-width:300px;pointer-events:all;animation:slideUp .18s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.palette-popup-title{font-size:10px;letter-spacing:.12em;color:var(--text-dim);text-transform:uppercase;margin-bottom:8px;font-weight:500}.palette-option{width:100%;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-sm);border:1px solid transparent;background:transparent;color:var(--text);cursor:pointer;transition:all var(--transition);font-family:var(--font-ui);font-size:13px;font-weight:500}.palette-option:hover,.palette-option.active{background:#7850c840;border-color:var(--border)}.palette-swatches{display:flex;gap:3px}.palette-swatch-mini{width:14px;height:14px;border-radius:3px}.settings-panel{position:absolute;bottom:120px;left:50%;transform:translate(-50%);z-index:30;width:calc(100% - 24px);max-width:320px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:16px;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 8px 40px #0009;animation:slideUp .2s ease}.settings-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;font-weight:600;font-size:14px;letter-spacing:.04em}.paint-count{font-family:var(--font-mono);font-size:10px;color:var(--accent);letter-spacing:.06em}.settings-label{font-size:11px;color:var(--text-dim);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;font-weight:500}.value-label{color:var(--accent);font-family:var(--font-mono);font-size:10px}.size-options{display:flex;flex-direction:column;gap:4px}.size-btn{width:100%;padding:8px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);background:transparent;color:var(--text-dim);cursor:pointer;font-family:var(--font-ui);font-size:12px;text-align:left;transition:all var(--transition);font-weight:400}.size-btn:hover{background:#7850c833;color:var(--text)}.size-btn.active{background:#7850c84d;border-color:var(--accent);color:var(--text);font-weight:600}.glow-slider{width:100%;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:linear-gradient(to right,var(--accent) 0%,var(--accent) calc(var(--val, 60) * 1%),rgba(80,50,150,.3) calc(var(--val, 60) * 1%),rgba(80,50,150,.3) 100%);outline:none;cursor:pointer}.glow-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent-glow);cursor:pointer;transition:transform var(--transition)}.glow-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.glow-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);border:none;cursor:pointer}.toggle-row{display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:12px;color:var(--text-dim);font-weight:500}.toggle{width:38px;height:20px;border-radius:10px;background:#50329666;border:1px solid var(--border);position:relative;transition:all var(--transition);cursor:pointer;flex-shrink:0}.toggle:after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--text-dim);transition:all var(--transition)}.toggle.on{background:var(--active);border-color:var(--active);box-shadow:0 0 8px var(--active-glow)}.toggle.on:after{transform:translate(18px);background:#fff}.settings-actions{display:flex;gap:8px;margin-top:4px}.settings-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);background:transparent;color:var(--text-dim);cursor:pointer;font-family:var(--font-ui);font-size:12px;font-weight:500;transition:all var(--transition)}.settings-btn:hover{background:#7850c833;color:var(--text)}.danger-btn:hover{background:#ff406033;border-color:#ff406066;color:var(--danger)}.screenshot-btn{color:var(--text-dim)}.paint-flash{position:fixed;inset:0;pointer-events:none;z-index:20;opacity:0;background:radial-gradient(ellipse at center,transparent 58%,color-mix(in srgb,var(--pf-color, #8000ff) 42%,transparent) 100%);mix-blend-mode:screen}.app-header{display:none}.palette-popup-title,.palette-option span,.color-label,.settings-header,.settings-label,.toggle-row>span,.value-label{display:none!important}.selected-color-preview{width:auto;padding:6px;gap:0}.palette-option{justify-content:center;min-height:38px}.settings-panel{width:min(220px,calc(100vw - 24px))}.settings-section{margin-bottom:14px}.size-btn{font-size:0;min-height:32px}.size-btn:before{content:"";display:block;width:18px;height:18px;margin:0 auto;border:1px solid currentColor;background:linear-gradient(currentColor 0 0) 50% 0 / 1px 100% no-repeat,linear-gradient(currentColor 0 0) 0 50% / 100% 1px no-repeat;opacity:.8}.settings-btn{font-size:0;width:44px;flex:0 0 44px;justify-content:center}.settings-btn svg{flex:0 0 auto}.paint-flash.pf-active{animation:pfAnim .65s cubic-bezier(.22,1,.36,1) forwards}@keyframes pfAnim{0%{opacity:var(--pf-intensity, .12)}32%{opacity:calc(var(--pf-intensity, .12) * .55)}to{opacity:0}}.webgl-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--bg)}.webgl-fallback-content{text-align:center;padding:32px;max-width:340px}.webgl-icon{color:var(--accent);margin-bottom:16px;opacity:.7}.webgl-fallback-content h2{font-size:20px;font-weight:600;margin-bottom:10px;background:linear-gradient(135deg,#a060ff,#40e0ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.webgl-fallback-content p{font-size:14px;color:var(--text-dim);line-height:1.6;margin-bottom:16px}.webgl-fallback-content code{display:block;font-family:var(--font-mono);font-size:10px;color:#ff646499;word-break:break-all}@media(max-width:480px){.app-header{padding:12px 16px 8px}.app-hint{font-size:10px}.palette-bar{padding:8px 10px;gap:5px}.color-swatch{width:24px;height:24px}.palette-palette-btn,.action-btn{width:30px;height:30px}.settings-panel{bottom:110px;width:calc(100% - 16px)}}@media(min-width:768px){.color-swatch{width:32px;height:32px}}.mode-select{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;overflow:hidden;animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.mode-select-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 20% 30%,rgba(80,40,180,.25) 0%,transparent 60%),radial-gradient(ellipse 60% 50% at 80% 70%,rgba(20,100,200,.2) 0%,transparent 55%),radial-gradient(ellipse 100% 80% at 50% 50%,#050512fa,#070714);pointer-events:none}.mode-select-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding:24px 16px 32px;width:100%;max-width:680px;gap:8px}.mode-logo{display:flex;align-items:center;gap:12px;margin-bottom:4px}.mode-logo-icon{font-size:28px;filter:hue-rotate(200deg) brightness(1.5);animation:floatIcon 3s ease-in-out infinite}@keyframes floatIcon{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.mode-logo-title{font-family:var(--font-mono);font-size:28px;font-weight:700;letter-spacing:.1em;background:linear-gradient(135deg,#a060ff,#40e0ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.mode-subtitle{font-size:13px;color:var(--text-dim);letter-spacing:.12em;text-transform:uppercase;font-weight:300;margin-bottom:16px}.mode-cards{display:flex;gap:16px;width:100%;justify-content:center}.mode-card{flex:1;max-width:280px;display:flex;flex-direction:column;align-items:center;gap:0;padding:24px 20px 20px;background:#0c0a20b3;border:1px solid rgba(100,70,200,.25);border-radius:20px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);cursor:pointer;transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease,border-color .25s ease;position:relative;overflow:hidden;text-align:center;font-family:var(--font-ui);color:var(--text)}.mode-card:hover{transform:translateY(-6px) scale(1.02);border-color:#8c50ff99;box-shadow:0 20px 60px #5028b459,0 0 0 1px #8c50ff33 inset}.mode-card-glow{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s ease}.mode-card:hover .mode-card-glow{opacity:1}.mode-card-glow--draw{background:radial-gradient(ellipse at 50% 0%,rgba(80,180,255,.12) 0%,transparent 65%)}.mode-card-glow--repaint{background:radial-gradient(ellipse at 50% 0%,rgba(200,60,255,.12) 0%,transparent 65%)}.mode-card-body{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 0 16px}.mode-card-icon{font-size:24px;margin-bottom:4px}.mode-card-title{font-size:17px;font-weight:600;letter-spacing:.04em;background:linear-gradient(135deg,#e0d0ff,#a080ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.mode-card-desc{font-size:12px;color:var(--text-dim);line-height:1.55;font-weight:300;max-width:180px}.mode-card-start{display:inline-flex;align-items:center;justify-content:center;padding:9px 28px;border-radius:24px;background:linear-gradient(135deg,#783cff80,#3c78ff66);border:1px solid rgba(140,80,255,.4);font-size:13px;font-weight:600;letter-spacing:.05em;color:#d0c0ff;transition:all .2s ease;width:100%;font-family:var(--font-ui)}.mode-card:hover .mode-card-start{background:linear-gradient(135deg,#8c50ffb3,#50a0ff99);border-color:#a064ffb3;color:#fff;box-shadow:0 4px 20px #643cff66}.anim-cube-wrap{width:90px;height:90px;perspective:240px;flex-shrink:0}.anim-cube{width:60px;height:60px;position:relative;transform-style:preserve-3d;transform:rotateX(-22deg) rotateY(30deg);animation:spinCube 12s linear infinite;margin:15px auto}@keyframes spinCube{0%{transform:rotateX(-22deg) rotateY(0)}to{transform:rotateX(-22deg) rotateY(360deg)}}.anim-face{position:absolute;width:60px;height:60px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:1px;border:1px solid rgba(255,255,255,.06);backface-visibility:visible}.anim-face-front{transform:translateZ(30px)}.anim-face-right{transform:rotateY(90deg) translateZ(30px)}.anim-face-top{transform:rotateX(90deg) translateZ(30px)}.anim-cell{border-radius:1px;transition:background .3s ease}@media(max-width:520px){.mode-cards{flex-direction:column;align-items:center;gap:12px}.mode-card{max-width:100%;width:100%;padding:18px 16px 16px;flex-direction:row;text-align:left;gap:14px}.anim-cube-wrap{width:70px;height:70px;flex-shrink:0}.anim-cube{width:50px;height:50px;margin:10px auto}.anim-face{width:50px;height:50px}.anim-face-front{transform:translateZ(25px)}.anim-face-right{transform:rotateY(90deg) translateZ(25px)}.anim-face-top{transform:rotateX(90deg) translateZ(25px)}.mode-card-body{align-items:flex-start;padding:0}.mode-card-desc{max-width:none}.mode-card-start{width:auto;padding:7px 20px}.mode-logo-title{font-size:22px}.mode-subtitle{margin-bottom:10px}}