:root{--black:#000;--paper:#f5f5f7;--ink:#1d1d1f;--gray:#86868b;--gray-d:#6e6e73;--line:rgba(255,255,255,.12);--link:#0066cc;--link-d:#2997ff;
--display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
--text:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
--out:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:#000}
body{background:var(--black);color:var(--paper);font:17px/1.47 var(--text);letter-spacing:-.01em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,video{display:block;max-width:100%}img{height:auto}
a{color:var(--link-d);text-decoration:none}a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--link-d);outline-offset:3px;border-radius:6px}
.light :focus-visible{outline-color:var(--link)}
.wrap{max-width:1080px;margin:auto;padding:0 22px}

/* ---------- nav */
.nav{position:fixed;inset:0 0 auto;z-index:20;transition:background .35s,backdrop-filter .35s}
.nav.solid{background:rgba(0,0,0,.7);backdrop-filter:saturate(1.8) blur(20px);-webkit-backdrop-filter:saturate(1.8) blur(20px)}
.nav-in{max-width:1080px;margin:auto;height:52px;padding:0 22px;display:flex;align-items:center;gap:28px;font-size:13px}
.brand{display:flex;align-items:center;gap:9px;margin-right:auto;color:var(--paper);font:600 17px/1 var(--display);letter-spacing:-.02em}
.brand:hover{text-decoration:none}
.nav a.l{color:rgba(245,245,247,.78)}.nav a.l:hover{color:#fff;text-decoration:none}
.nav.on-light{background:rgba(245,245,247,.72)}.nav.on-light .brand{color:var(--ink)}
.nav.on-light a.l{color:rgba(29,29,31,.75)}.nav.on-light a.l:hover{color:#000}
.nav.on-light .pill.sm{background:var(--ink);color:#fff}

/* ---------- buttons */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:980px;font-weight:500;white-space:nowrap;cursor:pointer;border:0;font-family:var(--text);transition:background .2s,transform .2s var(--out)}
.pill:hover{text-decoration:none}
.pill:active{transform:scale(.97)}
.pill.sm{background:var(--paper);color:var(--ink);font-size:12px;padding:5px 13px}
.pill.lg{background:var(--paper);color:var(--ink);font-size:17px;padding:15px 30px}
.pill.lg:hover,.pill.sm:hover{background:#fff}
.pill.ghost{background:rgba(255,255,255,.1);color:var(--paper);font-size:17px;padding:15px 24px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.pill.ghost:hover{background:rgba(255,255,255,.16)}
.win{width:18px;height:18px}
.play-ico{width:20px;height:20px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center}
.play-ico::before{content:"";border-left:7px solid currentColor;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;margin-left:2px}

/* ---------- hero: the moon, the word, the loop behind */
.hero{position:relative;height:190vh}
.hero-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4}
.hero-sticky::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(42% 46% at 50% 44%,rgba(0,0,0,.9),rgba(0,0,0,.55) 60%,rgba(0,0,0,.25)),linear-gradient(to bottom,rgba(0,0,0,.4),transparent 22%,transparent 72%,#000)}
.hero-stage{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:64px 22px 0;will-change:transform,opacity}
.moon-wrap{position:relative;width:min(46vh,78vw);aspect-ratio:1;opacity:0;animation:moonIn 2.2s .1s var(--out) forwards}
.moon-wrap::before{content:"";position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.07),transparent 70%)}
#moon{position:absolute;inset:0;width:100%;height:100%}
.hero h1{position:relative;font:600 clamp(110px,19vw,260px)/.8 var(--display);letter-spacing:-.06em;margin-top:-.42em;color:#fff;mix-blend-mode:difference;opacity:0;animation:in 1.4s .5s var(--out) forwards}
.hero .lead{font:500 clamp(21px,2.4vw,28px)/1.2 var(--display);letter-spacing:-.02em;margin-top:clamp(34px,4.4vw,64px);opacity:0;animation:in 1.2s .75s var(--out) forwards}
.hero .actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:30px;opacity:0;animation:in 1.2s .9s var(--out) forwards}
.hero .meta{margin-top:14px;font-size:13px;color:rgba(245,245,247,.6);opacity:0;animation:in 1.2s 1s var(--out) forwards}
.scroll-cue{position:absolute;bottom:26px;left:50%;width:22px;height:36px;margin-left:-11px;border:1.5px solid rgba(255,255,255,.35);border-radius:12px;z-index:1}
.scroll-cue::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:rgba(255,255,255,.7);animation:cue 1.8s infinite}
@keyframes in{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes moonIn{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
@keyframes cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{opacity:0}}

/* ---------- scroll-in text */
.rise{opacity:0;transform:translateY(40px);transition:opacity 1s var(--out),transform 1.2s var(--out)}
.rise.in{opacity:1;transform:none}
.rise.d1{transition-delay:.1s}.rise.d2{transition-delay:.2s}

/* ---------- statement */
.statement{padding:120px 22px 140px;text-align:center}
.statement p{font:600 clamp(38px,6vw,80px)/1.05 var(--display);letter-spacing:-.045em;max-width:14em;margin:auto}
.statement p span{color:#4a4a4f}

/* ---------- 3D window */
.reveal{height:260vh;position:relative}
.reveal-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;perspective:1700px;overflow:hidden;padding:60px 22px 0}
.reveal h2{font:600 clamp(40px,5vw,68px)/1.04 var(--display);letter-spacing:-.045em;text-align:center}
.reveal .sub{color:var(--gray);font-size:clamp(17px,1.6vw,21px);margin:14px auto 0;max-width:34em;text-align:center}
.device{position:relative;flex:none;margin-top:44px;width:min(1100px,92vw,calc((100vh - 340px) * 1.6));aspect-ratio:1682/1052;border-radius:12px;overflow:hidden;transform-origin:50% 100%;will-change:transform;
box-shadow:0 0 0 1px rgba(255,255,255,.12),0 60px 120px -30px rgba(0,0,0,.9),0 0 120px rgba(255,255,255,.06)}
.device img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.device .alt{opacity:0}
.device::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.09),transparent 35%);pointer-events:none}

