@font-face{font-family:Barlow;src:url(/assets/fonts/BarlowCondensed-SemiBold.woff2) format("woff2");font-display:swap;font-weight:600}
@font-face{font-family:Barlow;src:url(/assets/fonts/BarlowCondensed-Bold.woff2) format("woff2");font-display:swap;font-weight:700}
@font-face{font-family:"PK Display ja";src:url(/assets/fonts/display-ja.woff2) format("woff2");font-display:swap;font-weight:700}
@font-face{font-family:"PK Display zh-CN";src:url(/assets/fonts/display-zh-CN.woff2) format("woff2");font-display:swap;font-weight:700}
@font-face{font-family:"PK Display zh-TW";src:url(/assets/fonts/display-zh-TW.woff2) format("woff2");font-display:swap;font-weight:700}
@font-face{font-family:"PK Display ko";src:url(/assets/fonts/display-ko.woff2) format("woff2");font-display:swap;font-weight:700}
/* App palette (mobile/src/constants/theme.ts, light) */
:root{--text:#111;--text2:#3C3C43;--muted:#6B6B70;--bg:#fff;--grouped:#F4F3F1;--card:#F7F5F2;--fill:#F1EFEC;--border:#DCDCE0;--brand:#FF6B00;--ink:#1B1714;--brandText:#A63E00;--tint:#FFF1E6;--tintBorder:#FFC79E}
*{box-sizing:border-box;margin:0}
body{color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent} /* no grey box flashing on taps in iOS Safari */
img{display:block;-webkit-user-drag:none} /* images can't be dragged off the page (user 10-14); Firefox: site.js */
.wrap{max-width:1160px;margin:0 auto;padding:0 max(32px,env(safe-area-inset-right)) 0 max(32px,env(safe-area-inset-left))}
.num{font-family:Barlow;font-weight:700;letter-spacing:.01em}
.chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;background:var(--fill);font-size:14px;font-weight:600;color:var(--text)}
.chip.dark{background:var(--text);color:#fff}
.chip svg{width:16px;height:16px}
h1{font-size:64px;line-height:1.2;font-weight:600}
h2{font-size:40px;line-height:1.3;font-weight:600}
.lead{font-size:18px;line-height:1.85;color:var(--text2)}
.eyebrow{font-family:Barlow;font-weight:700;font-size:15px;letter-spacing:.12em;color:var(--brandText);text-transform:uppercase}
.av{width:56px;height:56px;border-radius:50%;border:3px solid #fff;box-shadow:0 6px 16px rgba(27,23,20,.12)}
@media(max-width:600px){.wrap{padding:0 max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left))}h1{font-size:40px}h2{font-size:28px}.lead{font-size:17px}}
@font-face{font-family:"PK Manrope";src:url(/assets/fonts/Manrope-Preview.woff2) format("woff2");font-weight:200 800;font-display:swap}
:root{--ease:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.34,1.56,.64,1);interpolate-size:allow-keywords}
body{overflow-x:hidden}main{background:var(--bg)}body:has(.hero){background:var(--brand)}body:has(.page){background:var(--tint)}
.nb{display:inline-block;max-width:100%}
/* ---------- pill header: shrinks after scrolling ---------- */
.pillbar{position:fixed;top:16px;left:0;right:0;z-index:30;padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));pointer-events:none}
.pill{--h:80px;pointer-events:auto;position:relative;max-width:1120px;margin:0 auto;height:var(--h);padding:0 22px 0 calc(var(--h)*.55);display:flex;align-items:center;gap:24px;border-radius:999px;
 background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);box-shadow:0 10px 30px -12px rgba(27,23,20,.35);
 transition:max-width .35s var(--ease),height .35s var(--ease),gap .35s var(--ease),padding .35s var(--ease)}
.pill img{display:block;height:calc(var(--h)*.475);width:auto;transition:height .35s var(--ease),opacity .15s}.pill>a:active img{opacity:.6}
.scrolled .pill{max-width:760px;--h:48px}
.pill nav{margin-left:auto;display:flex;gap:26px;align-items:center;font-size:15px;font-weight:600;color:var(--text2);white-space:nowrap}
.pill nav a{color:inherit;text-decoration:none}
/* Computers (user 10-10): the scrolled header is about 30% smaller than its first shrink (68 → 48 px high), its links
   and language chip with it. Phones and landscape phones keep their own sizes, further down. The chip ends the header
   (user 10-14: the "coming soon" button went), its right inset the same as the space above and below it. */
@media(min-width:601px) and (min-height:501px){.pill nav,.pill .chip{transition:gap .35s var(--ease),height .35s var(--ease),padding .35s var(--ease),font-size .35s var(--ease)}
 .scrolled .pill{gap:18px;padding-right:9px}.scrolled .pill nav{gap:18px;font-size:14px}.scrolled .pill .chip{height:30px;padding:0 11px;font-size:13px}}
