/* Today website. No script, no third-party requests. Fonts are self-hosted under the SIL Open Font License. */
@font-face{font-family:"Barlow Condensed";src:url(fonts/BarlowCondensed-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(fonts/BarlowCondensed-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito";src:url(fonts/Nunito-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
:root{color-scheme:light dark;--theme:#4C7FFE;--on-theme:#FFFFFF;--link:#4370E1;--stage:#4370E1;--app:#4C7FFE;--on-app:#FFFFFF;--app-ink:#1C1C1E;--app-deep:#4370E1;--ss:#B7CCFF;--sl:#3559B2;--sd:#1D3162;--si:#2F4F9D;--brand:#4C7FFE;--paper:#FFFFFF;--text:#1C1C1E;--muted:#636366;--card:#F3F3F6;--line:rgba(28,28,30,.14);
--display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;--numeral:"Nunito",ui-rounded,system-ui,sans-serif;
--body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
html:has(#t-sunset:checked){--theme:#FF7A45;--on-theme:#1C1C1E;--link:#BC5A33;--stage:#FF7A45;--app:#FF7A45;--on-app:#1C1C1E;--app-ink:#FFFFFF;--app-deep:#FF7A45;--ss:#FFCAB5;--sl:#B35530;--sd:#622F1A;--si:#9E4C2B}html:has(#t-lagoon:checked){--theme:#22C1C3;--on-theme:#1C1C1E;--link:#178385;--stage:#22C1C3;--app:#22C1C3;--on-app:#1C1C1E;--app-ink:#FFFFFF;--app-deep:#22C1C3;--ss:#A7E6E7;--sl:#188789;--sd:#0D4A4B;--si:#157879}html:has(#t-forest:checked){--theme:#2F9E5B;--on-theme:#FFFFFF;--link:#28874E;--stage:#28874E;--app:#2F9E5B;--on-app:#FFFFFF;--app-ink:#1C1C1E;--app-deep:#28874E;--ss:#ACD8BD;--sl:#216F40;--sd:#123D23;--si:#1D6238}html:has(#t-citrus:checked){--theme:#FFC23A;--on-theme:#1C1C1E;--link:#957122;--stage:#FFC23A;--app:#FFC23A;--on-app:#1C1C1E;--app-ink:#FFFFFF;--app-deep:#FFC23A;--ss:#FFE7B0;--sl:#B38829;--sd:#624B17;--si:#9E7824}html:has(#t-berry:checked){--theme:#B0217A;--on-theme:#FFFFFF;--link:#B0217A;--stage:#B0217A;--app:#B0217A;--on-app:#FFFFFF;--app-ink:#1C1C1E;--app-deep:#B0217A;--ss:#DFA6CA;--sl:#7B1755;--sd:#440D2F;--si:#6D144C}html:has(#t-ocean:checked){--theme:#1E3C72;--on-theme:#FFFFFF;--link:#1E3C72;--stage:#1E3C72;--app:#1E3C72;--on-app:#FFFFFF;--app-ink:#1C1C1E;--app-deep:#1E3C72;--ss:#A5B1C7;--sl:#152A50;--sd:#0C172C;--si:#132547}html:has(#t-coral:checked){--theme:#FF6F61;--on-theme:#1C1C1E;--link:#C2544A;--stage:#FF6F61;--app:#FF6F61;--on-app:#1C1C1E;--app-ink:#FFFFFF;--app-deep:#FF6F61;--ss:#FFC5C0;--sl:#B34E44;--sd:#622B25;--si:#9E453C}html:has(#t-mint:checked){--theme:#34D399;--on-theme:#1C1C1E;--link:#218662;--stage:#34D399;--app:#34D399;--on-app:#1C1C1E;--app-ink:#FFFFFF;--app-deep:#34D399;--ss:#AEEDD6;--sl:#24946B;--sd:#14513B;--si:#20835F}html:has(#t-lavender:checked){--theme:#A78BFA;--on-theme:#1C1C1E;--link:#7F69BE;--stage:#A78BFA;--app:#A78BFA;--on-app:#1C1C1E;--app-ink:#FFFFFF;--app-deep:#A78BFA;--ss:#DCD1FD;--sl:#7561AF;--sd:#403560;--si:#68569B}html:has(#t-slate:checked){--theme:#475569;--on-theme:#FFFFFF;--link:#475569;--stage:#475569;--app:#475569;--on-app:#FFFFFF;--app-ink:#1C1C1E;--app-deep:#475569;--ss:#B5BBC3;--sl:#323C4A;--sd:#1B2129;--si:#2C3541}html:has(#t-rose:checked){--theme:#F472B6;--on-theme:#1C1C1E;--link:#B65588;--stage:#F472B6;--app:#F472B6;--on-app:#1C1C1E;--app-ink:#FFFFFF;--app-deep:#F472B6;--ss:#FBC7E2;--sl:#AB507F;--sd:#5E2C46;--si:#974771}
@media (prefers-color-scheme:dark){:root{--theme:#3559B2;--on-theme:#FFFFFF;--link:#4C7FFE;--stage:#3559B2;--app:#4C7FFE;--on-app:#FFFFFF;--app-ink:#1C1C1E;--app-deep:#4370E1;--ss:#B7CCFF;--sl:#3559B2;--sd:#1D3162;--si:#2F4F9D;--brand:#FFFFFF;--paper:#1C1C1E;--text:#FFFFFF;--muted:#AEAEB2;--card:#2A2A2D;--line:rgba(255,255,255,.16)}
html:has(#t-sunset:checked){--theme:#B35530;--on-theme:#FFFFFF;--link:#FF7A45;--stage:#B35530;--app:#FF7A45;--on-app:#1C1C1E;--app-ink:#FFFFFF;--app-deep:#FF7A45;--ss:#FFCAB5;--sl:#B35530;--sd:#622F1A;--si:#9E4C2B}html:has(#t-lagoon:checked){--theme:#188788;--on-theme:#FFFFFF;--link:#22C1C3;--stage:#178384;--app:#22C1C3;--on-app:#1C1C1E;--app-ink:#FFFFFF;--app-deep:#22C1C3;--ss:#A7E6E7;--sl:#188789;--sd:#0D4A4B;--si:#157879}html:has(#t-forest:checked){--theme:#216F40;--on-theme:#FFFFFF;--link:#2F9E5B;--stage:#216F40;--app:#2F9E5B;--on-app:#FFFFFF;--app-ink:#1C1C1E;--app-deep:#28874E;--ss:#ACD8BD;--sl:#216F40;--sd:#123D23;--si:#1D6238}html:has(#t-citrus:checked){--theme:#B38829;--on-theme:#FFFFFF;--link:#FFC23A;--stage:#957122;--app:#FFC23A;--on-app:#1C1C1E;--app-ink:#FFFFFF;--app-deep:#FFC23A;--ss:#FFE7B0;--sl:#B38829;--sd:#624B17;--si:#9E7824}html:has(#t-berry:checked){--theme:#7B1755;--on-theme:#FFFFFF;--link:#C6609F;--stage:#7B1755;--app:#B0217A;--on-app:#FFFFFF;--app-ink:#1C1C1E;--app-deep:#B0217A;--ss:#DFA6CA;--sl:#7B1755;--sd:#440D2F;--si:#6D144C}html:has(#t-ocean:checked){--theme:#152A50;--on-theme:#FFFFFF;--link:#7284A6;--stage:#152A50;--app:#1E3C72;--on-app:#FFFFFF;--app-ink:#1C1C1E;--app-deep:#1E3C72;--ss:#A5B1C7;--sl:#152A50;--sd:#0C172C;--si:#132547}html:has(#t-coral:checked){--theme:#B34E44;--on-theme:#FFFFFF;--link:#FF6F61;--stage:#B34E44;--app:#FF6F61;--on-app:#1C1C1E;--app-ink:#FFFFFF;--app-deep:#FF6F61;--ss:#FFC5C0;--sl:#B34E44;--sd:#622B25;--si:#9E453C}html:has(#t-mint:checked){--theme:#24946B;--on-theme:#FFFFFF;--link:#34D399;--stage:#218661;--app:#34D399;--on-app:#1C1C1E;--app-ink:#FFFFFF;--app-deep:#34D399;--ss:#AEEDD6;--sl:#24946B;--sd:#14513B;--si:#20835F}html:has(#t-lavender:checked){--theme:#7561AF;--on-theme:#FFFFFF;--link:#A78BFA;--stage:#7561AF;--app:#A78BFA;--on-app:#1C1C1E;--app-ink:#FFFFFF;--app-deep:#A78BFA;--ss:#DCD1FD;--sl:#7561AF;--sd:#403560;--si:#68569B}html:has(#t-slate:checked){--theme:#323B4A;--on-theme:#FFFFFF;--link:#7A8593;--stage:#323B4A;--app:#475569;--on-app:#FFFFFF;--app-ink:#1C1C1E;--app-deep:#475569;--ss:#B5BBC3;--sl:#323C4A;--sd:#1B2129;--si:#2C3541}html:has(#t-rose:checked){--theme:#AB507F;--on-theme:#FFFFFF;--link:#F472B6;--stage:#AB507F;--app:#F472B6;--on-app:#1C1C1E;--app-ink:#FFFFFF;--app-deep:#F472B6;--ss:#FBC7E2;--sl:#AB507F;--sd:#5E2C46;--si:#974771}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--text);font:400 18px/1.6 var(--body)}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--link);text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--link);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:16px;top:-64px;background:var(--text);color:var(--paper);padding:10px 16px;border-radius:999px;z-index:10}
.skip:focus{top:12px}
.wrap{width:min(1080px,100% - 48px);margin-inline:auto}
.top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 0}
.top .logo{color:var(--brand);display:block;line-height:0}
.top .logo svg{height:44px;width:auto}
.top nav{display:flex;gap:4px;flex-wrap:wrap}
.top nav a,.foot nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--text);text-decoration:none;font-weight:500;border-radius:999px}
.top nav a:hover,.foot nav a:hover{background:var(--card)}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:.98;margin:0;text-wrap:balance}
h1{font-size:clamp(56px,10vw,112px);letter-spacing:-.005em}
h2{font-size:clamp(40px,6.4vw,64px)}
h3{font-size:30px;line-height:1.05}
p{margin:0}
.lead{font-size:clamp(20px,2.3vw,22px);line-height:1.5;color:var(--muted);max-width:62ch}
section{padding:clamp(64px,10vw,128px) 0 0}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}
.card{background:var(--card);border-radius:28px;padding:28px}
.card h3{margin-bottom:10px}
.card p{font-size:17px;line-height:1.55}
figure{margin:40px 0 0}
figure img{width:100%;border-radius:28px}
figcaption{margin-top:12px;font-size:15px;color:var(--muted)}
.wide{overflow-x:auto;border-radius:28px;scrollbar-width:thin}
.wide img{min-width:720px;border-radius:0}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:clamp(32px,6vw,88px);align-items:center}
.split.flip{grid-template-columns:minmax(0,340px) minmax(0,1fr)}
.split .device{width:min(320px,80%);justify-self:center}
.stack>*+*{margin-top:20px}
.facts{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:14px}
.facts li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline}
.facts b{font:600 26px/1 var(--numeral);font-variant-numeric:tabular-nums;color:var(--link);min-width:3.4em}
.swatches{border:0;padding:0;margin:36px 0 0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px 12px}
.swatches legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.swatch{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;min-height:44px}
.swatch input{position:absolute;opacity:0;width:64px;height:64px;margin:0;cursor:pointer}
.swatch i{display:block;width:64px;height:64px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px var(--line)}
.swatch input:checked+i{box-shadow:0 0 0 4px var(--paper),0 0 0 7px var(--text)}
.swatch input:focus-visible+i{outline:3px solid var(--link);outline-offset:9px}
.swatch span{font:700 18px/1 var(--display);letter-spacing:.05em;text-transform:uppercase}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:40px}
.tile{background:var(--theme);color:var(--on-theme);border-radius:28px;padding:26px 22px;font:700 32px/1 var(--display)}
.pano{margin-top:40px;overflow-x:auto;border-radius:28px;scrollbar-width:thin}
.pano img{height:clamp(420px,62vw,620px);width:auto;max-width:none;border-radius:0}
.foot{margin-top:clamp(72px,10vw,128px);border-top:1px solid var(--line);padding:28px 0 48px;display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between}
.foot nav{display:flex;flex-wrap:wrap;gap:4px;margin-left:-12px}
.foot small{color:var(--muted);font-size:15px}
.article{width:min(720px,100% - 48px);margin-inline:auto;padding-top:24px}
.article h1{font-size:clamp(48px,8vw,84px)}
.article .meta{margin-top:18px;color:var(--muted);font-size:16px}
.article .hero-img{margin-top:32px;border-radius:28px;width:100%}
.article h2{font-size:clamp(34px,5vw,44px);margin-top:56px}
.article p{margin-top:20px}
.article figure{margin-top:32px}
.article figure.shot img{width:min(300px,70%);margin-inline:auto;border-radius:0}
.article figure.shot figcaption{text-align:center}
.posts{list-style:none;padding:0;margin:40px 0 0;display:grid;gap:20px}
.posts a{display:block;text-decoration:none;color:inherit}
.posts h2{font-size:clamp(32px,5vw,44px)}
.posts p{margin-top:10px;color:var(--muted)}
.article h3{margin-top:36px}
@media (max-width:860px){
.grid3,.tiles{grid-template-columns:1fr 1fr}
.split,.split.flip{grid-template-columns:1fr}
.split.flip .device{order:2}
.swatches{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:560px){
body{font-size:17px}
.wrap,.article{width:calc(100% - 40px)}
.grid3{grid-template-columns:1fr}
.swatches{grid-template-columns:repeat(3,minmax(0,1fr))}
.top{padding:12px 0;gap:8px}
.top .logo svg{height:36px}
.top nav{gap:0}
.top nav a{padding:0 8px;font-size:16px}
}
/* The stage: one flat theme colour holding the story on the left and the live phone on the right. */
::selection{background:var(--theme);color:var(--on-theme)}
html{scrollbar-color:var(--muted) transparent}
.stage{width:min(1280px,100% - 24px);margin-inline:auto;background:var(--stage);color:var(--on-theme);border-radius:40px;
padding:0 clamp(24px,6vw,88px);display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(32px,7vw,112px);
transition:background-color .6s cubic-bezier(.16,1,.3,1),color .6s cubic-bezier(.16,1,.3,1)}
.stage.gold{--stage:#F9D423;--on-theme:#1C1C1E}
.stage ::selection{background:var(--on-theme);color:var(--stage)}
.stage :focus-visible{outline-color:var(--on-theme)}
/* The story is set in the system face: a heading, a sentence or two, then the details as a list. The phone keeps the app's own faces. */
.stage h1,.stage h2{font-family:var(--body);line-height:1.04;letter-spacing:-.025em}
.chapter{min-height:92vh;display:flex;flex-direction:column;justify-content:center;padding:72px 0;max-width:34rem}
.chapter.first{min-height:min(88vh,860px)}
.sheet,.panel{display:contents}
.track,.under,.steps{display:none}
.chapter h1{font-size:clamp(44px,5.4vw,76px)}
.chapter h2{font-size:clamp(34px,4.2vw,56px);margin-bottom:22px}
.chapter p{font-size:19px;line-height:1.55;max-width:32rem}
.chapter .big{font-size:clamp(21px,2.1vw,25px);line-height:1.4;margin-top:26px;max-width:30ch}
.details{list-style:none;margin:28px 0 0;padding:0;max-width:32rem;font-size:16px;line-height:1.45;
color:color-mix(in srgb,var(--on-theme) 85%,transparent);border-bottom:1px solid color-mix(in srgb,currentColor 24%,transparent)}
.details li{padding:11px 0;border-top:1px solid color-mix(in srgb,currentColor 24%,transparent)}
.details b{font-weight:500;color:var(--on-theme)}
.chapter h2+.details{margin-top:6px}
.chapter .after{margin-top:28px}
.chapter .note{margin-top:20px;font-size:16px;line-height:1.5;color:color-mix(in srgb,var(--on-theme) 85%,transparent)}
.badge{display:inline-block;margin-top:36px;line-height:0;border-radius:10px;align-self:flex-start}
.badge img{height:56px;width:auto}
/* Until the app is on sale the badge's place holds one plain line. */
.soon{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;margin-top:36px;padding:0 18px;
border:1px solid color-mix(in srgb,currentColor 45%,transparent);border-radius:999px;font:600 16px/1 var(--body)}
.show{display:none;align-self:flex-start;margin-top:26px;min-height:44px;padding:0 16px;border:1px solid color-mix(in srgb,currentColor 45%,transparent);
border-radius:10px;background:none;color:inherit;font:600 16px/1 var(--body);cursor:pointer}
.show:active{transform:scale(.97)}
.stage-phone{--k:.8;position:sticky;top:0;height:100vh;align-self:start;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:16px;perspective:1600px}
/* The hint is as wide as the phone and one fixed height, so a new line of text moves nothing. */
.hint{display:flex;align-items:center;justify-content:space-between;gap:14px;width:calc(426px*var(--k));height:44px;font:500 15px/1.2 var(--body)}
.hint button{flex:none;min-height:44px;padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;
text-underline-offset:.18em;cursor:pointer}
.hint button[hidden]{display:none}
.stage .swatches{margin-top:28px;gap:16px 8px}
.stage .swatch i{width:52px;height:52px;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--on-theme) 50%,transparent)}
.stage .swatch input{width:52px;height:52px}
.stage .swatch input:checked+i{box-shadow:0 0 0 3px var(--stage),0 0 0 6px var(--on-theme)}
.stage .swatch input:focus-visible+i{outline:3px solid var(--on-theme);outline-offset:8px}
.stage .swatch span{font:500 13px/1 var(--body);letter-spacing:0;text-transform:none}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;margin-top:40px}
.trio div{border-top:2px solid var(--text);padding-top:18px}
.trio h3{margin-bottom:10px}
.trio p{font-size:17px;line-height:1.55;color:var(--muted)}

