.demo{display:grid;gap:1.5rem;align-items:start}@media(min-width:62rem){.demo{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}}.demo__main,.demo__side{min-width:0}.demo__side>*+*{margin-top:1.5rem}.demo__actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.9rem}.stage--tall{aspect-ratio:4 / 3;width:100%;min-height:18rem}.status--count:empty{display:none}.status--count:before{content:none}.wire{border:1px solid var(--line);border-radius:var(--radius-m);background:var(--sunken)}.wire summary{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-height:2.75rem;padding:.5rem 1rem;font-weight:700;cursor:pointer}.wire summary svg{font-size:1.25rem}.wire__hint{color:var(--ink-soft);font-size:.875rem;font-weight:400}.wire__list{display:flex;flex-direction:column;gap:.35rem;height:19rem;margin:0;padding:.25rem 1rem 1rem;overflow-y:auto;list-style:none}.wire__list:empty:before{content:"Waiting for the first frame…";color:var(--ink-soft);font-size:.9375rem}.wire__list li{display:flex;min-width:0}.wire__legend{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;padding:.75rem 1rem;border-top:1px solid var(--line);font-size:.875rem}.explain{margin-top:clamp(2.5rem,6vw,4rem)}.explain>h2{margin-bottom:1.25rem;font-size:1.75rem}.explain__grid{display:grid;gap:1.5rem;align-items:start}@media(min-width:62rem){.explain__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:2.5rem}}.explain__grid>*{min-width:0}.panel{border:var(--outline);border-radius:var(--radius-l);background:var(--surface);overflow:hidden}.panel__head{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;padding:.85rem 1.25rem;border-bottom:1px solid var(--line)}.panel__head h2{margin-right:auto;font-size:1.1875rem}.panel__body{padding:1.25rem}.field+.field{margin-top:1rem}.field label,.field legend{display:block;margin-bottom:.35rem;padding:0;font-weight:600}.field .help{margin-top:.3rem;color:var(--ink-soft);font-size:.875rem}fieldset{margin:0;padding:0;border:0;min-width:0}.form-message{margin-top:.85rem;font-weight:600}.form-message:empty{display:none}.form-message[data-kind=error]{padding:.6rem .8rem;border-radius:var(--radius-s);background:var(--rose);color:var(--on-pastel)}.chat{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:min(34rem,75vh)}.chat__members{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none}.who{display:inline-flex;align-items:center;gap:.3rem;padding:.1rem .6rem;border-radius:999px;background:var(--who, var(--lilac));color:var(--on-pastel);font-size:.875rem;font-weight:600}.chat__log{display:flex;flex-direction:column;gap:.6rem;margin:0;padding:1.25rem;overflow-y:auto;list-style:none}.message{max-width:85%;align-self:flex-start}.message__meta{display:block;margin-bottom:.15rem;color:var(--ink-soft);font-size:.8125rem}.message__text{display:inline-block;padding:.5rem .8rem;border-radius:1rem 1rem 1rem .3rem;background:var(--who, var(--sunken));color:var(--on-pastel);overflow-wrap:anywhere}.message--mine{align-self:flex-end;text-align:right}.message--mine .message__text{border-radius:1rem 1rem .3rem;text-align:left}.message--bot .message__text{background:var(--sky)}.message--system{align-self:center;max-width:none;color:var(--ink-soft);font-size:.875rem}.chat__foot{padding:.5rem 1.25rem 1.25rem;border-top:1px solid var(--line)}.chat__typing{min-height:1.5rem;color:var(--ink-soft);font-size:.875rem}.composer{display:flex;gap:.6rem}.composer input{flex:1;min-width:0}.kinds{display:flex;flex-wrap:wrap;gap:.5rem}.kind{position:relative}.kind input{position:absolute;inset:0;opacity:0;cursor:pointer}.kind span{display:inline-flex;align-items:center;gap:.4rem;min-height:2.75rem;padding:0 .9rem;border:var(--outline);border-radius:999px;font-weight:600}.kind input:checked+span{background:var(--tint);color:var(--on-pastel);box-shadow:inset 0 0 0 1.5px var(--ink)}.kind input:focus-visible+span{outline:3px solid var(--accent);outline-offset:3px}.toasts{display:flex;flex-direction:column;gap:.6rem;min-height:8rem;margin:0;padding:0;list-style:none}.toasts:empty:before{content:"Nothing yet. Send a notification and it shows up here, in every window that has this room open.";color:var(--ink-soft)}.toast{display:grid;grid-template-columns:auto 1fr;gap:.1rem .75rem;padding:.8rem 1rem;border-radius:var(--radius-m);background:var(--tint, var(--sky));color:var(--on-pastel)}.toast svg{grid-row:span 2;font-size:1.5rem;margin-top:.1rem}.toast strong,.toast p{overflow-wrap:anywhere}.toast time{grid-column:2;font-size:.8125rem}.curl{margin-top:1.5rem}.curl pre{white-space:pre-wrap;overflow-wrap:anywhere}.poll__options{display:grid;gap:.6rem;margin:0;padding:0;list-style:none}.option{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5rem .75rem;width:100%;min-height:3.25rem;padding:.7rem 1rem .8rem;border:var(--outline);border-radius:var(--radius-m);background:var(--surface);color:var(--ink);font:inherit;text-align:left;cursor:pointer}.option:hover{background:var(--sunken)}.option[aria-pressed=true]{cursor:default;background:var(--sunken);box-shadow:inset 0 0 0 1.5px var(--ink)}.option__track{grid-column:1 / -1;height:.5rem;border-radius:999px;background:var(--sunken);overflow:hidden}.option__bar{display:block;height:100%;width:calc(var(--share, 0) * 100%);border-radius:inherit;background:var(--tint, var(--mint));box-shadow:inset 0 0 0 1px var(--ink);transition:width .3s ease}.option__label{font-weight:600}.option__label svg{margin-left:.3rem}.option__count{font-variant-numeric:tabular-nums;white-space:nowrap}.poll__total{margin-top:1rem;color:var(--ink-soft)}