/* ---------- standard iPhone (Pro proportions, silver), sized by --w ---------- */
.device{--w:300px;font-size:calc(var(--w)/100);width:100em;height:208.7em;padding:0;border-radius:16.5em;position:relative;box-sizing:border-box;flex:none;
 background:linear-gradient(140deg,#dfe2e6 0%,#9ea4ac 12%,#d3d7dc 26%,#868c95 46%,#c9cdd2 64%,#959ba3 82%,#d9dce0 100%);
 box-shadow:inset 0 0 0 .22em rgba(245,247,250,.7),inset 0 0 0 .5em rgba(70,76,86,.22),0 0 0 .14em rgba(36,40,48,.45),0 2.4em 5em -1.8em rgba(27,23,20,.5)}
.device:before{content:"";position:absolute;inset:.55em;border-radius:15.9em;background:linear-gradient(160deg,rgba(255,255,255,.35),rgba(255,255,255,0) 30%,rgba(255,255,255,0) 70%,rgba(255,255,255,.22));pointer-events:none}
.device .bz{position:absolute;inset:1.45em;border-radius:15.05em;background:#050506;padding:2.1em;box-shadow:inset 0 0 0 .18em #202125}
.device>img{width:100%;height:auto}
.device .scr{width:100%;height:100%;border-radius:12.95em;overflow:hidden;position:relative;background:#fff}
.device .scr img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;border-radius:0}
.device .isl{position:absolute;left:50%;top:6.1em;width:29.1em;height:8.55em;margin-left:-14.55em;border-radius:5em;background:#000;z-index:2;box-shadow:inset 0 0 0 .12em #111}
.device .b{position:absolute;width:1em;border-radius:.6em;background:linear-gradient(90deg,#727881,#d2d6db 45%,#8d939b)}
.device .b.l{left:-.7em}.device .b.r{right:-.7em}
.device .act{top:19%;height:8em}.device .vu{top:27%;height:12.5em}.device .vd{top:34.5%;height:12.5em}.device .pw{top:29%;height:18em}
.device .cc{top:57%;height:13em;right:-.25em!important;width:.7em;background:linear-gradient(90deg,#6f757d,#c9cdd2)}
/* ---------- avatars: white ring + soft 3D drop shadow ---------- */
.av{box-shadow:0 0 0 1px rgba(27,23,20,.10),0 3px 6px rgba(27,23,20,.20),0 14px 26px -8px rgba(60,20,0,.45)}
/* ---------- side section nav (scroll spy) ---------- */
.sidenav{position:fixed;right:calc(22px + env(safe-area-inset-right));top:50%;z-index:25;transform:translateY(-50%);display:flex;flex-direction:column;gap:0;padding:8px 2px;border-radius:999px;
 background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 8px 24px -10px rgba(27,23,20,.35)}
.sidenav a{position:relative;display:grid;place-items:center;width:24px;height:24px;transition:height .5s var(--ease)}
.sidenav a:before{content:"";width:10px;height:10px;border-radius:999px;background:rgba(27,23,20,.22);transition:height .5s var(--ease),background .3s}
.sidenav a:hover:before{background:rgba(27,23,20,.45)}
.sidenav a.on{height:36px}.sidenav a.on:before{height:30px;background:var(--brand)}
.sidenav a span{position:absolute;right:calc(100% + 16px);top:50%;transform:translate(6px,-50%);white-space:nowrap;font-size:13px;font-weight:700;color:#fff;background:#1B1714;padding:6px 11px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .25s,transform .35s var(--ease)}
.sidenav a:hover span,.sidenav a:focus-visible span{opacity:1;transform:translate(0,-50%)}
@media(max-width:900px){.sidenav{display:none}}
/* Computers: every part of the home page is a stop (the video small and then full screen, each feature step on its own),
   so a swipe or a wheel turn moves one part at a time instead of sliding past several (user 10-09). A part taller than
   the window still scrolls inside; the top one shows the whole phone that way. Stops sit clear of the header, and the
   bottom padding of More features and Languages is left out of their stops so it is not a stretch to scroll through
   (Languages clips its overflow, which would keep its content from being a stop of the page).
   Phones keep free scrolling; reduced motion turns the stops off. */
@media(min-width:901px) and (prefers-reduced-motion:no-preference){html:has(#sidenav){scroll-snap-type:y mandatory}
 .hero{scroll-snap-align:start}.xp-stop,.feat-head,.step+.step,.bento-sec>.wrap,.langs,.faq,.final{scroll-snap-align:start;scroll-snap-stop:always}
 .step+.step{scroll-snap-align:center}#features,.feat-head{scroll-margin-top:70px}.bento-sec{scroll-margin-top:80px}.bento-sec>.wrap{scroll-margin-top:100px}.langs{scroll-margin-bottom:-120px}}
/* Computers (user 10-10): the last stop is where the end wordmark, its centre 65% down, is about to fill, and below the FAQ
   stop the page scrolls freely (site.js sets .free-end), so the fill follows the wheel to the bottom instead of being carried
   past in one jump; the bottom of the page is a stop too, for jumps straight to the end (End key, the header's link). The end
   part clips (overflow: clip, not hidden) so the stop inside it counts as a stop of the page.
   110px: the end part's top padding; the word is one line high. */
.end-stop{position:absolute;left:0;top:calc(110px + min(clamp(56px,12vw,190px),15vw)/2 - 65vh);width:1px;height:1px;pointer-events:none}
@media(min-width:901px) and (prefers-reduced-motion:no-preference){.final{scroll-snap-align:none}.end-stop{scroll-snap-align:start;scroll-snap-stop:always}footer{scroll-snap-align:end}html.free-end{scroll-snap-type:none!important}}
.cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center}
.store{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:12px;height:60px;padding:0 22px 0 16px;border-radius:14px;line-height:1.15;text-align:left}
.store .si{width:30px;height:30px;flex:none}
.store small{display:block;font-size:11px;font-weight:600;letter-spacing:.04em;opacity:.75}
.store b{display:block;font-size:18px;font-weight:700}
.store.ios{background:#1B1714;color:#fff;box-shadow:0 10px 24px -12px rgba(27,23,20,.6)}
.store.and{background:transparent;color:rgba(27,23,20,.85);border:1.5px dashed rgba(27,23,20,.5);box-shadow:none;--hole:var(--brand)}
.final .store.and{--hole:var(--tint)}
.store.and small{opacity:1}.store.and .si g:first-child{fill:currentColor}.store.and .si g:nth-child(2){stroke:currentColor}.store.and .si circle{fill:var(--hole)}
/* ---------- hero ---------- */
/* The hero and the video share one background (user 10-14), so no edge runs between them: .hero-bg stays put behind
   the screen while both scroll over it, and site.js fades it into the plain orange of .sky as the video grows; it is
   gone when the video is at its largest. Until the shader is up (and without WebGL) .hero-bg shows --still, the
   shader's first frame (frame 2500, no grain; 800×500 and 400×800 WebP), so it takes over without a visible change
   (user 10-14: the page no longer opens on a different, still background). Its top edge stays plain brand orange
   (--band): that is the colour Safari shows behind the status bar and above the page when it is pulled down (pull to
   refresh, rubber banding). */
.sky{position:relative;background:var(--brand);--still:url(data:image/webp;base64,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);--band:linear-gradient(var(--brand) 16px,rgba(255,107,0,0) 96px)}
.sky-bg{position:absolute;inset:0;pointer-events:none}
.hero{position:relative;padding-top:clamp(104px,12.5vh,128px);overflow:hidden}
/* Moving background: site.js mounts Paper Shaders' Mesh Gradient here (user 10-14) and fades it in over its own
   first frame; without WebGL that still stays. The band keeps the top edge plain orange over it as well. */
.hero-bg{position:sticky;top:0;height:100vh;background:var(--band),var(--still) center/cover,var(--brand);opacity:var(--sky,1)}
@media(max-aspect-ratio:4/5){.sky{--still:url(data:image/webp;base64,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)}}
.hero-bg canvas{opacity:0;transition:opacity 1.2s var(--ease)}.hero-bg.on canvas{opacity:1}
.hero-bg:after{content:"";position:absolute;inset:0;background:var(--band)}
.hero .eyebrow,.hero h1,.hero .lead{color:var(--ink);text-align:center}
.hero h1{font-size:clamp(48px,min(7.4vw,8vh),92px);line-height:1.1;margin:10px 0 12px}
.ch{display:inline-block;opacity:0;filter:blur(8px);transform:translateY(32%);animation:blurup .8s var(--ease) forwards;animation-delay:calc(.1s + var(--i)*40ms)}
@keyframes blurup{to{opacity:1;filter:blur(0);transform:none}}
.fade{opacity:0;transform:translateY(14px);animation:blurup .8s var(--ease) forwards;animation-delay:var(--d,0s)}
.hero .chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}
.hero .chip{background:rgba(255,255,255,.6)}.hero .chip.dark{background:var(--ink);color:#fff}
.hero .store.and{--hole:#FF9A36} /* the robot's eyes show the lit orange behind the store cards */
.stage{position:relative;height:700px;max-width:1440px;margin:44px auto 0}
/* Rings: site.js draws them on two canvases, the far half behind the phone and the near half over it. */
.rings{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0}.go .rings{animation:fadein .5s var(--ease) .6s forwards}.rings.front{z-index:6}
@keyframes fadein{to{opacity:1}}
.phone{position:absolute;left:50%;top:12px;width:300px;margin-left:-150px;z-index:5;opacity:0;animation:phoneIn 1.1s var(--ease) .25s forwards;--w:300px}
@keyframes phoneIn{from{opacity:0;transform:translateY(140px) scale(.9)}to{opacity:1;transform:none}}
/* The phone in 3D: site.js turns .p3d with the camera it projects the rings and avatars with, so the rings' axis is
   always the phone's long axis (user 10-13). A back plate and the two long edges give it thickness. */
.p3d{font-size:calc(var(--w)/100);transform-style:preserve-3d}
.p3d .back{position:absolute;inset:0;border-radius:16.5em;background:linear-gradient(140deg,#868c95,#3f444b 45%,#767c84);transform:translateZ(-8.6em)}
.p3d .side{position:absolute;top:14em;bottom:14em;right:-4.3em;width:8.6em;border-radius:4.3em;background:linear-gradient(90deg,#5d636b,#c9cdd2 40%,#eef0f2 52%,#9aa0a8 70%,#5d636b);transform:translateZ(-4.3em) rotateY(90deg)}
.p3d .side.l{right:auto;left:-4.3em;transform:translateZ(-4.3em) rotateY(-90deg)}
.phone .device{--w:inherit}
.phone .device:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .5s var(--ease);
 box-shadow:0 0 0 .45em rgba(255,255,255,.6),0 0 3.5em .9em rgba(255,255,255,.75),0 0 10em 2.4em rgba(255,240,224,.45)}
.phone.hover .device:after{opacity:1}
.orb{position:absolute;left:0;top:0;will-change:transform,opacity;pointer-events:none}
.orb .in{opacity:0;transform:scale(.4);animation:pop .8s var(--spring) forwards;animation-delay:calc(.6s + var(--k)*40ms)}
@keyframes pop{to{opacity:1;transform:none}}
.orb .av{display:block;width:100%;height:100%;border-width:4px;transition:filter .8s var(--ease)}
.orb.far .av{filter:blur(1.6px) brightness(.9)} /* the far side of the ring is out of focus */
.bubble{position:absolute;left:50%;bottom:calc(100% + 14px);transform-origin:50% 100%;translate:-50% 0;background:#fff;border-radius:16px;padding:7px 13px;font-size:14px;font-weight:700;color:var(--ink);filter:drop-shadow(0 2px 3px rgba(27,23,20,.18)) drop-shadow(0 10px 14px rgba(60,20,0,.28));white-space:nowrap;transition:opacity .45s var(--ease),transform .55s var(--spring)}
.bubble:after{content:"";position:absolute;left:50%;top:calc(100% - 1px);width:16px;height:10px;margin-left:-8px;background:#fff;clip-path:polygon(0 0,100% 0,56% 92%,50% 100%,44% 92%)}
.bubble.off{opacity:0;transform:translateY(8px) scale(.6)}
/* ---------- video: Scroll media expansion ---------- */
/* Safari 26+ paints a sticky/fixed element into its status bar and toolbar as a solid band when the element is at
   least 90% of the screen wide or tall and lies under the middle of a screen edge, and keeps that band for as long as
   the element stays on the page (WebCore Page::updateFixedContainerEdges). So what sticks here is a 2px anchor that
   never qualifies; the full-screen stage hangs from it. The bottom padding ends the anchor's run exactly where the
   100vh stage used to end. Any new sticky/fixed element must likewise stay under 90% of the screen in both directions. */
.xp{position:relative;height:260vh;padding-bottom:calc(100vh - 2px);overflow:clip}
.xp-sticky{position:sticky;top:0;width:2px;height:2px;margin:0 auto}
.xp-stop{position:absolute;left:0;top:0;width:1px;height:1px}.xp-stop+.xp-stop{top:140vh} /* the video's stops: small, then full screen */
.xp-stage{position:absolute;top:0;left:50%;width:100vw;height:100vh;transform:translateX(-50%);overflow:hidden;display:grid;place-items:center;contain:layout paint}
.xp-title{position:absolute;inset:0;pointer-events:none;z-index:1}
.xp-title span{position:absolute;top:50%;font-size:var(--fs,clamp(40px,7vw,104px));line-height:1.1;font-weight:600;color:var(--ink);white-space:nowrap;will-change:transform}
/* Words beside the card, anchored at the centre; site.js moves them to the card's edges. .stack: above / below it. */
#tl{right:50%}#tr{left:50%}.stack #tl{left:50%;right:auto}.stack #tr{right:50%;left:auto}
.xp-media{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;contain:layout paint;width:var(--w,520px);height:var(--h,292px);border-radius:var(--r,28px);overflow:hidden;background:#111;box-shadow:0 30px 70px -30px rgba(27,23,20,.6);cursor:pointer}
.xp-media video{width:100%;height:100%;object-fit:cover;display:block}
.xp-play{position:absolute;left:0;top:0;width:84px;height:84px;transform:translate(calc(var(--w,520px)/2 - 50%),calc(var(--h,292px)/2 - 50%));border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 14px 40px rgba(0,0,0,.3)}
.xp-play:before{content:"";position:absolute;inset:-12px;border-radius:50%;border:2px solid rgba(255,255,255,.85);animation:ring 2.4s var(--ease) infinite}
@keyframes ring{0%{transform:scale(.85);opacity:1}100%{transform:scale(1.35);opacity:0}}
.xp-play svg{width:38px;height:38px}
.xp-bar{position:absolute;left:0;top:0;width:100%;transform:translateY(calc(var(--h,292px) - 100%));padding:28px 36px;display:flex;align-items:flex-end;justify-content:space-between;background:linear-gradient(0deg,rgba(17,17,17,.75),rgba(17,17,17,.35) 55%,rgba(17,17,17,0));opacity:var(--bar,0)}
.xp-bar b{font-size:28px;color:#fff;display:block}.xp-bar small{color:rgba(255,255,255,.8);font-size:14px}
.narrow .xp-bar>div{display:none}.narrow .xp-bar{justify-content:flex-end}
.sound{height:52px;padding:0 22px;border-radius:999px;border:0;background:#fff;color:var(--ink);font:inherit;font-weight:700;font-size:15px;display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.sound .num{font-family:Barlow;font-weight:700;color:var(--brandText)}
.xp-cap{display:var(--capd,none);position:absolute;left:0;right:0;top:0;text-align:center;font-size:24px;font-weight:600;line-height:1.4;color:var(--ink);opacity:var(--cap,0)}
.xp-hint{position:absolute;bottom:34px;left:0;right:0;text-align:center;font-family:Barlow;font-weight:700;letter-spacing:.16em;color:var(--ink);opacity:var(--hint,1);font-size:14px}
.dlg{position:fixed;inset:0;z-index:50;background:rgba(17,17,17,.75);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:none;place-items:center;padding:24px}
.dlg.open{display:grid;animation:fadein .3s ease forwards}
.dlg video{width:min(1100px,100%);aspect-ratio:16/9;border-radius:22px;background:#000;animation:grow .5s var(--ease)}
@keyframes grow{from{transform:scale(.6);opacity:0}}
.dlg button{position:absolute;top:22px;right:22px;width:48px;height:48px;border-radius:50%;border:0;background:#fff;font-size:22px;cursor:pointer}
/* ---------- features: Sticky Scroll Reveal ---------- */
.wave{display:block;width:100%;height:120px;background:var(--brand)}
.tint{background:var(--tint)}
#features{scroll-margin-top:64px} /* the nav jump would otherwise put the eyebrow under the header pill */
.feat-head{text-align:center;padding:40px 0 10px}.feat-head h2{margin-top:10px}
.story{display:grid;grid-template-columns:1fr 1fr;gap:60px;max-width:1120px;margin:0 auto;padding:0 max(32px,env(safe-area-inset-right)) 60px max(32px,env(safe-area-inset-left))}
.step{min-height:78vh;display:flex;flex-direction:column;justify-content:center;opacity:.35;transition:opacity .6s var(--ease)}
.step.active{opacity:1;filter:none}
.step .num{font-family:Barlow;font-weight:700;font-size:120px;line-height:.85;color:transparent;-webkit-text-stroke:2px #E05500} /* deeper than the brand orange: 3.5:1 on the tint */
.step.active .num{color:#E05500;transition:color .6s}
.step h3{font-size:44px;font-weight:600;line-height:1.3;margin:18px 0 14px}.step p{font-size:18px;line-height:1.9;color:var(--text2);max-width:24em}
.step .m-dev{display:none}
.sticky{position:sticky;top:12vh;height:76vh;display:flex;align-items:center;justify-content:center}
.sticky .bar{position:absolute;left:0;top:10%;bottom:10%;width:4px;border-radius:4px;background:rgba(255,107,0,.18)}
.sticky .bar i{display:block;width:100%;border-radius:4px;background:var(--brand);height:calc(var(--sp,0)*100%);transition:height .2s linear}
.screens{position:relative;width:310px;height:647px}
.screens .device{position:absolute;left:0;top:0;--w:310px;opacity:0;transform:translateY(40px) scale(.94) rotate(3deg);filter:blur(6px);transition:opacity .7s var(--ease),transform .9s var(--ease),filter .7s var(--ease)}
.screens .device.on{opacity:1;transform:rotate(-3deg);filter:none}
.screens .peek{position:absolute;z-index:3;width:76px;height:76px;transition:transform .8s var(--spring),opacity .5s}
/* ---------- more features: bento grid ---------- */
.bento-sec{background:var(--tint);padding:20px 0 120px}
.bento-sec h2{margin:10px 0 36px}
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.bt{position:relative;background:#fff;border-radius:24px;padding:24px 22px;overflow:hidden;box-shadow:0 1px 0 rgba(27,23,20,.04);transition:transform .5s var(--ease),box-shadow .5s var(--ease),opacity 1s var(--ease),filter 1s var(--ease)}
.bt.in:hover{transform:translateY(-6px);box-shadow:0 0 0 2px rgba(255,107,0,.55),0 18px 36px -18px rgba(27,23,20,.35)}
.bt .bi{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--tint);color:var(--brandText);transition:transform .5s var(--spring)}
.bt .bi svg{width:24px;height:24px}
.bt.in:hover .bi{transform:rotate(-8deg) scale(1.08)}
.bt h3{font-size:18px;font-weight:600;line-height:1.45;margin:16px 0 6px}
.bt p{font-size:14px;line-height:1.75;color:var(--text2)}
main p,main h3,main summary,.landing p{text-wrap:pretty}
:lang(ja){word-break:auto-phrase}:lang(ko){word-break:keep-all}
.b-wait{grid-column:span 2;grid-row:span 2;background:var(--brand);display:flex;flex-direction:column}
.b-wait .bi{background:rgba(255,255,255,.65);color:var(--ink)}
.b-wait h3{font-size:30px;line-height:1.35;color:var(--ink)}.b-wait p{color:var(--ink);opacity:.8;font-size:15px}
/* The notice sits above the shot in the flow, so a long language that wraps it to three lines pushes the shot down. */
.bwait{margin-top:auto;padding-top:32px;display:flex;flex-direction:column}
.bwait img{display:block;width:100%;height:auto;border-radius:16px;box-shadow:0 18px 36px -16px rgba(60,20,0,.5)}
.bpush{position:relative;order:-1;align-self:flex-end;margin:0 4px -4px 0;display:block;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:16px;padding:10px 14px;box-shadow:0 12px 26px -12px rgba(27,23,20,.45);transform:translateY(-10px) scale(.92);opacity:0;transition:transform .7s var(--spring) .5s,opacity .5s .5s}
.bpush b{display:block;font-size:13px;color:var(--ink)}.bpush small{font-size:11px;color:var(--muted)}
.b-wait.in .bpush{transform:none;opacity:1}
.b-courts{grid-column:span 2;background:#1B1714;color:#fff;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center}
.b-courts .bi{background:rgba(255,255,255,.1);color:var(--brand)}
.b-courts h3{color:#fff}.b-courts p{color:rgba(255,255,255,.7)}
.bcourts{display:flex;gap:12px;padding-top:8px}
.court{position:relative;width:102px;height:158px;border-radius:11px;background:#2E7D57;box-shadow:inset 0 0 0 2px rgba(255,255,255,.85),inset 0 0 0 9px #2E7D57,inset 0 0 0 10px rgba(255,255,255,.5),0 10px 24px rgba(0,0,0,.35);display:flex;flex-direction:column;justify-content:space-around;align-items:center;padding:12px 0}
.court .cname{position:absolute;left:50%;top:-9px;transform:translateX(-50%);padding:0 7px;border-radius:6px;background:#1B1714;font:700 12px/18px Barlow;letter-spacing:.06em;color:rgba(255,255,255,.85)}
.court .side{position:relative;display:flex;align-items:center;gap:8px}
.court .side.pair{gap:0}
.court .net{position:absolute;left:5px;right:5px;top:50%;height:2px;margin-top:-1px;background:rgba(255,255,255,.9);box-shadow:0 1px 0 rgba(0,0,0,.15)}
.court img{display:block;width:36px;height:36px;border-radius:50%;border:2px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.35)}
.court .link{display:grid;place-items:center;width:18px;height:18px;margin:0 -3px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 2px #fff;z-index:1}
.court .link svg{width:14px;height:14px;fill:#fff}
.b-courts.in .court img{animation:courtIn .7s var(--spring) backwards}
.b-courts.in .court .side:last-child img{animation-delay:.12s}.b-courts.in .court+.court img{animation-delay:.24s}
.b-courts.in .court .link{animation:courtIn .6s var(--spring) .55s backwards}
@keyframes courtIn{from{transform:scale(.3);opacity:0}}
.bt.reveal.in{transition:opacity 1s var(--ease),filter 1s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease)}
@media(max-width:900px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}
 /* Portrait: the two signature cards first, then the smaller features (user 2026-10-08) */
 .b-wait{order:-2}.b-courts{order:-1}}
@media(max-width:600px){.bento-sec{padding-bottom:80px}.bento{gap:12px}.b-wait h3{font-size:24px}.bt{padding:20px 18px}.bt h3{font-size:16px}.b-courts{grid-template-columns:1fr}.bcourts{justify-content:center}
 .bento{grid-template-columns:minmax(0,1fr)}.b-wait,.b-courts{grid-column:auto;grid-row:auto}
 .bt:not(.b-wait):not(.b-courts){display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:start;border-radius:20px}
 .bt:not(.b-wait):not(.b-courts) .bi{grid-row:1/3}.bt:not(.b-wait):not(.b-courts) h3{margin:1px 0 4px}.bt:not(.b-wait):not(.b-courts) p{grid-column:2}}
/* ---------- languages: Flip Words + synced phone ---------- */
.langs{background:#111;color:#fff;padding:120px 0;overflow:hidden;position:relative}
.langs:before{content:"";position:absolute;width:900px;height:900px;right:-200px;top:-200px;background:radial-gradient(circle,rgba(255,107,0,.35),transparent 60%);pointer-events:none}
.langs .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;position:relative}
.langs .eyebrow{color:var(--brand)}
.langs h2{font-size:min(68px,5.6vw);line-height:1.15;color:#fff;margin:14px 0 22px}
.flip{display:inline-grid;color:var(--brand);vertical-align:bottom;perspective:600px}
.flip span{grid-area:1/1;display:inline-block;opacity:0;transform:translateY(60%) rotateX(-70deg);filter:blur(4px);transform-origin:50% 100%;transition:opacity .55s var(--ease),transform .7s var(--ease),filter .55s var(--ease);white-space:nowrap;font-weight:700}
.flip span.on{opacity:1;transform:none;filter:none}
.flip span.out{opacity:0;transform:translateY(-50%) rotateX(60deg);filter:blur(4px)}
.langs p.lead{color:rgba(255,255,255,.75);font-size:17px}
.ltabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.ltab{position:relative;overflow:hidden;isolation:isolate;height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:rgba(255,255,255,.7);font:inherit;font-weight:700;font-size:14px;cursor:pointer}
.ltab.on{color:#1B1714;background:#fff;border-color:transparent;background-clip:padding-box}
.ltab i{position:absolute;inset:0;background:var(--brand);transform-origin:left;transform:scaleX(0)}
.ltab span{position:relative}
.ltab.on i{animation:fill var(--dur,2.8s) linear forwards}
@keyframes fill{to{transform:scaleX(1)}}
.lphone{position:relative;width:300px;height:626px;margin:0 auto}
.lphone .device{position:absolute;left:0;top:0;--w:300px;opacity:0;transform:scale(.96);filter:blur(8px);transition:opacity .6s var(--ease),transform .8s var(--ease),filter .6s var(--ease)}
.lphone .device.on{opacity:1;transform:rotate(4deg);filter:none}
/* ---------- FAQ (smooth open) ---------- */
.faq{padding:110px 0;max-width:820px;margin:0 auto}
.faq h2,.faq .eyebrow{text-align:center}.faq h2{margin:10px 0 30px}
.faq details{border-bottom:1px solid var(--border);padding:0 4px}
.faq summary{padding:22px 0;font-size:18px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font-family:Barlow;font-size:28px;line-height:1;color:var(--brandText);transition:transform .4s var(--ease)}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq details::details-content{block-size:0;overflow:hidden;transition:block-size .45s var(--ease),content-visibility .45s allow-discrete}
.faq details[open]::details-content{block-size:auto}
.faq details p{margin-top:-10px;padding-bottom:22px;font-size:16px;line-height:1.9;color:var(--text2)}
/* ---------- final CTA: the wordmark (as wide as its letters) fills with orange ---------- */
/* Launch waitlist pill: 21st.dev "Email Signup Form" (ln-dev7/register-02), its Tailwind classes written out.
   Kept as a row on phones too (the original stacks below 640px inside the same rounded-full box), and the input is
   16px rather than text-sm so iOS Safari doesn't zoom in on focus. */
.wl{max-width:448px;margin:16px auto 0;text-align:center}
.wl-form{display:flex;align-items:center;gap:8px;border-radius:999px;border:1px solid var(--border);background:#fff;padding:6px}
.wl-form>svg{width:16px;height:16px;flex:none;margin-left:12px;color:var(--muted)}
.wl-form input{flex:1;min-width:0;height:40px;border:0;background:transparent;padding:0 4px;font:inherit;font-size:16px;color:var(--text);outline:none}
.wl-form input::placeholder{color:var(--muted)}
.wl-form button{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 24px;border:0;border-radius:999px;background:var(--ink);color:#fff;font:inherit;font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer;transition:opacity .15s}
.wl-form button:hover{opacity:.9}.wl-form button:disabled{opacity:.5;pointer-events:none}
.wl-form button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.wl-form button svg{width:16px;height:16px}
.wl-form:focus-within{border-color:var(--ink)}
.wl-note{margin-top:12px;font-size:12px;line-height:1.6;color:var(--text2)}
.wl-note.err{color:#8C1D18;font-weight:600}
.wl.done .wl-form{display:none}.wl.done .wl-note{margin-top:0;font-size:15px;font-weight:700;color:var(--ink)}
.final{position:relative;background:var(--tint);padding:110px 0 120px;text-align:center;overflow:clip}
.bigword{display:inline-block;font-family:'PK Manrope',sans-serif;font-weight:500;font-size:min(clamp(56px,12vw,190px),15vw);line-height:1;letter-spacing:-.02em;white-space:nowrap;color:transparent;
 background:linear-gradient(90deg,var(--brand) var(--f,0%),rgba(27,23,20,.1) var(--f,0%));-webkit-background-clip:text;background-clip:text}
.bigword b{font-weight:800}
.final h2{margin:34px 0 26px}

footer{background:#111;color:#fff;padding:70px 0 40px}
footer .wrap{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-end}
footer a{color:rgba(255,255,255,.75);margin-right:22px;font-size:14px;white-space:nowrap;display:inline-block;margin-bottom:6px}footer small{display:block;color:rgba(255,255,255,.5);margin-top:24px}
@media(max-width:600px){footer a{padding:12px 0;margin-bottom:0}}
/* ---------- Scroll Reveal ---------- */
.reveal{opacity:0;filter:blur(4px);transform:translateY(24px);transition:opacity .8s var(--ease),transform .9s var(--ease),filter .8s var(--ease);transition-delay:var(--d,0s)}
@media(scripting:none){.reveal{opacity:1;filter:none;transform:none}}
.reveal.in{opacity:1;filter:none;transform:none}
@media(max-width:900px){.pill nav a{display:none}
 .story{grid-template-columns:1fr;padding:0 max(20px,env(safe-area-inset-right)) 40px max(20px,env(safe-area-inset-left))}.sticky{display:none}.step{min-height:0;opacity:1;filter:none;padding:40px 0}.step .num{color:#E05500}.step .m-dev{display:block;margin:26px auto 0;--w:260px;transform:rotate(-3deg)}
 .langs .wrap{grid-template-columns:1fr}.langs h2{font-size:52px}.faq{padding-inline:max(32px,env(safe-area-inset-left)) max(32px,env(safe-area-inset-right))}}
@media(max-width:600px){
 .bubble{font-size:19px;padding:8px 15px} /* the orb is scaled to .5-.68 on phones, so this reads as 12-13px */
 .pillbar{top:10px;padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left))}.pill{max-width:100%;--h:48px;padding-right:8px;gap:12px}.pill .chip{transition:height .35s var(--ease),font-size .35s var(--ease)}.scrolled .pill{max-width:calc(100% - 32px);--h:44px}.scrolled .pill .chip{height:28px;font-size:12px}
  .hero{padding-top:92px}.sky{--band:linear-gradient(var(--brand) 10px,rgba(255,107,0,0) 72px)}.hero h1{font-size:min(46px,11.8vw)}.stage{height:370px;margin-top:28px}.phone{width:150px;margin-left:-75px;--w:150px}
 .store{height:54px;padding:0 18px 0 14px}.store b{font-size:16px}.store .si{width:26px;height:26px}
 .xp{height:150vh}.hero .chips{gap:6px}.hero .chip{padding:0 10px;font-size:13px}
 .xp-cap{font-size:20px}.xp-bar{padding:12px}.sound{height:38px;padding:0 14px;font-size:13px}.sound .lbl{display:none}.xp-play{width:64px;height:64px}
 .step{padding:28px 0}.step h3{font-size:30px}.step .num{font-size:64px}.step .m-dev{--w:150px;margin-top:18px}.langs{padding:56px 0}.langs .wrap{gap:20px}.langs h2{font-size:38px;margin:8px 0 14px}.ltabs{margin-top:20px}.lphone{width:150px;height:313px}.lphone .device{--w:150px}
 .faq{padding:70px max(20px,env(safe-area-inset-right)) 70px max(20px,env(safe-area-inset-left))}.final{padding:80px 0}}
/* Landscape phones: a lower header that clearly shrinks once the page scrolls; the desktop one would stay as wide as
   the screen there, since its 980px cap is wider than a phone (user 10-09). */
@media(orientation:landscape) and (max-height:500px){
 .sky{--band:linear-gradient(var(--brand) 8px,rgba(255,107,0,0) 64px)}
 .pillbar{top:8px}.pill{max-width:100%;--h:56px;padding-right:10px}
 .pill .chip{transition:height .35s var(--ease),font-size .35s var(--ease)}
 .scrolled .pill{max-width:min(100%,500px);--h:44px;padding-right:8px}
 .scrolled .pill .chip{height:28px;font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}
 /* The video doesn't grow here, so nothing fades the shared background: it scrolls with the hero and fades out at the
    bottom of the first screen instead. */
 .hero-bg{position:absolute;top:0;left:0;right:0;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
 .ch,.fade,.phone,.orb .in,.rings{opacity:1!important;filter:none!important;transform:none!important}.reveal{opacity:1;filter:none;transform:none}
 .xp{height:auto;padding:40px 16px}.xp-sticky{position:static;width:auto;height:auto;margin:0}.xp-stage{position:static;width:auto;height:auto;transform:none}.xp-title,.xp-hint{display:none}.xp-media{position:relative;left:auto;top:auto;transform:none;width:min(1040px,100%)!important;height:auto!important;aspect-ratio:16/9;margin:0 auto}.xp-bar{opacity:1;top:auto;bottom:0;transform:none}.xp-play{left:50%;top:50%;transform:translate(-50%,-50%)}
 .step{opacity:1;filter:none}.bigword{color:var(--brand)}}
/* ---------- language menu ---------- */
.langsw{position:relative}
.langsw summary{list-style:none;cursor:pointer;user-select:none}
.langsw summary::-webkit-details-marker{display:none}
.langsw .menu{position:absolute;right:0;top:calc(100% + 10px);min-width:180px;padding:8px;border-radius:18px;background:#fff;box-shadow:0 18px 40px -16px rgba(27,23,20,.4),0 0 0 1px rgba(27,23,20,.06);display:grid;gap:2px;z-index:40}
.langsw .menu a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-radius:12px;color:var(--text);text-decoration:none;font-size:15px;font-weight:600}
.langsw .menu a:hover{background:var(--fill)}
.langsw .menu a[aria-current]{color:var(--brandText)}
.langsw .menu a[aria-current]:after{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand)}
/* ---------- simple pages: legal / landing / login / 404 ---------- */
.page{min-height:100vh;background:var(--tint);padding:150px 0 90px}
.page .wrap{max-width:760px}
.page h1{font-size:40px;line-height:1.3;margin-bottom:12px}
.page .meta{color:var(--muted);font-size:14px}
.sheet{background:#fff;border-radius:28px;padding:36px 34px;margin-top:28px;box-shadow:0 1px 0 rgba(27,23,20,.04)}
.legal .intro{font-size:16px;line-height:1.95;color:var(--text2)}
.legal section{margin-top:30px}
.legal h2{font-size:19px;line-height:1.5;margin-bottom:8px}
.legal p{font-size:15px;line-height:1.95;color:var(--text2);white-space:pre-line}
.notice{display:inline-block;margin-top:14px;padding:8px 14px;border-radius:12px;background:#fff;color:var(--brandText);font-size:14px;font-weight:600}
.landing .cover{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:20px;background:var(--fill)}
.landing h1{font-size:30px;margin:22px 0 8px}
.landing .when{color:var(--text2);font-size:16px;line-height:1.7}
.landing .actions{display:grid;gap:12px;margin-top:28px}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;height:56px;border-radius:999px;border:0;background:var(--brand);color:var(--ink);font:inherit;font-size:17px;font-weight:700;text-decoration:none;cursor:pointer}
.btn.dark{background:var(--ink);color:#fff}
.btn.ghost{background:transparent;color:var(--text2);height:auto;font-size:15px;font-weight:600}
.landing .noapp{margin:30px 0 14px;font-size:14px;font-weight:700;color:var(--muted);text-align:center}
.landing .wechat{margin-top:28px;font-size:16px;font-weight:700;color:var(--text);text-align:center}
.landing .wechat::before{content:'↗ '}
.landing .cta,.login .cta{justify-content:center}
.form{display:grid;gap:14px;margin-top:24px}.form[hidden]{display:none}
.form label{display:grid;gap:6px;font-size:14px;font-weight:700;color:var(--text2)}
.form input{height:52px;border-radius:14px;border:1px solid var(--border);padding:0 16px;font:inherit;font-size:16px;background:var(--bg)}
.form input:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:transparent}
.msg{margin-top:16px;padding:12px 16px;border-radius:14px;font-size:15px;line-height:1.7}
.msg.err{background:#FDECEA;color:#8C1D18}.msg.ok{background:#E6F4EA;color:#1E6B35}
.page .pillbar{position:fixed}
@media(max-width:600px){.page{padding:110px 0 70px}.page h1{font-size:30px}.sheet{padding:26px 20px;border-radius:22px}}
.faq-more{margin-top:26px;text-align:center;font-size:15px;color:var(--text2)}
.faq-more a,footer small a{color:inherit}
.login .actions{display:grid;gap:10px;margin-top:22px}.login .actions[hidden]{display:none}
/* One font per language, picked by the nearest lang attribute: a Japanese font has no 视/频, so a Chinese line drawn
   with it mixes two fonts. Latin comes first in the system UI font (BlinkMacSystemFont: Chrome on Mac ignores
   -apple-system); Windows gets Meiryo, as Yu Gothic renders thin there. Last in the file so it beats font:inherit. */
:root{--latin:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto}
[lang]{font-family:var(--latin),"Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,"Noto Sans JP",sans-serif}
[lang|=zh]{font-family:var(--latin),"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif}
[lang=zh-TW]{font-family:var(--latin),"PingFang TC","Microsoft JhengHei","Noto Sans TC",sans-serif}
[lang=ko]{font-family:var(--latin),"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif}
/* The 1.75-1.9 body leading suits CJK; Latin letters carry their own ascender/descender room. */
html:is(:lang(en),:lang(fr)) :is(.lead,.step p,.bt p,.faq details p){line-height:1.6}
/* Home page headings: Noto Sans 700 in Chinese, Japanese and Korean (site/tools/fonts.py), the face of the promo film, so
   every language and Windows get the same weight (Hiragino came out at W5 for "600"). Japanese closes up its punctuation
   (palt), so 「、」 no longer leaves a hole. English and French keep the system face. The hero's line under the title is
   larger on computers. Selection and focus take the page's colours instead of the browser's blue. Preview 2026-10-10. */
:root{--hd:var(--latin)}[lang=ja]{--hd:"PK Display ja"}[lang=zh-CN]{--hd:"PK Display zh-CN"}[lang=zh-TW]{--hd:"PK Display zh-TW"}[lang=ko]{--hd:"PK Display ko"}
:is(#h1,.feat-head h2,.step h3,.bento-sec h2,.bt h3,.langs h2,.faq>h2,.final h2,.xp-title span,.xp-cap){font-family:var(--hd),var(--latin),sans-serif;font-weight:700}
html:lang(ja) :is(#h1,.feat-head h2,.step h3,.bento-sec h2,.bt h3,.langs h2,.faq>h2,.final h2,.xp-title span,.xp-cap){font-feature-settings:"palt"}
@media(min-width:601px){.hero .lead{font-size:21px}}
::selection{background:var(--ink);color:#fff}.langs ::selection,footer ::selection{background:var(--brand);color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}:is(.langs,footer,.dlg) :focus-visible{outline-color:#fff}