/* The phone. Every size below is in the app's own points; --k scales the whole screen. */
.phone{--a:var(--app);--f:var(--on-app);--i:var(--app-ink);--deep:var(--app-deep);position:relative;
width:calc(426px*var(--k));height:calc(898px*var(--k));flex:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.phone.gold:not(.quiet)[data-app=today],.phone.gold:not(.quiet)[data-app=grid]{--a:#F9D423;--f:#1C1C1E;--i:#FFFFFF}
.phone-body{position:absolute;left:0;top:0;width:426px;height:898px;transform:scale(var(--k));transform-origin:0 0;border-radius:73px;
background:#1C1C1E;box-shadow:inset 0 0 0 2.5px #3A3A3C,inset 0 0 0 4.5px #0B0B0C,inset 0 2px 1px 2px rgba(255,255,255,.22),
0 1px 2px rgba(0,0,0,.35),0 10px 18px -6px rgba(0,0,0,.32)}
.screen{position:absolute;inset:12px;border-radius:61px;overflow:hidden;background:var(--a);color:var(--f);
font:400 17px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;transition:background-color .6s cubic-bezier(.16,1,.3,1),color .4s}
.island{position:absolute;left:151px;top:24px;width:124px;height:36px;border-radius:18px;background:#000}
.status{position:absolute;left:0;top:0;width:402px;height:54px;z-index:3;color:var(--f)}
.home{position:absolute;left:131px;top:861px;width:140px;height:5px;border-radius:3px;background:var(--f);z-index:3}
.phone button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.phone button:focus-visible{outline:3px solid var(--f);outline-offset:2px}
.g{width:22px;height:22px;display:block;fill:currentColor;stroke:currentColor;overflow:visible}
.view{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(8px);
transition:opacity .2s,transform .3s cubic-bezier(.16,1,.3,1),visibility 0s .3s}
.view.on{opacity:1;visibility:visible;transform:none;transition:opacity .28s .05s,transform .4s cubic-bezier(.16,1,.3,1) .05s,visibility 0s}
.bar{position:absolute;left:16px;right:16px;top:62px;height:44px;display:flex;align-items:center;gap:4px}
.rb{width:44px;height:44px;border-radius:50%;background:color-mix(in srgb,var(--f) 14%,transparent);display:grid;place-items:center;flex:none}
.rb.gap{background:none}
.mid{flex:1;text-align:center;font-family:var(--display);font-weight:700;line-height:1;display:grid;gap:4px}
.mid.l{text-align:left;padding-left:8px}
.mid b{font-size:17px}
.mid i{font-style:normal;font-size:14px;opacity:.72}
.dayring{width:44px;height:28px;flex:none;fill:none;stroke:var(--f);stroke-width:3.5}
.dayring .t{opacity:.4}
.dayring .a{transition:stroke-dasharray .5s cubic-bezier(.16,1,.3,1)}

/* Today */
/* The page is staggered, as the app's is on the Spheres look (BubbleLayout): every second column sits half a
   row's pitch lower, and the discs shrink to leave room for the half row. */
.bubs{position:absolute;left:61.2px;right:61.2px;top:115.7px;display:grid;grid-template-columns:121.5px 121.5px;justify-content:space-between;row-gap:18.3px}
.bub{height:171.4px;display:flex;flex-direction:column;align-items:center;touch-action:pan-y;position:relative;border-radius:24px}
.bubs .bub:nth-child(even){top:94.8px}
/* The Spheres look (Shared/Design/SphereDisc.swift). A habit is a sphere under a fixed key light, up and to the
   left, and the phase light from the right lights as much of its face as the habit's progress. --d is the
   diameter. .un is the unlit side and .li the lit part, cut to the phase by demo.js (by demo.py without script);
   each carries the marks in its own ink, so they stay readable as the light crosses them. */
.orb,.ms{position:relative;display:block;flex:none;width:var(--d);height:var(--d);border-radius:50%}
.orb>*,.ms>*{position:absolute;inset:0;border-radius:50%}
.un{background:radial-gradient(circle calc(var(--d)*.85) at 30% 24%,var(--sl),var(--sd));color:#fff}
.li{background:radial-gradient(circle calc(var(--d)*.92) at 30% 24%,#fff 13%,var(--ss));color:var(--si)}
.orb .sh{inset:4% -12% -18% -2%;background:radial-gradient(closest-side,rgba(0,0,0,.3) 38.6%,rgba(0,0,0,0))}
.gl::before,.gl::after{content:"";position:absolute;inset:0;border-radius:50%}
.gl::before{background:linear-gradient(135deg,rgba(255,255,255,.42),rgba(255,255,255,0) 50%);
-webkit-mask:radial-gradient(closest-side,transparent 90.5%,#000 91.5%);mask:radial-gradient(closest-side,transparent 90.5%,#000 91.5%)}
.gl::after{background:radial-gradient(circle calc(var(--d)*.23) at 30% 24%,rgba(255,255,255,.3),rgba(255,255,255,0))}
.fl{background:#fff;opacity:0}
.flash .fl{animation:flash .6s ease-out}
@keyframes flash{from{opacity:.55}}
.gl,.fl,.sh{pointer-events:none}
.orb .ico{position:absolute;left:28.5%;top:24.5%;width:43%;height:43%}
.orb .sk{position:absolute;left:0;right:0;top:80%;display:flex;justify-content:center;align-items:center;gap:calc(var(--d)*.025);
transform:translateY(-50%);font:600 calc(var(--d)*.11)/1 var(--numeral);font-variant-numeric:tabular-nums}
.orb .st{width:calc(var(--d)*.1);height:calc(var(--d)*.1)}
.bub .orb{--d:121.5px;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.bub.holding .orb{transform:scale(.96)}
.bub .name{margin-top:12px;font:700 15.8px/1.2 var(--display);text-transform:uppercase;white-space:nowrap}
.bub .cue{font:700 13px/1 var(--display);letter-spacing:.04em;text-transform:uppercase;opacity:0;transition:opacity .2s;margin-top:3px}
.bub .cue.show-cue{opacity:1}
.dots{position:absolute;left:0;right:0;top:774px;display:flex;justify-content:center;gap:8px}
.dots i{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--f)}
.dots i+i{background:var(--f);opacity:.4;border:0}
.phone.gold:not(.quiet) .dots i{background:var(--f)}

/* Grid */
.gh,.row{display:grid;grid-template-columns:150px repeat(5,1fr)}
.gh{position:absolute;left:0;right:0;top:116px;height:55px;border-bottom:.5px solid color-mix(in srgb,var(--f) 26%,transparent)}
.dh{text-align:center;font-family:var(--display);font-weight:700;line-height:1;padding-top:12px}
.dh i{display:block;font-style:normal;font-size:11px;opacity:.72}
.dh b{display:block;margin-top:8px;font:600 17px/1 var(--numeral);font-variant-numeric:tabular-nums}
.dh.now i{opacity:1}
.dh.now b{font-weight:700}
.rows{position:absolute;left:0;right:0;top:176px}
.rows::before{content:"";position:absolute;right:2px;top:-60px;width:46.4px;bottom:-4px;border-radius:16px;background:var(--f);opacity:.09}
.rows::after{content:"";position:absolute;left:150px;top:-60px;bottom:0;width:.5px;background:var(--f);opacity:.26}
.row{height:52px;position:relative}
.rn{display:flex;align-items:center;gap:8px;padding-left:13px;font:700 15px/1 var(--display);text-transform:uppercase;white-space:nowrap;
background:var(--a);position:relative;z-index:2;transition:background-color .6s cubic-bezier(.16,1,.3,1)}
.cell{position:relative;height:52px;display:grid;place-items:center}
.phone .cell:disabled{cursor:default}
.mark{position:relative;z-index:1;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
transition:background-color .2s,transform .3s cubic-bezier(.16,1,.3,1)}
.cell:active:not(:disabled) .mark{transform:scale(.88)}
.mark>*{grid-area:1/1;display:none}
.mark .g{width:17px;height:17px}
.mark b{font:600 13.6px/1 var(--numeral);font-variant-numeric:tabular-nums}
/* A done, partly done or open day is a sphere in small: no shadow and no highlight, and days in a row do not join. */
.mark>.ms{--d:34px;display:block;opacity:0;transform:scale(.7);transition:opacity .2s,transform .3s cubic-bezier(.16,1,.3,1)}
.cell[data-s=done] .ms,.cell[data-s=partial] .ms,.cell[data-s=today] .ms{opacity:1;transform:none}
.ms .un,.ms .li{display:grid;place-items:center}
.ms .g,.ms b{grid-area:1/1;display:none}
.cell[data-s=done]:not(.num) .ms .g,.cell.num[data-s=done] .ms b,.cell[data-s=partial] .ms b{display:block}
.cell[data-s=missed] .i-cross{display:block;opacity:.8}
.cell[data-s=slip] .mark,.cell[data-s=skipped] .mark{background:color-mix(in srgb,var(--f) 12%,transparent)}
.cell[data-s=slip] .i-cross,.cell[data-s=skipped] .i-fwd{display:block}
.cell[data-s=skipped] .i-fwd{width:14px;height:14px}
.cell[data-s=notdue] .mark::after{content:"";grid-area:1/1;width:4px;height:4px;border-radius:50%;background:var(--f);opacity:.26}


/* Tasks and the AI screen share the deeper ground */
.tbar{position:absolute;left:16px;right:16px;top:62px;height:56px;display:flex;align-items:baseline;gap:6px}
.tbar .due{font:700 40px/56px var(--numeral);font-variant-numeric:tabular-nums}
.tbar .duel{font:700 17px/1 var(--display);font-style:normal}
.tbar .rb{margin-left:auto;align-self:center}
.lists{position:absolute;left:16px;top:124px;height:44px;display:flex;align-items:center;gap:16px;font:700 14px/1 var(--display)}
.lists .g{width:14px;height:14px;opacity:.72}
.lists i{font-style:normal;opacity:.72;position:relative}
.lists .sel{opacity:1}
.lists .sel::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:3px;border-radius:2px;background:var(--f)}
.v-tasks ul{list-style:none;margin:0;padding:0}
.tl{position:absolute;left:9px;right:9px;top:172px;bottom:92px;overflow:hidden}
.new{margin:0 7px 8px}
.new input{width:100%;height:48px;border:0;border-radius:24px;padding:0 20px;font:600 17px system-ui,sans-serif;
background:var(--f);color:var(--deep);outline:0}
.new input::placeholder{color:color-mix(in srgb,var(--deep) 62%,var(--f))}
.task{display:grid;grid-template-columns:44px 1fr auto;align-items:start;min-height:44px;transition:opacity .3s}
.task.sub{padding-left:32px}
.box{width:44px;height:44px;display:grid;place-items:center}
.box::before{content:"";grid-area:1/1;width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 2.5px var(--f);
transition:background-color .25s,transform .25s cubic-bezier(.16,1,.3,1)}
.box .g{grid-area:1/1;width:17px;height:17px;color:var(--deep);opacity:0;transform:scale(.4);transition:opacity .2s,transform .25s cubic-bezier(.16,1,.3,1)}
.box:active::before{transform:scale(.88)}
.ticked .box::before{background:var(--f)}
.ticked .box .g{opacity:1;transform:none}
.tt{padding:11px 0 9px 4px;font-weight:600;line-height:22px}
.tt span{display:block;width:fit-content;background:linear-gradient(currentColor,currentColor) 0 55%/0 2px no-repeat;transition:background-size .3s cubic-bezier(.16,1,.3,1)}
.ticked .tt span:first-child{background-size:100% 2px;opacity:.72}
.chip{display:inline-flex!important;align-items:center;gap:3px;margin-top:4px;height:22px;padding:0 7px;border-radius:11px;font-size:13px;font-weight:600;
background:color-mix(in srgb,var(--deep) 82%,var(--i))!important}
.chip.over{background:var(--f)!important;color:var(--deep)}
.chip .g{width:13px;height:13px}
.task .star{width:18px;height:18px;margin:13px 12px 0 0}
.leaving{opacity:0}
.phone .comp{margin:8px 0 0 7px;height:44px;display:flex;align-items:center;gap:6px;font:700 14px/1 var(--display);opacity:.78}
.comp .g{width:13px;height:13px;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.comp[aria-expanded=true] .g{transform:rotate(180deg)}
.closed .task{min-height:40px}
.add{position:absolute;right:32px;top:702px;width:56px;height:56px;border-radius:50%;background:color-mix(in srgb,var(--f) 16%,transparent)!important;
display:grid;place-items:center;transition:transform .2s}
.add:active{transform:scale(.92)}
.add .g{width:24px;height:24px}
.title{position:absolute;left:0;right:0;top:62px;height:44px;display:grid;place-items:center;font:700 17px/1 var(--display)}
.sc{position:absolute;left:24px;right:24px;top:114px}
.sh{margin:22px 0 8px;font:700 13px/1 var(--display);letter-spacing:.04em;opacity:.72;display:flex;justify-content:space-between}
.sh i{font-style:normal}

/* Stats */
.seg{display:grid;grid-template-columns:repeat(5,1fr);height:36px;border-radius:18px;background:color-mix(in srgb,var(--f) 12%,transparent);padding:3px}
.seg i{font:700 14px/30px var(--display);font-style:normal;text-align:center;border-radius:15px;opacity:.72}
.seg .sel{background:var(--f);color:var(--i);opacity:1}
.dates{margin:10px 0 12px;font:700 13px/1 var(--display);opacity:.72}
.tile{border-radius:20px;background:color-mix(in srgb,var(--f) 12%,transparent);padding:14px 16px;display:grid;gap:4px}
.tile i{font:700 12px/1 var(--display);font-style:normal;letter-spacing:.04em;opacity:.72}
.tile b{font:600 34px/1 var(--numeral);font-variant-numeric:tabular-nums}
.tile .rate{font-size:56px}
.tile small{font:700 12px/1 var(--display);margin-left:5px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.bars{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;height:132px;align-items:end}
.bars div{height:100%;display:grid;grid-template-rows:1fr auto;gap:6px;align-items:end}
.bars i{display:block;border-radius:6px;background:var(--f)}
.bars .low{opacity:.5}
.bars span{font:700 12px/1 var(--display);text-align:center;opacity:.72}
.weak{margin:10px 0 0;font-size:13px;font-weight:600;opacity:.8}

/* Settings */
.sc .sh:first-child{margin-top:0}
.sws{display:grid;grid-template-columns:repeat(6,44px);justify-content:space-between;row-gap:12px;margin-bottom:10px}
.sw{width:44px;height:44px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--f) 55%,transparent);cursor:pointer;
transition:box-shadow .3s cubic-bezier(.16,1,.3,1)}
.sw.sel{box-shadow:0 0 0 3px var(--a),0 0 0 6px var(--f)}
.srow{height:52px;display:flex;align-items:center;justify-content:space-between;font-weight:600;
border-bottom:.5px solid color-mix(in srgb,var(--f) 26%,transparent)}
.srow i{font-style:normal;font-weight:400;opacity:.8}
.srow .g{width:12px;height:12px;transform:rotate(-90deg);opacity:.72}

/* The AI screen: a headline, the habits as bubbles, three things to try, one prompt */
.aih{position:absolute;left:24px;top:74px;display:grid}
.aih b{font:700 64px/.92 var(--display);text-transform:uppercase}
.aih i{margin-top:10px;font:700 14px/1 var(--display);font-style:normal;opacity:.72}
.on .aih b{animation:word .5s cubic-bezier(.16,1,.3,1) backwards}
.on .aih b+b{animation-delay:.12s}
@keyframes word{from{opacity:0;transform:translateY(18px)}}
.abs{position:absolute;left:0;right:0;top:268px;height:158px}
.ab{position:absolute;width:72px;height:72px;border-radius:50%;background:color-mix(in srgb,var(--f) 14%,transparent)!important;display:grid!important;place-items:center;
animation:drift 6s ease-in-out infinite;animation-delay:calc(var(--d)*-.9s)}
.ab .g{width:30px;height:30px}
.ab:active{transform:scale(.92)}
@keyframes drift{50%{translate:0 -5px}}
.pills{position:absolute;left:24px;right:24px;top:546px;display:grid;gap:8px}
.pill{height:50px;border-radius:25px;padding:0 18px!important;display:flex!important;align-items:center;gap:12px;text-align:left;font-weight:600!important;font-size:15.5px!important;
background:color-mix(in srgb,var(--f) 14%,transparent)!important;transition:transform .2s}
.pill:active{transform:scale(.98)}
.pill.lead{background:var(--f)!important;color:var(--deep)!important}
.pill .g{width:18px;height:18px;flex:none}
.pill span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prompt{position:absolute;left:24px;right:24px;top:726px;height:52px;border-radius:24px;background:color-mix(in srgb,var(--f) 16%,transparent);
display:flex;align-items:center;justify-content:space-between;padding:0 6px 0 20px}
.prompt span{opacity:.72}
.prompt i{width:40px;height:40px;border-radius:50%;background:var(--f);color:var(--deep);display:grid;place-items:center;opacity:.4;transform:scale(.8)}
.prompt .g{width:17px;height:17px}

/* Tab bar, toast, burst */
.tabs{position:absolute;left:16px;right:16px;top:790px;height:58px;display:flex;gap:8px;z-index:3}
.cap{flex:1;border-radius:29px;background:color-mix(in srgb,var(--f) 14%,transparent);display:grid;grid-template-columns:repeat(5,1fr);padding:4px}
.cap button{position:relative;display:grid!important;justify-items:center;align-content:center;gap:4px;font:700 10px/1 var(--display)!important;letter-spacing:.03em;
text-transform:uppercase;border-radius:25px;transition:color .25s}
.cap button::before{content:"";position:absolute;inset:0;border-radius:25px;background:var(--f);opacity:0;transform:scale(.8);
transition:opacity .25s,transform .35s cubic-bezier(.16,1,.3,1)}
.cap button>*{position:relative}
.cap .on{color:var(--i)}
.phone[data-app=tasks] .cap .on{color:var(--deep)}
.cap .on::before{opacity:1;transform:none}
.cap .g{width:21px;height:21px}
.cap .on .g{animation:hop .45s cubic-bezier(.16,1,.3,1)}
@keyframes hop{40%{transform:translateY(-4px) scale(1.12)}}
/* The AI button: a disc of its own. It swells under a hold, and the bloom spreads from it over the screen. */
.aib{flex:none;width:58px;height:58px;border-radius:50%;background:var(--f)!important;color:var(--i)!important;display:grid!important;place-items:center;
touch-action:none;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.phone[data-app=tasks] .aib,.phone[data-app=ai] .aib{color:var(--deep)!important}
.aib .g{width:26px;height:26px}
.aib.holding{transform:scale(1.3);transition:transform .6s cubic-bezier(.4,0,1,1)}
.bloom{position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--f);clip-path:circle(0 at 45px 819px);transition:clip-path .25s}
.bloom.grow{clip-path:circle(960px at 45px 819px);transition:clip-path .6s cubic-bezier(.4,0,1,1)}
.bloom.lift{opacity:0;transition:opacity .5s}
.toast{position:absolute;left:24px;right:24px;bottom:104px;margin:0;padding:14px 18px;border-radius:22px;background:var(--f);color:var(--deep);
font-size:15px;font-weight:600;line-height:1.35;z-index:4;opacity:0;transform:translateY(12px);pointer-events:none;
transition:opacity .25s,transform .35s cubic-bezier(.16,1,.3,1)}
.toast.up{opacity:1;transform:none}
.burst{position:absolute;inset:0;pointer-events:none;z-index:5}
.burst svg{position:absolute;width:30px;height:30px;margin:-15px;fill:#1C1C1E;stroke:#1C1C1E;overflow:visible}

/* The first paint of the Grid: its days come in from the left, once. */
.enter .cell .mark{animation:pop .4s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--c)*90ms + 200ms)}
@keyframes pop{from{transform:scale(.5);opacity:0}}


/* One scroll, top to bottom: the route on the left, the story, the phone held in place. */
.stage{grid-template-columns:18px clamp(28px,4vw,56px) minmax(0,1fr) clamp(32px,6vw,96px) auto;column-gap:0;
padding:0 clamp(24px,6vw,88px) 0 clamp(20px,3vw,44px);margin-bottom:24px}
.chapters{grid-column:3;grid-row:1}
.stage-phone{grid-column:5;grid-row:1}
/* The chapter in the middle of the window is at full strength and the others stand back. Each one rises in once. */
.js .chapter{opacity:.4;transition:opacity .5s,transform .6s cubic-bezier(.16,1,.3,1)}
.js .chapter.on{opacity:1}
.js .chapter:not(.in){opacity:0;transform:translateY(20px)}
.stage{overflow:clip}
.hint{position:relative;z-index:1}
/* The phone is turned a few degrees and each chapter gives it a pose. .tilt carries the turn, so nothing inside it
   needs to be 3D: the case's side is a plate behind the phone that shows on the edge turned towards you, the
   shadow on the wall slides the other way, and a light crosses the glass. Only transforms and opacity move.
   --pose-x and --pose-y are the pose in degrees, --lean-x and --lean-y the pointer's 2 degrees at most. */
.tilt{--pose-x:2;--pose-y:-6;--rx:calc((var(--pose-x) + var(--lean-x,0))*var(--live,1));--ry:calc((var(--pose-y) + var(--lean-y,0))*var(--live,1));
position:relative;z-index:0;flex:none;transform:rotateX(calc(var(--rx)*1deg)) rotateY(calc(var(--ry)*1deg));
transition:transform .5s cubic-bezier(.16,1,.3,1);animation:settle .6s cubic-bezier(.16,1,.3,1) backwards}
.tilt[data-pose=hold]{--pose-x:1;--pose-y:-1.5}
.tilt[data-pose=tasks]{--pose-y:6}
.tilt[data-pose=themes]{--pose-x:0;--pose-y:0}
.tilt[data-pose=widget]{--pose-x:6;--pose-y:0}
/* Flat while it is in use, so text is crisp and taps land. */
.tilt.flat,.tilt:has(:focus-visible){--live:0}
@keyframes settle{from{transform:rotateX(4deg) rotateY(-10deg)}}
.tilt::before,.tilt::after{content:"";position:absolute;z-index:-1;pointer-events:none;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.tilt::before{inset:5% 4% 1%;border-radius:calc(80px*var(--k));color:color-mix(in srgb,var(--stage) 42%,#000);background:currentColor;
box-shadow:0 0 calc(70px*var(--k)) calc(14px*var(--k)) currentColor;opacity:.4;
transform:translate(calc(var(--ry)*2.5px),calc(40px*var(--k) - var(--rx)*2.5px))}
.tilt::after{inset:0;border-radius:calc(73px*var(--k));background:#48484A;transform:translate(calc(var(--ry)*-.8px),calc(var(--rx)*.8px))}
.screen::after{content:"";position:absolute;inset:0 -50%;z-index:6;pointer-events:none;
background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.08) 50%,transparent 60%);
transform:translateX(calc(-8% - var(--ry,0)*2.5%));transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .3s}
.flat .screen::after,.tilt:has(:focus-visible) .screen::after{opacity:0}
.route{grid-column:1;grid-row:1;position:sticky;top:0;height:100vh;align-self:start;display:flex;align-items:center}
.route div{position:relative;display:grid;gap:22px}
.route div::before,.route .fill{content:"";position:absolute;left:8px;top:9px;bottom:9px;width:2px;background:var(--on-theme)}
.route div::before{opacity:.3}
.route .fill{transform-origin:50% 0;transform:scaleY(var(--f,0));transition:transform .5s cubic-bezier(.16,1,.3,1)}
.route a{position:relative;width:18px;height:18px;display:grid;place-items:center}
.route a::before{content:"";position:absolute;inset:-11px -13px}
.route a::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--on-theme);transform:scale(.5);
transition:transform .35s cubic-bezier(.16,1,.3,1)}
.route a.done::after{transform:scale(1)}
.route a.here::after{transform:scale(1.5)}
.nos{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:18px}
.nos li{position:relative;display:flex;align-items:center;gap:18px;font:700 clamp(28px,3.2vw,40px)/1.1 var(--body);letter-spacing:-.02em;
transition:opacity .35s}
.nos li::before{content:"";flex:none;width:44px;height:44px;border-radius:50%;background:var(--on-theme);position:relative;z-index:1;
transition:transform .45s cubic-bezier(.16,1,.3,1)}
.nos li+li::after{content:"";position:absolute;left:0;bottom:22px;width:44px;height:calc(100% + 18px);background:var(--on-theme);
transform-origin:50% 0;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.nos svg{position:absolute;left:11px;top:50%;width:22px;height:22px;margin-top:-11px;z-index:2;color:var(--stage);fill:none;stroke:currentColor;
transition:opacity .3s,transform .45s cubic-bezier(.16,1,.3,1)}
.nos li:nth-child(2),.nos li:nth-child(2)::before,.nos li:nth-child(2)::after,.nos li:nth-child(2) svg{transition-delay:.08s}
.nos li:nth-child(3),.nos li:nth-child(3)::before,.nos li:nth-child(3)::after,.nos li:nth-child(3) svg{transition-delay:.16s}
.nos li:nth-child(4),.nos li:nth-child(4)::before,.nos li:nth-child(4)::after,.nos li:nth-child(4) svg{transition-delay:.24s}
.js .nos li:not(.in){opacity:.4}
.js .nos li:not(.in)::before{transform:scale(.7)}
.js .nos li:not(.in)::after{transform:scaleY(0)}
.js .nos li:not(.in) svg{opacity:0;transform:scale(.4)}

/* The Home Screen sits behind the app; leaving the app shrinks it into its icon. */
.screen{background:color-mix(in srgb,var(--app) 42%,#000)}
.app{position:absolute;inset:0;background:var(--a);transform-origin:20% 46%;
transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .25s,border-radius .55s,background-color .6s cubic-bezier(.16,1,.3,1),visibility 0s}
.phone[data-app=tasks] .app,.phone[data-app=ai] .app{background:var(--deep)}
.at-home .app{transform:scale(.16);opacity:0;border-radius:140px;visibility:hidden;
transition:transform .5s cubic-bezier(.5,0,.15,1),opacity .2s .28s,border-radius .5s,visibility 0s .5s}
.homescreen{position:absolute;inset:0;color:#fff;opacity:0;transform:scale(1.14);transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .3s}
.at-home .homescreen{opacity:1;transform:none}
.at-home .status{color:#fff}
.at-home .home{background:#fff}
.hs{position:absolute;left:27px;right:27px;top:84px;display:grid;grid-template-columns:repeat(4,64px);justify-content:space-between;
grid-auto-rows:84px;row-gap:14px}
.wslot{grid-column:span 2;grid-row:span 2}
.widget{width:158.6px;height:158px;border-radius:27px;background:var(--app);color:var(--on-app);--f:var(--on-app);--i:var(--app-ink);
display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:13px;transition:background-color .6s cubic-bezier(.16,1,.3,1)}
.widget .bub{height:auto;display:block;border-radius:50%}
.widget .bub .orb{--d:62.3px}
.wslot>span,.appicon>span{display:block;margin-top:6px;text-align:center;font-size:12px;font-weight:500;line-height:1}
.quad{grid-column:span 2;grid-row:span 2;display:grid;grid-template-columns:64px 64px;justify-content:space-between;align-content:start;row-gap:34px}
.ic{display:block;width:64px;height:64px;border-radius:15px;background:rgba(255,255,255,.15)}
.appicon img{display:block;width:64px;height:64px;border-radius:15px}
.phone .appicon{transition:transform .2s}
.phone .appicon:active{transform:scale(.92)}
.dock{position:absolute;left:14px;right:14px;bottom:28px;height:92px;border-radius:34px;background:rgba(255,255,255,.13);
display:flex;justify-content:space-between;align-items:center;padding:0 14px}

@media (max-width:920px){
.route{display:none}
/* A phone you use with a finger stays flat, and every chapter is at full strength. */
.tilt{--live:0;transform:none;animation:none}
.screen::after{display:none}
.chapters{display:contents}
.chapter,.stage-phone{grid-column:1;grid-row:auto}
.stage{padding:0 clamp(20px,6vw,40px) 24px}
.js .chapter.in{opacity:1}
.stage{grid-template-columns:1fr;border-radius:32px;padding-bottom:24px}
.chapter{min-height:0;padding:44px 0;max-width:none}
.chapter.first{min-height:0;padding-top:48px;order:-1}
.stage-phone{position:static;height:auto;padding:8px 0 24px;scroll-margin-top:12px}
.js .show{display:inline-flex;align-items:center}
.trio{grid-template-columns:1fr;gap:28px}
}
/* A phone in your hand. The demo phone is the page: it is held under a short caption with all of it in view, and
   the page still scrolls by itself. .track is the length of the scroll, each chapter takes one step of it, and
   demo.js gives the chapter in hand to the caption and its tab to the phone. The caption is a heading and one
   sentence; the lists stay on the wide page. Everything that moves here is tied to the scroll itself, so the
   smallest scroll shows: a bead runs down the rail beside the phone, and the caption drifts, then hands over to
   the next one (demo.js, follow). Under the phone a bar holds the App Store badge; it is as tall as the site's
   header (--under, from demo.js), so on landing all of the phone shows and the bar is what lies below the window.
   The three share one grid cell so both can stick. demo.js sets .scene, so without script the column above stays. */
.scene .stage{--cap:104px;display:grid;grid-template-columns:minmax(0,1fr);width:100%;padding:0;margin-bottom:0;border-radius:28px}
.scene .sheet,.scene .stage-phone,.scene .track{grid-area:1/1}
.scene .track{display:block;height:calc(100svh + var(--steps)*var(--step,75svh))}
/* Each is a window tall with its margin, so the two let go of the window together at the end. */
.scene .sheet{display:block;position:sticky;top:0;align-self:start;height:var(--cap);margin-bottom:calc(100svh - var(--cap));z-index:4}
.scene .panel{display:block;padding:12px 20px 0;text-align:center}
.scene .stage-phone{position:sticky;top:var(--cap);height:calc(100svh - var(--cap));margin-top:var(--cap);padding:0;justify-content:flex-start;gap:0}
.scene .hint,.scene .show,.scene .details,.scene .after,.scene .note,.scene .stage .swatches,.scene .chapter .badge,.scene .chapter .soon,.scene .chapter:last-child p{display:none}
.scene .under{display:flex;align-items:center;justify-content:center;width:100%;height:var(--under,60px);padding:0 20px}
.scene .under .badge,.scene .under .soon{margin:0;flex:none;align-self:center}
.scene .under .soon{min-height:36px;padding:0 16px;font-size:14px}
.scene .badge img{height:40px}
/* The rail, in the margin beside the phone and level with its middle: a node a chapter, 26 px apart, on a hairline.
   --p is how far the scroll has come, 0 to 1; the fill and the bead at its end follow it. */
.scene .steps{display:flex;flex-direction:column;position:absolute;left:calc(var(--side,60px)/2 - 22px);top:calc(449px*var(--k) - 117px);width:44px;z-index:2}
.steps::before,.steps .fill{content:"";position:absolute;left:21px;top:13px;width:2px;height:208px;border-radius:1px;background:var(--on-theme)}
.steps::before{opacity:.28}
.steps .fill{transform-origin:50% 0;transform:scaleY(var(--p,0))}
.steps .bead{position:absolute;left:16px;top:7px;width:12px;height:12px;border-radius:50%;background:var(--on-theme);z-index:1;
box-shadow:0 0 0 5px color-mix(in srgb,var(--on-theme) 22%,transparent);translate:0 calc(var(--p,0)*208px);
animation:nudge 1.5s cubic-bezier(.45,0,.55,1) 1.2s 2}
/* On landing the bead dips twice, to say the page goes on. */
@keyframes nudge{50%{transform:translateY(9px)}}
.steps a{position:relative;width:44px;height:26px;display:grid;place-items:center}
.steps a::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--on-theme);opacity:.45;transition:opacity .3s}
.steps a.done::after{opacity:1}
/* The captions lie on one another. demo.js places each by the scroll: the one in hand drifts up a little, then
   leaves upward as the next rises into its place. */
.scene .chapters{display:grid}
.scene .chapters .chapter{grid-area:1/1;display:block;min-height:0;max-width:none;padding:0;order:0;
opacity:0;visibility:hidden;transition:none;will-change:transform,opacity}
.scene .chapters .chapter.on{opacity:1;visibility:visible}
.scene .chapter h1,.scene .chapter h2{font-size:clamp(22px,6.4vw,27px);margin:0}
.scene .chapter p{font-size:16px;line-height:1.35;margin:6px auto 0;max-width:22rem;text-wrap:balance;
color:color-mix(in srgb,var(--on-theme) 85%,transparent)}
.scene .nos{grid-template-columns:auto auto;justify-content:center;gap:4px 18px;margin-top:8px}
.scene .nos li{gap:5px;font-size:13px;font-weight:600;letter-spacing:0}
.scene .nos li::before{width:16px;height:16px}
.scene .nos li+li::after{display:none}
.scene .nos svg{left:3px;width:10px;height:10px;margin-top:-5px}
@media (prefers-reduced-motion:reduce){
.view,.view.on{transform:none}
.enter .cell .mark,.flash .fl,.ab,.on .aih b,.cap .on .g{animation:none}
.bloom,.bloom.grow{transition:none}
.aib.holding{transform:none}
/* The light does not sweep: a thin ring shows while the hold charges. */
.bub .orb,.bub.holding .orb{transform:none}
.bub.holding .gl{box-shadow:inset 0 0 0 2.7px #fff}
.stage,.screen,.rn,.app,.homescreen{transition-duration:.01s}
.tilt{--live:0;transform:none;animation:none}
.screen::after{display:none}
.js .chapter,.scene .chapters .chapter,.nos li,.nos li::before,.nos li::after,.nos svg,.route .fill,.route a::after,.steps a::after{transition:none}
.steps .bead{animation:none}
}
.phone.gold:not(.quiet)[data-app=today],.phone.gold:not(.quiet)[data-app=grid]{--ss:#FDEEA7;--sl:#AD9319;--sd:#5F510E;--si:#9A8316}