.realtime-demo:where(.astro-y7omxgqc){--client-left: #f27fb8;--client-right: #8f9cff;--tint: 30%;--link: var(--sl-bright);--link-opacity: .55;position:relative;container-type:inline-size;margin:1.5rem 0;padding:2.25rem 1rem 1rem;border-radius:.5rem;background:var(--sl-bg);color:var(--sl-ink)}[data-theme=light] .realtime-demo:where(.astro-y7omxgqc){--client-left: #db5297;--client-right: #2f3fe0;--tint: 18%;--link: var(--sl-accent);--link-opacity: .35}.realtime-demo:where(.astro-y7omxgqc).is-collapsed{padding:0;background:none}.collapse:where(.astro-y7omxgqc){position:absolute;top:.5rem;right:.5rem;display:grid;place-items:center;width:1.5rem;height:1.5rem;padding:0;border:0;border-radius:.25rem;background:transparent;color:var(--sl-ink);cursor:pointer}.collapse:where(.astro-y7omxgqc)[hidden],.strip:where(.astro-y7omxgqc)[hidden]{display:none}.collapse:where(.astro-y7omxgqc) svg:where(.astro-y7omxgqc){width:.65rem;height:.65rem;fill:currentColor}.strip:where(.astro-y7omxgqc){display:flex;align-items:center;gap:.5rem;width:100%;padding:.4rem .75rem;border:1px solid var(--sl-track);border-radius:.5rem;background:var(--sl-bg);color:var(--sl-ink);font:inherit;font-size:var(--sl-text-sm);text-align:left;cursor:pointer}.strip-action:where(.astro-y7omxgqc){margin-left:auto;color:var(--sl-muted)}.strip:where(.astro-y7omxgqc) svg:where(.astro-y7omxgqc){flex-shrink:0;width:.7rem;height:.7rem;fill:var(--sl-accent)}.strip:where(.astro-y7omxgqc):hover{border-color:var(--sl-accent)}.collapse:where(.astro-y7omxgqc):hover{color:var(--sl-bright)}.collapse:where(.astro-y7omxgqc):focus-visible,.strip:where(.astro-y7omxgqc):focus-visible{outline:2px solid var(--sl-accent);outline-offset:2px}.is-collapsed:where(.astro-y7omxgqc) .devices:where(.astro-y7omxgqc),.is-collapsed:where(.astro-y7omxgqc) .collapse:where(.astro-y7omxgqc),.is-collapsed:where(.astro-y7omxgqc) .build:where(.astro-y7omxgqc){display:none}.devices:where(.astro-y7omxgqc){position:relative;display:grid;grid-template-areas:"left right" "server server";grid-template-columns:1fr 1fr;gap:1rem}.network:where(.astro-y7omxgqc){position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.link:where(.astro-y7omxgqc){fill:none;stroke:var(--link);stroke-opacity:var(--link-opacity);stroke-width:1.5;stroke-dasharray:3 5}.network:where(.astro-y7omxgqc) .packet[hidden]{display:none}.browser:where(.astro-y7omxgqc)[data-client=left]{--client: var(--client-left);grid-area:left}.browser:where(.astro-y7omxgqc)[data-client=right]{--client: var(--client-right);grid-area:right}.server:where(.astro-y7omxgqc){position:relative;grid-area:server;justify-self:center;width:8rem}.server:where(.astro-y7omxgqc) svg:where(.astro-y7omxgqc){display:block;width:100%;height:auto}.top-start:where(.astro-y7omxgqc){stop-color:var(--sl-top);stop-opacity:.5}.top-end:where(.astro-y7omxgqc){stop-color:var(--sl-top);stop-opacity:1}.slab-base:where(.astro-y7omxgqc){fill:var(--sl-slab);stroke:none}.slab-left:where(.astro-y7omxgqc),.slab-right:where(.astro-y7omxgqc),.slab-top:where(.astro-y7omxgqc),.vent:where(.astro-y7omxgqc){stroke-width:1.29;stroke-linejoin:round}.slab-left:where(.astro-y7omxgqc),.slab-right:where(.astro-y7omxgqc){fill:var(--sl-accent)}.slab-left:where(.astro-y7omxgqc){fill-opacity:.28}.slab-right:where(.astro-y7omxgqc){fill-opacity:.45}.slab-top:where(.astro-y7omxgqc){fill:url(#rt-top)}.vent:where(.astro-y7omxgqc){stroke-opacity:.8;stroke-width:1.5;stroke-linecap:round}.led:where(.astro-y7omxgqc){fill:var(--sl-led);stroke:none;opacity:.45;transition:opacity .2s}.is-busy:where(.astro-y7omxgqc) .led:where(.astro-y7omxgqc){opacity:1}.browser:where(.astro-y7omxgqc){display:flex;flex:1;flex-direction:column;position:relative;min-width:0;aspect-ratio:4 / 3;overflow:hidden;border:1px solid color-mix(in srgb,var(--client) calc(var(--tint) * 2.5),var(--sl-track));border-radius:.6rem;background:var(--sl-bg);box-shadow:0 6px 18px #0000002e}.chrome:where(.astro-y7omxgqc){display:flex;align-items:center;gap:.6rem;padding:.45rem .6rem;border-bottom:1px solid color-mix(in srgb,var(--client) calc(var(--tint) * 2),var(--sl-track));background:color-mix(in srgb,var(--client) var(--tint),var(--sl-bg))}.lights:where(.astro-y7omxgqc){display:flex;gap:5px}.lights:where(.astro-y7omxgqc) span:where(.astro-y7omxgqc){width:9px;height:9px;border-radius:50%;background:var(--sl-track)}.nav:where(.astro-y7omxgqc){display:flex;gap:2px}.chrome:where(.astro-y7omxgqc) svg:where(.astro-y7omxgqc){width:13px;height:13px;fill:none;stroke:var(--sl-muted);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.address:where(.astro-y7omxgqc){display:flex;flex:1;align-items:center;gap:.35rem;min-width:0;padding:.2rem .6rem;border-radius:999px;background:color-mix(in srgb,var(--client) calc(var(--tint) * .8),transparent);color:var(--sl-muted);font-size:var(--sl-text-xs, .75rem);white-space:nowrap}.address:where(.astro-y7omxgqc) span:where(.astro-y7omxgqc){overflow:hidden;text-overflow:ellipsis}.address:where(.astro-y7omxgqc) svg:where(.astro-y7omxgqc){flex-shrink:0;width:11px;height:11px}.screen:where(.astro-y7omxgqc){position:relative;flex:1;min-height:0;background:var(--sl-slab)}canvas:where(.astro-y7omxgqc){display:block;width:100%;height:100%;touch-action:none;cursor:var(--brush, crosshair)}@container (max-width: 36rem){.devices:where(.astro-y7omxgqc){grid-template-areas:"left" "server" "right";grid-template-columns:1fr}.browser:where(.astro-y7omxgqc){aspect-ratio:16 / 9}}