/* aatm.ai · the website's one stylesheet. Ground, ink and accents are the app's (brand_facts.md); type is
   Bricolage Grotesque for headings, Geist for body, Geist Mono for small labels, self-hosted, Latin subset.
   v1.1 (site_v1_4): the first screen says what aatm is, the app section, the nine's cards, a shorter "Why aatm",
   the nav button by launch state, the Kalighat story moved up, the purple logo and the icon switch (D1 to D6).
   v1.1 rev 2 (site_v1_5): F1, the first screen shows the way in at every window; F2, the thesis sits closer to "Why aatm".
   v1.1 rev 3 (site_v1_6): G1, a card beside its figure draws its caret on that side.
   v1.1 rev 4 (site_v1_7): W1, each card's next day under its play control; W2, "Hear the week" on the hint's line. */
@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage-800.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";src:url(fonts/geist-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";src:url(fonts/geist-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist Mono";src:url(fonts/geist-mono-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;--sans:"Geist",ui-sans-serif,system-ui,sans-serif;--mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
--ground:#1a0a3f;--bar:rgba(26,10,63,.92);--ink:#f3f0ff;--ink2:#9c94b2;--accent:#c4b3f7;--line:rgba(243,240,255,.12);--line2:rgba(243,240,255,.3);
--btn:#c4b3f7;--btn-ink:#1a0a3f;--focus:#c4b3f7;--fill:rgba(196,179,247,.14);--logo:#f3f0ff;--line-ink:#9c94b2;
--sky:radial-gradient(120vw 55vh at 100% 0,rgba(144,91,244,.16) 0%,rgba(144,91,244,.05) 38%,rgba(144,91,244,0) 70%);
--nav:56px;color-scheme:dark}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]){--ground:#fff;--bar:rgba(255,255,255,.92);--ink:#0f032d;--ink2:#6f6881;--accent:#4e2bcc;--line:rgba(15,3,45,.1);--line2:rgba(15,3,45,.26);
--btn:#4e2bcc;--btn-ink:#fff;--focus:#4e2bcc;--fill:rgba(144,91,244,.14);--logo:#4e2bcc;--line-ink:#6f6881;--sky:linear-gradient(180deg,#f5effc 0,#f9f6fd 30vh,#fff 52vh);color-scheme:light}}
:root[data-theme=light]{--ground:#fff;--bar:rgba(255,255,255,.92);--ink:#0f032d;--ink2:#6f6881;--accent:#4e2bcc;--line:rgba(15,3,45,.1);--line2:rgba(15,3,45,.26);
--btn:#4e2bcc;--btn-ink:#fff;--focus:#4e2bcc;--fill:rgba(144,91,244,.14);--logo:#4e2bcc;--line-ink:#6f6881;--sky:linear-gradient(180deg,#f5effc 0,#f9f6fd 30vh,#fff 52vh);color-scheme:light}
:root[data-theme=dark]{color-scheme:dark}
@media (min-width:720px){:root{--nav:64px}}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ground);-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--nav)}
body{margin:0;color:var(--ink);background:var(--sky) no-repeat,var(--ground);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:var(--accent);text-underline-offset:3px}a:hover{color:var(--ink)}
p{margin:0}h1,h2,h3{margin:0;font-family:var(--display);text-wrap:balance}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}
.wrap{max-width:1120px;margin:0 auto;padding-inline:20px}
@media (min-width:720px){.wrap{padding-inline:32px}}
.eyebrow{font:500 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.lead{font-size:clamp(18px,2.2vw,21px);line-height:1.5;color:var(--ink2);max-width:36ch;text-wrap:pretty}
.fine{font-size:14px;line-height:1.5;color:var(--ink2)}
h2.big{font-weight:800;font-size:clamp(34px,8.6vw,64px);line-height:1;letter-spacing:-.03em}
/* buttons: lavender with a midnight label (dark), Purple Heart with a white label (light) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border:0;border-radius:999px;background:var(--btn);color:var(--btn-ink);font:600 17px/1 var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s}
.btn:hover{color:var(--btn-ink)}.btn:active{transform:scale(.98)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2)}.btn.ghost:hover{color:var(--ink)}
.btn-sm{min-height:44px;padding:0 18px;font-size:15px}
.btn[disabled]{cursor:default}
.w-play,.w-both{display:none}
[data-launch=play] .w-early,[data-launch=both] .w-early{display:none}
[data-launch=play] .w-play,[data-launch=both] .w-both{display:inline}
.is-ios[data-launch=play] .btn .w-play{display:none}.is-ios[data-launch=play] .btn .w-early{display:inline}
/* nav: a solid bar at 92% of the ground. D5: its button follows the launch state; D6: the logo is purple in light
   and white in dark, and the switch is an icon (a sun offering light, a moon offering dark) */
.nav{position:sticky;top:0;z-index:40;background:var(--bar);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:16px;height:var(--nav)}
.logo,.foot .logo{display:inline-flex;color:var(--logo);padding:8px 0;transition:opacity .12s}.logo svg{display:block;height:22px;width:auto;fill:currentColor}
.logo:hover,.foot .logo:hover{color:var(--logo);opacity:.85}
@media (min-width:720px){.logo svg{height:26px}}
.nav nav{margin-left:auto;display:flex;align-items:center;gap:10px}
.links{display:none;list-style:none;margin:0 10px 0 0;padding:0;gap:22px}
.links a{color:var(--ink2);text-decoration:none;font-size:15px}.links a:hover{color:var(--ink)}
@media (min-width:900px){.links{display:flex}}
.theme{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--line2);border-radius:50%;background:none;color:var(--ink2);cursor:pointer}
.theme:hover{color:var(--ink)}.theme svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.theme .i-moon{display:none}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]) .theme .i-sun{display:none}:root:not([data-theme=dark]) .theme .i-moon{display:block}}
:root[data-theme=light] .theme .i-sun{display:none}:root[data-theme=light] .theme .i-moon{display:block}
@media (max-width:389px){.nav .wrap{gap:10px}.nav nav{gap:8px}.nav .btn-sm{padding:0 14px;font-size:14.5px}}
/* the courts: a still paints first, the live canvas takes over from its first frame */
.court{position:relative}
.court>picture,.court>picture img,.court canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.court canvas{opacity:0}.court.live canvas{opacity:1}.court.live>picture{visibility:hidden}
.court-off .court canvas{display:none}
/* H1 · D1: the court, the headline, the sub line that says what aatm is, the two buttons and the small line, all on the first screen */
.hero{position:relative;padding:clamp(14px,3.4svh,40px) 0 30px}
.court-hero{width:100%;aspect-ratio:1/.478}
@media (min-width:720px){.court-hero{width:min(calc(100% - 48px),1280px,calc(46svh*2.3325));aspect-ratio:2.3325/1;margin:0 auto}}
.js .court-hero img{opacity:.2;transition:opacity .7s cubic-bezier(0,0,.58,1);animation:still-up 0s 3s forwards}
.js .court-hero img.lit{opacity:1}
@keyframes still-up{to{opacity:1}}
.hint{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 14px;margin-top:6px;padding-inline:20px;text-align:center}
/* v1.1 rev 4 · W2: "Hear the week" sits on the hint's line, a quiet pill, 32 px drawn and 46 px to tap. Its negative margins give it the
   hint line's own height, so where the two fit one line nothing on the first screen moves. Where they do not (phones under about
   400 px wide, a phone on its side) it drops under the hint, and narrow phones take that line back from the space above the court */
