@import"https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Mono:wght@400;700&display=swap";:root{--bg: #0a0a0a;--surface: #111111;--surface2: #171717;--surface3: #1e1e1e;--border: #242424;--border-light: #2e2e2e;--text: #f0f0f0;--muted: #525252;--faint: #2a2a2a;--red: #ff2d55;--cyan: #00e5ff;--lime: #aaff00;--amber: #ffb800;--white: #f0f0f0;--focus: #ff2d55;--font-display: "Bebas Neue", sans-serif;--font-mono: "Space Mono", monospace;--sidebar-w: 260px;--header-h: 52px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{font-family:var(--font-mono);background:var(--bg);color:var(--text);display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}.header{height:var(--header-h);min-height:var(--header-h);background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 20px;z-index:10;flex-shrink:0}.logo{font-family:var(--font-display);font-size:26px;letter-spacing:4px;color:var(--text);line-height:1;-webkit-user-select:none;user-select:none;text-decoration:none}.tool-badge{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--red);border:1px solid var(--red);padding:2px 6px;margin-left:10px;line-height:1.4;opacity:.8}.tool-badge--fvg{color:var(--amber);border-color:var(--amber)}.header-brand{display:flex;align-items:center;gap:0}.header-actions{display:flex;gap:8px;align-items:center;border-left:1px solid var(--border);padding-left:16px;margin-left:8px}.app{flex:1;display:flex;min-height:0;overflow:hidden}.sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);background:var(--surface);border-right:1px solid var(--border);overflow-y:auto;overflow-x:hidden;flex-shrink:0}.sidebar::-webkit-scrollbar{width:4px}.sidebar::-webkit-scrollbar-track{background:transparent}.sidebar::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.panel{border-bottom:1px solid var(--border)}.panel[data-group=mask]{--accent: var(--amber)}.panel[data-group=base]{--accent: var(--cyan)}.panel[data-group=glitch]{--accent: var(--red)}.panel[data-group=pixel]{--accent: var(--lime)}.panel[data-group=noise]{--accent: var(--white)}.panel[data-group=warp]{--accent: var(--amber)}.panel-header{height:36px;background:var(--surface2);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 16px}.panel-label{font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#888}.panel-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0;opacity:.25;transition:opacity .2s ease,box-shadow .2s ease}.panel.is-active .panel-header{box-shadow:inset 2px 0 0 var(--accent)}.panel.is-active .panel-dot{opacity:1;box-shadow:0 0 6px var(--accent)}.panel-body{padding:10px 16px;display:flex;flex-direction:column;gap:10px}.control{display:flex;flex-direction:column;gap:6px}.control-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.control-label{font-family:var(--font-mono);font-size:11px;font-weight:400;letter-spacing:.5px;color:var(--text);cursor:pointer;white-space:nowrap}.control-value{font-family:var(--font-mono);font-size:10px;font-weight:700;color:var(--accent);min-width:32px;text-align:right;flex-shrink:0}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:2px;background:linear-gradient(to right,var(--accent) 0%,var(--accent) var(--fill, 0%),var(--border-light) var(--fill, 0%),var(--border-light) 100%);outline:none;cursor:pointer;display:block;border-radius:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:8px solid var(--accent);cursor:ew-resize;transition:transform .1s ease;margin-top:-3px}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.3)}input[type=range]::-moz-range-thumb{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:8px solid var(--accent);background:transparent;border-radius:0;border-top:none;cursor:ew-resize}input[type=range]::-moz-range-track{background:transparent;height:2px}input[type=range]:focus-visible{outline:none}input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--focus);outline-offset:3px}.btn{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:8px 16px;border:1px solid var(--border-light);background:transparent;color:var(--muted);cursor:pointer;transition:border-color .1s ease,color .1s ease,background .1s ease;white-space:nowrap;line-height:1}.btn:hover{border-color:var(--text);color:var(--text)}.btn-primary{background:var(--red);border-color:var(--red);color:#000}.btn-primary:hover{background:#fff;border-color:#fff;color:#000}.btn-ghost{border-color:var(--cyan);color:var(--cyan)}.btn-ghost:hover{background:var(--cyan);color:#000}.btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.btn-accent{border-color:var(--red);color:var(--red)}.btn-accent:hover{background:var(--red);border-color:var(--red);color:#000}.control.is-disabled{opacity:.25;pointer-events:none;-webkit-user-select:none;user-select:none}.btn.is-active{border-color:var(--text);color:var(--text)}.canvas-area{flex:1;background:var(--bg);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;cursor:pointer;min-width:0}.canvas-area.has-image{cursor:default}.canvas-area.drag-over{outline:1px solid var(--red);outline-offset:-1px}.canvas-area.drag-over .corner{border-color:var(--red)}.canvas-area.drag-over .empty-text{color:var(--border-light)}.corners{position:absolute;top:32px;right:32px;bottom:32px;left:32px;pointer-events:none;z-index:1}.corner{position:absolute;width:24px;height:24px;border-color:var(--border-light);border-style:solid;border-width:0;transition:border-color .1s ease}.corner.tl{top:0;left:0;border-top-width:1px;border-left-width:1px}.corner.tr{top:0;right:0;border-top-width:1px;border-right-width:1px}.corner.bl{bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}.corner.br{bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;pointer-events:none;-webkit-user-select:none;user-select:none;text-align:center}.empty-text{font-family:var(--font-display);font-size:clamp(48px,8vw,96px);letter-spacing:8px;color:#3a3a3a;transition:color .1s ease;line-height:1}.empty-sub{font-family:var(--font-mono);font-size:10px;color:#555;letter-spacing:1px}#display-canvas{max-width:calc(100% - 64px);max-height:calc(100% - 64px);display:none}.animate-panel{position:fixed;top:var(--header-h);right:0;width:320px;background:var(--surface);border-left:1px solid var(--border);border-bottom:1px solid var(--border);display:flex;flex-direction:column;z-index:50;overflow:hidden}.animate-panel[hidden]{display:none}.preview-container{position:relative;width:100%;background:var(--bg);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:center;min-height:120px;max-height:220px;overflow:hidden}#preview-canvas{display:block;max-width:100%;max-height:220px}.preview-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:9px;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;pointer-events:none}.preview-placeholder.is-hidden{display:none}.animate-controls{padding:14px 16px;display:flex;flex-direction:column;gap:12px;border-bottom:1px solid var(--border)}.animate-footer{display:flex;align-items:center;justify-content:space-between;padding:12px 16px}.animate-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.animate-label{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);white-space:nowrap;min-width:56px}.animate-options{display:flex;gap:4px}.opt-btn{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.5px;padding:5px 10px;border:1px solid var(--border-light);background:transparent;color:var(--muted);cursor:pointer;transition:border-color .1s,color .1s,background .1s;white-space:nowrap}.opt-btn.is-active{background:var(--red);border-color:var(--red);color:#000}.opt-btn:hover:not(.is-active){border-color:var(--text);color:var(--text)}.gif-frame-hint{font-family:var(--font-mono);font-size:9px;color:var(--muted);letter-spacing:.5px}.gif-progress-wrap{display:flex;flex-direction:column;gap:6px;padding:0 16px 12px}.gif-progress-wrap[hidden]{display:none}.gif-progress-track{height:2px;background:var(--border-light);overflow:hidden}.gif-progress-bar{height:100%;width:0%;background:var(--red);transition:width .15s ease}.gif-progress-label{font-family:var(--font-mono);font-size:9px;color:var(--muted);letter-spacing:1px;text-align:right}.panel-body--mask{gap:8px}.svg-load-btn{width:100%;text-align:center}.svg-hint{font-family:var(--font-mono);font-size:9px;color:var(--muted);letter-spacing:.5px;margin-top:6px}.svg-loaded{display:flex;align-items:center;gap:8px}.svg-thumb{width:32px;height:32px;flex-shrink:0;border:1px solid var(--border-light);background:var(--surface3)}.svg-name{font-family:var(--font-mono);font-size:9px;color:var(--muted);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.svg-remove{font-family:var(--font-mono);font-size:10px;background:transparent;border:none;color:var(--muted);cursor:pointer;padding:2px 4px;line-height:1;flex-shrink:0;transition:color .1s ease}.svg-remove:hover{color:var(--red)}.svg-mode{display:flex;gap:4px}.footer{position:fixed;bottom:16px;right:20px;font-family:var(--font-mono);font-size:10px;color:var(--muted);letter-spacing:1px;pointer-events:none;z-index:100}@media (max-width: 1279px){:root{--sidebar-w: 220px}}@media (max-width: 1023px){.sidebar{width:48px;min-width:48px}.panel-body,.panel-label,.control-row,.control-value{display:none}.panel-header{padding:0 12px;justify-content:center}}@media (max-width: 767px){.app{flex-direction:column-reverse}.sidebar{width:100%;min-width:100%;max-height:200px;border-right:none;border-top:1px solid var(--border);display:flex;flex-direction:row;overflow-x:auto;overflow-y:hidden}.panel{border-bottom:none;border-right:1px solid var(--border);min-width:180px}.panel-body{padding:10px 12px;gap:10px}}.splash-body{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;overflow:auto;background:var(--bg)}.splash{display:flex;flex-direction:column;align-items:center;gap:12px;padding:40px 20px}.splash-logo{font-family:var(--font-display);font-size:clamp(64px,12vw,120px);letter-spacing:12px;color:var(--text);line-height:1}.splash-sub{font-family:var(--font-mono);font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);margin-bottom:24px}.splash-tools{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}.splash-card{display:flex;flex-direction:column;gap:10px;width:260px;padding:28px 24px;border:1px solid var(--border-light);background:var(--surface);text-decoration:none;color:var(--text);transition:border-color .15s ease,background .15s ease;cursor:pointer}.splash-card:hover{border-color:var(--red);background:var(--surface2)}.splash-card:nth-child(2):hover{border-color:var(--amber)}.splash-card-tag{font-family:var(--font-mono);font-size:9px;color:var(--muted);letter-spacing:2px}.splash-card-name{font-family:var(--font-display);font-size:42px;letter-spacing:6px;line-height:1;color:var(--text)}.splash-card:nth-child(1) .splash-card-name{color:var(--red)}.splash-card:nth-child(2) .splash-card-name{color:var(--amber)}.splash-card-desc{font-family:var(--font-mono);font-size:10px;color:var(--muted);line-height:1.6;letter-spacing:.3px}.splash-card-cta{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:1px;color:var(--muted);margin-top:auto;transition:color .1s ease}.splash-card:hover .splash-card-cta{color:var(--text)}.splash-footer{position:fixed;bottom:16px;font-family:var(--font-mono);font-size:10px;color:var(--muted);letter-spacing:1px;pointer-events:none}.select-field{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;background:var(--surface3);border:1px solid var(--border-light);color:var(--text);font-family:var(--font-mono);font-size:10px;letter-spacing:.5px;padding:6px 10px;cursor:pointer;outline:none}.select-field:focus{border-color:var(--accent, var(--cyan))}.color-input{-webkit-appearance:none;width:28px;height:18px;border:1px solid var(--border-light);background:transparent;cursor:pointer;padding:0;flex-shrink:0}.color-input::-webkit-color-swatch-wrapper{padding:0}.color-input::-webkit-color-swatch{border:none}#fvg-canvas{max-width:calc(100% - 64px);max-height:calc(100% - 64px);display:block}.fvg-canvas-area{cursor:default}.fvg-canvas-area:not(.has-svg){cursor:pointer}.slider-reset{background:transparent;border:none;color:var(--muted);font-family:var(--font-mono);font-size:9px;cursor:pointer;padding:0 2px;line-height:1;flex-shrink:0;transition:color .1s ease;opacity:.5}.slider-reset:hover{color:var(--accent, var(--red));opacity:1}.tool-switcher{display:flex;align-items:center;gap:4px;margin-left:14px;padding-left:14px;border-left:1px solid var(--border)}.tool-switch{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;text-decoration:none;padding:5px 10px;border:1px solid transparent;color:var(--muted);transition:border-color .1s ease,color .1s ease,background .1s ease;line-height:1.4}.tool-switch:hover{color:var(--text);border-color:var(--border-light)}.tool-switch.is-active{color:var(--tool-color, var(--red));border-color:var(--tool-color, var(--red));background:transparent}.splash-card-preview{width:100%;height:100px;background:var(--bg);border:1px solid var(--border);margin-bottom:4px;overflow:hidden;position:relative;flex-shrink:0}.splash-card:nth-child(1) .splash-card-preview:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 7px,rgba(255,45,85,.12) 8px),repeating-linear-gradient(90deg,transparent,transparent 7px,rgba(255,45,85,.06) 8px)}.splash-card:nth-child(1) .splash-card-preview:after{content:"FIMAGE";position:absolute;bottom:8px;left:10px;font-family:var(--font-display);font-size:28px;letter-spacing:4px;color:var(--red);opacity:.25}.splash-card:nth-child(2) .splash-card-preview:before{content:"A#0B!XZ@K%&W2*F$\aQ3G!8M>PL?5N\a!X7R%&W2*\a#0B!XZ@K%&W2*F$";position:absolute;top:0;right:0;bottom:0;left:0;padding:6px 8px;font-family:var(--font-mono);font-size:9px;font-weight:700;color:var(--amber);opacity:.3;line-height:1.4;letter-spacing:2px;word-break:break-all;overflow:hidden}.splash-card:nth-child(2) .splash-card-preview:after{content:"FVG";position:absolute;bottom:8px;left:10px;font-family:var(--font-display);font-size:28px;letter-spacing:4px;color:var(--amber);opacity:.25}.splash-card:nth-child(3) .splash-card-preview:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 60% 40% at 30% 50%,rgba(255,45,85,.35) 0%,transparent 70%),radial-gradient(ellipse 60% 40% at 70% 50%,rgba(0,229,255,.35) 0%,transparent 70%)}.splash-card:nth-child(3) .splash-card-preview:after{content:"FURN";position:absolute;bottom:8px;left:10px;font-family:var(--font-display);font-size:28px;letter-spacing:4px;color:var(--cyan);opacity:.25}.splash-card:nth-child(3) .splash-card-name{color:var(--cyan)}.splash-card:nth-child(3):hover{border-color:var(--cyan)}.splash-card--soon{border-style:dashed;opacity:.5;pointer-events:none;cursor:default}.splash-card--soon:hover{border-color:var(--border-light);background:var(--surface)}.splash-card--soon .splash-card-name{color:var(--muted)!important}.splash-card-coming{font-family:var(--font-mono);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);border:1px solid var(--border);display:inline-block;padding:2px 6px;margin-bottom:4px}#furn-canvas{max-width:calc(100% - 64px);max-height:calc(100% - 64px);display:none}.furn-canvas-area{cursor:pointer;position:relative}.furn-canvas-area.has-image{cursor:default}.furn-canvas-area.has-image #furn-canvas{cursor:none}.furn-cursor{position:absolute;width:60px;height:60px;border:1px solid var(--cyan);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);opacity:0;transition:opacity .15s ease;z-index:10}.furn-hint{font-family:var(--font-mono);font-size:9px;color:var(--muted);letter-spacing:.5px;line-height:1.6}