.demo{--demo-w:min(68rem, calc(100vw - 2rem));width:var(--demo-w);margin:.5rem 0 1rem calc(50% - var(--demo-w) / 2);gap:.6rem;display:grid}.demo-bar{flex-wrap:wrap;align-items:center;gap:.25rem;display:flex}.demo-slot{align-items:center;gap:.25rem;display:inline-flex}.demo-sep{font-size:var(--text-label);color:var(--faint);margin-inline:.6rem .35rem}.demo-tab{border-radius:var(--r-2);min-height:32px;color:var(--quiet);cursor:pointer;background:0 0;border:0;padding:0 .7rem;transition:background-color .15s ease-out,color .15s ease-out;position:relative}.demo-tab:before{content:"";position:absolute;inset:-6px 0}.demo-tab[aria-pressed=true]{background:var(--surface-2);color:var(--strong)}.demo-tab:active{transform:scale(.96)}.demo-notes{justify-items:center;display:grid}.demo-note{text-align:center;text-wrap:balance;visibility:hidden;grid-area:1/1;max-width:56ch}.demo-note[data-on]{visibility:visible}.demo-missing{border:1px dashed var(--line);border-radius:var(--r-2);color:var(--quiet);padding:.75rem 1rem}.shots{--w:min(var(--shots-w), 60rem, calc(100vw - 2rem));width:var(--w);margin:.5rem 0 1rem calc(50% - var(--w) / 2);flex-wrap:wrap;align-items:flex-start;gap:1rem;display:flex}.shot{gap:.5rem;min-width:0;margin:0;display:grid}.shot img{border-radius:var(--r-2);width:100%;height:auto;box-shadow:0 0 0 1px var(--line);display:block}.shot figcaption{text-wrap:balance}.demo-stage{contain:layout paint;border-radius:var(--r-3);height:min(38rem,78svh);box-shadow:0 0 0 1px var(--line);isolation:isolate;overflow:hidden}.demo-stage .gpt{height:100%}.demo-stage .main{padding-top:clamp(1.5rem,12%,5.5rem)}.demo-stage .gpt[data-docked] .main{padding-top:0}.demo-stage .set-scrim{inset:0}.demo-stage .side{bottom:0}@media (hover:hover) and (pointer:fine){.demo-tab:hover{background:var(--fill);color:var(--text)}.demo-tab[aria-pressed=true]:hover{background:var(--surface-2);color:var(--strong)}}@media (width<=40rem){.shots{flex-direction:column}.shot{width:100%;flex:none!important}.shot img{width:auto;max-width:100%;max-height:70svh;margin-inline:auto}.demo-stage{height:min(36rem,82svh)}.demo-sep{margin-inline-start:.2rem}}@media (prefers-reduced-motion:reduce){.demo-tab:active{transform:none}}