.xfam-demo-gallery{--page: 1180px;--card-radius: calc(var(--radius-xl) + var(--space-4));position:relative;isolation:isolate;overflow-x:clip;min-height:100vh;padding:0 var(--space-16) var(--space-64)}.xfam-demo-gallery--site .xfam-demo-gallery__head{padding-block-start:var(--space-64)}.xfam-demo-gallery--app{min-height:0;padding:0}.xfam-demo-gallery--app .xfam-demo-gallery__works{margin-block-start:0}.xfam-demo-gallery__ground{position:absolute;inset:0 0 auto;height:100vh;z-index:-1;pointer-events:none}.xfam-demo-gallery__ground:before,.xfam-demo-gallery__ground:after{content:"";position:absolute;inset:0}.xfam-demo-gallery__ground:before{background:var(--stage-ground);mask:radial-gradient(ellipse 70% 60% at 50% 0%,#000 25%,transparent 100%)}.xfam-demo-gallery--site .xfam-demo-gallery__ground:before{content:none}.xfam-demo-gallery__ground:after{background:radial-gradient(ellipse 34% 30% at 38% -4%,color-mix(in srgb,var(--color-accent) 22%,transparent),transparent 70%),radial-gradient(ellipse 34% 30% at 62% -4%,color-mix(in srgb,var(--color-mint) 45%,transparent),transparent 70%)}html[data-theme-family=dark] .xfam-demo-gallery__ground:after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .012 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(90deg,color-mix(in srgb,var(--color-accent) 16%,transparent) 30%,color-mix(in srgb,var(--color-mint) 13%,transparent) 70%);mask:radial-gradient(ellipse 52% 40% at 50% -6%,#000 0%,rgb(0 0 0 / .972) 10%,rgb(0 0 0 / .896) 20%,rgb(0 0 0 / .784) 30%,rgb(0 0 0 / .648) 40%,rgb(0 0 0 / .5) 50%,rgb(0 0 0 / .352) 60%,rgb(0 0 0 / .216) 70%,rgb(0 0 0 / .104) 80%,rgb(0 0 0 / .028) 90%,transparent 100%)}.xfam-demo-gallery__head{position:relative;display:grid;justify-items:center;max-width:var(--page);margin:0 auto;padding:var(--space-96) 0 0;text-align:center}.xfam-demo-gallery__tools{position:absolute;inset-block-start:var(--space-24);inset-inline-end:0;display:inline-flex;align-items:center;gap:var(--space-4)}.xfam-demo-gallery__title{margin:0;max-width:16ch;font-family:var(--font-serif),serif;font-weight:var(--font-weight-semibold);font-size:clamp(var(--text-44),6.4vw,var(--text-80));line-height:1;letter-spacing:-.03em;color:var(--color-text);text-wrap:balance}.xfam-demo-gallery__lede{max-width:50ch;margin:var(--space-24) 0 0;font-size:var(--text-18);line-height:1.6;color:var(--color-text-muted);text-wrap:balance}.xfam-demo-gallery__works{list-style:none;max-width:var(--page);margin:var(--space-80) auto 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-24)}.xfam-demo-gallery__work{display:grid;transition:opacity var(--duration-luxe) var(--ease-enter),transform var(--duration-luxe) var(--ease-enter)}.xfam-demo-gallery__work.is-feature{grid-column:1 / -1}.xfam-demo-gallery__work.is-pending{opacity:0;transform:translateY(var(--space-24))}.xfam-demo-gallery__card{--pointer-x: 50%;--pointer-y: 0%;position:relative;display:grid;grid-template-rows:auto 1fr;padding:var(--space-8);border-radius:var(--card-radius);background-color:var(--color-bg);box-shadow:0 0 0 1px var(--color-border-faint),var(--shadow-card);color:inherit;text-decoration:none;transition:transform var(--duration-base) var(--ease-smooth)}.xfam-demo-gallery__work.is-feature .xfam-demo-gallery__card{grid-template-rows:none;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:stretch}.xfam-demo-gallery__card:after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(480px circle at var(--pointer-x) var(--pointer-y),color-mix(in srgb,var(--color-accent) 9%,transparent),transparent 45%);opacity:0;transition:opacity var(--duration-base) var(--ease-smooth);pointer-events:none}.xfam-demo-gallery__card:hover:after{opacity:1}.xfam-demo-gallery__card:focus-visible{outline:var(--xfi-focus-ring) solid var(--color-accent);outline-offset:var(--xfi-focus-offset-loose)}.xfam-demo-gallery__shot{position:relative;z-index:1;display:block;overflow:hidden;border-radius:calc(var(--card-radius) - var(--space-8));background:var(--stage-ground);box-shadow:inset 0 0 0 1px var(--color-border-faint)}.xfam-demo-gallery__screen{position:relative;display:block;overflow:hidden;aspect-ratio:1280 / 800}.xfam-demo-gallery__screen iframe{border:0;display:block;pointer-events:none}.xfam-demo-gallery__screen:has(>.xfam-empty-state){display:grid;place-content:center}.xfam-demo-gallery__screen.is-phone{aspect-ratio:390 / 844;max-height:70vh;margin:0 auto}@media(hover:hover){.xfam-demo-gallery__card:not(:hover,:focus-visible) .replayer-mouse{opacity:0}}.xfam-demo-gallery__body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-12);padding:var(--space-24) var(--space-20) var(--space-20)}.xfam-demo-gallery__work.is-feature .xfam-demo-gallery__body{justify-content:center;padding:var(--space-40) var(--space-32) var(--space-40) var(--space-40)}.xfam-demo-gallery__name{margin:0;font-family:var(--font-serif),serif;font-weight:var(--font-weight-semibold);font-size:var(--text-26);line-height:1.15;letter-spacing:-.015em;text-wrap:balance}.xfam-demo-gallery__work.is-feature .xfam-demo-gallery__name{font-size:clamp(var(--text-28),3vw,var(--text-40))}.xfam-demo-gallery__blurb{font-size:var(--text-15);line-height:1.6;color:var(--color-text-muted);text-wrap:pretty}.xfam-demo-gallery__card,.xfam-demo-gallery__body{min-width:0}.xfam-demo-gallery__tags{display:flex;flex-wrap:wrap;gap:var(--space-6)}.xfam-demo-gallery__foot{align-self:stretch;display:flex;align-items:center;justify-content:space-between;gap:var(--space-16);margin-block-start:auto;padding-block-start:var(--space-16);border-block-start:1px solid var(--color-border-faint)}.xfam-demo-gallery__time{font-family:var(--font-mono);font-size:var(--text-13);letter-spacing:.02em;color:var(--color-text-muted)}.xfam-demo-gallery__play{position:relative;z-index:1;width:var(--pill-height);height:var(--pill-height);margin-inline-start:auto;background-color:var(--color-bg);pointer-events:none}.xfam-demo-gallery__card:is(:hover,:focus-visible) .xfam-demo-gallery__play{color:var(--color-accent)}.xfam-demo-gallery__head>*{animation:xfam-demo-gallery-rise var(--duration-luxe) var(--ease-enter) both}.xfam-demo-gallery__head>:nth-child(2){animation-delay:calc(var(--stagger) * 1)}.xfam-demo-gallery__head>:nth-child(3){animation-delay:calc(var(--stagger) * 2)}@keyframes xfam-demo-gallery-rise{0%{opacity:0;transform:translateY(var(--space-12))}}@media(prefers-reduced-motion:reduce){.xfam-demo-gallery__work.is-pending{opacity:1;transform:none}.xfam-demo-gallery__head>*{animation:none}.xfam-demo-gallery__card:is(:hover,:focus-visible){transform:none}}@media(max-width:1024px){.xfam-demo-gallery__work.is-feature .xfam-demo-gallery__card{grid-template-columns:none;grid-template-rows:auto 1fr}.xfam-demo-gallery__work.is-feature .xfam-demo-gallery__body{padding:var(--space-24) var(--space-20) var(--space-20)}}@media(max-width:767px){.xfam-demo-gallery__head{padding-top:var(--space-80)}.xfam-demo-gallery__tools{inset-block-start:var(--space-16)}.xfam-demo-gallery__lede{font-size:var(--text-16)}.xfam-demo-gallery__works{grid-template-columns:minmax(0,1fr);margin-top:var(--space-48);gap:var(--space-20)}}