.svg-studio-heading{border-block:1px solid var(--border);color:var(--muted);font:12px/1.6 var(--font-mono);flex-wrap:wrap;justify-content:space-between;gap:8px;margin-bottom:24px;padding-block:14px;display:flex}.svg-studio-workbench{grid-template-columns:minmax(0,1fr) 240px;align-items:start;gap:32px;display:grid}.svg-studio-viewport{min-width:0;position:relative}.svg-studio-tabs{flex-wrap:wrap;align-items:center;gap:8px;padding-bottom:14px;display:flex}.svg-studio-tabs>span{color:var(--muted);font:11px var(--font-mono);margin-left:auto}.svg-studio-canvas{aspect-ratio:1;background:var(--surface);border:1px solid var(--border);touch-action:none;border-radius:4px;width:min(100%,460px);margin-inline:auto;display:block}.svg-studio-grid{fill:none;stroke:var(--border);stroke-width:1px}.svg-studio-origin{stroke:var(--muted)}.svg-studio-ghost{fill:none;stroke:var(--muted);stroke-width:1px;stroke-dasharray:5 7;opacity:.55;pointer-events:none}.svg-studio-nodes>g{cursor:grab;touch-action:none;outline:none}.svg-studio-nodes>g:active{cursor:grabbing}.svg-studio-hit{fill:#0000}.svg-studio-node{fill:var(--bg);stroke:var(--text);stroke-width:2px}.svg-studio-nodes>g:focus-visible .svg-studio-hit{fill:none;stroke:var(--accent);stroke-width:3px;stroke-dasharray:3 3}.svg-studio-nodes text{fill:var(--text);stroke:var(--surface);stroke-width:3px;paint-order:stroke;font:13px var(--font-mono);pointer-events:none}.svg-studio-transport{flex-wrap:wrap;align-items:center;gap:18px;margin-top:18px;display:flex}.svg-studio-blend{flex:1}.svg-studio-transport>output{width:4ch;font:14px var(--font-mono);text-align:right}.svg-studio-settings{grid-template-columns:repeat(3,minmax(0,1fr));gap:25px;display:grid}.svg-studio-settings fieldset{border:0;min-width:0;margin:0;padding:0}.svg-studio-settings legend{border-bottom:1px solid var(--border);width:100%;margin-bottom:14px;padding-bottom:12px;font-size:15px;font-weight:650}.svg-studio-settings .lab-field{margin-bottom:10px;position:relative}.svg-studio-settings .lab-field>output{color:var(--text);font-variant-numeric:tabular-nums;position:absolute;top:0;right:0}.svg-studio-settings .lab-field>input[type=range]{width:100%;padding-inline:0}.svg-studio-seed{align-items:end;gap:8px;display:flex}.svg-studio-seed .lab-field{flex:1;margin:0}.svg-studio-coordinates{grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;display:grid}.svg-studio-color-row{justify-content:space-between;align-items:center;min-height:44px;margin-bottom:10px;font-size:13px;display:flex}.svg-studio-color-row label{align-items:center;gap:6px;min-height:44px;display:inline-flex}.svg-studio-color-row input[type=color]{background:var(--bg);border:1px solid var(--border);cursor:pointer;border-radius:4px;width:68px;height:44px;padding:4px}.svg-studio-export{border-top:1px solid var(--border);margin-top:34px;padding-top:26px}.svg-studio-export-heading{flex-wrap:wrap;justify-content:space-between;align-items:start;gap:14px;display:flex}.svg-studio-export-heading h2{margin:0 0 8px;font-size:20px}.svg-studio-export-heading .lab-controls{margin-top:0}.svg-studio-code{resize:vertical;background:var(--surface);width:100%;min-height:160px;color:var(--text);border:1px solid var(--border);font:12px/1.8 var(--font-mono);overflow-wrap:anywhere;border-radius:4px;padding:16px;display:block}.svg-studio-feedback{min-height:24px}.svg-studio-play-actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 24px;margin-bottom:16px;display:flex}.svg-studio-play-actions .svg-studio-color-row{gap:12px;margin:0}.svg-studio-advanced{border-top:1px solid var(--border);margin-top:20px}.svg-studio-advanced>summary{cursor:pointer;min-height:48px;color:var(--muted);padding-block:14px}.svg-studio-advanced>summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.svg-studio .lab-button{min-width:44px;min-height:44px}@media (width<=800px){.svg-studio-workbench{grid-template-columns:1fr;gap:28px}.svg-studio-viewport{position:static}.svg-studio-settings{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}@media (width<=480px){.svg-studio-settings{grid-template-columns:1fr}.svg-studio-transport{gap:12px}.svg-studio-blend{flex:1 0 calc(100% - 56px);min-width:0}.svg-studio-transport>output{flex:0 0 44px;align-self:flex-end;width:44px;padding-bottom:12px}.svg-studio-tabs>span{flex-basis:100%;margin-left:0}.svg-studio-nodes text{font-size:21px}.svg-studio-hit{r:43px}.svg-studio-code{padding:12px;font-size:11px}}