@font-face{font-family:Jost;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/jost-latin.woff2)format("woff2")}:root{--radius-sm:0px;--radius-md:0px;--radius-lg:0px;--shadow:0 1px 2px #0000000a;--ease:.12s ease;--font:"Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}:root,:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f6f5f3;--surface:#fff;--surface-2:#eceae6;--border:#1c19171a;--border-strong:#1c191729;--text:#1c1917;--text-muted:#78716c;--text-subtle:#a8a29a;--accent:#5e6ad2;--accent-hover:#4f5bc4;--accent-fg:#fff;--accent-soft:#5e6ad21a;--danger:#d14343;--danger-hover:#b93636;--danger-fg:#fff;--grid-line:#1c191714;--hover-cell-fill:#5e6ad21f;--hover-cell-stroke:#5e6ad280;--handle-fill:#fff}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--shadow:0 2px 8px #0006;--bg:#201e1b;--surface:#2a2825;--surface-2:#37332f;--border:#ffffff17;--border-strong:#ffffff29;--text:#f5f3f0;--text-muted:#a8a29a;--text-subtle:#78716c;--accent:#5e6ad2;--accent-hover:#6f79e0;--accent-fg:#fff;--accent-soft:#7882e629;--grid-line:#ffffff12;--hover-cell-fill:#7882e633;--hover-cell-stroke:#8c96ebb3;--handle-fill:#2a2825}}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--shadow:0 2px 8px #0006;--bg:#201e1b;--surface:#2a2825;--surface-2:#37332f;--border:#ffffff17;--border-strong:#ffffff29;--text:#f5f3f0;--text-muted:#a8a29a;--text-subtle:#78716c;--accent:#5e6ad2;--accent-hover:#6f79e0;--accent-fg:#fff;--accent-soft:#7882e629;--danger:#e5645f;--danger-hover:#ef7a75;--danger-fg:#fff;--grid-line:#ffffff12;--hover-cell-fill:#7882e633;--hover-cell-stroke:#8c96ebb3;--handle-fill:#2a2825}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font);background:var(--bg);color:var(--text);overscroll-behavior:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button,select,input,textarea{font-family:inherit}.canvas-root{background:var(--bg);color:var(--text);-webkit-user-select:none;user-select:none;position:fixed;inset:0;overflow:hidden}.canvas-svg{touch-action:none;outline:none;width:100%;height:100%;display:block}.canvas-svg.is-drawing{cursor:crosshair}.canvas-svg.is-pan-ready{cursor:grab}.canvas-svg.is-panning{cursor:grabbing}.canvas-svg.is-select{cursor:default}.grid-lines{fill:none;stroke:var(--grid-line);stroke-width:1px;shape-rendering:crispedges}.stroke-selected{fill:none;stroke:var(--accent);opacity:.4;stroke-linejoin:round;stroke-linecap:round}.vertex-handle{fill:var(--handle-fill);stroke:var(--accent);stroke-width:2px;cursor:grab}.draft-path{fill:none;stroke-width:2px}.draft-rubber{fill:none;stroke-width:2px;stroke-dasharray:4 4;opacity:.7}.draft-vertex{stroke:var(--handle-fill);stroke-width:1.5px}.draft-vertex.can-close{stroke:var(--accent);stroke-width:2px}.hover-cell{fill:var(--hover-cell-fill);stroke:var(--hover-cell-stroke);stroke-width:1.5px}.hover-vertex{fill:var(--accent);stroke:var(--handle-fill);stroke-width:1.5px}.brand-badge,.grid-modes,.top-actions,.toolbar,.right-panel,.canvas-hud{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow)}.brand-badge{z-index:30;border-radius:var(--radius-lg);letter-spacing:-.01em;height:36px;color:var(--text);align-items:center;padding:0 14px;font-size:13px;font-weight:600;display:flex;position:fixed;top:16px;left:16px}.grid-modes{z-index:30;border-radius:var(--radius-lg);gap:2px;padding:3px;display:flex;position:fixed;top:16px;left:50%;transform:translate(-50%)}.grid-modes button{border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;transition:background var(--ease), color var(--ease);background:0 0;border:none;padding:6px 12px;font-size:13px;font-weight:500}.grid-modes button:hover{background:var(--surface-2);color:var(--text)}.grid-modes button.is-active{background:var(--accent-soft);color:var(--accent)}.top-actions{z-index:30;border-radius:var(--radius-lg);align-items:center;gap:2px;padding:3px;display:flex;position:fixed;top:16px;right:16px}.top-actions>button{border-radius:var(--radius-sm);width:32px;height:32px;color:var(--text-muted);cursor:pointer;transition:background var(--ease), color var(--ease);background:0 0;border:none;justify-content:center;align-items:center;display:inline-flex}.top-actions>button:hover:not(:disabled){background:var(--surface-2);color:var(--text)}.top-actions>button:disabled{opacity:.35;cursor:default}.export-menu{margin-left:2px;position:relative}.export-menu>button{border-radius:var(--radius-sm);background:var(--accent);height:32px;color:var(--accent-fg);cursor:pointer;transition:background var(--ease);border:none;align-items:center;gap:6px;padding:0 12px;font-size:13px;font-weight:500;display:inline-flex}.export-menu>button:hover:not(:disabled){background:var(--accent-hover)}.export-menu>button:disabled{opacity:.4;cursor:default}.export-pop{border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--border);min-width:140px;box-shadow:var(--shadow);z-index:10;flex-direction:column;padding:4px;display:flex;position:absolute;top:40px;right:0}.export-pop button{border-radius:var(--radius-sm);text-align:left;color:var(--text);cursor:pointer;background:0 0;border:none;padding:8px 10px;font-size:13px}.export-pop button:hover{background:var(--surface-2)}.toolbar{z-index:20;border-radius:var(--radius-lg);flex-direction:column;gap:2px;padding:3px;display:flex;position:fixed;top:50%;left:16px;transform:translateY(-50%)}.toolbar button{border-radius:var(--radius-md);width:38px;height:38px;color:var(--text-muted);cursor:pointer;transition:background var(--ease), color var(--ease);background:0 0;border:none;justify-content:center;align-items:center;display:inline-flex}.toolbar button:hover{background:var(--surface-2);color:var(--text)}.toolbar button.is-active{background:var(--accent-soft);color:var(--accent)}.right-panel{z-index:20;border-radius:var(--radius-lg);flex-direction:column;width:200px;padding:14px;display:flex;position:fixed;top:50%;right:16px;transform:translateY(-50%)}.right-panel h2{text-transform:uppercase;letter-spacing:.06em;color:var(--text-subtle);margin:0 0 10px;font-size:11px;font-weight:600}.color-picker{flex-direction:column;gap:10px;display:flex}.cp-sv{border-radius:var(--radius-sm);cursor:crosshair;touch-action:none;background-image:linear-gradient(#0000,#000),linear-gradient(90deg,#fff,#0000);width:100%;height:130px;position:relative}.cp-sv-thumb{pointer-events:none;border:2px solid #fff;width:12px;height:12px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #00000080}.cp-hue{border-radius:var(--radius-sm);cursor:pointer;touch-action:none;background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);width:100%;height:12px;position:relative}.cp-hue-thumb{pointer-events:none;background:#fff;border:1px solid #00000059;width:6px;height:16px;position:absolute;top:50%;transform:translate(-50%,-50%)}.cp-row{align-items:center;gap:8px;display:flex}.cp-preview{border:1px solid var(--border-strong);border-radius:var(--radius-sm);flex:none;width:28px;height:28px}.cp-hex{border-radius:var(--radius-sm);background:var(--surface-2);min-width:0;color:var(--text);text-transform:lowercase;border:none;flex:1;padding:6px 8px;font-size:13px}.cp-hex:focus{outline:1px solid var(--accent)}.cp-presets{grid-template-columns:repeat(5,1fr);gap:6px;display:grid}.cp-swatch{aspect-ratio:1;border:1px solid var(--border-strong);border-radius:var(--radius-sm);cursor:pointer;padding:0}.canvas-hud{z-index:20;border-radius:var(--radius-md);color:var(--text-muted);align-items:center;gap:10px;padding:6px 12px 6px 8px;font-size:12px;display:flex;position:fixed;bottom:16px;left:16px}.canvas-hud button{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text);cursor:pointer;padding:3px 9px;font-size:12px}.canvas-hud button:hover:not(:disabled){background:var(--surface)}.canvas-hud button:disabled{opacity:.4;cursor:default}.canvas-hud .hud-icon{justify-content:center;align-items:center;padding:4px 7px;display:inline-flex}.canvas-hud-hint{color:var(--text-subtle)}.clear-menu{z-index:20;position:fixed;bottom:16px;right:16px}.clear-trigger{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);width:34px;height:34px;box-shadow:var(--shadow);color:var(--text-muted);cursor:pointer;transition:background var(--ease), color var(--ease);justify-content:center;align-items:center;display:inline-flex}.clear-trigger:hover:not(:disabled){background:var(--surface-2);color:var(--danger)}.clear-trigger:disabled{opacity:.4;cursor:default}.clear-pop{border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--border);width:200px;box-shadow:var(--shadow);color:var(--text);flex-direction:column;gap:10px;padding:12px;font-size:13px;display:flex;position:absolute;bottom:calc(100% + 8px);right:0}.clear-pop-actions{justify-content:flex-end;gap:6px;display:flex}.clear-pop-actions button{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text);cursor:pointer;padding:6px 12px;font-size:13px}.clear-pop-actions button:hover{background:var(--surface)}.clear-pop-actions button.danger{background:var(--danger);color:var(--danger-fg);border-color:#0000}.clear-pop-actions button.danger:hover{background:var(--danger-hover)}