.hero-film{position:relative;min-width:0;width:100%;margin:0;align-self:center;isolation:isolate}
.hero-film-frame{position:relative;aspect-ratio:3/2;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 7%,#000 88%,transparent);mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 7%,#000 88%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
.hero-film-poster,.hero-film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.hero-film-video{opacity:0}
.hero-film.has-frame .hero-film-video{opacity:1}
.hero-film-accessible{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.hero-film-toggle{position:absolute;right:18px;bottom:8px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--line,rgba(157,123,255,.2));border-radius:50%;background:var(--bg,#08070b);color:var(--ink,#f3ece4);cursor:pointer}
.hero-film-toggle[hidden]{display:none}
.hero-film-toggle:hover{border-color:#9d7bff}
.hero-film-toggle:focus-visible{outline:2px solid #9d7bff;outline-offset:4px}
.hero-film-toggle svg{width:13px;height:13px;fill:currentColor}
.hero-film-toggle[data-paused="true"] .film-pause,.hero-film-toggle[data-paused="false"] .film-play{display:none}
@media(min-width:1100px){.hero-showcase .hero-grid{grid-template-columns:minmax(0,.94fr) minmax(0,1.16fr);gap:32px}}
@media(max-width:760px){.hero-film-toggle{right:8px;bottom:0}}
/* Match the product film to the existing light palette without another download. */
html[data-theme="light"] .hero-film{isolation:auto}
html[data-theme="light"] .hero-film-frame{filter:invert(1) hue-rotate(180deg);mix-blend-mode:multiply}