:where(.astro-h4kev5b3)[data-feature-clip]{--ct: 100%;--cb: 100%;clip-path:inset(0 round calc(var(--radius) + 4px));-webkit-user-select:none;user-select:none}:where(.astro-h4kev5b3)[data-feature-clip] img:where(.astro-h4kev5b3){-webkit-user-drag:none}.clip-source-code:where(.astro-h4kev5b3){-webkit-user-select:text;user-select:text}:where(.astro-h4kev5b3)[data-feature-clip][data-split]{--ct: 94%;--cb: 90%}.clip-panel:where(.astro-h4kev5b3){position:absolute;inset:0}.clip-media:where(.astro-h4kev5b3),.clip-media-backing:where(.astro-h4kev5b3){clip-path:polygon(0 0,var(--ct) 0,var(--cb) 100%,0 100%);transition:clip-path .45s cubic-bezier(.4,0,.2,1)}.clip-media:where(.astro-h4kev5b3){z-index:10}.clip-media-backing:where(.astro-h4kev5b3){position:absolute;inset:0;z-index:8;background:#f4f4f5;pointer-events:none}.clip-media:where(.astro-h4kev5b3) img:where(.astro-h4kev5b3){color:transparent;font-size:0}.clip-code:where(.astro-h4kev5b3){z-index:5}:where(.astro-h4kev5b3)[data-feature-clip][data-split] .clip-code:where(.astro-h4kev5b3){clip-path:none}@property --fade-start{syntax: "<percentage>"; inherits: false; initial-value: 48%;}@property --fade-mid{syntax: "<percentage>"; inherits: false; initial-value: 66%;}@property --fade-end{syntax: "<percentage>"; inherits: false; initial-value: 84%;}:where(.astro-h4kev5b3)[data-feature-clip][data-split] .clip-media:where(.astro-h4kev5b3),:where(.astro-h4kev5b3)[data-feature-clip][data-split] .clip-media-backing:where(.astro-h4kev5b3){--fade-start: 57%;--fade-mid: 66%;--fade-end: 75%;-webkit-mask-image:linear-gradient(100deg,black var(--fade-start),rgba(0,0,0,.35) var(--fade-mid),transparent var(--fade-end));mask-image:linear-gradient(100deg,black var(--fade-start),rgba(0,0,0,.35) var(--fade-mid),transparent var(--fade-end));transition:clip-path .45s cubic-bezier(.4,0,.2,1),--fade-start .45s cubic-bezier(.4,0,.2,1),--fade-mid .45s cubic-bezier(.4,0,.2,1),--fade-end .45s cubic-bezier(.4,0,.2,1)}:where(.astro-h4kev5b3)[data-feature-clip][data-split][data-hover=media] .clip-media:where(.astro-h4kev5b3),:where(.astro-h4kev5b3)[data-feature-clip][data-split][data-open=media] .clip-media:where(.astro-h4kev5b3),:where(.astro-h4kev5b3)[data-feature-clip][data-split][data-hover=media] .clip-media-backing:where(.astro-h4kev5b3),:where(.astro-h4kev5b3)[data-feature-clip][data-split][data-open=media] .clip-media-backing:where(.astro-h4kev5b3){--fade-start: 130%;--fade-mid: 150%;--fade-end: 170%}.clip-code:where(.astro-h4kev5b3){clip-path:polygon(var(--ct) 0,100% 0,100% 100%,var(--cb) 100%);transition:clip-path .45s cubic-bezier(.4,0,.2,1)}:where(.astro-h4kev5b3)[data-clip-divider]{display:none}.clip-play:where(.astro-h4kev5b3){transition:opacity .3s ease}:where(.astro-h4kev5b3)[data-feature-clip][data-split][data-hover=code] .clip-play:where(.astro-h4kev5b3),:where(.astro-h4kev5b3)[data-feature-clip][data-split][data-open=code] .clip-play:where(.astro-h4kev5b3){opacity:0}:where(.astro-h4kev5b3)[data-feature-clip][data-split][data-hover=media]{--ct: 100%;--cb: 100%}:where(.astro-h4kev5b3)[data-feature-clip][data-split][data-open=media]{--ct: 100%;--cb: 100%}:where(.astro-h4kev5b3)[data-feature-clip][data-split][data-hover=code] .clip-media:where(.astro-h4kev5b3),:where(.astro-h4kev5b3)[data-feature-clip][data-split][data-open=code] .clip-media:where(.astro-h4kev5b3),:where(.astro-h4kev5b3)[data-feature-clip][data-split][data-hover=code] .clip-media-backing:where(.astro-h4kev5b3),:where(.astro-h4kev5b3)[data-feature-clip][data-split][data-open=code] .clip-media-backing:where(.astro-h4kev5b3){--fade-start: -60%;--fade-mid: -40%;--fade-end: -10%}:where(.astro-h4kev5b3)[data-feature-clip][data-hover=code] .clip-source-button:where(.astro-h4kev5b3),:where(.astro-h4kev5b3)[data-feature-clip][data-open=code] .clip-source-button:where(.astro-h4kev5b3),.clip-source-button:where(.astro-h4kev5b3):hover{background-color:#fff;color:#18181b}.clip-code-scroll:where(.astro-h4kev5b3){left:60%;transition:left .45s cubic-bezier(.4,0,.2,1)}:where(.astro-h4kev5b3)[data-feature-clip][data-hover=code] .clip-code-scroll:where(.astro-h4kev5b3),:where(.astro-h4kev5b3)[data-feature-clip][data-open=code] .clip-code-scroll:where(.astro-h4kev5b3){left:0}.clip-code-scroll:where(.astro-h4kev5b3) pre.shiki{margin:0;white-space:pre}.clip-code-scroll:where(.astro-h4kev5b3) .shiki,.clip-code-scroll:where(.astro-h4kev5b3) .shiki span,.clip-source-code:where(.astro-h4kev5b3) .shiki,.clip-source-code:where(.astro-h4kev5b3) .shiki span{color:var(--shiki-dark)!important}.clip-source-dialog:where(.astro-h4kev5b3){border:none}.clip-source-code:where(.astro-h4kev5b3) pre.shiki{margin:0;white-space:pre}@media(prefers-reduced-motion:reduce){.clip-media:where(.astro-h4kev5b3),.clip-code:where(.astro-h4kev5b3),:where(.astro-h4kev5b3)[data-clip-divider]{transition:none}}.demo-grid:where(.astro-ogf5ymiv){--cell-h: 10rem;--cell-w: calc(var(--cell-h) * 16 / 9);--cap-h: 3.25rem;--inner-gap: .375rem;--row-gap: 1.75rem;display:grid;justify-content:center;gap:var(--row-gap) 1rem;grid-template-columns:var(--cell-w);grid-auto-rows:auto}.demo-cell:where(.astro-ogf5ymiv){display:flex;flex-direction:column;gap:var(--inner-gap)}.demo-cap:where(.astro-ogf5ymiv){display:flex;flex-direction:column;justify-content:flex-end;gap:.125rem;height:var(--cap-h);overflow:hidden}.demo-cap-title:where(.astro-ogf5ymiv){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.demo-cap-text:where(.astro-ogf5ymiv){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.demo-cell:where(.astro-ogf5ymiv) [data-feature-clip]{width:100%;height:var(--cell-h)}@media(min-width:640px){.demo-grid:where(.astro-ogf5ymiv){grid-template-columns:repeat(2,var(--cell-w))}}@media(min-width:1024px){.demo-grid:where(.astro-ogf5ymiv){--cell-h: 11rem;grid-template-columns:repeat(3,var(--cell-w))}.demo-cell--hero:where(.astro-ogf5ymiv){grid-column:span 2;grid-row:span 2}.demo-cell--hero:where(.astro-ogf5ymiv) [data-feature-clip]{height:calc(2 * var(--cell-h) + var(--cap-h) + var(--inner-gap) + var(--row-gap))}}@media(min-width:1280px){.demo-grid:where(.astro-ogf5ymiv){--cell-h: 10rem;grid-template-columns:repeat(4,var(--cell-w))}}@media(min-width:1600px){.demo-grid:where(.astro-ogf5ymiv){grid-template-columns:repeat(5,var(--cell-w))}}