@font-face{font-family:"IBM Plex Sans";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Condensed";font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/ibm-plex-sans-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}
:root{
  color-scheme:light;
  --page:#f3f7f5;--raised:#fbfefd;--ink:#1e2120;--soft:#585f5c;--line:rgba(30,33,32,.14);
  --acc:#1d6b50;--acct:#026b4d;--mint:#cff6e4;--neon:#3dffb0;--deep:#06241b;--night:#0f1110;--paper:#f2f6f4;--dim:#a5afab;--red:#c50d28;
  --say:"IBM Plex Sans Condensed","Arial Narrow",system-ui,sans-serif;--ppl:"IBM Plex Sans",system-ui,sans-serif;--ai:"IBM Plex Mono",ui-monospace,monospace;
  --out:cubic-bezier(.16,1,.3,1);--ease:cubic-bezier(.2,0,.38,.9);
  --gl:max(16px,env(safe-area-inset-left,0px));--gr:max(16px,env(safe-area-inset-right,0px));
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;background:var(--page);color:var(--ink);font-family:var(--ppl);-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
h1,h2,p{margin:0;font-weight:inherit}
:focus-visible{outline:2px solid var(--neon);outline-offset:2px;box-shadow:0 0 0 2px var(--night)}
/* Shared words and controls */
.say{font-family:var(--say);font-weight:600;letter-spacing:-.012em;line-height:1.02;text-wrap:balance}
.fld{height:48px;width:100%;min-width:0;border-radius:8px;padding:0 14px;font-size:16px;border:1px solid var(--fb);background:var(--ff);color:var(--ft);outline-offset:1px}
.fld::placeholder{color:var(--fp)}
.go{height:48px;padding:0 20px;border-radius:8px;border:0;background:var(--gob);color:var(--got);font-weight:600;font-size:16px;cursor:pointer;white-space:nowrap;transition:transform .18s var(--out)}
.go:hover{transform:translateY(-1px)}.go:active{transform:translateY(1px)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{min-height:40px;padding:0 13px;border-radius:20px;border:1px solid var(--fb);background:transparent;color:var(--ft);font-size:14px;cursor:pointer;transition:background .16s,color .16s}
.chip:hover{background:var(--chh)}
.chip[aria-pressed=true]{background:var(--gob);color:var(--got);border-color:transparent}
.mark{display:block;width:auto}
.mark svg{display:block;height:100%;width:auto}
.small{font-size:13px;line-height:1.4}

/* 2 Too loud */
#s2{--wl:var(--gl);--wr:var(--gr);background:var(--page);--fb:var(--line);--ff:var(--raised);--ft:var(--ink);--fp:#7a827f;--gob:var(--acc);--got:var(--raised);--chh:var(--mint);overflow:hidden}
@media (min-width:900px){#s2{--wl:6vw;--wr:6vw}}
/* Pressure: the room warms from the corner the noise comes from */
.l-heat{position:absolute;inset:0;background:radial-gradient(110% 90% at 100% 0%,rgba(197,13,40,.2),transparent 62%);opacity:var(--h,0);transition:opacity .5s linear;pointer-events:none}
/* The light comes up further once there is something to look at */
#s2.q{background:var(--deep);color:var(--paper);--fb:rgba(207,246,228,.3);--ff:rgba(207,246,228,.07);--ft:var(--paper);--fp:#8fb4a5;--gob:var(--neon);--got:var(--deep);--chh:rgba(61,255,176,.16)}
#s2.q .l-heat{display:none}
#s2::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 72% 42%,rgba(29,107,80,.62),transparent 72%);opacity:0;transition:opacity 2.2s var(--ease);pointer-events:none}
#s2.lit::before{opacity:1}
@media (max-width:899px){#s2::before{background:radial-gradient(110% 46% at 50% 26%,rgba(29,107,80,.62),transparent 72%)}}
/* The browser's own tab strip */
.l-tabs{position:absolute;left:0;right:0;top:0;height:34px;display:flex;align-items:flex-end;gap:1px;padding-left:var(--gl);padding-right:var(--gr);background:rgba(30,33,32,.08);overflow:hidden;z-index:3}
.l-tab{flex:0 1 190px;min-width:0;height:28px;display:flex;align-items:center;gap:6px;padding-left:8px;background:rgba(30,33,32,.06);border-radius:8px 8px 0 0;font-size:12px;color:var(--soft);overflow:hidden;white-space:nowrap;animation:ltab .22s var(--out)}
@keyframes ltab{from{flex-basis:0;opacity:0}}
.l-tab.on{background:var(--page);color:var(--ink)}
#s2.q .l-tabs{background:rgba(207,246,228,.06)}
#s2.q .l-tab.on{background:var(--deep);color:var(--paper)}
#s2.q .l-tab .mark{color:var(--neon)}
.l-tt{overflow:hidden}
.l-ic{flex:none;display:block;width:16px;height:16px}
.l-ic svg{display:block;width:100%;height:100%}
.l-ic .mark{height:100%;color:var(--acc)}
/* The voice: full size when it starts, squeezed smaller with every failed try, full size again in the quiet */
.l-calm{position:absolute;inset:34px 0 0;overflow-y:auto;display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(14px,3vh,28px);padding:16px var(--wr) clamp(66px,11vh,92px) var(--wl)}
.l-left{display:grid;gap:clamp(10px,1.9vh,18px);min-width:0;justify-items:start}
.l-right{display:none;min-width:0}
.l-h{--v:1;font-size:max(20px,calc(clamp(42px,7.4vw,112px)*var(--v)));line-height:1;max-width:11.5em;margin:0;letter-spacing:-.018em}
.l-h.small{color:var(--soft)}
.l-ln{display:block}
.l-h.typing::after{content:"";display:inline-block;width:.055em;height:.78em;margin-left:-.12em;background:var(--acc);vertical-align:-.03em;animation:lcar 1s steps(1) infinite}
@keyframes lcar{50%{opacity:0}}
.l-h.rise{animation:lrise 1.1s var(--out)}
@keyframes lrise{from{opacity:0;transform:translateY(10px)}}
#s2.q .l-calm{justify-content:safe center;padding-bottom:clamp(16px,4vh,40px)}
#s2.q .l-right{display:block}
#s2.q .l-left{gap:clamp(14px,3vh,30px)}
#s2.q .l-h{font-size:clamp(48px,5.2vw,92px);min-height:2em;max-width:none}
#s2.done .l-h{font-size:clamp(42px,7.4vw,112px);min-height:0}
#s2.done .l-calm{padding-bottom:clamp(66px,11vh,92px)}
@media (min-width:900px){
  #s2.q .l-calm{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:clamp(32px,6vw,96px);align-items:center;align-content:center}
  #s2.q .l-right{order:2}
}
@media (max-width:899px),(max-height:680px){#s2.q:not(.done) .l-h{font-size:clamp(34px,10.5vw,44px)}}
/* The count: a small dark capsule, the one steady thing in the noise */
.l-count{position:absolute;z-index:4;left:var(--wl);bottom:clamp(18px,3.4vh,30px);display:flex;align-items:center;gap:9px;margin:0;height:32px;padding:0 13px 0 11px;border-radius:16px;background:var(--night);color:var(--paper);font:400 13px var(--ai);opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease),transform .5s var(--out);pointer-events:none;box-shadow:0 10px 26px -12px rgba(6,36,27,.7)}
.l-count.live,.l-count.ok{opacity:1;transform:none}
.l-count i{width:8px;height:8px;border-radius:50%;background:#ff3b56;flex:none}
.l-count.ok{background:rgba(207,246,228,.09);box-shadow:inset 0 0 0 1px rgba(207,246,228,.2)}
.l-count.ok i{background:var(--neon)}
.l-note{color:var(--soft);margin:0;font-size:13px;line-height:1.35}
.l-note:empty{display:none}
#s2.q .l-note{color:#8fb4a5}
/* What's left: one card in the light, the rest tucked in behind it */
.l-card{position:relative;z-index:2;display:flex;gap:13px;padding:clamp(14px,2.2vh,20px) clamp(14px,1.6vw,20px);background:var(--raised);color:var(--ink);border-radius:16px;box-shadow:0 34px 70px -28px rgba(0,0,0,.72),0 0 0 1px rgba(61,255,176,.16);opacity:0;transform:translateY(14px) scale(.985);transition:opacity .9s var(--ease),transform 1.1s var(--out)}
.l-card:empty{display:none}
.l-card.on{opacity:1;transform:none}
.l-card .l-ic{width:26px;height:26px;margin-top:1px}
.l-card .l-hd{font-size:13px;align-items:baseline}
.l-card .l-hd b{display:inline-flex;align-items:center;gap:7px}
.l-card .l-hd b::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px var(--mint);animation:lbreath 2.8s var(--ease) infinite}
@keyframes lbreath{50%{box-shadow:0 0 0 5px var(--mint)}}
.l-card .l-tx p{font-size:clamp(14px,1.25vw,16px);line-height:1.32;margin-top:5px;-webkit-line-clamp:3}
.l-waits{display:grid;justify-items:center;margin:0}
.l-wait{display:flex;justify-content:space-between;gap:12px;box-sizing:border-box;margin:-14px 0 0;padding:24px 15px 10px;border-radius:0 0 14px 14px;font-size:13px;color:#cfe6dc;background:#1b4b3b;box-shadow:inset 0 0 0 1px rgba(207,246,228,.12);opacity:0;transform:translateY(-34px);transition:opacity .7s var(--ease),transform .95s var(--out)}
.l-wait{position:relative}
.l-wait:nth-child(1){width:95%;z-index:1}
.l-wait:nth-child(2){width:89%;background:#133b2e;transition-delay:.12s;color:#a8c7ba}
.l-wait span{font:400 11px/1.6 var(--ai);opacity:.75}
.l-waits.on .l-wait{opacity:1;transform:none}
/* The form holds its place from the start of the quiet, so nothing jumps when it appears */
.l-form{display:none;gap:clamp(7px,1.3vh,10px);width:100%;max-width:560px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .7s var(--ease),transform .9s var(--out)}
#s2.q .l-form{display:grid}
.l-form.on{opacity:1;visibility:visible;transform:none}
.l-form .chip{min-height:34px;font-size:13px;padding:0 11px}
.l-form .chips{margin-top:-2px}
/* The noise: a real notification, many times, older ones sinking out of focus */
.l-stack{position:absolute;inset:34px 0 0;overflow:hidden;pointer-events:none;z-index:2}
.l-t{position:absolute;box-sizing:border-box;font-size:calc(13px*var(--k,1));color:var(--ink)}
.l-t p{margin:0;line-height:1.28}
.l-t .l-ic{flex:none;width:1.35em;height:1.35em}
/* A notification: every app gets the same shell, only the icon and the words differ */
.l-t.l-toast{top:0;display:flex;gap:.8em;align-items:flex-start;padding:.85em .95em;background:var(--raised);border-radius:1.15em;box-shadow:0 18px 34px -18px rgba(6,36,27,.55),0 2px 6px -2px rgba(6,36,27,.14),0 0 0 1px rgba(30,33,32,.08);transform-origin:50% 100%;transition:transform .62s var(--out),opacity .4s var(--ease)}
.l-t.l-toast>*{transition:opacity .3s var(--ease)}
.l-t.l-tuck>*{opacity:0}
.l-t.l-toast .l-ic{width:2.5em;height:2.5em;margin-top:.1em}
.l-nt{flex:1;min-width:0;display:grid;gap:.1em}
.l-nh{display:flex;justify-content:space-between;gap:.6em;font-size:.88em;color:var(--soft)}
.l-nh b{font-weight:500}
.l-sub{font-weight:600}
.l-from{color:var(--soft)}
/* A window: its own title bar, opening over whatever you were doing */
.l-t.l-win{border-radius:.7em;overflow:hidden;background:var(--raised);box-shadow:0 30px 60px -28px rgba(6,36,27,.7),0 0 0 1px rgba(30,33,32,.14);animation:lwin .42s var(--out);transition:box-shadow .4s var(--ease)}
@keyframes lwin{from{opacity:0;transform:translateY(10px) scale(.975)}}
.l-t.l-back{box-shadow:0 12px 26px -20px rgba(6,36,27,.5),0 0 0 1px rgba(30,33,32,.14)}
.l-bar{display:flex;align-items:center;gap:.5em;padding:.5em .8em;font-size:.92em;background:rgba(30,33,32,.06);white-space:nowrap}
.l-bar i{flex:none;width:.62em;height:.62em;border-radius:50%;background:rgba(30,33,32,.2);margin-right:-.15em}
.l-bar .l-ic,.l-bar i:nth-child(3)+b{margin-left:.6em}
.l-bar b{font-weight:600}
.l-bar span:last-child:not(.l-ic){margin-left:auto;font:400 .92em var(--ai);color:var(--soft);overflow:hidden;text-overflow:ellipsis}
.l-wb{display:grid;gap:.4em;padding:.75em .95em .9em}
.l-cmd{font-family:var(--ai);font-size:.94em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.l-t.l-term{background:var(--night);color:var(--paper);box-shadow:0 30px 60px -24px rgba(6,36,27,.85),0 0 0 1px rgba(242,246,244,.14)}
.l-t.l-term .l-wb{font-family:var(--ai);font-size:.94em}
.l-t.l-term .l-cmd{color:var(--dim)}
.l-t.l-term .l-bar,.l-t.l-edit .l-bar{background:rgba(242,246,244,.07)}
.l-t.l-term .l-bar i,.l-t.l-edit .l-bar i{background:rgba(242,246,244,.26)}
.l-t.l-term .l-bar span:last-child,.l-t.l-edit .l-bar span:last-child{color:var(--dim)}
.l-opts{list-style:none;margin:.1em 0 0;padding:0;color:var(--dim);font-size:.94em;line-height:1.36;display:grid;gap:.12em}
.l-opts li{position:relative;padding-left:1.25em}
.l-opts .l-on{color:var(--neon)}
.l-opts .l-on::before{content:"❯";position:absolute;left:0}
.l-t.l-edit{background:#24262b;color:var(--paper);box-shadow:0 30px 60px -24px rgba(6,36,27,.85),0 0 0 1px rgba(242,246,244,.12)}
.l-t.l-edit .l-ic{color:var(--night);background:var(--paper);border-radius:.3em;padding:.12em;box-sizing:border-box}
.l-t.l-edit .l-wt{color:var(--dim)}
.l-t.l-edit .l-cmd{background:rgba(242,246,244,.08);padding:.4em .6em;border-radius:.4em}
.l-foot{display:flex;justify-content:flex-end;align-items:center;gap:.4em;margin-top:.1em}
.l-wt{font-size:.88em;margin-right:auto}
.l-btn{justify-self:start;font-size:.88em;font-weight:600;padding:.26em .72em;border-radius:.5em;box-shadow:inset 0 0 0 1px currentColor}
.l-btn.l-run{background:var(--paper);color:var(--night);box-shadow:none}
.l-err::before{content:"";display:inline-block;width:.55em;height:.55em;margin-right:.45em;border-radius:50%;background:var(--red)}
/* The chat: it thinks, then answers */
.l-t.l-chat .l-wb{gap:.45em;font-size:1.04em}
.l-msg{justify-self:start;background:#e6ece9;padding:.5em .85em;border-radius:1.05em 1.05em 1.05em .25em;animation:lmsg .34s var(--out)}
@keyframes lmsg{from{opacity:0;transform:translateY(6px)}}
.l-think{display:flex;gap:.28em;padding:.72em .85em}
.l-think i{width:.42em;height:.42em;border-radius:50%;background:var(--soft);animation:lthink 1s var(--ease) infinite}
.l-think i:nth-child(2){animation-delay:.14s}
.l-think i:nth-child(3){animation-delay:.28s}
@keyframes lthink{50%{opacity:.25;transform:translateY(-2px)}}
.l-tx{min-width:0;flex:1}
.l-hd{display:flex;justify-content:space-between;gap:8px;font-size:12px;line-height:1.3;color:var(--ink)}
.l-hd b{font-weight:600}
.l-hd span{font-family:var(--ai);font-size:11px;color:var(--soft);white-space:nowrap}
.l-tx p{margin:2px 0 0;font-size:13px;line-height:1.25;color:var(--ink);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.l-t.solo{box-shadow:0 26px 50px -22px rgba(0,0,0,.75),0 0 0 1px rgba(61,255,176,.16)}
.l-t.solo .mark{color:var(--acc)}
@media (max-width:380px){#s2 .p3f2{grid-template-columns:minmax(0,1fr)}}

/* The sentence, finished at last */
.l-said{margin:0;max-width:31em;font-size:clamp(16px,1.4vw,21px);line-height:1.38;color:var(--paper);animation:lrise 1.1s var(--out)}

.seo{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#stage{position:fixed;inset:0;overflow:hidden}
.st{position:absolute;inset:0;overflow:hidden;overflow:clip}
.p3f2{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
@media (max-width:380px){.p3f2{grid-template-columns:minmax(0,1fr)}}
.go:disabled{opacity:.6;cursor:default;transform:none}
/* Bots fill every field; people never see this one */
.l-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* Out of the noise, without having to sit through it */
.l-skip{position:absolute;z-index:4;right:var(--wr);bottom:clamp(18px,3.4vh,30px);height:32px;padding:0 12px;border:0;border-radius:16px;background:rgba(30,33,32,.08);color:var(--soft);font-size:13px;cursor:pointer;transition:background .16s,color .16s}
.l-skip:hover{background:rgba(30,33,32,.14);color:var(--ink)}
/* Who is behind this, once it's quiet enough to read it */
.l-site{display:none;flex-wrap:wrap;gap:4px 14px;font-size:12px;line-height:1.4;color:#8fb4a5;opacity:0;transition:opacity .9s var(--ease)}
#s2.q .l-site{display:flex}
.l-site.on{opacity:1}
.l-site a{color:inherit;text-underline-offset:2px}
.l-site a:hover{color:var(--paper)}
/* The quiet room is lit, never flat: light from two corners over a depth that falls away. Grain stops the dark steps banding on big screens. */
#s2{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");--glow:radial-gradient(85% 75% at 88% 6%,rgba(29,107,80,.9),transparent 68%),radial-gradient(60% 55% at 62% 62%,rgba(61,255,176,.07),transparent 72%),radial-gradient(90% 80% at 0% 100%,rgba(29,107,80,.46),transparent 72%),linear-gradient(160deg,color-mix(in oklab,var(--acc) 26%,var(--deep)),var(--deep) 52%,color-mix(in oklab,var(--deep) 88%,#000))}
#s2.q{background:var(--grain),var(--glow)}
#s2::before{inset:-12%}
#s2.lit::before{animation:ldrift 28s ease-in-out infinite alternate}
@keyframes ldrift{to{transform:translate(4%,-3%) scale(1.08)}}
/* The change of room: quiet spreads out from the one Vahi thing that was on screen all along, its tab. Mint leads, the room follows. */
@property --r{syntax:"<length>";inherits:true;initial-value:0px}
.l-tide{--e:24vmax;position:absolute;inset:0;z-index:2;pointer-events:none;animation:ltide 1.75s cubic-bezier(.42,0,.16,1) both}
@keyframes ltide{from{--r:calc(var(--e)*-.7)}to{--r:var(--R)}}
.l-dawn,.l-room{position:absolute;inset:0;display:block}
.l-dawn{background:var(--mint);-webkit-mask-image:radial-gradient(circle at var(--ox) var(--oy),#000 calc(var(--r) - var(--e)*.5),transparent calc(var(--r) + var(--e)*.55));mask-image:radial-gradient(circle at var(--ox) var(--oy),#000 calc(var(--r) - var(--e)*.5),transparent calc(var(--r) + var(--e)*.55))}
.l-room{background:var(--glow);-webkit-mask-image:radial-gradient(circle at var(--ox) var(--oy),#000 calc(var(--r) - var(--e)),transparent var(--r));mask-image:radial-gradient(circle at var(--ox) var(--oy),#000 calc(var(--r) - var(--e)),transparent var(--r))}
.l-tabs,.l-tab.on,.l-ic .mark,.l-count{transition:background 1.1s var(--ease),color 1.1s var(--ease),opacity .35s var(--ease),transform .5s var(--out),box-shadow 1.1s var(--ease)}
#s2.tiding .l-tabs{background:rgba(207,246,228,.06)}
#s2.tiding .l-tab.on{background:var(--deep);color:var(--paper)}
#s2.tiding .l-tab .mark{color:var(--neon)}
/* Words: the voice finds its place again, one word at a time, each one lighting up as it's said */
.l-w{position:relative;opacity:0}
.l-w.on{opacity:1;animation:lw .8s var(--ease) both}
@keyframes lw{from{opacity:0;color:var(--neon)}}
.l-w.cur::after{content:"";position:absolute;left:100%;top:.12em;bottom:.08em;width:max(2px,.05em);margin-left:.08em;background:var(--neon)}
/* The two lines move exactly as the two cards do: one lands, the rest come out from under it and stay back */
.l-m{display:block;overflow:hidden;overflow:clip;padding-bottom:.17em;margin-bottom:-.17em}
.l-in{display:block}
.l-m1 .l-in{animation:lland .95s var(--out) both}
.l-m2 .l-in{color:rgba(242,246,244,.66);animation:lunder .95s var(--out) .4s both}
@keyframes lland{from{transform:translateY(106%)}}
@keyframes lunder{from{transform:translateY(-106%)}}
.l-said{animation:none;text-wrap:pretty}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}}