:root {
  --blue: #1F2BD6; --deep: #1620a8; --floor: #1823b8; --bone: #EFEBE3; --ink: #111111;
  --display: 'Dela Gothic One', system-ui, sans-serif;
  --body: 'Lexend', system-ui, sans-serif;
  --m: 6vw;
  --heavy: cubic-bezier(.65, 0, .35, 1); --pop: cubic-bezier(.2, .9, .25, 1.15); --settle: cubic-bezier(.2, .8, .2, 1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: only light;
}
@media (max-width: 767px) { :root { --m: 16px; } }
* { box-sizing: border-box; }

html { background: var(--blue); scroll-snap-type: y mandatory; overflow-x: clip; }
html, body { overscroll-behavior-y: none; }
body { margin: 0; color: var(--bone); font: 400 18px/1.5 var(--body); background: var(--blue); overflow-x: clip;
  -webkit-font-smoothing: antialiased; }
html:has(dialog[open]) { overflow: hidden; }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--bone); outline-offset: 4px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; z-index: 100; left: 16px; top: 16px; padding: 14px 24px; border-radius: 999px; background: var(--bone); color: var(--blue);
  font: 400 20px/1 var(--display); text-decoration: none; transform: translateY(-200%); }
.skip:focus-visible { transform: none; outline: 3px solid var(--ink); outline-offset: 3px; }


.pf-hero, .stop, .pf-end { position: relative; isolation: isolate; overflow: clip; scroll-snap-align: start; scroll-snap-stop: always;
  background:
    radial-gradient(60% 70% at 18% -6%, rgba(255, 255, 255, .16), transparent 70%),
    linear-gradient(180deg, #2331e0 0%, var(--blue) 46%, var(--deep) 64%, var(--floor) 100%); }
.pf-hero::before, .stop::before, .pf-end::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background: linear-gradient(115deg, rgba(255, 255, 255, .10) 0 18%, transparent 34%); }
.pf-hero::after, .stop::after, .pf-end::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .28; background-image: var(--grain); }


.pill { display: inline-flex; align-items: center; gap: 16px; height: 68px; padding: 0 32px 0 34px; border: 0; border-radius: 999px;
  background: var(--bone); color: var(--blue); font: 400 23px/1 var(--display); white-space: nowrap; text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 -3px 0 rgba(22, 32, 168, .12) inset, 0 26px 60px -18px rgba(7, 10, 58, .55), 0 6px 14px -6px rgba(7, 10, 58, .35);
  transition: padding .45s var(--heavy), background-color .2s; }