/* ---------- memory */
.mem{height:240vh;position:relative;background:var(--paper);color:var(--ink)}
.mem-sticky{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:center;max-width:1180px;margin:auto;padding:60px 22px 0}
.mem h2{font:600 clamp(40px,4.6vw,64px)/1.04 var(--display);letter-spacing:-.045em}
.mem .copy{font-size:19px;color:var(--gray-d);margin-top:20px;max-width:28em}
.mem-num{font:600 clamp(80px,10vw,150px)/1 var(--display);letter-spacing:-.055em;font-variant-numeric:tabular-nums;margin-top:36px}
.mem-label{font-size:15px;color:var(--gray-d);margin-top:6px}
.mem-bar{height:8px;border-radius:4px;background:rgba(0,0,0,.08);margin-top:18px;max-width:420px;overflow:hidden}
.mem-bar i{display:block;height:100%;background:var(--ink);border-radius:4px;transform-origin:0 50%}
.foot{font-size:12px;color:var(--gray);margin-top:16px}
.tabgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.tabgrid i{position:relative;display:flex;align-items:center;gap:8px;height:44px;padding:0 12px;border-radius:11px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.04);font:normal 500 13px/1 var(--text);color:var(--ink);transition:opacity .5s,background .5s,transform .5s var(--out)}
.tabgrid i::before{content:"";flex:none;width:16px;height:16px;border-radius:5px;background:var(--c);transition:filter .5s,opacity .5s}
.tabgrid i::after{content:"";position:absolute;right:10px;width:12px;height:12px;border-radius:50%;box-shadow:inset -4px -1px 0 0 var(--gray-d);opacity:0;transition:opacity .5s;transform:rotate(-30deg)}
.tabgrid i.z{background:rgba(255,255,255,.45);color:var(--gray);transform:scale(.97)}
.tabgrid i.z::before{filter:grayscale(1);opacity:.45}
.tabgrid i.z::after{opacity:1}

/* ---------- feature rows */
.row{padding:150px 22px}
.row.light{background:var(--paper);color:var(--ink)}
.row-in{max-width:1180px;margin:auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:center}
.row.flip .row-in{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.row.flip .copy{order:2}
.copy h2{font:600 clamp(40px,4.6vw,64px)/1.04 var(--display);letter-spacing:-.045em}
.copy p{font-size:19px;line-height:1.5;color:var(--gray);margin-top:20px;max-width:30em}
.light .copy p{color:var(--gray-d)}
.tilt{position:relative;border-radius:20px;overflow:hidden;transition:transform .6s var(--out);will-change:transform}
.tilt::after{content:"";position:absolute;inset:0;background:radial-gradient(500px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.14),transparent 45%);pointer-events:none}
.light .tilt{box-shadow:0 50px 100px -40px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.05)}
.dark .tilt{box-shadow:0 0 0 1px rgba(255,255,255,.1),0 50px 100px -40px rgba(0,0,0,.8)}

