.text-copy-menu{position:fixed;z-index:1000;min-width:160px;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:4px 0;box-shadow:0 4px 12px #0006;font-size:13px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.text-copy-menu-item{display:block;width:100%;padding:6px 14px;color:var(--text);background:none;border:none;text-align:left;cursor:pointer;font-size:inherit;font-family:inherit;line-height:1.4;white-space:nowrap}.text-copy-menu-item:hover{background:var(--panel-2);color:var(--accent)}.text-copy-menu-item:disabled{color:var(--muted);cursor:default}.text-copy-menu-sep{height:1px;margin:4px 0;background:var(--line)}.text-copy-menu-preview{max-width:220px;overflow:hidden;text-overflow:ellipsis}.text-copy-toast{position:fixed;z-index:1001;padding:4px 12px;background:var(--accent);color:#000;border-radius:4px;font-size:12px;max-width:220px;box-shadow:0 4px 12px #00000040;pointer-events:none;opacity:0;white-space:nowrap;transition:opacity .15s,transform .15s;transform:translateY(-4px)}.text-copy-toast[data-visible=true]{opacity:1;transform:translateY(0)}@font-face{font-family:Inter;src:url(/boundsvg/playground/react/assets/Inter-Variable-DEKF4JyX.ttf) format("truetype");font-weight:400 700;font-style:normal;font-display:swap}:root{--bg: #1a1a1a;--panel: #252526;--panel-2: #1e1e1e;--line: #3c3c3c;--text: #d4d4d4;--muted: #858585;--accent: #22d3ee;--accent-2: #f97316;--error: #fca5a5}@font-face{font-family:JetBrains Mono;src:url(/boundsvg/playground/react/assets/JetBrainsMono-Regular-CA-Os4ii.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--muted)}html{width:100%;height:100%;background:var(--bg, #1a1a1a)}body{width:100%;height:100%}body{font-family:Inter,system-ui,Segoe UI,sans-serif;background:radial-gradient(circle at 0% 0%,#2a2a2a 0%,var(--bg) 60%);color:var(--text)}.header{padding:10px 24px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#2d2d2d,#252526);display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center}.brand-lockup{display:flex;align-items:center;gap:8px}.brand-logo{width:auto;height:28px;opacity:.62;flex-shrink:0}.brand{margin:0;font-size:16px;font-weight:700;letter-spacing:.01em;line-height:1;flex-shrink:0}.brand-sub{font-size:12px;color:var(--muted);flex-shrink:0}.github-link{display:flex;align-items:center;color:var(--muted);transition:color .15s;flex-shrink:0}.github-link:hover{color:var(--text)}.status-strip{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}.status-dot{width:8px;height:8px;border-radius:50%;background:#64748b;flex-shrink:0}.status-dot.ready{background:#34d399}.status-dot.loading,.status-dot.idle{background:#fbbf24;animation:pulse 1.2s infinite}.status-dot.error{background:#ef4444}@keyframes pulse{50%{opacity:.4}}.toolbar{display:flex;align-items:center;gap:10px;padding:8px 24px;border-bottom:1px solid var(--line);background:var(--panel-2);flex-wrap:wrap}.toolbar label{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);cursor:pointer;-webkit-user-select:none;user-select:none}.toolbar input[type=checkbox]{accent-color:var(--accent)}.bbox-overlay-menu{position:relative;font-size:12px;color:var(--muted)}.bbox-overlay-menu summary{min-width:136px;list-style:none;background:#1e1e1e;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:3px 24px 3px 6px;cursor:pointer;-webkit-user-select:none;user-select:none}.bbox-overlay-menu summary:after{position:absolute;right:8px;content:"▾";color:var(--muted)}.bbox-overlay-menu[open] summary{border-color:var(--accent)}.bbox-overlay-options{position:absolute;z-index:20;top:calc(100% + 4px);left:0;display:grid;gap:6px;min-width:160px;min-inline-size:0;margin:0;padding:8px;background:#1e1e1e;border:1px solid var(--line);border-radius:6px;box-shadow:0 12px 28px #0000004d}.bbox-overlay-options label{justify-content:flex-start;gap:6px;white-space:nowrap}.toolbar input[type=text]{background:#1e1e1e;color:var(--text);border:1px solid var(--line);border-radius:4px;padding:3px 6px;font-size:12px}.toolbar select{background:#1e1e1e;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:3px 6px;font-size:12px;cursor:pointer}.code-col{border-left:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}.code-tabs{display:flex;border-bottom:1px solid var(--line);background:#1e1e1e;flex-shrink:0}.code-tab{padding:8px 16px;border:none;border-bottom:2px solid transparent;background:none;color:var(--muted);font-size:12px;cursor:pointer;transition:.15s}.code-tab:hover{color:var(--text)}.code-tab.active{color:var(--accent);border-bottom-color:var(--accent)}.code-tab-divider{width:1px;align-self:stretch;margin:4px 2px;background:var(--line, #444)}.code-block{flex:1;background:var(--panel);padding:16px;overflow:auto;font-family:JetBrains Mono,Fira Code,Cascadia Code,Consolas,monospace;font-size:12px;line-height:1.6;color:#c9d1d9;white-space:pre;-moz-tab-size:2;tab-size:2}.code-block .token.comment,.code-block .token.prolog,.code-block .token.doctype,.code-block .token.cdata{color:#6b7fa0}.code-block .token.punctuation{color:#8b9fc6}.code-block .token.tag{color:#7dd3fc}.code-block .token.tag .token.punctuation{color:#5b8fb8}.code-block .token.attr-name{color:#a5b4fc}.code-block .token.attr-value,.code-block .token.string{color:#86efac}.code-block .token.number,.code-block .token.boolean{color:#fbbf24}.code-block .token.keyword,.code-block .token.operator{color:#c084fc}.code-block .token.function,.code-block .token.class-name{color:#67e8f9}.code-block .token.builtin{color:#f9a8d4}.code-block .token.script{color:#dbeafe}.code-line{padding:0 2px;margin:0 -2px;border-radius:2px;transition:background .1s}.code-line-highlight{background:#4285f41f}#root{width:100%;height:100%}.screen-center{min-height:100vh;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:14px}.example-shell{height:100%;display:flex;flex-direction:column;overflow:hidden}.example-shell select{color-scheme:dark}.example-header{padding:10px 24px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#2d2d2d,#252526);display:flex;flex-direction:column;gap:10px;align-items:stretch}.header-top-row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand-copy{min-width:0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.brand-copy .brand-sub{flex-shrink:1}.header-meta{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-shrink:0}.route-nav-grouped{display:flex;flex-direction:column;gap:8px}.route-nav-row{display:flex;flex-wrap:wrap;align-items:center}.route-nav-categories{gap:6px}.route-nav-categories .route-link{font-weight:600}.route-nav-pages{gap:2px;padding-left:2px;border-bottom:1px solid var(--line)}.route-nav-pages .route-link{font-size:12px;background:none;border:none;border-radius:0;padding:4px 10px 7px;border-bottom:2px solid transparent;margin-bottom:-1px}.route-nav-pages .route-link:hover{background:none;color:#d4d4d4;border-bottom-color:#3b82f6}.route-nav-pages .route-link.active{background:none;color:var(--accent);font-weight:600;border-bottom-color:var(--accent)}.route-nav{display:flex;gap:8px;flex-wrap:wrap;width:100%}.route-link{text-decoration:none;color:var(--muted);border:1px solid var(--line);background:#2d2d2d;border-radius:999px;padding:7px 12px;font-size:12px;transition:.2s}.route-link:hover{border-color:#3b82f6;color:#d4d4d4}.route-link.active{border-color:var(--accent);color:#1a1a1a;font-weight:600;background:linear-gradient(90deg,#67e8f9,#22d3ee)}.example-main{flex:1;min-height:0;display:flex;flex-direction:column;padding:14px 16px 16px;overflow:hidden}.split-layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(280px,340px) 1fr;gap:12px}.playground-layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(280px,340px) minmax(280px,340px) 1fr;grid-template-rows:1fr;gap:12px}.panel{border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);min-height:0}.controls-panel{padding:14px;overflow:auto;display:flex;flex-direction:column;gap:10px}.section{border-top:1px solid var(--line)}.section:first-child{border-top:none}.section-header{display:flex;justify-content:space-between;align-items:center;width:100%;padding:10px 0;border:none;background:none;color:#d4d4d4;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;cursor:pointer}.section-header:hover{color:var(--accent)}.section-chevron{font-size:14px;color:var(--muted)}.section-body{display:flex;flex-direction:column;gap:10px;padding-bottom:4px}.compact-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.control-group{display:flex;flex-direction:column;gap:6px}.control-head{display:flex;justify-content:space-between;gap:8px;align-items:baseline}.control-head label{color:#ccc;font-size:12px;font-weight:600}.control-head span{color:var(--accent);font-size:11px;font-variant-numeric:tabular-nums}.controls-panel input[type=text],.controls-panel textarea,.controls-panel select{width:100%}.number-group{display:flex;flex-direction:column;gap:4px}.number-group>label{color:#ccc;font-size:12px;font-weight:600}.number-input-wrap{display:flex;align-items:center;gap:4px}.number-input-wrap input[type=number]{width:100%;min-width:0;border:1px solid var(--line);border-radius:8px;background:#1e1e1e;color:var(--text);font-size:13px;padding:6px 8px;font-variant-numeric:tabular-nums}.number-input-wrap input[type=number]:focus{outline:none;border-color:#38bdf8;box-shadow:0 0 0 1px #38bdf859}.number-unit{color:var(--muted);font-size:11px;flex-shrink:0}.controls-panel input[type=color]{width:40px;min-width:40px;height:26px;border:1px solid var(--line);border-radius:6px;background:transparent;cursor:pointer;padding:1px}.color-group{display:flex;align-items:center;gap:8px}.color-group label{color:#ccc;font-size:12px;font-weight:600}.color-group span{color:var(--accent);font-size:11px;font-variant-numeric:tabular-nums;margin-left:auto}@media(max-width:820px){.header-top-row{flex-wrap:wrap;align-items:flex-start}.header-meta{width:100%;justify-content:flex-start}}.controls-panel textarea,.controls-panel select,.controls-panel input[type=text]{border:1px solid var(--line);border-radius:8px;background:#1e1e1e;color:var(--text);font-size:13px;padding:8px 10px}.bbox-overlay-menu{position:relative}.bbox-overlay-menu summary{width:100%;list-style:none;border:1px solid var(--line);border-radius:8px;background:#1e1e1e;color:var(--text);font-size:13px;padding:8px 30px 8px 10px;cursor:pointer;-webkit-user-select:none;user-select:none}.bbox-overlay-menu summary::-webkit-details-marker{display:none}.bbox-overlay-menu summary:after{position:absolute;right:10px;content:"▾";color:var(--muted)}.bbox-overlay-menu[open] summary{border-color:#38bdf8;box-shadow:0 0 0 1px #38bdf859}.bbox-overlay-options{position:absolute;z-index:20;top:calc(100% + 4px);left:0;display:grid;gap:7px;min-width:180px;min-inline-size:0;margin:0;padding:9px;border:1px solid var(--line);border-radius:8px;background:#1e1e1e;box-shadow:0 14px 30px #00000052}.bbox-overlay-options label{display:flex;align-items:center;gap:7px;color:var(--text);font-size:13px;white-space:nowrap}.bbox-overlay-options input[type=checkbox]{accent-color:var(--accent-2)}.controls-panel textarea{resize:vertical;min-height:74px}.controls-panel textarea:focus,.controls-panel select:focus,.controls-panel input[type=text]:focus{outline:none;border-color:#38bdf8;box-shadow:0 0 0 1px #38bdf859}.check-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text)}.check-row input[type=checkbox]{accent-color:var(--accent-2)}.nested-options{display:flex;flex-direction:column;gap:6px;padding-left:22px}.ffs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}.ffs-chip{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:4px 8px;border:1px solid var(--line);border-radius:6px;background:var(--bg-2);color:var(--text-muted);font-size:12px;cursor:pointer;transition:border-color .15s,background .15s}.ffs-chip code{font-size:11px;font-weight:600}.ffs-chip-state{font-size:10px;font-weight:700;min-width:22px;text-align:center}.ffs-chip--on{border-color:#38bdf8;background:#38bdf81f;color:#38bdf8}.ffs-chip--off{border-color:#f87171;background:#f871711a;color:#f87171}.ffs-chip--default{opacity:.55}.ffs-chip--unsupported{opacity:.3;cursor:not-allowed;text-decoration:line-through}.ffs-chip--default:hover,.ffs-chip:hover:not(:disabled){opacity:1;border-color:var(--accent)}.ffs-custom-row{display:flex;gap:4px}.ffs-custom-row input[type=text]{flex:1;padding:4px 8px;font-size:12px;font-family:monospace;letter-spacing:1px;border:1px solid var(--line);border-radius:6px;background:var(--bg-2);color:var(--text)}.ffs-add-btn{padding:4px 10px;border:1px solid var(--line);border-radius:6px;background:var(--bg-2);color:var(--text);font-size:14px;font-weight:700;cursor:pointer}.ffs-add-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.ffs-add-btn:disabled{opacity:.3;cursor:default}.fvs-axes{display:flex;flex-direction:column;gap:4px}.fvs-axis{display:flex;align-items:center;gap:6px;min-height:28px}.fvs-tag{padding:3px 8px;border:1px solid var(--line);border-radius:6px;background:var(--bg-2);color:var(--text-muted);font-size:11px;font-weight:600;cursor:pointer;opacity:.55;min-width:44px;text-align:center;transition:border-color .15s,opacity .15s}.fvs-tag:hover{opacity:1;border-color:var(--accent)}.fvs-tag--active{border-color:#38bdf8;background:#38bdf81f;color:#38bdf8;opacity:1}.fvs-slider{flex:1;height:4px;accent-color:#38bdf8;cursor:pointer}.fvs-value{width:56px;padding:3px 6px;border:1px solid var(--line);border-radius:6px;background:var(--bg-2);color:var(--text);font-size:12px;font-family:monospace;text-align:right}.fvs-value--wide{width:80px;flex:1}.preview-panel{display:flex;flex-direction:column;min-height:0;overflow:hidden}.preview-stage-wrap{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}.preview-stage-wrap.is-pending .preview-stage{opacity:.5;transition:opacity .15s}.rendering-overlay{position:absolute;top:12px;right:16px;z-index:5;pointer-events:none}.rendering-label{font-size:11px;font-weight:600;color:var(--accent);background:#060816cc;padding:4px 10px;border-radius:999px;border:1px solid var(--line);animation:pulse 1.2s infinite}.preview-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:22px;overflow:auto;background:linear-gradient(45deg,rgba(255,255,255,.08) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.08) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.08) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.08) 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;background-color:#181818}.rendered-content{max-width:100%}.rendered-content svg{display:block;max-width:100%;height:auto;box-shadow:0 10px 32px #00000073}.animation-layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(260px,310px) repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1fr) auto;gap:12px}.animation-controls{min-width:0}.animation-note{margin:0;color:var(--muted);font-size:12px;line-height:1.55}.animation-action-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.animation-action{min-height:34px;padding:7px 10px;border:1px solid var(--line);border-radius:7px;background:#2d2d2d;color:var(--text);font-size:11px;font-weight:650;cursor:pointer}.animation-action:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.animation-action:disabled{cursor:default;opacity:.42}.animation-time-heading,.animation-time-scale{display:flex;align-items:center;justify-content:space-between;gap:8px}.animation-time-heading label{color:#ccc;font-size:12px;font-weight:650}.animation-time-heading output{color:var(--accent);font-size:12px;font-variant-numeric:tabular-nums}.animation-time-slider{width:100%;accent-color:var(--accent-2)}.animation-time-scale{margin-top:-6px;color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums}.animation-motion-note{margin:auto 0 0;padding:10px 12px;border:1px solid rgba(34,211,238,.28);border-radius:8px;background:#22d3ee14;color:#a5f3fc;font-size:11px;line-height:1.5}.animation-motion-note.is-reduced{border-color:#fbbf2452;background:#fbbf2414;color:#fde68a}.animation-metrics{display:grid;gap:6px;margin:0}.animation-metrics>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:5px;border-bottom:1px solid rgba(255,255,255,.07)}.animation-metrics dt{color:var(--muted);font-size:10px}.animation-metrics dd{margin:0;color:#e2e8f0;font-size:10px;font-variant-numeric:tabular-nums}.animation-metrics dd.is-stable{color:#86efac;font-weight:750}.animation-metrics dd.is-changed{color:#fca5a5;font-weight:750}.animation-metrics dd.is-unavailable{color:#fde68a;font-weight:750}.animation-export-actions{grid-column:2 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--border, rgb(255 255 255 / 12%));border-radius:8px}.animation-export-actions button{font:inherit;font-size:12px;padding:4px 10px;border-radius:4px;border:1px solid var(--border, rgba(255, 255, 255, .2));background:transparent;color:inherit;cursor:pointer}.animation-export-actions span{font-size:11px;opacity:.6}.animation-preview-header{min-height:54px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 14px;border-bottom:1px solid var(--line)}.animation-preview-header>div{min-width:0;display:flex;flex-direction:column;gap:3px}.animation-preview-header strong{font-size:13px}.animation-preview-header span{color:var(--muted);font-size:10px}.animation-preview-header .animation-mode-badge{flex-shrink:0;padding:3px 7px;border:1px solid rgba(34,211,238,.35);border-radius:999px;color:var(--accent);font-size:9px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}.animation-preview-stage{padding:14px}.animation-preview-stage .rendered-content,.animation-preview-stage svg{width:100%}.animation-preview-stage.is-pad,.animation-preview-stage.is-crop{aspect-ratio:3 / 2;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#050b14}.animation-preview-stage.is-pad .animation-static-render{width:100%}.animation-preview-stage.is-crop .animation-static-render{flex:0 0 120%;width:120%}.animation-static-render{position:relative;width:100%}.animation-unit-debug-overlay{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:auto;pointer-events:none;filter:none}.animation-unit-debug-overlay rect{fill:#facc150f;stroke:#facc15;stroke-width:1.25;vector-effect:non-scaling-stroke}.animation-unit-debug-overlay text{fill:#fef08a;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:7px;paint-order:stroke;stroke:#111827;stroke-width:2px}@media(max-width:1280px){.animation-layout{grid-template-columns:minmax(250px,300px) minmax(0,1fr);overflow:auto}.animation-preview-panel:last-child{grid-column:2}}@media(max-width:820px){.animation-layout{grid-template-columns:1fr}.animation-preview-panel:last-child{grid-column:1}.animation-controls{max-height:none}.animation-preview-panel{min-height:360px}}.preview-image{display:block;max-width:100%;height:auto;box-shadow:0 10px 32px #00000073}.placeholder-text{color:var(--muted);font-size:13px}.error-text{color:var(--error);font-size:13px;margin:0}.api-status-label{margin:4px 0 0;font-size:12px;color:var(--muted)}.api-status-label code{color:var(--accent)}.api-status-bar{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}.api-copy-button{background:#2d2d2d;color:var(--text);border:1px solid var(--line);border-radius:4px;padding:3px 10px;font-size:12px;cursor:pointer}.api-copy-button:hover{background:#3d3d3d}.api-copy-status{font-size:12px;color:var(--accent)}.stack-list{display:flex;flex-direction:column;gap:8px}.template-group{display:flex;flex-direction:column;gap:6px}.template-group+.template-group{margin-top:10px}.template-group-heading{margin:0;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.template-button{border:1px solid var(--line);background:#2d2d2d;color:var(--text);border-radius:8px;padding:7px 8px;text-align:left;display:flex;flex-direction:column;gap:2px;cursor:pointer}.template-button strong{font-size:12px}.template-button span{color:var(--muted);font-size:11px;line-height:1.4}.template-button:hover{border-color:#3b82f6}.template-button.active{border-color:var(--accent);background:linear-gradient(180deg,#333,#2d2d2d)}.code-block{margin:0;border:1px solid var(--line);border-radius:10px;background:#1e1e1e;color:#ccc;font-size:12px;line-height:1.45;padding:10px;overflow:auto;white-space:pre-wrap}.status-table{display:flex;flex-direction:column;gap:4px}.status-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:3px 0;border-bottom:1px solid var(--line);font-size:12px}.status-label{color:#ccc;font-weight:600}.status-value{color:var(--accent);font-size:11px;font-variant-numeric:tabular-nums}.export-button{width:100%;padding:7px 14px;margin-top:4px;background:#2d2d2d;color:var(--text);border:1px solid var(--line);border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s}.export-button:hover:not(:disabled){background:#3d3d3d;border-color:var(--accent);color:var(--accent)}.export-button:disabled{opacity:.4;cursor:default}.editor-action-row .export-button{background:#22d3ee1a;border-color:#22d3ee73;color:var(--accent)}.editor-action-row .export-button:hover:not(:disabled){background:#22d3ee2e;border-color:var(--accent)}.preview-panel.has-code-area{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) minmax(0,0fr);transition:grid-template-rows .35s ease}.preview-panel.has-code-area.show-code{grid-template-rows:auto minmax(0,0fr) minmax(0,1fr)}.preview-panel.has-code-area.layout-panel{grid-template-rows:auto minmax(0,1fr) minmax(0,1fr)}.preview-header{display:flex;align-items:center;border-bottom:1px solid var(--line);padding:0 14px;gap:12px;flex-shrink:0}.preview-header-meta{display:flex;align-items:baseline;gap:10px;flex:1;min-width:0}.preview-header-meta h3{margin:0;font-size:13px;flex-shrink:0}.preview-header-meta span{color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-view-tabs{display:flex;gap:2px;flex-shrink:0}.preview-view-tab{padding:8px 10px;border:none;background:none;color:var(--muted);font-size:11px;font-weight:600;cursor:pointer;border-bottom:2px solid transparent;transition:color .15s}.preview-view-tab:hover{color:var(--text)}.preview-view-tab.active{color:var(--accent);border-bottom-color:var(--accent)}.preview-body{display:flex;flex-direction:column;overflow:auto;min-height:0}.code-area{display:flex;flex-direction:column;overflow:hidden;min-height:0;background:#1e1e1e}.has-code-area .preview-body,.has-code-area .preview-stage-wrap{overflow:hidden}.has-code-area .preview-stage{overflow:hidden;padding:12px;height:100%}.has-code-area .rendered-content{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.has-code-area .rendered-content svg{max-height:100%;width:auto;height:auto}.has-code-area .preview-image{max-height:100%;width:auto;height:auto}.layout-panel .code-area{border-top:1px solid var(--line)}.code-area-tabs{display:flex;border-bottom:1px solid var(--line);flex-shrink:0}.code-block-full{flex:1;min-height:0;overflow:auto;border-radius:0;border:none;margin:0}.code-note{font-size:11px;color:var(--muted);padding:6px 12px;border-bottom:1px solid var(--line);background:var(--panel);margin:0;flex-shrink:0}.code-note code{font-family:ui-monospace,monospace;padding:0 2px;background:#94a3b81f;border-radius:3px}.layout-toggle-btn{width:28px;height:28px;padding:0;border:1px solid var(--line);border-radius:6px;background:none;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .15s,border-color .15s}.layout-toggle-btn:hover{color:var(--text);border-color:var(--text)}.editor-page{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px}.editor-layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(280px,340px) minmax(320px,400px) 1fr;gap:12px}.editor-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.editor-panel-head h3{margin:0;font-size:14px}.editor-panel-head p{margin:4px 0 0;color:var(--muted);font-size:12px;line-height:1.45}.editor-inline-note{color:var(--muted);font-size:12px}.asset-chip-row{display:flex;flex-wrap:wrap;gap:8px}.asset-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:#2d2d2d;color:var(--muted);border-radius:999px;padding:7px 10px;font-size:12px;cursor:pointer;transition:.15s}.asset-chip:hover{border-color:#3b82f6;color:#ccc}.asset-chip.active{border-color:var(--accent);color:#1a1a1a;background:linear-gradient(90deg,#67e8f9,#22d3ee)}.asset-chip-status{width:8px;height:8px;border-radius:999px;background:#64748b}.asset-chip-status.ready{background:#34d399}.asset-chip-status.rendering{background:#fbbf24}.asset-chip-status.error{background:#ef4444}.asset-preview-list{display:flex;flex-direction:column;gap:12px}.asset-preview-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#1e1e1e;cursor:pointer}.asset-preview-card.active{border-color:var(--accent);box-shadow:inset 0 0 0 1px #22d3ee40}.asset-preview-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}.asset-preview-card-head>div{display:flex;flex-direction:column;gap:4px}.asset-preview-card-head strong{font-size:13px}.asset-preview-card-head span{color:var(--muted);font-size:11px}.asset-preview-stage{min-height:180px;display:flex;align-items:center;justify-content:center;padding:18px;overflow:auto;background:linear-gradient(45deg,rgba(255,255,255,.08) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.08) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.08) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.08) 75%);background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0;background-color:#181818}.asset-preview-svg{max-width:100%}.asset-preview-svg svg{display:block;max-width:100%;height:auto;box-shadow:0 10px 28px #0000006b}.asset-preview-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 14px;border-top:1px solid var(--line)}.asset-preview-meta span{color:var(--muted);font-size:11px}.asset-preview-meta .export-button{width:auto;margin-top:0;margin-left:auto}.asset-status-pill{display:inline-flex;align-items:center;border-radius:999px;border:1px solid var(--line);background:#2d2d2d;padding:3px 8px;text-transform:uppercase;letter-spacing:.05em;font-size:10px;font-weight:700}.asset-status-pill.ready{color:#86efac}.asset-status-pill.rendering{color:#fbbf24}.asset-status-pill.error{color:#fda4af}.editor-action-row{display:flex;align-items:center;gap:8px}.editor-action-row .export-button{width:auto;margin-top:0}.editor-composition-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.editor-composition-export{width:auto;margin-top:0;white-space:nowrap}.editor-composition-info{display:flex;gap:8px;flex-wrap:wrap;padding:8px 14px;border-bottom:1px solid var(--line)}.editor-composition-info span{color:var(--muted);font-size:11px;padding:4px 8px;border:1px solid var(--line);border-radius:999px;background:#1e1e1eb3}.editor-canvas-shell,.editor-canvas-content{position:relative;display:inline-block}.editor-selection-overlay{position:absolute;z-index:8;pointer-events:none}.editor-selection-drag{position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}.editor-selection-drag:active{cursor:grabbing}.editor-sel-corner{position:absolute;width:24px;height:24px;pointer-events:none}.editor-sel-corner.tl{top:-4px;left:-4px;border-left:3px solid var(--accent);border-top:3px solid var(--accent);border-top-left-radius:6px}.editor-sel-corner.br{bottom:-4px;right:-4px;border-right:3px solid var(--accent);border-bottom:3px solid var(--accent);border-bottom-right-radius:6px}.editor-selection-overlay:before,.editor-selection-overlay:after{content:"";position:absolute;pointer-events:none}.editor-selection-overlay:before{top:-4px;left:20px;right:12px;height:0;border-top:1px solid var(--muted);opacity:.25}.editor-selection-overlay:after{right:-4px;top:12px;bottom:20px;width:0;border-left:1px solid var(--muted);opacity:.25}.editor-selection-drag:before,.editor-selection-drag:after{content:"";position:absolute;pointer-events:none}.editor-selection-drag:before{bottom:2px;left:26px;right:18px;height:0;border-top:1px solid var(--muted);opacity:.25}.editor-selection-drag:after{left:2px;top:18px;bottom:26px;width:0;border-left:1px solid var(--muted);opacity:.25}.editor-sel-anchor{position:absolute;width:8px;height:8px;border-radius:2px;background:var(--muted);opacity:.55;pointer-events:none}.editor-sel-anchor.tr{top:-4px;right:-4px}.editor-sel-anchor.bl{bottom:-4px;left:-4px}.editor-composition-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px 14px;border-top:1px solid var(--line)}.editor-composition-meta div{display:flex;flex-direction:column;gap:4px}.editor-composition-meta strong{color:#ccc;font-size:11px;letter-spacing:.04em;text-transform:uppercase}.editor-composition-meta span{color:var(--muted);font-size:12px;line-height:1.45}@media(max-width:980px){.split-layout{grid-template-columns:1fr}.playground-layout{grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr}.playground-layout>.preview-panel{grid-column:1 / -1}.editor-layout{grid-template-columns:1fr}.controls-panel{max-height:48vh}.preview-panel{min-height:48vh}}@media(max-width:640px){.playground-layout,.editor-composition-meta{grid-template-columns:1fr}}.preview-meta-inline{display:flex;align-items:baseline;gap:10px;border-bottom:1px solid var(--line);padding:6px 14px}.preview-meta-inline h3{margin:0;font-size:13px;flex-shrink:0}.preview-meta-inline span{color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.compare-stage.is-pending{opacity:.5;transition:opacity .15s}.compare-stage{flex:1;min-height:0;display:flex;flex-wrap:wrap;justify-content:center;align-content:start;gap:10px;padding:10px;overflow:auto;background:linear-gradient(45deg,rgba(255,255,255,.08) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.08) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.08) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.08) 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;background-color:#181818}.compare-pane{display:flex;flex-direction:column;gap:6px;align-items:center;flex:1 0 var(--compare-canvas-w, 400px);min-width:var(--compare-canvas-w, 400px)}.compare-pane-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:#1e1e1eb3}.compare-pane-surface-viewport{position:relative;flex:none;overflow:hidden}.compare-pane-surface-wrap{position:absolute;top:0;left:0;transform-origin:top left}.compare-pane-surface-wrap>.rendered-content{display:block;width:100%;height:100%}.compare-pane-surface-wrap>.rendered-content>div>svg:first-child{display:block;width:100%;height:100%;max-width:none;max-height:none;box-shadow:0 6px 24px #0006}.compare-html-surface{box-shadow:0 6px 24px #0006;overflow:hidden}.compare-html-surface.debug>*{outline:1px solid rgba(239,68,68,.7)}.compare-html-surface.debug>*>*{outline:1px solid rgba(59,130,246,.7)}.compare-html-surface.debug>*>*>*{outline:1px solid rgba(16,185,129,.7)}.compare-html-surface.debug>*>*>*>*{outline:1px solid rgba(245,158,11,.7)}.compare-html-surface.debug>*>*>*>*>*{outline:1px solid rgba(168,85,247,.7)}.debug-measure-label{position:absolute;pointer-events:none;z-index:10;font-family:JetBrains Mono,SF Mono,Fira Code,Consolas,monospace;font-size:9px;line-height:1;white-space:nowrap;padding:1px 4px;background:#000000d1;border-left:2px solid;border-radius:0 3px 3px 0;font-weight:700}.debug-measure-pos{font-weight:400;opacity:.65}.debug-node-list{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow:auto;padding-top:8px;border-top:1px solid var(--line)}.debug-node-list-header{display:flex;justify-content:space-between;gap:8px;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.debug-node-list-item{display:flex;flex-direction:column;gap:2px;width:100%;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:#141414cc;color:var(--fg);text-align:left;cursor:pointer}.debug-node-list-item:hover,.debug-node-list-item:focus-visible,.debug-node-list-item.active{border-color:#06b6d4;background:#082f4973}.debug-node-id{font-family:JetBrains Mono,SF Mono,Fira Code,Consolas,monospace;font-size:11px;font-weight:700;overflow-wrap:anywhere}.debug-node-meta{font-family:JetBrains Mono,SF Mono,Fira Code,Consolas,monospace;font-size:10px;line-height:1.35;color:var(--muted);overflow-wrap:anywhere}.pattern-title-row{display:flex;align-items:center;gap:8px}.pattern-category{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#d4d4d4;background:#474747;padding:2px 7px;border-radius:4px;line-height:1.4}.text-flow-canvas-wrapper{display:flex;flex-direction:column;flex:1;min-height:0}.text-flow-canvas-toolbar{display:flex;gap:8px;padding:8px 14px;border-bottom:1px solid var(--line);flex-shrink:0}.text-flow-reset-btn{padding:4px 12px;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--fg);font-size:11px;cursor:pointer;transition:background .15s}.text-flow-reset-btn:hover{background:#ffffff0f}.text-flow-canvas{flex:1;min-height:0;overflow:auto;padding:14px;touch-action:none}.text-flow-canvas svg{display:block;max-width:100%;height:auto}.layered-control-row{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}.layered-control-label{font-size:12px;color:var(--muted)}.layered-toggle{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:13px}.layered-fixture-desc{font-size:12px;color:var(--muted);margin:0 0 14px}.layered-hint-text{font-size:12px;color:var(--muted);margin:0}.layered-warnings{margin:0;padding:0 0 0 14px;font-size:12px;color:var(--text)}.layered-warnings li{margin-bottom:6px;line-height:1.4}.layered-warning-detail{display:block;color:var(--muted);font-size:11px}.layered-layer-list{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-direction:column;gap:2px}.layered-layer-row{border-radius:6px;padding:4px 6px;transition:background-color .15s,color .15s;cursor:default}.layered-layer-row:hover,.layered-layer-row.is-focused{background:color-mix(in srgb,var(--accent) 12%,transparent)}.layered-layer-row.is-focused{outline:1px solid color-mix(in srgb,var(--accent) 55%,transparent)}.layered-layer-check{display:flex;align-items:center;gap:8px;font-size:12px;cursor:pointer;-webkit-user-select:none;user-select:none}.layered-layer-index{font-family:var(--font-mono, ui-monospace, Menlo, monospace);font-size:10px;color:var(--muted);letter-spacing:.04em;min-width:18px}.layered-layer-id{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}.layered-format-toggle{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;flex-shrink:0;height:24px}.layered-format-option{padding:0 10px;border:none;background:transparent;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.04em;cursor:pointer;transition:background-color .15s,color .15s}.layered-format-option:hover{color:var(--text)}.layered-format-option.active{background:var(--accent);color:#fff}.layered-3d-viewport{display:flex;align-items:center;justify-content:center;width:100%;min-height:260px;padding:24px;perspective:none;perspective-origin:50% 50%;transition:perspective .35s ease}.layered-3d-viewport.is-tilted{perspective:1200px}.layered-3d-stage{position:relative;transform-style:preserve-3d;transform:rotateX(0) rotateY(0);transition:transform .45s cubic-bezier(.22,1,.36,1)}.layered-3d-viewport.is-tilted .layered-3d-stage{transform:rotateX(18deg) rotateY(-22deg)}.layered-3d-layer{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:center center;transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .25s ease,box-shadow .25s ease,outline-color .25s ease,outline-width .15s ease;outline:1px dashed color-mix(in srgb,var(--muted) 55%,transparent);outline-offset:0;will-change:transform,opacity}.layered-3d-layer:hover,.layered-3d-layer:focus-visible,.layered-3d-layer.is-focused{outline:2px solid var(--accent);box-shadow:0 12px 30px color-mix(in srgb,var(--accent) 35%,transparent)}.layered-3d-layer.is-hidden{pointer-events:none}.layered-3d-canvas{display:block;width:100%;height:100%}.layered-3d-canvas svg{display:block;width:100%;height:100%}.layered-3d-canvas-img{object-fit:fill;-webkit-user-select:none;user-select:none}@font-face{font-family:BoundSvg Editor Sans;src:url(/boundsvg/playground/react/assets/NotoSansJP-Regular.subset-CA2-RjJF.woff2) format("woff2")}@font-face{font-family:"BoundSvg Editor Serif";src:url(/boundsvg/playground/react/assets/NotoSerifJP-Regular.subset-Cx0TJlM-.woff2) format("woff2")}@font-face{font-family:BoundSvg Editor Rounded;src:url(/boundsvg/playground/react/assets/ZenMaruGothic-Regular.subset-BOiUQvgA.woff2) format("woff2")}@font-face{font-family:BoundSvg Editor Inter;src:url(/boundsvg/playground/react/assets/Inter-Variable-DEKF4JyX.ttf) format("truetype")}.visual-editor-shell{display:flex;flex:1;min-height:0;flex-direction:column;gap:0;overflow:hidden}.visual-editor-toolbar{display:flex;min-height:46px;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:12px;padding:6px 10px;background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%)}.visual-editor-toolbar .control-group{min-width:118px;margin:0}.visual-editor-toolbar .control-group label{display:none}.visual-editor-toolbar-group{display:flex;align-items:center;gap:6px}.visual-editor-toolbar-group strong{margin-right:4px;font-size:12px;line-height:1;white-space:nowrap}.visual-editor-tool-cluster{gap:3px;margin-left:4px;padding-left:10px;border-left:1px solid var(--line)}.visual-editor-toolbar-group.compact-buttons button,.layer-order-actions button{width:auto}.visual-editor-toolbar button,.layer-order-actions button,.editor-effect-head button,.editor-effect-row>button,.editor-shadow-row>button{min-height:28px;padding:4px 8px;border:1px solid var(--line);border-radius:7px;background:#2d2d2d;color:var(--text);font-size:11px;font-weight:600;cursor:pointer}.visual-editor-toolbar button:hover:not(:disabled),.layer-order-actions button:hover:not(:disabled),.editor-effect-head button:hover:not(:disabled),.editor-effect-row>button:hover:not(:disabled),.editor-shadow-row>button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.visual-editor-toolbar button:disabled,.layer-order-actions button:disabled{cursor:default;opacity:.42}.visual-editor-toolbar .visual-editor-tool-button{position:relative;display:inline-grid;width:28px;min-width:28px;height:28px;min-height:28px;padding:0;place-items:center}.visual-editor-tool-button.is-danger:hover:not(:disabled){border-color:#f87171;color:#f87171}.visual-editor-tool-icon{display:block;width:14px;height:14px}.playground-tooltip{position:relative;display:inline-flex;line-height:0}.playground-tooltip-content{position:absolute;z-index:30;top:calc(100% + 7px);left:50%;padding:5px 7px;border:1px solid rgb(255 255 255 / 12%);border-radius:5px;background:#11151b;color:#e8edf5;box-shadow:0 6px 18px #00000052;font-size:10px;font-weight:600;line-height:1;opacity:0;pointer-events:none;transform:translate(-50%,-2px);transition:opacity .12s ease,transform .12s ease,visibility .12s ease;visibility:hidden;white-space:nowrap}.playground-tooltip.align-end .playground-tooltip-content{left:auto;right:0;transform:translateY(-2px)}.playground-tooltip:hover .playground-tooltip-content,.playground-tooltip:focus-within .playground-tooltip-content{opacity:1;transform:translate(-50%);visibility:visible}.playground-tooltip.align-end:hover .playground-tooltip-content,.playground-tooltip.align-end:focus-within .playground-tooltip-content{transform:translateY(0)}.visual-editor-toolbar select{min-height:28px;padding:4px 26px 4px 7px;border:1px solid var(--line);border-radius:7px;background:#1e1e1e;color:var(--text);font-size:11px}.visual-editor-toolbar .toolbar-actions{margin-left:auto}.visual-editor-toolbar .visual-editor-source-toggle{width:28px;min-width:28px;height:28px;min-height:28px;padding:0;border-radius:6px;background:none;color:var(--muted)}.visual-editor-toolbar-spacer{flex:1}.visual-editor-workspace{display:grid;flex:1;min-height:0;gap:12px;grid-template-columns:250px minmax(320px,1fr) 330px}.visual-editor-sidebar,.visual-editor-inspector{min-width:0;overflow:auto;background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%)}.visual-editor-inspector .hint{margin:0 0 4px;color:var(--muted);font-size:10px;font-weight:400;line-height:1.45}.editor-node-inspector{margin-top:8px}.editor-node-inspector dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:3px 8px;margin:0;padding:8px;border:1px solid var(--line);border-radius:7px;background:color-mix(in srgb,var(--panel-2) 88%,transparent)}.editor-node-inspector dt,.editor-node-inspector dd{min-width:0;margin:0;line-height:1.4}.editor-node-inspector dt{color:var(--muted);font-size:9px;font-weight:600}.editor-node-inspector dd{overflow-wrap:anywhere;color:var(--text);font-family:var(--font-mono, ui-monospace, Menlo, monospace);font-size:10px}.visual-editor-sidebar{padding:12px}.visual-editor-canvas-panel{display:flex;overflow:hidden}.visual-editor-panel-header{position:sticky;z-index:2;top:0;display:flex;min-height:42px;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--panel) 94%,transparent);font-size:12px;font-weight:700;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.visual-editor-panel-title{display:flex;min-height:42px;align-items:center;justify-content:space-between;padding:0 0 10px;border-bottom:1px solid var(--line)}.visual-editor-panel-title h3{margin:0;font-size:12px;text-transform:uppercase}.visual-editor-panel-title span{color:var(--muted);font-size:10px}.visual-editor-layer-list{display:flex;flex-direction:column;gap:2px;padding:0}.visual-editor-layer-group{overflow:hidden;border:1px solid rgb(167 139 250 / 22%);border-radius:7px;background:#a78bfa0a}.visual-editor-layer-group.is-selected{border-color:#a78bfa9e;background:#a78bfa17}.visual-editor-layer-group-header{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:4px;padding:6px;color:#ddd6fe}.visual-editor-layer-group-header .layer-group{display:grid;width:24px;height:24px;border-radius:5px;place-items:center;background:#a78bfa33;color:#c4b5fd;font-size:10px;font-weight:800}.visual-editor-layer-group-header .layer-group-count{padding:1px 5px;border-radius:999px;background:#a78bfa2e;color:#c4b5fd;font-size:9px;font-weight:700}.visual-editor-layer-group-children{display:flex;flex-direction:column;gap:2px;padding:0 4px 4px 12px;border-top:1px solid rgb(167 139 250 / 14%)}.visual-editor-layer.is-group-member{border-left-color:#a78bfa59;border-radius:0 5px 5px 0}.visual-editor-layer{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:4px;padding:6px;border:1px solid transparent;border-radius:6px;color:var(--text);cursor:pointer}.visual-editor-layer:hover{background:var(--panel-2)}.visual-editor-layer.is-selected{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 13%,transparent)}.visual-editor-layer.active{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 13%,transparent);box-shadow:inset 3px 0 0 var(--accent)}.visual-editor-layer .layer-type{display:grid;width:24px;height:24px;border-radius:5px;place-items:center;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);font-size:10px;font-weight:800}.visual-editor-layer-select{display:flex;min-width:0;align-items:center;gap:6px;padding:0;border:0;background:transparent;color:inherit;cursor:pointer}.visual-editor-layer-toggle{position:relative;display:grid;width:25px;height:25px;padding:0;border:0;background:transparent;color:var(--muted);cursor:pointer;place-items:center}.visual-editor-layer-toggle .visual-editor-tool-icon{width:16px;height:16px}.visual-editor-layer .layer-name{overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.visual-editor-selection-summary{display:flex;flex-direction:column;gap:3px;padding:9px;border:1px solid rgb(56 189 248 / 24%);border-radius:6px;background:#38bdf812}.visual-editor-selection-summary strong{font-size:11px}.visual-editor-selection-summary span,.visual-editor-selection-summary small{color:var(--muted);font-size:9px}.layer-order-actions{display:flex;gap:5px;padding:0 0 2px}.visual-editor-samples{display:flex;flex-direction:column;gap:8px;padding-top:10px;border-top:1px solid var(--line)}.visual-editor-subheading{margin:0;color:#d4d4d4;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.visual-editor-layer.is-hidden{opacity:.52}.visual-editor-layer-name{overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.visual-editor-layer-kind{color:var(--muted);font-size:10px;text-transform:uppercase}.visual-editor-icon-button{display:inline-grid;width:27px;height:27px;padding:0;border:1px solid transparent;border-radius:5px;place-items:center;background:transparent;color:var(--muted);cursor:pointer}.visual-editor-icon-button:hover,.visual-editor-icon-button.is-active{border-color:var(--line);background:var(--panel-2);color:var(--text)}.visual-editor-stage{position:relative;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;background-color:#20242c;background-image:linear-gradient(45deg,#272c35 25%,transparent 25%),linear-gradient(-45deg,#272c35 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#272c35 75%),linear-gradient(-45deg,transparent 75%,#272c35 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;outline:none;flex:1}.visual-editor-stage:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}.visual-editor-stage-scroll{display:grid;min-width:100%;min-height:calc(100% - 28px);padding:76px 56px 56px;place-items:center}.visual-editor-artboard-zoom{position:relative;flex:none}.visual-editor-artboard-content{position:relative;min-inline-size:0;margin:0;padding:0;overflow:visible;border:0;transform-origin:top left;box-shadow:0 18px 60px #0000006b;touch-action:none;-webkit-user-select:none;user-select:none}.visual-editor-artboard-content.is-move{cursor:grab}.visual-editor-artboard-content.is-move.is-interacting{cursor:grabbing}.visual-editor-artboard-content.is-range{cursor:crosshair}.visual-editor-artboard-content.interaction-resize{cursor:nwse-resize}.visual-editor-artboard-content.interaction-rotate{cursor:grabbing}.visual-editor-artboard-content.is-text-edit{cursor:text}.visual-editor-modebar{position:absolute;z-index:8;top:14px;left:14px;display:flex;align-items:center;gap:10px;padding:5px;border:1px solid rgb(255 255 255 / 12%);border-radius:9px;background:#12161ceb;color:#aeb8c7;box-shadow:0 8px 24px #0000003d;font-size:10px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.visual-editor-modebar>legend{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.visual-editor-mode-switch{display:flex;gap:2px}.visual-editor-mode-switch button{min-height:27px;padding:4px 9px;border:1px solid transparent;border-radius:6px;background:transparent;color:#aeb8c7;font-size:11px;font-weight:700;cursor:pointer}.visual-editor-mode-switch button:hover:not(:disabled){color:#fff}.visual-editor-mode-switch button.active{border-color:#38bdf87a;background:#38bdf826;color:#67e8f9}.visual-editor-mode-switch button:disabled{cursor:default;opacity:.35}.visual-editor-render,.visual-editor-render svg,.visual-editor-text-selection{display:block;width:100%;height:100%}.visual-editor-render-error{display:grid;width:100%;height:100%;place-items:center;background:#fff2f2;color:#b42318}.visual-editor-text-selection{position:absolute;top:0;right:0;bottom:0;left:0;overflow:visible;pointer-events:none;z-index:3}.visual-editor-text-selection polygon{fill:#388bfd47;stroke:#388bfdc7;stroke-width:1;vector-effect:non-scaling-stroke}.visual-editor-text-caret{stroke:#38bdf8;stroke-width:2;vector-effect:non-scaling-stroke;animation:visual-editor-caret-blink 1.05s steps(1,end) infinite}@keyframes visual-editor-caret-blink{0%,52%{opacity:1}53%,to{opacity:0}}.visual-editor-selection{--visual-editor-selection-edge-color: #4f9cff;position:absolute;z-index:4;border:0;pointer-events:none;transform-origin:center}.visual-editor-selection-edge{position:absolute;z-index:0;display:block;pointer-events:none}.visual-editor-selection-edge.edge-top,.visual-editor-selection-edge.edge-bottom{right:0;left:0;height:var(--visual-editor-selection-border-width, 1.5px);background:repeating-linear-gradient(to right,var(--visual-editor-selection-edge-color) 0 var(--visual-editor-selection-dash-size, 5px),transparent var(--visual-editor-selection-dash-size, 5px) var(--visual-editor-selection-dash-cycle, 8px))}.visual-editor-selection-edge.edge-top{top:0}.visual-editor-selection-edge.edge-bottom{bottom:0}.visual-editor-selection-edge.edge-right,.visual-editor-selection-edge.edge-left{top:0;bottom:0;width:var(--visual-editor-selection-border-width, 1.5px);background:repeating-linear-gradient(to bottom,var(--visual-editor-selection-edge-color) 0 var(--visual-editor-selection-dash-size, 5px),transparent var(--visual-editor-selection-dash-size, 5px) var(--visual-editor-selection-dash-cycle, 8px))}.visual-editor-selection-edge.edge-right{right:0}.visual-editor-selection-edge.edge-left{left:0}.visual-editor-hover-target{position:absolute;z-index:3;border:1px solid rgb(103 232 249 / 72%);background:#38bdf80d;box-shadow:0 0 0 2px #38bdf817;pointer-events:none;transform-origin:center}.visual-editor-hover-target>span{position:absolute;bottom:calc(100% + 4px);left:0;max-width:210px;padding:2px 5px;overflow:hidden;border-radius:3px;background:#0891b2f0;color:#ecfeff;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.visual-editor-marquee{position:absolute;z-index:7;border:1.5px dashed #67e8f9;background:#38bdf821;box-shadow:0 0 0 1px #0891b22e;pointer-events:none}.visual-editor-selection.is-editing{--visual-editor-selection-edge-color: #4f9cff}.visual-editor-selection.is-editing .visual-editor-selection-edge{background:var(--visual-editor-selection-edge-color)}.visual-editor-selection.is-member{z-index:3;--visual-editor-selection-edge-color: rgb(79 156 255 / 72%)}.visual-editor-selection.is-primary{--visual-editor-selection-edge-color: #4f9cff}.visual-editor-multi-selection{position:absolute;z-index:5;border:var(--visual-editor-selection-border-width, 1.5px) solid #38bdf8;box-shadow:0 0 0 2px #38bdf824;pointer-events:none}.visual-editor-multi-selection.is-group{border-color:#a78bfa;box-shadow:0 0 0 2px #a78bfa29}.visual-editor-multi-selection.is-locked{border-color:#e7a83e}.visual-editor-multi-selection.is-move{border-width:2px}.visual-editor-multi-selection.is-group .visual-editor-selection-label{background:#7c3aed}.visual-editor-selection-actions{position:absolute;right:0;bottom:calc(100% + 8px);display:flex;max-width:430px;flex-wrap:wrap;justify-content:flex-end;gap:4px;pointer-events:auto}.visual-editor-context-menu{position:absolute;z-index:20;display:flex;min-width:176px;flex-direction:column;gap:2px;padding:5px;border:1px solid rgb(255 255 255 / 16%);border-radius:7px;background:#11151bfa;box-shadow:0 14px 36px #0000007a;pointer-events:auto}.visual-editor-context-menu button{min-height:27px;padding:5px 9px;border:0;border-radius:4px;background:transparent;color:#e2e8f0;font-size:11px;text-align:left;cursor:pointer}.visual-editor-context-menu button:hover:not(:disabled),.visual-editor-context-menu button:focus-visible:not(:disabled){background:#38bdf829;color:#67e8f9}.visual-editor-context-menu button:disabled{cursor:default;opacity:.38}.visual-editor-context-menu button.is-danger:hover:not(:disabled){background:#f8717124;color:#fca5a5}.visual-editor-context-separator{height:1px;margin:3px 2px;border:0;background:#ffffff1c}.visual-editor-selection-actions button{min-height:24px;padding:3px 7px;border:1px solid rgb(255 255 255 / 18%);border-radius:5px;background:#12161cf0;color:#e2e8f0;font-size:10px;font-weight:700;cursor:pointer}.visual-editor-selection-actions button:disabled{cursor:default;opacity:.45}.visual-editor-text-editor{position:absolute;z-index:2;box-sizing:border-box;margin:0;padding:0;overflow:hidden;border:0;outline:0;background:transparent;color:transparent;caret-color:transparent;resize:none;transform-origin:center;cursor:text;pointer-events:none;-webkit-user-select:text;user-select:text;white-space:pre-wrap;word-break:normal;overflow-wrap:anywhere;-webkit-text-fill-color:transparent}.visual-editor-text-editor:focus{outline:none}.visual-editor-text-editor::selection{background:transparent}.visual-editor-selection.is-locked{--visual-editor-selection-edge-color: #e7a83e}.visual-editor-selection-label{position:absolute;top:-22px;left:0;max-width:180px;padding:2px 5px;overflow:hidden;border-radius:3px;background:#2678dc;color:#fff;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.visual-editor-selection.is-move,.visual-editor-selection.is-resize,.visual-editor-selection.is-rotate,.visual-editor-multi-selection.is-resize,.visual-editor-multi-selection.is-rotate{box-shadow:0 0 0 2px #38bdf82e}.visual-editor-multi-selection.is-resize,.visual-editor-multi-selection.is-rotate{border-style:solid;border-color:#38bdf8}.visual-editor-selection.is-move,.visual-editor-selection.is-resize,.visual-editor-selection.is-rotate{--visual-editor-selection-edge-color: #38bdf8}.visual-editor-selection.is-move .visual-editor-selection-edge,.visual-editor-selection.is-resize .visual-editor-selection-edge,.visual-editor-selection.is-rotate .visual-editor-selection-edge{background:var(--visual-editor-selection-edge-color)}.visual-editor-selection.is-resize .visual-editor-selection-label,.visual-editor-selection.is-rotate .visual-editor-selection-label,.visual-editor-multi-selection.is-resize .visual-editor-selection-label,.visual-editor-multi-selection.is-rotate .visual-editor-selection-label{background:#087ea4}.visual-editor-selection .visual-editor-transform-target,.visual-editor-multi-selection .visual-editor-transform-target{position:absolute;z-index:2;display:inline-flex;width:var(--visual-editor-handle-size, 26px);height:var(--visual-editor-handle-size, 26px);align-items:center;justify-content:center;border-radius:50%;pointer-events:auto;transform:translate(-50%,-50%)}.visual-editor-selection .visual-editor-handle,.visual-editor-selection .visual-editor-rotate-handle,.visual-editor-multi-selection .visual-editor-handle,.visual-editor-multi-selection .visual-editor-rotate-handle{display:grid;width:100%;min-width:100%;height:100%;min-height:100%;padding:0;border:0;border-radius:50%;background:transparent;cursor:inherit;place-items:center}.visual-editor-selection .visual-editor-handle:before,.visual-editor-selection .visual-editor-rotate-handle:before,.visual-editor-multi-selection .visual-editor-handle:before,.visual-editor-multi-selection .visual-editor-rotate-handle:before{width:var(--visual-editor-marker-size, 10px);height:var(--visual-editor-marker-size, 10px);border:var(--visual-editor-marker-border-width, 1.5px) solid #2678dc;border-radius:50%;background:#fff;box-shadow:0 1px 4px #00000047;content:"";transition:transform .12s ease,box-shadow .12s ease}.visual-editor-selection .visual-editor-transform-target:hover .visual-editor-handle:before,.visual-editor-selection .visual-editor-transform-target:focus-within .visual-editor-handle:before,.visual-editor-selection .visual-editor-transform-target:hover .visual-editor-rotate-handle:before,.visual-editor-multi-selection .visual-editor-transform-target:hover .visual-editor-handle:before,.visual-editor-multi-selection .visual-editor-transform-target:focus-within .visual-editor-handle:before,.visual-editor-multi-selection .visual-editor-transform-target:hover .visual-editor-rotate-handle:before,.visual-editor-multi-selection .visual-editor-transform-target:focus-within .visual-editor-rotate-handle:before,.visual-editor-selection .visual-editor-transform-target:focus-within .visual-editor-rotate-handle:before{box-shadow:0 0 0 4px #38bdf838;transform:scale(1.35)}.visual-editor-selection .handle-nw,.visual-editor-multi-selection .handle-nw{top:0;left:0;cursor:nwse-resize}.visual-editor-selection .handle-n,.visual-editor-multi-selection .handle-n{top:0;left:50%;cursor:ns-resize}.visual-editor-selection .handle-ne,.visual-editor-multi-selection .handle-ne{top:0;left:100%;cursor:nesw-resize}.visual-editor-selection .handle-e,.visual-editor-multi-selection .handle-e{top:50%;left:100%;cursor:ew-resize}.visual-editor-selection .handle-se,.visual-editor-multi-selection .handle-se{top:100%;left:100%;cursor:nwse-resize}.visual-editor-selection .handle-s,.visual-editor-multi-selection .handle-s{top:100%;left:50%;cursor:ns-resize}.visual-editor-selection .handle-sw,.visual-editor-multi-selection .handle-sw{top:100%;left:0;cursor:nesw-resize}.visual-editor-selection .handle-w,.visual-editor-multi-selection .handle-w{top:50%;left:0;cursor:ew-resize}.visual-editor-selection .visual-editor-rotate-target,.visual-editor-multi-selection .visual-editor-rotate-target{top:calc(0px - var(--visual-editor-rotate-offset, 34px));left:50%}.visual-editor-selection .visual-editor-rotate-handle,.visual-editor-multi-selection .visual-editor-rotate-handle{cursor:grab}.visual-editor-selection .visual-editor-rotate-handle:before,.visual-editor-multi-selection .visual-editor-rotate-handle:before{background:#2678dc}.visual-editor-selection.is-rotate .visual-editor-rotate-handle,.visual-editor-multi-selection.is-rotate .visual-editor-rotate-handle{cursor:grabbing}.visual-editor-selection.is-rotate .visual-editor-rotate-handle:before,.visual-editor-multi-selection.is-rotate .visual-editor-rotate-handle:before{border-color:#38bdf8;background:#38bdf8;box-shadow:0 0 0 5px #38bdf840;transform:scale(1.4)}.visual-editor-multi-selection .visual-editor-handle:disabled:before,.visual-editor-multi-selection .visual-editor-rotate-handle:disabled:before{opacity:.45}.visual-editor-rotate-guide{position:absolute;top:calc(0px - var(--visual-editor-rotate-offset, 34px));left:50%;height:var(--visual-editor-rotate-offset, 34px);border-left:var(--visual-editor-marker-border-width, 1px) solid #2678dc;content:"";pointer-events:none}.visual-editor-selection-drag-surface{position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;cursor:grab;pointer-events:auto;touch-action:none}.visual-editor-selection.is-move .visual-editor-selection-drag-surface{cursor:grabbing}.visual-editor-rotate-target .playground-tooltip-content{top:auto;bottom:calc(100% + 7px)}.visual-editor-rich-toolbar{position:absolute;z-index:6;display:flex;gap:3px;padding:4px;border:1px solid rgb(255 255 255 / 16%);border-radius:7px;background:#171b22;box-shadow:0 8px 24px #00000059;pointer-events:auto}.visual-editor-rich-toolbar:after{position:absolute;z-index:-1;left:50%;width:8px;height:8px;border:1px solid rgb(255 255 255 / 16%);background:#171b22;content:"";transform:translate(-50%) rotate(45deg)}.visual-editor-rich-toolbar.is-above:after{bottom:-5px;border-top:0;border-left:0}.visual-editor-rich-toolbar.is-below:after{top:-5px;border-right:0;border-bottom:0}.visual-editor-rich-format-actions,.visual-editor-ruby-form{display:flex;align-items:center;gap:3px}.visual-editor-rich-toolbar .playground-tooltip{line-height:normal}.visual-editor-rich-toolbar-separator{width:1px;align-self:stretch;margin:1px 2px;background:#ffffff24}.visual-editor-ruby-form{padding-right:2px}.visual-editor-ruby-form input{width:112px;min-height:26px;padding:4px 7px;border:1px solid rgb(255 255 255 / 16%);border-radius:4px;outline:none;background:#0f1319;color:#e8edf5;font-size:11px}.visual-editor-ruby-form input:focus{border-color:#38bdf8}.visual-editor-rich-toolbar button{padding:5px 7px;border:0;border-radius:4px;background:transparent;color:#e8edf5;font-size:11px;cursor:pointer}.visual-editor-rich-toolbar button:hover{background:#2a3240}.visual-editor-rich-toolbar button:disabled,.visual-editor-rich-toolbar button:disabled:hover{background:transparent;cursor:not-allowed;opacity:.38}.visual-editor-rich-toolbar button.is-primary,.visual-editor-rich-toolbar button.is-done{background:#1677a5;color:#fff;font-weight:700}.visual-editor-rich-toolbar button.is-primary:hover,.visual-editor-rich-toolbar button.is-done:hover{background:#1993c7}.visual-editor-rich-toolbar button.is-clear{color:#aeb8c7}.visual-editor-status{position:sticky;bottom:0;z-index:4;display:flex;min-height:28px;align-items:center;justify-content:flex-end;gap:14px;padding:4px 10px;border-top:1px solid rgb(255 255 255 / 8%);background:#12161ceb;color:#aeb8c7;font-size:10px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.visual-editor-status button{padding:2px 6px;border:1px solid rgb(255 255 255 / 12%);border-radius:4px;background:transparent;color:#aeb8c7;font-size:10px;cursor:pointer}.visual-editor-status button:focus-visible{border-color:var(--accent);color:#fff;outline:none}.visual-editor-stage-inner{display:grid;width:max-content;min-width:100%;min-height:100%;padding:56px;place-items:center}.visual-editor-artboard{position:relative;flex:none;overflow:visible;transform-origin:top left;box-shadow:0 18px 60px #0000006b;touch-action:none;-webkit-user-select:none;user-select:none}.visual-editor-artboard-render,.visual-editor-artboard-render svg,.visual-editor-overlay{display:block;width:100%;height:100%}.visual-editor-overlay{position:absolute;top:0;right:0;bottom:0;left:0;overflow:visible;pointer-events:none}.visual-editor-selection-box{fill:transparent;stroke:#4f9cff;stroke-dasharray:5 3;stroke-width:1.5;vector-effect:non-scaling-stroke}.visual-editor-selection-quad{fill:#388bfd47;stroke:#388bfdc7;stroke-width:1;vector-effect:non-scaling-stroke}.visual-editor-handle,.visual-editor-rotate-handle{pointer-events:auto;cursor:pointer;fill:#fff;stroke:#2678dc;stroke-width:1.5;vector-effect:non-scaling-stroke}.visual-editor-handle[data-handle^=n],.visual-editor-handle[data-handle^=s]{cursor:ns-resize}.visual-editor-handle[data-handle^=e],.visual-editor-handle[data-handle^=w]{cursor:ew-resize}.visual-editor-handle[data-handle=ne],.visual-editor-handle[data-handle=sw]{cursor:nesw-resize}.visual-editor-handle[data-handle=nw],.visual-editor-handle[data-handle=se]{cursor:nwse-resize}.visual-editor-rotate-handle{cursor:grab;fill:#2678dc}.visual-editor-text-toolbar{position:absolute;z-index:5;display:flex;gap:3px;padding:4px;border:1px solid rgb(255 255 255 / 16%);border-radius:7px;background:#171b22;box-shadow:0 8px 24px #00000059;pointer-events:auto;transform:translate(-50%,-100%)}.visual-editor-text-toolbar button{min-width:28px;padding:5px 7px;border:0;border-radius:4px;background:transparent;color:#e8edf5;font-size:11px;cursor:pointer}.visual-editor-text-toolbar button:hover{background:#2a3240}.visual-editor-inspector-content{display:flex;flex-direction:column;gap:8px;padding:10px}.visual-editor-section{border:1px solid var(--line);border-radius:7px;background:var(--panel-2)}.visual-editor-section>summary{padding:9px 10px;color:var(--text);cursor:pointer;font-size:12px;font-weight:700}.visual-editor-section-body{display:flex;flex-direction:column;gap:8px;padding:0 10px 10px}.visual-editor-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.visual-editor-inline-actions{display:flex;flex-wrap:wrap;gap:5px}.editor-run-list,.editor-binding-list,.editor-warning-list{display:flex;flex-direction:column;gap:6px}.editor-run-card{display:flex;flex-direction:column;gap:6px;padding:7px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}.editor-run{display:flex;flex-direction:column;gap:6px;padding:7px;border:1px solid var(--line);border-radius:6px;background:#00000014}.editor-run-head,.editor-effect-head,.editor-debug-stats{display:flex;align-items:center;justify-content:space-between;gap:6px;color:var(--muted);font-size:10px}.editor-run-head span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.editor-flow-binding,.editor-effect-row,.editor-shadow-row{display:flex;flex-direction:column;gap:6px;padding:6px;border:1px solid var(--line);border-radius:6px}.editor-effect-head button{display:grid;width:28px;min-width:28px;height:28px;min-height:28px;padding:0;place-items:center;font-size:16px;line-height:1}.editor-stroke-row{display:grid;grid-template-columns:minmax(0,1fr) 84px 28px;align-items:end;gap:8px;padding:8px}.editor-stroke-row .color-group{min-width:0;align-self:center}.editor-stroke-row .color-group label{white-space:nowrap}.editor-stroke-row .color-group span{overflow:hidden;margin-left:0;text-overflow:ellipsis}.editor-stroke-row .number-group{min-width:0}.editor-stroke-row .number-group>label{font-size:10px}.editor-stroke-row .number-input-wrap input[type=number]{padding:5px 7px}.editor-stroke-row>.playground-tooltip{align-self:end}.editor-shadow-row>.playground-tooltip{align-self:flex-end}.editor-effect-remove{display:grid;width:28px;min-width:28px;height:28px;min-height:28px;padding:0;border:1px solid var(--line);border-radius:6px;background:#2d2d2d;color:var(--muted);cursor:pointer;place-items:center}.editor-effect-remove:hover{border-color:#f87171;color:#f87171}.editor-run-header{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:10px}.editor-binding-row{display:grid;grid-template-columns:auto minmax(0,1fr) 62px;align-items:center;gap:7px;color:var(--text);font-size:11px}.editor-warning{padding:7px 8px;border:1px solid color-mix(in srgb,#e7a83e 48%,var(--line));border-radius:6px;background:color-mix(in srgb,#e7a83e 10%,transparent);color:var(--text);font-size:11px;line-height:1.45}.visual-editor-empty-state{padding:26px 16px;color:var(--muted);font-size:12px;line-height:1.6;text-align:center}.visual-editor-output{flex:none;height:0;min-height:0;margin-top:0;overflow:hidden;border-top:1px solid var(--line);background:var(--panel);opacity:0;transform:translateY(8px);transition:height .35s ease,margin-top .35s ease,opacity .2s ease,transform .35s ease}.visual-editor-output-head{display:flex;min-height:40px;align-items:center;justify-content:space-between;gap:8px;padding:5px 10px;border-bottom:1px solid var(--line)}.visual-editor-output .code-block-full{height:calc(100% - 40px);margin:0;overflow:auto;border-radius:0}.visual-editor-output.is-open{height:min(38vh,360px);margin-top:12px;opacity:1;transform:translateY(0)}.visual-editor-renderer-select{display:flex;align-items:center;gap:6px;margin-left:auto;color:var(--muted);font-size:10px;font-weight:700}.visual-editor-renderer-select select{min-height:28px;padding:4px 26px 4px 8px;border:1px solid var(--line);border-radius:6px;background:#1e1e1e;color:var(--text);font-size:11px}.visual-editor-output-header{display:flex;height:38px;align-items:center;gap:6px;padding:5px 10px;cursor:pointer}.visual-editor-output-header strong{margin-right:8px;font-size:12px}.visual-editor-output-body{height:calc(100% - 38px);overflow:auto;border-top:1px solid var(--line)}.visual-editor-output-code{min-height:100%;margin:0;padding:14px;overflow:auto;color:var(--text);font-size:11px;line-height:1.5;white-space:pre-wrap}@media(max-width:1200px){.visual-editor-workspace{grid-template-columns:210px minmax(300px,1fr) 285px}}@media(max-width:880px){.visual-editor-workspace{overflow:auto;grid-template-columns:1fr;grid-template-rows:auto minmax(440px,1fr) auto}.visual-editor-sidebar,.visual-editor-inspector{max-height:280px;border:0;border-bottom:1px solid var(--line)}.visual-editor-stage{min-height:440px}}.animation-timeline{margin-top:12px;border:1px solid var(--border, #334155);border-radius:8px;padding:8px 10px}.animation-timeline>summary{cursor:pointer;font-weight:600}.animation-timeline-note{margin:8px 0 12px;font-size:12px;opacity:.75}.timeline-empty,.timeline-inspector-error{font-size:12px;opacity:.75}.timeline-inspector-error{color:#f87171}.timeline-tracks{display:flex;flex-direction:column;gap:4px}.timeline-playhead-row{position:relative;height:6px}.timeline-playhead{position:absolute;top:0;bottom:0;width:2px;background:#f8fafc}.timeline-track{display:grid;grid-template-columns:minmax(80px,22%) 1fr minmax(96px,auto);gap:8px;align-items:center;background:none;border:1px solid transparent;border-radius:6px;color:inherit;cursor:pointer;font:inherit;padding:4px 6px;text-align:left}.timeline-track.is-selected{border-color:#38bdf8;background:#38bdf81a}.timeline-track-label,.timeline-track-meta{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.timeline-track-meta{opacity:.7;text-align:right}.timeline-track-lane{position:relative;display:block;height:14px;border-radius:4px;background:#94a3b82e}.timeline-track-bar{position:absolute;top:0;bottom:0;border-radius:4px;background:#2563eb;color:#f8fafc;font-size:10px;line-height:14px;text-align:center}.timeline-track-bar.is-units{background:#7c3aed}.timeline-inspector{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:12px 0 0;font-size:12px}.timeline-inspector dt{opacity:.7}.timeline-inspector dd{margin:0;font-variant-numeric:tabular-nums}.copy-touch{display:none}.interactive-stage-content{position:relative;display:inline-block}@media(max-width:820px),(max-height:560px)and (hover:none)and (pointer:coarse){html,body{height:auto;min-height:100%;overflow-x:hidden}body{min-height:100dvh;-webkit-text-size-adjust:100%;text-size-adjust:100%}#root{height:auto;min-height:100dvh}.screen-center{min-height:100dvh}.example-shell{height:auto;min-height:100dvh;overflow:visible}.example-header{gap:6px;padding:max(7px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 6px max(10px,env(safe-area-inset-left))}.header-top-row{flex-wrap:nowrap;align-items:center;gap:8px}.brand-copy{flex:1;flex-wrap:nowrap;gap:8px}.brand-copy .brand-sub,.status-strip>span:last-child{display:none}.header-meta{width:auto;justify-content:flex-end;gap:4px}.github-link{width:36px;height:36px;justify-content:center}.route-nav,.route-nav-row{flex-wrap:nowrap}.route-nav-grouped{gap:3px}.route-nav-row{width:100%;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}.route-nav-row::-webkit-scrollbar{display:none}.route-nav-categories{gap:5px;padding-bottom:2px}.route-nav-categories .route-link{min-height:32px;padding:4px 8px;font-size:11px}.route-nav-pages{gap:0;padding-left:0}.route-link,.route-nav-pages .route-link{display:inline-flex;min-height:36px;flex:none;align-items:center;padding:6px 10px;white-space:nowrap}.example-main{display:block;flex:none;min-height:0;padding:10px max(10px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));overflow:visible}.split-layout,.playground-layout,.editor-layout,.animation-layout{display:flex;min-height:0;flex:none;flex-direction:column;gap:10px;overflow:visible}.editor-page,.visual-editor-shell{min-height:0;flex:none;overflow:visible}.panel{min-height:0;flex:none}.controls-panel{max-height:none;padding:10px;overflow:visible}.controls-panel .section-header{min-height:36px;padding:6px 0;font-size:11px}.controls-panel .section-body{gap:7px;padding-bottom:2px}.controls-panel .control-head label,.controls-panel .control-head span,.controls-panel .number-group>label,.controls-panel .color-group label{font-size:11px;line-height:1.25}.controls-panel input[type=text],.controls-panel input[type=number],.controls-panel textarea,.controls-panel select,.visual-editor-toolbar select,.visual-editor-renderer-select select{font-size:16px}.controls-panel .control-group-select,.controls-panel>.number-group,.controls-panel .section-body>.number-group{display:grid;grid-template-columns:minmax(92px,36%) minmax(0,1fr);align-items:center;gap:8px}.controls-panel .control-group-select .control-head,.controls-panel .number-group>label{min-width:0}.controls-panel .control-group-select select,.controls-panel .number-input-wrap{min-width:0}.controls-panel .control-group-select select,.controls-panel .number-input-wrap input[type=number]{min-height:36px;padding:5px 8px}.controls-panel .compact-row{gap:8px}.controls-panel .compact-row .number-group{display:flex;flex-direction:column;gap:3px}.controls-panel .color-group{display:grid;grid-template-areas:"label swatch value";grid-template-columns:minmax(92px,36%) 40px minmax(0,1fr);gap:8px}.controls-panel .color-group input{grid-area:swatch}.controls-panel .color-group label{grid-area:label}.controls-panel .color-group span{grid-area:value;min-width:0;margin-left:0;overflow:hidden;text-overflow:ellipsis}.controls-panel .check-row{min-height:32px;font-size:12px}.controls-panel .control-group-bbox{gap:0}.controls-panel .control-group-bbox>.control-head{display:none}.controls-panel .section-note{margin:2px 0;color:var(--muted);font-size:11px;line-height:1.4}.mobile-sample-select{display:grid;min-height:36px;grid-template-columns:minmax(72px,28%) minmax(0,1fr);align-items:center;gap:8px;color:#ccc;font-size:12px;font-weight:600}.mobile-sample-select select{width:100%;min-height:36px;padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:#1e1e1e;color:var(--text);font-size:16px}.split-layout>.preview-panel,.playground-layout>.preview-panel,.editor-layout>.preview-panel{order:-1}.preview-panel.has-code-area,.preview-panel.has-code-area.layout-panel{grid-template-rows:auto auto 0}.preview-panel.has-code-area.show-code,.preview-panel.has-code-area.layout-panel.show-code{grid-template-rows:auto 0 minmax(320px,auto)}.preview-header{flex-wrap:wrap;align-items:center;gap:3px 8px;padding:7px 10px}.preview-header-meta{min-height:26px;flex:1 0 100%;align-items:baseline}.preview-header-meta span{min-width:0}.preview-header-meta>span:not(.copy-touch){display:none}.preview-subtitle{display:none}.preview-view-tabs{width:100%;flex:1 1 100%;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}.preview-view-tabs::-webkit-scrollbar{display:none}.preview-header>.preview-view-tabs{display:none}.editor-composition-header{flex-wrap:nowrap}.editor-composition-header .preview-header-meta{min-height:0;flex:1 1 auto}.editor-composition-header .preview-header-meta .copy-touch{display:none}.editor-composition-export{min-width:76px;min-height:36px;padding:5px 9px;font-size:11px}.preview-view-tab{min-height:38px;flex:none;white-space:nowrap}.layout-toggle-btn{display:none}.preview-body,.has-code-area .preview-body{overflow:visible}.preview-panel.has-code-area.show-code .preview-body,.has-code-area .preview-stage-wrap,.has-code-area .preview-stage{overflow:hidden}.preview-stage,.has-code-area .preview-stage{height:auto;min-height:0;padding:6px}.has-code-area .rendered-content,.has-code-area .rendered-content svg,.has-code-area .preview-image{width:100%;height:auto;max-height:min(52dvh,460px);object-fit:contain}.code-area{overflow:auto}.code-area-tabs{overflow-x:auto;scrollbar-width:none}.code-area-tabs::-webkit-scrollbar{display:none}.code-area-tabs .preview-view-tab{flex:none}.preview-meta-inline{flex-wrap:wrap;padding:5px 10px}.preview-meta-inline span{display:none}.worker-mobile-status{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:8px 10px;color:var(--muted);font-size:11px}.worker-mobile-status span:not(.error-text){white-space:nowrap}.worker-mobile-status .error-text{flex-basis:100%;overflow-wrap:anywhere}.worker-preview-header{min-height:0;height:0;padding:0;border:0;overflow:hidden;visibility:hidden}.animation-controls{order:0;max-height:none}.animation-controls .animation-note,.animation-controls .animation-motion-note,.animation-preview-header>div>span{display:none}.animation-preview-panel{order:-2;min-height:0}.animation-preview-panel+.animation-preview-panel{display:none}.animation-preview-stage{min-height:0}.compare-stage{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:6px;overflow:hidden}.compare-pane{width:100%;min-width:0;flex-basis:auto}.compare-pane-surface-viewport{max-width:100%}.compare-pane-surface-wrap>.rendered-content,.compare-pane-surface-wrap>.rendered-content>div>svg:first-child{width:100%;height:100%;max-height:none}.mobile-viewer-secondary{display:none}.visual-editor-toolbar{min-height:0;flex-wrap:wrap;gap:5px;margin-bottom:10px;overflow:visible;scrollbar-width:none}.visual-editor-toolbar::-webkit-scrollbar{display:none}.visual-editor-toolbar>.visual-editor-tool-cluster{display:none}.visual-editor-toolbar>.visual-editor-toolbar-group:first-child{width:100%}.visual-editor-toolbar>.visual-editor-toolbar-group:first-child .control-group{flex:1}.visual-editor-toolbar .toolbar-actions{flex:none;margin-left:0}.visual-editor-workspace{display:block;min-height:0;overflow:visible}.visual-editor-sidebar,.visual-editor-inspector{display:none}.visual-editor-canvas-panel{height:min(62dvh,560px);min-height:240px}.visual-editor-stage{min-height:0;overscroll-behavior:auto}.visual-editor-modebar{display:none}.visual-editor-stage-scroll{min-height:100%;padding:16px 10px}.visual-editor-artboard-content{pointer-events:auto;touch-action:pan-y pinch-zoom}.visual-editor-transform-target{touch-action:none}.visual-editor-output.is-open{height:min(60dvh,440px)}.text-flow-canvas{padding:6px;touch-action:pan-y pinch-zoom}.text-flow-canvas-toolbar{padding:6px 8px}.layered-3d-viewport{min-height:0;padding:10px}.text-flow-canvas [data-boundsvg-node-id^=flow-obstacle-]{touch-action:none}.interactive-stage-content.is-mobile,.interactive-stage-content.is-mobile .interactive-canvas{width:100%}.interactive-stage-content.is-mobile .interactive-canvas>svg{display:block;width:100%;height:auto}}@media(max-width:560px){.brand-logo{height:23px}.brand{font-size:14px}.panel{border-radius:10px}.preview-header-meta span{display:none}.preview-header-meta .copy-touch{display:inline}.timeline-track{grid-template-columns:minmax(72px,30%) 1fr}.timeline-track-meta{display:none}}@media(hover:none)and (pointer:coarse){.copy-hover{display:none}.copy-touch{display:inline}.route-link,.github-link,.preview-view-tab,.section-header,.template-button,.api-copy-button,.export-button,.animation-action,.animation-export-actions button,.controls-panel button,.controls-panel summary,.layered-layer-check,.text-flow-reset-btn{min-height:40px}.export-button,.template-button.active{min-height:44px}.controls-panel input[type=color],.layered-format-toggle{height:40px}.layered-format-option{min-height:40px}.visual-editor-artboard-content,.visual-editor-artboard{touch-action:pan-y pinch-zoom}}@media(max-height:560px)and (hover:none)and (pointer:coarse){.header-top-row{display:none}.example-header{padding-top:max(5px,env(safe-area-inset-top))}}