.week{position:relative;flex:none;display:inline-flex;align-items:center;gap:7px;height:32px;margin-block:-6px;padding:0 14px 0 11px;border:1px solid var(--line2);border-radius:999px;background:none;color:var(--ink);font:600 14px/1 var(--sans);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s}
.week::after{content:"";position:absolute;inset:-7px -2px}
.week:hover{border-color:var(--ink2)}.week:active{transform:scale(.98)}
.week svg{display:block;flex:none;width:12px;height:12px;fill:currentColor}
.week .i-stop,.week[data-state=playing] .i-play{display:none}.week[data-state=playing] .i-stop{display:block}
.week[data-state=playing]{background:var(--fill);border-color:var(--accent)}
@media (max-width:399px) and (max-aspect-ratio:9000/13000){.hero{padding-top:clamp(6px,1.6svh,24px)}}
.no-js .hint{display:none}.court-off .hint{visibility:hidden}
.hero-copy{display:grid;justify-items:center;text-align:center;margin-top:clamp(8px,1.8svh,20px)}
.hl{font-weight:800;font-size:min(14.5vw,11svh,96px);line-height:.95;letter-spacing:-.035em}
.hero .lead{margin-top:12px;font-size:clamp(17px,4.6vw,22px);max-width:30ch;width:100%}
.ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}
.avail{margin-top:12px}
/* v1.1 rev 2 · F1. Phones keep the layout above. Any other window (720 px and wider, or a narrow window that is short for its
   width) gives the first screen exactly one screen: the copy takes the height it needs and the court takes what is left,
   never wider than it was. The court's cell is a size container, so the court fits it by width or by height, whichever is
   smaller. Where the screen is short for its width, the copy goes beside the court, which keeps the court large; there the
   court and the hint sit between two flexible rows, so the copy beside them never takes height from the court */
