/* Layout: inflight's rhythm around three real Mac screens. Dark hero with the screen as its film,
   a light act with a sticky screen, a dark act where Claude Code drives Yab, a light bento, a dark close.
   One look on purpose: the sections carry light and dark themselves. */
:root{
  --night:#06080B; --night-2:#111418; --night-3:#1A1E24; --night-ink:#F3F5F8; --night-dim:rgba(243,245,248,.62);
  --day:#FAFAFB; --day-2:#F2F3F5; --card:#FFFFFF; --ink:#0D1117; --dim:#5B6270; --line:rgba(13,17,23,.08);
  --pen:#8a5cf5; --pen-soft:#b69dff; --glow-a:rgba(138,92,245,.38); --glow-b:rgba(64,170,255,.22);
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --hand:"Caveat","Bradley Hand",cursive;
  --wrap:1240px; --gut:clamp(16px,4vw,36px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--day);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
h1,h2,h3{text-wrap:balance;margin:0}
p{margin:0}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.02em}
:focus-visible{outline:2px solid var(--pen);outline-offset:3px;border-radius:6px}

.study{position:relative;z-index:30;background:var(--pen);color:#fff;font-size:13.5px}
.study .wrap{display:flex;gap:12px;align-items:center;justify-content:space-between;padding-block:9px;flex-wrap:wrap}
.study a{font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5)}

