.shared-demo-layout{align-items:start;gap:.75rem;display:grid}.shared-demo-stage,.shared-demo-side,.shared-demo-artwork,.shared-demo-text,.shared-demo-nav,.shared-demo-dock{min-width:0}.shared-demo-side{gap:.75rem;display:grid}.shared-demo-participants{max-width:29rem}.shared-demo-dock{gap:.5rem;display:grid}.shared-demo-nav{flex-wrap:wrap}.shared-demo-nav button{white-space:normal;min-width:0;max-width:100%}.shared-demo-nav button:last-child{margin-left:auto}.shared-demo-tile-button{cursor:pointer;min-height:2.75rem}.shared-demo-tile-focus-icon{border:1px solid color-mix(in srgb,var(--gold-line) 42%,transparent);background:color-mix(in srgb,var(--background) 90%,transparent);width:1.45rem;height:1.45rem;color:var(--foreground);pointer-events:none;border-radius:999px;flex:none;justify-content:center;align-items:center;margin-left:auto;display:inline-flex;box-shadow:0 2px 8px #00000047}.shared-demo-tile-button[aria-pressed=true] .shared-demo-tile-focus-icon{border-color:color-mix(in srgb,var(--gold-line) 72%,transparent);color:var(--gold-line)}.shared-demo-participants [aria-pressed=true]{background:color-mix(in srgb,var(--gold-line) 10%,transparent)}.shared-demo-participants [hidden]{display:none}.shared-demo-participants[data-video-view=grandma] [data-demo-tile=grandma],.shared-demo-participants[data-video-view=child] [data-demo-tile=child]{grid-area:1/1/auto/-1}@media(min-width:768px)and (min-height:501px){.shared-demo-layout{grid-template-columns:minmax(0,1fr) minmax(15rem,19rem);gap:1rem}}@media(orientation:landscape)and (max-height:500px)and (max-width:980px){.shared-demo-page{padding:max(.25rem,env(safe-area-inset-top)) max(.45rem,env(safe-area-inset-right)) max(.25rem,env(safe-area-inset-bottom)) max(.45rem,env(safe-area-inset-left))}.shared-demo-intro{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:0 .75rem;max-width:none;margin-bottom:.25rem;display:grid}.shared-demo-intro>a{grid-row:span 2;min-height:2rem}.shared-demo-intro>p:first-of-type{margin-top:0;font-size:.65rem;line-height:1.1}.shared-demo-intro h1{margin-top:0;font-size:1rem;line-height:1.1}.shared-demo-intro-copy{display:none}.shared-demo-layout{height:max(17rem,calc(100dvh - 3.25rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)));grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-columns:minmax(0,1.6fr) minmax(17.5rem,1fr);align-items:stretch;gap:.25rem .5rem}.shared-demo-stage,.shared-demo-side{display:contents}.shared-demo-page-title{grid-area:1/2;align-self:center;margin:0}.shared-demo-page-title h2{font-size:.9rem;line-height:1.15}.shared-demo-page-title>span{display:none}.shared-demo-artwork{grid-area:1/1/5;justify-content:center;align-items:center;min-height:0;display:flex}.shared-demo-artwork>div{width:min(100%,177.778dvh - 5.77778rem);max-height:calc(100dvh - 3.25rem - env(safe-area-inset-top) - env(safe-area-inset-bottom))}.shared-demo-text{border:1px solid color-mix(in srgb,var(--gold-line) 25%,transparent);background:color-mix(in srgb,var(--card) 65%,transparent);scrollbar-width:thin;border-radius:.75rem;grid-area:2/2;min-height:0;padding:.3rem .45rem;font-size:.85rem;line-height:1.4;overflow-y:auto}.shared-demo-nav{grid-area:3/2;padding-top:.15rem}.shared-demo-nav button{min-height:2.5rem}.shared-demo-dock{grid-area:4/2;grid-template-columns:minmax(0,1fr) 4.7rem;align-items:center;gap:.3rem}.shared-demo-participants{gap:.3rem;min-width:0;max-width:none}.shared-demo-participants[data-video-view=grandma],.shared-demo-participants[data-video-view=child]{grid-template-columns:minmax(0,1fr)}.shared-demo-participants .shared-demo-tile-heading{padding:.1rem .35rem}.shared-demo-participants .shared-demo-tile-focus-icon{width:1.2rem;height:1.2rem}.shared-demo-participants .shared-demo-tile-focus-icon svg{width:.75rem;height:.75rem}.shared-demo-video-hint{clip:rect(0,0,0,0);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.shared-demo-dock>button{grid-area:1/2;min-width:4.7rem;max-width:4.7rem;min-height:2.75rem;padding:.25rem;font-size:.65rem;line-height:1.1}}