.pill i { font-style: normal; display: inline-block; transition: transform .45s var(--heavy); }
.pill:hover { padding-right: 52px; background: #fff; }
.pill:hover i { transform: translateX(10px); }
.pill.alt { background: var(--ink); color: var(--bone); box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 26px 60px -18px rgba(7, 10, 58, .55), 0 6px 14px -6px rgba(7, 10, 58, .35); }
.pill.alt:hover { background: #1d1d1f; }
.pill svg { width: 17px; height: 17px; flex: none; }
.pill:active { transform: scale(.98); }


[data-split] .w { display: inline-block; opacity: 0; transform: translateY(.55em) scale(.96); transform-origin: 0 100%;
  transition: opacity .35s ease, transform .7s var(--pop); transition-delay: calc(var(--i) * 45ms); }
.in [data-split] .w { opacity: 1; transform: none; }


.pf-hero { min-height: 100svh; display: flex; align-items: flex-end; padding: 130px var(--m) clamp(64px, 12svh, 128px); }
.pf-ghost { position: absolute; right: -2vw; top: 14svh; height: min(46svh, 34vw); color: rgba(239, 235, 227, .08); pointer-events: none; }
.pf-ghost svg { display: block; height: 100%; width: auto; }
.pf-head { position: relative; max-width: 100%; }

.pf-lock { margin: 0; font: 400 min(230px, calc((100vw - 2 * var(--m)) / 7.35))/.9 var(--display); letter-spacing: -.01em; white-space: nowrap; }
.pf-darb { display: inline-block; vertical-align: -.015em; margin-right: .22em; }
.pf-darb svg { display: block; height: .815em; width: auto; fill: currentColor; }
.pf-works { display: inline-block; }
.pf-hero.pre .pf-works { opacity: 0; transform: translateX(-.25em); }
.pf-hero.go .pf-works { transition: opacity .5s ease .55s, transform .9s var(--heavy) .45s; }
.pf-lead { max-width: 24em; margin: clamp(22px, 3.4svh, 36px) 0 0; font: 500 clamp(20px, 1.7vw, 26px)/1.4 var(--body); text-wrap: pretty; }


.stop { height: 100svh; min-height: 600px; }
.say { position: absolute; z-index: 3; left: var(--m); top: max(14svh, 96px); width: 44vw; }
.say h2 { margin: 0; font: 400 clamp(44px, min(5.4vw, 10svh), 108px)/.98 var(--display); letter-spacing: -.012em; text-wrap: balance; }
.acts { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: clamp(28px, 5svh, 52px); }
.look { position: absolute; z-index: 2; margin: 0; right: max(2vw, 16px); bottom: clamp(20px, 5svh, 56px);
  width: min(64vw, calc((100svh - max(14svh, 96px) - clamp(20px, 5svh, 56px) - 24px) * 1.6758)); }

.kit { position: relative; aspect-ratio: 2765 / 1650; }
.kit-frame { position: absolute; inset: 0; z-index: 3; display: block; width: 100%; height: 100%; pointer-events: none; }
.phs { position: absolute; left: 0; top: 0; z-index: 2; width: 400px; height: 853px; overflow: hidden; border-radius: 60px; transform-origin: 0 0; background: #000; }
.phs img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.kit .lap { position: absolute; inset: 0; z-index: 1; pointer-events: none; perspective: none; }
.kit .lap .lid { position: absolute; inset: 0; aspect-ratio: auto; background: none; box-shadow: none; border-radius: 0; }
.kit .lap .lid::after, .kit .lap .base, .kit .lap .notch, .kit .lap .floor, .kit .lap .glare { display: none; }
.kit .lap .scr { left: 0; top: 0; right: auto; bottom: auto; width: 1280px; height: 831px; border-radius: 0; transform-origin: 0 0; }
.kit:not(.placed) .phs, .kit:not(.placed) .lap { visibility: hidden; }


.solo { display: none; margin: 0; }
.pho { position: relative; aspect-ratio: 863 / 1823; }
.pho-frame { position: absolute; inset: 0; z-index: 3; display: block; width: 100%; height: 100%; pointer-events: none;
  filter: drop-shadow(18px 34px 30px rgba(5, 8, 64, .42)) drop-shadow(4px 8px 8px rgba(5, 8, 64, .3)); }
.pho::after { content: ""; position: absolute; z-index: 0; left: 10%; right: -6%; bottom: -3.2%; height: 6%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(4, 6, 52, .5), rgba(4, 6, 52, .18) 60%, transparent); filter: blur(6px); }
.pwin { position: absolute; inset: 0; z-index: 2; }
.pscr { position: absolute; left: 0; top: 0; width: 393px; height: 838px; overflow: hidden; border-radius: 59px; transform-origin: 0 0; background: #000; isolation: isolate; }
.pscr img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pscr iframe { position: absolute; left: 0; top: 0; width: 393px; height: 838px; border: 0; background: #fff; opacity: 0; transition: opacity .45s; pointer-events: none; }
.pscr.live iframe { opacity: 1; }
.pho:not(.placed) .pwin { visibility: hidden; }


.js .stop .look { opacity: 0; transform: translateY(-7%) rotate(-1.5deg); transform-origin: 70% 100%; }
.js .stop .acts { opacity: 0; transform: translateY(24px); }
.js .stop.in .look { opacity: 1; transform: none; transition: opacity .6s ease .15s, transform 1.3s var(--settle) .15s; }
.js .stop.in .acts { opacity: 1; transform: none; transition: opacity .5s ease .35s, transform .8s var(--pop) .35s; }
.js .stop .solo { opacity: 0; transform: translateY(-5%) rotate(-1.5deg); transform-origin: 50% 100%; }
.js .stop.in .solo { opacity: 1; transform: none; transition: opacity .6s ease .15s, transform 1.3s var(--settle) .15s; }


.lap { --vb: var(--blue); --vbone: var(--bone); --vink: var(--ink); --vdisp: var(--display); --vbody: var(--body);
  --vheavy: cubic-bezier(.65, 0, .35, 1); }
.lap *, .lap *::before, .lap *::after { box-sizing: border-box; margin: 0; padding: 0; }
.lap { position: relative; perspective: 1800px; perspective-origin: 50% 110%; }
.lap .lid { position: relative; aspect-ratio: 1/.658; border-radius: 3.2% 3.2% .7% .7%/4.8% 4.8% 1% 1%; transform-origin: 50% 100%;
  background: linear-gradient(180deg, #0f0f11, #070708 60%, #0b0b0c);
  box-shadow: inset 0 0 0 1.5px #c9cbcf, inset 0 0 0 2.5px #8d9095, inset 0 2px 0 2px #dfe1e4; }
.lap .lid::after { content: ""; position: absolute; left: .3%; right: .3%; bottom: 0; height: 1.5%; border-radius: 0 0 3px 3px; background: linear-gradient(180deg, #1a1a1c, #6f7277 55%, #b8bbbf); }
.lap .scr { position: absolute; left: 2.05%; right: 2.05%; top: 2.5%; bottom: 2.9%; overflow: hidden; background: #000; border-radius: .9%/1.4%; }
.lap .vp { position: absolute; left: 0; top: 0; width: 1280px; height: 831px; transform-origin: 0 0; background: #000; overflow: hidden; font-family: var(--vbody); color: var(--vink); }
.lap .notch { position: absolute; left: 50%; top: 2.5%; width: 11.2%; height: 3.4%; margin-left: -5.6%; background: #000; border-radius: 0 0 10% 10%/0 0 40% 40%; z-index: 3; }
.lap .notch i { position: absolute; left: 50%; top: 32%; width: 9%; aspect-ratio: 1; margin-left: -4.5%; border-radius: 50%; background: radial-gradient(circle at 40% 38%, #3b3f52 0 18%, #101218 42%, #050506 70%); }
.lap .glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4; overflow: hidden; background: linear-gradient(118deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .025) 34%, rgba(255, 255, 255, 0) 34.2%); }
.lap .glare::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 38%; transform: skewX(-14deg);
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .07) 45%, rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, .07) 55%, rgba(255, 255, 255, 0)); }
.lap .base { position: relative; width: 111%; margin-left: -5.5%; aspect-ratio: 1/.0205; border-radius: 1px 1px 1.4% 1.4%/1px 1px 100% 100%;
  background: linear-gradient(180deg, #fbfbfc 0, #e3e5e8 10%, #c3c6ca 42%, #9b9ea3 76%, #7b7e83 100%);
  box-shadow: inset 0 1px 0 #fff, inset 1px 0 0 rgba(255, 255, 255, .4), inset -1px 0 0 rgba(255, 255, 255, .4); }
.lap .scoop { position: absolute; left: 50%; top: 0; width: 13.5%; height: 46%; margin-left: -6.75%; border-radius: 0 0 18px 18px/0 0 100% 100%; background: linear-gradient(180deg, #8a8d92, #b3b6ba 70%, #cfd1d4); }
.lap .floor { position: absolute; left: -4%; right: -4%; bottom: -2.8%; height: 5%; border-radius: 50%; background: radial-gradient(closest-side, rgba(3, 5, 40, .6), rgba(3, 5, 40, .2) 60%, transparent); filter: blur(5px); z-index: -1; }
.lap .floor::after { content: ""; position: absolute; left: 8%; right: 8%; top: 28%; height: 30%; border-radius: 50%; background: rgba(3, 5, 40, .6); filter: blur(3px); }
.lap.exploring { outline: 3px solid var(--vbone); outline-offset: 6px; border-radius: 6px; }   

.lap .vp .band { height: 30px; background: #000; }
.lap .vp .chrome { height: 82px; background: #e2ded6; border-bottom: 1px solid #c9c4bb; position: relative; z-index: 2; }
.lap .ch-row { height: 46px; display: flex; align-items: center; padding: 0 16px; gap: 18px; }
.lap .lights { display: flex; gap: 8px; }
.lap .lights i { width: 12px; height: 12px; border-radius: 50%; background: #cbc6bd; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .12); }
.lap .ch-nav { display: flex; gap: 14px; margin-left: 8px; }
.lap .ch-nav i { width: 9px; height: 9px; border-left: 2px solid #8d887f; border-bottom: 2px solid #8d887f; transform: rotate(45deg); }
.lap .ch-nav .ch-fwd { transform: rotate(-135deg); opacity: .45; }
.lap .addr { margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 7px; width: 520px; height: 30px; border-radius: 8px; background: #efebe3; font-size: 14px; color: #9a958c; letter-spacing: .005em; }
.lap .ch-tools { display: flex; gap: 16px; }
.lap .ch-tools i { width: 16px; height: 14px; border: 2px solid #8d887f; border-radius: 3px; }
.lap .ch-tools i + i { width: 14px; border-radius: 2px; }
.lap .tabs { height: 36px; display: flex; align-items: center; gap: 6px; padding: 0 10px 6px; }
.lap .tabs > span { flex: 1; height: 29px; border-radius: 7px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; line-height: 1; color: #57534c; }
.lap .tab-on { background: #efebe3; color: #111 !important; box-shadow: 0 1px 1px rgba(0, 0, 0, .06); }
.lap .fav { width: 16px; height: 16px; border-radius: 4px; background: var(--vb); }
.lap .vp .view { position: relative; height: 719px; overflow: hidden; background: var(--vbone); }
.lap .vp .shot { position: absolute; inset: 0; background: #fff; }
.lap .shot img { display: block; width: 1280px; max-width: none; height: auto; }

.lap .shot video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; display: none; background: #fff; }
.lap.reel .shot video { display: block; }
.lap.reel .shot img { display: none; }
.lap .shot video::cue { font-family: var(--vdisp); font-size: 18px; background: rgba(10, 12, 40, .78); }

.lap .shot iframe.live { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; opacity: 0; transition: opacity .45s; background: #fff; }
.lap.live-on .shot iframe.live { opacity: 1; }
.lap:not(.live-on) .shot iframe.live { pointer-events: none; }
.lap.reel .shot iframe.live { display: none; }

.lap.pre-reel .shot video { display: block; }
.lap.pre-pan .shot { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.lap.pre-pan .shot::-webkit-scrollbar { display: none; }


.pf-end { min-height: 100svh; display: flex; align-items: center; padding: 120px var(--m) 96px; }
.end-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; }
.end-pre { margin: 0; font: 500 clamp(20px, 2vw, 30px)/1.3 var(--body); }
.pf-end h2 { margin: 6px 0 clamp(26px, 4svh, 44px); font: 400 clamp(88px, 15vw, 250px)/.86 var(--display); letter-spacing: -.02em; }
.end-note { margin: 22px 0 0; font-size: 18px; }
.end-mark { position: absolute; right: var(--m); bottom: 56px; height: clamp(90px, 16vw, 230px); color: rgba(239, 235, 227, .14); pointer-events: none; }
.end-mark svg { display: block; height: 100%; width: auto; }

.pf-foot { scroll-snap-align: end; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px;
  padding: 26px var(--m) max(32px, env(safe-area-inset-bottom)); color: var(--bone); background: var(--floor); border-top: 2px solid rgba(239, 235, 227, .14); }
.pf-foot nav { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.pf-foot a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; font: 400 17px/1 var(--display); text-decoration: none; }
.pf-foot a:hover { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 2px; }
.pf-foot p { margin: 0; font-size: 16px; max-width: 64ch; }


.xp, .fm { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  overflow: hidden; overscroll-behavior: contain; color: var(--bone);
  background: radial-gradient(60% 70% at 18% -6%, rgba(255, 255, 255, .16), transparent 70%), linear-gradient(180deg, #2331e0 0%, var(--blue) 46%, var(--deep) 64%, var(--floor) 100%); }
.xp::backdrop, .fm::backdrop { background: rgba(8, 10, 40, .6); }
.xp[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 16px; padding: 16px clamp(16px, 2.4vw, 36px) clamp(16px, 2.4vw, 32px); }
.xp-bar { display: flex; align-items: center; gap: 12px; min-width: 0; }
.xp-bar h2 { margin: 0 auto 0 0; min-width: 0; font: 400 clamp(24px, 2.6vw, 40px)/1 var(--display); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-bar .pill, .fm-x { height: 56px; padding: 0 26px 0 28px; font-size: 19px; }
.xp-bar .pill:hover, .fm-x:hover { padding-right: 38px; }
.xp-x i, .fm-x i { font-size: 26px; }
.xp-win { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; border-radius: 14px; overflow: hidden;
  background: #fff; box-shadow: 0 40px 80px -40px rgba(3, 5, 40, .8); }
.xp-chrome { display: flex; align-items: center; gap: 16px; height: 44px; padding: 0 16px; background: #e2ded6; border-bottom: 1px solid #c9c4bb; color: #57534c; }
.xp-lights { display: flex; gap: 8px; }
.xp-lights i { width: 12px; height: 12px; border-radius: 50%; background: #cbc6bd; }
.xp-addr { flex: 0 1 520px; margin: 0 auto; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--bone);
  font-size: 16px; line-height: 1; overflow: hidden; white-space: nowrap; transform: translateX(-30px); }

.xp-view { position: relative; min-height: 0; background: #fff; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.xp-view.ready { overflow: hidden; }
.xp-still { display: block; width: 100%; height: auto; min-height: 100%; object-fit: cover; object-position: top; transition: opacity .5s ease; }
.xp-view iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; opacity: 0; transition: opacity .5s ease; }
.xp-view.ready iframe { opacity: 1; }
.xp-view.ready .xp-still { opacity: 0; }


.fm[open] { display: grid; place-items: center; padding: 84px clamp(16px, 3vw, 48px) clamp(16px, 3vw, 48px); }
.fm video { display: block; width: min(100%, calc((100dvh - 120px) * 16 / 9)); height: auto; aspect-ratio: 16 / 9; border-radius: 14px; background: #000;
  box-shadow: 0 40px 80px -40px rgba(3, 5, 40, .8); }
.fm-x { position: absolute; top: 14px; right: clamp(16px, 3vw, 48px); }


@media (max-width: 1100px) and (orientation: portrait), (max-width: 767px) {
  .say { width: auto; right: var(--m); }
  .look { left: 50%; right: auto; translate: -50% 0; width: min(100vw - 2 * var(--m), calc((100svh - 330px) * 1.6758)); }
}

@media (max-width: 767px) {
  html { scroll-snap-type: y proximity; }
  .pf-hero { padding: 110px 16px 72px; }
  .pf-lock { font-size: calc((100vw - 32px) / 7.35); }
  .pf-ghost { top: 16svh; right: -18vw; height: 34svh; }
  .pf-lead { font-size: 20px; }
  .stop { height: auto; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 84px 16px 56px; }
  .say { display: contents; }
  .say h2 { font-size: clamp(38px, 11vw, 52px); }
  
  .look { position: relative; left: auto; right: auto; bottom: auto; translate: none; order: 2; width: 125vw; margin: 30px 0 0 calc(-22vw - 26px); }
  .acts { order: 3; flex-direction: row; flex-wrap: wrap; align-items: stretch; margin-top: 36px; gap: 10px; }
  .acts .pill { flex: 1 1 auto; justify-content: center; font-size: min(20px, 4.5vw); padding: 0 22px; }
  .acts .pill:hover { padding-right: 30px; }
  .pill { height: 60px; padding: 0 26px 0 28px; font-size: 20px; }
  .pill:hover { padding-right: 36px; }
  .pf-end { padding: 100px 16px 120px; }
  .pf-end h2 { font-size: calc((100vw - 32px) / 3.6); }   
  .end-mark { right: 16px; bottom: 40px; }
  .pf-foot { padding: 18px 16px max(28px, env(safe-area-inset-bottom)); }
  .xp[open] { padding: 10px 10px max(10px, env(safe-area-inset-bottom)); gap: 10px; }
  .xp-bar .pill, .fm-x { height: 50px; padding: 0 20px; font-size: 17px; }
  .xp-visit { display: none; }
  .xp-chrome { display: none; }
  .xp-win { grid-template-rows: minmax(0, 1fr); border-radius: 12px; }
  .fm[open] { padding: 76px 10px 10px; }
  .fm-x { top: 10px; right: 10px; }
}


@media (max-width: 767px) and (orientation: portrait) {
  .stop { height: auto; min-height: max(100svh, 560px); justify-content: flex-start; padding: 84px 16px max(24px, env(safe-area-inset-bottom)); }
  .look { display: none; }
  .solo { display: block; order: 2; flex: 1 0 0; min-height: calc(50vw * 1823 / 863); margin-top: 16px; container-type: size; }
  .pho { height: min(100cqh, 62vw * 1823 / 863); margin: 0 auto; translate: 2% 0; }
  .say h2 { font-size: clamp(34px, 10.4vw, 48px); }
  .acts { margin-top: 18px; gap: 8px; }
  .acts .pill { height: 54px; }
}


@media (orientation: landscape) and (max-height: 560px) {
  :root { --m: max(5vw, env(safe-area-inset-left), env(safe-area-inset-right)); }
  .pf-hero { padding-top: 76px; padding-bottom: 36px; }
  .pf-lead { font-size: 18px; margin-top: 14px; }
  .stop { height: 100svh; min-height: 0; }
  .say { top: 66px; width: calc(100vw - var(--m) - min(56vw, (100svh - 82px) * 1.6758) - 24px); }
  .say h2 { font-size: clamp(28px, min(4.6vw, 10svh), 44px); }
  .acts { margin-top: 18px; gap: 10px; }
  .acts .pill, .pill { height: 50px; padding: 0 22px 0 24px; font-size: 18px; gap: 12px; }
  .acts .pill:hover, .pill:hover { padding-right: 34px; }
  .look { right: var(--m); bottom: 16px; width: min(56vw, (100svh - 82px) * 1.6758); }
  .pf-end { padding: 72px var(--m) 40px; }
  .pf-end h2 { font-size: clamp(64px, 26svh, 120px); margin-bottom: 18px; }
  .end-note { margin-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
  [data-split] .w, .js .stop .look, .js .stop .solo, .js .stop .acts { opacity: 1; transform: none; transition: none; }
  .pill, .pill i, .pf-works, .xp-still, .xp-view iframe { transition: none; }
}