.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;transition:background .3s,border-color .3s;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(6,8,11,.78);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4)}
/* the site's own .nav is a flex row 1080 wide: this one is a full-width bar with a .wrap inside */
.nav{display:block;max-width:none;margin:0;padding:0;position:fixed;left:0;right:0;top:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),background .3s,border-color .3s}
.nav.away{transform:translateY(-100%);pointer-events:none}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:62px}
.brand{display:flex;align-items:center;gap:9px;font-weight:620;font-size:19px;letter-spacing:-.02em;text-decoration:none;color:var(--night-ink)}
.brand img{width:26px;height:26px}
.nav .links{display:flex;align-items:center;gap:30px;font-size:14px;color:var(--night-dim)}
.nav .links .sep{margin-inline:-4px}
.links a{text-decoration:none}.links a:hover{color:var(--night-ink)}
.links .sep{width:1px;height:16px;background:rgba(255,255,255,.18)}
.nav.light{background:rgba(250,250,251,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
.nav.light .brand{color:var(--ink)}.nav.light .links{color:var(--dim)}.nav.light .links a:hover{color:var(--ink)}.nav.light .links .sep{background:var(--line)}
.nav .navcta{border-radius:10px;height:36px;padding:0 16px}
.nav .navcta{display:none}.nav.light .navcta{display:inline-flex}
@media (max-width:720px){.links .hide-s{display:none}}

.btn{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 22px 0 24px;border-radius:999px;border:0;font:560 15.5px/1 var(--sans);letter-spacing:-.01em;cursor:pointer;text-decoration:none}
.btn.white{background:#fff;color:var(--ink);box-shadow:0 0 0 1px rgba(255,255,255,.2),0 10px 40px -10px rgba(138,92,245,.6)}
.btn.dark{background:var(--ink);color:#fff}
.btn.small{height:34px;padding:0 14px;font-size:13.5px}
.roll{display:inline-flex;overflow:hidden;height:1.15em;line-height:1.15em}
.roll span{display:inline-flex;flex-direction:column;transition:transform .42s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i)*14ms)}
.roll span::after{content:attr(data-c)}
.btn:hover .roll span,.btn:focus-visible .roll span{transform:translateY(-1.15em)}
.btn .chev{width:14px;height:14px;transition:transform .3s}.btn:hover .chev{transform:translateX(2px)}

.hero{position:relative;overflow:hidden;background:var(--night);color:var(--night-ink);margin-top:-62px;padding-top:62px}
.hero::before{content:"";position:absolute;inset:auto -10% 0 -10%;height:1000px;pointer-events:none;
  background:radial-gradient(40% 50% at 10% 70%,var(--glow-a),transparent 70%),radial-gradient(38% 45% at 92% 58%,var(--glow-b),transparent 70%)}
.hero .wrap{position:relative;text-align:center;padding-block:64px 0}
.h1{font-size:clamp(46px,7.4vw,92px);line-height:.98;font-weight:580;letter-spacing:-.045em}
.sel{position:relative;display:inline-block;padding:0 .08em;margin:0 .02em}
.sel::before{content:"";position:absolute;inset:.06em -.02em .02em;border:1.5px solid var(--pen-soft);box-shadow:0 0 24px rgba(138,92,245,.55),inset 0 0 24px rgba(138,92,245,.25);border-radius:2px}
.sel i{position:absolute;width:9px;height:9px;background:var(--night);border:1.5px solid var(--pen-soft);border-radius:1px}
.sel i:nth-of-type(1){left:-6px;top:calc(.06em - 4px)}.sel i:nth-of-type(2){right:-6px;top:calc(.06em - 4px)}
.sel i:nth-of-type(3){left:-6px;bottom:calc(.02em - 4px)}.sel i:nth-of-type(4){right:-6px;bottom:calc(.02em - 4px)}
.sel b{position:absolute;left:-2px;top:-30px;font:600 22px/1 var(--hand);color:var(--pen-soft);letter-spacing:0;white-space:nowrap}
.glyph{display:inline-grid;place-items:center;width:.62em;height:.62em;vertical-align:-.02em;margin:0 .01em}
.glyph svg{width:100%;height:100%;transition:transform .45s cubic-bezier(.3,1.4,.4,1),opacity .2s}
.glyph.swap svg{transform:scale(.3) rotate(-40deg);opacity:0}
.dot{color:var(--pen-soft)}
.lede{max-width:580px;margin:26px auto 0;font-size:clamp(18px,2vw,22px);line-height:1.45;color:rgba(243,245,248,.82)}
.ctas{margin-top:34px;display:flex;flex-direction:column;align-items:center;gap:12px}
.ctas .mono{color:var(--night-dim)}
.herodisp{margin-top:60px}

/* the player under the hero screen */
.player{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:14px auto 0;max-width:940px}
.chap{position:relative;overflow:hidden;height:36px;padding:0 14px;border-radius:999px;border:0;background:rgba(255,255,255,.07);color:rgba(243,245,248,.7);font:500 13.5px var(--sans);cursor:pointer;display:inline-flex;align-items:center;gap:8px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.chap:hover{color:#fff;background:rgba(255,255,255,.11)}
.chap.on{color:#fff}
.chap .fill{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(138,92,245,.38);z-index:-1}
.chap{isolation:isolate}
.chap.on .fill{animation:fillx var(--d,6s) linear forwards}
@keyframes fillx{to{width:100%}}
.chap.done .fill{width:100%;background:rgba(255,255,255,.08)}
.driving{margin:14px auto 0;display:none;align-items:center;justify-content:center;gap:12px;font-size:14px;color:var(--night-dim)}
.driving button{box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.driving.on{display:flex}
.driving button{height:32px;border-radius:9px;border:0;padding:0 12px;background:#fff;color:var(--ink);font:560 13.5px var(--sans);cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.display{position:relative}
.tryrow{display:flex;justify-content:center;margin-top:12px}
.try{position:relative;height:34px;padding:0 14px 0 12px;border-radius:999px;border:0;cursor:pointer;
  background:rgba(13,17,23,.78);color:#fff;font:560 13.5px var(--sans);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 0 0 1px rgba(255,255,255,.18),0 8px 22px rgba(0,0,0,.35);display:inline-flex;gap:8px;align-items:center;transition:opacity .2s,transform .2s}
.try::before{content:"";width:8px;height:8px;border-radius:50%;background:#7ad19a;box-shadow:0 0 0 3px rgba(122,209,154,.25)}
.try:hover{transform:translateY(-1px)}
.try[hidden]{display:none}
.tryrow:has(.try.off){display:none}
.display .scrn{cursor:pointer}
.display.steer .scrn{cursor:default;box-shadow:0 0 0 2px var(--pen-soft)}
.cap{margin:20px auto 0;max-width:640px;min-height:3em;font-size:16px;line-height:1.5;color:rgba(243,245,248,.86);text-align:center}
.cap.in{animation:capin .35s cubic-bezier(.2,.8,.2,1)}
@keyframes capin{from{opacity:0;transform:translateY(4px)}}
.cap b{font-weight:600;color:#fff}

.strip{padding:44px 0 60px;text-align:center}
.strip .mono{color:var(--night-dim)}
.who a.src{color:inherit;text-decoration:none;display:flex;flex-direction:column}.who a.src:hover{text-decoration:underline;text-underline-offset:3px}
.marq{margin-top:18px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.marq-in{display:flex;gap:56px;width:max-content;animation:marq 38s linear infinite}
.marq-in span{display:inline-flex;align-items:center;gap:10px;font-size:22px;font-weight:600;letter-spacing:-.02em;color:rgba(243,245,248,.55);white-space:nowrap}
.marq-in span img{width:34px;height:34px;flex:none}
.marq-in span em{font-style:normal;font-family:var(--mono);font-size:12px;font-weight:400;color:rgba(243,245,248,.35);margin-left:-2px}
@keyframes marq{to{transform:translateX(-50%)}}
.quote{text-align:center;padding-block:64px 70px}
.quote blockquote{margin:0 auto;max-width:860px;font-size:clamp(26px,3.4vw,40px);line-height:1.18;font-weight:540;letter-spacing:-.03em}
.who{margin-top:22px;display:inline-flex;gap:10px;align-items:center;font-size:14px;font-weight:560;text-align:left}
.who .av{width:32px;height:32px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.quote.two{display:grid;grid-template-columns:1fr 1fr;gap:40px}.quote.two figure{margin:0}.quote.two blockquote{font-size:clamp(22px,2.6vw,32px)}
@media (max-width:760px){.quote.two{grid-template-columns:1fr;gap:48px}}
.who .mono{display:block;color:var(--dim);font-weight:400;font-size:11.5px}
.quote.dark{background:var(--night-2);color:var(--night-ink)}.quote.dark .mono{color:var(--night-dim)}

/* act one */
.act1{background:var(--day);padding-bottom:max(60px,24vh)}
.head{text-align:center;padding-top:30px}
.h2{font-size:clamp(34px,4.6vw,54px);line-height:1.04;font-weight:580;letter-spacing:-.035em}
.sub{margin:16px auto 0;max-width:500px;color:var(--dim);font-size:18px;line-height:1.5}
.pen{font-family:var(--hand);font-weight:600;color:var(--pen);font-size:30px;line-height:1}
.scrolly{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.6fr);gap:44px;margin-top:60px}
.stick{grid-column:2;grid-row:1 / span 5;margin-block:-11vh}   /* the first and last steps' middles, 39vh in, get the screen's middle too */
.scrolly>.step:nth-child(2){grid-row:1}.scrolly>.step:nth-child(3){grid-row:2}.scrolly>.step:nth-child(4){grid-row:3}.scrolly>.step:nth-child(5){grid-row:4}.scrolly>.step:nth-child(6){grid-row:5}
.stick > .in{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center}
.stick .display{max-width:none}
/* the steps as Yab shows its spaces: a dot each, the one on screen drawn out long */
.rail{position:absolute;left:-22px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;z-index:2}
.rail button{width:4px;height:4px;padding:0;border:0;border-radius:2px;background:rgba(13,17,23,.16);cursor:pointer;transition:height .32s cubic-bezier(.2,.8,.2,1),background .2s}
.rail button:hover{background:rgba(13,17,23,.34)}
.rail button.on{height:16px;background:rgba(13,17,23,.5)}
.rail::before{content:"";position:absolute;inset:-10px -10px}
@media (max-width:899px){.rail{display:none}}
.step{min-height:78vh;display:flex;flex-direction:column;justify-content:center;gap:12px;opacity:.35;transition:opacity .4s;grid-column:1}
.step.on{opacity:1}
.step h3{font-size:clamp(24px,2.4vw,32px);line-height:1.1;font-weight:560;letter-spacing:-.03em}
.step p{color:var(--dim);font-size:16.5px;line-height:1.5}
.step .pen{font-size:31px;margin-bottom:-2px}
.step:nth-of-type(1){grid-row:1}.step:nth-of-type(2){grid-row:2}.step:nth-of-type(3){grid-row:3}.step:nth-of-type(4){grid-row:4}.step:nth-of-type(5){grid-row:5}
.step .pen{display:block;margin-bottom:2px}
/* keys as the site's manual draws them (Keys in fast-web app/manual/kit.tsx): a plate a key, 2 apart, the ink's own tint */
.keys{display:inline-flex;align-items:center;gap:2px;vertical-align:.08em;font:500 .8em/1 var(--sans);color:inherit;white-space:nowrap}
.keys .k{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:1.6em;height:1.6em;padding:0 .35em;border-radius:.4em;background:color-mix(in srgb,currentColor 11%,transparent)}
.keys .k.one{padding:0;aspect-ratio:1}
.keys svg{width:1.05em;height:1.05em;display:block}
.keys .said{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.step h3 .keys{font-size:.55em;vertical-align:.2em;margin-right:.1em}

/* act two */
.agent{background:var(--night);color:var(--night-ink);padding-block:110px 60px;position:relative;overflow:hidden}
.agent::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 40% at 50% 30%,rgba(138,92,245,.16),transparent 70%);pointer-events:none}
.agent .wrap{position:relative;text-align:center}
.agent .sub{color:var(--night-dim)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--pen-soft);margin-bottom:16px;display:block}
.agentdisp{margin-top:56px}
.cap2,.pills2{display:none}
.cap2{margin:18px 0 0;min-height:4.6em;font-size:15.5px;line-height:1.5;color:var(--dim);display:none;flex-wrap:wrap;gap:0 6px}
.cap2 b{color:var(--ink);font-weight:600}

.agent .cap{color:var(--night-dim)}
.hands{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px}
.chip2{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:0 0 0 1px rgba(255,255,255,.1);font-size:14px;color:var(--night-ink)}
.replayrow{height:34px;margin-top:16px;display:flex;justify-content:center}
.replay{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 13px 0 10px;border-radius:8px;border:0;cursor:pointer;
  background:rgba(255,255,255,.08);box-shadow:0 0 0 1px rgba(255,255,255,.1) inset;color:rgba(255,255,255,.82);font:500 13px/1 var(--sans);
  opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .2s,transform .2s cubic-bezier(.2,.8,.2,1),background .12s}
.replay.on{opacity:1;transform:none;pointer-events:auto}
.replay:hover{background:rgba(255,255,255,.14)}.replay:active{transform:scale(.97)}
.replay .ri{width:15px;height:15px;display:grid;place-items:center}.replay .ri svg{width:15px;height:15px}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:70px;text-align:left}
.trio div{padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
.trio h4{margin:0 0 6px;font-size:17px;font-weight:580;letter-spacing:-.01em}
.trio p{color:var(--night-dim);font-size:15px}
.trio a{color:var(--pen-soft);text-decoration:none;font-size:14px;display:inline-block;margin-top:8px}

/* bento */
.bento-sec{padding-block:110px 40px}
.bento-sec .h2{max-width:640px}
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:44px}
.bento .tile{background:var(--card);border-radius:22px;box-shadow:0 0 0 1px var(--line);padding:10px;display:flex;flex-direction:column}
.bento .tile .vis{border-radius:12px;background:var(--day-2);height:240px;position:relative;overflow:hidden;display:grid;place-items:center}
.tile .txt{padding:18px 12px 10px}
.tile h3{font-size:20px;font-weight:580;letter-spacing:-.02em;margin-bottom:6px}
.tile p{color:var(--dim);font-size:15px;line-height:1.5}
.t-wide{grid-column:span 4}.t-nar{grid-column:span 2}.t-half{grid-column:span 3}
.sizes{width:84%;display:flex;flex-direction:column;gap:16px}
.sz{display:grid;grid-template-columns:70px 1fr;align-items:center;gap:12px;font-size:13.5px;font-weight:560}
.sz .b{height:30px;border-radius:8px;display:flex;align-items:center;padding:0 10px;font-family:var(--mono);font-size:12px;font-weight:500;white-space:nowrap}
.sz .yab{width:2.9%;min-width:74px;background:var(--pen);color:#fff}
.sz .chr{width:100%;background:#d9dce2;color:var(--ink)}
.sitepanel{width:300px;max-width:88%;border-radius:20px;padding:12px;background:#fff;box-shadow:0 0 0 1px #e8e8e8,0 8px 24px rgba(0,0,0,.12);font:13px -apple-system,BlinkMacSystemFont,"Inter",sans-serif;color:#171717}
.sitepanel .hd{display:flex;gap:10px;align-items:center;padding:4px 4px 12px;border-bottom:1px solid #e8e8e8;margin-bottom:8px;font-weight:500}
.sitepanel .hd img{width:20px;height:20px;border-radius:5px}
.sitepanel .hd small{display:block;font-weight:400;color:#616161;font-size:12px}
.sitepanel .sr{display:flex;align-items:center;gap:10px;height:36px;padding:0 6px;border-radius:8px}
.sitepanel .sr svg{width:17px;height:17px;color:#474747}
.sitepanel .sr span{flex:1}
.sitepanel .sr em{font-style:normal;color:#616161}
.sitepanel .sw{width:30px;height:18px;border-radius:9px;background:#34c759;position:relative}
.sitepanel .sw::after{content:"";position:absolute;right:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.macs{display:flex;gap:16px;align-items:center}
.mac{width:130px;height:84px;border-radius:9px;padding:5px;display:flex;gap:4px;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 10px 20px -12px rgba(0,0,0,.3)}
.mac .c{width:30%;display:flex;flex-direction:column;gap:3px;padding:3px}
.mac .c i{height:6px;border-radius:2px;background:rgba(255,255,255,.62)}
.mac .c i.l{background:rgba(255,255,255,.9)}
.mac .p{flex:1;border-radius:4px;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.06)}
.wire{width:70px;height:2px;position:relative;background:repeating-linear-gradient(90deg,var(--pen) 0 6px,transparent 6px 11px);animation:wire 1s linear infinite;background-size:22px 2px}
@keyframes wire{to{background-position:22px 0}}
.lock{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--mono);font-size:10.5px;background:var(--card);padding:3px 7px;border-radius:6px;box-shadow:0 0 0 1px var(--line);white-space:nowrap}
.exts{display:grid;grid-template-columns:repeat(3,64px);gap:14px}.exts span{width:64px;height:64px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--line),0 8px 18px -10px rgba(0,0,0,.3);display:grid;place-items:center}.exts img{width:36px;height:36px;border-radius:8px}
.boosts span{width:64px;height:64px;border-radius:16px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:20px;box-shadow:0 8px 18px -10px rgba(0,0,0,.4)}
.more{margin-top:20px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 20px;border-radius:14px;background:var(--day-2)}
.more p{color:var(--dim);font-size:15px}.more .names{color:var(--ink);font-weight:500}

.end{padding-block:40px 30px}
.endcard{position:relative;text-align:center;padding-block:clamp(48px,9vw,110px);display:flex;flex-direction:column;align-items:center;gap:22px}
.endcard .endicon{width:clamp(110px,14vw,160px);height:auto;filter:drop-shadow(0 18px 30px rgba(30,90,200,.25))}
.endcard .h2{max-width:none}
.endcard .und{position:relative;white-space:nowrap}
.endcard .und svg{position:absolute;left:-2%;right:-2%;bottom:-.12em;width:104%;height:.32em;overflow:visible}
.endcard .und path{fill:none;stroke:var(--pen);stroke-width:3;stroke-linecap:round}
.endcard .mono{color:var(--dim)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center;padding-block:26px 50px;font-size:13.5px;color:var(--dim)}
.foot nav{display:flex;gap:22px;flex-wrap:wrap}.foot a{text-decoration:none}
.foot .brand{color:var(--ink);font-size:16px}

.notes{background:var(--day-2);border-top:1px solid var(--line);padding-block:80px 100px}
.notes .wrap{max-width:980px}
.notes h2{font-size:32px;letter-spacing:-.03em;font-weight:600;margin-bottom:10px}
.notes h3{font-size:20px;letter-spacing:-.02em;font-weight:600;margin:44px 0 12px}
.notes p,.notes li{color:#373d48;font-size:15.5px;line-height:1.6;max-width:74ch}
.notes ul,.notes ol{padding-left:20px;margin:8px 0}.notes li{margin:5px 0}
.notes code{font-family:var(--mono);font-size:13px;background:var(--card);padding:1px 5px;border-radius:5px;box-shadow:0 0 0 1px var(--line)}
.tbl{overflow-x:auto;margin-top:14px;border-radius:12px;box-shadow:0 0 0 1px var(--line);background:var(--card)}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:14px}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--mono);font-size:11.5px;font-weight:500;color:var(--dim);text-transform:uppercase;letter-spacing:.05em}
tr:last-child td{border-bottom:0}
.pill2{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.p-home{background:#ece6ff;color:#5b3bc4}.p-page{background:#e6f1ff;color:#2560a8}.p-bento{background:#e8f6ee;color:#1f7a4a}.p-no{background:#f3f0ea;color:#7a6a4f}

@media (max-width:899px){
  .scrolly{display:block;margin-top:36px}
  .stick > .in{position:static;height:auto;display:block}
  .stick{margin-block:0}
  .step{display:none}
  .cap2,.pills2{display:flex!important}
  .bento{grid-template-columns:minmax(0,1fr)}.mac{width:96px;height:64px}.wire{width:44px}.tile{min-width:0}.t-wide,.t-nar,.t-half{grid-column:auto}
  .trio{grid-template-columns:1fr}
  .endcard .peekwin{display:none}
}
@media (max-width:719px){
  .herodisp .display .scrn,.agentdisp .display .scrn,.stick .display .scrn{aspect-ratio:1/1}
  .player{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut);mask-image:linear-gradient(90deg,transparent,#000 var(--gut),#000 calc(100% - var(--gut)),transparent)}
  .player::-webkit-scrollbar{display:none}
  .chap{flex:none;scroll-snap-align:center}
  .cap{font-size:15px;min-height:4.5em}
  .herodisp{margin-top:40px}
}
@media (max-width:520px){.links a:not(.navcta){display:none}.links .sep{display:none}.lede{font-size:17px}.chap{height:32px;font-size:12.5px;padding:0 11px}}
@media (prefers-reduced-motion:reduce){.marq-in,.wire{animation:none}}

/* ===== hero, in Yab's own look (fast-web page.css): paper ground, the system's type set big, a pen that marks ===== */
.hero{--paper:#FBFBFB;--hink:#171717;--hink2:rgba(23,23,23,.8);--hmuted:#6b6b6c;--penc:#8a5cf5;--violet:#8a5cf5;
  position:relative;overflow:hidden;background:var(--paper);color:var(--hink);margin-top:-62px;padding-top:62px}
@supports (color:AccentColor){.hero{--penc:AccentColor}}
.hero::before{content:none}
.hero .paper{position:absolute;inset:0;pointer-events:none;opacity:.07;background-image:var(--grain-dark);background-size:64px 64px}
.hero .wrap.hv{position:relative;text-align:left;padding-block:86px 0}
.hero .h1{font:600 clamp(50px,7.4vw,100px)/1 -apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,sans-serif;letter-spacing:-.034em;color:var(--hink);text-wrap:balance}
.hero .dot{color:var(--violet)}
.ini{position:relative;display:inline-block}
.ini svg{position:absolute;left:-.09em;top:.02em;width:calc(100% + .18em);height:.98em;overflow:visible;pointer-events:none}
.ini.lc svg{top:.27em;height:.74em}
.ini path{fill:none;stroke:#d93b30;stroke-width:2.4;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:draw .55s cubic-bezier(.6,.05,.3,1) forwards}
.ini:nth-of-type(1) path{animation-delay:.35s}.ini:nth-of-type(2) path{animation-delay:.6s}.ini:nth-of-type(3) path{animation-delay:.85s}
.hero .h1{position:relative;display:inline-block}
.yabnote{position:absolute;left:100%;top:.42em;margin-left:.2em;font:600 clamp(26px,2.6vw,36px)/1 var(--hand);color:#d93b30;letter-spacing:0;white-space:nowrap;transform:rotate(-6deg);opacity:0;animation:noteIn .4s 1.25s ease-out forwards}
@keyframes noteIn{from{opacity:0;transform:rotate(-6deg) translateY(4px)}to{opacity:1;transform:rotate(-6deg)}}
@media (max-width:900px){.yabnote{position:static;display:block;margin:10px 0 0;transform:rotate(-3deg);animation-name:noteIn2}}
@keyframes noteIn2{from{opacity:0}to{opacity:1;transform:rotate(-3deg)}}
.und{position:relative;display:inline-block}
.und svg{position:absolute;left:-1%;bottom:-.1em;width:102%;height:.24em;overflow:visible}
.und path{fill:none;stroke:var(--penc);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw .9s .35s cubic-bezier(.6,.05,.3,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hero .sub{margin:26px 0 0;max-width:24ch;color:var(--hink2);font:500 clamp(20px,2.3vw,27px)/1.32 -apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",sans-serif;letter-spacing:-.012em}
.hctas{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:32px;font-size:15px}
.hctas .btn.dark{background:#171717;color:#fff;height:40px;padding:0 18px;border-radius:10px;font:600 15px -apple-system,system-ui,"Inter",sans-serif;letter-spacing:-.01em}
.hctas .link{color:var(--hink);text-decoration:none;font-weight:500}
.hero .fine{margin:14px 0 0;color:var(--hmuted);font-size:13.5px;letter-spacing:-.005em}
.hstage{position:relative;margin-top:64px}
.hero .glass.tile{border-radius:34px;padding:22px}
.hero .glass.tile .display{max-width:none;padding:0;border-radius:12px;background:none;box-shadow:0 0 0 1px rgba(20,20,20,.08),0 26px 50px -22px rgba(10,10,40,.5)}
.hero .glass.tile .display .scrn{border-radius:12px}
.hnote{position:absolute;z-index:4;font:600 24px/1 "Caveat","Bradley Hand",cursive;color:var(--penc);white-space:nowrap;pointer-events:none;text-shadow:0 0 10px var(--paper),0 0 2px var(--paper)}
.hnote svg{position:absolute;width:52px;height:36px;overflow:visible}
.hnote path{fill:none;stroke:var(--penc);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.n-real{right:4%;top:-40px}.n-real svg{right:-46px;top:12px}
.tape{display:none;position:absolute;z-index:5;width:150px;height:34px;background:rgba(255,226,140,.62);box-shadow:0 1px 2px rgba(0,0,0,.08);backdrop-filter:blur(1px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0 3px,#000 3px calc(100% - 3px),transparent 0);mask-image:linear-gradient(90deg,transparent 0 3px,#000 3px calc(100% - 3px),transparent 0)}
.doodles{display:none;position:absolute;inset:0;pointer-events:none;z-index:1}
.doodles svg{position:absolute;overflow:visible}
.doodles path,.doodles circle{fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1s cubic-bezier(.6,.05,.3,1) forwards}
.hero .cap{color:var(--hmuted);text-align:center;margin-left:auto;margin-right:auto}
/* the words centered over the screen */
.hero .htext{text-align:center;margin-inline:auto}
.hero .htext .sub{margin-left:auto;margin-right:auto;max-width:30ch}
.hero .htext .hctas{justify-content:center}
.hero .cap b{color:var(--hink)}
.hero .player{justify-content:center;margin-left:auto;margin-right:auto}
/* chapters as Liquid Glass capsules: the paper seen through, a lit top edge, the progress a tint inside the glass */
.hero .chap,.pills2 .chap{height:38px;padding:0 16px;color:rgba(23,23,23,.62);font-weight:520;
  background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.04) 55%,rgba(255,255,255,.2));
  -webkit-backdrop-filter:blur(.7px) saturate(1.8);backdrop-filter:blur(.7px) saturate(1.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(23,23,40,.05),inset 0 0 0 .5px rgba(255,255,255,.7),
    0 0 0 .5px rgba(23,23,40,.12),0 8px 18px -8px rgba(30,30,70,.28),0 1px 2px rgba(30,30,70,.08);
  transition:color .15s,box-shadow .2s,transform .2s cubic-bezier(.2,.8,.2,1)}
.hero .chap::before,.pills2 .chap::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:radial-gradient(80% 55% at 26% -12%,rgba(255,255,255,.7),rgba(255,255,255,0) 60%),radial-gradient(60% 45% at 78% 118%,rgba(255,255,255,.4),rgba(255,255,255,0) 60%)}
/* the rim: bright where the light comes from, at the top left and the foot, thin elsewhere */
.hero .chap::after,.pills2 .chap::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;padding:1px;
  background:linear-gradient(160deg,rgba(255,255,255,1),rgba(255,255,255,.25) 35%,rgba(160,170,210,.25) 60%,rgba(255,255,255,.9));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.hero .chap:hover,.pills2 .chap:hover{color:rgba(23,23,23,.9)}
.hero .chap.on,.pills2 .chap.on{color:#171717;box-shadow:inset 0 1px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(23,23,40,.06),inset 0 0 0 .5px rgba(255,255,255,.8),
    0 0 0 .5px rgba(23,23,40,.16),0 12px 24px -10px rgba(70,50,160,.38),0 1px 2px rgba(30,30,70,.1)}
.hero .chap .fill,.pills2 .chap .fill{background:linear-gradient(90deg,rgba(150,120,255,.26),rgba(120,175,255,.30));
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 14px),transparent)}
.hero .chap.done .fill,.pills2 .chap.done .fill{background:none}
.hero .tryrow{justify-content:flex-start}
.hero .try{background:#171717;color:#fff;box-shadow:none}
.hero .driving{justify-content:flex-start;color:var(--hmuted)}
.hero .driving button{background:#171717;color:#fff}
.hero .strip{padding:56px 0 64px}
.hero .strip .mono{color:var(--hmuted)}
.hero .strip{display:flex;flex-direction:column;gap:26px}
.hero .srow{display:flex;flex-direction:column;align-items:center;gap:14px}
.hero .logos{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 34px}
.hero .logos span{display:inline-flex;align-items:center;gap:9px;font-size:19px;font-weight:600;letter-spacing:-.02em;color:rgba(23,23,23,.62);white-space:nowrap}
.hero .logos img{width:30px;height:30px;flex:none}
@media (max-width:600px){.hero .logos{gap:12px 22px}.hero .logos span{font-size:16px}.hero .logos img{width:26px;height:26px}}

/* B · Yearbook: a lined notebook page, ballpoint doodles, the screen taped on */
.hero[data-v="b"]{--paper:#fbfaf5;--m:calc(max(var(--gut), (100vw - var(--wrap)) / 2 + var(--gut)) - 20px)}
.hero[data-v="b"] .paper{opacity:1;background:
  linear-gradient(90deg,transparent 0 calc(var(--m,64px) - 1px),rgba(226,92,92,.55) calc(var(--m,64px) - 1px) calc(var(--m,64px) + 1px),transparent 0),
  repeating-linear-gradient(180deg,transparent 0 33px,rgba(98,140,200,.26) 33px 34px)}
.hero[data-v="b"] .doodles{display:block}
.hero[data-v="b"] .tape{display:block}
.hero[data-v="b"] .tape.t1{left:-28px;top:-8px;transform:rotate(-33deg)}
.hero[data-v="b"] .tape.t2{right:-28px;top:-8px;transform:rotate(31deg)}
.hero[data-v="b"] .glass.tile{background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.08),0 30px 60px -30px rgba(40,30,10,.35)}
.hero[data-v="b"] .glass.tile > .gl{display:none}
.hero[data-v="b"] .n-real{color:#d93b30}.hero[data-v="b"] .n-real path{stroke:#d93b30}
.hero[data-v="b"] .und path{stroke:#d93b30}
.hero[data-v="b"] .h1 .dot{color:#d93b30}


@media (max-width:719px){.doodles svg.wide{display:none}.hero[data-v="b"]{--m:-9px}}
@media (max-width:719px){.pin-note{display:none!important}.n-real{display:none}.hero .glass.tile{padding:10px;border-radius:22px}.hero .glass.tile .display,.hero .glass.tile .display .scrn{border-radius:12px}.tape{display:none!important}}

/* the variant picker */

/* The glass (glass.js): a tile of reeded glass with paint under it, round
   as the icon is, a little bigger than what stands on it, its corner the
   window's plus the room round it. */
.glass { position: relative; isolation: isolate; }
.glass > .gl { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.glass > .gl svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.glass > .gl .fl { position: absolute; inset: 0; }
.glass > :not(.gl) { position: relative; z-index: 1; }
.tile { border-radius: 44px; padding: 30px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.44), 0 34px 70px -34px rgba(26,26,64,.4), 0 0 0 .5px rgba(0,0,0,.07); }
.ch .tile { padding: 18px; }
.tile .live { box-shadow: 0 0 0 1px rgba(20,20,20,.08), 0 26px 50px -22px rgba(10,10,40,.5); }
@media (max-width: 1240px) { .ch .tile { padding: 10px; } }
@media (max-width: 900px) { .tile, .ch .tile { padding: 12px; } }

/* The pen's notes keep a halo of the page's own color, to read near glass. */
.yp .note { text-shadow: 0 0 10px var(--dots-ground), 0 0 2px var(--dots-ground); }
.yp .ch-fig .term { z-index: 3; }

/* The changelog: the newest version on glass, the rest calm on white. */
.log .newest-tile { border-radius: 30px; padding: 22px; margin: 6px 0 10px; }
.log .newest-tile .card.newest { margin: 0; box-shadow: 0 0 0 1px rgba(20,20,20,.06), 0 24px 44px -24px rgba(10,10,40,.5); }
.log .rel-tile { border-radius: 30px; padding: 30px 30px 26px; margin: 8px 0 26px; color: #0d1330; }
.log .rel-tile .head, .log .rel-tile .headline { margin-top: 0; }
.log .rel-tile .headline { font-size: 22px; line-height: 1.32; margin-bottom: 0; max-width: 32ch; }
.log .rel-tile .lb { color: #2a1a7a; }
.log .rel-tile time { color: rgba(30,37,71,.7); }
/* A veil under the words, fading out to the right, so the paint never wins. */
.log .rel-tile::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(100deg, rgba(251,250,248,.82) 0%, rgba(251,250,248,.6) 45%, rgba(251,250,248,0) 85%); }
.log .rel-tile > :not(.gl) { text-shadow: 0 1px 12px rgba(251,250,248,.7); }
@media (prefers-color-scheme: dark) {
  .log .rel-tile { color: #eef0ff; }
  .log .rel-tile .lb { color: #c7b6ff; }
  .log .rel-tile time { color: #c9cbe6; }
  .log .rel-tile::after { background: linear-gradient(100deg, rgba(10,10,16,.78) 0%, rgba(10,10,16,.55) 45%, rgba(10,10,16,0) 85%); }
  .log .rel-tile > :not(.gl) { text-shadow: 0 1px 14px rgba(0,0,0,.6); }
}

.scr{--grain-dark:url(/home/i/grain-dark.0cb3a0b1.png);--grain-light:url(/home/i/grain-light.689a3493.png)}
/* ===== The Mac screen: native points (1440 x 900), scaled to its frame ===== */
.display{position:relative;width:100%;max-width:1240px;margin:0 auto;padding:0;border-radius:12px;
  background:none;box-shadow:0 0 0 1px rgba(20,20,30,.1),0 30px 60px -28px rgba(10,10,40,.45)}
.display .scrn{position:relative;width:100%;aspect-ratio:1440/900;border-radius:12px;overflow:hidden;background:linear-gradient(160deg,#9fc2ee,#7d9be0 45%,#a88bd8)}
.scr{position:absolute;left:0;top:0;width:1440px;height:900px;transform-origin:0 0;overflow:hidden;transition:transform 600ms cubic-bezier(.45,.05,.25,1);
  font:13px/1.3 -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;color:#171717;letter-spacing:-.003em;-webkit-font-smoothing:antialiased;cursor:default;user-select:none;-webkit-user-select:none}
.scr *{box-sizing:border-box}
.scr{text-align:left}
.scr svg{display:block;flex:none}
.wall{position:absolute;inset:0;background:
  radial-gradient(70% 90% at 12% 110%,#5a7fd8 0%,transparent 60%),
  radial-gradient(60% 80% at 95% 105%,#c58ad6 0%,transparent 60%),
  radial-gradient(90% 70% at 60% -10%,#bcd7f5 0%,transparent 65%),
  linear-gradient(160deg,#9fc2ee 0%,#7d9be0 45%,#a88bd8 100%)}
.wall::after{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 60% at 30% 70%,rgba(255,255,255,.35),transparent 60%),
  radial-gradient(80% 40% at 80% 40%,rgba(255,255,255,.25),transparent 60%)}
.wall.dusk{background:radial-gradient(70% 90% at 15% 110%,#3b2a6b 0%,transparent 60%),radial-gradient(60% 80% at 95% 105%,#8a3d6b 0%,transparent 60%),linear-gradient(160deg,#1d2440 0%,#2b2753 50%,#3d2a52 100%)}
.wall.dusk::after{opacity:.25}

/* menu bar */
.mbar{position:absolute;left:0;right:0;top:0;height:24px;display:flex;align-items:center;padding:0 10px 0 18px;gap:20px;font-size:13px;color:#fff;
  background:rgba(255,255,255,.08);backdrop-filter:blur(30px) saturate(1.6);-webkit-backdrop-filter:blur(30px) saturate(1.6);text-shadow:0 0 6px rgba(0,0,0,.18);z-index:40}
.mbar b{font-weight:700}
.mbar .menus{display:flex;align-items:center;gap:20px}
.mbar .apple{width:14px;height:16px}
.mbar .r{margin-left:auto;display:flex;gap:16px;align-items:center}
.mbar .r svg{width:17px;height:17px}

/* the window */
.win{position:absolute;border-radius:18px;overflow:hidden;--tone:#A9BDEB;background:var(--tone);transition:background .5s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 0 0 .5px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.18) inset,0 24px 70px rgba(0,0,0,.32),0 6px 18px rgba(0,0,0,.14)}
.win::before,.win::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;background-size:64px 64px;z-index:0}
.win::before{background-image:var(--grain-dark)}
.win::after{background-image:var(--grain-light);mix-blend-mode:plus-lighter}
.win > *{z-index:1}

/* traffic lights: AppKit's, close centered 26 from the edge, 20 apart */
.lights{position:absolute;left:19px;top:19px;display:flex;gap:6px;z-index:3}
.lights i{width:14px;height:14px;border-radius:50%;background:#FF5F57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.18)}
.lights i:nth-child(2){background:#FEBC2E}.lights i:nth-child(3){background:#28C840}
/* a window that is not in front: grey lights, as macOS draws them */
.inactive .lights i,.inactive .lights i:nth-child(2),.inactive .lights i:nth-child(3){background:rgba(128,128,128,.32);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12)}
.term.inactive .tb{color:rgba(255,255,255,.35)}

/* the column: 228, margin 8, rows 36 + 5 */
.col{position:absolute;left:0;top:0;bottom:0;width:228px;transition:opacity .2s}
.helm{position:absolute;right:8px;top:11px;display:flex;gap:5px}
.door{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;color:var(--muted)}
.door:hover{background:var(--hover)}
.door svg{width:18px;height:18px}
.door.off{color:var(--faint);opacity:.55}
.plate{position:absolute;left:8px;right:8px;top:49px;height:36px;border-radius:10px;background:var(--rest);display:flex;align-items:center;padding:0 10px;font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;transition:background .15s}
.plate:hover{background:var(--rest-hover)}
.plate .muted{color:var(--muted)}
.plate .shut{margin-left:auto;display:flex;gap:2px;opacity:0;transition:opacity .15s}
.col:hover .plate .shut{opacity:1}
.plate .shut span{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--muted)}
.plate .shut svg{width:16px;height:16px}
.pins{position:absolute;left:8px;right:8px;top:93px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pin{height:45px;border-radius:10px;background:var(--rest);display:grid;place-items:center;transition:background .12s;position:relative}
.pin:hover{background:var(--rest-hover)}
.pin.on{background:var(--wash)}
.pin img{width:16px;height:16px;border-radius:3.5px}
.pin .badge{position:absolute;right:7px;top:6px;min-width:14px;height:14px;padding:0 4px;border-radius:7px;background:#ff3b30;color:#fff;font-size:9.5px;font-weight:600;display:grid;place-items:center}
.list{position:absolute;left:8px;right:8px;top:146px;bottom:42px;display:flex;flex-direction:column;gap:5px;overflow:hidden}
.spname{height:36px;display:flex;align-items:center;gap:6px;padding:0 10px;border-radius:10px;font-size:12.5px;font-weight:600;color:var(--muted);flex:none}
.spname .em{font-size:12.5px;width:14px;text-align:center}
.spname .dots3{margin-left:auto;width:24px;height:24px;border-radius:4px;display:none;place-items:center}
.spname:hover{background:var(--hover)}.spname:hover .dots3{display:grid}
.row{height:36px;flex:none;display:flex;align-items:center;gap:10px;padding:0 11px 0 10px;border-radius:10px;font-size:14px;color:var(--muted);position:relative;transition:background .12s,color .12s,transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s}
.row:hover{background:var(--hover);color:var(--strong-88)}
.row.on{background:var(--wash);color:var(--ink)}
.row .fav{width:16px;height:16px;border-radius:3.5px;flex:none}
.row .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.row .rend{width:15px;height:15px;flex:none;display:grid;place-items:center;position:relative}
.row .x{position:absolute;right:6px;top:6px;width:24px;height:24px;border-radius:4px;display:none;place-items:center;color:var(--muted)}
.row .x svg{width:16px;height:16px}
.row:hover .x{display:grid}.row .x:hover{background:rgba(23,23,23,.10);color:rgba(23,23,23,.75)}
.row:hover .rend{transform:translateX(-20px)}
.row .rend{transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.row.kid{padding-left:25px}
.row.calling{font-weight:500;color:var(--ink);background:var(--hover)}
.row .prog{position:absolute;left:0;top:0;bottom:0;border-radius:10px;background:rgba(23,23,23,.055);pointer-events:none}
.folder .t{font-weight:500;color:var(--strong)}
.folder .fg{width:16px;height:16px}
.kline{height:36px;flex:none;display:flex;align-items:center;padding:0 10px;position:relative}
.kline i{flex:1;height:1px;background:rgba(23,23,23,.08)}
.kline span{position:absolute;right:4px;font-size:11px;color:rgba(23,23,23,.6);padding:0 6px;opacity:0}
.kline:hover span{opacity:1}
.newtab{color:var(--faint)}.newtab:hover{color:var(--faint);background:var(--hover)}
.newtab.lit{background:var(--wash);color:var(--ink)}
.newtab svg{width:15px;height:15px;margin:0 .5px}
.pair{height:36px;flex:none;display:flex;gap:5px;padding:3px;border-radius:10px;background:var(--wash)}
.chip{flex:1;min-width:0;height:30px;border-radius:7px;display:flex;align-items:center;gap:6px;padding:0 6px;font-size:14px;background:#fff;box-shadow:0 0 0 .5px rgba(23,23,23,.07);color:rgba(23,23,23,.62)}
.chip.front{color:var(--ink)}
.chip img{width:14px;height:14px;border-radius:3px}
.chip span{white-space:nowrap;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 70%,transparent);mask-image:linear-gradient(90deg,#000 70%,transparent)}
.cfoot{position:absolute;left:8px;right:8px;bottom:8px;height:26px;display:flex;align-items:center;gap:2px}
.cfoot .door{width:26px;height:26px}
.cfoot .door svg{width:15px;height:15px}
.spaces{flex:1;display:flex;justify-content:center}
.spc{width:34px;height:26px;display:grid;place-items:center;border-radius:10px;font-size:12px;filter:grayscale(1);opacity:.5;transition:opacity .2s,filter .2s}
.spc:hover{background:var(--hover);opacity:.8}
.spc.on{filter:none;opacity:1}

/* the page card: 8 in, corner 10 (placed by the script) */
.card{position:absolute;border-radius:10px;background:#fff;overflow:hidden;z-index:2;
  box-shadow:0 1px 5px rgba(0,0,0,.10),0 0 0 1px rgba(23,23,23,.06)}
.card.b{z-index:1}
.card.gone{visibility:hidden;pointer-events:none}
.card .pg{position:absolute;left:0;right:0;top:0;bottom:0}
.card .pg{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.card iframe,.peek iframe{position:absolute;left:0;top:0;width:100%;height:100%;border:0;background:#fff;display:block}
.card iframe.off,.peek iframe.off{z-index:0;pointer-events:none}
.card iframe:not(.off),.peek iframe:not(.off){z-index:1}
.card iframe,.peek iframe{will-change:transform}
.card,.peek{contain:layout paint}
/* while the halves move, the pages kept laid out behind the one in front must not show past its edge */
.win.splitting .card iframe.off,.win.unsplitting .card iframe.off{visibility:hidden}
.win.unsplitting .card .band{display:flex}
.card.front::after{content:"";position:absolute;inset:0;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(23,23,23,.3);pointer-events:none;z-index:5}
.dim{position:absolute;border-radius:10px;background:rgba(0,0,0,.16);opacity:0;pointer-events:none;transition:opacity .26s cubic-bezier(.4,0,.2,1);z-index:4}
.peeking .dim{transition:opacity .27s cubic-bezier(.32,.72,0,1)}
.peeking .dim{opacity:1}
/* peek */
.peek{position:absolute;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(23,23,23,.08),0 8px 24px rgba(0,0,0,.14);opacity:0;pointer-events:none;z-index:6}
.knobs{position:absolute;display:flex;flex-direction:column;gap:10px;z-index:7;opacity:0;pointer-events:none;transition:opacity .1s}
.peeking .knobs{opacity:1;pointer-events:auto;transition:opacity .136s .204s}
.knob{width:36px;height:36px;border-radius:50%;background:rgba(29,29,29,.86);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:grid;place-items:center;color:rgba(255,255,255,.96);box-shadow:0 0 0 1px rgba(0,0,0,.18),0 4px 14px rgba(0,0,0,.14);position:relative}
.knob svg{width:19px;height:19px}
.knob:hover{background:rgba(45,45,45,.9)}
.knob .tip{position:absolute;right:46px;top:50%;transform:translateY(-50%);white-space:nowrap;background:rgba(29,29,29,.92);color:#fff;font-size:12px;padding:5px 9px;border-radius:7px;display:none;gap:8px;align-items:center}
.knob:hover .tip{display:flex}

/* the field (⌘T): 750 wide, field 58, rows 38, corner 26 */
.box{position:absolute;width:750px;height:475px;border-radius:26px;overflow:hidden;z-index:9;opacity:0;pointer-events:none;transition:opacity .22s cubic-bezier(.2,.8,.2,1);
  background:rgba(250,250,251,.97);
  box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 2px 1.5px rgba(0,0,0,.05),0 1px .5px rgba(0,0,0,.05),0 28px 70px -10px rgba(0,0,0,.28)}
.box.open{opacity:1;pointer-events:auto}
.box .fl{height:58px;display:flex;align-items:center;gap:12px;padding:0 16px}
.box .fl .mk{width:22px;display:grid;place-items:center;color:var(--box-muted)}
.box .fl .mk svg{width:20px;height:20px}
.box .q{font-size:20px;color:#171717;display:flex;align-items:center;min-width:0;flex:1;white-space:nowrap}
.box .q .ph{color:rgba(23,23,23,.3)}
.box .caret{width:2px;height:24px;background:#0a84ff;margin-left:1px;animation:yblink 1.1s steps(1) infinite}
@keyframes yblink{50%{opacity:0}}
.box .list2{padding:0 8px;height:367px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 calc(100% - 24px),transparent);mask-image:linear-gradient(#000 calc(100% - 24px),transparent)}
.box h6{margin:0;font-size:12px;font-weight:400;color:var(--box-muted);padding:12px 8px 6px}
.box h6:first-child{padding-top:4px}
.box .r{height:38px;display:flex;align-items:center;gap:12px;padding:0 8px;border-radius:10px;font-size:13.5px;white-space:nowrap}
.box .r.hi{background:rgba(23,23,23,.08)}
.box .r .m{width:22px;height:22px;display:grid;place-items:center;flex:none}
.box .r .m img{width:18px;height:18px;border-radius:4px}
.box .r .well{width:22px;height:22px;border-radius:5px;background:rgba(0,0,0,.04);box-shadow:inset 0 .5px 0 rgba(0,0,0,.12),inset 0 -.5px 0 rgba(0,0,0,.025),inset .5px 0 0 rgba(0,0,0,.06),inset -.5px 0 0 rgba(0,0,0,.06);display:grid;place-items:center;color:#171717;font-size:10.5px;font-weight:600;font-variant-numeric:tabular-nums}
.box .r .well svg{width:15px;height:15px}
.box .r .k{color:#171717}
.box .r .d{color:var(--box-muted);overflow:hidden;text-overflow:ellipsis;min-width:0}
.box .r .e{margin-left:auto;color:var(--box-muted);display:flex;gap:6px;align-items:center;flex:none}
.box .r strong{font-weight:600}
.box .footp{position:absolute;left:8px;right:8px;bottom:8px;height:34px;display:flex;align-items:center;gap:8px}
.pill{height:34px;padding:2px;border-radius:17px;display:flex;gap:2px;background:rgba(255,255,255,.62);box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);backdrop-filter:blur(10px)}
.pill .fb{height:30px;border-radius:15px;display:flex;align-items:center;gap:6px;padding:0 12px 0 14px;font-size:13.5px;color:rgba(23,23,23,.72)}
.pill .fb.strong{color:#171717}
.pill .fb:hover{background:rgba(23,23,23,.06)}
.pill .round{width:30px;padding:0;justify-content:center}
.pill .round svg{width:16px;height:16px}

/* keys: KeyArt on plates */
.kk{display:inline-flex;gap:2px;align-items:center;opacity:.6}
.kk i{min-width:17px;height:17px;padding:0 4px;border-radius:5px;background:color-mix(in srgb,currentColor 14%,transparent);display:inline-grid;place-items:center;font-style:normal;font-size:11.5px;font-weight:500}
.kk svg{width:12px;height:12px}

/* agent: dock, pointer, ask card */
.dock{position:absolute;height:36px;border-radius:12px;display:flex;align-items:center;gap:10px;padding:0 4px 0 12px;color:rgba(255,255,255,.96);font-size:12.5px;white-space:nowrap;z-index:8;
  background:rgba(29,29,29,.88);backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);box-shadow:0 0 0 1px rgba(0,0,0,.18),0 4px 14px rgba(0,0,0,.14);
  opacity:0;transform:translate(-50%,14px);transition:opacity .22s cubic-bezier(.2,.8,.2,1),transform .22s cubic-bezier(.2,.8,.2,1),width .3s cubic-bezier(.2,.8,.2,1),background .22s,color .22s}
.dock.up{opacity:1;transform:translate(-50%,0)}
.dock .w{min-width:150px;display:grid;overflow:hidden;height:16px;line-height:16px}
.dock .w span{grid-area:1/1;transition:transform .2s,opacity .15s;white-space:nowrap}
.dock.done .tk{display:none}.dock.done{padding-right:14px}
.dock.light{background:rgba(255,255,255,.94);color:rgba(0,0,0,.92)}
.btn28{height:28px;border-radius:8px;padding:0 13px;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;background:rgba(255,255,255,.14);color:inherit;transition:background .14s,transform .16s}
.btn28:hover{background:rgba(255,255,255,.2)}
.dock.light .btn28{background:rgba(23,23,23,.07)}
.btn28 .kk{opacity:.6}
.apointer{position:absolute;width:24px;height:24px;border-radius:12px;display:grid;place-items:center;background:rgba(29,29,29,.9);color:#fff;z-index:12;opacity:0;transition:left .45s cubic-bezier(.4,0,.2,1),top .45s cubic-bezier(.4,0,.2,1),opacity .2s,transform .2s;box-shadow:0 2px 8px rgba(0,0,0,.25);pointer-events:none}
.apointer svg{width:16px;height:16px}
.apointer.on{opacity:1}
.apointer.press{transform:scale(.8)}
.ring{position:absolute;width:24px;height:24px;border-radius:50%;border:1px solid rgba(23,23,23,.3);pointer-events:none;z-index:11;animation:yring .34s ease-out forwards}
@keyframes yring{from{transform:scale(1.2);opacity:1}to{transform:scale(2);opacity:0}}
.acard{position:absolute;width:460px;border-radius:20px;padding:12px;z-index:9;color:#171717;
  background:rgba(255,255,255,.82);backdrop-filter:blur(30px) saturate(1.8);-webkit-backdrop-filter:blur(30px) saturate(1.8);box-shadow:0 0 0 1px rgba(23,23,23,.07),0 8px 24px rgba(0,0,0,.14);
  opacity:0;transform:translate(-50%,10px);transition:opacity .22s cubic-bezier(.2,.8,.2,1),transform .3s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.acard.up{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.acard .choices{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.acard .ch{min-height:28px;border-radius:8px;background:rgba(23,23,23,.03);display:flex;align-items:center;justify-content:space-between;padding:6px 10px;font-size:12.5px}
.acard .ch:hover{background:#f6f6f6}
.acard .ln{display:flex;align-items:center;gap:8px}
.acard .qq{font-size:12.5px;font-weight:500;flex:1}
.acard .qq small{display:block;font-weight:400;font-size:12px;color:#616161}
.b24{height:24px;border-radius:8px;padding:0 10px;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;background:rgba(23,23,23,.07);transition:background .14s,transform .16s;white-space:nowrap}
.b24:hover{background:rgba(23,23,23,.11)}
.b24.pri{background:rgba(23,23,23,.86);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.b24.pri:hover{background:rgba(23,23,23,.78)}
.b24.press,.btn28.press{transform:scale(.94)}
.answer .txt{font-size:12.5px;line-height:1.45;padding:2px 2px 12px;border-bottom:1px solid #e8e8e8;margin-bottom:12px}
.answer .txt b{font-weight:600}
.answer .bar2{display:flex;align-items:center;gap:6px}
.answer .comp{flex:1;font-size:12.5px;color:rgba(23,23,23,.4);display:flex;align-items:center;gap:6px}

/* corner toast */
.toast{position:absolute;right:22px;bottom:22px;display:flex;align-items:center;gap:10px;height:40px;padding:0 14px 0 12px;border-radius:14px;font-size:12.5px;color:rgba(255,255,255,.96);z-index:10;
  background:rgba(29,29,29,.88);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 8px 22px rgba(0,0,0,.2);opacity:0;transform:translateY(8px);transition:opacity .22s,transform .3s cubic-bezier(.2,.8,.2,1)}
.toast.up{opacity:1;transform:none}
.toast svg{width:16px;height:16px}

/* welcome: Make it yours. (1180 x 780 stage) */
.welcome{position:absolute;inset:0;background:#F5F5F7;z-index:20;opacity:0;pointer-events:none;transition:opacity .4s}
.welcome.up{opacity:1;pointer-events:auto}
.welcome::before,.welcome::after{content:"";position:absolute;inset:0;opacity:.07;background-size:64px 64px;pointer-events:none}
.welcome::before{background-image:var(--grain-dark)}.welcome::after{background-image:var(--grain-light);mix-blend-mode:plus-lighter}
.welcome .stage{position:absolute;left:50%;top:50%;width:1180px;height:780px;transform:translate(-50%,-50%) scale(var(--ws,1))}
.welcome h2{position:absolute;left:0;right:0;top:70px;text-align:center;font-size:28px;font-weight:500;letter-spacing:-.015em;line-height:34px;margin:0}
.welcome .wsub{position:absolute;left:0;right:0;top:112px;text-align:center;font-size:15px;line-height:20px;color:#474747}
.welcome .bicon{position:absolute;left:318px;top:296px;width:128px;height:128px}
.welcome .bname{position:absolute;left:262px;top:436px;width:240px;text-align:center;font-size:15px;font-weight:500}
.welcome .bname small{display:block;font-size:12.5px;font-weight:400;color:#474747;margin-top:2px}
.counts{position:absolute;left:494px;top:282px;width:368px;padding:12px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px #e8e8e8,0 8px 24px rgba(0,0,0,.14)}
.counts .cr{height:38px;display:flex;align-items:center;gap:12px;padding:0 2px;font-size:13px;border-bottom:1px solid #e8e8e8}
.counts .cr:last-child{border:0}
.counts .ctile{width:22px;height:22px;border-radius:5.7px;display:grid;place-items:center;color:#fff;flex:none;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.4)}
.counts .ctile svg{width:13px;height:13px}
.counts .ctile.well{background:rgba(0,0,0,.04);color:#171717;box-shadow:inset 0 .5px 0 rgba(0,0,0,.12)}
.counts .tick{margin-left:auto;width:15px;height:15px}
.counts .tick path{stroke-dasharray:20;stroke-dashoffset:20}
.welcome.ticking .counts .tick path{animation:ytick .26s cubic-bezier(.4,0,.2,1) forwards;animation-delay:calc(.1s + var(--i)*.13s)}
@keyframes ytick{to{stroke-dashoffset:0}}
.counts .keep{height:58px;border:0;align-items:center}
.counts .keep b{font-weight:500;display:block}.counts .keep small{font-size:11.5px;color:#474747;display:block;line-height:1.3}
.sw{width:26px;height:15px;border-radius:8px;background:#34c759;position:relative;flex:none;margin-left:auto}
.sw::after{content:"";position:absolute;right:1.5px;top:1.5px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.wfoot{position:absolute;right:40px;bottom:36px;display:flex;gap:8px;align-items:center}
.b36{height:36px;border-radius:8px;padding:0 20px;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;transition:transform .16s,background .14s}
.b36.glass{background:rgba(255,255,255,.7);box-shadow:0 0 0 .5px rgba(0,0,0,.1),0 2px 6px rgba(0,0,0,.08);backdrop-filter:blur(12px)}
.b36.pri{background:rgba(23,23,23,.86);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.b36.quiet{color:#474747}
.b36.press{transform:scale(.96)}
.wnote{position:absolute;left:0;right:0;bottom:44px;text-align:center;font-size:12px;color:#474747;pointer-events:none}

/* terminal (Act two) */
.term{position:absolute;border-radius:12px;overflow:hidden;background:rgba(28,28,30,.96);color:#e6e6e6;font:12.5px/1.6 "SF Mono",ui-monospace,Menlo,monospace;z-index:2;
  box-shadow:0 0 0 .5px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08) inset,0 24px 70px rgba(0,0,0,.4)}
.term .tb{height:30px;display:flex;align-items:center;justify-content:center;font:600 12.5px -apple-system,system-ui,sans-serif;color:rgba(255,255,255,.55);position:relative;border-bottom:1px solid rgba(255,255,255,.06)}
.term .tb .lights{left:10px;top:8px;gap:8px}.term .tb .lights i{width:12px;height:12px}
.term .tbody{padding:12px 14px;white-space:pre-wrap}
.term .o{color:#d97757}.term .g{color:rgba(230,230,230,.45)}.term .w{color:#fff}.term .ok{color:#7ad19a}.term .ask{color:#e9a23b}
.term .box2{border:1px solid rgba(255,255,255,.18);border-radius:6px;padding:4px 10px;margin-top:10px;color:rgba(255,255,255,.75)}
.term .cur{display:inline-block;width:7px;height:14px;background:#e6e6e6;vertical-align:-2px;animation:yblink 1s steps(1) infinite}

/* the pointer and the keys a screen recording shows */
.cursor{position:absolute;left:0;top:0;width:0;height:0;z-index:50;pointer-events:none;transition:transform .7s cubic-bezier(.45,.05,.25,1);will-change:transform}
/* the Mac's own arrow (NSCursor.arrow, arrow.png): 28 by 40 with its shadow, the tip at 5,5 put on the point; a press doesn't change it, as on the Mac */
.cursor .arrow{position:absolute;left:-5px;top:-5px;width:28px;height:40px;max-width:none;display:block}
.cursor.hide{opacity:0}
.keyhud{position:absolute;left:50%;bottom:150px;transform:translateX(-50%) translateY(10px);display:flex;gap:6px;padding:10px 14px;border-radius:16px;z-index:45;
  background:rgba(20,20,22,.78);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 10px 30px rgba(0,0,0,.3);opacity:0;transition:opacity .18s,transform .25s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.keyhud.up{opacity:1;transform:translateX(-50%)}
.keyhud i{min-width:44px;height:44px;padding:0 12px;border-radius:10px;background:rgba(255,255,255,.12);box-shadow:inset 0 -2px 0 rgba(0,0,0,.25),0 0 0 1px rgba(255,255,255,.08);display:grid;place-items:center;color:#fff;font:500 20px -apple-system,system-ui,sans-serif;font-style:normal}
.keyhud i svg{width:22px;height:22px}
.keyhud .word{font-size:15px;padding:0 14px}

.row.hot{background:var(--hover);color:var(--strong-88)}.row.on.hot{background:var(--wash)}
.knob.hot .tip{display:flex}.knob.hot{background:rgba(45,45,45,.9)}
.b24.hot{background:rgba(23,23,23,.11)}.b24.pri.hot{background:rgba(23,23,23,.78)}.b36.pri.hot{background:rgba(23,23,23,.78)}
.spc.hot{background:var(--hover);opacity:.8}

/* layout moves: column out, tabs across the top (TabBar.swift) */
.win.moving .card{transition:left .3s cubic-bezier(.2,.8,.2,1),top .3s cubic-bezier(.2,.8,.2,1),width .3s cubic-bezier(.2,.8,.2,1),height .3s cubic-bezier(.2,.8,.2,1)}
.win.still *{transition:none!important}
.lights{transition:top .3s cubic-bezier(.2,.8,.2,1)}
.win.top .lights{top:13px}
.col{transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1)}
.win.top .col{opacity:0;transform:translateX(-30px);pointer-events:none}
.tstrip{position:absolute;left:100px;right:8px;top:6px;height:28px;display:flex;gap:2px;align-items:center;opacity:0;pointer-events:none;transition:opacity .25s;white-space:nowrap;overflow:hidden}
.win.top .tstrip{opacity:1;pointer-events:auto}
.tstrip .tcap{height:28px;border-radius:8px;display:flex;align-items:center;gap:6px;padding:0 8px;font-size:12.5px;line-height:1;color:var(--ink);flex:none;margin:0}
.tstrip .tcap:hover{background:var(--hover)}
.tstrip .tcap .em{font-size:12px;width:14px;text-align:center}
.tstrip .tcap svg{color:rgba(23,23,23,.6);width:10px;height:10px;margin-left:0}
.tpin{width:30px;height:28px;border-radius:10px;background:var(--rest);display:grid;place-items:center;flex:none}
.tpin:hover{background:var(--rest-hover)}
.tpin img{width:16px;height:16px;border-radius:4px}
.kdiv{width:12px;height:16px;flex:none;position:relative}.kdiv::after{content:"";position:absolute;left:5.5px;top:0;width:1px;height:16px;background:rgba(23,23,23,.1)}
.tab{width:186px;height:28px;flex:0 1 186px;min-width:36px;border-radius:10px;display:flex;align-items:center;gap:6px;padding:0 7px 0 6px;font-size:14px;color:var(--muted);position:relative}
.tab:hover{background:var(--hover);color:var(--strong-88)}
.tab.on{background:var(--wash);color:var(--ink)}
.tab img{width:16px;height:16px;border-radius:4px;flex:none}
.tab .t{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.tab .x{position:absolute;right:4px;top:4px;width:20px;height:20px;border-radius:6px;display:none;place-items:center;color:var(--muted)}
.tab:hover .x{display:grid}.tab .x:hover{background:rgba(23,23,23,.1)}
.tplus{width:29px;height:27px;border-radius:8px;display:grid;place-items:center;color:var(--muted);opacity:0;flex:none}
.tstrip:hover .tplus{opacity:1}.tplus:hover{background:var(--hover)}

/* the address band (AddressBar.swift): 36, doors 30, the site centered in 13 medium */
.card .band{position:absolute;left:0;right:0;top:0;height:36px;display:none;align-items:center;padding:0 3px;background:#fff;border-bottom:1px solid rgba(23,23,23,.06);z-index:3;color:#474747}
.win.top .card .band,.win.split .card .band{display:flex}
.win.top .card .pg,.win.split .card .pg{transform:translateY(36px)}
.band .hl,.band .hr{display:flex;gap:4px;align-items:center;position:relative;z-index:1}
.band .hr{margin-left:auto}
.band .door{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#474747;transition:opacity .14s,background .12s}
.band .door:hover{background:rgba(23,23,23,.06);color:rgba(23,23,23,.88)}
.band .door.off{color:#616161;opacity:.5}
.band .door svg{width:18px;height:18px}
.band .door.sliders svg{width:20px;height:20px}
.band .door.ext img{width:16px;height:16px;border-radius:3px}
.band .site{position:absolute;left:50%;top:6px;transform:translateX(-50%);height:24px;border-radius:8px;display:flex;align-items:center;gap:4px;padding:0 8px;font-size:13px;font-weight:500;color:#171717;white-space:nowrap}
.band .site .mu{color:#474747}
.band .site .lk{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;color:#474747;opacity:0;transition:opacity .14s}
.band .site:hover{background:rgba(23,23,23,.06)}.band .site:hover .lk{opacity:1}
.win.split .card:not(.front) .band .q2{opacity:0}
.win.split .card:not(.front):hover .band .q2{opacity:1}
.band .door.hot{background:rgba(23,23,23,.06)}

/* split: the plate goes at once, the pins spring up 44 */
/* and comes back once the pins have sprung down past it */
.plate{transition:background .15s,opacity .16s ease-out .24s}
.win.split .plate{opacity:0;pointer-events:none;transition:none}
.pins{transition:top .45s cubic-bezier(.22,1.02,.36,1)}
.list{transition:top .45s cubic-bezier(.22,1.02,.36,1)}
.win.split .pins{top:49px}.win.split .list{top:102px}
.grip{position:absolute;width:3px;height:28px;border-radius:2px;background:rgba(23,23,23,.28);opacity:0;z-index:3;transition:opacity .14s;pointer-events:none}
.win.split:not(.splitting) .grip.show{opacity:1}
.row.pair{padding:3px;gap:5px;background:var(--wash)}
.row.pair .chip{flex:1;min-width:0;height:30px;border-radius:7px;display:flex;align-items:center;gap:6px;padding:0 6px;font-size:14px;background:#fff;box-shadow:0 0 0 .5px rgba(23,23,23,.07);color:var(--ink)}
.row.pair .chip img{width:14px;height:14px;border-radius:3px}
.row.pair .chip span{white-space:nowrap;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 70%,transparent);mask-image:linear-gradient(90deg,#000 70%,transparent)}
.plate .shut span img{width:14px;height:14px;border-radius:3px}
.plate .shut{gap:0}

/* Site Controls: an NSPopover, 280 wide, corner 20, inset 8 */
.sc{position:absolute;width:280px;border-radius:20px;background:#fff;z-index:12;color:#171717;
  box-shadow:0 0 0 .5px rgba(0,0,0,.2),0 12px 36px rgba(0,0,0,.2),0 2px 6px rgba(0,0,0,.08);opacity:0;transform:translateY(-4px) scale(.98);transform-origin:50% 0;pointer-events:none;transition:opacity .16s,transform .2s cubic-bezier(.2,.8,.2,1)}
.sc.up{opacity:1;transform:none;pointer-events:auto}
.sc .arrow{position:absolute;top:-8px;width:18px;height:9px;overflow:hidden}
.sc .arrow::after{content:"";position:absolute;left:3px;top:3px;width:12px;height:12px;background:#fff;transform:rotate(45deg);box-shadow:0 0 0 .5px rgba(0,0,0,.2);border-radius:2px}
.sc .in{padding:8px;display:flex;flex-direction:column;gap:8px}
.sc .acts{display:flex;gap:6px}
.sc .at{flex:1;height:34px;border-radius:10px;background:#efefef;display:grid;place-items:center;color:#474747}
.sc .at:hover,.sc .xt:hover{background:#e6e6e6}
.sc .eh{display:flex;justify-content:space-between;align-items:center;padding:4px 4px 0;font-size:12px}
.sc .eh b{font-weight:600}.sc .eh span{color:#616161}
.sc .grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.sc .xt{height:34px;border-radius:10px;background:#efefef;display:grid;place-items:center;position:relative;color:#474747}
.sc .xt img{width:18px;height:18px;border-radius:4px}
.sc .xt .pn{position:absolute;right:4px;top:3px;color:#474747;display:flex}
.sc .xt.hot{background:#e0e0e0}
.sc .sr2{display:flex;align-items:center;gap:10px;height:32px;padding:0 6px;border-radius:8px;font-size:13px;color:#171717}
.sc .sr2 svg{color:#474747}.sc .sr2 span{flex:1}.sc .sr2 em{font-style:normal;color:#616161}
.sc .conn{align-self:flex-start;display:flex;gap:6px;align-items:center;height:24px;padding:0 10px;border-radius:12px;background:#efefef;font-size:11.5px;color:#474747;margin:2px 4px 2px}
.sc .xt img{pointer-events:none}

.tab.hot{background:var(--hover);color:var(--strong-88)}
.tab.on.hot{background:var(--wash)}

.scr.locked{pointer-events:none}
.fingers{position:absolute;z-index:51;pointer-events:none;display:flex;flex-direction:column;gap:14px;margin:-34px 0 0 -17px}
.fingers i{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(0,0,0,.12),0 4px 14px rgba(0,0,0,.18);backdrop-filter:blur(6px)}

.scr.cam .keyhud{display:none}

.pin.hot,.tpin.hot{background:var(--rest-hover)}
.door.hot{background:var(--hover)}
.band .door.hot{background:rgba(23,23,23,.06)}
.box .r.hot{background:rgba(23,23,23,.08)}
.sc .at.hot{background:#e6e6e6}
.chip.hot{box-shadow:0 0 0 .5px rgba(23,23,23,.07),0 0 0 1px color-mix(in srgb,#0a84ff 55%,transparent)}
.peek{will-change:left,top,width,height}

/* buttons with keys, as Buttons.swift / KeysWeb.css draw them: plates as tall as the button less its inset,
   the trailing padding that inset, the words centered in the room left of the plates */
.btn28,.b24,.b36{gap:6px}
.btn28 .kk,.b24 .kk,.b36 .kk,.pill .fb .kk{opacity:.6;gap:2px}
.btn28:has(.kk){padding:0 4px 0 9.5px}.btn28 .kk{margin-left:3.5px}
.btn28 .kk i{min-width:20px;height:20px;padding:0 4px;border-radius:5px;font-size:12.5px}.btn28 .kk svg{width:13px;height:13px}
.b24:has(.kk){padding:0 4px 0 8px}.b24 .kk{margin-left:2px}
.b24 .kk i{min-width:16px;height:16px;padding:0 2px;border-radius:5px;font-size:11.5px}.b24 .kk svg{width:12px;height:12px}
.b36:has(.kk){padding:0 8px 0 13px}.b36 .kk{margin-left:7px}
.b36 .kk i{min-width:20px;height:20px;padding:0 3px;border-radius:5px;font-size:13px}.b36 .kk svg{width:14px;height:14px}
.pill .fb:has(.kk){padding:0 7px 0 14px}.pill .fb .kk{margin-left:2px}
.pill .fb .kk i{min-width:20px;height:20px;padding:0 4px;border-radius:5px;font-size:12.5px}.pill .fb .kk svg{width:13px;height:13px}

.box .q .nl{display:inline-block;animation:ylet .2s .03s cubic-bezier(.2,.8,.2,1) both}
@keyframes ylet{from{opacity:0;transform:translateY(4px)}}
.apointer{transition:left .45s cubic-bezier(.4,0,.2,1),top .45s cubic-bezier(.4,0,.2,1),opacity .2s}
.dock .w{position:relative}

.ghost{pointer-events:none}

/* ⌘S: the strip and the lights up past the window's top, the page up into their room */
.win.striping .card{transition:top .11s cubic-bezier(0,.4,.45,1),height .11s cubic-bezier(0,.4,.45,1)}
.win.top .tstrip,.win.top .lights{transition:transform .11s cubic-bezier(0,.4,.45,1),opacity .11s}
.win.top.stripshut .tstrip,.win.top.stripshut .lights{transform:translateY(-40px);opacity:0}

/* The ⌘J line and the answer card at the page's foot (askline.js), with Yab's buttons (YabDesign/Buttons.swift)
   and icons: one look for the home page's tour and the manual. */
.ag-b{height:28px;padding:0 13px;border-radius:8px;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:400;background:rgba(23,23,23,.07);color:#171717;white-space:nowrap;flex:none;transition:background .14s,transform .16s,opacity .14s}
.ag-b.hot{background:rgba(23,23,23,.11)}
.ag-b.sm{height:24px;padding:0 10px;font-size:11.5px}
.ag-b.pri{background:#171717;color:#fff}
.ag-b.pri.hot{background:rgba(23,23,23,.85)}
.ag-b.glassp{color:#fff;background:rgba(23,23,23,.86);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.ag-b.glassp.hot{background:rgba(23,23,23,.78)}
.ag-b.quiet{background:none;color:#474747}
.ag-b.quiet.hot{background:rgba(23,23,23,.06);color:#171717}
.ag-b.red{color:#ff3b30}
.ag-b.off{opacity:.72}
.ag-b.press{transform:scale(.95)}
.ag-b:has(.kk){padding-right:4px}.ag-b.sm:has(.kk){padding-left:8px}
.ag-b .kk{opacity:.6;gap:2px;margin-left:3.5px}
.ag-b .kk i{min-width:20px;height:20px;padding:0 4px;border-radius:5px;font-size:12.5px}.ag-b .kk svg{width:13px;height:13px}
.ag-b.sm .kk{margin-left:2px}.ag-b.sm .kk i{min-width:16px;height:16px;padding:0 2px;font-size:11.5px}.ag-b.sm .kk svg{width:12px;height:12px}
.ag-b.round{width:24px;padding:0;justify-content:center;border-radius:12px}
.ag-g{display:inline-grid;place-items:center;flex:none}
.ag-g svg{width:100%;height:100%}
.ag-card2{position:absolute;padding:12px;border-radius:20px;z-index:9;color:#171717;
  background:linear-gradient(180deg,rgba(255,255,255,.80),rgba(248,250,253,.76));backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);
  box-shadow:0 0 0 .5px rgba(0,0,0,.12),0 4px 14px rgba(0,0,0,.14);opacity:0;transform:translate(-50%,10px);transition:opacity .22s cubic-bezier(.2,.8,.2,1),transform .22s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.ag-card2.up{opacity:1;transform:translate(-50%,0)}
/* the ⌘J line (AgentTask.swift TaskLineView): 480 + 12 a side */
.ag-tl{width:504px;display:flex;flex-direction:column;gap:8px}
.ag-pills{display:flex;align-items:center;gap:6px;height:24px}
.ag-cpill{height:22px;padding:0 6px;border-radius:5px;background:#efefef;display:inline-flex;align-items:center;gap:4px;font-size:11.5px;max-width:180px;white-space:nowrap}
.ag-cpill img,.ag-cpill .ag-pg{width:12px;height:12px;border-radius:2.5px;flex:none}
.ag-cpill .ag-x{width:12px;height:12px;display:grid;place-items:center;color:#474747;opacity:.5}.ag-cpill .ag-x .ag-g{width:9px;height:9px}
.ag-cpill span{overflow:hidden;text-overflow:ellipsis}
.ag-cpill.new{animation:agpill .22s cubic-bezier(.2,.8,.2,1)}@keyframes agpill{from{opacity:0;transform:scale(.8)}}
.ag-fld{min-height:28px;padding:0 4px;display:flex;align-items:center;font-size:13.5px;line-height:18px;color:#171717}
.ag-fld .ph{color:rgba(23,23,23,.35)}
.ag-caret{display:inline-block;width:1.5px;height:17px;background:#0a84ff;margin-left:1px;vertical-align:-3px;animation:yblink 1.1s steps(1) infinite}
.ag-foot{display:flex;align-items:center;gap:6px;height:28px}.ag-foot .ag-sp{flex:1}
.ag-ans{width:520px}
.ag-ans .ag-atext{font-size:12.5px;line-height:17.5px;max-height:140px;overflow:hidden}
.ag-ans .ag-atext b{font-weight:600}
.ag-ans .ag-show{font-size:12px;color:#474747;padding-top:4px}
.ag-ans hr{border:0;height:1px;background:#e8e8e8;margin:12px 0}
.ag-ans .ag-foot{height:24px}
.ag-ans .ag-ph{font-size:12.5px;color:rgba(23,23,23,.35);display:flex;align-items:center;gap:6px}
.ag-ans .ag-ph .kk{opacity:.5}
.ag-b.glassp.off{opacity:.5}