:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#101620;--panel:#1a1f2e;--panel-alt:#151b28;--border:#2a3040;--border-light:#323a4e;--text:#d0d4dc;--text-dim:#6b7280;--text-bright:#f0f2f5;--accent:#5b9bff;--accent-dim:#5b9bff26;--active:#2a3a55;--hover:#222838;--danger:#ef4444;--success:#22c55e;--warning:#f59e0b;--shadow:0 2px 8px #0000004d;--radius:4px;--grid:#6478a04d;--checker-a:#1e2636;--checker-b:#151b28;--font:"Segoe UI", system-ui, -apple-system, sans-serif;--font-mono:"Cascadia Code", "Fira Code", "Consolas", monospace}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#e8eaef;--panel:#fff;--panel-alt:#f3f4f6;--border:#d1d5db;--border-light:#e5e7eb;--text:#1f2937;--text-dim:#6b7280;--text-bright:#0f172a;--accent:#2563eb;--accent-dim:#2563eb1a;--active:#dbeafe;--hover:#f0f1f4;--danger:#dc2626;--success:#16a34a;--warning:#d97706;--shadow:0 1px 4px #00000014;--grid:#64748b40;--checker-a:#f1f5f9;--checker-b:#e2e8f0}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);width:100vw;height:100vh;color:var(--text);font-family:var(--font);justify-content:center;align-items:center;margin:0;font-size:13px;line-height:1.4;transition:background .2s,color .2s;display:flex;overflow:hidden}#app{justify-content:center;align-items:center;width:100%;height:100%;display:flex}a{color:var(--accent);text-decoration:none}button{cursor:pointer;font:inherit;color:inherit;background:0 0;border:none;outline:none}.main-shell{aspect-ratio:16/9;background:var(--panel-alt);border:1px solid var(--border);grid-template:"menubar menubar menubar"36px"toolbar canvas props"1fr"status status status"26px/48px 1fr 240px;width:100%;max-width:min(100vw,177.778vh);height:100%;max-height:min(100vh,56.25vw);display:grid;overflow:hidden}.menubar{background:var(--panel);border-bottom:1px solid var(--border);grid-area:menubar;justify-content:space-between;align-items:center;gap:8px;min-height:0;padding:0 12px;display:flex}.brand{color:var(--text-bright);white-space:nowrap;align-items:center;gap:8px;font-size:13px;font-weight:700;display:flex}.brand-dot{background:var(--accent);border-radius:50%;flex-shrink:0;width:10px;height:10px}.brand-badge{background:var(--accent-dim);color:var(--accent);letter-spacing:.03em;border-radius:3px;padding:2px 7px;font-size:10px;font-weight:600}.menubar-actions{align-items:center;gap:4px;display:flex}.toolstrip{background:var(--panel);border-right:1px solid var(--border);flex-direction:column;grid-area:toolbar;align-items:center;gap:2px;padding:6px 4px;display:flex;overflow:hidden}.toolstrip-separator{background:var(--border);flex-shrink:0;width:28px;height:1px;margin:4px 0}.tool-btn{border-radius:var(--radius);width:36px;height:36px;color:var(--text-dim);flex-shrink:0;justify-content:center;align-items:center;font-size:16px;transition:background .1s;display:flex;position:relative}.tool-btn:hover{background:var(--hover);color:var(--text)}.tool-btn.active{background:var(--active);color:var(--accent)}.tool-btn-small{width:32px;height:32px;font-size:14px}.canvas-area{background:var(--panel-alt);border-left:1px solid var(--border);border-right:1px solid var(--border);grid-area:canvas;place-items:center;display:grid;position:relative;overflow:hidden}.canvas-stage{display:inline-flex;position:relative;box-shadow:0 4px 20px #00000040}.canvas-board{image-rendering:pixelated;display:block}.props-panel{background:var(--panel);border-left:1px solid var(--border);scrollbar-width:thin;scrollbar-color:var(--border) transparent;flex-direction:column;grid-area:props;display:flex;overflow:hidden auto}.props-panel::-webkit-scrollbar{width:4px}.props-panel::-webkit-scrollbar-track{background:0 0}.props-panel::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.section{border-bottom:1px solid var(--border)}.section:last-child{border-bottom:none}.section-header{text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim);background:var(--panel-alt);cursor:default;-webkit-user-select:none;user-select:none;border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:6px 10px;font-size:11px;font-weight:700;display:flex}.section-body{flex-direction:column;gap:6px;padding:8px 10px;display:flex}.statusbar{color:var(--text-dim);background:var(--panel);border-top:1px solid var(--border);white-space:nowrap;grid-area:status;align-items:center;gap:16px;padding:0 10px;font-size:11px;display:flex;overflow:hidden}.statusbar-item{align-items:center;gap:4px;display:flex}.statusbar-accent{color:var(--accent);font-weight:600}.statusbar-color-swatch{border:1px solid var(--border-light);border-radius:2px;flex-shrink:0;width:12px;height:12px}.btn{background:var(--panel-alt);height:28px;color:var(--text);border:1px solid var(--border);border-radius:var(--radius);white-space:nowrap;cursor:pointer;justify-content:center;align-items:center;gap:6px;padding:4px 10px;font-size:12px;font-weight:500;transition:background .1s,border-color .1s;display:inline-flex}.btn:hover{background:var(--hover);border-color:var(--border-light)}.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.btn.primary:hover{background:#4a8ae8;border-color:#4a8ae8}.btn.ghost{background:0 0;border-color:#0000}.btn.ghost:hover{background:var(--hover)}.btn.ghost.active{background:var(--active);color:var(--accent);border-color:var(--accent-dim)}.btn-icon{width:28px;padding:0}.btn-sm{height:24px;padding:2px 8px;font-size:11px}.size-grid{flex-wrap:wrap;gap:4px;display:flex}.size-pill{background:var(--panel-alt);border:1px solid var(--border);border-radius:var(--radius);min-width:0;height:26px;color:var(--text-dim);cursor:pointer;flex:1;justify-content:center;align-items:center;font-size:11px;font-weight:600;transition:background .1s,color .1s;display:flex}.size-pill:hover{background:var(--hover);color:var(--text)}.size-pill.active{background:var(--accent);color:#fff;border-color:var(--accent)}.toggle-row{align-items:center;gap:6px;display:flex}.toggle-row label{color:var(--text-dim);cursor:pointer;align-items:center;gap:4px;font-size:12px;display:flex}.toggle-row label:hover{color:var(--text)}.toggle-row input[type=checkbox]{accent-color:var(--accent);cursor:pointer;width:14px;height:14px}.palette-grid{grid-template-columns:repeat(auto-fill,minmax(22px,1fr));gap:3px;display:grid}.color-swatch{border:1px solid var(--border);cursor:pointer;outline-offset:1px;border-radius:3px;outline:2px solid #0000;width:22px;height:22px;transition:outline-color .1s}.color-swatch:hover{outline-color:var(--text-dim)}.color-swatch.active{outline-color:var(--accent)}.palette-input-row{align-items:center;gap:4px;display:flex}.palette-input-row input[type=color]{border:1px solid var(--border);border-radius:var(--radius);background:var(--panel-alt);cursor:pointer;width:28px;height:28px;padding:0}.palette-input-row input[type=text]{background:var(--panel-alt);border:1px solid var(--border);border-radius:var(--radius);height:28px;color:var(--text);font-size:12px;font-family:var(--font-mono);flex:1;padding:0 8px}.selected-color-display{color:var(--text-dim);font-size:11px;font-family:var(--font-mono)}.layer-row{align-items:center;gap:6px;padding:4px 0;display:flex}.layer-info{flex:1;min-width:0}.layer-name{color:var(--text);font-size:12px;font-weight:600}.layer-meta{color:var(--text-dim);font-size:10px}.layer-row input[type=radio],.layer-row input[type=checkbox]{accent-color:var(--accent);width:14px;height:14px}.layer-opacity{align-items:center;gap:4px;display:flex}.layer-opacity input[type=range]{width:60px;accent-color:var(--accent)}.layer-opacity span{color:var(--text-dim);text-align:right;min-width:28px;font-size:10px;font-family:var(--font-mono)}.export-row{gap:4px;display:flex}.export-row .btn{flex:1}.dropzone{border:1px dashed var(--border-light);border-radius:var(--radius);text-align:center;color:var(--text-dim);cursor:pointer;padding:10px;font-size:11px;transition:border-color .15s}.dropzone:hover{border-color:var(--accent)}.dropzone input[type=file]{display:none}.toast-stack{z-index:100;flex-direction:column;gap:6px;display:flex;position:fixed;bottom:40px;right:16px}.toast{border-radius:var(--radius);background:var(--panel);border:1px solid var(--border);min-width:200px;max-width:320px;box-shadow:var(--shadow);align-items:center;gap:8px;padding:8px 12px;font-size:12px;animation:.2s toastIn;display:flex}.toast.success{border-left:3px solid var(--success)}.toast.error{border-left:3px solid var(--danger)}.toast.info{border-left:3px solid var(--accent)}.modal-backdrop{z-index:200;background:#00000080;place-items:center;animation:.12s fadeIn;display:grid;position:fixed;inset:0}.modal{background:var(--panel);border:1px solid var(--border);border-radius:6px;width:min(440px,90vw);padding:16px;box-shadow:0 8px 32px #0006}.modal-title{color:var(--text-bright);margin-bottom:8px;font-size:13px;font-weight:700}.modal-body{color:var(--text-dim);margin-bottom:12px;font-size:12px;line-height:1.5}.modal-actions{justify-content:flex-end;gap:6px;display:flex}.empty-state{text-align:center;color:var(--text-dim);padding:20px}.empty-state h3{color:var(--text);margin-bottom:6px;font-size:14px;font-weight:600}.empty-state p{margin-bottom:10px;font-size:12px}.empty-steps{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.empty-chip{background:var(--panel-alt);border-radius:var(--radius);border:1px dashed var(--border);color:var(--text-dim);padding:4px 10px;font-size:11px}.kbd{background:var(--panel-alt);border:1px solid var(--border);font-size:10px;font-family:var(--font-mono);min-width:18px;color:var(--text-dim);border-radius:3px;justify-content:center;align-items:center;padding:1px 5px;display:inline-flex}input[type=number],input[type=text]{background:var(--panel-alt);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font:inherit;padding:4px 8px;font-size:12px}input[type=range]{accent-color:var(--accent)}.tooltip{color:var(--text-dim);font-size:11px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes toastIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.divider{background:var(--border);height:1px}.row{align-items:center;gap:6px;display:flex}.stack{flex-direction:column;gap:6px;display:flex}.pill{background:var(--panel-alt);border:1px solid var(--border);color:var(--text-dim);font-size:10px;font-family:var(--font-mono);border-radius:3px;padding:2px 6px}.canvas-stage-wrapper.svelte-101rz1s{place-items:center;width:100%;height:100%;display:grid}.color-picker-label.svelte-3six5b{cursor:pointer;border:1px solid var(--border);border-radius:var(--radius);background:var(--panel-alt);align-items:center;gap:4px;padding:3px 6px;display:flex;position:relative}.color-picker-label.svelte-3six5b input[type=color]:where(.svelte-3six5b){opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;top:0;left:0}.color-picker-preview.svelte-3six5b{border:1px solid var(--border);border-radius:2px;flex-shrink:0;width:14px;height:14px}.palette-hex-input.svelte-3six5b{flex:1;min-width:0;max-width:80px}.custom-size-row.svelte-1l7uo6c{align-items:center;gap:4px;display:flex}.custom-size-input.svelte-1l7uo6c{text-align:center;flex:1;min-width:0;height:26px}.export-scale-select.svelte-1l7uo6c{background:var(--panel-alt);height:28px;color:var(--text);border:1px solid var(--border);border-radius:var(--radius);font-size:11px;font-family:var(--font-mono);cursor:pointer;padding:0 6px}.dropzone.svelte-1l7uo6c{flex-direction:column;align-items:center;gap:4px;padding:12px;display:flex}