.preview-surface[data-astro-cid-hdtye3dk]{align-content:center;justify-self:stretch;gap:var(--gap);block-size:100%;min-block-size:0;inline-size:auto;min-inline-size:0;max-inline-size:100%;display:grid}.preview-heading[data-astro-cid-hdtye3dk]{text-align:center;inline-size:min(100%,40rem);margin-inline:auto;& p{color:var(--text-muted);text-wrap:balance;margin:0;font-size:1rem}}.demo-callout[data-astro-cid-hdtye3dk]{align-items:center;gap:var(--gap);border:1px solid color-mix(in oklch, var(--brand-blue) 52%, var(--border-color));border-radius:calc(var(--radius) * .75);background:color-mix(in oklch, var(--brand-blue) 12%, var(--surface));text-align:start;grid-template-columns:1fr;padding:.75rem;display:grid;& strong{color:var(--text);margin-block-end:.15rem;display:block}}.demo-actions[data-astro-cid-hdtye3dk]{flex-wrap:wrap;justify-content:flex-start;gap:.4rem;display:flex;& button{border:1px solid color-mix(in oklch, var(--brand-blue) 62%, var(--border-color));border-radius:calc(var(--radius) * .55);background:var(--surface);min-block-size:2.5rem;color:var(--text);cursor:pointer;font:inherit;font-weight:var(--fw-bold);padding:.45rem .7rem;&:where(:hover,:focus-visible),&[aria-pressed=true]{background:var(--brand-blue);color:var(--on-brand-blue)}&:focus-visible{outline:3px solid color-mix(in oklch, var(--brand-blue) 55%, transparent);outline-offset:2px}}}.preview-heading[data-astro-cid-hdtye3dk] .guide-legend[data-astro-cid-hdtye3dk]{justify-content:center;margin-block-start:var(--gap-sm);font-size:.875rem;display:flex;& span{align-items:center;gap:.4rem;display:inline-flex;&:before{content:"";border-block-start:2px dashed var(--brand-orange);inline-size:1.5rem}}}.scroll-stage[data-astro-cid-hdtye3dk]{border-radius:var(--radius);block-size:min(21rem,46dvh);min-block-size:18rem;inline-size:min(100%,40rem);min-inline-size:0;max-inline-size:100%;margin-inline:auto;position:relative;overflow:clip}.scrollport[data-astro-cid-hdtye3dk]{overscroll-behavior:contain;scroll-snap-type:both mandatory;block-size:100%;inline-size:100%;scroll-padding:var(--scroll-padding-top) var(--scroll-padding-right) var(--scroll-padding-bottom) var(--scroll-padding-left);border-radius:var(--radius);background:0 0;grid-template-columns:repeat(3,minmax(16rem,72%));grid-auto-rows:72%;gap:1.5rem;margin:0;padding:1.5rem;display:grid;overflow:auto;&:focus-visible{outline:3px solid color-mix(in oklch, var(--brand-blue) 56%, transparent);outline-offset:4px}}.snap-target[data-astro-cid-hdtye3dk]{box-sizing:border-box;align-content:end;gap:var(--gap-sm);border:1px solid color-mix(in oklch, var(--target-color) 72%, #172033);border-radius:var(--radius);background:var(--target-color);color:#172033;scroll-snap-align:start;min-block-size:0;min-inline-size:0;padding:1.5rem;transition:box-shadow .2s;display:grid;position:relative;&>[data-astro-cid-hdtye3dk]{margin:0}& .demo-badge{color:#fff;font-size:.7rem;font-weight:var(--fw-bold);background:#172033;border-radius:999px;padding:.2rem .45rem;position:absolute;inset-block-start:.75rem;inset-inline-end:.75rem}& h2{font-size:clamp(1.5rem,1rem + 2vw,2.5rem)}& p{max-inline-size:34ch;font-size:1rem}&:focus-visible{outline-offset:-8px;outline:4px solid #172033}}.preview-surface[data-astro-cid-hdtye3dk][data-demo-align] .demo-target[data-astro-cid-hdtye3dk]{box-shadow:0 0 0 4px var(--brand-orange), 0 0 0 8px color-mix(in oklch, var(--brand-orange) 28%, transparent)}.preview-surface[data-astro-cid-hdtye3dk][data-demo-align=end] .demo-target[data-astro-cid-hdtye3dk]{scroll-snap-align:end}.scroll-padding-guide[data-astro-cid-hdtye3dk]{z-index:2;inset:var(--scroll-padding-top) var(--scroll-padding-right) var(--scroll-padding-bottom) var(--scroll-padding-left);border:2px dashed color-mix(in oklch, var(--brand-orange) 82%, #172033);border-radius:calc(var(--radius) * .7);box-shadow:0 0 0 100vmax color-mix(in oklch, var(--brand-orange) 10%, transparent);clip-path:inset(-100vmax);pointer-events:none;position:absolute}@media (width<=90rem){.preview-surface[data-astro-cid-hdtye3dk]{align-content:start;align-self:start;block-size:auto;min-block-size:100%}}@media (width<=40rem){.demo-actions[data-astro-cid-hdtye3dk] button[data-astro-cid-hdtye3dk]{flex:8rem}.scroll-stage[data-astro-cid-hdtye3dk]{block-size:min(20rem,55dvh);min-block-size:17rem}.snap-target[data-astro-cid-hdtye3dk]{padding:var(--padding);& h2{font-size:clamp(1.35rem,1rem + 4vw,2rem)}}}