/* Home: one pinned stage, one camera over a pixel world at night. journey.js drives it. */
.story{position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
/* the app's blue glow: it pools behind whichever room or screen the camera is on. A gradient, not a blur, so it is free to move. */
.glow{position:absolute;left:0;top:0;width:900px;height:900px;margin:-450px 0 0 -450px;border-radius:50%;background:radial-gradient(closest-side,rgba(10,108,255,.34),rgba(10,108,255,.14) 45%,rgba(10,108,255,0) 100%);pointer-events:none;will-change:transform}
.no-js .glow{display:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* ---------- the world ---------- */
.wrap-world{position:absolute;left:0;top:0;width:800px;height:600px;transform-origin:0 0;overflow:visible}
.wrap-world canvas{position:absolute;left:0;top:0;width:800px;height:600px;image-rendering:pixelated;image-rendering:crisp-edges}
.no-js .wrap-world,.no-js .over,.no-js .rail,.no-js .skipstory,.no-js .screen{display:none}
.over{position:absolute;inset:0;pointer-events:none;z-index:2}
.pin{position:absolute;left:0;top:0;white-space:nowrap;transition:opacity .2s steps(3,end)}
.pin.far{opacity:0!important}
.rlabel{margin-left:-80px;width:160px;text-align:center;display:grid;gap:3px}
.rlabel b{font:700 16px/1 var(--pixel);letter-spacing:.02em;color:#F7F8F8}
.rlabel small{font:500 12px/1.2 var(--sans);color:var(--muted)}
.wcard{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--surface);color:var(--on-ash);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18);clip-path:var(--px1);opacity:1}
.wcard b{display:block;font:600 12px/1.2 var(--sans);max-width:170px;overflow:hidden;text-overflow:ellipsis}
.wcard small{display:block;font:400 11px/1.2 var(--sans);color:var(--on-ash2)}
.wcard .st{width:12px;height:12px}
.wcard[data-st=late]{background:#4A2A2C;box-shadow:inset 0 0 0 1.5px var(--late)}
.wcard[data-st=late] small{color:#FF9C9C}
.wcard[data-st=ink]{background:#12233F;box-shadow:inset 0 0 0 1.5px var(--blue)}
.wcard[data-st=ink] .st{background:var(--blue)}
.wcard[data-st=done]{box-shadow:inset 0 0 0 1.5px var(--done)}
.pin.off{opacity:0!important}
.wrap-world.gone{visibility:hidden}
/* each room's own clock, on its label: the story crosses three time zones */
.rlabel .lt{display:none;justify-self:center;margin-top:3px;padding:3px 8px;background:#F7F8F8;color:#08090A;font:800 13px/1.1 var(--display);font-style:normal;font-variant-numeric:tabular-nums;clip-path:var(--px1)}
.rlabel.timed .lt{display:block}
.rlabel .lt.night{background:#2B2E33;color:#C5C9CF}
.rlabel .lt.late{background:var(--late);color:#fff}
/* the chip that rides beside Ink while it carries your task */
.chip{background:#12233F;box-shadow:inset 0 0 0 1.5px var(--blue)}
.chip .st{background:var(--blue)}
.chip b{max-width:340px}
.chip small{color:#8FC0FF}
/* the late blink is toggled by the scene's own 12 fps tick (two style changes a second, not one a frame) */
.wcard.blink.b1{box-shadow:inset 0 0 0 1.5px rgba(235,87,87,.25)}
.screen:not(.on) *,.screen:not(.on){animation-play-state:paused!important}
.wcard.pop{animation:pop .9s steps(6,end)}
@keyframes pop{0%{box-shadow:inset 0 0 0 99px var(--blue)}100%{box-shadow:inset 0 0 0 99px rgba(10,108,255,0)}}
.bub{padding:5px 9px;background:#F7F8F8;color:#08090A;font:500 12px/1.2 var(--sans);clip-path:var(--px1);opacity:0;transform-origin:0 100%}
.bub.on{opacity:1}
.bub.struck{text-decoration:line-through;text-decoration-thickness:2px;color:#5C6169;opacity:0;transition:opacity .3s steps(3,end) .3s}

.wname{margin-left:-16px;padding:2px 6px;background:var(--blue);color:#fff;font:700 13px/1.1 var(--pixel);clip-path:var(--px1)}

.shade{position:absolute;pointer-events:none;z-index:2}
/* a long rail jump cuts through black instead of scrolling through the whole story */
.stage::after{content:"";position:absolute;inset:0;z-index:9;background:#08090A;opacity:0;pointer-events:none;transition:opacity .2s steps(4,end)}
.stage.cut::after{opacity:1}
/* where your task is */
/* the task is born: a packet, its trail and its name, flying from the box to Tolu's desk */
.birth{position:absolute;inset:0;z-index:6;pointer-events:none;display:none}
.birth i,.birth span{position:absolute;left:0;top:0}
.bp{width:8px;height:8px;background:var(--blue);box-shadow:0 0 0 1.5px #08090A}
.bt{width:4px;height:4px;background:var(--blue);opacity:0}
.bchip{padding:3px 7px;background:#12233F;box-shadow:inset 0 0 0 1.5px var(--blue);color:#F7F8F8;font:600 12px/1.2 var(--sans);white-space:nowrap;clip-path:var(--px1)}
.scrollcue.pulse i{animation:cue 1.2s steps(4,end) infinite,cuep .6s steps(3,end) 1}
@keyframes cuep{50%{box-shadow:0 0 0 6px rgba(10,108,255,.5)}}
.shade-t{left:0;right:0;top:0;height:104px;background:linear-gradient(#08090A 0,#08090A 76px,rgba(8,9,10,0) 100%)}
.shade-c{left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#08090A 0,#08090A calc(100% - 56px),rgba(8,9,10,0) 100%);opacity:0;transition:opacity .3s steps(4,end)}
.shade-c.on{opacity:1}
.no-js .shade{display:none}
@media (max-width:820px){.shade-c{top:auto;right:0;width:auto!important;height:0;background:linear-gradient(0deg,#08090A 0,#08090A calc(100% - 44px),rgba(8,9,10,0) 100%)}}

/* ---------- hero: the headline sits over the city, behind a mirage you can see through ---------- */
.haze{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(8,9,10,0) 0,rgba(8,9,10,.12) 20%,rgba(8,9,10,.6) 36%,rgba(8,9,10,.62) 66%,rgba(8,9,10,.12) 86%,rgba(8,9,10,0) 100%)}
@media (pointer:fine) and (min-width:821px){.wrap-world.mirage{filter:blur(1.3px)}}
.hero{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;pointer-events:none;text-align:center}
.hero-in{position:relative;width:min(1180px,100% - 40px);padding-top:56px;display:grid;grid-template-columns:minmax(0,1fr);gap:22px;justify-items:center}
.hero-in>*{pointer-events:auto}
/* a soft dark halo keeps the words crisp over lit windows; never a box or a tag behind them */
.hero-h,.hero-sub,.hero-note,.meet{text-shadow:0 0 18px rgba(8,9,10,.9),0 2px 3px rgba(8,9,10,.7)}
.hero-h{font:800 clamp(38px,7vw,108px)/.98 'Hanken Grotesk',var(--display);letter-spacing:-.04em;display:grid;justify-items:center}
.hero-h .hl{display:block;position:relative;width:fit-content;padding-bottom:.06em}
.hero-h .hl>span{display:block;clip-path:inset(-.12em 100% -.3em 0);animation:hl .7s steps(14,end) forwards;animation-delay:calc(.15s + var(--n,0)*.32s)}
.hero-h .hl:nth-child(2){--n:1}
.hero-h em.px{font:700 1em/1 var(--pixel);font-style:normal;letter-spacing:-.01em;color:#3D8BFF}
@keyframes hl{to{clip-path:inset(-.12em -2% -.3em 0)}}
.hero-sub{font-size:clamp(16px,1.5vw,21px);line-height:1.5;color:var(--text2);max-width:31em}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 20px}
.meet{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0;border:0;background:none;cursor:pointer;font:500 15px/1 var(--sans);color:var(--text2)}
.meet[hidden]{display:none}
.meet:hover{color:#fff}
.hero.is-listening .meet .kbd,.meet.is-held .kbd{background:var(--blue);color:#fff;box-shadow:none}
.hero-note{font-size:14px;color:var(--muted)}
.hero-sub,.hero-cta{opacity:0;animation:fadeup .5s steps(6,end) .95s forwards}
@keyframes fadeup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.scrollcue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:grid;justify-items:center;gap:8px;font:700 15px/1 var(--pixel);letter-spacing:.04em;color:var(--muted)}
.scrollcue i{width:8px;height:8px;background:var(--blue);animation:cue 1.2s steps(4,end) infinite}
@keyframes cue{0%{transform:translateY(-12px);opacity:0}40%{opacity:1}100%{transform:translateY(4px);opacity:0}}
.hero.is-gone{visibility:hidden}
/* outlined tags on the rooms: red, yellow, green, as on the first site */
/* they belong to the city: dim, under the band. Only the words on top stay bright */
.ptag{opacity:.3;padding:8px 11px 9px;background:#121418;border:2px solid #F7F8F8;display:grid;gap:5px;white-space:nowrap}
.ptag b{font:700 14px/1.1 var(--sans);color:#F7F8F8;max-width:190px;overflow:hidden;text-overflow:ellipsis}
.ptag small{display:flex;align-items:center;gap:6px;font:700 12px/1 var(--pixel);letter-spacing:.03em}
.ptag small i{width:8px;height:8px;background:currentColor}
.ptag.late{border-color:var(--late)}.ptag.late small{color:var(--late)}
.ptag.done{border-color:var(--done)}.ptag.done small{color:var(--done)}
.ptag.doing{border-color:var(--doing)}.ptag.doing small{color:var(--doing)}
.ptag.pop{animation:tagpop 2.2s steps(12,end)}
@keyframes tagpop{0%{opacity:1;box-shadow:inset 0 0 0 99px var(--blue)}25%{opacity:1;box-shadow:inset 0 0 0 99px rgba(10,108,255,0)}60%{opacity:1}100%{opacity:.3}}
.ptag.b1{border-color:rgba(235,87,87,.3)}

/* ---------- Ink's notch at the top of the page: it takes your task, then tells you where it is ---------- */
.inknotch{position:absolute;left:50%;top:0;transform:translateX(-50%);width:min(440px,calc(100vw - 720px));min-width:340px;padding:8px 8px 9px;background:rgba(255,255,255,.18);clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 8px),0 calc(100% - 8px));transition:background .2s steps(3,end),width .3s var(--step)}
.inknotch{-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4)}
.inknotch::before{content:"";position:absolute;left:1.5px;right:1.5px;top:0;bottom:1.5px;clip-path:inherit;background:linear-gradient(rgba(34,37,42,.86),rgba(20,22,26,.8))}
.inknotch>*{position:relative}
.inknotch:focus-within,.inknotch.is-listening{background:var(--blue)}
.nav.glowing::after{content:"";position:absolute;left:50%;top:-40px;width:520px;height:150px;margin-left:-260px;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(10,108,255,.55),rgba(10,108,255,0))}
.say{display:flex;align-items:center;gap:6px;height:48px}
.say-face{flex:none;width:40px;height:40px;display:grid;place-items:center}
.say-face .inkface{width:24px;height:24px}
.say input{flex:1;min-width:0;height:44px;padding:0 4px;border:0;background:none;color:#fff;font:500 16px/1 var(--sans);outline:0}
.say input::placeholder{color:#C5C9CF;opacity:1}
.heard{margin:2px 6px 4px 46px;font-size:14px;line-height:1.35;font-weight:500;color:#fff}
.heard[hidden]{display:none}
.heard.miss{color:#FFB8B8}.heard.ok{color:#8FC0FF}
.tracker{display:none;align-items:center;gap:8px;height:36px;margin:0;padding:0 10px;font:500 13px/1.2 var(--sans);color:var(--on-ash2);white-space:nowrap}
.tracker span{overflow:hidden;text-overflow:ellipsis}
.tracker .inkface{width:20px;height:20px}
.tracker b{color:#F7F8F8;font-weight:600}.tracker em{color:#F7F8F8}
.tracker .st{width:10px;height:10px;flex:none}
.tracker .st.ink{background:var(--blue)}
/* once the story starts the notch folds down to a small tab that says where your task is */
.inknotch.mini{width:auto;min-width:0;max-width:min(440px,calc(100vw - 720px))}
.inknotch.mini .say,.inknotch.mini .heard{display:none}
.inknotch.mini .tracker{display:flex}
.say.say-s{height:52px;padding:0 6px 0 2px;background:rgba(255,255,255,.18);clip-path:var(--px2);position:relative;width:100%}
.say.say-s::before{content:"";position:absolute;inset:1.5px;clip-path:var(--px2);background:rgba(22,24,27,.96)}
.say.say-s>*{position:relative}
.say.say-s:focus-within{background:var(--blue)}
@media (max-width:820px){
  /* on a phone the notch is a Dynamic Island: a pill under the bar */
  .inknotch{top:60px;width:calc(100vw - 20px);min-width:0;max-width:none;clip-path:var(--px2)}
  .inknotch::before{inset:1.5px}
  .inknotch.mini{width:auto;max-width:calc(100vw - 20px)}
  .say input{font-size:16px}
  .heard{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:10px}
}

/* ---------- the paper plane, while it is outside the pixel world ---------- */
.fly{position:absolute;left:0;top:0;z-index:8;width:65px;height:45px;margin:-22px 0 0 -32px;transform-origin:50% 50%;image-rendering:pixelated;pointer-events:none;visibility:hidden}
.fly.on{visibility:visible}

/* ---------- screens the camera pushes into: real machines, the real app ---------- */
.screen{position:absolute;left:0;top:0;transform-origin:0 0;opacity:0;visibility:hidden;z-index:3;font:400 12.5px/1.35 var(--sans);color:var(--on-ash)}
.screen.on{visibility:visible}
.screen.edge::after{content:"";position:absolute;inset:0;z-index:20;box-shadow:inset 0 0 0 4px #fff;pointer-events:none}
.screen .ic{flex:none}
.mac,.winpc{width:900px;height:580px;overflow:hidden;border-radius:14px;box-shadow:0 0 0 8px #0B0B0C,0 0 0 10px #2A2C30}
.mac{background:radial-gradient(ellipse 80% 70% at 30% 20%,#27407A 0,#1B1F3D 45%,#14121F 100%)}
.mbar{position:absolute;left:0;right:0;top:0;height:30px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:500;background:rgba(10,12,16,.35);z-index:3}
.mbar .l,.mbar .r{display:flex;align-items:center;gap:13px;white-space:nowrap}
.mbar .l b{font-weight:700}
/* like a real Mac: when the notch drops open, the menus it would cover step aside */
.mbar .l>span{transition:opacity .15s steps(2,end)}
.mac.drop .mbar .l>span:nth-last-child(-n+2){opacity:0}
.notch{position:absolute;left:50%;top:0;transform:translateX(-50%);width:170px;height:30px;background:#000;border-radius:0 0 12px 12px;overflow:hidden;transition:width .36s var(--step),height .36s var(--step),box-shadow .36s;z-index:6}
.notch>div{position:absolute;inset:0;opacity:0;transition:opacity .12s steps(2,end)}
.notch[data-state=idle]>.n-idle,.notch[data-state=ask]>.n-ask,.notch[data-state=sent]>.n-sent{opacity:1;transition-delay:.24s}
.notch[data-state=ask]{width:430px;height:128px;border-radius:0 0 22px 22px;box-shadow:0 16px 54px rgba(10,108,255,.6)}
.notch[data-state=sent]{width:480px;height:92px;border-radius:0 0 22px 22px;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.n-ask{padding:42px 18px 0;display:grid;gap:10px;align-content:start}
.n-top,.n-sent{display:flex;align-items:center;gap:11px;font-size:15.5px;font-weight:500;color:#fff}
.n-top span,.n-sent span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.n-top .inkface,.n-sent .inkface{width:24px;height:24px}
.n-sent{padding:36px 18px 0;align-items:center}
.n-sent span{white-space:normal;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.n-btns{display:flex;gap:8px;padding-left:35px}
.sendbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;height:34px;min-width:120px;padding:0 14px;background:var(--blue);clip-path:var(--px1);font-size:13.5px;font-weight:600;overflow:hidden;color:#fff}
.sendbtn .fill,.act .fill{position:absolute;inset:0;display:grid}
.sendbtn .fill b,.act .fill b{display:block;height:4px;width:0;justify-self:start;background:rgba(255,255,255,.42)}
.sendbtn>b,.act>b{position:relative;font-weight:600}
.sendbtn.press,.act.press{transform:translateY(2px)}
.undo{display:inline-flex;align-items:center;height:34px;padding:0 12px;background:#1E2023;font-size:13.5px;font-weight:600;clip-path:var(--px1)}
/* Kwame's notch: it only opens when Ink has something to say */
.notch.k{height:30px}
.notch.k>.n-sent{opacity:0}
.notch.k.on{width:400px;height:84px;border-radius:0 0 22px 22px;box-shadow:0 16px 54px rgba(10,108,255,.6)}
.notch.k.on>.n-sent{opacity:1;transition-delay:.24s}
.notch.k.told{box-shadow:0 12px 40px rgba(0,0,0,.5)}
.appwin{position:absolute;left:90px;right:90px;top:150px;bottom:84px;background:#1C1E21;border-radius:10px;overflow:hidden;box-shadow:0 26px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.12)}
.tbar{height:32px;display:flex;align-items:center;gap:7px;padding:0 12px;background:#26282C;font-size:12px;font-weight:600;color:#C5C9CF}
.tbar i{width:11px;height:11px;border-radius:50%}.tbar .r{background:#FF5F57}.tbar .y{background:#FEBC2E}.tbar .g{background:#28C840}
.tbar>span{margin:0 auto;transform:translateX(-26px)}
.abody{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:12px;height:calc(100% - 32px);background:radial-gradient(ellipse 60% 50% at 60% 0,rgba(10,108,255,.3),transparent 70%)}
.aside{background:#212327;padding:12px 9px;display:flex;flex-direction:column;gap:3px;clip-path:var(--px2)}
.aside img{margin:2px 0 12px 6px;height:16px;width:auto}
.aside span{display:flex;justify-content:space-between;align-items:center;height:29px;padding:0 8px;color:#C5C9CF}
.aside .on{background:#2B2E33;color:#fff;font-weight:600}
.aside em,.lh em{font-style:normal;font-size:10px;font-weight:600;padding:2px 6px;background:#2B2E33;color:#F7F8F8}
.aside em.b,.lh em.b{background:var(--blue);color:#fff}
.aside .lab{height:24px;font-size:10.5px;color:#9EA3AB;margin-top:6px}
.aside .ask{margin-top:auto;height:33px;background:#000;border-radius:17px;font-weight:600;color:#fff;justify-content:flex-start;gap:7px}
.aside .ask .inkface{width:15px;height:15px}
.aside kbd{margin-left:auto;font:500 10.5px/1 var(--sans);color:#9EA3AB}
.amain{display:grid;gap:9px;align-content:start;min-width:0}
.hello{display:flex;gap:11px;align-items:center;padding:3px 0}
.hello .ring{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16)}
.hello .ring .inkface{width:25px;height:25px}
.hello b{display:block;font:800 20px/1.1 var(--display);letter-spacing:-.02em}
.hello small{display:block;font-size:12px;color:#C5C9CF;margin-top:3px}
.hello .pill{margin-left:auto;font-style:normal;font-size:11px;font-weight:600;padding:4px 8px;background:var(--blue);color:#fff;clip-path:var(--px1)}
.alist{background:#212327;padding:10px;display:grid;gap:4px;clip-path:var(--px2)}
.lh{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}
.lh b{font-size:13.5px;font-weight:600}.lh span{color:#6BA6FF;font-size:11px}
.arow{position:relative;display:flex;align-items:center;gap:10px;min-height:44px;padding:5px 11px;background:#2B2E33;overflow:hidden}
.arow>div{flex:1;min-width:0}
.arow b{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arow small{display:block;font-size:11.5px;color:#C5C9CF;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arow.is-done b{color:#9EA3AB}
.arow.late{background:#4A2A2C;box-shadow:inset 3px 0 0 var(--late)}.arow.late small{color:#FF9C9C}
.arow.flash{animation:flash .6s steps(6,end)}
@keyframes flash{0%{box-shadow:inset 0 0 0 99px rgba(31,185,84,.5)}100%{box-shadow:inset 0 0 0 99px rgba(31,185,84,0)}}
.act{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;height:31px;min-width:92px;padding:0 12px;background:#F7F8F8;color:#08090A;font-size:12.5px;font-weight:600;clip-path:var(--px1);overflow:hidden}
.act.done{background:#12233F;color:#8FC0FF}
.act.blue{background:var(--blue);color:#fff}
.afoot{display:flex;gap:16px;font-size:11.5px;color:#C5C9CF;margin-top:4px}.afoot span{display:flex;align-items:center;gap:6px}
.sqb{width:8px;height:8px;background:var(--blue)}
.co.a{background:#6FD3C4}.co.n{background:#E0C9A0}
.aiwin{position:absolute;right:26px;bottom:72px;width:384px;background:#0E1013;border-radius:8px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.14);z-index:2}
.win-bar{height:28px;display:flex;align-items:center;gap:6px;padding:0 10px;background:#1B1D21;font-size:11.5px;font-weight:500;color:var(--on-ash2)}
.win-bar i{width:8px;height:8px;border-radius:50%;background:#4A4E55}
.win-bar span{margin:0 auto 0 8px}
.win-bar em,.integ em{font-style:normal;font-size:10.5px;font-weight:600;padding:3px 7px;background:rgba(255,255,255,.1);color:#F7F8F8;clip-path:var(--px1)}
.win-bar em:first-of-type{background:#F7F8F8;color:#08090A}
.term{padding:12px 14px;display:grid;gap:8px;font:500 12.5px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#D5D8DC}
.term p{margin:0;display:flex;align-items:center;gap:9px;clip-path:inset(0 100% 0 0);transition:clip-path .4s var(--step)}
.term b{flex:none;width:26px;color:#7E8590;font-weight:500}
.term .l0{clip-path:inset(0)}
.aiwin.s1 .l1,.aiwin.s2 .l2,.aiwin.s3 .l3{clip-path:inset(0)}
.term .l1 i{width:7px;height:13px;background:#D5D8DC;animation:caret .8s steps(2,end) infinite}
.aiwin.s2 .l1 i{display:none}
.term .l3{color:#7CE0A0}
@keyframes caret{50%{opacity:0}}
.dock{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:7px 9px;background:rgba(255,255,255,.14);border-radius:17px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.dock i{width:42px;height:42px;border-radius:11px;background:linear-gradient(#5A5E66,#33363C)}
.dock i:nth-child(2){background:linear-gradient(#7A7E86,#4A4E55)}.dock i:nth-child(6){background:linear-gradient(#8E9299,#55595F)}
.dock .async{background:#000;display:grid;place-items:center;box-shadow:0 0 0 1.5px rgba(10,108,255,.9),0 6px 20px rgba(10,108,255,.6);position:relative}
.dock .async::after{content:"";position:absolute;bottom:-6px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#fff}
.dock .async .inkface{width:26px;height:26px}
.dock b{width:1px;height:36px;background:rgba(255,255,255,.3)}
/* Windows */
.winpc{background:radial-gradient(ellipse 70% 90% at 70% 110%,#3F8CFF 0,#0F4FBF 30%,#0A1E52 60%,#060B1C 100%);font-family:'Segoe UI',var(--sans)}
.wisland{position:absolute;left:50%;top:12px;transform:translateX(-50%) translateY(-70px);height:46px;padding:0 18px 0 14px;display:flex;align-items:center;gap:11px;background:#000;border-radius:23px;font-size:14.5px;font-weight:500;box-shadow:0 0 0 1.5px rgba(255,255,255,.14),0 14px 44px rgba(10,108,255,.6);z-index:5;transition:transform .36s var(--step);white-space:nowrap}
.wisland.on{transform:translateX(-50%)}
.wisland .inkface{width:22px;height:22px}
.appwin.win{top:78px;bottom:62px;border-radius:7px}
.appwin.win .tbar{justify-content:flex-start;background:#202225}
.appwin.win .tbar>span{margin:0;transform:none}
.appwin.win .tbar .inkface{width:15px;height:15px}
.wc{margin-left:auto!important;display:flex;gap:20px;align-items:center}
.wc i{width:10px;height:10px;border-radius:0!important;position:relative}
.wc .min{border-bottom:1.5px solid #C5C9CF;height:6px}.wc .max{box-shadow:inset 0 0 0 1.5px #C5C9CF}
.wc .x::before,.wc .x::after{content:"";position:absolute;left:4px;top:-1px;width:1.5px;height:12px;background:#C5C9CF;transform:rotate(45deg)}.wc .x::after{transform:rotate(-45deg)}
.taskbar{position:absolute;left:0;right:0;bottom:0;height:46px;background:rgba(28,30,36,.82);display:flex;align-items:center;justify-content:center}
.taskbar .mid{display:flex;align-items:center;gap:7px}
.taskbar .mid i{width:32px;height:32px;border-radius:6px;background:linear-gradient(#5A5E66,#3A3D44);display:grid;place-items:center;font-style:normal}
.taskbar .start{background:none!important;grid-template-columns:10px 10px;gap:2px;place-content:center}
.taskbar .start b{width:10px;height:10px;background:#4CA3FF}
.taskbar .search{width:170px!important;border-radius:16px!important;background:rgba(255,255,255,.1)!important;justify-items:start;padding-left:14px;font-size:12px;color:#C5C9CF}
.taskbar .async{background:#000!important;box-shadow:0 0 0 1.5px rgba(10,108,255,.9);position:relative}.taskbar .async .inkface{width:20px;height:20px}
.taskbar .async::after{content:"";position:absolute;bottom:-5px;left:50%;width:12px;height:3px;margin-left:-6px;border-radius:2px;background:#4CA3FF}
.tray{position:absolute;right:14px;display:flex;align-items:center;gap:12px;font-size:11px}
.tray .chev{width:7px;height:7px;border-left:1.5px solid #fff;border-top:1.5px solid #fff;transform:rotate(45deg) translateY(3px)}
.tray .clk{text-align:right;line-height:1.3}
/* Kwame's list: one list, but a wall around each client */
.krw{display:grid;gap:0;background:#212327;padding:4px 10px;clip-path:var(--px2)}
.kw{padding:6px 0;border-top:2px solid #3A3D44;opacity:.38;transition:opacity .3s steps(3,end)}
.kw:first-child{border-top:0}
.krw.lit .kw.lit{opacity:1}
.krw:not(.lit) .kw{opacity:1}
.kw-n{display:flex;align-items:center;gap:8px;margin:0 0 4px;font:700 12px/1 var(--pixel);letter-spacing:.02em;color:var(--on-ash2)}
.kw-n .co{width:16px;height:16px;font-size:10px}
.kw .arow{min-height:36px}
/* her iPhone */
.iphone{width:330px;height:680px;padding:10px;background:#111214;border-radius:54px;box-shadow:0 0 0 2px #3A3D44,0 0 0 5px #1B1D21}
.iscreen{position:relative;height:100%;border-radius:44px;overflow:hidden;background:#212327 radial-gradient(ellipse 100% 34% at 50% 100%,rgba(10,108,255,.55),transparent 70%);color:#F7F8F8;font:400 14px/1.35 var(--sans)}
.istat{position:absolute;left:0;right:0;top:0;height:50px;padding:5px 24px 0;display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:600}
.istat .ir{display:flex;align-items:center;gap:5px}
.sig{display:flex;align-items:flex-end;gap:2px;height:11px}.sig b{width:3px;background:#fff;border-radius:1px}.sig b:nth-child(1){height:4px}.sig b:nth-child(2){height:6px}.sig b:nth-child(3){height:8px}.sig b:nth-child(4){height:11px}
.di{position:absolute;left:50%;top:10px;transform:translateX(-50%);height:33px;width:104px;padding:0 10px;display:flex;align-items:center;gap:7px;background:#000;border-radius:18px;font-size:12px;font-weight:600;z-index:3;overflow:hidden;transition:width .3s var(--step)}
.di .inkface{width:20px;height:20px;flex:none}
.di .bars{display:flex;align-items:center;gap:2.5px;margin-left:auto;opacity:0}.di .bars b{width:3px;background:var(--blue);border-radius:1px;height:7px}.di .bars b:nth-child(2n){height:15px}.di .bars b:nth-child(3n){height:10px}
.di>span:last-child{color:#6BA6FF;opacity:0}
.iphone.listening .di{width:176px}
.iphone.listening .di .bars,.iphone.listening .di>span:last-child{opacity:1}
.iphone.listening .di .bars b{animation:bar .5s steps(3,end) infinite alternate}.iphone.listening .di .bars b:nth-child(2n){animation-delay:.14s}
@keyframes bar{to{transform:scaleY(.4)}}
.ibody{padding:66px 18px 0;display:flex;flex-direction:column;gap:8px;height:calc(100% - 70px)}
.ibody .wl{font:700 14px/1 var(--pixel);color:#6BA6FF}
.ibody .ttl{font:800 26px/1.04 var(--display);letter-spacing:-.025em;margin-bottom:6px}
.irow{display:flex;align-items:center;gap:11px;min-height:48px;padding:0 13px;background:#2B2E33;font-size:15px;font-weight:500}
.irow span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.irow .st{width:15px;height:15px}
.irow.new{background:var(--blue);clip-path:inset(0 50% 0 50%);transition:clip-path .4s var(--step),background .5s steps(4,end) .6s}
.irow.new.on{clip-path:inset(0);background:#2B2E33}
.lock{margin:4px 0 0;font-size:13px;color:#8FC0FF;opacity:0;transition:opacity .3s steps(3,end)}
.lock.on{opacity:1}
.saying{margin:auto 0 0;text-align:center;font-size:14.5px;font-weight:500;min-height:40px}
.orb{margin:0 auto;width:70px;height:70px;border-radius:50%;display:grid;place-items:center;background:#000;box-shadow:0 0 0 2px rgba(10,108,255,.9),0 0 34px 8px rgba(10,108,255,.65)}
.orb .inkface{width:32px;height:32px}
.iphone.listening .orb{animation:orb .5s steps(3,end) infinite alternate}
@keyframes orb{to{box-shadow:0 0 0 2px rgba(10,108,255,.9),0 0 56px 20px rgba(10,108,255,.9)}}
.tabs{position:absolute;left:0;right:0;bottom:24px;display:flex;justify-content:space-around;font-size:12px;font-weight:600;color:#9EA3AB}
.tabs .on{color:#fff}
.homebar{position:absolute;left:50%;bottom:7px;width:120px;height:5px;margin-left:-60px;border-radius:3px;background:#fff}
.devline{font-size:14px!important;color:#8FC0FF!important}

/* ---------- captions: the story in words ---------- */
.caps{position:absolute;z-index:6;left:clamp(20px,4vw,56px);top:50%;width:min(390px,34vw);transform:translateY(-46%);pointer-events:none}
.cap{position:absolute;left:0;top:50%;width:100%;transform:translateY(-50%);padding:26px 24px 28px;display:grid;gap:13px;justify-items:start;visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .36s var(--step),visibility 0s .36s}
.cap::before{content:"";position:absolute;inset:0;clip-path:var(--px2);background:rgba(255,255,255,.18)}
.cap::after{content:"";position:absolute;inset:1.5px;clip-path:var(--px2);background:#191B1E}
/* solid, not frosted: the shade already blacks out the world behind the card, so a blur would only blur black */
.cap>*{position:relative;z-index:1}
.cap.on{visibility:visible;clip-path:inset(0);pointer-events:auto;transition:clip-path .44s var(--step) .1s,visibility 0s}
.cap h2 .is-ink{color:#3D8BFF}
.cap h2.brandline span{display:block;white-space:nowrap}
.cap-cta{display:flex;flex-wrap:wrap;gap:8px}
.cap .fine{font-size:14px}
.cap .devtag{font-size:14px;color:#8FC0FF;display:flex;align-items:center;gap:8px}
.cap .devtag::before{content:"";width:6px;height:6px;background:var(--blue);flex:none}
.has-task .if-none,.story:not(.has-task) .if-task,.story:not(.sent-end) .if-sent,.sent-end .if-task{display:none}
.say-s{width:100%;padding:4px}
.say-s .say-face{width:32px;height:32px}.say-s input{height:40px;font-size:15px}
.cap-cta.pulse .btn:first-child{animation:ctap .5s steps(3,end) 2}
@keyframes ctap{50%{box-shadow:inset 0 0 0 99px rgba(255,255,255,.28)}}
#cv-you{opacity:0}
.cap h2{font:800 clamp(26px,2.7vw,38px)/1.05 var(--display);letter-spacing:-.03em;word-spacing:.06em}
.cap p{font-size:16px;line-height:1.55;color:var(--text2)}
.integ{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px!important;color:var(--muted)!important}
.integ span{margin-right:4px}

.rail{position:absolute;z-index:7;right:14px;top:50%;transform:translateY(-50%);display:grid;gap:2px;opacity:0;transition:opacity .3s}
.rail.on{opacity:1}
.rail button{width:28px;height:20px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.rail button i{width:8px;height:8px;background:rgba(255,255,255,.28);transition:all .2s steps(3,end)}
.rail button:hover i{background:#fff}
.rail button[aria-current=step] i{background:var(--blue);width:8px;height:20px}
.skipstory{position:absolute;z-index:8;left:16px;bottom:-60px;background:#fff;color:#08090A;padding:10px 14px;font-size:14px;font-weight:600;text-decoration:none}
.skipstory:focus{bottom:16px}

/* without scripts: the story is a plain column of captions */
.no-js .stage{position:static;height:auto;overflow:visible;padding:120px 0 40px}
.no-js .hero{position:static;display:block}.no-js .hero::before{display:none}
.no-js .caps{position:static;transform:none;width:min(640px,100% - 40px);margin:64px auto 0;display:grid;gap:16px}
.no-js .cap{position:relative;top:auto;transform:none;visibility:visible;clip-path:none}
.no-js .scrollcue,.no-js .say{display:none}

/* ---------- after the camera lets go ---------- */
.sec-who,.sec-price{padding-top:0}
.more{margin-top:28px;font-weight:600}
.pricestrip{padding:32px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:20px 48px;align-items:center}
.pricestrip>div{display:grid;gap:12px}
.pricestrip p:not(.q){color:var(--text2)}
.get{padding-bottom:clamp(96px,12vw,168px)}
.get-in{display:grid;gap:24px;justify-items:center;text-align:center}
.get .h-xl span{display:block}
.get .h-xl .is-ink{color:#3D8BFF}
.get-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.getface{width:72px;height:72px;display:grid;place-items:center}
.getface .inkface{width:64px;height:64px;background-image:url(/assets/brand/ink-mark-on-dark.svg)}

@media (max-width:820px){
  .hero{align-items:flex-start}
  .haze{background:linear-gradient(180deg,rgba(8,9,10,.5) 0,rgba(8,9,10,.84) 16%,rgba(8,9,10,.84) 50%,rgba(8,9,10,.25) 66%,rgba(8,9,10,0) 80%)}
  .hero-in{padding-top:160px;gap:14px}
  .hero-h{font-size:clamp(34px,10.4vw,64px)}
  .hero-note{display:none}
  .hero-sub{font-size:15.5px}
  .caps{left:10px;right:10px;width:auto;top:auto;bottom:max(10px,env(safe-area-inset-bottom));transform:none;height:0}
  .cap{top:auto;bottom:0;transform:none;padding:16px 16px 18px;gap:8px}
  .cap h2{font-size:24px}
  .cap p{font-size:14.5px;line-height:1.48}
  .rail{right:0;top:30%}
  .rail button{width:18px;height:14px}
  .rail button i{width:6px;height:6px}
  .rail button[aria-current=step] i{width:6px;height:14px}
  .rlabel b{font-size:13px}.rlabel small{font-size:10.5px}
  .chip b{max-width:150px}
  .pricestrip{grid-template-columns:minmax(0,1fr);padding:24px 20px}
  .scrollcue{display:none}
}

@media (prefers-reduced-motion:reduce){
  .hero-h .hl>span{animation:none;clip-path:none}.hero-h .hl::after{display:none}
  .hero-sub,.say,.hero-cta{animation:none;opacity:1}
  .scrollcue i,.wcard.blink,.wcard.pop,.term .l1 i,.phone.listening .orb,.aw-row.flash,.cap-cta.pulse .btn{animation:none}
  .cap,.notch,.term p,.pin{transition-duration:.01s!important;transition-delay:0s!important}
}


.rlabel.far2{opacity:0}
.cap h2{font-family:'Hanken Grotesk',var(--display);font-weight:800;letter-spacing:-.035em;word-spacing:0}

/* no keyboard hints on a touch screen: the hold button shows a small microphone instead of key caps */
@media (pointer:coarse){
  .meet .keys{display:none}
  .meet::before{content:"";width:10px;height:14px;background:#F7F8F8;box-shadow:0 0 0 3px #08090A,0 0 0 4.5px rgba(255,255,255,.35);margin:0 4px 0 6px;clip-path:polygon(20% 0,80% 0,80% 10%,100% 10%,100% 60%,80% 60%,80% 70%,60% 70%,60% 88%,90% 88%,90% 100%,10% 100%,10% 88%,40% 88%,40% 70%,20% 70%,20% 60%,0 60%,0 10%,20% 10%)}
}
.hold-t{display:none}
@media (pointer:coarse){.hold-k{display:none}.hold-t{display:inline}}

/* on a phone the screens show the part that matters: no side bar, the notch and the list in view */
@media (max-width:820px){
  .screen .appwin{left:208px;right:208px}
  .screen .abody{grid-template-columns:minmax(0,1fr)}
  .screen .aside,.mbar .r,.mbar .l,.tray{display:none}
  .aiwin{right:204px;width:350px}
  .hello b{font-size:17px}
}
}
#cv-city{opacity:0;transition:opacity .5s steps(5,end)}
#cv-city.in{opacity:1}
/* on a phone the pill belongs to the story: past it, the page is plain reading */
@media (max-width:820px){.inknotch.past{visibility:hidden}}