
@property --n{syntax:'<number>';inherits:true;initial-value:.35}
*{box-sizing:border-box;margin:0;padding:0}
:root{--ink:#f6f4ff;--mh:.78}
body,body.t-day{--cardbg:rgba(255,255,255,.93);--tx:#14141b;--mu:#4d4d5b;--line:rgba(0,0,0,.09);--inv:#f4f4fb;--soon:rgba(0,0,0,.1)}
body.t-dusk{--cardbg:rgba(238,234,250,.92);--tx:#1b1a2b;--mu:#54506a;--line:rgba(0,0,0,.1);--inv:#f4f4fb;--soon:rgba(0,0,0,.1)}
body.t-night{--cardbg:rgba(16,18,46,.88);--tx:#f4f4fb;--mu:#b3b8cf;--line:rgba(255,255,255,.14);--inv:#14141b;--soon:rgba(255,255,255,.14)}
html{overflow-x:clip;scroll-behavior:auto;-webkit-text-size-adjust:100%;scroll-padding-top:70px}
body{font-family:'Outfit',system-ui,sans-serif;color:var(--ink);background:#141B35;overflow-x:clip;line-height:1.5;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:-999px;top:10px;background:#fff;color:#000;padding:10px 14px;border-radius:10px;z-index:400}.skip:focus{left:10px}
/* ── the world: one canvas, drawn by dc.js ── */
#sky,#world{position:fixed;inset:0;width:100%;height:100%;display:block}#sky{z-index:-7;background:#141B35}#world{z-index:-5}
#sun{position:fixed;left:0;top:0;width:1040px;height:1040px;margin:-520px 0 0 -520px;z-index:-6;pointer-events:none;will-change:transform,opacity;transform:translate3d(-9999px,0,0)}
#sun canvas{position:absolute;inset:0;width:100%;height:100%}
#sun .rays{position:absolute;inset:0;fill:none;stroke:rgba(214,170,110,.85);stroke-width:24;stroke-linecap:round;animation:sunspin 140s linear infinite;will-change:transform}
@keyframes sunspin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){#sun .rays{animation:none}}
/* ── chrome ── */
.prog{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#FFB27A,#fff,#9ad0ff);z-index:300;will-change:transform}
nav{position:fixed;top:0;left:0;right:0;z-index:200;pointer-events:none}
nav:before{content:"";position:absolute;left:0;right:0;top:0;height:110px;background:linear-gradient(180deg,rgba(8,10,32,.5),transparent);pointer-events:none}
nav .in{max-width:1320px;margin:0 auto;padding:16px 26px;display:flex;justify-content:space-between;align-items:center;gap:14px}
nav .in>*{pointer-events:auto}
.logo{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk';font-weight:700;font-size:20px;text-shadow:0 2px 14px rgba(20,10,50,.35)}.logo img{width:28px;border-radius:7px}
.hud{display:flex;align-items:center;gap:0;border-radius:99px;background:rgba(14,16,40,.62);border:1px solid rgba(255,255,255,.22);padding:4px;font-family:ui-monospace,Menlo,monospace;font-size:13px;letter-spacing:.06em}
.hud span{padding:7px 14px;border-radius:99px}.hud span+span{border-left:1px solid rgba(255,255,255,.16);border-radius:0}.hud b{font-weight:600;color:#fff}.hud em{font-style:normal;opacity:.75}
.rt{display:flex;gap:10px;align-items:center}
.kbd{display:inline-flex;gap:8px;align-items:center;padding:8px 13px;border-radius:12px;background:rgba(14,16,40,.62);border:1px solid rgba(255,255,255,.22);font-size:14px}.kbd kbd{font-family:inherit;padding:1px 6px;border-radius:6px;background:rgba(255,255,255,.16);font-size:12px}
.lang{position:relative}.lang>button{padding:8px 12px;border-radius:12px;background:rgba(14,16,40,.62);border:1px solid rgba(255,255,255,.22);font-size:14px}
.lang ul{position:absolute;right:0;top:calc(100% + 8px);list-style:none;min-width:170px;padding:6px;border-radius:14px;background:rgba(14,16,40,.96);border:1px solid rgba(255,255,255,.18);display:none}.lang.on ul{display:block}
.lang li a{display:flex;justify-content:space-between;padding:8px 10px;border-radius:9px;font-size:14px}.lang li a:hover{background:rgba(255,255,255,.12)}.lang li small{opacity:.6}
.ruler{position:fixed;left:22px;top:50%;translate:0 -50%;height:46vh;width:46px;z-index:150;pointer-events:none}
.ruler:before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:rgba(255,255,255,.35)}
.ruler i{position:absolute;left:0;width:9px;height:1px;background:rgba(255,255,255,.55)}.ruler i.m{width:16px}
.ruler span{position:absolute;white-space:nowrap;left:22px;font-family:ui-monospace,Menlo,monospace;font-size:10.5px;opacity:.75;translate:0 -50%}
.ruler .you{position:absolute;left:-5px;top:0;width:11px;height:11px;will-change:transform;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.25),0 0 18px #fff;translate:0 -50%}
/* ── hero ── */
.hero{position:relative;height:max(100svh,780px);display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:17vh 24px 0 max(124px,8vw);overflow:hidden}
.hero h1{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(40px,5.7vw,96px);line-height:.95;letter-spacing:-.045em;text-shadow:0 8px 50px rgba(10,10,40,.55);max-width:9em}
.hero h1 em{color:#FFD9A0;padding-right:.08em}
.hero .sub{max-width:28em;margin-top:22px;font-size:clamp(17px,1.5vw,21px);text-shadow:0 2px 18px rgba(10,10,40,.6);opacity:.96}
.hero .go{display:inline-flex;margin-top:26px;padding:15px 26px;border-radius:99px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.45);font-weight:500;transition:.25s}.hero .go:hover{background:rgba(255,255,255,.3);transform:translateY(-2px)}
.trust{display:flex;gap:22px;margin-top:20px;font-size:14.5px;opacity:.92;flex-wrap:wrap}.trust span:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#7CF0B0;margin-right:8px;vertical-align:1px;box-shadow:0 0 8px #7CF0B0}
/* ── trail ── */
.trail{position:relative;max-width:1320px;margin:0 auto;padding:0 28px 6vh}
.trail svg.path{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:1}
.trail .base{fill:none;stroke:rgba(255,255,255,.5);stroke-width:2;stroke-dasharray:3 9;stroke-linecap:round}
.trail .seg{fill:none;stroke:#fff;stroke-width:3.5;stroke-linecap:round;opacity:0;transition:opacity .6s}.trail .seg.lit{opacity:.95}
.hiker{position:absolute;left:0;top:0;width:0;height:0;z-index:5;pointer-events:none}.hiker i{position:absolute;left:-10px;top:-10px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.28),0 0 28px 8px rgba(255,255,255,.75)}
.hiker i:after{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px solid rgba(255,255,255,.6);animation:pl 2.2s ease-out infinite}@keyframes pl{from{transform:scale(.4);opacity:1}to{transform:scale(1.6);opacity:0}}
.camp{position:relative;min-height:112vh;content-visibility:auto;contain-intrinsic-size:auto 112vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(110px,12vw,190px);z-index:2}
.camp:nth-of-type(even) .ph{order:2}
.ph{display:flex;flex-direction:column;align-items:center;gap:22px}
.ph .wrap{position:relative;width:clamp(250px,23vw,330px);transform:translateY(60px) scale(.96);opacity:0;transition:transform 1.1s cubic-bezier(.2,.8,.2,1),opacity 1s}
.camp.in .ph .wrap{transform:none;opacity:1}
.ph .glowp{position:absolute;inset:-12% -30% -4%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 70%,transparent),transparent);opacity:.5;filter:blur(18px);z-index:-1}
.ph .dots{display:flex;gap:8px}.ph .dots button{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.45);transition:.3s}.ph .dots button.on{background:#fff;width:24px;border-radius:99px}
.card{background:var(--cardbg);border:1px solid var(--line);border-radius:30px;padding:30px 32px;color:var(--tx);box-shadow:0 40px 80px -36px rgba(10,10,50,.55);max-width:520px;transform:translateY(40px);opacity:0;transition:transform 1s .1s cubic-bezier(.2,.8,.2,1),opacity .9s .1s}
.camp:nth-of-type(odd) .card{justify-self:start}.camp:nth-of-type(even) .card{justify-self:end}
.camp.in .card{transform:none;opacity:1}
.card .tag{display:flex;gap:10px;align-items:center;font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mu)}.card .tag b{color:var(--c);font-weight:600}
.card .ap{display:flex;gap:16px;align-items:center;margin:16px 0 4px}.card .ap img{width:64px;border-radius:16px;box-shadow:0 12px 24px -10px rgba(0,0,0,.55)}
.card h2{font-family:'Space Grotesk';font-size:clamp(34px,3.8vw,54px);letter-spacing:-.05em;line-height:.95}.card .cat{color:var(--mu);font-size:16px;margin-top:4px}
.card p{margin:16px 0 14px;line-height:1.6;font-size:16.5px;color:var(--tx)}
.card ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:22px}.card li{display:flex;gap:11px;font-size:15px;color:var(--tx)}.card li:before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;background:color-mix(in srgb,var(--c) 22%,transparent);box-shadow:inset 0 0 0 1.5px var(--c);-webkit-mask:none}
.card .row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.btn{display:inline-flex;padding:13px 22px;border-radius:13px;background:var(--tx);color:var(--inv);font-weight:600;font-size:15.5px;transition:.2s}.btn:hover{transform:translateY(-2px)}.btn.soon{background:var(--soon);color:var(--tx)}
.card .pr{color:var(--mu);font-size:14px}
.also{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}.also small{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mu);margin-bottom:10px}
.also .ch{display:flex;gap:8px;flex-wrap:wrap}.also a{display:flex;gap:9px;align-items:center;padding:6px 14px 6px 6px;border-radius:99px;border:1px solid var(--line);font-size:14px;transition:.2s}.also a:hover{background:color-mix(in srgb,var(--c) 14%,transparent)}.also img{width:26px;border-radius:7px}
.flag{position:absolute;left:50%;top:50%;z-index:3;pointer-events:none}
/* ── summit ── */
.summit{position:relative;padding:14vh 28px 0;max-width:1320px;margin:0 auto;z-index:2}
.summit h2{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(36px,6.4vw,100px);letter-spacing:-.045em;line-height:.96;text-align:center;text-shadow:0 8px 40px rgba(0,0,10,.5)}.summit .s{text-align:center;opacity:.8;font-size:18px;margin-top:12px}
.const{position:relative;max-width:1100px;margin:7vh auto 0;aspect-ratio:16/10}@media(max-width:900px){.const{aspect-ratio:1/1}}
.const svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.const line{stroke:rgba(255,255,255,.55);stroke-width:1.3;stroke-dasharray:2 5;vector-effect:non-scaling-stroke}
.star{position:absolute;translate:-50% -50%;display:flex;flex-direction:column;align-items:center;gap:6px;transition:transform .3s}
.star img{width:clamp(38px,5vw,60px);border-radius:22%;box-shadow:0 0 0 2px rgba(255,255,255,.25),0 0 30px 4px rgba(190,205,255,.45);transition:.3s;animation:tw 4s ease-in-out infinite}
.star span{font-size:12px;white-space:nowrap;opacity:.8;text-shadow:0 1px 8px rgba(0,0,10,.8)}
.star:hover{transform:scale(1.25);z-index:5}.star:hover img{box-shadow:0 0 0 2px #fff,0 0 46px 10px rgba(190,205,255,.8)}
@keyframes tw{50%{box-shadow:0 0 0 2px rgba(255,255,255,.2),0 0 18px 2px rgba(190,205,255,.25)}}
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:12vh}.why div{padding:26px;border-radius:26px;background:rgba(10,12,38,.55);border:1px solid rgba(255,255,255,.14)}
.why i{font-style:normal;color:#FFD9A0;font-family:'Fraunces'}.why h3{font-family:'Fraunces';font-size:23px;margin:8px 0}.why p{opacity:.8;line-height:1.55;font-size:15px}
.fin{text-align:center;padding:12vh 0 4vh}.fin a{display:inline-flex;padding:15px 26px;border-radius:99px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);font-weight:500}.fin a:hover{background:rgba(255,255,255,.26)}
footer{max-width:1320px;margin:0 auto;padding:6vh 28px 60px;color:rgba(255,255,255,.55);font-size:13.5px;line-height:1.7;position:relative;z-index:2}
footer .r{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:14px}footer a{color:rgba(255,255,255,.8)}
/* ── palette ── */
.pal{position:fixed;inset:0;z-index:500;display:none;align-items:flex-start;justify-content:center;padding-top:14vh;background:rgba(5,5,25,.55);}.pal.on{display:flex}
.pal .bx{width:min(640px,92vw);border:1px solid rgba(255,255,255,.2);border-radius:18px;background:rgba(14,16,40,.92);box-shadow:0 50px 120px rgba(0,0,0,.6);overflow:hidden}
.pal input{width:100%;padding:20px 22px;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.14);color:#fff;font:inherit;font-size:18px;outline:0}
.pal ul{list-style:none;max-height:52vh;overflow:auto;padding:8px}.pal li{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:11px;cursor:pointer}.pal li.sel{background:rgba(255,255,255,.12)}.pal li img{width:30px;border-radius:8px}.pal li span{opacity:.6;font-size:13px;margin-left:auto}
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s,transform 1s cubic-bezier(.2,.8,.2,1)}.rv.in{opacity:1;transform:none}
@media(max-width:1000px){.camp{grid-template-columns:1fr;gap:26px;min-height:0;padding:9vh 0;justify-items:center}.camp:nth-of-type(even) .ph{order:0}.camp .card{justify-self:center!important;max-width:560px}.ph .wrap{width:min(62vw,280px)}.ruler,.hud span:nth-child(3){display:none}.why{grid-template-columns:1fr 1fr}.herop_unused{width:96vw;bottom:-10vh}.trail svg.path{opacity:.6}}
@media(max-width:1000px){.hero{align-items:center;text-align:center;padding:13vh 22px 0}.hero .trust{justify-content:center}}
@media(max-width:620px){.const{aspect-ratio:3/4}.hud{display:none}.why{grid-template-columns:1fr}.kbd span{display:none}.hero{padding-top:13vh}.card{padding:24px 22px}.star span{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv,.camp .card,.camp .ph .wrap{opacity:1;transform:none}}
.card,.glass,.hd,.stats div,.q button,.fold summary{transition:background-color .6s,color .6s,border-color .6s}

.store{display:inline-block;margin:10px 8px 0;padding:11px 20px;border-radius:999px;background:rgba(16,22,48,.62);color:#fff;border:1px solid rgba(255,255,255,.3);font-weight:500;backdrop-filter:blur(6px);transition:.25s}.store:hover{background:rgba(16,22,48,.82)}.fin .store{margin:0 12px 12px 0}

/* ── sections shared by the app pages ─────────────────────────────── */
html[lang=ja] h1,html[lang=ja] h2,html[lang=ja] h3,html[lang=zh] h1,html[lang=zh] h2,html[lang=zh] h3{letter-spacing:0!important;line-height:1.18!important}
html[lang=ja] body,html[lang=zh] body{line-height:1.7}
html[lang=ru] h1,html[lang=el] h1{letter-spacing:-.02em}
.sec{position:relative;max-width:1240px;margin:0 auto;padding:12vh 28px 0;z-index:2}
.hd{display:inline-block;max-width:min(760px,100%);background:var(--cardbg);border:1px solid var(--line);color:var(--tx);border-radius:24px;padding:20px 26px;margin-bottom:30px;box-shadow:0 30px 60px -34px rgba(10,10,50,.5)}
.hd h2{font-family:'Space Grotesk';font-size:clamp(28px,3.6vw,50px);letter-spacing:-.045em;line-height:1.02}.hd p{color:var(--mu);margin-top:8px;font-size:17px;line-height:1.55}
.glass{background:var(--cardbg);border:1px solid var(--line);color:var(--tx);border-radius:26px;box-shadow:0 30px 60px -34px rgba(10,10,50,.5)}
/* app hero */
.hero.app{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:20px;padding:15vh 24px 6vh max(124px,8vw);height:auto;min-height:max(100svh,780px);overflow:visible}
.hero.app .l{max-width:640px}
.appid{display:flex;align-items:center;gap:16px;margin-bottom:22px}.appid img{width:76px;border-radius:19px;box-shadow:0 14px 30px -10px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.18)}
.appid b{display:block;font-family:'Space Grotesk';font-size:26px;letter-spacing:-.03em;line-height:1.05}.appid span{opacity:.85;font-size:16px}
.hero.app h1{font-size:clamp(34px,4.6vw,74px);max-width:11em}
.hero.app .lede{max-width:34em;margin-top:20px;font-size:clamp(16px,1.35vw,19px);line-height:1.6;text-shadow:0 2px 18px rgba(10,10,40,.6);opacity:.96}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}.chips span{padding:7px 14px;border-radius:99px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);font-size:14px}
.cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:28px}
.sbtn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:14px;background:#fff;color:#0c0d12;font-weight:600;font-size:16px;transition:.2s;box-shadow:0 14px 34px -14px rgba(0,0,0,.6)}.sbtn:hover{transform:translateY(-2px)}
.sbtn.soon{background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.4);box-shadow:none;}
.gbtn{display:inline-flex;padding:15px 22px;border-radius:14px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.34);font-weight:500;transition:.2s}.gbtn:hover{background:rgba(255,255,255,.26)}
.hero.app .r{display:flex;justify-content:center;align-items:center;position:relative}
.hero.app .big{width:min(100%,clamp(250px,25vw,350px));position:relative}
.hero.app .big:before{content:"";position:absolute;inset:-10% -34% -2%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 70%,transparent),transparent);opacity:.5;filter:blur(20px);z-index:-1}
.hero.app .dots{position:absolute;left:0;right:0;bottom:-26px;display:flex;justify-content:center;gap:8px}
.dots button{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.45);transition:.3s}.dots button.on{background:#fff;width:24px;border-radius:99px}
/* moment */
.moment{text-align:center;max-width:980px;margin:0 auto;padding-top:14vh}
.moment q{display:block;quotes:none;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(28px,4.4vw,64px);line-height:1.08;letter-spacing:-.035em;text-shadow:0 8px 40px rgba(0,0,20,.45)}
.moment p{margin-top:18px;font-size:clamp(17px,1.7vw,22px);opacity:.92;text-shadow:0 2px 18px rgba(0,0,20,.5);line-height:1.5}
.stats{display:flex;gap:16px;justify-content:center;margin-top:34px;flex-wrap:wrap}.stats div{min-width:150px;padding:18px 22px;border-radius:22px;background:rgba(10,12,38,.38);border:1px solid rgba(255,255,255,.2);text-align:center}
.stats b{display:block;font-family:'Space Grotesk';font-size:44px;letter-spacing:-.05em;line-height:1}.stats span{font-size:13.5px;opacity:.85}
/* feature camps reuse .camp/.card; the kicker */
.card .kick{display:flex;gap:10px;align-items:center;font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mu)}.card .kick b{color:var(--c);font-weight:600}
.card .big2{font-size:17px;line-height:1.65;margin:14px 0 4px;color:var(--tx)}
.card .more{margin-top:18px;display:flex;flex-direction:column;gap:9px}
/* steps rail */
.rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x proximity;padding:6px 6px 26px;margin:0 -6px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.4) transparent;cursor:grab}.rail:active{cursor:grabbing}
.step{flex:none;width:min(300px,76vw);scroll-snap-align:start;padding:22px 22px 24px;display:flex;flex-direction:column;gap:14px}
.step .n{font-family:'Space Grotesk';font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mu)}.step .n b{color:var(--c);font-size:26px;letter-spacing:-.04em;margin-right:6px}
.step h3{font-family:'Space Grotesk';font-size:21px;letter-spacing:-.03em;line-height:1.1}.step p{color:var(--mu);font-size:15px;line-height:1.55}
.step .dv{width:68%;margin:6px auto 4px}
/* examples */
.exg{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.ex{padding:24px 24px 22px;display:flex;flex-direction:column;gap:6px}
.ex .tr{font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--c)}.ex h3{font-family:'Space Grotesk';font-size:22px;letter-spacing:-.03em}.ex .who{color:var(--mu);font-size:14.5px;margin-bottom:8px}
.ex ul{list-style:none;border-top:1px dashed var(--line);margin-top:6px;padding-top:10px;display:flex;flex-direction:column;gap:7px}.ex li{display:flex;justify-content:space-between;gap:14px;font-size:14.5px}.ex li span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--mu)}
.ex .tot{display:flex;justify-content:space-between;gap:12px;margin-top:10px;padding-top:12px;border-top:1px solid var(--line);font-weight:600}.ex .note{color:var(--mu);font-size:13.5px;margin-top:12px;line-height:1.55}
/* compare */
.cmp{overflow:auto;padding:0}.cmp table{width:100%;border-collapse:collapse;min-width:620px}.cmp th,.cmp td{padding:16px 22px;text-align:left;border-bottom:1px solid var(--line);font-size:15.5px;vertical-align:top;line-height:1.5}
.cmp thead th{font-family:'Space Grotesk';font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--mu);font-weight:500}.cmp tbody th{font-weight:600;width:26%}.cmp td{color:var(--mu)}.cmp td.yes{color:var(--tx);background:color-mix(in srgb,var(--c) 10%,transparent)}.cmp tr:last-child>*{border-bottom:0}
/* more cards */
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.mc{padding:24px;transition:transform .3s}.mc:hover{transform:translateY(-5px)}.mc .mk{font-family:'Space Grotesk';color:var(--c);font-size:14px;letter-spacing:.1em}.mc h3{font-family:'Space Grotesk';font-size:21px;letter-spacing:-.03em;margin:10px 0 8px;line-height:1.1}.mc p{color:var(--mu);font-size:15px;line-height:1.6}
/* bands (watch, ipad) */
.band{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;padding:30px 34px}.band .ic{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 22%,transparent);font-size:30px}.band h3{font-family:'Space Grotesk';font-size:clamp(24px,2.8vw,38px);letter-spacing:-.04em}.band p{color:var(--mu);margin-top:6px;line-height:1.6;max-width:46em}
/* offer */
.offer{text-align:center;padding:48px 34px;max-width:860px;margin:0 auto}.offer .bd{display:inline-block;padding:6px 14px;border-radius:99px;background:color-mix(in srgb,var(--c) 18%,transparent);color:var(--c);font-weight:600;font-size:14px;letter-spacing:.04em}
.offer h2{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(30px,4.4vw,60px);letter-spacing:-.035em;line-height:1.02;margin:16px 0 12px}.offer p{color:var(--mu);font-size:18px;line-height:1.6;max-width:36em;margin:0 auto}.offer .sbtn{margin-top:26px;background:var(--tx);color:var(--inv)}.offer .sbtn.soon{background:var(--soon);color:var(--tx);border-color:var(--line)}
.offer .nt{margin-top:16px;font-size:14px;color:var(--mu)}
/* faq */
.faq{max-width:900px}.q{border-bottom:1px solid var(--line)}.q:last-child{border:0}.q button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 26px;text-align:left;font-size:18px;font-family:'Space Grotesk';letter-spacing:-.02em;color:var(--tx)}.q button i{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-style:normal;transition:.3s;color:var(--mu)}
.q.on button i{transform:rotate(45deg);background:var(--tx);color:var(--inv)}.q .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s}.q.on .a{grid-template-rows:1fr}.q .a>div{overflow:hidden}.q .a .in{padding:0 26px 22px;color:var(--mu);line-height:1.7;font-size:16px}.q .a p+p{margin-top:10px}.q .a a{color:var(--c);text-decoration:underline}.q .a ul,.q .a ol{padding-left:20px;margin:8px 0}
/* facts */
.facts{padding:6px 0}.facts dl{display:grid;grid-template-columns:minmax(120px,28%) 1fr}.facts dt,.facts dd{padding:15px 26px;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.5}.facts dt{color:var(--mu);font-weight:500}.facts dt:nth-last-of-type(1),.facts dd:last-of-type{border:0}
/* folds (support, privacy) */
.fold{margin-top:14px}.fold summary{list-style:none;cursor:pointer;padding:20px 26px;font-family:'Space Grotesk';font-size:19px;letter-spacing:-.02em;display:flex;justify-content:space-between;align-items:center;gap:16px}.fold summary::-webkit-details-marker{display:none}.fold summary:after{content:"+";width:28px;height:28px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--mu);flex:none;transition:.3s}.fold[open] summary:after{transform:rotate(45deg)}
.fold .in{padding:0 26px 24px;color:var(--mu);line-height:1.7;font-size:15.5px}.fold .in p{margin-top:10px}.fold .in a{color:var(--c);text-decoration:underline}.fold .in strong{color:var(--tx)}.fold .in ul,.fold .in ol{padding-left:20px;margin:8px 0}
/* other apps */
.oa{display:flex;flex-wrap:wrap;gap:10px}.oa a{display:flex;gap:10px;align-items:center;padding:8px 16px 8px 8px;border-radius:99px;background:var(--cardbg);border:1px solid var(--line);color:var(--tx);font-size:14.5px;transition:.2s}.oa a:hover{transform:translateY(-3px);border-color:var(--c)}.oa img{width:34px;border-radius:9px}.oa small{display:block;color:var(--mu);font-size:12px;line-height:1.2}
/* language row + footer */
.langs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:34px}.langs span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.75;margin-right:6px}.langs a{padding:8px 15px;border-radius:99px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);font-size:14px;transition:.2s}.langs a:hover{background:rgba(255,255,255,.26)}.langs a.on{background:#fff;color:#0c0d12}
.sup{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.sup .glass{padding:26px 28px}.sup h3{font-family:'Space Grotesk';font-size:21px;letter-spacing:-.03em;margin-bottom:10px;line-height:1.15}.sup p{color:var(--mu);line-height:1.65;font-size:15.5px}.sup a{color:var(--c);text-decoration:underline}.sup strong{color:var(--tx)}
footer.pf{max-width:none;margin:0;padding:12vh max(28px,calc((100vw - 1240px)/2)) 60px;background:linear-gradient(180deg,transparent,rgba(6,8,28,.72) 38%);color:rgba(255,255,255,.78);font-size:13.5px;line-height:1.75;position:relative;z-index:2}footer.pf a{color:rgba(255,255,255,.88);text-decoration:underline}footer.pf .r{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:12px}footer.pf .m{max-width:78em;margin-top:14px}
@media(max-width:1000px){.hero.app{grid-template-columns:1fr;padding:13vh 22px 6vh;text-align:center}.hero.app .l{max-width:none;margin:0 auto}.appid{justify-content:center}.hero.app .chips,.hero.app .cta{justify-content:center}.hero.app .lede{margin-left:auto;margin-right:auto}.hero.app .r{margin-top:38px}.hero.app .big{width:min(62vw,290px)}.exg,.g3{grid-template-columns:1fr 1fr}.sup{grid-template-columns:1fr}.band{grid-template-columns:1fr}.facts dl{grid-template-columns:1fr}.facts dt{border-bottom:0;padding-bottom:0}}
@media(max-width:620px){.exg,.g3{grid-template-columns:1fr}.q button{padding:18px 20px}.hd{padding:16px 20px}}

/* the store pictures */
.gal .strip{margin:0 calc(50% - 50vw);display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px max(16px,calc((100vw - 1320px)/2 + 28px)) 30px;-webkit-overflow-scrolling:touch}.gal .strip img{height:min(72vh,600px);width:auto;border-radius:28px;scroll-snap-align:center;flex:none;box-shadow:0 18px 50px rgba(0,0,0,.35)}

/* Filmlume: one negative, dragged into a photograph */
.convert{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(24px,5vw,64px);align-items:center;max-width:1040px;margin:0 auto}
.convert .cv-text{padding:clamp(22px,3vw,34px)}.convert h2{font-family:'Space Grotesk';font-size:clamp(28px,4vw,44px);letter-spacing:-.035em;line-height:1.05}.convert p{margin-top:16px;color:var(--mu);line-height:1.6;font-size:17px}.convert .cv-note{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;letter-spacing:.06em;color:var(--c)}
.cv{position:relative;width:100%;margin:0;border-radius:22px;overflow:hidden;box-shadow:0 30px 70px -28px rgba(0,0,0,.55),0 0 0 .5px rgba(255,255,255,.12);background:#111;touch-action:pan-y}
.cv-frame{position:relative;aspect-ratio:1000/1467}.cv-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cv-neg{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.cv-bar{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.3),0 0 18px rgba(255,255,255,.6)}
.cv-bar::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 6px 20px rgba(0,0,0,.4)}
.cv-tag{position:absolute;bottom:14px;padding:6px 12px;border-radius:99px;background:rgba(10,10,14,.55);color:#fff;font-size:12px;letter-spacing:.12em;text-transform:uppercase;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.cv-tag.l{left:14px}.cv-tag.r{right:14px}
.cv-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}.cv-range:focus-visible{opacity:.001;outline:none}.cv:has(.cv-range:focus-visible){outline:3px solid var(--c);outline-offset:3px}
@media(max-width:860px){.convert{grid-template-columns:1fr;text-align:center}.cv{max-width:420px;margin:0 auto}}
.ms{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center;max-width:1040px;margin:0 auto}
.ms-ph{position:relative;margin:0;border-radius:28px;overflow:hidden;box-shadow:0 30px 70px -30px rgba(0,0,0,.55)}.ms-ph img{display:block;width:100%;height:auto;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.ms-ph{touch-action:pan-y;cursor:crosshair}
.ms-rd{padding:clamp(22px,3vw,38px)}.ms-k{font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.ms-rd h2{font-family:'Space Grotesk';font-size:clamp(28px,4vw,44px);letter-spacing:-.035em;line-height:1.05;margin-top:10px}.ms-rd>p{margin-top:16px;color:var(--mu);line-height:1.6;font-size:17px}
.ms-rd ul{list-style:none;margin:22px 0 0;padding:0}.ms-rd li{display:flex;justify-content:space-between;gap:18px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:17px}.ms-rd li b{font-variant-numeric:tabular-nums}
.ms-tot{display:flex;justify-content:space-between;align-items:baseline;gap:18px;margin-top:20px;padding:18px 22px;border-radius:18px;background:var(--c);color:#fff}.ms-tot b{font-size:clamp(34px,4.4vw,56px);line-height:1;font-variant-numeric:tabular-nums}
.ms-rd .ms-note{margin-top:14px;font-size:14px}
@media(max-width:860px){.ms{grid-template-columns:1fr}.ms-ph{max-width:420px;margin:0 auto}}

.ms-ring{position:absolute;width:7.5%;aspect-ratio:1;transform:translate(-50%,-50%);border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 22px rgba(255,255,255,.55);touch-action:none;cursor:grab;outline:none}
.ms-ring.drag{cursor:grabbing}.ms-ring:focus-visible{box-shadow:0 0 0 3px var(--c),0 0 0 6px #fff}
.ms-ring::before{content:'';position:absolute;inset:-14px}
.ms-ring::after{content:'';position:absolute;inset:-3px;border:2px solid #fff;border-radius:50%;animation:msring 2.4s ease-out infinite;pointer-events:none}.ms-ring.moved::after{animation:none;opacity:0}
.ms-ring i{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.ms-tag{position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%);white-space:nowrap;font:600 12px/1 ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.6);padding:7px 11px;border-radius:99px;pointer-events:none}.ms-tag em{font-style:normal;opacity:.8}
@keyframes msring{from{transform:scale(1);opacity:.9}to{transform:scale(1.7);opacity:0}}@media(prefers-reduced-motion:reduce){.ms-ring::after{animation:none}}
.ms-ch{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.ms-ch button{font:inherit;font-size:15px;font-variant-numeric:tabular-nums;color:inherit;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:99px;padding:6px 13px;cursor:pointer;min-height:36px}
.ms-ch button.on{background:var(--c);border-color:var(--c);color:#fff}.ms-ch button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ms-dial{display:flex;justify-content:center;gap:8px;margin-top:12px}.ms-dial span{font:600 14px/1 ui-monospace,Menlo,monospace;color:var(--mu);padding:8px 12px;border-radius:99px;border:1px solid rgba(255,255,255,.16)}.ms-dial .on{color:var(--c);border-color:var(--c)}
.ms-rd li{align-items:center}
@media(max-width:520px){.ms-rd li{gap:10px;font-size:16px}.ms-ch{gap:4px;flex-wrap:nowrap}.ms-ch button{font-size:14px;padding:6px 9px}.ms-rd li>span:first-child{white-space:nowrap}}
/* iPhone Duo: the editor closed and open, set into Apple's own product bezels (unmodified) */
.duo{display:flex;align-items:flex-end;justify-content:center;gap:clamp(18px,3.4vw,48px);max-width:1120px;margin:0 auto;padding:0 clamp(16px,3vw,40px)}
.duo figure{margin:0;flex:calc(var(--r)) 1 0;min-width:0}
.duo img{display:block;width:100%;height:auto}
.duo figcaption{margin-top:12px;padding:12px 14px;border-radius:16px}.duo figcaption b{display:block;font-size:15px;letter-spacing:-.01em}.duo figcaption span{display:block;margin-top:3px;font-size:13.5px;line-height:1.45;color:var(--mu)}
.duo-note{margin:22px auto 0;max-width:640px;text-align:center;font-size:13px;color:var(--mu)}.duo-note span{display:inline-block;padding:8px 14px;border-radius:99px}
@media(max-width:760px){.duo{flex-direction:column;align-items:center;gap:30px}.duo figure{flex:none;width:100%;max-width:560px}.duo .d-c{max-width:300px}}
/* text in the app's accent colour, lightened until it reads at 4.5:1 on the night sky */
.card .kick b,.card .tag b,.step .n b,.ex .tr,.mc .mk,.offer .bd,.convert .cv-note,.ms-k,.q .a a,.fold .in a,.sup a{color:color-mix(in srgb,var(--c) 52%,#fff)}
.rail,.rail p{color:rgba(255,255,255,.66)}
/* the seasons (seasons.js): a tint over the sky and mountains, and one canvas of falling things behind the page */
#stint,#season{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:-4}
[data-season=winter] #stint{background:linear-gradient(180deg,rgba(150,190,255,.22),rgba(235,243,255,.10) 62%,rgba(205,224,255,.26));mix-blend-mode:screen}
[data-season=spring] #stint{background:linear-gradient(180deg,rgba(255,196,214,.16),rgba(190,235,190,.10) 65%,rgba(150,214,160,.20));mix-blend-mode:screen}
[data-season=summer] #stint{background:linear-gradient(180deg,rgba(255,206,110,.14),rgba(255,170,70,.08) 60%,rgba(255,140,60,.18));mix-blend-mode:screen}
[data-season=autumn] #stint{background:linear-gradient(180deg,rgba(255,148,60,.20),rgba(205,92,32,.12) 60%,rgba(150,60,22,.22));mix-blend-mode:screen}

.dv{position:relative;width:100%;aspect-ratio:100/211.9;container-type:inline-size;flex:none;--e1:#E9E5DD;--e2:#B8B3A9;--e3:#6E6A63;--bt:#9d988e}
.dv .sh{position:absolute;inset:0;border-radius:14.8cqw;box-shadow:0 7cqw 11cqw -3cqw rgba(0,0,0,.5),0 2.4cqw 4cqw rgba(0,0,0,.28)}
.dv .fr{position:absolute;inset:0;border-radius:14.8cqw;background:
 linear-gradient(105deg,var(--e3) 0%,var(--e1) 9%,var(--e2) 24%,var(--e2) 70%,var(--e1) 91%,var(--e3) 100%);
 box-shadow:inset 0 0 0 .22cqw rgba(255,255,255,.45),inset 0 0 0 .5cqw rgba(0,0,0,.28),inset 0 .3cqw .5cqw rgba(255,255,255,.55)}
.dv .fr:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.55),transparent 12%,transparent 88%,rgba(0,0,0,.3));mix-blend-mode:soft-light}
.dv .bz{position:absolute;inset:1cqw;border-radius:13.8cqw;background:#050506;box-shadow:inset 0 0 0 .18cqw rgba(255,255,255,.09),0 0 0 .22cqw rgba(0,0,0,.55)}
.dv .sc{position:absolute;inset:2.35cqw;border-radius:12.5cqw;overflow:hidden;background:#000}
.dv .sc img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.dv .sc img.s{position:absolute;inset:0;opacity:0;transition:opacity .7s ease}.dv .sc img.s.on{opacity:1}
.dv .isl{position:absolute;top:2.5cqw;left:50%;width:27.5cqw;height:8cqw;margin-left:-13.75cqw;border-radius:99px;background:#000;box-shadow:0 0 0 .15cqw rgba(255,255,255,.04)}
.dv .isl:after{content:"";position:absolute;right:2.2cqw;top:50%;width:3.7cqw;height:3.7cqw;margin-top:-1.85cqw;border-radius:50%;background:radial-gradient(circle at 35% 35%,#2a3560 0,#0c1024 55%,#05060c 100%);box-shadow:0 0 0 .3cqw #0c0d12,inset 0 0 .5cqw rgba(120,140,255,.5)}
.dv .gl{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.13) 0,rgba(255,255,255,.04) 22%,transparent 38%),linear-gradient(180deg,rgba(255,255,255,.05),transparent 14%)}
.dv .b{position:absolute;width:1cqw;background:linear-gradient(90deg,var(--e3),var(--bt) 40%,var(--e1) 60%,var(--e3));border-radius:.5cqw;box-shadow:0 0 .4cqw rgba(0,0,0,.45)}
.dv .b.l{left:-.75cqw}.dv .b.r{right:-.75cqw;transform:scaleX(-1)}
.dv .b.a1{top:17.5%;height:3.2%}.dv .b.a2{top:24.2%;height:6.2%}.dv .b.a3{top:32.3%;height:6.2%}
.dv .b.p1{top:27.5%;height:10.2%}.dv .b.p2{top:56%;height:6%;width:.8cqw;right:-.55cqw}
.dv.tone-natural{--e1:#E9E5DD;--e2:#B8B3A9;--e3:#6E6A63;--bt:#9d988e}
.dv.tone-silver{--e1:#F4F4F6;--e2:#C9CBD1;--e3:#8A8D95;--bt:#aeb1b8}
.dv.tone-black{--e1:#5A5C61;--e2:#2B2C30;--e3:#111214;--bt:#3a3b40}
.dv.tone-blue{--e1:#6F83B3;--e2:#37497A;--e3:#1A2547;--bt:#44578a}
.dv.tone-orange{--e1:#F4A675;--e2:#D9672B;--e3:#8F3A12;--bt:#c4561f}
.dv.flat .sh{display:none}
