#demo-root{min-height:100dvh;display:grid;place-items:center;padding:var(--space-lg)}:root[data-embed="1"] body{background:transparent}:root[data-embed="1"] #demo-root{height:100dvh;padding:0}.demo-frame{--demo-rail-width: 280px;--demo-topbar-height: 44px;width:min(1120px,100%);height:min(700px,calc(100dvh - 3rem));display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;background:var(--color-chrome);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}:root[data-embed="1"] .demo-frame{width:100%;height:100%;border-radius:0;box-shadow:none}.demo-topbar{display:flex;align-items:center;gap:var(--space-sm);min-height:var(--demo-topbar-height);padding-inline:var(--space-sm) var(--space-md);border-bottom:1px solid var(--color-hairline)}.demo-tabs{display:flex;gap:var(--space-xs);align-self:stretch;align-items:center;padding-left:var(--space-sm);border-left:1px solid var(--color-hairline)}.demo-tab{height:28px;padding-inline:.7rem;font-size:.75rem;font-weight:500;color:var(--color-mute);background:none;border:1px solid transparent;border-radius:var(--radius-md);transition:color var(--motion-hover),background-color var(--motion-hover),border-color var(--motion-hover)}.demo-tab:hover{color:var(--color-ink)}.demo-tab[aria-pressed=true]{color:var(--color-ink);background:var(--color-chrome-overlay);border-color:var(--color-hairline-strong)}.demo-tab:active{transform:scale(.97)}.demo-tab:focus-visible{outline:2px solid var(--color-link);outline-offset:2px}.demo-editor{display:grid;grid-template-columns:minmax(0,1fr) var(--demo-rail-width);min-height:0}.demo-stage{position:relative;display:grid;place-items:center;overflow:hidden;min-height:0;background:var(--color-stage);padding:var(--space-md)}.demo-stage-host{position:relative;line-height:0;overflow:hidden;border-radius:4px;background:var(--color-chrome-raised);box-shadow:var(--shadow-canvas)}.demo-commands{width:100%;min-width:0;display:flex;align-items:center;gap:var(--space-sm);padding:.3rem .5rem .3rem var(--space-md);border-radius:var(--radius-pill);background:color-mix(in srgb,var(--color-chrome-overlay) 92%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--shadow-float)}.demo-commands-label{flex:none;font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--color-mute);white-space:nowrap}.demo-command-chips{display:flex;gap:var(--space-xs);min-width:0;overflow-x:auto;scrollbar-width:none;padding:3px;margin:-3px}.demo-command-chip{flex:none;height:28px;padding-inline:.7rem;font-size:.75rem;white-space:nowrap;color:var(--color-body);background:var(--color-canvas-soft-2);border:1px solid var(--color-hairline);border-radius:var(--radius-pill);transition:color var(--motion-hover),background-color var(--motion-hover),border-color var(--motion-hover)}.demo-command-chip:hover{color:var(--color-ink);border-color:var(--color-hairline-strong)}.demo-command-chip:active{transform:scale(.97)}.demo-command-chip:focus-visible{outline:2px solid var(--color-link);outline-offset:2px}.demo-editor-rail{display:flex;flex-direction:column;gap:var(--space-md);min-width:0;overflow-y:auto;padding:var(--space-md);background:var(--color-chrome-raised);border-left:1px solid var(--color-hairline);scrollbar-width:thin}.demo-note{font-size:.75rem;color:var(--color-mute)}.demo-layer-row{width:100%;font:inherit;text-align:left;background:none;border:none}.demo-layer-row:focus-visible{outline:2px solid var(--color-link);outline-offset:-2px}.demo-layer-row .layer-name{white-space:nowrap}.demo-swap-tiles{display:flex;gap:var(--space-xs)}.demo-swap-tile{flex:1 1 0;min-width:0;min-height:0;gap:.3rem;padding:.35rem .25rem}.demo-swap-tile[aria-pressed=true]{color:var(--color-ink);border-color:var(--color-accent-bright)}.demo-swap-art{display:block;width:100%;height:26px;object-fit:contain;border-radius:var(--radius-sm)}.demo-swap-letters{display:grid;place-items:center;font-family:var(--font-mono);font-size:.75rem;font-weight:500;line-height:1}.demo-swap-label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.6875rem}.demo-ticker{display:flex;align-items:center;gap:var(--space-sm);font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--color-mute)}.demo-ticker-dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--color-accent-bright);animation:demo-pulse 1.1s ease-in-out infinite}@keyframes demo-pulse{0%,to{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}.demo-upsell{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--color-chrome-raised);border-top:1px solid var(--color-hairline)}.demo-upsell-copy{color:var(--color-body)}.demo-upsell .btn-primary{text-decoration:none}@media(prefers-reduced-motion:reduce){.demo-ticker-dot{animation:none;opacity:1}.demo-tab:active,.demo-command-chip:active{transform:none}}@media(max-width:760px){.demo-editor{grid-template-columns:minmax(0,1fr);grid-template-rows:clamp(180px,55vw,260px) minmax(0,1fr)}.demo-stage{padding:12px}.demo-editor-rail{border-left:none;border-top:1px solid var(--color-hairline)}.demo-commands{padding-left:var(--space-sm)}.demo-commands-label{display:none}}.demo-sample-label{margin-left:auto;font-size:12px;color:var(--color-body);white-space:nowrap}.demo-headline-control{display:grid;gap:8px}.demo-headline-control label{font-size:13px;color:var(--color-ink)}.demo-headline-control textarea{width:100%;resize:vertical;min-height:64px;padding:10px;font:inherit;font-size:14px;line-height:1.4;color:var(--color-ink);background:var(--color-chrome);border:1px solid var(--color-hairline-strong);border-radius:var(--radius-md)}.demo-headline-control textarea:focus-visible{outline:2px solid var(--color-accent-bright);outline-offset:2px}.demo-status{display:grid;gap:12px;color:var(--color-body)}.demo-status h2{font-size:18px;color:var(--color-ink)}.demo-status p,.demo-note{color:var(--color-body)}.demo-error{padding:8px 16px;color:var(--color-danger);font-size:13px}.demo-swap-tile{min-height:54px}.demo-tab,.demo-command-chip{min-height:36px}@media(max-width:460px){.demo-sample-label{display:none}.demo-tabs{padding-left:4px;gap:2px}.demo-tab{padding-inline:8px}.demo-frame{--demo-topbar-height: 48px}.demo-upsell-copy{font-size:12px}.demo-upsell .btn-primary{width:100%;justify-content:center}}@media(max-width:760px){.demo-editor-rail{gap:12px}}@media(max-width:460px){.demo-sample-label{display:inline;font-size:10px}.demo-topbar{gap:4px;padding-inline:8px}.demo-tab{padding-inline:6px}}@media(max-width:460px){.demo-topbar .toolbar-brand{padding:0}.demo-tab{font-size:11px}}@media(max-width:360px){.demo-topbar{flex-wrap:wrap;padding-block:4px}}@media(max-width:600px){.demo-command-chips{flex-wrap:wrap;overflow-x:visible}}