*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-base:#09090b;--bg-surface:#111113;--bg-elevated:#1a1a1f;--bg-hover:#222228;--bg-active:#2a2a32;--text-primary:#ececf0;--text-secondary:#8e8e9a;--text-muted:#55555f;--border:#222228;--border-hover:#333340;--accent:#6366f1;--accent-hover:#818cf8;--accent-muted:#6366f126;--accent-text:#a5b4fc;--success:#34d399;--danger:#ef4444;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-6:24px;--sp-8:32px;--r-sm:4px;--r-md:6px;--r-lg:10px;--font:-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-mono:ui-monospace, "SF Mono", "Cascadia Code", monospace;--ease-out:cubic-bezier(.23, 1, .32, 1);--checker-a:#18181c;--checker-b:#141417}[data-theme=light]{--bg-base:#f5f5f7;--bg-surface:#fff;--bg-elevated:#ebebef;--bg-hover:#e2e2e8;--bg-active:#d8d8e0;--text-primary:#111118;--text-secondary:#5a5a6a;--text-muted:#9898a8;--border:#dcdce4;--border-hover:#c8c8d4;--accent:#4f52e0;--accent-hover:#6366f1;--accent-muted:#4f52e01f;--accent-text:#4f52e0;--success:#16a34a;--danger:#dc2626;--checker-a:#d8d8e0;--checker-b:#e4e4ec}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility}body{font-family:var(--font);font-size:13px;line-height:1.5;overflow:hidden}h1,h2,h3{text-wrap:balance}.app{height:100dvh;color:var(--text-primary);background:var(--bg-base);flex-direction:column;display:flex}.header{align-items:center;gap:var(--sp-4);padding:var(--sp-2) var(--sp-6);border-bottom:1px solid var(--border);background:var(--bg-surface);z-index:10;flex-shrink:0;min-height:44px;display:flex;box-shadow:0 1px 3px #0000000f}.header-brand{align-items:center;gap:var(--sp-2);margin-right:auto;display:flex}.header-brand svg{color:var(--accent)}.header-brand h1{letter-spacing:-.01em;font-size:13px;font-weight:600}.header-group{align-items:center;gap:var(--sp-2);display:flex}.workspace-outer{flex:1;min-height:0;display:flex}.workspace{flex:1;grid-template-columns:1fr 1fr;min-height:0;display:grid}.panel{padding:var(--sp-6);justify-content:center;align-items:center;gap:var(--sp-4);flex-direction:column;min-height:0;display:flex;position:relative}.panel+.panel{border-left:1px solid var(--border)}.panel-label{top:var(--sp-3);left:var(--sp-4);text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);-webkit-user-select:none;user-select:none;font-size:10px;font-weight:600;position:absolute}.canvas-container{flex:1;justify-content:center;align-items:center;width:100%;min-height:0;display:flex}.canvas-frame{border-radius:var(--r-md);box-shadow:0 0 0 1px var(--border), 0 2px 8px #00000026, 0 8px 24px #0000001a;position:relative;overflow:hidden}.canvas-frame canvas{cursor:crosshair;display:block}.preview-container{flex:1;justify-content:center;align-items:center;width:100%;min-height:0;display:flex}.preview-frame{border-radius:var(--r-md);box-shadow:0 0 0 1px var(--border), 0 2px 8px #00000026, 0 8px 24px #0000001a;background-image:linear-gradient(45deg, var(--checker-a) 25%, transparent 25%, transparent 75%, var(--checker-a) 75%), linear-gradient(45deg, var(--checker-a) 25%, transparent 25%, transparent 75%, var(--checker-a) 75%);background-position:0 0,8px 8px;background-size:16px 16px;background-color:var(--checker-b);overflow:hidden}.preview-frame svg{display:block}.preview-empty{color:var(--text-muted);justify-content:center;align-items:center;font-size:12px;font-style:italic;display:flex}.smoothing-bar{align-items:center;gap:var(--sp-2);flex-shrink:0;width:100%;display:flex}.smoothing-bar label{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);white-space:nowrap;font-size:10px;font-weight:600}.controls{border-top:1px solid var(--border);background:var(--bg-surface);flex-shrink:0}.controls-row{align-items:center;gap:var(--sp-6);padding:var(--sp-2) var(--sp-6);flex-wrap:wrap;display:flex}.controls-row+.controls-row{border-top:1px solid var(--border)}.control-group{align-items:center;gap:var(--sp-2);display:flex}.control-label{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);white-space:nowrap;-webkit-user-select:none;user-select:none;font-size:10px;font-weight:600}.divider{background:var(--border);flex-shrink:0;width:1px;height:20px}.btn{justify-content:center;align-items:center;gap:var(--sp-1);height:28px;padding:0 var(--sp-3);font-size:12px;font-weight:500;font-family:var(--font);color:var(--text-secondary);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-sm);cursor:pointer;transition:color .12s var(--ease-out), background .12s var(--ease-out), border-color .12s var(--ease-out);white-space:nowrap;-webkit-user-select:none;user-select:none;display:inline-flex}.btn:hover{color:var(--text-primary);background:var(--bg-hover);border-color:var(--border-hover)}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.3;pointer-events:none}.btn-active{color:var(--accent-text);background:var(--accent-muted);border-color:var(--accent)}.btn-icon{width:28px;padding:0}.btn-accent{color:#fff;background:var(--accent);border-color:var(--accent)}.btn-accent:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}.btn-sm{height:24px;padding:0 var(--sp-2);font-size:11px}.btn-xs{height:20px;padding:0 6px;font-size:10px}.input{height:28px;padding:0 var(--sp-2);font-size:12px;font-family:var(--font-mono);color:var(--text-primary);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-sm);transition:border-color .12s var(--ease-out);font-variant-numeric:tabular-nums;outline:none}.input:focus{border-color:var(--accent)}.input-sm{text-align:center;width:48px}.input-xs{text-align:center;width:42px;height:20px;font-size:10px}.swatches{gap:3px;display:flex}.swatch{cursor:pointer;outline:1px solid var(--border);outline-offset:-1px;border:2px solid #0000;border-radius:3px;flex-shrink:0;width:20px;height:20px;transition:border-color 80ms}.swatch:hover{border-color:var(--border-hover)}.swatch-active{border-color:var(--accent);outline-color:var(--accent)}.color-input-wrap{outline:1px solid var(--border);outline-offset:-1px;border-radius:3px;width:20px;height:20px;position:relative;overflow:hidden}.color-input{cursor:pointer;background:0 0;border:none;width:calc(100% + 8px);height:calc(100% + 8px);padding:0;position:absolute;inset:-4px}.color-input::-webkit-color-swatch-wrapper{padding:0}.color-input::-webkit-color-swatch{border:none;border-radius:0}.layer-item{align-items:center;gap:var(--sp-1);height:26px;padding:0 var(--sp-2) 0 var(--sp-1);color:var(--text-secondary);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-sm);cursor:pointer;-webkit-user-select:none;user-select:none;font-size:11px;font-weight:500;transition:all .1s;display:flex}.layer-item:hover{background:var(--bg-hover)}.layer-item-active{color:var(--accent-text);background:var(--accent-muted);border-color:var(--accent)}.layer-vis{background:var(--success);cursor:pointer;border-radius:50%;flex-shrink:0;width:8px;height:8px;transition:background 80ms}.layer-vis:hover{opacity:.7}.layer-vis-hidden{background:var(--text-muted)}.slider{appearance:none;background:var(--bg-active);cursor:pointer;border-radius:2px;outline:none;flex:1;height:4px}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:pointer;border-radius:50%;width:14px;height:14px;transition:transform .1s;box-shadow:0 1px 4px #0006}.slider::-webkit-slider-thumb:hover{transform:scale(1.15)}.slider::-webkit-slider-thumb:active{transform:scale(.95)}.slider::-moz-range-thumb{background:var(--accent);cursor:pointer;border:none;border-radius:50%;width:14px;height:14px}.slider-value{font-family:var(--font-mono);color:var(--text-secondary);text-align:right;font-variant-numeric:tabular-nums;flex-shrink:0;width:30px;font-size:11px}.tool-palette{padding:var(--sp-2) var(--sp-1);border-right:1px solid var(--border);background:var(--bg-surface);flex-direction:column;flex-shrink:0;align-items:center;gap:2px;width:44px;display:flex}.tool-btn{border-radius:var(--r-md);width:34px;height:34px;color:var(--text-secondary);cursor:pointer;transition:background .12s var(--ease-out), color .12s var(--ease-out);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.tool-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.tool-btn-active{background:var(--accent-muted);color:var(--accent-text)}.tool-btn-active:hover{background:var(--accent-muted)}.inspector{border-left:1px solid var(--border);background:var(--bg-surface);width:210px;padding:var(--sp-3) 0;gap:var(--sp-1);flex-direction:column;flex-shrink:0;display:flex;overflow-y:auto}.inspector-section{gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--border);flex-direction:column;display:flex}.inspector-section:last-child{border-bottom:none}.inspector-label{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);-webkit-user-select:none;user-select:none;margin-bottom:2px;font-size:10px;font-weight:600}.inspector-sublabel{color:var(--text-muted);-webkit-user-select:none;user-select:none;min-width:38px;font-size:10px}.inspector-row{align-items:center;gap:var(--sp-2);display:flex}.inspector-layer{flex-direction:column;gap:4px;display:flex}.layer-rotation{align-items:center;gap:3px;padding-left:12px;display:flex}.inspector-export-btns{gap:4px;display:flex}.inspector .swatches{flex-wrap:wrap;gap:4px}.inspector .swatch{width:22px;height:22px}.segmented-control,.segmented-control-sm{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-md);display:flex;position:relative;overflow:hidden}.segmented-control{height:28px}.segmented-control-sm{height:22px}.segment-pill{border-radius:var(--r-sm);background:var(--accent-muted);border:1px solid var(--accent);transition:left .2s var(--ease-out), width .2s var(--ease-out);pointer-events:none;z-index:0;position:absolute;top:2px;bottom:2px}.segment{color:var(--text-secondary);font-size:11px;font-weight:500;font-family:var(--font);cursor:pointer;z-index:1;padding:0 var(--sp-2);white-space:nowrap;background:0 0;border:none;flex:1;justify-content:center;align-items:center;transition:color .12s;display:flex;position:relative}.segmented-control-sm .segment{padding:0 6px;font-size:10px}.segment:hover{color:var(--text-primary)}.segment-active{color:var(--accent-text)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.status-bar{padding:0 var(--sp-6);border-top:1px solid var(--border);background:var(--bg-surface);flex-shrink:0;justify-content:space-between;align-items:center;height:24px;display:flex}.status-bar-left,.status-bar-right{align-items:center;gap:var(--sp-2);display:flex}.status-bar .divider{height:12px}.status-item{font-family:var(--font-mono);color:var(--text-muted);font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none;font-size:10px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}@media (hover:none){.btn:hover{color:var(--text-secondary);background:var(--bg-elevated);border-color:var(--border)}.swatch:hover{border-color:#0000}}