/* Layout: each section is one Figma board. A 1920×1080 stage scales through rem,
   so at 16:9 every element sits exactly at its design coordinates. */
:root{color-scheme:dark;--bg:#000}
/* One 1920×1080 board fills the window height down to 16:10, its sides falling outside the window when it is narrower than 16:9.
   Taller windows ease over to fitting the width, which they do completely from 4:3 down. Phones fit the width. */
html{font-size:min(calc(100svh / 67.5),max(calc(100vw / 120),calc((100vw - 53.3333svh) / 72)));background:var(--bg);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
img,svg,video{-webkit-user-drag:none}
.t{cursor:default}
body{margin:0;background:var(--bg);color:#fff;overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:geometricPrecision}
main{display:block}
.pg{position:relative;height:100svh;overflow:hidden;background:#000;display:flex;align-items:center;justify-content:center}
.st{position:relative;width:120rem;height:67.5rem;flex:none;overflow:hidden;background:#000;contain:strict}
.b,.l{position:absolute;display:block;max-width:none;margin:0}
.b{left:0;top:0;width:120rem;height:67.5rem}
.v{overflow:visible}
.vi{position:absolute;display:block;overflow:visible;max-width:none}
.vw>*{position:absolute;display:block;max-width:none}
.vp{left:0;top:0;width:100%;height:100%;transition:opacity .45s}
.vd,.ve{opacity:0;transition:opacity .45s}
.vw.on .vd,.vw.on .ve{opacity:1}
.vw.on .vp{opacity:0}
.t{white-space:pre-wrap;word-break:normal;overflow-wrap:normal;font-kerning:normal}
.t span{white-space:inherit}
.g{-webkit-background-clip:text;background-clip:text;color:transparent;background-repeat:no-repeat}
.g span{color:transparent}
.pf{font-family:"PingFang SC","Noto Sans SC",sans-serif}
.no{font-family:"Noto Sans SC","PingFang SC",sans-serif}
.so{font-family:"Sora","PingFang SC","Noto Sans SC",sans-serif}
.un{font-family:"Unbounded","PingFang SC","Noto Sans SC",sans-serif}
.sf{font-family:-apple-system,"SF Pro Text","SF Pro",system-ui,sans-serif}
.ko{font-family:"Kode Mono",ui-monospace,monospace}
.bar{position:fixed;z-index:50;left:0;top:0;height:2px;width:100%;background:linear-gradient(90deg,#c3b5ff,#FFE1B5,#c8ff5a);transform-origin:0 50%;transform:scaleX(0);opacity:0;transition:opacity .4s}
.bar.on{opacity:1}
@media (max-width:820px){html{font-size:calc(100vw / 120)}.pg{height:67.5rem}}

/* Flow: one continuous page. Boards follow each other in the document over one shared, fixed background. */
.flow body{background:#000}
.sky{position:fixed;inset:0;z-index:0;overflow:hidden;background:#000;pointer-events:none}
.sky i{position:absolute;left:50%;top:50%;width:120rem;height:67.5rem;margin:-33.75rem 0 0 -60rem;opacity:0;transform:scale(var(--sky,1));will-change:opacity}
.flow main{position:relative;z-index:1}
.flow .pg{display:block;height:calc(var(--h)*1rem);background:none;overflow:hidden;content-visibility:auto;contain-intrinsic-size:auto calc(var(--h)*1rem);
  -webkit-mask-image:linear-gradient(transparent,#000 5rem,#000 calc(100% - 5rem),transparent);mask-image:linear-gradient(transparent,#000 5rem,#000 calc(100% - 5rem),transparent)}
.flow #p1{-webkit-mask-image:linear-gradient(#000,#000 calc(100% - 5rem),transparent);mask-image:linear-gradient(#000,#000 calc(100% - 5rem),transparent)}
.flow #p34{-webkit-mask-image:linear-gradient(transparent,#000 5rem);mask-image:linear-gradient(transparent,#000 5rem)}
.flow .st{margin:calc(var(--t)*-1rem) 0 0 calc(50% - 60rem);background:none}
/* art that bleeds off the board fades out instead of being cut where the content width ends */
@media (min-aspect-ratio:16/9) and (min-width:821px){.flow .st{-webkit-mask-image:linear-gradient(90deg,transparent,#000 4rem,#000 calc(100% - 4rem),transparent);mask-image:linear-gradient(90deg,transparent,#000 4rem,#000 calc(100% - 4rem),transparent)}}
.flow .b,.flow .l[data-c="page"]{display:none}
.flow .pg:not(#p1):not(#p34) .l[data-c="hd"]{display:none}

/* One header stays put and only its section label changes. */
.fhd,.fsc{position:fixed;top:0;pointer-events:none;opacity:0;transition:opacity .45s}
.fsc{left:0;right:0;height:11rem;z-index:19;background:linear-gradient(rgba(0,0,0,.97),rgba(0,0,0,.92) 58%,rgba(0,0,0,.5) 78%,transparent)}
.fhd{left:50%;width:120rem;height:7rem;margin-left:-60rem;z-index:20}
.fhd.on,.fsc.on{opacity:1}
.fhd,.fsc,.fnav{transition:opacity .45s,transform .55s cubic-bezier(.22,1,.36,1)}
.fhd.hid,.fnav.hid{transform:translate3d(0,-9rem,0)}
.fsc.hid{transform:translate3d(0,-11rem,0)}
.fnav{position:fixed;z-index:21;top:2.5rem;left:50%;height:4.125rem;translate:-50% 0;display:flex;align-items:center;gap:.375rem;opacity:0;pointer-events:none}
.fnav.on{opacity:1;pointer-events:auto}
.fnav.hid{pointer-events:none}
.fnav button{appearance:none;border:0;margin:0;padding:.5rem 1rem;background:none;border-radius:99rem;font-family:"PingFang SC","Noto Sans SC",sans-serif;font-weight:400;font-size:1.0625rem;letter-spacing:.02em;line-height:1.4;color:rgba(255,255,255,.42);cursor:pointer;white-space:nowrap;transition:color .3s,background-color .3s}
.fnav button:hover{color:rgba(255,255,255,.9);background:rgba(255,255,255,.06)}
.fnav button.cur{color:#fff;background:rgba(255,255,255,.09)}
.fhd .l{transition:opacity .4s}
.fhd .l.gone{opacity:0}

@property --f{syntax:"*";inherits:false}
@property --c{syntax:"*";inherits:false}
@property --fl{syntax:"*";inherits:false}
/* Reveal: played once as a piece enters the view, then it is simply the design. Runs on the compositor. */
.pre{opacity:0!important;transform:var(--f,none)!important;clip-path:var(--c,none)!important;filter:var(--fl,none)!important}
.rt{transition:opacity .9s ease,transform 1.05s cubic-bezier(.16,1,.3,1),clip-path 1.05s cubic-bezier(.16,1,.3,1),filter .9s ease}

/* Hover groups: the column under the pointer lifts, the others step back. Nothing moves until touched. */
.zoned .l:not(.rt){transition:translate .5s cubic-bezier(.2,.8,.2,1),scale .6s cubic-bezier(.2,.8,.2,1),filter .4s}
.zoned .vw{transition:none}
.flow .lift{translate:0 -.5rem}
.flow .lift.i{scale:1.025}
.flow .back{filter:brightness(.5)}
.flow .l.tvi{transition:opacity .45s,translate .5s cubic-bezier(.2,.8,.2,1),scale .6s cubic-bezier(.2,.8,.2,1),filter .4s}
.flow .l.tvh{opacity:0}
.tv{pointer-events:none;overflow:visible}
.tv .vw{position:absolute;opacity:0;transition:opacity .45s}
.tv.play .vw.on{opacity:1}
.flow .lift.tv{scale:1.025}
.flow .lift.tvf{animation:tvfloat 3.2s ease-in-out infinite}
@keyframes tvfloat{0%,100%{transform:none}50%{transform:translate3d(0,-1rem,0) rotate(-1.5deg)}}
.veil{position:fixed;inset:0;z-index:30;background:#000;opacity:0;pointer-events:none;transition:opacity .3s}
.veil.on{opacity:1}
.zs{position:absolute;width:36rem;height:36rem;margin:-18rem 0 0 -18rem;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(closest-side,rgba(195,181,255,.16),rgba(195,181,255,0));mix-blend-mode:screen;z-index:30}
.zs.on{opacity:1}
.green .zs{background:radial-gradient(closest-side,rgba(200,255,90,.13),rgba(200,255,90,0))}

/* Ambient motion runs only in view, and only on a few small things. */
@keyframes ping{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(3.4);opacity:0}}
@keyframes flow{to{stroke-dashoffset:-48}}
.pingr{position:absolute;inset:0;border-radius:50%;background:currentColor;color:#c3b5ff;opacity:0;pointer-events:none}
.act .pingr{animation:ping 2.8s cubic-bezier(.2,.6,.3,1) infinite;animation-delay:var(--d,0s)}
.act .flowing [stroke-dasharray]{animation:flow 3.2s linear infinite}
@media (prefers-reduced-motion:reduce){.act .pingr,.act .flowing [stroke-dasharray]{animation:none}}