:root{color:#242722;font-synthesis:none;text-rendering:optimizelegibility;--ink:#242722;--muted:#747a73;--muted-strong:#5f665f;--line:#d9ddd7;--line-strong:#c3c9c2;--panel:#fcfdfb;--panel-soft:#f4f6f3;--pasteboard:#e7e9e6;--accent:#08745a;--accent-hover:#09634e;--selection:#276ef1;--danger:#b42318;--warning:#966100;--shadow:0 16px 46px #1f252029;background:#e7e9e6;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{width:100%;height:100%}body{background:var(--pasteboard);margin:0;overflow:hidden}button,input,select,textarea{font:inherit}button{color:inherit}.app-shell{background:var(--pasteboard);grid-template-rows:54px minmax(0,1fr) 28px;width:100%;height:100dvh;display:grid}.topbar{z-index:40;border-bottom:1px solid var(--line);background:#fcfdfbfa;align-items:center;gap:9px;min-width:0;padding:0 11px;display:flex;position:relative;box-shadow:0 1px #fffc}.brand{align-items:center;gap:9px;min-width:142px;display:flex}.brand-mark{background:var(--accent);color:#fff;border-radius:9px;flex:none;place-items:center;width:31px;height:31px;display:grid;box-shadow:inset 0 0 0 1px #ffffff26,0 3px 9px #08745a2b}.brand>div{min-width:0;line-height:1.05;display:grid}.brand strong{letter-spacing:-.015em;font-size:13px;font-weight:760}.brand span:not(.brand-mark){color:var(--muted);margin-top:3px;font-size:9px}.topbar-divider{background:var(--line);flex:none;width:1px;height:25px;margin:0 2px}.project-name-input{width:min(270px,24vw);min-width:130px;height:32px;color:var(--ink);background:0 0;border:1px solid #0000;border-radius:7px;padding:6px 9px;font-size:12px;font-weight:620}.project-name-input:hover{border-color:var(--line);background:#fff}.project-name-input:focus{border-color:var(--selection);background:#fff;outline:2px solid #276ef124}.topbar-spacer{flex:auto;min-width:8px}.tool-group{align-items:center;gap:5px;display:inline-flex}.button,.icon-button,.inspector-button{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:7px;justify-content:center;align-items:center;gap:6px;min-height:32px;transition:background .12s,border-color .12s,color .12s,box-shadow .12s;display:inline-flex}.button{white-space:nowrap;padding:6px 10px;font-size:11px;font-weight:650}.icon-button{width:32px;height:32px;padding:0}.button:hover:not(:disabled),.icon-button:hover:not(:disabled),.inspector-button:hover:not(:disabled){background:var(--panel-soft);border-color:var(--line-strong)}.button.primary,.inspector-button.primary{border-color:var(--accent);background:var(--accent);color:#fff}.button.primary:hover:not(:disabled),.inspector-button.primary:hover:not(:disabled){border-color:var(--accent-hover);background:var(--accent-hover)}.button.secondary{background:#fff}button:disabled{opacity:.36;cursor:default}.file-menu{position:relative}.file-menu>summary{list-style:none}.file-menu>summary::-webkit-details-marker{display:none}.popover-menu{z-index:60;border:1px solid var(--line-strong);background:var(--panel);border-radius:10px;width:278px;padding:6px;position:absolute;top:calc(100% + 7px);right:0;box-shadow:0 18px 46px #22282333}.popover-menu button{text-align:left;cursor:pointer;background:0 0;border:0;border-radius:7px;grid-template-columns:20px minmax(0,1fr);align-items:center;gap:8px;width:100%;min-height:46px;padding:7px 9px;display:grid}.popover-menu button:hover{background:var(--panel-soft)}.popover-menu button>span{gap:2px;display:grid}.popover-menu strong{font-size:11px}.popover-menu small{color:var(--muted);font-size:9px;line-height:1.35}.menu-separator{background:var(--line);height:1px;margin:5px 4px}.workspace-grid{grid-template-columns:282px minmax(0,1fr) 320px;min-width:0;min-height:0;display:grid}.panel-shell,.right-panel{background:var(--panel);grid-template-rows:auto minmax(0,1fr);min-width:0;min-height:0;display:grid;overflow:hidden}.layers-panel{border-right:1px solid var(--line)}.right-panel{border-left:1px solid var(--line)}.panel-heading{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:10px;min-height:49px;padding:9px 12px;display:flex}.panel-heading>div{gap:2px;min-width:0;display:grid}.panel-heading strong{letter-spacing:.07em;text-transform:uppercase;font-size:10px;font-weight:780}.panel-heading span{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:9px;overflow:hidden}.layer-tree,.inspector-scroll{overscroll-behavior:contain;min-height:0;overflow:auto}.layer-tree{padding-bottom:12px}.tree-group{min-width:0}.tree-group+.tree-group{border-top:1px solid #eef0ed}.item-group{border-top:0!important}.tree-row{-webkit-user-select:none;user-select:none;cursor:default;align-items:center;gap:3px;min-width:0;min-height:39px;padding:4px 6px;display:flex}.tree-row:hover{background:#f4f6f3}.tree-row.selected{box-shadow:inset 2px 0 0 var(--selection);background:#eaf1ff}.layer-row{min-height:43px}.item-row{min-height:38px}.element-row{min-height:33px;padding-left:6px}.icon-button.subtle{background:0 0;border-color:#0000;border-radius:5px;flex:none;width:25px;height:25px}.icon-button.subtle:hover:not(:disabled){border-color:var(--line);background:#fff}.icon-button.danger{color:var(--muted)}.icon-button.danger:hover:not(:disabled){color:var(--danger);background:#fff0ee;border-color:#edc5c0}.object-icon{color:var(--muted-strong);flex:none}.tree-label{flex:auto;gap:2px;min-width:0;padding:0 4px;display:grid}.tree-label strong{text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:650;overflow:hidden}.tree-label span{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:8.5px;overflow:hidden}.tree-actions{opacity:0;flex:none;align-items:center;gap:0;display:flex}.tree-row:hover .tree-actions,.tree-row.selected .tree-actions{opacity:1}.tree-indent{flex:0 0 11px;width:11px}.tree-indent.deep{flex-basis:28px;width:28px}.tree-disclosure-spacer{flex:0 0 25px;width:25px}.element-swatch{border:1px solid #00000024;border-radius:3px;flex:none;width:12px;height:12px;box-shadow:inset 0 0 0 1px #ffffff47}.tree-children{background:#fafbf9;border-top:1px solid #f0f2ef}.element-tree{background:#f7f9f7;border-top:1px solid #eef1ed}.tree-empty{color:var(--muted);margin:0;padding:11px 16px 12px 38px;font-size:9px;line-height:1.45}.empty-state.compact{border:1px dashed var(--line-strong);color:var(--muted);text-align:center;border-radius:10px;justify-items:center;gap:5px;margin:16px;padding:18px;display:grid}.empty-state.compact strong{color:var(--ink);font-size:11px}.empty-state.compact span{font-size:9px;line-height:1.45}.center-workspace{background:var(--pasteboard);min-width:0;min-height:0;position:relative;overflow:hidden}.studio-canvas{touch-action:none;background:radial-gradient(circle at 1px 1px, #5b635c1c 1px, transparent 0) 0 0 / 18px 18px, var(--pasteboard);position:absolute;inset:0;overflow:hidden}.studio-canvas.tool-hand,.studio-canvas.space-pan{cursor:grab}.studio-canvas.panning{cursor:grabbing}.studio-svg{touch-action:none;width:100%;height:100%;display:block}.studio-svg polygon,.studio-svg image{cursor:default}.tool-select .studio-svg polygon,.tool-select .studio-svg image{cursor:move}.tool-vertex .studio-svg polygon{cursor:crosshair}.tool-hand .studio-svg polygon,.tool-hand .studio-svg image,.space-pan .studio-svg polygon,.space-pan .studio-svg image{cursor:grab}.artboard-background{shape-rendering:crispedges}.selection-overlay{pointer-events:none}.selection-outline{stroke:var(--selection);stroke-width:1.5px;stroke-dasharray:none}.transform-handle,.rotate-handle,.node-handle{pointer-events:all;fill:#fff;stroke:var(--selection);stroke-width:1.5px}.transform-handle{cursor:nwse-resize}.rotate-handle{cursor:grab}.rotation-stem{stroke:var(--selection);stroke-width:1.5px}.node-handle{cursor:grab}.node-handle.selected{fill:var(--selection)}.canvas-toolbar{z-index:25;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fcfdfbf5;border:1px solid #bec5befa;border-radius:11px;align-items:center;gap:4px;min-height:42px;padding:4px;display:flex;position:absolute;bottom:15px;left:50%;transform:translate(-50%);box-shadow:0 10px 30px #262c272b}.canvas-toolbar-group{align-items:center;gap:2px;display:flex}.canvas-toolbar .icon-button{background:0 0;border-color:#0000;width:32px;height:32px}.canvas-toolbar .icon-button:hover{background:var(--panel-soft);border-color:#0000}.canvas-toolbar .tool-button.active{background:var(--accent);color:#fff}.canvas-toolbar-divider{background:var(--line);width:1px;height:25px;margin:0 3px}.zoom-readout{min-width:48px;color:var(--muted-strong);text-align:center;font-variant-numeric:tabular-nums;font-size:9px}.canvas-hint{z-index:8;max-width:calc(100% - 36px);color:var(--muted);white-space:nowrap;pointer-events:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#fafbf9d6;border:1px solid #c4c9c3cc;border-radius:7px;padding:5px 9px;font-size:8.5px;position:absolute;top:12px;left:50%;transform:translate(-50%)}.inspector-scroll{padding-bottom:18px}.inspector-section{border-bottom:1px solid var(--line);gap:10px;padding:14px 15px 16px;display:grid}.inspector-section h2{color:var(--muted);letter-spacing:.09em;text-transform:uppercase;margin:0 0 2px;font-size:9px;font-weight:780}.inspector-field{min-width:0;color:var(--muted-strong);gap:5px;font-size:10px;display:grid}.inspector-field>span{justify-content:space-between;align-items:center;gap:8px;display:flex}.inspector-field output{color:var(--muted);font-variant-numeric:tabular-nums}.inspector-field input,.inspector-field select{border:1px solid var(--line);width:100%;min-height:31px;color:var(--ink);background:#fff;border-radius:6px;padding:5px 7px;font-size:10px}.inspector-field input:focus,.inspector-field select:focus{border-color:var(--selection);outline:2px solid #276ef124}.inspector-field input[type=range]{min-height:18px;accent-color:var(--accent);padding:0}.field-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.input-with-suffix{position:relative}.input-with-suffix small{color:var(--muted);pointer-events:none;font-size:9px;position:absolute;top:8px;right:8px}.range-field>span{justify-content:space-between;display:flex}.color-field>div{grid-template-columns:34px minmax(0,1fr);gap:7px;display:grid}.color-field input[type=color]{cursor:pointer;height:31px;padding:2px}.toggle-field{min-height:28px;color:var(--muted-strong);justify-content:space-between;align-items:center;gap:12px;font-size:10px;display:flex}.toggle-field input{width:16px;height:16px;accent-color:var(--accent);margin:0}.inspector-button{justify-content:flex-start;width:100%;min-height:32px;padding:6px 9px;font-size:10px;font-weight:620}.inspector-button.active{border-color:var(--selection);color:var(--selection);background:#eef4ff}.inspector-button.attention{box-shadow:0 0 0 3px #08745a1c}.inspector-button.danger{color:var(--danger)}.inspector-button.danger:hover:not(:disabled){background:#fff0ee;border-color:#efc6c0}.seed-row{grid-template-columns:minmax(0,1fr) 32px;align-items:end;gap:7px;display:grid}.seed-row .icon-button{width:32px;height:31px}.metric-row{min-height:24px;color:var(--muted);justify-content:space-between;align-items:center;font-size:10px;display:flex}.metric-row strong{color:var(--ink);font-size:10px;font-weight:650}.field-description{color:var(--muted);margin:-2px 0 0;font-size:9px;line-height:1.5}.warning-text{color:var(--warning)}.inspector-note{color:#5f6962;background:#f2f7f4;border:1px solid #dbe5df;border-radius:8px;margin:13px 14px;padding:10px;font-size:9px;line-height:1.5}.inspector-note.compact{margin:0}.selection-breadcrumb{color:var(--muted);flex-wrap:wrap;gap:4px;font-size:9px;display:flex}.vertex-fields{gap:9px;padding-top:4px;display:grid}.panel-empty{color:var(--muted);margin:0;padding:15px;font-size:10px;line-height:1.55}.statusbar{z-index:30;border-top:1px solid var(--line);background:var(--panel);min-width:0;color:var(--muted);align-items:center;gap:17px;padding:0 10px;font-size:9px;display:flex;position:relative}.statusbar span:first-child{color:var(--ink);margin-right:auto}@media (width<=1180px){.workspace-grid{grid-template-columns:245px minmax(0,1fr) 286px}.project-name-input{width:190px}.button{padding-inline:8px}}@media (width<=930px){.workspace-grid{grid-template-columns:220px minmax(0,1fr)}.right-panel,.brand span:not(.brand-mark){display:none}.brand{min-width:94px}.project-name-input{width:150px}.topbar .button.secondary,.statusbar span:nth-last-child(-n+2){display:none}}.generator-adder{border:1px solid var(--line);background:#fff;border-radius:8px;align-items:stretch;height:34px;display:inline-flex;overflow:hidden}.generator-adder select{border:0;border-right:1px solid var(--line);width:132px;min-width:0;color:var(--ink);background:#fff;padding:5px 24px 5px 8px;font-size:10px}.generator-adder select:focus{outline-offset:-2px;outline:2px solid #276ef126}.generator-adder .button{border:0;border-radius:0;min-height:32px}.empty-layer-action{border:1px dashed var(--line-strong);width:calc(100% - 24px);min-height:31px;color:var(--muted);cursor:pointer;background:0 0;border-radius:7px;justify-content:center;align-items:center;gap:6px;margin:7px 12px 10px;font-size:9px;display:flex}.empty-layer-action:hover{border-color:var(--accent);color:var(--accent);background:#f1f7f4}.field-description svg{vertical-align:-2px;margin-right:3px}.toggle-field>span{gap:3px;min-width:0;display:grid}@media (width<=1180px){.generator-adder select{width:108px}.button{padding-inline:8px}}@media (width<=640px){.app-shell{grid-template-rows:92px minmax(0,1fr) 28px}.topbar{flex-wrap:wrap;align-content:center;gap:5px;padding:5px 6px}.brand{order:1;width:31px;min-width:31px}.brand>div,.topbar-divider,.topbar-spacer{display:none}.project-name-input{flex:92px;order:2;width:auto;min-width:0}.topbar>.tool-group[aria-label=History]{order:3}.file-menu{order:4}.topbar>.tool-group:not([aria-label]){flex:1 0 100%;order:5;justify-content:center}.topbar .button.secondary{display:inline-flex}.generator-adder select{width:98px}.workspace-grid{grid-template-columns:minmax(160px,44vw) minmax(0,1fr)}.statusbar{gap:8px}}@media (width<=359px){.topbar>.tool-group:not([aria-label]) .button{width:32px;padding-inline:0}.topbar .mobile-button-label{display:none}}.vector-children{background:#f7f9f7;border-top:1px solid #eef1ed}.vector-row{min-height:33px;padding-left:6px}.shape-indent{flex:0 0 28px;width:28px}.tree-chevron-placeholder{flex:0 0 25px;width:25px}.fill-dot{border:1px solid #00000024;border-radius:3px;flex:none;width:12px;height:12px;box-shadow:inset 0 0 0 1px #ffffff47}