@media (min-width:720px),(min-aspect-ratio:9001/13000){
.hero{--cw:min(100vw - 48px,1280px);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,min(var(--cw)/2.3325,46svh)) auto auto;align-content:center;height:calc(100svh - var(--nav));padding:clamp(10px,2.6svh,36px) 0 clamp(12px,3svh,36px)}
.hero>.meet{display:contents}
.court-cell{container-type:size;min-width:0;min-height:0}
.court-hero{width:min(100cqw,100cqh*2.3325);aspect-ratio:2.3325/1;margin:0 auto}}
@supports not (container-type:size){@media (min-width:720px),(min-aspect-ratio:9001/13000){.court-hero{width:min(100% - 48px,1280px,(100svh - var(--nav) - 420px)*2.3325)}}}
@media (min-width:600px) and (max-height:559px),(min-width:800px) and (max-height:599px),(min-width:900px) and (max-height:679px),(min-width:1100px) and (max-height:739px),(min-width:1280px) and (max-height:799px),(min-width:1440px) and (max-height:879px){
.hero{--copyw:clamp(330px,32vw,440px);--gap:clamp(24px,3.6vw,56px);--cw:calc(min(100vw - 64px,1440px) - var(--copyw) - var(--gap));grid-template-columns:minmax(0,1fr) var(--copyw);grid-template-rows:1fr minmax(0,calc(var(--cw)/2.3325)) auto 1fr;column-gap:var(--gap);max-width:1504px;margin-inline:auto;padding-inline:32px}
.court-cell{grid-area:2/1}.hint{grid-area:3/1}
.hero-copy{grid-area:1/2/5/3;align-self:center;justify-items:start;text-align:left;max-width:none;margin:0;padding:0}
.hl{font-size:min(4.6vw,10svh,72px)}
.hero .lead{margin-top:14px;font-size:clamp(17px,1.45vw,21px);max-width:none}
.ctas{justify-content:flex-start;margin-top:22px}}
/* H2 · the court speaks: a tall track with a sticky stage; each 40% of the small screen is one beat (D4). The line sits
   at the foot of its box, the court just under it, and the two stay together in the middle of the stage */
