:root{--or:242,153,46;--pu:148,103,240;--bl:47,123,246;--gr:38,179,122;--pk:238,76,138;--max:1160px;--gut:24px;
  --bg:#F4F1EA;--fg:#161513;--sub:#6E6961;--mute:#B4AEA4;--line:rgba(22,21,19,.1);--surf:#E8E4DC;--card:#FFFFFF;--btn:#161513;--btnf:#F4F1EA;--shade:rgba(22,21,19,.28);--bar:#E6E1D8;--tmoon:block;--tsun:none;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#000000;--fg:#FFFFFF;--sub:#8E8E8E;--mute:#4A4A4A;--line:rgba(255,255,255,.12);--surf:#1B1B1B;--card:#0E0E0E;--btn:#FFFFFF;--btnf:#000000;--shade:rgba(0,0,0,.6);--bar:#2A2A2A;--tmoon:none;--tsun:block;color-scheme:dark}}
:root[data-theme=dark]{--bg:#000000;--fg:#FFFFFF;--sub:#8E8E8E;--mute:#4A4A4A;--line:rgba(255,255,255,.12);--surf:#1B1B1B;--card:#0E0E0E;--btn:#FFFFFF;--btnf:#000000;--shade:rgba(0,0,0,.6);--bar:#2A2A2A;--tmoon:none;--tsun:block;color-scheme:dark}
*{box-sizing:border-box}
html,body{background:var(--bg);color:var(--fg)}
body{margin:0;font:400 15px/1.5 Geist,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .4s,color .4s}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
[hidden]{display:none!important}
img{max-width:100%;display:block}
.em{font-family:"Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji",sans-serif;font-weight:400;line-height:1;font-style:normal}
.wrap{width:min(var(--max),100% - 2*var(--gut));margin-inline:auto}


/* hero frame: always exactly one screen */
.hero{position:relative;height:100svh;min-height:560px;display:flex;flex-direction:column;overflow:hidden}
.nav{display:flex;align-items:center;height:64px;gap:36px;flex:none}
.brand{display:flex;align-items:center;gap:8px;font-weight:500;font-size:15.5px;letter-spacing:-.01em}
.brand svg{width:20px;height:20px}
.links{display:flex;gap:28px;font-size:14px}
.nbtn{margin-left:auto;display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;background:var(--btn);color:var(--btnf);font-size:14px;font-weight:500}
.hc{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-block:0 48px}
.eb{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 5px 0 14px;border-radius:999px;background:var(--surf);font-size:13.5px;color:var(--sub);margin-bottom:22px}
.eb b{font-weight:500;color:var(--fg)}
.eb .ar{width:22px;height:22px;border-radius:50%;background:var(--bg);display:grid;place-items:center;margin-left:4px;color:var(--fg)}
.eb .ar svg{width:11px;height:11px}
h1{--h:clamp(38px,4.4vw,64px);margin:0;font-size:var(--h);line-height:1.06;font-weight:480;letter-spacing:-.04em;text-wrap:balance}
.sub{margin:18px 0 0;max-width:36em;font-size:17.5px;line-height:1.55;color:var(--sub);text-wrap:pretty}
.act{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:30px}
.btn1,.btn2{display:inline-flex;align-items:center;height:46px;padding:0 22px;border-radius:999px;font-size:15px;font-weight:500;white-space:nowrap}
.btn1{background:var(--btn);color:var(--btnf)}
.btn2{background:var(--surf)}
.btn1:focus-visible,.btn2:focus-visible,.fly:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.mbr{display:none}

/* the voice mark: idle, listening, thinking, the app that did it, done */
.io{position:relative;display:inline-flex;width:.92em;height:.92em;border-radius:.46em;background:var(--btn);color:var(--btnf);vertical-align:-.13em;margin:0 .04em;transition:width .7s cubic-bezier(.65,0,.35,1),border-radius .5s,background .5s,color .5s}
.io>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity .35s,transform .6s cubic-bezier(.3,1.35,.5,1)}
.io .i-mic{transition-delay:.3s}
.io.listen .i-mic,.io.think .i-mic,.io.app .i-mic{opacity:0;transition-delay:0s}
.io .i-mic svg{width:.4em;height:.4em}
.io .i-bars{gap:.075em;opacity:0}
.io .i-bars i{width:.075em;height:.075em;border-radius:.04em;background:currentColor;transition:height .2s cubic-bezier(.4,1.4,.5,1)}
.io.listen{width:1.9em}
.io.listen .i-bars{opacity:1}
.io .i-think{gap:.075em;opacity:0}
.io .i-think i{width:.085em;height:.085em;border-radius:50%;background:currentColor;animation:bob 1.1s ease-in-out infinite}
.io .i-think i:nth-child(2){animation-delay:.16s}
.io .i-think i:nth-child(3){animation-delay:.32s}
@keyframes bob{0%,100%{transform:translateY(.03em);opacity:.4}45%{transform:translateY(-.05em);opacity:1}}
.io.think .i-think{opacity:1;transition-delay:.25s}
.io>.i-ring{inset:-.11em;opacity:0;transition:opacity .4s}
.io .i-ring svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.io .i-ring circle{fill:none;stroke:var(--fg);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;vector-effect:non-scaling-stroke}
.io.think .i-ring{opacity:.9}
.io.think .i-ring circle{animation:ring var(--think,1.8s) cubic-bezier(.45,0,.4,1) forwards}
@keyframes ring{to{stroke-dashoffset:0}}
.io .i-app{opacity:0;transform:scale(.55)}
.io .i-app img,.io .i-app .gkt{width:100%;height:100%;border-radius:.24em;box-shadow:0 0 0 1px var(--line)}
.io.app{background:transparent;border-radius:.24em}
.io.app .i-app{opacity:1;transform:none}
.io>.i-ck{inset:auto -.07em -.07em auto;width:.36em;height:.36em;border-radius:50%;background:rgb(var(--gr));opacity:0;transform:scale(.3);box-shadow:0 0 0 .045em var(--bg)}
.io .i-ck svg{width:55%;height:55%}
.io.done .i-ck{opacity:1;transform:none}

/* once you scroll, the mark travels down and waits at the bottom */
.fly{position:fixed;left:0;top:0;z-index:50;margin:0;vertical-align:baseline;transform:translate(-50%,-50%);transition:width .7s cubic-bezier(.65,0,.35,1),border-radius .5s,background .5s,color .5s;box-shadow:0 14px 34px -12px var(--shade)}
.io.gone{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line)}
.io.gone>span{opacity:0!important;transition:none}
.fly.docked:hover{filter:brightness(1.15)}
.fly.catch{transition:width .7s cubic-bezier(.65,0,.35,1),border-radius .5s,background .5s,color .5s,left .6s cubic-bezier(.65,0,.35,1)}
.day.catch .ptag{transition:left .6s cubic-bezier(.65,0,.35,1)}
.day.catch .fill{transition:clip-path .6s cubic-bezier(.65,0,.35,1)}

