:root{--bg-app: #0c0d10;--bg-sidebar: #121418;--bg-surface-1: #16191f;--bg-surface-2: #1e222b;--bg-surface-3: #262c37;--bg-input: #111317;--bg-workspace: #0c0d10;--bg-stage: #090a0d;--stage-grid-dot: rgba(255, 255, 255, .04);--stage-grid-line: rgba(255, 255, 255, .015);--canvas-shadow: 0 20px 50px rgba(0, 0, 0, .6), 0 0 0 1px var(--border-medium);--toolbar-bg: rgba(22, 25, 31, .85);--border-subtle: rgba(255, 255, 255, .08);--border-medium: rgba(255, 255, 255, .14);--border-accent: rgba(99, 102, 241, .4);--text-primary: #f8fafc;--text-secondary: #94a3b8;--text-muted: #64748b;--accent-primary: #6366f1;--accent-primary-hover: #4f46e5;--accent-secondary: #06b6d4;--accent-subtle: rgba(99, 102, 241, .15);--accent-glow: rgba(99, 102, 241, .25);--success: #10b981;--warning: #f59e0b;--danger: #ef4444;--font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--radius-xs: 4px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-full: 9999px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 12px 28px rgba(0, 0, 0, .5);--shadow-glow: 0 0 20px var(--accent-glow);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .25s cubic-bezier(.4, 0, .2, 1)}[data-theme=light]{--bg-app: #f4f6fb;--bg-sidebar: #ffffff;--bg-surface-1: #ffffff;--bg-surface-2: #f1f3f9;--bg-surface-3: #e2e6f0;--bg-input: #ffffff;--bg-workspace: #f1f3f9;--bg-stage: #e8ebf2;--stage-grid-dot: rgba(15, 23, 42, .08);--stage-grid-line: rgba(15, 23, 42, .035);--canvas-shadow: 0 16px 40px rgba(15, 23, 42, .12), 0 0 0 1px rgba(0, 0, 0, .08);--toolbar-bg: rgba(255, 255, 255, .92);--border-subtle: rgba(0, 0, 0, .08);--border-medium: rgba(0, 0, 0, .14);--border-accent: rgba(99, 102, 241, .5);--text-primary: #0f172a;--text-secondary: #475569;--text-muted: #8b9bb4;--accent-primary: #4f46e5;--accent-primary-hover: #4338ca;--accent-subtle: rgba(79, 70, 229, .08);--accent-glow: rgba(79, 70, 229, .15);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 12px rgba(0, 0, 0, .08);--shadow-lg: 0 12px 28px rgba(0, 0, 0, .12)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;background-color:var(--bg-app);color:var(--text-primary);font-family:var(--font-sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}#app{width:100%;height:100%}button,input,select{font-family:inherit;font-size:inherit;color:inherit}.studio-layout{display:flex;width:100%;height:100vh;overflow:hidden;background-color:var(--bg-app)}.studio-sidebar{width:280px;min-width:280px;height:100%;background-color:var(--bg-sidebar);border-right:1px solid var(--border-subtle);display:flex;flex-direction:column;transition:width var(--transition-normal),min-width var(--transition-normal);z-index:100;-webkit-user-select:none;user-select:none}.studio-sidebar.collapsed{width:72px;min-width:72px;overflow-x:hidden}.studio-sidebar.collapsed .sidebar-header{padding:16px 0;justify-content:center;align-items:center}.studio-sidebar.collapsed .brand-logo,.studio-sidebar.collapsed .brand-text{display:none!important}.studio-sidebar.collapsed .sidebar-toggle-btn{width:40px;height:40px;margin:0 auto;display:flex;align-items:center;justify-content:center}.sidebar-header{padding:18px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-subtle)}.brand-logo{display:flex;align-items:center;gap:12px;overflow:hidden}.brand-symbol{font-size:22px;color:var(--accent-primary);filter:drop-shadow(0 0 8px var(--accent-glow));flex-shrink:0}.brand-text{display:flex;flex-direction:column;transition:opacity var(--transition-fast)}.studio-sidebar.collapsed .brand-text{opacity:0;pointer-events:none;width:0}.brand-name{font-weight:700;font-size:15px;letter-spacing:-.02em;white-space:nowrap}.brand-tag{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-weight:600}.sidebar-toggle-btn{background:transparent;border:none;color:var(--text-muted);cursor:pointer;padding:6px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;transition:color var(--transition-fast),background var(--transition-fast)}.sidebar-toggle-btn:hover{color:var(--text-primary);background:var(--bg-surface-2)}.studio-sidebar.collapsed .sidebar-toggle-btn svg{transform:rotate(180deg)}.sidebar-section-title{padding:16px 18px 8px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.studio-sidebar.collapsed .sidebar-section-title{display:none}.sidebar-nav{flex:1;padding:8px 10px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}.nav-module-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-md);background:transparent;border:1px solid transparent;color:var(--text-secondary);text-align:left;cursor:pointer;transition:all var(--transition-fast);width:100%}.nav-module-item:hover{background:var(--bg-surface-1);color:var(--text-primary);border-color:var(--border-subtle)}.nav-module-item.active{background:var(--accent-subtle);border-color:var(--border-accent);color:var(--text-primary)}.nav-module-icon{width:32px;height:32px;border-radius:var(--radius-sm);background:var(--bg-surface-2);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--accent-primary);border:1px solid var(--border-subtle);transition:all var(--transition-fast)}.nav-module-item.active .nav-module-icon{background:var(--accent-primary);color:#fff;border-color:var(--accent-primary);box-shadow:0 0 12px var(--accent-glow)}.nav-module-info{display:flex;flex-direction:column;overflow:hidden;transition:opacity var(--transition-fast)}.studio-sidebar.collapsed .sidebar-nav{padding:12px 0;align-items:center}.studio-sidebar.collapsed .nav-module-item{width:44px;height:44px;padding:0;margin:0 auto;justify-content:center}.studio-sidebar.collapsed .nav-module-icon{margin:0}.studio-sidebar.collapsed .nav-module-info{display:none!important}.nav-module-title{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nav-module-desc{font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-extensibility-card{margin:12px 10px;padding:12px;background:var(--bg-surface-1);border:1px dashed var(--border-medium);border-radius:var(--radius-md)}.studio-sidebar.collapsed .sidebar-extensibility-card{display:none}.ext-badge{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;color:var(--accent-secondary);margin-bottom:6px;letter-spacing:.05em}.ext-card-text{font-size:11px;color:var(--text-muted);line-height:1.4}.ext-card-text code{color:var(--accent-primary);background:var(--bg-surface-2);padding:1px 4px;border-radius:var(--radius-xs);font-family:var(--font-mono);font-size:10px}.sidebar-footer{padding:12px 14px;border-top:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between}.studio-sidebar.collapsed .sidebar-footer{padding:14px 0;justify-content:center;align-items:center}.theme-toggle-btn{background:transparent;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:6px 10px;font-size:12px;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;gap:6px;transition:all var(--transition-fast)}.theme-toggle-btn:hover{background:var(--bg-surface-2);color:var(--text-primary)}.studio-sidebar.collapsed .theme-toggle-btn{width:40px;height:40px;padding:0;margin:0 auto;justify-content:center}.studio-sidebar.collapsed .theme-toggle-btn .theme-label{display:none!important}.studio-version{font-family:var(--font-mono);font-size:11px;color:var(--text-muted)}.studio-sidebar.collapsed .studio-version{display:none!important}.studio-main{flex:1;display:flex;flex-direction:column;height:100%;overflow:hidden;position:relative}.studio-header{height:60px;min-height:60px;border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between;padding:0 24px;background-color:var(--bg-sidebar)}.header-left{display:flex;align-items:center;gap:16px}.sidebar-mobile-toggle{display:none;background:none;border:none;color:var(--text-primary);cursor:pointer}.header-titles{display:flex;flex-direction:column}.title-with-badge{display:flex;align-items:center;gap:10px}.header-title{font-size:16px;font-weight:700;letter-spacing:-.01em}.header-badge{font-size:10px;font-weight:600;text-transform:uppercase;padding:2px 8px;border-radius:var(--radius-full);background:var(--accent-subtle);color:var(--accent-primary);border:1px solid var(--border-accent)}.header-desc{font-size:12px;color:var(--text-muted)}.studio-workspace{flex:1;height:calc(100vh - 60px);overflow:hidden;position:relative}.module-error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:12px;color:var(--danger)}.mesh-generator-view{display:grid;grid-template-columns:1fr 380px;height:100%;width:100%;overflow:hidden}.mesh-viewport-container{display:flex;flex-direction:column;height:100%;background:var(--bg-workspace);position:relative;overflow:hidden}.mesh-canvas-stage{flex:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:auto;background-color:var(--bg-stage);background-image:radial-gradient(circle at 50% 50%,var(--stage-grid-dot) 1.5px,transparent 1.5px),linear-gradient(to right,var(--stage-grid-line) 1px,transparent 1px),linear-gradient(to bottom,var(--stage-grid-line) 1px,transparent 1px);background-size:24px 24px,120px 120px,120px 120px;padding:40px}.mesh-canvas-stage::-webkit-scrollbar{width:8px;height:8px}.mesh-canvas-stage::-webkit-scrollbar-track{background:transparent}.mesh-canvas-stage::-webkit-scrollbar-thumb{background:var(--border-medium);border-radius:var(--radius-full)}.mesh-canvas-stage::-webkit-scrollbar-thumb:hover{background:var(--accent-primary)}.canvas-frame-wrapper{position:relative;box-shadow:var(--canvas-shadow);border-radius:var(--radius-sm);overflow:hidden;line-height:0;flex-shrink:0;margin:auto;transition:transform .1s ease-out}.canvas-frame-wrapper canvas{display:block;width:100%;height:100%}.viewport-floating-toolbar,.floating-toolbar,.canvas-toolbar,.dither-floating-toolbar{position:absolute;bottom:20px;left:50%;transform:translate(-50%);height:44px!important;min-height:44px!important;max-height:44px!important;display:inline-flex!important;align-items:center!important;box-sizing:border-box!important;padding:0 16px!important;border-radius:9999px!important;overflow:hidden!important;background:var(--toolbar-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-medium);box-shadow:var(--shadow-lg);gap:12px;z-index:10;-webkit-user-select:none;user-select:none;max-width:calc(100% - 40px)}.viewport-info-badge,.dither-info-badge{font-family:var(--font-mono);font-size:11px;color:var(--text-secondary);display:inline-flex!important;align-items:center!important;gap:8px!important;height:100%!important;white-space:nowrap!important;flex-shrink:0!important;position:relative;padding-right:12px;border-right:none;line-height:1}.viewport-info-badge:after,.dither-info-badge:after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:18px;background:var(--border-subtle);pointer-events:none}.viewport-info-dot{width:6px;height:6px;border-radius:50%;background:var(--success);box-shadow:0 0 6px var(--success);flex-shrink:0}#viewportResolution,.viewport-resolution-text{white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-mono);font-size:11px;color:var(--text-secondary);line-height:1;display:inline-block;flex-shrink:0}.viewport-extra-slot:not(:empty){display:inline-flex!important;align-items:center!important;gap:8px!important;height:100%!important;flex-shrink:0!important;position:relative;padding-right:12px;border-right:none}.viewport-extra-slot:not(:empty):after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:18px;background:var(--border-subtle);pointer-events:none}.zoom-btn-group{display:inline-flex!important;align-items:center!important;gap:4px!important;height:28px!important;flex-shrink:0!important}.zoom-btn{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;padding:0 8px!important;height:28px!important;min-height:28px!important;max-height:28px!important;box-sizing:border-box!important;border-radius:var(--radius-xs);font-size:11px;display:inline-flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important;white-space:nowrap!important;transition:all var(--transition-fast)}.zoom-btn:hover{background:var(--bg-surface-3);color:var(--text-primary)}.zoom-value{font-family:var(--font-mono);font-size:11px;min-width:42px;height:28px!important;line-height:28px!important;text-align:center;color:var(--text-primary);flex-shrink:0!important;white-space:nowrap!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}.mesh-controls-panel{background:var(--bg-sidebar);border-left:1px solid var(--border-subtle);display:flex;flex-direction:column;height:100%;overflow-y:auto}.mesh-controls-panel::-webkit-scrollbar{width:6px}.mesh-controls-panel::-webkit-scrollbar-track{background:transparent}.mesh-controls-panel::-webkit-scrollbar-thumb{background:var(--bg-surface-3);border-radius:var(--radius-full)}.panel-header-action{padding:16px 20px;border-bottom:1px solid var(--border-subtle);display:flex;gap:10px;background:var(--bg-surface-1)}.btn-primary{flex:1;background:var(--accent-primary);color:#fff;border:none;border-radius:var(--radius-md);padding:10px 16px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px 14px var(--accent-glow);transition:all var(--transition-fast)}.btn-primary:hover{background:var(--accent-primary-hover);transform:translateY(-1px)}.btn-secondary{background:var(--bg-surface-2);color:var(--text-primary);border:1px solid var(--border-medium);border-radius:var(--radius-md);padding:10px 14px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:all var(--transition-fast)}.btn-secondary:hover{background:var(--bg-surface-3);border-color:var(--border-accent)}.control-accordion{display:flex;flex-direction:column;padding:16px 20px;gap:20px}.control-section{display:flex;flex-direction:column;gap:12px;background:var(--bg-surface-1);padding:16px;border-radius:var(--radius-lg);border:1px solid var(--border-subtle)}.section-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary);display:flex;align-items:center;justify-content:space-between}.section-title-icon{color:var(--accent-primary);margin-right:6px}.control-group{display:flex;flex-direction:column;gap:6px}.control-label-row{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--text-secondary)}.control-value-badge{font-family:var(--font-mono);font-size:11px;background:var(--bg-surface-2);padding:2px 6px;border-radius:var(--radius-xs);color:var(--text-primary);border:1px solid var(--border-subtle)}input.control-value-badge,.control-slider-input{width:64px;text-align:right;outline:none;cursor:text;box-sizing:border-box;transition:border-color var(--transition-fast),background var(--transition-fast),box-shadow var(--transition-fast)}input.control-value-badge:hover,.control-slider-input:hover{border-color:var(--border-medium);background:var(--bg-surface-3)}input.control-value-badge:focus,.control-slider-input:focus{border-color:var(--accent-primary);background:var(--bg-surface-1);box-shadow:0 0 0 1px var(--accent-subtle)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;background:var(--bg-surface-3);border-radius:var(--radius-full);outline:none;cursor:pointer;margin:6px 0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent-primary);cursor:pointer;border:2px solid #ffffff;box-shadow:0 0 6px #0006;transition:transform var(--transition-fast)}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}.select-input,.text-input{width:100%;background:var(--bg-input);border:1px solid var(--border-medium);border-radius:var(--radius-sm);padding:8px 12px;color:var(--text-primary);font-size:12px;outline:none;transition:border-color var(--transition-fast)}.select-input:focus,.text-input:focus{border-color:var(--accent-primary);box-shadow:0 0 0 1px var(--accent-primary)}.grid-2-col{display:grid;grid-template-columns:1fr 1fr;gap:8px}.segmented-control{display:grid;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));background:var(--bg-input);padding:3px;border-radius:var(--radius-sm);border:1px solid var(--border-subtle);gap:2px}.segmented-btn{background:transparent;border:none;color:var(--text-secondary);font-size:11px;font-weight:500;padding:6px 8px;border-radius:var(--radius-xs);cursor:pointer;text-align:center;transition:all var(--transition-fast)}.segmented-btn:hover{color:var(--text-primary)}.segmented-btn.active{background:var(--accent-primary);color:#fff;font-weight:600;box-shadow:var(--shadow-sm)}.palette-preset-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:4px}.palette-card{height:38px;border-radius:var(--radius-sm);border:1px solid var(--border-subtle);cursor:pointer;overflow:hidden;position:relative;display:flex;transition:transform var(--transition-fast),border-color var(--transition-fast)}.palette-card:hover{transform:translateY(-2px);border-color:var(--accent-primary)}.palette-card.active{border:2px solid var(--accent-primary);box-shadow:0 0 10px var(--accent-glow)}.palette-color-strip{flex:1;height:100%}.palette-name-tooltip{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:600;color:#fff;opacity:0;transition:opacity var(--transition-fast);text-align:center;padding:2px}.palette-card:hover .palette-name-tooltip{opacity:1}.color-control-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 0}.color-control-label{font-size:12px;color:var(--text-secondary);font-weight:500;white-space:nowrap}.color-picker-composite{display:flex;align-items:center;gap:8px;flex-shrink:0}.color-input-wrapper{position:relative;width:32px;height:32px;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border-medium);cursor:pointer;flex-shrink:0;box-shadow:var(--shadow-sm);transition:transform var(--transition-fast),border-color var(--transition-fast)}.color-input-wrapper:hover{transform:scale(1.05);border-color:var(--accent-primary)}.color-input-wrapper input[type=color]{position:absolute;top:-10px;right:-10px;bottom:-10px;left:-10px;width:52px;height:52px;border:none;cursor:pointer;background:transparent}.color-hex-input{width:80px;background:var(--bg-input);border:1px solid var(--border-medium);border-radius:var(--radius-sm);padding:6px 8px;font-family:var(--font-mono);font-size:11px;font-weight:500;color:var(--text-primary);text-transform:uppercase;outline:none;text-align:center;letter-spacing:.04em;transition:border-color var(--transition-fast),box-shadow var(--transition-fast),color var(--transition-fast)}.color-hex-input:focus{border-color:var(--accent-primary);box-shadow:0 0 0 1px var(--accent-primary)}.color-hex-input.is-invalid{border-color:var(--danger);color:var(--danger);box-shadow:0 0 0 1px var(--danger)}.preset-chips-list{display:flex;flex-wrap:wrap;gap:6px}.preset-chip{background:var(--bg-surface-2);border:1px solid var(--border-subtle);color:var(--text-secondary);border-radius:var(--radius-full);padding:4px 10px;font-size:11px;cursor:pointer;transition:all var(--transition-fast)}.preset-chip:hover{background:var(--bg-surface-3);color:var(--text-primary);border-color:var(--border-medium)}.preset-chip.active{background:var(--accent-subtle);border-color:var(--accent-primary);color:var(--accent-primary);font-weight:600}.export-actions-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.btn-export{background:var(--bg-surface-2);border:1px solid var(--border-medium);border-radius:var(--radius-md);padding:12px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;color:var(--text-primary);transition:all var(--transition-fast)}.btn-export:hover{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px var(--accent-glow)}.btn-export-icon{font-size:18px}.btn-export-title{font-weight:600;font-size:12px}.btn-export-subtitle{font-size:10px;color:var(--text-muted)}.btn-export:hover .btn-export-subtitle{color:#fffc}.studio-toast{position:fixed;bottom:24px;right:24px;background:var(--bg-surface-1);border:1px solid var(--border-medium);border-radius:var(--radius-md);padding:10px 16px;box-shadow:var(--shadow-lg);font-size:12px;color:var(--text-primary);z-index:1000;display:flex;align-items:center;gap:8px;animation:slideInUp .25s ease-out}@keyframes slideInUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@media(max-width:900px){.mesh-generator-view{grid-template-columns:1fr;grid-template-rows:55% 45%}.studio-sidebar{position:fixed;left:-280px;top:0;bottom:0;transition:left var(--transition-normal)}.studio-sidebar.mobile-open{left:0;box-shadow:0 0 40px #000000b3}.sidebar-mobile-toggle{display:block}}.dither-view{display:grid;grid-template-columns:1fr 380px;height:100%;width:100%;overflow:hidden}.dither-viewport-container{display:flex;flex-direction:column;height:100%;background:var(--bg-workspace);position:relative;overflow:hidden}.dither-canvas-stage{flex:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:auto;background-color:var(--bg-stage);background-image:radial-gradient(circle at 50% 50%,var(--stage-grid-dot) 1.5px,transparent 1.5px),linear-gradient(to right,var(--stage-grid-line) 1px,transparent 1px),linear-gradient(to bottom,var(--stage-grid-line) 1px,transparent 1px);background-size:24px 24px,120px 120px,120px 120px;padding:40px}.dither-canvas-stage::-webkit-scrollbar{width:8px;height:8px}.dither-canvas-stage::-webkit-scrollbar-track{background:transparent}.dither-canvas-stage::-webkit-scrollbar-thumb{background:var(--border-medium);border-radius:var(--radius-full)}.dither-canvas-stage::-webkit-scrollbar-thumb:hover{background:var(--accent-primary)}.dither-frame-wrapper{position:relative;box-shadow:var(--canvas-shadow);border-radius:var(--radius-sm);overflow:hidden;line-height:0;flex-shrink:0;margin:auto;transition:transform .1s ease-out;background-color:#000}.dither-frame-wrapper canvas,.dither-view .canvas-frame-wrapper canvas,#ditherCanvas{display:block;width:100%;height:100%;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;image-rendering:pixelated}.dither-drop-overlay{position:absolute;top:16px;right:16px;bottom:16px;left:16px;border:2px dashed var(--accent-primary);background:#6366f11f;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--radius-lg);display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;z-index:50;pointer-events:none;animation:fadeIn .15s ease-out}.dither-drop-overlay.active{display:flex}.dither-drop-icon{font-size:40px;color:var(--accent-primary)}.dither-drop-text{font-size:16px;font-weight:700;color:var(--text-primary)}.dither-floating-toolbar{position:absolute;bottom:20px;left:50%;transform:translate(-50%);height:44px!important;min-height:44px!important;max-height:44px!important;display:inline-flex!important;align-items:center!important;box-sizing:border-box!important;padding:0 16px!important;border-radius:9999px!important;overflow:hidden!important;background:var(--toolbar-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-medium);box-shadow:var(--shadow-lg);gap:12px;z-index:10;-webkit-user-select:none;user-select:none;max-width:calc(100% - 40px)}.dither-info-badge{font-family:var(--font-mono);font-size:11px;color:var(--text-secondary);display:inline-flex!important;align-items:center!important;gap:8px!important;height:100%!important;white-space:nowrap!important;flex-shrink:0!important;position:relative;padding-right:12px;border-right:none;line-height:1}.dither-info-badge:after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:18px;background:var(--border-subtle);pointer-events:none}.dither-compare-btn,.dither-toolbar-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;white-space:nowrap!important;height:28px!important;min-height:28px!important;max-height:28px!important;line-height:26px!important;padding:0 10px!important;font-size:11px;font-weight:500;background:var(--bg-surface-2);border:1px solid var(--border-medium);color:var(--text-secondary);border-radius:var(--radius-xs);cursor:pointer;gap:5px;-webkit-user-select:none;user-select:none;box-sizing:border-box!important;flex-shrink:0!important;transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast)}.dither-compare-btn:before,.dither-compare-btn:after,.dither-toolbar-btn:before,.dither-toolbar-btn:after{content:none!important;display:none!important}.dither-compare-btn:hover,.dither-toolbar-btn:hover{background:var(--bg-surface-3);color:var(--text-primary);border-color:var(--border-subtle)}.dither-compare-btn.active,.dither-toolbar-btn.active{background:var(--accent-primary);color:#fff;border-color:var(--accent-primary);box-shadow:0 0 10px var(--accent-glow)}.dither-custom-colors-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}.dither-color-row{display:flex;align-items:center;justify-content:space-between;background:var(--bg-surface-2);padding:6px 10px;border-radius:var(--radius-sm);border:1px solid var(--border-subtle)}.dither-color-row-left{display:flex;align-items:center;gap:8px}.dither-color-index{font-size:11px;color:var(--text-muted);font-family:var(--font-mono);min-width:18px}.dither-btn-remove-color{background:transparent;border:none;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:var(--radius-xs);display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.dither-btn-remove-color:hover{color:var(--danger);background:#ef44441a}.dither-btn-add-color{background:var(--bg-surface-2);border:1px dashed var(--border-medium);border-radius:var(--radius-sm);padding:8px 12px;color:var(--accent-primary);font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;margin-top:8px;transition:all var(--transition-fast)}.dither-btn-add-color:hover{background:var(--accent-subtle);border-color:var(--accent-primary)}.dither-btn-add-color:disabled{opacity:.5;cursor:not-allowed;border-style:solid}.dither-source-card{display:flex;align-items:center;gap:12px;background:var(--bg-surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:10px 12px}.dither-source-thumb{width:48px;height:48px;border-radius:var(--radius-xs);object-fit:cover;background:var(--bg-surface-3);border:1px solid var(--border-medium)}.dither-source-meta{display:flex;flex-direction:column;overflow:hidden;gap:2px}.dither-source-name{font-size:12px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dither-source-res{font-family:var(--font-mono);font-size:11px;color:var(--text-muted)}.dither-toggle-row{display:flex;align-items:center;justify-content:space-between;cursor:pointer;-webkit-user-select:none;user-select:none}.dither-toggle-switch{position:relative;width:38px;height:20px}.dither-toggle-switch input{opacity:0;width:0;height:0}.dither-toggle-slider{position:absolute;cursor:pointer;top:0;right:0;bottom:0;left:0;background-color:var(--bg-surface-3);border-radius:var(--radius-full);transition:.2s;border:1px solid var(--border-medium)}.dither-toggle-slider:before{position:absolute;content:"";height:14px;width:14px;left:2px;bottom:2px;background-color:#fff;border-radius:50%;transition:.2s}.dither-toggle-switch input:checked+.dither-toggle-slider{background-color:var(--accent-primary);border-color:var(--accent-primary)}.dither-toggle-switch input:checked+.dither-toggle-slider:before{transform:translate(18px)}.dither-pattern-upload-row{display:flex;align-items:center;gap:8px;margin-top:4px}.dither-pattern-status{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:2px 4px;background:var(--bg-surface-2);border-radius:var(--radius-xs);border:1px solid var(--border-subtle)}.btn-export-txt{background:var(--bg-surface-2);border:1px solid var(--border-medium)}.btn-export-txt:hover{background:var(--bg-surface-3);border-color:var(--border-subtle)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media(max-width:900px){.dither-view{grid-template-columns:1fr;grid-template-rows:55% 45%}}