/* ---------- everything else */
.more{background:var(--paper);color:var(--ink);padding:130px 22px 150px}
.more h2{font:600 clamp(38px,4.6vw,60px)/1.04 var(--display);letter-spacing:-.045em;max-width:13em}
.list{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 52px;margin-top:72px}
.list svg{width:28px;height:28px;stroke:var(--ink);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.list h3{font:600 19px/1.3 var(--display);letter-spacing:-.015em;margin-top:14px}
.list p{font-size:15px;line-height:1.5;color:var(--gray-d);margin-top:6px}

/* ---------- film */
.film{padding:150px 22px;text-align:center}
.film h2{font:600 clamp(40px,4.8vw,64px)/1.04 var(--display);letter-spacing:-.045em}
.film .sub{color:var(--gray);font-size:19px;margin-top:12px}
.player{position:relative;max-width:1120px;margin:60px auto 0;border-radius:22px;overflow:hidden;background:#111;aspect-ratio:16/9;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.player video,.player img{width:100%;height:100%;object-fit:cover}
.player img{transition:transform 1.2s var(--out),opacity .4s}
.player:hover img{transform:scale(1.03);opacity:.85}
.player button{position:absolute;inset:0;border:0;background:transparent;cursor:pointer;display:grid;place-items:center}
.player button span{width:92px;height:92px;border-radius:50%;background:rgba(245,245,247,.92);display:grid;place-items:center;transition:transform .3s var(--out);backdrop-filter:blur(10px)}
.player button span::before{content:"";border-left:26px solid var(--ink);border-top:16px solid transparent;border-bottom:16px solid transparent;margin-left:7px}
.player button:hover span{transform:scale(1.08)}

/* ---------- privacy */
.privacy{background:var(--paper);color:var(--ink);padding:150px 22px;text-align:center}
.privacy h2{font:600 clamp(48px,7vw,96px)/1 var(--display);letter-spacing:-.05em}
.privacy p{font-size:19px;color:var(--gray-d);max-width:34em;margin:26px auto 0}
.privacy a{color:var(--link)}

/* ---------- download */
.get{position:relative;padding:150px 22px 120px;text-align:center;overflow:hidden}
.get .tilt-icon{width:200px;height:200px;margin:0 auto;border-radius:46px;box-shadow:0 40px 80px -20px rgba(255,255,255,.08)}
.get .tilt-icon img{width:100%;height:100%}
.get h2{font:600 clamp(56px,7vw,96px)/1 var(--display);letter-spacing:-.05em;margin-top:30px}
.get .meta{color:var(--gray);font-size:14px;margin-top:16px}
.get .pill.lg{margin-top:34px}
.steps{list-style:none;counter-reset:s;max-width:620px;margin:70px auto 40px;text-align:left;border-top:1px solid var(--line)}
.steps li{counter-increment:s;display:grid;grid-template-columns:36px 1fr;padding:18px 0;border-bottom:1px solid var(--line);color:var(--gray);font-size:15px}
.steps li::before{content:counter(s);color:var(--paper);font-weight:600}
.steps b{color:var(--paper);font-weight:500}

footer{border-top:1px solid var(--line);font-size:12px;color:var(--gray)}
.foot-in{max-width:1080px;margin:auto;padding:20px 22px 28px;display:flex;gap:22px;flex-wrap:wrap}
footer a{color:var(--gray)}footer .sp{margin-left:auto}

/* ---------- legal pages */
.doc{background:var(--paper);color:var(--ink);min-height:100vh;padding:120px 22px 100px}
.doc article{max-width:700px;margin:auto}
.doc h1{font:600 48px/1.05 var(--display);letter-spacing:-.04em}
.doc .date{color:var(--gray-d);margin:10px 0 36px}
.doc h2{font:600 21px/1.3 var(--display);letter-spacing:-.015em;margin:36px 0 8px}
.doc p{font-size:16px;color:#333336;margin:8px 0}
.doc a{color:var(--link)}

@media (max-width:900px){
  .row-in,.row.flip .row-in{grid-template-columns:1fr;gap:44px}
  .row.flip .copy{order:0}
  .mem-sticky{grid-template-columns:1fr;gap:28px;align-content:center}
  .mem-num{margin-top:18px}
  .tabgrid{grid-template-columns:repeat(4,1fr)}
  .tabgrid i:nth-child(n+25){display:none}
  .list{grid-template-columns:repeat(2,1fr)}
  .nav a.l{display:none}
}
@media (max-width:560px){
  .list{grid-template-columns:1fr}
  .row,.film,.privacy,.more{padding-top:100px;padding-bottom:100px}
  .tabgrid{gap:6px}.tabgrid i{height:34px;padding:0 8px;font-size:0}
  .mem h2{font-size:36px}.mem .copy{font-size:16px}
  footer .sp{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .hero h1,.hero .lead,.hero .actions,.hero .meta,.moon-wrap,.rise{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}