/* words as they are heard: they arrive soft, then settle */
.w{display:inline;opacity:0;filter:blur(6px);color:var(--sub);transition:opacity .45s,filter .55s,color .7s}
.w.on{opacity:1;filter:none}
.w.set{color:var(--fg)}
.caret{display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-.12em;background:var(--fg);border-radius:1px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.shim .w{color:transparent;background:linear-gradient(100deg,var(--fg) 35%,var(--mute) 50%,var(--fg) 65%) 0 0/300% 100%;-webkit-background-clip:text;background-clip:text;animation:shim 1.5s linear infinite}
@keyframes shim{from{background-position:100% 0}to{background-position:0 0}}
.ck{width:18px;height:18px;border-radius:50%;background:rgb(var(--gr));display:inline-grid;place-items:center;flex:none}
.ck svg{width:10px;height:10px}
.gkt{display:grid;place-items:center;background:#161513}
.gkt svg{width:60%;height:60%}
.rs img,.rs .gkt,.res img,.res .gkt{box-shadow:0 0 0 1px var(--line)}

/* ---------- B1 · Caption ---------- */
.cv{margin-top:44px;width:100%;display:flex;flex-direction:column;align-items:center}
.cv .tx{margin:0;height:72px;display:flex;align-items:flex-start;justify-content:center;max-width:22em;font-size:26px;line-height:1.36;font-weight:430;letter-spacing:-.02em;text-wrap:balance;transition:opacity .5s,transform .7s cubic-bezier(.2,.9,.1,1)}
.cv .tx.out{opacity:0;transform:translateY(-6px)}
.rs{margin:10px 0 0;min-height:32px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 8px;font-size:15.5px;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .7s cubic-bezier(.2,.9,.1,1)}
.rs.on{opacity:1;transform:none}
.cta{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 12px;margin-left:6px;border-radius:999px;background:var(--btn);color:var(--btnf);font-size:13px;font-weight:500;white-space:nowrap}
.cta svg{width:11px;height:11px}
.hint{margin:8px 0 0;height:20px;font-size:13.5px;color:var(--sub);opacity:0;transition:opacity .6s .35s}
.hint.on{opacity:1}
.rs img,.rs .gkt{width:24px;height:24px;border-radius:7px}
.rs .m{color:var(--sub)}

/* ---------- the day ---------- */
:root{--ga:.42;--rlb:clamp(28px,5vh,56px)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--ga:.3}}
:root[data-theme=dark]{--ga:.3}
.day{position:relative}
.stage{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;overflow:hidden}
.dh{flex:none;padding-top:clamp(28px,5vh,56px);text-align:center}
.dh .k{display:inline-flex;align-items:center;gap:6px;margin:0 0 14px;font-size:13.5px;color:var(--sub)}
.dh h2{margin:0;font-size:clamp(30px,3.2vw,44px);font-weight:480;letter-spacing:-.035em;line-height:1.08;text-wrap:balance}
.dh .d{margin:12px auto 0;max-width:33em;font-size:16px;line-height:1.55;color:var(--sub);text-wrap:pretty}
.tally{display:flex;justify-content:center;gap:18px;margin:16px 0 0;font-size:13.5px;color:var(--sub);font-variant-numeric:tabular-nums}
.tally span{display:inline-flex;align-items:center;gap:6px}
.tally b{font-weight:500;color:var(--fg)}
.dm{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.dm .cv{margin-top:0}
.cta.ghost{background:var(--surf);color:var(--sub)}

/* A · the mark is the playhead on her day */
.rl{--rlb:clamp(28px,5vh,56px);position:absolute;left:0;right:0;bottom:var(--rlb);height:130px}
.rl .wrap{position:relative;height:100%}
.rli{position:absolute;inset:0}
.A .dm{justify-content:flex-start;padding-block:clamp(28px,6vh,64px) calc(130px + var(--rlb))}
.trk{position:absolute;left:0;right:0;bottom:51px;height:2px;border-radius:2px;background:var(--line)}
.trk .fill{position:absolute;inset:0;border-radius:inherit;background:var(--skyg)}
.hl{position:absolute;bottom:14px;transform:translateX(-50%);font-size:11.5px;color:var(--sub);white-space:nowrap;transition:opacity .25s}
.mk{position:absolute;bottom:52px;width:8px;height:8px;margin:0 0 -4px -4px;border-radius:50%;display:grid;place-items:center;background:var(--mute);transition:width .5s cubic-bezier(.3,1.4,.5,1),height .5s cubic-bezier(.3,1.4,.5,1),margin .5s cubic-bezier(.3,1.4,.5,1),background .3s}
.mk .em{font-size:13px;opacity:0;transform:scale(.4);transition:opacity .3s,transform .5s cubic-bezier(.3,1.4,.5,1)}
.mk.on{width:28px;height:28px;margin:0 0 -14px -14px;background:var(--card);box-shadow:0 0 0 1px var(--line)}
.mk.on .em{opacity:1;transform:none}
.ptag{position:absolute;bottom:88px;transform:translateX(-50%);font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- the widget, as designed in the app ---------- */
:root{--wcard:#FFFFFF;--wink:#1C1C1E;--wgrey:rgba(28,28,30,.6);--whair:rgba(28,28,30,.1);--wout:rgba(28,28,30,.16);--woutbg:#FFFFFF;--wbtn:#1C1C1E;--wbtnf:#FFFFFF;--wa:.22;--wt:.15;--ag:#10794D;--ao:#A65A05;--ab:#1F5FC8;--ap:#6A3FD0;--wsh:0 1px 2px rgba(28,28,30,.06),0 18px 40px -24px rgba(28,28,30,.35)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--wcard:#1C1C1A;--wink:#F2F1EC;--wgrey:rgba(242,241,236,.6);--whair:rgba(242,241,236,.12);--wout:rgba(242,241,236,.2);--woutbg:rgba(242,241,236,.06);--wbtn:#F2F1EC;--wbtnf:#141413;--wa:.34;--wt:.26;--ag:#5BD3A0;--ao:#FFB766;--ab:#7FB0FF;--ap:#B79BFF;--wsh:0 0 0 1px rgba(255,255,255,.06)}}
:root[data-theme=dark]{--wcard:#1C1C1A;--wink:#F2F1EC;--wgrey:rgba(242,241,236,.6);--whair:rgba(242,241,236,.12);--wout:rgba(242,241,236,.2);--woutbg:rgba(242,241,236,.06);--wbtn:#F2F1EC;--wbtnf:#141413;--wa:.34;--wt:.26;--ag:#5BD3A0;--ao:#FFB766;--ab:#7FB0FF;--ap:#B79BFF;--wsh:0 0 0 1px rgba(255,255,255,.06)}
.wsec{position:relative}
.wsec .wst{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-bottom:104px}
.wsec .wst .dh{padding-top:48px}
.wfit{position:relative;flex:none}
.wfit>*{position:absolute;left:0;top:0;transform-origin:0 0}
.w42,.w22{position:relative;box-sizing:border-box;border-radius:26px;background:radial-gradient(130% 120% at 100% 0%,rgba(var(--w),var(--wa)) 0%,rgba(var(--w),0) 62%),var(--wcard);color:var(--wink);display:flex;flex-direction:column;text-align:left;font-size:13px;line-height:18px;box-shadow:var(--wsh);transition:background .6s}
.w42{width:350px;height:170px;padding:14px 14px 12px 16px}
.wE{position:absolute;right:16px;top:14px;font-size:28px;transition:transform .6s cubic-bezier(.3,1.5,.5,1)}
.wT{margin-top:4px;max-width:262px;font-size:22px;line-height:28px;font-weight:600;letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wS{max-width:262px;color:var(--wgrey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wsp{flex-grow:1}
.wC{display:flex;gap:6px}
.wb{height:34px;min-width:34px;padding:0 14px 0 11px;box-sizing:border-box;border-radius:17px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;font-weight:600;white-space:nowrap;flex:none}
.wb.p{background:var(--wbtn);color:var(--wbtnf)}
.wb.s{border:1px solid var(--wout);background:var(--woutbg);color:var(--wink)}
.wb.i{padding:0}
.wb img{width:18px;height:18px;border-radius:5px;flex:none}
.wb.p img{box-shadow:0 0 0 1px rgba(255,255,255,.28)}
.wb.s img{box-shadow:0 0 0 1px var(--whair)}
.wb svg{width:14px;height:14px;flex:none}
.wtr{position:relative;height:26px;margin-top:6px;max-width:262px}
.wtr i{position:absolute;left:0;right:0;top:16px;height:4px;border-radius:2px;background:var(--whair)}
.wtr b{position:absolute;left:0;top:16px;height:4px;border-radius:2px;background:#F2992E;transition:width 1.6s cubic-bezier(.4,0,.2,1)}
.wtr span{position:absolute;top:0;margin-left:-8px;font-size:16px;transition:left 1.6s cubic-bezier(.4,0,.2,1);animation:ride .5s ease-in-out infinite}
@keyframes ride{50%{transform:translateY(-1.5px) rotate(-3deg)}}
.w44{width:350px;height:418px;box-sizing:border-box;padding:10px;border-radius:26px;background:var(--wcard);color:var(--wink);display:flex;flex-direction:column;text-align:left;font-size:13px;line-height:18px;box-shadow:var(--wsh)}
.w44 .w42{width:auto;height:150px;padding:12px 14px;border-radius:20px;box-shadow:none}
.w44 .w42 .wT{margin-top:0}
.wrs{padding:4px 4px 0}
.wr{height:52px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--whair);transition:opacity .4s}
.wr:last-child{border-bottom-color:transparent}
.wr .t{width:40px;flex:none;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.wr .c{width:34px;height:34px;flex:none;border-radius:17px;background:rgba(var(--w),var(--wt));display:grid;place-items:center;font-size:18px}
.wr .x{flex:1;min-width:0}
.wr .x b,.wr .x small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wr .x b{font-size:15px;font-weight:600}
.wr .x small{font-size:12px;color:var(--wgrey)}
.wr .wb{height:30px;padding:0 11px 0 9px;gap:5px}
.wr .wb img{width:16px;height:16px;border-radius:4px}
.wr.dn{opacity:.5}
.wr.dn .x b{text-decoration:line-through;text-decoration-thickness:1.5px}
.wft{margin-top:auto;display:flex;align-items:center;gap:8px;padding:0 4px}
.wft p{flex:1;min-width:0;margin:0;color:var(--wgrey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wmic{width:36px;height:36px;flex:none;border-radius:18px;background:var(--wbtn);color:var(--wbtnf);display:grid;place-items:center;transition:opacity .3s,box-shadow .3s}
.wmic svg{width:15px;height:15px}
.wmic.gone{background:transparent;box-shadow:inset 0 0 0 1.5px var(--whair)}
.wmic.gone svg{opacity:0}
.wmic.hid{visibility:hidden}
.w22{width:165px;height:165px;padding:14px}
.w22 .e{font-size:28px}
.w22 .n{font-size:22px;line-height:28px;font-weight:700;letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.w22 .l{font-size:13px;font-weight:600}
.w22 .nm{margin-top:8px;font-size:15px;font-weight:600}
.w22 .wb{height:36px;border-radius:18px}
.w22 .ring{width:76px;height:76px;border-radius:38px;display:grid;place-items:center;align-self:center}
.w22 .ring>span{width:64px;height:64px;border-radius:32px;background:var(--wcard);display:grid;place-items:center;font-size:28px}
.w22 .lg{display:flex;align-items:center;gap:5px;color:var(--wgrey)}
.w22 .lg img{width:14px;height:14px;border-radius:4px}
.wg2{display:grid;grid-template-columns:repeat(2,165px);gap:20px}
/* what changed, for a moment */
.chg{animation:chg 1.6s ease-out}
@keyframes chg{0%,30%{box-shadow:0 0 0 3px rgba(var(--gr),.45)}100%{box-shadow:0 0 0 3px rgba(var(--gr),0)}}
.wr.new{animation:rowin .7s cubic-bezier(.2,.9,.1,1)}
@keyframes rowin{from{opacity:0;transform:translateY(10px)}}

/* A · on the phone, through the day */
.wsec.A .stage{position:sticky;top:0}
.wa{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"h p l";align-items:center;gap:clamp(36px,4.5vw,64px);padding-block:clamp(20px,4vh,44px)}
.wa>.wh{grid-area:h}.wa>.phw{grid-area:p}.wa>.ml{grid-area:l}
.wa .phw{position:relative;min-height:0}
.wa .szb{position:absolute;left:50%;top:100%;margin-top:16px;transform:translateX(-50%)}
.phb{position:relative;flex:none}
.wa .ph{left:0;top:0;transform:scale(var(--k));transform-origin:0 0}
.wa .dh{padding-top:0;text-align:left}
.wa .dh .d{margin-left:0}
.ml{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;width:100%;max-width:380px;justify-self:end}
@media (max-width:1100px) and (min-width:721px){.wa{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h p" "l p";align-content:center;row-gap:26px}.wa>.wh{align-self:end}.wa>.ml{align-self:start;justify-self:start}}
.ml li{display:flex;align-items:center;gap:10px;height:40px;padding:0 14px;border-radius:12px;font-size:14px;color:var(--sub);transition:color .3s,background .3s}
.ml li b{width:66px;font-size:12.5px;font-weight:500;font-variant-numeric:tabular-nums}
.ml li .em{opacity:.45;transition:opacity .3s}
.ml li.on{background:var(--surf);color:var(--fg)}
.ml li.on .em{opacity:1}
.wcap{display:none}
.ph{--k:1;position:absolute;left:50%;top:50%;width:330px;height:660px;padding:9px;border-radius:50px;background:#161513;transform:translate(-50%,-50%) scale(var(--k));box-shadow:0 0 0 1px var(--line),0 40px 80px -40px var(--shade)}
.phs{position:relative;height:100%;border-radius:41px;overflow:hidden;background:linear-gradient(180deg,rgb(var(--sky)) 0%,rgba(var(--sky),.6) 50%,rgba(var(--sky),.3) 100%),#2a2724}
.psb{display:flex;justify-content:space-between;align-items:center;padding:16px 28px 0;font-size:13px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.psb i{display:inline-block;width:5px;height:5px;margin-left:4px;border-radius:50%;background:#fff;opacity:.85}
.pgl{margin:0;padding:22px 24px 0;font-size:12.5px;font-weight:500;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.25)}
.pwg{margin:12px 14px 0}
.pap{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 0;padding:20px 15px 0}
.pap span{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10.5px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.3)}
.pap img{width:46px;height:46px;border-radius:14px;box-shadow:0 2px 8px -2px rgba(0,0,0,.25)}

/* the size she picks, and what it's for */
.szb{display:flex;justify-content:center;flex:none}
.szs{display:flex;gap:6px}
.szs button{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 10px;border-radius:999px;background:var(--surf);color:var(--sub);font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;transition:background .3s,color .3s}
.szs button[aria-pressed=true]{background:var(--btn);color:var(--btnf)}
.szs button:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.gl{display:grid;grid-template-columns:repeat(4,4px);gap:1.5px}
.gl u{width:4px;height:4px;border-radius:1px;background:currentColor;opacity:.3}
.gl u.f{opacity:1}
/* the mark, while it becomes the widget's button */
.fly.pill{background:var(--wbtn);color:var(--wbtnf);transition:background .5s,color .5s}
.wb.slot{background:transparent!important;box-shadow:inset 0 0 0 1.5px var(--wout)}
.wb.slot>*{opacity:var(--co,0)}
.ph[data-s="44"] .pap span:nth-child(n+9){display:none}



/* it keeps track: what was said sits under the mark's slot */
.wsay{display:flex;flex-direction:column;align-items:center;gap:12px}
.wms{width:48px;height:48px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line)}
.tx2{margin:0;min-height:1.36em;max-width:26em;font-size:clamp(19px,1.8vw,24px);line-height:1.36;font-weight:430;letter-spacing:-.02em;text-align:center;text-wrap:balance}
@media (max-width:720px){
  .tx2{min-height:2.72em;font-size:17px}
  .wms{width:44px;height:44px}
}
@media (max-width:900px){.links{display:none}}
@media (max-height:780px) and (min-width:721px){
  .dh{padding-top:52px}.dh .d{margin-top:10px}.tally{margin-top:12px}
  h1{--h:clamp(36px,4vw,54px)}
  .eb{margin-bottom:16px}.sub{margin-top:14px}.act{margin-top:22px}
  .cv{margin-top:26px}
  .hc{padding-bottom:24px}
}
@media (max-width:720px){
  :root{--gut:16px}
  .nav{height:56px;gap:12px}
  .brand .gkw{font-size:20px}
  .nav .thm{margin-right:0}
  .hc{padding-bottom:20px}
  h1{--h:clamp(32px,9.4vw,42px)}
  .eb{font-size:12.5px;height:30px;margin-bottom:16px}
  .eb .sep,.eb .lk{display:none}
  .sub{font-size:15.5px;margin-top:14px}
  .act{margin-top:22px;gap:8px}
  .btn1,.btn2{padding:0 18px;font-size:14.5px}
  .mbr{display:inline}
  .cv{margin-top:28px}
  .cv .tx{font-size:20px;height:82px}
  .rs{font-size:14px;min-height:72px;align-content:center}
  .cta{margin-left:0}
  .hint{font-size:12.5px}
  .dh{padding-top:60px}
  .dh .d{font-size:15px}
  .tally{gap:14px;font-size:12.5px}
  .mk.on{width:24px;height:24px;margin:0 0 -12px -12px}.mk .em{font-size:11.5px}
  .wa{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);grid-template-areas:"h" "p";align-items:stretch;gap:8px;padding-block:52px 16px}
  .rli{inset:0 20px}
  .wa .phw{display:flex;flex-direction:column;align-items:center;gap:12px;height:100%}
  .wa .szb{position:static;margin:0;transform:none}
  .szs button{height:34px;padding:0 13px 0 10px}
  .wa .dh{text-align:center}
  .wa .dh .d{margin-inline:auto}
  .ml{display:none}
  .wcap{display:flex;justify-content:center;gap:6px;margin:14px 0 0;font-size:14px;font-weight:500}
  .wcap b{font-weight:500;color:var(--sub);font-variant-numeric:tabular-nums}
  .ph{height:568px}
  .pap span:nth-child(n+9){display:none}
  .ph[data-s="44"] .pap span:nth-child(n+5){display:none}
}
/* D · no board: what it keeps is written back as one sentence, with the live bits set inline */
.more.D{padding:0}
.more.D .stage{justify-content:center}
.more.D .dh{padding-top:clamp(28px,5vh,56px)}
.pz{flex:none;display:flex;flex-direction:column;align-items:center;gap:clamp(18px,3.6vh,40px);padding-block:clamp(16px,3vh,32px) clamp(24px,5vh,56px)}
.para{margin:0;max-width:20.5em;font-size:clamp(24px,2.8vw,40px);line-height:1.34;font-weight:450;letter-spacing:-.035em;text-align:center;text-wrap:balance}
.q{opacity:0;filter:blur(8px);transition:opacity .5s,filter .6s}
.q.on{opacity:1;filter:none}
.para.dim .q.on{opacity:.28;filter:none}
.ch{display:inline-flex;align-items:center;gap:.4em;height:1.8em;padding:0 .62em;border-radius:.62em;background:var(--surf);font-size:.54em;font-weight:520;letter-spacing:-.012em;line-height:1;white-space:nowrap;vertical-align:.2em;transform:scale(.55) translateY(.3em);transition:transform .6s cubic-bezier(.3,1.5,.5,1),background .5s,color .5s,box-shadow .5s}
.q.on .ch,.q.on.ch{transform:none}
.ch img{width:1.2em;height:1.2em;border-radius:.3em}
.ch .ck{width:.95em;height:.95em}.ch .ck svg{width:.55em;height:.55em}
.ch .ck{transform:scale(0);transition:transform .5s cubic-bezier(.3,1.6,.5,1) calc(var(--j,0)*180ms + .5s)}
.ch.g{background:rgba(var(--or),.15)}.ch.m{background:rgba(var(--gr),.15)}.ch.f{background:rgba(var(--bl),.13)}
.q.on .ck{transform:none}
.ltk{gap:.2em}
.ltk i{width:.24em;height:.85em;border-radius:.12em;background:var(--mute);opacity:.6;transition:background .3s calc(var(--j)*140ms + .5s),opacity .3s calc(var(--j)*140ms + .5s)}
.q.on .ltk i.f{background:rgb(var(--or));opacity:1}
.ltk small{margin-left:.35em;font-size:1em;font-weight:600;font-variant-numeric:tabular-nums}
.spk{gap:.16em;align-items:flex-end;padding-block:.42em}
.spk i{width:.34em;height:var(--h);border-radius:.12em;background:rgb(var(--gr));transform:scaleY(0);transform-origin:50% 100%;transition:transform .6s cubic-bezier(.2,.9,.2,1) calc(var(--j)*90ms + .4s)}
.spk i.no{height:.18em;background:var(--mute)}
.q.on .spk i{transform:none}
.lamt{position:relative;display:inline-block;font-weight:600;font-variant-numeric:tabular-nums}
.lamt .lgh{visibility:hidden}.lamt .cn{position:absolute;right:0;top:0}
.ch.lwa{transition-delay:0s}
.para.go .ch.lwa{background:var(--btn);color:var(--btnf);box-shadow:0 10px 24px -12px var(--shade)}
@media (max-width:720px){
  .more.D .dh{padding-top:12px}
  .more.D .dh h2{font-size:28px}
  .more.D .dh .d{font-size:15px}
  .para{font-size:clamp(21px,6vw,25px);line-height:1.4}
  .ch{font-size:.62em}
}
@media (max-width:720px) and (max-height:700px){.more.D .dh .d{display:none}.para{font-size:21px}}
/* apps: the ones it hands off to float round the edges; the one it opens comes to the middle, filled in */
.apps{position:relative}
.atl{position:absolute;inset:0;pointer-events:none;z-index:0}
.at{position:absolute;left:0;top:0;border-radius:24%;box-shadow:0 0 0 1px var(--line),0 14px 30px -16px var(--shade);will-change:transform,opacity;opacity:0}
.at img{width:100%;height:100%;border-radius:inherit}
.apps .stage{justify-content:center;align-items:center}
.ac{position:relative;z-index:1;width:min(600px,100% - 2*var(--gut));display:flex;flex-direction:column;align-items:center;gap:clamp(18px,3.4vh,34px)}
.apps .dh{padding-top:0}
.ho{display:flex;flex-direction:column;align-items:center;gap:14px;min-height:122px}
.ho .hr{display:flex;align-items:center;gap:14px;max-width:100%}
.hs{flex:none;width:60px;height:60px}
.hx{min-width:0;opacity:0;transform:translateY(8px);transition:opacity .45s,transform .6s cubic-bezier(.2,.8,.2,1)}
.hx small{display:block;font-size:13px;color:var(--sub)}
.hx p{margin:2px 0 0;font-size:17px;font-weight:520;letter-spacing:-.015em;line-height:1.3;text-wrap:balance}
.hb{display:inline-flex;align-items:center;height:42px;padding:0 20px;border-radius:21px;background:var(--btn);color:var(--btnf);font-size:14.5px;font-weight:550;white-space:nowrap;opacity:0;transform:scale(.8);transition:opacity .35s,transform .55s cubic-bezier(.3,1.5,.5,1)}
.ho.on .hx{opacity:1;transform:none}
.ho.on .hb{opacity:1;transform:none;transition-delay:.35s}
@media (max-width:720px){
  .apps .dh h2{font-size:28px}
  .apps .dh .d{font-size:15px}
  .hs{width:52px;height:52px}
  .hx p{font-size:15.5px}
  .ho{min-height:116px;gap:12px}
}
@media (max-width:720px) and (max-height:700px){.apps .dh .d{display:none}}
/* the end: the mark comes back into a headline, then becomes the o in the name */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fin{min-height:100svh;display:flex;align-items:center;padding-block:clamp(80px,14vh,160px) clamp(60px,10vh,120px)}
.fc{display:flex;flex-direction:column;align-items:center;text-align:center}
.big{margin:0;font-size:clamp(64px,11.5vw,184px);font-weight:500;letter-spacing:-.06em;line-height:.95}
.big .ln{display:inline-block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em;vertical-align:bottom}
.big .ln>span{display:inline-block;transform:translateY(105%);transition:transform 1s cubic-bezier(.2,.9,.1,1)}
.big .ln:nth-child(2)>span{transition-delay:.1s}
.fin.in .big .ln>span{transform:none}
.hs2{display:inline-block;width:.74em;height:.74em;margin-left:.12em;border-radius:50%;vertical-align:-.02em;box-shadow:inset 0 0 0 2px var(--line)}
.fin .d{margin:clamp(22px,3.5vh,34px) 0 0;max-width:30em;font-size:17.5px;line-height:1.5;color:var(--sub);text-wrap:balance}
.rv1{opacity:0;transform:translateY(14px);transition:opacity .7s .35s,transform .9s cubic-bezier(.2,.8,.2,1) .35s}
.fin.in .rv1{opacity:1;transform:none}
.sg{display:flex;align-items:center;gap:6px;width:min(470px,100%);height:58px;margin-top:28px;padding:6px;border-radius:29px;background:var(--card);box-shadow:0 0 0 1px var(--line),0 20px 44px -26px var(--shade);transition-delay:.45s}
.sg:focus-within{box-shadow:0 0 0 1.5px var(--fg),0 20px 44px -26px var(--shade)}
.sg input{flex:1;min-width:0;height:100%;padding:0 0 0 18px;border:0;background:transparent;color:var(--fg);font:inherit;font-size:16px;outline:none}
.sg input::placeholder{color:var(--mute)}
.sg .btn1{height:46px;flex:none;border:0;cursor:pointer}
.sg.bad{animation:nope .4s}
@keyframes nope{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.ok{min-height:22px;margin:12px 0 0;font-size:14px;color:var(--sub)}
.ok b{color:var(--fg);font-weight:550}
.tr{list-style:none;margin:clamp(36px,7vh,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;width:100%;text-align:left}
.tr li{display:flex;flex-direction:column;gap:6px;opacity:0;transform:translateY(16px);transition:opacity .6s,transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(.55s + var(--j)*.09s)}
.fin.in .tr li{opacity:1;transform:none}
.tr .em{font-size:24px;margin-bottom:6px}
.tr b{font-size:15.5px;font-weight:550;letter-spacing:-.01em}
.tr small{font-size:14px;line-height:1.45;color:var(--sub)}
.fine{margin:32px 0 0;font-size:13px;color:var(--sub);max-width:46em;text-wrap:balance;transition-delay:.9s}
/* footer */
.ft{position:relative;overflow:hidden;padding-top:clamp(56px,9vh,96px);border-top:1px solid var(--line)}
.ftop{display:flex;justify-content:space-between;align-items:flex-start;gap:40px}
.ask{margin:0;max-width:14em;font-size:clamp(24px,2.6vw,36px);line-height:1.15;font-weight:480;letter-spacing:-.03em;text-wrap:balance}
.ask .now{font-weight:480;font-variant-numeric:tabular-nums}
.ask .say{color:var(--sub)}
.fl{display:flex;gap:clamp(40px,7vw,96px);font-size:14.5px}
.fl div{display:flex;flex-direction:column;gap:10px}
.fl small{font-size:12.5px;color:var(--sub);margin-bottom:4px}
.fl a:hover{color:var(--sub)}
.wm{margin-top:clamp(48px,8vh,96px);display:flex;justify-content:center;font-weight:560;letter-spacing:-.065em;line-height:.8;white-space:nowrap;user-select:none}
.wl{flex:none;display:inline-flex;align-items:baseline;overflow:hidden;padding:.02em .04em .12em}
.wc{flex:none;display:inline-block;transform:translateY(calc(var(--r,1)*110%))}
/* no placeholder: a round gap the size of the mic; when it lands, the gap opens to the listening oval and the letters make room */
.wo{width:.56em;height:.56em;margin:0 .04em 0 .12em;border-radius:.28em;transition:width .7s cubic-bezier(.65,0,.35,1)}
.wm.on .wo,.wm.fit .wo{width:calc(.56em * 1.6 / .92)}
.wm.fit .wo{transition:none}
.fbot{display:flex;justify-content:space-between;gap:16px;padding-block:6px 28px;font-size:13px;color:var(--sub)}
.by{color:var(--fg);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;transition:text-decoration-color .2s}
.by:hover,.by:focus-visible{text-decoration-color:currentColor}
@media (max-width:900px){.tr{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 22px}}
@media (max-width:720px){
  .fin .d{font-size:16px}
  .sg{height:auto;flex-direction:column;align-items:stretch;padding:0;gap:10px;background:transparent;box-shadow:none}
  .sg:focus-within{box-shadow:none}
  .sg input{flex:none;height:52px;padding:0 20px;border-radius:26px;background:var(--card);box-shadow:0 0 0 1px var(--line)}
  .sg input:focus{box-shadow:0 0 0 1.5px var(--fg)}
  .sg .btn1{height:52px;justify-content:center}
  .tr .em{font-size:22px}
  .tr b{font-size:14.5px}.tr small{font-size:13px}
  .ftop{flex-direction:column;gap:36px}
  .fl{gap:56px}
}
/* home in the name: a letter now, so no shadow, a slimmer oval, and bars that keep moving on their own */
.fly.home{box-shadow:none}
.fly.home.listen{width:1.6em}
.fly.home .i-bars{gap:.09em}
.fly.home .i-bars i{width:.09em;border-radius:.045em;animation:lv 1.1s ease-in-out infinite}
.fly.home .i-bars i:nth-child(1){animation-duration:1.2s;animation-delay:-.3s}
.fly.home .i-bars i:nth-child(2){animation-duration:.95s;animation-delay:-.6s}
.fly.home .i-bars i:nth-child(3){animation-duration:1.05s}
.fly.home .i-bars i:nth-child(4){animation-duration:.9s;animation-delay:-.45s}
.fly.home .i-bars i:nth-child(5){animation-duration:1.25s;animation-delay:-.8s}
@keyframes lv{0%,100%{height:.14em}50%{height:.42em}}
/* the wordmark: the o is the mark, listening */
.gkw{display:inline-flex;align-items:baseline;font-weight:560;letter-spacing:-.045em;line-height:1;white-space:nowrap}
.lo{position:relative;flex:none;display:inline-block;width:calc(.56em * 1.6 / .92);height:.56em;margin:0 .02em 0 .075em;border-radius:.28em;background:currentColor}
.lo>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.075em}
.lo i{display:block;width:max(1.3px,.05em);height:calc(var(--h) * 1em);border-radius:.03em;background:var(--bg);transition:height .5s cubic-bezier(.3,1.4,.5,1)}
.lo.live i{animation:lv 1.1s ease-in-out infinite}
.lo.live i:nth-child(1){animation-duration:1.2s;animation-delay:-.3s}
.lo.live i:nth-child(2){animation-duration:.95s;animation-delay:-.6s}
.lo.live i:nth-child(3){animation-duration:1.05s}
.lo.live i:nth-child(4){animation-duration:.9s;animation-delay:-.45s}
.lo.live i:nth-child(5){animation-duration:1.25s;animation-delay:-.8s}
.brand .gkw{font-size:22px}
.brand .lo>span{gap:1.7px}.brand .lo i{width:1.2px;height:calc(var(--h) * .8em)}
.brand:hover .lo i{animation:lv 1.1s ease-in-out infinite}
.brand:hover .lo i:nth-child(2n){animation-duration:.9s;animation-delay:-.4s}
html.intro-on .brand{opacity:0}
/* dark mode, next to early access */
.thm{margin-left:auto;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:var(--fg);box-shadow:inset 0 0 0 1px var(--line);transition:background .3s}
.thm:hover{background:var(--surf)}
.thm:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.thm svg{width:17px;height:17px}
.thm .mn{display:var(--tmoon)}.thm .sn{display:var(--tsun)}
.thm+.nbtn{margin-left:0}
.nav .thm{margin-right:-26px}
@media (max-width:720px){.nav .thm{margin-right:0}}
/* welcome: the name rises, the o turns into the mark and listens, then it all goes up to the corner */
.intro{position:fixed;inset:0;z-index:200;display:grid;place-items:center;pointer-events:auto;cursor:pointer}
.intro::before{content:"";position:absolute;inset:0;background:var(--bg);transition:opacity .8s cubic-bezier(.4,0,.2,1)}
.intro.go::before{opacity:0}
.intro .gkw{position:relative;font-size:clamp(54px,13.5vw,200px);overflow:hidden;padding:0 .04em .24em;margin-bottom:-.24em;transform-origin:0 0;transition:transform 1s cubic-bezier(.7,0,.2,1)}
.intro .il{display:inline-block;transform:translateY(120%);transition:transform .9s cubic-bezier(.2,.9,.1,1) calc(var(--j) * 55ms)}
.intro.up .il{transform:none}
.intro.go .gkw{overflow:visible}
.intro .lo{width:.56em;transform:scale(0);transition:transform .7s cubic-bezier(.3,1.5,.5,1) .35s,width .7s cubic-bezier(.65,0,.35,1)}
.intro.up .lo{transform:none}
.intro.wide .lo{width:calc(.56em * 1.6 / .92)}
.intro .lo i{opacity:0;transition:opacity .4s,height .5s cubic-bezier(.3,1.4,.5,1)}
.intro.wide .lo i{opacity:1}
.intro.fade{opacity:0;transition:opacity .35s}
/* the day ruler: a sky band with big stops, each ticked when its moment is done */
.day.rC .mk{background:var(--bg);box-shadow:0 0 0 1px var(--line)}
.day.rC .mk .em{opacity:.4;transform:scale(.85);filter:grayscale(1)}
.day.rC .mk.on{background:var(--card);box-shadow:0 0 0 1px var(--line),0 10px 22px -12px var(--shade)}
.day.rC .mk.on .em{opacity:1;transform:none;filter:none}
.day.rC .hl{font-size:12.5px;bottom:4px}
.day.rC .ptag{bottom:94px;font-size:14px}
.day.rC .trk{height:10px;bottom:47px;border-radius:5px;background:none}
.day.rC .trk::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--skyg);opacity:.2}
.day.rC .mk{width:52px;height:52px;margin:0 0 -26px -26px}
.day.rC .mk .em{font-size:26px}
.day.rC .mk::after{content:"";position:absolute;right:-1px;bottom:-1px;width:16px;height:16px;border-radius:50%;background:rgb(var(--gr)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/9px no-repeat;box-shadow:0 0 0 2px var(--bg);transform:scale(0);transition:transform .45s cubic-bezier(.3,1.6,.5,1) .15s}
.day.rC .mk.on::after{transform:none}
@media (max-width:720px){
  .day.rC .mk,.day.rC .mk.on{width:30px;height:30px;margin:0 0 -15px -15px}
  .day.rC .mk .em{font-size:15px}
  .day.rC .trk{height:6px;bottom:49px}
  .day.rC .mk::after{width:12px;height:12px;background-size:7px;right:-3px;bottom:-3px}
  .day.rC .ptag{bottom:84px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}