.hero-section{--hero-demo-layout-duration:.9s;--hero-demo-layout-ease:cubic-bezier(.4, 0, .2, 1);transition:padding-top var(--hero-demo-layout-duration) var(--hero-demo-layout-ease), padding-bottom var(--hero-demo-layout-duration) var(--hero-demo-layout-ease)}.hero-section:has(.hero-demo-overlay:not([data-state=closing])){padding-top:0;padding-bottom:0}.hero-inner{transition:height var(--hero-demo-layout-duration,.9s) var(--hero-demo-layout-ease,cubic-bezier(.22, 1, .36, 1))}.hero-inner:has(.hero-demo-overlay){height:var(--hero-demo-layout-height,var(--hero-demo-surface-height,auto));min-height:0}.hero-inner:has(.hero-demo-overlay) .hero-content{z-index:0;pointer-events:none;position:absolute;inset:0 1rem auto}.hero-demo-overlay{--hero-demo-clip-duration:.9s;--hero-demo-clip-ease:cubic-bezier(.55, .055, .675, .19);z-index:30;background:var(--color-surface);clip-path:circle(0% at var(--origin-x,50%) var(--origin-y,50%));transition:clip-path var(--hero-demo-clip-duration) var(--hero-demo-clip-ease);will-change:clip-path;position:absolute;inset:0;overflow:hidden;container:hero-demo/inline-size}.game-hero-demo-panel{container:hero-demo/inline-size}.hero-demo-overlay[data-state=entering]{clip-path:circle(0% at var(--origin-x,50%) var(--origin-y,50%))}.hero-demo-overlay[data-state=open]{--hero-demo-clip-ease:cubic-bezier(.55, .055, .675, .19);clip-path:circle(150% at var(--origin-x,50%) var(--origin-y,50%))}.hero-demo-overlay[data-state=closing]{--hero-demo-clip-ease:cubic-bezier(.215, .61, .355, 1);clip-path:circle(0% at var(--origin-x,50%) var(--origin-y,50%))}.hero-demo-overlay[data-reduced=true]{clip-path:none;opacity:0;transition:opacity .15s}.hero-demo-overlay[data-reduced=true][data-state=open]{opacity:1}.hero-demo-surface{grid-template-rows:auto auto;grid-template-columns:minmax(0,1fr);align-content:start;gap:.75rem;width:100%;margin:0 auto;padding-block:clamp(.9rem,2vw,1.35rem);padding-inline:0;display:grid;position:relative}@container hero-demo (width>=1170px){.hero-demo-surface{grid-template-rows:auto;grid-template-columns:clamp(15rem,26vw,18rem) minmax(0,1fr);align-content:start;align-items:start;gap:1rem;padding-block:clamp(1rem,1.8vw,1.5rem);display:grid}}.hero-demo-library{flex-direction:column;min-width:0;min-height:0;display:flex;position:relative}.hero-demo-close{z-index:4;position:absolute;top:.5rem;right:.5rem}.hero-demo-library-body{flex:auto;min-height:0;display:flex;position:relative;overflow:hidden}.hero-demo-library-list{overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none;flex:auto;min-height:0;scroll-padding-block:3rem}.hero-demo-library-list::-webkit-scrollbar{display:none}.hero-demo-library-fade{z-index:1;opacity:0;pointer-events:none;border-radius:.9rem;height:3.25rem;transition:opacity .18s;position:absolute;left:.75rem;right:.75rem}.hero-demo-library-fade[data-visible=true]{opacity:1}.hero-demo-library-fade-top{background:linear-gradient(180deg, color-mix(in oklab, var(--color-card) 96%, transparent) 0%, color-mix(in oklab, var(--color-card) 82%, transparent) 38%, transparent 100%);top:0}.hero-demo-library-fade-bottom{background:linear-gradient(0deg, color-mix(in oklab, var(--color-card) 96%, transparent) 0%, color-mix(in oklab, var(--color-card) 82%, transparent) 38%, transparent 100%);bottom:0}.hero-demo-library-scroll{z-index:2;border:1px solid color-mix(in oklab, var(--color-primary) 22%, var(--color-border) 78%);background:color-mix(in oklab, var(--color-card) 88%, var(--color-surface) 12%);width:2rem;height:2rem;color:var(--color-text);backdrop-filter:blur(12px);opacity:0;pointer-events:none;border-radius:999px;justify-content:center;align-items:center;transition:opacity .18s,transform .18s,background-color .18s,border-color .18s;display:inline-flex;position:absolute;left:50%;transform:translate(-50%);box-shadow:0 10px 24px -16px #00000073}.hero-demo-library-scroll:hover{border-color:color-mix(in oklab, var(--color-primary) 40%, var(--color-border) 60%);background:color-mix(in oklab, var(--color-card) 70%, var(--color-primary) 30%)}.hero-demo-library-scroll:focus-visible{outline:2px solid color-mix(in oklab, var(--color-primary) 60%, white 40%);outline-offset:2px}.hero-demo-library-scroll[data-visible=true]{opacity:1;pointer-events:auto}.hero-demo-library-scroll-top{top:.5rem;transform:translate(-50%,-.35rem)}.hero-demo-library-scroll-top[data-visible=true]{transform:translate(-50%)}.hero-demo-library-scroll-bottom{bottom:.5rem;transform:translate(-50%,.35rem)}.hero-demo-library-scroll-bottom[data-visible=true]{transform:translate(-50%)}.hero-demo-library-fade-left,.hero-demo-library-fade-right{width:3.25rem;height:auto;inset:.75rem auto}.hero-demo-library-fade-left{background:linear-gradient(90deg, color-mix(in oklab, var(--color-card) 96%, transparent) 0%, color-mix(in oklab, var(--color-card) 82%, transparent) 38%, transparent 100%);left:0}.hero-demo-library-fade-right{background:linear-gradient(-90deg, color-mix(in oklab, var(--color-card) 96%, transparent) 0%, color-mix(in oklab, var(--color-card) 82%, transparent) 38%, transparent 100%);right:0}.hero-demo-library-scroll-left,.hero-demo-library-scroll-right{backdrop-filter:none;border-radius:0;width:2rem;height:auto;inset:.5rem auto;box-shadow:0 1px 2px #0000000d}.hero-demo-library-scroll-left{border-top-left-radius:.9rem;border-bottom-left-radius:.9rem;left:0;transform:translate(-.35rem)}.hero-demo-library-scroll-left[data-visible=true]{transform:translate(0)}.hero-demo-library-scroll-right{border-top-right-radius:.9rem;border-bottom-right-radius:.9rem;right:0;transform:translate(.35rem)}.hero-demo-library-scroll-right[data-visible=true]{transform:translate(0)}@container hero-demo (width>=1170px){.hero-demo-library{width:100%;min-width:0;height:var(--hero-demo-video-height,100%);max-height:var(--hero-demo-video-height,100%);order:1;align-self:center}}.hero-demo-video-wrap{aspect-ratio:16/9;background:var(--color-surface);border-radius:1rem;width:100%;min-height:200px;max-height:100%;position:relative;overflow:hidden;box-shadow:0 10px 40px -12px #00000040}@container hero-demo (width>=1170px){.hero-demo-video-wrap{order:2;align-self:center;width:100%;max-width:100%;height:auto;min-height:0;max-height:100%}.hero-demo-library-fade-left,.hero-demo-library-fade-right,.hero-demo-library-scroll-left,.hero-demo-library-scroll-right{display:none}}.game-hero-demo-panel .hero-demo-surface{align-content:center;height:100%}@container hero-demo (width>=1170px){.game-hero-demo-panel .hero-demo-surface{grid-template-rows:minmax(0,1fr);grid-template-columns:clamp(15rem,26vw,18rem) minmax(0,1fr);align-items:stretch}.game-hero-demo-panel .hero-demo-video-wrap{aspect-ratio:auto;justify-content:center;align-items:center;height:100%;display:flex}.game-hero-demo-panel .hero-demo-library{align-self:stretch;height:100%;max-height:100%}}@container hero-demo (width<=1169.98px){.hero-demo-library-header{display:none}.hero-demo-library-body{--demo-library-rail-inset:2.75rem;padding-block:.5rem;padding-inline:.5rem;display:block}.hero-demo-library-body[data-can-page-prev]{padding-left:var(--demo-library-rail-inset)}.hero-demo-library-body[data-can-page-next]{padding-right:var(--demo-library-rail-inset)}ul.hero-demo-library-list{grid-auto-flow:column;grid-auto-columns:max(var(--demo-library-card-min-width), calc((100% - (var(--visible-cards) - 1) * var(--demo-library-card-gap)) / var(--visible-cards)));align-items:stretch;gap:var(--demo-library-card-gap);touch-action:pan-x;scroll-snap-type:x mandatory;--visible-cards:2;--demo-library-card-gap:.5rem;--demo-library-card-min-width:11rem;grid-template-rows:minmax(0,1fr);padding-block:.5rem;padding-inline:0;scroll-padding-inline:0;display:grid;overflow:auto hidden}ul.hero-demo-library-list>li{flex:initial;scroll-snap-align:start;width:auto;min-width:0}@container hero-demo (width>=720px){ul.hero-demo-library-list{--visible-cards:3}}@container hero-demo (width<=640px){.hero-demo-library-scroll-left,.hero-demo-library-scroll-right{display:none}.hero-demo-library-body[data-can-page-prev]{padding-left:.5rem}.hero-demo-library-body[data-can-page-next]{padding-right:.5rem}}.hero-demo-library-scroll-left,.hero-demo-library-scroll-right{background:var(--color-surface);opacity:1;pointer-events:auto;z-index:2;top:1rem;bottom:1rem;transform:none}.hero-demo-library-scroll-left{left:.5rem;right:auto}.hero-demo-library-scroll-right{left:auto;right:.5rem}.hero-demo-library-scroll-left[data-disabled],.hero-demo-library-scroll-right[data-disabled],.hero-demo-library-scroll-top,.hero-demo-library-scroll-bottom,.hero-demo-library-fade-top,.hero-demo-library-fade-bottom,.hero-demo-library-fade-left,.hero-demo-library-fade-right{display:none}.hero-demo-library-pagination{margin-top:.5rem}.game-hero-demo-panel .hero-demo-surface{grid-template-rows:auto auto;grid-template-columns:minmax(0,1fr);align-content:start;align-items:start}.game-hero-demo-panel .hero-demo-library{height:var(--game-demo-library-height,auto);max-height:var(--game-demo-library-height,none);align-self:stretch;min-height:0}.game-hero-demo-panel .hero-demo-video-wrap{aspect-ratio:16/9;justify-content:center;align-items:center;width:100%;max-width:100%;height:auto;min-height:0;max-height:100%;display:flex}}@container hero-demo (width>=1170px){.hero-demo-library-pagination{display:none}}