.speak{border-top:1px solid var(--line)}
.speak-track{--stick:var(--nav);position:relative;height:calc(100svh - var(--nav) + 7*40svh)}
.speak-stage{position:sticky;top:var(--nav);height:calc(100svh - var(--nav));display:flex;flex-direction:column;padding-top:18px}
@media (max-width:719px){.speak-stage{padding-bottom:calc(74px + env(safe-area-inset-bottom))}}
.speak-head{flex:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.speak-body{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;padding-top:16px}
.progress{display:block;width:72px;height:2px;border-radius:2px;background:var(--line);overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(.1429);transition:transform .3s cubic-bezier(0,0,.58,1)}
.speak-lines{flex:none;display:grid}
.beat{grid-area:1/1;align-self:end;opacity:0;visibility:hidden;transition:opacity .12s linear,visibility 0s .12s}
.beat.on{opacity:1;visibility:visible;transition:opacity .16s linear}
.speaker{font:500 12px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.said{font:700 clamp(24px,6.6vw,48px)/1.12 var(--display);letter-spacing:-.02em;max-width:22ch;text-wrap:balance}
@media (min-width:720px){.said{font-size:clamp(28px,4.2vw,40px);max-width:28ch}}
.court-speak{flex:0 1 calc(.658*(100vw - 16px));min-height:120px;margin:8px -20px 0}
@media (min-width:720px){.court-speak{flex-basis:calc(.46*(min(100vw,1120px) - 80px) + 8px);margin-inline:0}}
.transcript{list-style:none;margin:0;padding:0}
.no-js .speak-track{height:auto}.no-js .speak-stage{display:none}
.no-js .transcript{position:static!important;width:auto;height:auto;clip:auto;clip-path:none;white-space:normal;margin:0 auto;padding:56px 20px 0;max-width:1120px;display:grid;gap:22px}
.no-js .transcript li{font:700 clamp(22px,5vw,34px)/1.15 var(--display);max-width:26ch}
.no-js .transcript li span{display:block;font:500 12px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
/* H3, with the Kalighat story right after the pull quote (D5) */
.thesis{display:grid;gap:28px;padding-block:20px 64px}
@media (min-width:720px){.thesis{padding-block:40px 88px}}
@media (min-width:900px){.thesis{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:64px;align-items:end}}
.thesis .body,.kalighat{font-size:clamp(18px,2vw,21px);line-height:1.55;max-width:46ch;text-wrap:pretty}
.thesis .body{margin-top:18px}
.pull{margin:0;padding-top:22px;border-top:1px solid var(--line)}
.pull blockquote{margin:0}.pull blockquote p{font:700 clamp(24px,3vw,34px)/1.18 var(--display);letter-spacing:-.015em;text-wrap:balance;max-width:20ch}
.pull figcaption{margin-top:14px;font-size:14px;color:var(--ink2)}
.kalighat{margin-top:22px;color:var(--ink)}
/* D2 · inside the app: four store screens in plain phone outlines in the line ink. A phone swipes one screen and the
   edges of its neighbours (scroll snap); wide screens show all four in a row */
.app{border-top:1px solid var(--line);padding-block:56px 64px}
@media (min-width:720px){.app{padding-block:72px 88px}}
.app h2{margin-top:14px}
.app-row{--pw:min(66vw,calc((100svh - var(--nav) - 96px)*.46),300px);list-style:none;margin:28px calc(50% - 50vw) 0;padding:4px calc(50vw - var(--pw)/2) 6px;display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
.app-row::-webkit-scrollbar{display:none}
.app-row:focus-visible{outline-offset:-2px}
.app-row li{flex:none;width:var(--pw);scroll-snap-align:center;display:grid;align-content:start;justify-items:center;gap:12px;text-align:center}
.phone{width:100%;padding:calc(var(--pw)*.028);border:1.5px solid var(--line-ink);border-radius:calc(var(--pw)*.16)}
.phone img{display:block;width:100%;height:auto;aspect-ratio:600/1304;border-radius:calc(var(--pw)*.13);background:#1a0a3f}
.app-row .cap{font-size:15px;line-height:1.45;color:var(--ink2)}
@media (min-width:720px){.app-row{--pw:min(38vw,calc((100svh - var(--nav) - 110px)*.46),300px);gap:20px;padding-inline:calc(50vw - min(50vw,560px) + 32px);scroll-padding-inline:calc(50vw - min(50vw,560px) + 32px)}.app-row li{scroll-snap-align:start}}
@media (min-width:960px){.app-row{--pw:calc((min(100vw,1120px) - 64px - 72px)/4);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:36px 0 0;padding:0;overflow:visible}.app-row li{width:auto}}
/* H4 · the three promises */
.pact{border-top:1px solid var(--line);padding-block:56px 64px}
@media (min-width:720px){.pact{padding-block:72px 80px}}
.pact-grid{display:grid;gap:36px}
@media (min-width:900px){.pact-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:56px;align-items:center}}
.pact-intro h2{margin-top:14px}.pact-intro .lead{margin-top:18px}
.kept-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:10px;font-size:16px;color:var(--ink2)}
.kept-list li{display:flex;align-items:center;gap:12px}
.mark{flex:none;width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink2)}
.kept-list li.done{color:var(--ink)}.kept-list li.done .mark{background:var(--accent);box-shadow:none}
.pact-stage{position:relative;display:grid;justify-items:center;text-align:center;min-width:0}
.pact-text{display:grid;width:100%}
.pv{grid-area:1/1;align-self:end;opacity:0;visibility:hidden;transition:opacity .12s linear,visibility 0s .12s}
.pv.on{opacity:1;visibility:visible;transition:opacity .16s linear}
.step{font:500 12px/1 var(--mono);letter-spacing:.18em;color:var(--ink2);margin-bottom:12px}
.ptop{font:700 clamp(26px,6.6vw,36px)/1.1 var(--display);letter-spacing:-.015em;max-width:17ch;margin:0 auto;text-wrap:balance}
.pwhy{font-size:16px;color:var(--ink2);max-width:30ch;margin:10px auto 0;text-wrap:pretty}
.court-pact{width:calc(100% + 40px);margin-inline:-20px;height:clamp(300px,50svh,440px)}
@media (min-width:720px){.court-pact{width:100%;margin-inline:0;height:clamp(320px,52svh,480px)}}
.pact-act{display:grid;justify-items:center;margin-top:6px;width:100%}
.pact-act>*{grid-area:1/1}.pact-act>.hold{align-self:center}
.hold{position:relative;display:grid;place-items:center;min-height:56px;padding:0 30px;overflow:hidden;border:1px solid var(--line2);border-radius:999px;background:none;color:var(--ink);font:500 13px/1 var(--mono);letter-spacing:.18em;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.hold .fill{position:absolute;inset:0;background:var(--fill);transform-origin:left;transform:scaleX(0)}
.hold .hold-l{grid-area:1/1;position:relative;visibility:hidden;white-space:nowrap}
.hold[data-state=idle] .h-idle,.hold[data-state=on] .h-on,.hold[data-state=kept] .h-kept{visibility:visible}
.hold[data-state=on]{border-color:var(--accent)}
.pact-done{display:grid;justify-items:center;gap:14px;opacity:0;visibility:hidden}
.sealed .pact-done{opacity:1;visibility:visible;transition:opacity .35s linear}.sealed .hold{display:none}
.no-js .pv{position:static;opacity:1;visibility:visible;grid-area:auto;margin-bottom:26px}.no-js .pv[data-v="3"],.no-js .court-pact,.no-js .pact-act{display:none}
/* H5 · a reading: a hairline frame with no fill, so the figures stand on the page's own ground */
.reading{border-top:1px solid var(--line);padding-block:56px 64px}
@media (min-width:720px){.reading{padding-block:72px 88px}}
.read-grid{display:grid;gap:32px}
@media (min-width:900px){.read-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:56px;align-items:center}}
.read-grid h2{margin-top:14px}.read-grid .lead{margin-top:18px}
.yearcard{border:1px solid var(--line);border-radius:28px;padding:24px 20px 26px;display:grid;gap:14px;min-width:0}
.ylabel{font:500 11px/1 var(--mono);letter-spacing:.18em;color:var(--ink2);text-align:center}
.yyear{font:800 clamp(48px,12vw,64px)/1 var(--display);letter-spacing:-.03em;color:var(--accent);text-align:center}
.ystage{position:relative;height:190px;margin-inline:-6px}
.ystage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ylab{position:absolute;top:0;left:0;font:500 11px/14px var(--mono);letter-spacing:.04em;white-space:nowrap;opacity:0;color:var(--ink)}
.ytext{font-size:17px;line-height:1.55;max-width:44ch;margin:0 auto;text-wrap:pretty}
.chips{display:flex;justify-content:center;gap:8px}
.chips span{width:84px;padding:10px 0;border:1px solid var(--line2);border-radius:12px;font-size:15px;color:var(--ink2);text-align:center;user-select:none}
.yearcard .fine{text-align:center}
.no-js .ystage{display:none}
/* H6 */
.made{border-top:1px solid var(--line);padding-block:56px 64px}
@media (min-width:720px){.made{padding-block:72px 88px}}
.made h2{margin-top:14px}
.made-grid{list-style:none;margin:36px 0 0;padding:0;display:grid;column-gap:48px}
@media (min-width:720px){.made-grid{grid-template-columns:1fr 1fr}}
.made-grid li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:18px;padding:22px 0;border-top:1px solid var(--line)}
.made-grid canvas{width:56px;height:56px;display:block}
.made-grid h3{font-weight:700;font-size:21px;line-height:1.2;margin:4px 0 6px}
.made-grid p{color:var(--ink2);max-width:44ch;text-wrap:pretty}
.no-js .made-grid canvas{visibility:hidden}
/* H7 · the way in: the heading and the way in, no line-up (D4) */
.get{border-top:1px solid var(--line);padding-block:56px 48px;text-align:center}
@media (min-width:720px){.get{padding-block:72px 48px}}
.wayin{margin-top:28px}
.wi{display:none}
[data-launch=early] .wi-early,[data-launch=play] .wi-play,[data-launch=both] .wi-both{display:grid;justify-items:center;gap:16px}
.wi-line{font-size:clamp(18px,2.2vw,21px);line-height:1.5;color:var(--ink2);max-width:36ch;text-wrap:pretty}
form.early{display:grid;justify-items:center;gap:12px;width:100%}
form.early .row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;width:100%}
form.early input[type=email]{min-height:52px;width:min(330px,100%);padding:0 20px;border:1px solid var(--line2);border-radius:999px;background:transparent;color:var(--ink);font:400 17px/1 var(--sans)}
form.early input::placeholder{color:var(--ink2);opacity:1}
form.early input[aria-invalid=true]{border-color:var(--accent)}
form.early .f-sending{display:none}
form.early[data-state=sending] .f-idle{display:none}form.early[data-state=sending] .f-sending{display:inline}
form.early[data-state=saved] .row{display:none}
form.early[data-state=saved] .f-msg{color:var(--ink);font-size:17px}
.wi-play form.early{display:none}.is-ios .wi-play form.early{display:grid}
.badges{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 24px;padding:12px}
.badge{display:block;line-height:0}.badge img{height:48px;width:auto;display:block}
.soon{font-size:15px;color:var(--ink2)}
.target{display:none}.target:target{display:block;color:var(--ink)}
/* D3 · the nine's cards: tap a figure (or reach it through the hidden list of nine buttons) and it steps forward;
   its card shows its name tag, its day line and a play control in the line ink. Sound only from that control */
