*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#f0f0f0;--bg-white:#fff;--bg-black:#000;--text:#000;--text-inv:#f0f0f0;--text-muted:#888;--text-faint:#ccc;--border:3px solid #000;--border-light:1px solid #ccc;--font-title:"Bebas Neue", sans-serif;--font-body:"Space Mono", monospace}body{font-family:var(--font-body);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100dvh;overflow:hidden}::selection{background:var(--bg-black);color:var(--text-inv)}.hero-right ::selection{background:var(--text-inv);color:var(--bg-black)}.palette-panel ::selection{background:var(--text-inv);color:var(--bg-black)}.loader-status ::selection{background:var(--text-inv);color:var(--bg-black)}#app{min-height:100dvh}.hero{flex-direction:column;height:100vh;display:flex}.hero-bar{border-bottom:var(--border);text-transform:uppercase;letter-spacing:2px;justify-content:space-between;align-items:center;height:48px;padding:0 20px;font-size:13px;display:flex}.hero-bar span svg,.editor-logo svg{vertical-align:middle;margin-right:6px}.hero-split{flex:1;display:flex}.hero-left{flex-direction:column;flex:0 0 55%;justify-content:center;gap:32px;padding:60px 64px;display:flex}.hero-title{font-family:var(--font-title);letter-spacing:-3px;margin:0;font-size:clamp(80px,10vw,140px);line-height:.85}.hero-subtitle{color:#555;font-size:15px;line-height:1.8}.hero-right{background:var(--bg-black);border-left:var(--border);cursor:pointer;flex:1;justify-content:center;align-items:center;display:flex;position:relative}.hero-right.dragover{background:var(--bg-white)}.hero-right.dragover .drop-text{color:var(--text)}.drop-text{font-family:var(--font-title);color:var(--text-inv);letter-spacing:6px;text-align:center;font-size:clamp(48px,6vw,80px);line-height:1.05}.drop-formats{color:var(--text-muted);text-transform:uppercase;letter-spacing:3px;font-size:13px}.drop-label{text-align:center;flex-direction:column;align-items:center;gap:16px;display:flex}.btn-brutal{font-family:var(--font-body);background:var(--bg-black);color:var(--text-inv);text-transform:uppercase;letter-spacing:2px;cursor:pointer;border:none;width:fit-content;padding:12px 28px;font-size:13px}.btn-brutal:hover{opacity:.8}.btn-inverted{font-family:var(--font-body);background:var(--bg-black);color:var(--text-inv);text-transform:uppercase;letter-spacing:2px;cursor:pointer;border:none;padding:12px 24px;font-size:13px}.btn-inverted:hover{opacity:.8}.btn-square{width:36px;height:36px;font-family:var(--font-body);cursor:pointer;background:0 0;border:2px solid #000;justify-content:center;align-items:center;font-size:14px;display:flex}.btn-square:disabled{color:var(--text-faint);border-color:var(--text-faint);cursor:default}.btn-square-sm{cursor:pointer;background:0 0;border:2px solid #000;justify-content:center;align-items:center;width:28px;height:28px;font-size:12px;display:flex}.loader{background:var(--bg);flex-direction:column;height:100vh;display:flex;position:relative;overflow:hidden}.loader-bar{border-bottom:var(--border);text-transform:uppercase;letter-spacing:2px;justify-content:space-between;align-items:center;height:48px;padding:0 20px;font-size:13px;display:flex}.loader-main{flex:1;justify-content:center;align-items:center;display:flex;position:relative}.loader-pct{font-family:var(--font-title);color:var(--text);-webkit-user-select:none;user-select:none;font-size:28vw;line-height:.85;animation:.15s infinite subtle-shake;position:relative}.loader-pct:before,.loader-pct:after{content:attr(data-pct);width:100%;height:100%;font-family:var(--font-title);font-size:28vw;line-height:.85;position:absolute;top:0;left:0}.loader-pct:before{clip-path:inset(20% 0 40%);opacity:.6;animation:3s linear infinite glitch-1}.loader-pct:after{clip-path:inset(60% 0 10%);opacity:.4;animation:3s linear infinite glitch-2}.loader-scanline{pointer-events:none;background:#0000000a;height:3px;animation:4s linear infinite scan;position:absolute;top:0;left:0;right:0}.loader-progress{border-top:var(--border);background:#ddd;height:6px;position:relative}.loader-fill{background:var(--bg-black);width:0%;height:100%;transition:width .3s ease-out}.loader-status{background:var(--bg-black);color:var(--text-inv);justify-content:space-between;align-items:center;padding:16px 24px;display:flex}.status-msg{letter-spacing:1px;font-size:13px}.cursor{background:var(--text-inv);vertical-align:text-bottom;width:8px;height:14px;margin-left:4px;animation:1s step-end infinite blink;display:inline-block}.status-sub{color:var(--text-muted);text-transform:uppercase;letter-spacing:2px;font-size:12px}.editor{flex-direction:column;height:100vh;display:flex}.editor-bar{border-bottom:var(--border);background:var(--bg);align-items:center;gap:8px;height:48px;padding:0 16px;display:flex}.editor-logo{font-family:var(--font-body);text-transform:uppercase;letter-spacing:2px;font-size:13px;font-weight:700}.editor-actions-left{gap:4px;display:flex}.editor-spacer{flex:1}.editor-body{flex:1;display:flex;overflow:hidden}.editor-canvas-area{background:var(--bg-white);border-right:var(--border);flex-direction:column;flex:1;display:flex}.canvas-wrapper{flex:1;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.canvas-checkerboard{border:var(--border);background:repeating-conic-gradient(#d0d0d0 0% 25%,#f0f0f0 0% 50%) 0 0/16px 16px;max-width:90%;max-height:90%;line-height:0;transition:transform .2s ease-out;display:inline-block}#preview-canvas{width:100%;height:auto;display:block}.canvas-footer{border-top:var(--border);justify-content:space-between;align-items:center;padding:8px 16px;display:flex}.zoom-controls{align-items:center;gap:4px;display:flex}.zoom-level{text-align:center;min-width:40px;font-size:12px}.canvas-dims{color:var(--text-muted);font-size:12px}.palette-panel{background:var(--bg-black);color:var(--text-inv);flex-direction:column;flex:0 0 320px;display:flex}.palette-header{font-family:var(--font-title);letter-spacing:2px;border-bottom:3px solid #333;padding:10px 16px;font-size:18px}.palette-families{flex:1;overflow-y:auto}.family-block{border-bottom:3px solid #333}.family-header{justify-content:space-between;align-items:center;padding:8px 16px;display:flex}.family-name{font-family:var(--font-title);letter-spacing:1px;font-size:22px}.family-pct{color:var(--text-muted);margin-left:8px;font-size:12px}.family-actions{gap:8px;display:flex}.family-action{text-transform:uppercase;cursor:pointer;color:var(--text-muted);font-size:11px;font-family:var(--font-body);letter-spacing:1px;background:0 0;border:none;text-decoration:underline}.family-action:hover{color:var(--text-inv)}.cluster-bars{width:100%;height:36px;display:flex}.cluster-bar{cursor:pointer;border-right:2px solid var(--bg-black);justify-content:center;align-items:center;min-width:28px;transition:opacity .15s;display:flex;position:relative}.cluster-bar:last-child{border-right:none}.cluster-bar:hover{opacity:.85}.cluster-selected{opacity:.4;background-blend-mode:multiply;background-image:repeating-linear-gradient(-45deg,#0000,#0000 4px,#0000004d 4px 6px)!important}.family-highlighted{background:#ffffff14}.palette-tolerance{border-top:3px solid #333;margin-top:auto;padding:12px 16px}.tolerance-row{justify-content:space-between;margin-bottom:10px;display:flex}.tolerance-label{text-transform:uppercase;letter-spacing:1px;font-size:12px}.tolerance-val{font-size:12px;font-weight:700}.tolerance-track{cursor:pointer;background:#333;height:6px;position:relative}.tolerance-fill{background:var(--text-inv);pointer-events:none;height:100%;transition:width .1s}.tolerance-input{cursor:pointer;appearance:none;background:0 0;width:100%;height:20px;margin:4px 0 0}.tolerance-input::-webkit-slider-runnable-track{height:0}.tolerance-input::-webkit-slider-thumb{-webkit-appearance:none;background:var(--text-inv);border:2px solid var(--bg-black);cursor:pointer;width:14px;height:14px;margin-top:-7px}.tolerance-input::-moz-range-track{border:none;height:0}.tolerance-input::-moz-range-thumb{background:var(--text-inv);border:2px solid var(--bg-black);cursor:pointer;border-radius:0;width:14px;height:14px}.recolor-overlay{z-index:200;background:#00000080;justify-content:center;align-items:flex-start;padding-top:10vh;display:flex;position:fixed;inset:0}.recolor-modal{background:var(--bg);border:var(--border);width:420px;max-width:90vw;max-height:80vh;animation:.2s ease-out modalIn;overflow-y:auto}@keyframes modalIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.recolor-modal-header{border-bottom:var(--border);justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.recolor-modal-title{font-family:var(--font-title);letter-spacing:1px;font-size:20px}.recolor-modal-close{cursor:pointer;font-size:24px;font-family:var(--font-body);background:0 0;border:none;padding:0 4px}.recolor-modal-close:hover{opacity:.6}.recolor-section{padding:16px}.recolor-section-label{text-transform:uppercase;letter-spacing:2px;color:var(--text-muted);margin-bottom:12px;font-size:12px}.recolor-row{align-items:center;gap:12px;margin-bottom:10px;display:flex}.recolor-row:last-child{margin-bottom:0}.recolor-preview{border:var(--border);flex-shrink:0;width:36px;height:36px}.recolor-cluster-label{letter-spacing:1px;flex:1;font-size:12px}.recolor-color-input{border:var(--border);cursor:pointer;background:0 0;flex-shrink:0;width:48px;height:40px;padding:3px}.recolor-color-input::-webkit-color-swatch-wrapper{padding:0}.recolor-color-input::-webkit-color-swatch{border:none}.recolor-apply-btn{white-space:nowrap;padding:8px 16px;font-size:11px}.recolor-divider{background:var(--bg-black);height:3px}.recolor-footer{border-top:var(--border);padding:16px}.recolor-reset-btn{width:100%;color:var(--text);border:var(--border);font-family:var(--font-body);text-transform:uppercase;letter-spacing:2px;cursor:pointer;background:0 0;padding:10px;font-size:12px}.recolor-reset-btn:hover{background:var(--bg-black);color:var(--text-inv)}.export-formats{gap:0;display:flex}.export-format-btn{border:var(--border);font-family:var(--font-body);text-transform:uppercase;letter-spacing:2px;cursor:pointer;background:0 0;border-right:none;flex:1;padding:10px;font-size:13px}.export-format-btn:last-child{border-right:var(--border)}.export-format-btn.active{background:var(--bg-black);color:var(--text-inv)}.export-quality-section{max-height:80px;transition:max-height .2s ease-out,padding .2s ease-out,opacity .2s ease-out;overflow:hidden}.export-quality-section.collapsed{opacity:0;max-height:0;padding-top:0;padding-bottom:0}.export-quality-row{align-items:center;gap:12px;display:flex}.export-quality-slider{appearance:none;background:0 0;flex:1;height:20px}.export-quality-slider::-webkit-slider-runnable-track{background:#ddd;height:4px}.export-quality-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--bg-black);cursor:pointer;width:14px;height:14px;margin-top:-5px}.export-quality-val{min-width:36px;font-size:13px;font-weight:700}.export-size-row{flex-direction:column;gap:12px;display:flex}.export-size-inputs{align-items:center;gap:8px;display:flex}.export-size-field{align-items:center;gap:6px;display:flex}.export-size-field label{font-size:12px;font-weight:700}.export-size-field input{border:var(--border);width:80px;font-family:var(--font-body);text-align:center;background:0 0;padding:6px 8px;font-size:13px}.export-size-x{color:var(--text-muted);font-size:14px}.export-scale-row{gap:0;display:flex}.export-scale-btn{border:var(--border);font-family:var(--font-body);cursor:pointer;background:0 0;border-right:none;flex:1;padding:8px;font-size:12px}.export-scale-btn:last-child{border-right:var(--border)}.export-scale-btn.active{background:var(--bg-black);color:var(--text-inv)}.export-original-size{color:var(--text-muted);margin-top:8px;font-size:12px}.export-info-row{border-top:var(--border);justify-content:space-between;align-items:center;padding:12px 0;display:flex}.export-info-label{text-transform:uppercase;letter-spacing:2px;font-size:12px;font-weight:700}.export-info-dims{font-size:13px}.export-info-size{font-size:13px;font-weight:700}.export-download-btn{letter-spacing:3px;padding:14px;font-size:14px}.auto-toggle{cursor:pointer;align-items:center;gap:6px;display:flex}.auto-label{text-transform:uppercase;letter-spacing:1px;font-size:12px}.auto-toggle input{display:none}.auto-box{border:2px solid #000;justify-content:center;align-items:center;width:18px;height:18px;font-size:12px;display:inline-flex}.auto-toggle input:checked+.auto-box{background:var(--bg-black)}.auto-toggle input:checked+.auto-box:after{content:"✓";color:var(--text-inv);font-weight:700}.toast-container{z-index:100;flex-direction:column;gap:8px;display:flex;position:fixed;top:20px;left:50%;transform:translate(-50%)}.toast{background:var(--bg-black);color:var(--text-inv);font-family:var(--font-body);border:var(--border);opacity:1;padding:10px 20px;font-size:12px;transition:transform .3s,opacity .3s;transform:translateY(0)}.toast-enter,.toast-exit{opacity:0;transform:translateY(-10px)}.color-picker-input{opacity:0;pointer-events:none;width:0;height:0;position:absolute}@keyframes glitch-1{0%,92%,to{transform:translate(0)}93%{transform:translate(-8px,2px)}95%{transform:translate(6px,-1px)}97%{transform:translate(-3px,1px)}}@keyframes glitch-2{0%,88%,to{transform:translate(0)}89%{transform:translate(5px,-2px)}91%{transform:translate(-7px,1px)}93%{transform:translate(4px,2px)}}@keyframes subtle-shake{0%,to{transform:translate(0)}25%{transform:translate(.5px,-.5px)}50%{transform:translate(-.5px,.5px)}75%{transform:translate(.5px,.5px)}}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}@keyframes scan{0%{top:0}to{top:100%}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.btn-brutal:active,.btn-square:active,.btn-square-sm:active,.cluster-bar:active{transform:scale(.95)}.will-animate{opacity:0;transition:opacity .4s ease-out,transform .4s ease-out;transition-delay:var(--delay,0s);transform:translateY(10px)}.animate-in{opacity:1;transform:translateY(0)}.hero-exit .hero-bar{opacity:0;transition:opacity .2s ease-out}.hero-exit .hero-left{opacity:0;transition:opacity .3s ease-out}.hero-exit .hero-right{border-left:none;animation:.6s cubic-bezier(.7,0,.3,1) forwards blackout;position:absolute;inset:0}.hero-exit .hero-right .drop-text,.hero-exit .hero-right .drop-formats{opacity:0;transition:opacity .15s}.hero-split{position:relative}@keyframes blackout{0%{clip-path:inset(0 0 0 55%)}to{clip-path:inset(0)}}.editor-enter{animation:.4s ease-out fadeIn}.editor-exit{animation:.4s ease-out fadeOut}@media (width<=768px){.hero-split{flex-direction:column}.hero-left{flex:none;padding:24px}.hero-title{font-size:48px}.hero-right{border-left:none;border-top:var(--border);flex:none;height:160px}.editor-body{flex-direction:column}.palette-panel{border-top:var(--border);flex:none;width:100%;max-height:40vh}.editor-canvas-area{border-right:none}.zoom-controls{display:none}.loader-pct,.loader-pct:before,.loader-pct:after{font-size:20vw}}.hidden{display:none!important}