.hero-stage{border:1px solid var(--line);background:var(--porcelain);--hero-a:36%;--hero-b:36%;--hero-c:29%;--hero-d:34%;--hero-gap:12px;border-radius:28px;height:460px;padding:18px;display:block}.hero-stage .scene-viewport{height:100%}.hero-track{width:100%;height:100%;position:relative}.hero-slot{contain:layout paint;height:100%;position:absolute;top:0}.hero-agent{width:var(--hero-a);left:0}.hero-editor{left:calc(var(--hero-a) + var(--hero-gap));width:var(--hero-b)}.hero-preview{left:calc(var(--hero-a) + var(--hero-b) + var(--hero-gap)*2);width:var(--hero-c)}.hero-companion{left:calc(var(--hero-a) + var(--hero-b) + var(--hero-c) + var(--hero-gap)*3);width:var(--hero-d)}.hero-stage .hero-slot>.example-window{width:100%;height:100%}.hero-group-outline{left:calc(var(--hero-a) + var(--hero-gap));width:calc(var(--hero-b) + var(--hero-c) + var(--hero-gap));border:2px solid var(--cobalt);opacity:0;pointer-events:none;z-index:2;border-radius:12px;height:100%;position:absolute;top:0}.hero-demo-captions{height:24px;color:var(--muted);text-align:center;place-items:center;margin-top:16px;padding-inline:44px;font-size:14px;line-height:22px;display:grid}.hero-demo-captions>span{grid-area:1/1}.hero-demo-captions>span:not(:first-child){opacity:0}.hero-toggle{bottom:-8px}@media (width<=760px){.hero-stage{--hero-a:46%;--hero-b:44%;--hero-c:41%;--hero-d:46%;--hero-gap:10px;border-radius:22px;height:374px;padding:12px}.hero-stage .scene-viewport,.hero-group-outline{border-radius:8px}.hero-stage .example-window{box-shadow:none;border:0;border-radius:8px}.hero-demo-captions{height:22px;font-size:12px;line-height:20px}.hero-toggle{bottom:-9px}}