.meet-on .court{cursor:pointer;-webkit-tap-highlight-color:transparent}
.nine-keys{list-style:none;margin:0;padding:0}
.no-js .nine-keys,.court-off .nine-keys{display:none}
.meet-ring{position:absolute;z-index:21;border:2px solid var(--focus);border-radius:18px;pointer-events:none}
.meet-ring[hidden],.nine-card[hidden]{display:none}
.nine-card{position:absolute;z-index:22;left:0;top:0;width:min(296px,calc(100vw - 24px));padding:14px 16px 6px;border:1px solid var(--line2);border-radius:20px;background:var(--ground);color:var(--ink);text-align:left;opacity:0;transform:translateY(6px);transition:opacity .2s cubic-bezier(0,0,.58,1),transform .2s cubic-bezier(0,0,.58,1)}
.nine-card.below{transform:translateY(-6px)}
.nine-card.side-r{transform:translateX(-6px)}.nine-card.side-l{transform:translateX(6px)}
.nine-card.on{opacity:1;transform:none}
.nine-card:not(.on){pointer-events:none}
.nc-tag{font:500 12px/1.35 var(--mono);letter-spacing:.12em;color:var(--accent)}
.nc-line{margin-top:6px;font:700 22px/1.15 var(--display);letter-spacing:-.01em;text-wrap:balance}
.nc-voice{display:flex;align-items:center;gap:4px;margin:6px 0 0 -6px}
.nc-play{position:relative;flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;color:var(--line-ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
.nc-play:hover{color:var(--ink)}
.nc-play svg{display:block;width:34px;height:34px}
.nc-play .i-stop,.nc-play[data-state=playing] .i-play{display:none}.nc-play[data-state=playing] .i-stop{display:inline}
.nc-ai{font-size:13px;line-height:1.35;color:var(--ink2)}
/* v1.1 rev 4 · W1: the next day, one row under the play control, behind a hairline; secondary to play (its ink, not the line ink's circle) */
.nc-nav{display:flex;justify-content:flex-end;margin:4px -16px 0;padding:0 8px 0 16px;border-top:1px solid var(--line)}
.nc-nav[hidden]{display:none}
.nc-next{display:inline-flex;align-items:center;gap:2px;min-height:44px;padding:0 4px 0 12px;border:0;border-radius:12px;background:none;color:var(--ink2);font:600 14px/1 var(--sans);cursor:pointer;-webkit-tap-highlight-color:transparent}
.nc-next:hover{color:var(--ink)}
.nc-next svg{display:block;flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
/* on screens 440 px tall or less (a phone on its side) next sits beside play instead, so the card keeps rev 3's height and G1 its places */
@media (max-height:440px){.nine-card{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:4px}.nc-tag,.nc-line{grid-column:1/-1}.nc-voice{grid-column:1}.nc-ai{text-wrap:balance}
.nc-nav{grid-column:2;align-self:center;margin:6px -8px 0 0;padding:0;border-top:0}}
.nc-caret{position:absolute;left:var(--cx,50%);bottom:-7px;width:12px;height:12px;margin-left:-6px;background:var(--ground);border:solid var(--line2);border-width:0 1px 1px 0;transform:rotate(45deg)}
.nine-card.below .nc-caret{bottom:auto;top:-7px;border-width:1px 0 0 1px}
.nine-card.side-r .nc-caret,.nine-card.side-l .nc-caret{bottom:auto;top:var(--cy,50%);margin:-6px 0 0}
.nine-card.side-r .nc-caret{left:-7px;border-width:0 0 1px 1px}.nine-card.side-l .nc-caret{left:auto;right:-7px;border-width:1px 1px 0 0}
/* footer */
.foot{border-top:1px solid var(--line);padding-block:28px 40px;font-size:15px;color:var(--ink2)}
@media (max-width:719px){.foot{padding-bottom:calc(104px + env(safe-area-inset-bottom))}}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px}
.foot-id{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px}
.foot .logo svg{height:18px}.foot .mail{user-select:text;-webkit-user-select:text}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 20px}
.foot a{display:inline-block;padding:10px 0;color:var(--ink2);text-decoration:none}.foot a:hover{color:var(--ink)}
.credit{display:none;flex-basis:100%;max-width:76ch;margin-top:4px;font-size:12.5px;line-height:1.5;color:var(--ink2)}[data-launch=both] .credit{display:block}
.terms-link,.ig-link{display:none}[data-terms] .terms-link,[data-ig] .ig-link{display:list-item}
/* the phone's bar */
.bar{display:none}
@media (max-width:719px){.bar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--bar);border-top:1px solid var(--line);transform:translateY(110%);visibility:hidden;transition:transform .22s cubic-bezier(0,0,.58,1),visibility 0s .22s}
.bar.on{transform:none;visibility:visible;transition:transform .22s cubic-bezier(0,0,.58,1)}}
.bar-t{flex:1;min-width:0}.bar-h{display:block;font:700 16px/1.15 var(--display)}.bar-s{display:block;margin-top:3px;font-size:12.5px;line-height:1.3;color:var(--ink2)}
/* /why */
.why{max-width:720px;margin:0 auto;padding:28px 20px 24px}
.court-why{width:min(100%,520px);aspect-ratio:2.3325/1;margin:0 auto 32px}
.why h1{font-weight:800;font-size:clamp(44px,10vw,72px);line-height:1;letter-spacing:-.03em;margin-bottom:28px}
.why p{font-size:clamp(18px,2.1vw,20px);line-height:1.62;max-width:60ch;margin-bottom:22px;text-wrap:pretty}
.with-jupiter{position:relative}
.jup{position:relative;width:110px;height:160px;margin:4px 0 14px}
@media (min-width:1080px){.jup{position:absolute;left:calc(100% + 40px);top:-12px;width:140px;height:210px;margin:0}}
.no-js .jup{display:none}
.why .names{font:500 13px/1.4 var(--mono);letter-spacing:.06em;color:var(--ink2);margin-top:30px}
.why .wayin{margin-top:40px;padding-top:40px;border-top:1px solid var(--line);text-align:center}
/* the published pages */
.doc{max-width:720px;margin:0 auto;padding:44px 20px 64px}
.doc .kicker{margin-bottom:12px}
.doc h1{font-weight:800;font-size:clamp(36px,8vw,56px);line-height:1.03;letter-spacing:-.025em}
.doc .meta{margin-top:12px;font-size:14px;color:var(--ink2)}
.doc h2{font-weight:700;font-size:24px;line-height:1.2;margin:40px 0 12px}
.doc h3{font-weight:700;font-size:19px;line-height:1.3;margin:28px 0 8px}
.doc p,.doc li,.doc dd{font-size:17px;line-height:1.62;max-width:64ch}
.doc p+p{margin-top:12px}
.doc ul{margin:10px 0 0;padding-left:1.2em}.doc li+li{margin-top:8px}
.doc dl{margin:10px 0 0}.doc dt{font-weight:600;margin-top:14px}.doc dd{margin:2px 0 0}
.doc .end{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);font-size:15px;color:var(--ink2)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
.js .court-hero img{opacity:1;transition:none;animation:none}
.btn{transition:none}.btn:active{transform:none}
.week{transition:none}.week:active{transform:none}
.beat,.beat.on,.pv,.pv.on{transition-duration:.15s}
.progress i{transition:transform .15s linear}
.nine-card,.nine-card.below,.nine-card.side-l,.nine-card.side-r,.nine-card.on{transform:none;transition:opacity .15s linear}
.bar{transform:none;opacity:0;transition:opacity .15s linear,visibility 0s .15s}.bar.on{transform:none;opacity:1;transition:opacity .15s linear}}