.screenshots:where(.astro-372fsj4e){border:1px solid var(--sl-color-gray-5);background:var(--sl-color-bg);border-radius:1rem;margin-block:2rem;overflow:hidden;container-type:inline-size}.screenshots:where(.astro-372fsj4e) :where(.astro-372fsj4e):where(p,figure,fieldset,legend,label,span,svg,img,a,div){margin:0}.screenshot-header:where(.astro-372fsj4e){border-bottom:1px solid var(--sl-color-gray-5);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem 1rem;padding:1rem 1.25rem;display:flex}.scene-title:where(.astro-372fsj4e){min-width:0;color:var(--sl-color-white);text-wrap:balance;font-size:.925rem;font-weight:600;line-height:1.5}.device-selector:where(.astro-372fsj4e){border:0;flex-shrink:0;min-width:0;max-width:100%;padding:0}.segments:where(.astro-372fsj4e){background:var(--sl-color-gray-6);box-shadow:inset 0 0 0 1px var(--sl-color-gray-5);border-radius:.6rem;gap:.2rem;padding:.2rem;display:flex}.device-label:where(.astro-372fsj4e){cursor:pointer;position:relative}.device-option:where(.astro-372fsj4e){min-height:1.875rem;color:var(--sl-color-gray-2);border-radius:.4rem;justify-content:center;align-items:center;gap:.4rem;padding:.25rem 1rem;font-size:.8rem;font-weight:600;line-height:1.25;transition:color .16s,background .16s,box-shadow .16s;display:flex}.device-option:where(.astro-372fsj4e) svg:where(.astro-372fsj4e){flex-shrink:0;width:1rem;height:1rem}.device-label:where(.astro-372fsj4e):hover .device-option:where(.astro-372fsj4e){color:var(--sl-color-white);background:color-mix(in srgb, var(--sl-color-bg) 55%, transparent)}.device-choice:where(.astro-372fsj4e):checked+.device-option:where(.astro-372fsj4e){color:var(--sl-color-text-accent);background:var(--sl-color-bg);box-shadow:0 1px 4px #00000014, 0 0 0 1px var(--sl-color-gray-5)}.device-choice:where(.astro-372fsj4e):focus-visible+.device-option:where(.astro-372fsj4e){outline:2px solid var(--sl-color-text-accent);outline-offset:3px}.visually-hidden:where(.astro-372fsj4e){clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.screenshots:where(.astro-372fsj4e):has(.device-choice) .device-panel:where(.astro-372fsj4e){display:none}.screenshots:where(.astro-372fsj4e):has(.device-choice[value=phone]:checked) .device-panel:where(.astro-372fsj4e)[data-device=phone],.screenshots:where(.astro-372fsj4e):has(.device-choice[value=tablet]:checked) .device-panel:where(.astro-372fsj4e)[data-device=tablet]{display:block}.device-stage:where(.astro-372fsj4e){--preview-image-height:28rem;background:radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--sl-color-accent-low) 65%, transparent), transparent 75%), color-mix(in srgb, var(--sl-color-gray-6) 55%, var(--sl-color-bg));grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);place-items:center;height:32rem;padding:1.5rem;display:grid;position:relative}.screenshot-link:where(.astro-372fsj4e){min-width:0;width:calc(var(--preview-image-height) * var(--screenshot-ratio));aspect-ratio:var(--screenshot-ratio);border-radius:.85rem;max-width:100%;text-decoration:none}.screenshot-link:where(.astro-372fsj4e):focus-visible{outline:2px solid var(--sl-color-text-accent);outline-offset:6px}.device:where(.astro-372fsj4e){border-radius:.85rem;width:100%;height:auto;display:block}.device:where(.astro-372fsj4e).tablet{border-radius:.5rem}.expand-icon:where(.astro-372fsj4e){border:1px solid var(--sl-color-gray-5);width:2.25rem;height:2.25rem;color:var(--sl-color-gray-2);background:var(--sl-color-bg);border-radius:.6rem;place-items:center;transition:color .16s,border-color .16s;display:grid;position:absolute;top:.75rem;right:.75rem}.expand-icon:where(.astro-372fsj4e) svg:where(.astro-372fsj4e){width:1rem;height:1rem}.screenshot-link:where(.astro-372fsj4e):is(:hover,:focus-visible) .expand-icon:where(.astro-372fsj4e){color:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent)}figcaption:where(.astro-372fsj4e){border-top:1px solid var(--sl-color-gray-5);color:var(--sl-color-gray-2);margin:0;padding:1rem 1.25rem;font-size:.8125rem;line-height:1.6}@container (width<=30rem){.screenshot-header:where(.astro-372fsj4e){flex-direction:column;align-items:flex-start;padding:1rem}.device-stage:where(.astro-372fsj4e){--preview-image-height:26rem;height:30rem;padding:1.25rem}figcaption:where(.astro-372fsj4e){padding:.9rem 1rem}}@media (prefers-reduced-motion:reduce){.device-option:where(.astro-372fsj4e),.expand-icon:where(.astro-372fsj4e){transition:none}}