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