.demo-layout{gap:var(--space-4);display:grid}.demo-stage{aspect-ratio:16/10}.demo-controls{gap:var(--space-4) var(--space-5);padding:var(--space-4);border-radius:var(--radius);background:var(--bg-raised);box-shadow:inset 0 0 0 1px var(--hair);grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));display:grid}.demo-control{align-content:start;gap:var(--space-2);min-width:0;display:grid}.demo-control-label{justify-content:space-between;gap:var(--space-2);font-size:var(--text-sm);color:var(--fg-2);font-weight:520;display:flex}.demo-control-output{color:var(--fg);font-size:var(--text-micro);text-transform:none}.demo-control-hint{color:var(--fg-3);font-size:var(--text-xs);line-height:1.4}.demo-actions{align-items:center;gap:var(--space-2);grid-column:1/-1;display:flex}@media (width>=1100px){.demo-layout{grid-template-columns:minmax(0,1fr) 320px;align-items:start}.demo-controls{top:calc(var(--nav-offset) + var(--space-4));grid-template-columns:1fr;position:sticky}}@media (width<=700px){.demo-stage{aspect-ratio:4/5}}