*{box-sizing:border-box;margin:0;padding:0}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0b0e14;--panel:#11151f;--panel-2:#171c29;--border:#202839;--text:#d7dde8;--muted:#7b8698;--accent:#3b82f6;--danger:#b91c1c}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);font-family:system-ui,sans-serif;font-size:13px}button{background:var(--panel-2);color:var(--text);border:1px solid var(--border);cursor:pointer;border-radius:6px;padding:5px 10px;font-size:12px}button:hover{border-color:var(--accent)}button.active,button.primary{background:var(--accent);border-color:var(--accent);color:#fff}button.danger{border-color:var(--danger);color:#f87171;background:0 0;width:100%;margin-top:12px}button.wide{width:100%;margin-top:10px}button:disabled{opacity:.5;cursor:default}input,select{background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:6px;min-width:0;padding:5px 8px;font-size:12px}input[type=color]{cursor:pointer;width:30px;height:26px;padding:1px}input[type=range]{padding:0}h2{text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin:14px 0 8px;font-size:11px}h3{text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin:14px 0 6px;font-size:10px}.hint{color:var(--muted);margin-top:8px;font-size:11px;line-height:1.5}.shell{grid-template:"topbar topbar topbar"46px"left stage right"1fr"bottom bottom bottom"92px/232px 1fr 252px;height:100%;display:grid}.side,.topbar,.inspector,.add-panel,.layers,.variant-strip{-webkit-user-select:none;user-select:none}input,textarea,select,.el-name{-webkit-user-select:text;user-select:text}.topbar{background:var(--panel);border-bottom:1px solid var(--border);grid-area:topbar;align-items:center;gap:16px;padding:0 14px;display:flex;overflow-x:auto}.brand{letter-spacing:3px;color:var(--accent);font-weight:700}.topbar-group{align-items:center;gap:6px;display:flex}.topbar-group.archetypes{flex:1;justify-content:center}.panel{background:var(--panel);padding:12px;overflow-y:auto}.panel.left{border-right:1px solid var(--border);grid-area:left}.panel.right{border-left:1px solid var(--border);grid-area:right}.tabs{gap:6px;margin-bottom:6px;display:flex}.tabs button{flex:1}.stage{overscroll-behavior:contain;grid-area:stage;padding:28px;display:flex;position:relative;overflow:auto}.bottombar{background:var(--panel);border-top:1px solid var(--border);grid-area:bottom;align-items:center;padding:0 16px;display:flex}svg.canvas{touch-action:none;background:conic-gradient(#fff 90deg,#f1f3f5 90deg 180deg,#fff 180deg 270deg,#f1f3f5 270deg) 0 0/20px 20px;border-radius:8px;flex-shrink:0;margin:auto;box-shadow:0 8px 40px #0000008c}.stage.panning,.stage.panning svg.canvas{cursor:grab}.zoom-controls{background:var(--panel);border:1px solid var(--border);border-radius:8px;align-items:center;gap:8px;padding:4px 8px;display:flex;position:absolute;bottom:12px;right:16px}.guide{stroke:#f43f5e;stroke-width:1px;vector-effect:non-scaling-stroke}.sel-box{fill:none;stroke:var(--accent);stroke-width:1.5px;vector-effect:non-scaling-stroke}.axis-line{stroke:var(--accent);stroke-width:1px;stroke-dasharray:4 4;opacity:.45;vector-effect:non-scaling-stroke}.hud rect{fill:#0b0e14;stroke:var(--border);stroke-width:1px;vector-effect:non-scaling-stroke;opacity:.92}.hud text{fill:#e6ebf3;font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.group-box{fill:none;stroke:var(--accent);stroke-width:1.5px;stroke-dasharray:6 4;vector-effect:non-scaling-stroke}.sel-handle{fill:#fff;stroke:var(--accent);stroke-width:1.5px;vector-effect:non-scaling-stroke}.row{grid-template-columns:68px 1fr;align-items:center;gap:8px;margin-bottom:6px;display:grid}.row>span{color:var(--muted);font-size:11px}.btn-grid{grid-template-columns:1fr 1fr;gap:6px;display:grid}.el-name{width:100%;color:var(--text);background:0 0;border:none;font-size:13px;font-weight:600}.fill-editor{align-items:center;gap:6px;display:flex}.fill-editor .swatch{border:2px solid #0000;border-radius:6px;width:26px;height:26px;padding:0}.fill-editor .swatch.active,.fill-editor input.active{border-color:#fff}.fill-editor .swatch.none{background:linear-gradient(to top right, transparent calc(50% - 1px), #ef4444 calc(50% - 1px), #ef4444 calc(50% + 1px), transparent calc(50% + 1px)), var(--panel-2);border-color:var(--border)}.fill-editor .swatch.none.active{border-color:#fff}.slide{grid-template-columns:1fr 56px;align-items:center;gap:6px;display:grid}.slide input[type=number]{min-width:0}.dial{grid-template-columns:repeat(3,1fr);gap:2px;display:grid}.dial button{padding:2px 0;font-size:12px;line-height:1.1}.fill-editor .swatch.grad{border-color:var(--border);background:linear-gradient(135deg,#4338ca,#22d3ee)}.fill-editor .swatch.grad.active{border-color:#fff}.grad-editor{background:var(--panel-2);border-radius:6px;margin:6px 0 2px;padding:8px}.grad-stop{grid-template-columns:26px repeat(4,18px) 1fr 20px;align-items:center;gap:4px;margin-bottom:5px;display:grid}.grad-stop .swatch{border:2px solid #0000;border-radius:4px;height:18px;padding:0}.grad-stop .swatch.active{border-color:#fff}.grad-stop input[type=color]{height:22px;padding:0}.grad-stop input[type=number]{min-width:0}.grad-drop{padding:0;line-height:1}.bg-row{align-items:center;gap:6px;display:flex}.layers{list-style:none}.layers li{cursor:pointer;border-radius:6px;align-items:center;gap:6px;padding:5px 8px;display:flex}.layers li:hover{background:var(--panel-2)}.layers li.selected{background:var(--accent);color:#fff}.layers .glyph{text-align:center;opacity:.7;width:14px}.layers .lname{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.layer-actions{gap:2px;display:none}.layers li:hover .layer-actions,.layers li.selected .layer-actions{display:flex}.layer-actions button{background:0 0;border:none;padding:1px 4px;font-size:10px}.search{width:100%;margin-bottom:8px}.icon-grid{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.icon-grid button{aspect-ratio:1;color:var(--text);justify-content:center;align-items:center;padding:7px;display:flex}.icon-grid button svg{width:100%;height:100%}.icon-grid button.active{color:#fff}.mono-glyph{font-size:14px;font-weight:700}.swatch-row{text-transform:capitalize;align-items:center;gap:8px;padding:3px 0;display:flex}.swatch-row code{color:var(--muted);margin-left:auto;font-size:10px}.harmony-row{gap:6px;display:flex}.harmony-row select{flex:1}.palette-grid{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.palette-grid button{border-radius:5px;height:22px;padding:0;display:flex;overflow:hidden}.palette-grid button i{flex:1}.palette-grid button.active{outline:2px solid #fff}.variant-strip{align-items:center;gap:22px;width:100%;display:flex}.variant-cell{flex-direction:column;align-items:center;gap:4px;display:flex}.variant-cell span{color:var(--muted);font-size:10px}.variant-frame{border:1px solid var(--border);border-radius:6px;justify-content:center;align-items:center;display:flex;overflow:hidden}.variant-frame svg{width:100%;height:100%}.contrast-warning{color:#fbbf24;margin-left:auto;font-size:12px}.modal-backdrop{z-index:50;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--panel);border:1px solid var(--border);border-radius:12px;flex-direction:column;width:min(440px,92vw);max-height:86vh;display:flex}.modal.wide{width:min(860px,94vw)}.modal-head{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:14px 18px;display:flex}.modal-head h2{color:var(--text);margin:0;font-size:13px}.modal-body{padding:16px 18px;overflow-y:auto}.modal-actions{justify-content:flex-end;gap:8px;margin-top:14px;display:flex}.shuffle-grid{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.shuffle-cell{flex-direction:column;padding:0;display:flex;overflow:hidden}.shuffle-frame{aspect-ratio:4/3;background:#fff}.shuffle-frame svg{width:100%;height:100%}.shuffle-cell span{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;padding:6px 8px;font-size:10px;overflow:hidden}.mockup-grid{grid-template-columns:1fr 1fr;gap:14px;display:grid}.mockup-grid figure svg{border-radius:8px;width:100%}.mockup-grid figcaption{text-align:center;color:var(--muted);margin-top:6px;font-size:11px}.wizard .row{grid-template-columns:90px 1fr}.wizard-icons{grid-template-columns:repeat(10,1fr)}.font-list{grid-template-columns:repeat(3,1fr);gap:6px;max-height:180px;display:grid;overflow-y:auto}.font-list button{flex-direction:column;align-items:flex-start;gap:2px;padding:8px 10px;font-size:15px;display:flex}.font-list button small{color:var(--muted);font-family:system-ui,sans-serif;font-size:9px}.font-list button.active small{color:#e8edff}.png-row{gap:8px;display:flex}.png-row select{flex:1}:where(button,input,select,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:1px}.chip-row{flex-wrap:wrap;gap:4px;margin-bottom:6px;display:flex}.chip-row.moods{max-height:44px;overflow-y:auto}.chip{text-transform:capitalize;height:20px;color:var(--muted);border-radius:999px;padding:0 8px;font-size:10px;line-height:18px}.chip.active{background:var(--accent);border-color:var(--accent);color:#fff}.seg{gap:0;display:flex}.seg button{border-radius:0;flex:1}.seg button:first-child{border-radius:6px 0 0 6px}.seg button:last-child{border-radius:0 6px 6px 0}.seg button+button{border-left-width:0}.align-grid{grid-template-columns:repeat(6,1fr);gap:4px;margin-bottom:6px;display:grid}.align-grid button{justify-content:center;align-items:center;padding:4px 0;display:flex}.align-icon{width:16px;height:16px}.align-icon .rail{fill:var(--accent)}.align-icon .bar{fill:var(--muted)}.align-grid button:hover .align-icon .bar{fill:var(--text)}.font-picker{min-width:0;position:relative}.font-trigger{background:var(--panel-2);justify-content:space-between;align-items:center;gap:6px;width:100%;padding:5px 8px;font-size:14px;display:flex;overflow:hidden}.font-trigger span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.font-trigger i{color:var(--muted);font-size:10px;font-style:normal}.font-pop{z-index:60;background:var(--panel);border:1px solid var(--border);border-radius:10px;flex-direction:column;max-width:calc(100vw - 16px);padding:10px;display:flex;position:fixed;box-shadow:0 16px 48px #0009}.font-pop h3{margin:10px 0 4px}.font-scroll{flex-direction:column;flex:1;gap:2px;min-height:0;display:flex;overflow-y:auto}.font-row{text-align:left;background:0 0;border-color:#0000;flex-direction:column;align-items:flex-start;gap:1px;width:100%;padding:7px 9px;display:flex}.font-row:hover{background:var(--panel-2)}.font-row.active{background:var(--accent);color:#fff;border-color:var(--accent)}.font-sample{text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:19px;line-height:1.25;overflow:hidden}.font-row.pending .font-sample{opacity:.45}.font-row small{color:var(--muted);text-transform:uppercase;letter-spacing:.6px;align-items:center;gap:5px;font-size:9.5px;display:flex}.font-row small i{opacity:.7;font-style:normal}.font-row small em{color:var(--accent);font-style:normal}.font-row.active small,.font-row.active small em{color:#dbe6ff}.marquee{fill:#3b82f61f;stroke:var(--accent);stroke-width:1px;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}.check{cursor:pointer;align-items:center;gap:7px;margin:2px 0 8px;font-size:12px;display:flex}.check input{accent-color:var(--accent);cursor:pointer;width:14px;height:14px}.art-grid{grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px;display:grid}.art-grid button{flex-direction:column;align-items:center;gap:3px;padding:4px;display:flex}.art-grid img{aspect-ratio:1;background:conic-gradient(#e9edf3 90deg,#fff 90deg 180deg,#e9edf3 180deg 270deg,#fff 270deg) 0 0/10px 10px;border-radius:4px;width:100%}.art-grid span{color:var(--muted);font-size:9px}.tpl-controls{flex-direction:column;gap:8px;margin-bottom:12px;display:flex}.tpl-cats{flex-wrap:wrap;gap:6px;display:flex}.tpl-cats button{padding:4px 9px;font-size:11px}.tpl-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;display:grid}.tpl-cell{background:var(--panel-2);border:1px solid var(--border);text-align:left;cursor:pointer;border-radius:10px;flex-direction:column;gap:2px;padding:0 0 8px;display:flex;overflow:hidden}.tpl-cell:hover{border-color:var(--accent)}.tpl-frame{aspect-ratio:1;background:conic-gradient(#fff 90deg,#eceef1 90deg 180deg,#fff 180deg 270deg,#eceef1 270deg) 0 0/16px 16px;place-items:center;padding:10px;display:grid}.tpl-frame svg{width:auto;max-width:100%;height:auto;max-height:100%}.tpl-name{color:var(--text);padding:6px 10px 0;font-size:12px}.tpl-cat{color:var(--muted);padding:0 10px;font-size:10px}.tpl-cell.skeleton{cursor:default;animation:1.4s ease-in-out infinite tpl-pulse}.tpl-cell.skeleton .tpl-frame{background:var(--panel)}@keyframes tpl-pulse{50%{opacity:.45}}.hint.error{color:#fca5a5}.crop-shade{fill:#0b0e149e}.crop-inside{fill:#0000}.crop-box-under,.crop-box{fill:none;stroke-width:1.5px;vector-effect:non-scaling-stroke;pointer-events:none}.crop-box-under{stroke:#0b0e14}.crop-box{stroke:#fff;stroke-dasharray:6 6}.crop-rule-under,.crop-rule{stroke-width:1px;opacity:.4;vector-effect:non-scaling-stroke;pointer-events:none}.crop-rule-under{stroke:#0b0e14}.crop-rule{stroke:#fff;stroke-dasharray:5 5}.crop-handle{fill:#fff;stroke:var(--accent);stroke-width:1.5px;vector-effect:non-scaling-stroke}.crop-bar{background:var(--panel);border:1px solid var(--border);z-index:2;border-radius:8px;align-items:center;gap:6px;padding:6px 8px;display:flex;position:absolute;bottom:56px;left:50%;transform:translate(-50%);box-shadow:0 8px 30px #00000080}.crop-size{font-variant-numeric:tabular-nums;color:var(--muted);padding:0 6px 0 2px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.toast-stack{z-index:80;pointer-events:none;flex-direction:column;align-items:center;gap:6px;display:flex;position:fixed;bottom:104px;left:50%;transform:translate(-50%)}.toast{pointer-events:auto;cursor:pointer;border:1px solid var(--border);background:var(--panel-2);border-radius:8px;max-width:min(520px,80vw);padding:8px 14px;font-size:12px;box-shadow:0 10px 30px #00000080}.toast.error{color:#fca5a5;border-color:#7f1d1d}.toast.success{color:#86efac;border-color:#14532d}.layers .merged{color:var(--muted);font-size:11px}.node-outline{fill:none;stroke:var(--accent);stroke-width:1px;vector-effect:non-scaling-stroke;pointer-events:none}.node-band{fill:none;stroke:#0000;cursor:crosshair}.node-handle{fill:#fff;stroke:var(--accent);stroke-width:1.5px;vector-effect:non-scaling-stroke;cursor:move}.node-handle:hover{fill:var(--accent)}.shape-grid{grid-template-columns:repeat(6,1fr);gap:4px;display:grid}.shape-grid button{aspect-ratio:1;place-items:center;padding:4px;display:grid}.shape-grid button.active{background:var(--accent);border-color:var(--accent)}.shape-grid svg{width:100%;height:100%}.shape-grid path{fill:var(--text)}.shape-grid button.active path{fill:#fff}.shape-grid svg.stroked path{fill:none;stroke:var(--text);stroke-width:3px}.shape-grid button.active svg.stroked path{stroke:#fff}.shape-preview{fill:none;stroke:var(--accent);stroke-width:1.5px;stroke-dasharray:5 3;vector-effect:non-scaling-stroke}.hint{color:var(--muted);margin:-2px 0 6px;font-size:11px}.canvas.drawing{cursor:crosshair}.draw-preview{fill:none;stroke:var(--accent);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:.9}.draw-toggle{width:100%;margin-bottom:6px}.draw-toggle.active{background:var(--accent);border-color:var(--accent);color:#fff}.ctx-menu{-webkit-user-select:none;user-select:none;z-index:50;background:var(--panel);border:1px solid var(--border);border-radius:8px;flex-direction:column;gap:1px;min-width:176px;padding:4px;display:flex;position:fixed;box-shadow:0 12px 32px #00000073}.ctx-menu button{text-align:left;background:0 0;border:none;border-radius:5px;justify-content:space-between;align-items:center;gap:16px;padding:6px 8px;display:flex}.ctx-menu button:hover:not(:disabled){background:var(--accent);color:#fff}.ctx-menu button:disabled{opacity:.35}.ctx-menu button.danger{color:#f87171}.ctx-menu button.danger:hover:not(:disabled){background:var(--danger);color:#fff}.ctx-note{color:var(--muted);border-bottom:1px solid var(--border);margin-bottom:2px;padding:4px 8px 6px;font-size:11px}.ctx-menu em{color:var(--muted);font-size:11px;font-style:normal}.ctx-menu button:hover:not(:disabled) em{color:#ffffffb3}.text-editor{z-index:40;text-align:center;border:1.5px solid var(--accent);border-radius:4px;outline:none;padding:0 8px;line-height:1;position:fixed;box-shadow:0 6px 20px #00000059}