/* CI Platform — keynote.
   A fixed 1920×1080 stage, scaled to the window and letterboxed in black. Every
   size below is a size on that stage, so a slide looks the same on a laptop and
   on a hall projector.

   The grammar, and where it comes from:
   - one idea a slide; the headline is the conclusion (assertion–evidence);
   - at most one hero number a slide, gradient on the numeral only (Apple M1 "5x");
   - black for moments, light for product (Apple; Dribbble's strongest decks);
   - software shown straight on, then zoomed to the one thing, the rest dimmed
     (Apple partner guidelines; Stripe dim-ahead; Linear depth of field);
   - three things, then one (Apple 2007); a bento recap; "one more thing";
   - motion short and decisive: cubic-bezier(.2,1,.2,1), never transition: all
     (Stripe, Vercel). */

:root{
  --k-ink:#F5F5F7;          /* type on black */
  --k-ink-dim:rgba(245,245,247,.58);
  --k-paper:#F5F5F7;        /* the light stage */
  --k-paper-ink:#1D1D1F;
  --k-paper-dim:#6E6E73;
  --k-blue:#00569F;
  --k-blue-hi:#8CC8FF;
  --k-line:rgba(245,245,247,.14);
  --k-tile:#161618;
  --ease:cubic-bezier(.2,1,.2,1);
  --expo:cubic-bezier(.16,1,.3,1);
  /* screens.css spotlight: on this stage the one accent is the brand blue */
  --focus:#00569F;--focus-halo:rgba(0,86,159,.18);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#000;overflow:hidden}
body{font-family:'Noto Sans Georgian',Onest,system-ui,sans-serif;-webkit-font-smoothing:antialiased;color:var(--k-ink)}
.kn-s h1,.kn-s h2,.kn-s>p,.kn-s ul{margin:0;padding:0;list-style:none}
.kn-s p{margin:0}
.kn-s img{display:block;max-width:none}

/* ---- the stage ---- */
/* centred by its own margins, not by grid: a grid item larger than its cell is
   pinned to the start edge, and the scale would then pull it off centre */
.kn{position:fixed;inset:0;overflow:hidden;cursor:default}
.kn-stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;margin:-540px 0 0 -960px;
  transform-origin:center;overflow:hidden;background:#000}

.kn-s{position:absolute;inset:0;overflow:hidden;opacity:0;visibility:hidden;
  transition:opacity .7s var(--ease),visibility 0s .7s}
.kn-s.on{opacity:1;visibility:visible;transition:opacity .7s var(--ease),visibility 0s}
.kn-dark{background:#000;color:var(--k-ink)}
.kn-light{background:var(--k-paper);color:var(--k-paper-ink)}

/* builds: an element with .bN appears on the slide's Nth click */
.kn-s .b1,.kn-s .b2,.kn-s .b3{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .9s var(--ease)}
.kn-s[data-step="1"] .b1,.kn-s[data-step="2"] .b1,.kn-s[data-step="3"] .b1,
.kn-s[data-step="2"] .b2,.kn-s[data-step="3"] .b2,
.kn-s[data-step="3"] .b3{opacity:1;transform:none}

/* ---- type ---- */
.kn-h{font-size:88px;line-height:1.1;font-weight:700;letter-spacing:-.01em;text-wrap:balance}
.kn-h--top{position:absolute;z-index:3;left:0;right:0;top:110px;text-align:center;font-size:72px}
.kn-eyebrow{font-family:'Google Sans Code',monospace;font-size:34px;color:var(--k-blue);margin-bottom:26px!important}
.kn-lede{margin-top:32px!important;font-size:36px;line-height:1.45;color:var(--k-paper-dim);text-wrap:pretty}
.kn-sub{margin-top:30px!important;font-size:36px;line-height:1.45;color:var(--k-ink-dim);max-width:34ch;text-wrap:pretty}
.kn-cap{margin-top:40px!important;font-size:52px;font-weight:600;line-height:1.3;max-width:32ch;text-wrap:balance}
.kn-num{font-family:Onest,'Noto Sans Georgian',sans-serif;font-weight:600;letter-spacing:-.02em}
.kn-grad{background:linear-gradient(180deg,var(--k-blue-hi) 0%,#2F86E0 55%,var(--k-blue) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.kn-center{display:grid;place-content:center;justify-items:center;text-align:center}
.kn-center .kn-sub{max-width:44ch}

/* ---- renders ---- */
.kn-bg{position:absolute;inset:0;width:1920px;height:1080px;object-fit:cover}
/* the model bleeds off the right edge, so the headline has the left to itself */
.kn-bg--right{transform:translateX(260px)}
.kn-copy{position:absolute;left:150px;top:170px;width:880px}
.kn-copy .kn-h{font-size:78px}

/* 1 · cold open: a question on black, then the building answers it */
.kn-open{position:absolute;z-index:2;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;
  font-size:124px;line-height:1.12;font-weight:700;
  transition:top 1.1s var(--ease),transform 1.1s var(--ease),font-size 1.1s var(--ease),color .8s}
.kn-s[data-step="1"] .kn-open{top:110px;transform:none;font-size:64px;color:var(--k-ink-dim)}
.kn-s .kn-open__img{transform:scale(1.05);transition:opacity 1.2s var(--ease),transform 1.8s var(--ease)}
.kn-s[data-step="1"] .kn-open__img{transform:none}

/* 2 · three things, then one */
.kn-three{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center}
.kn-three__w{font-size:132px;line-height:1.18;font-weight:700;transition:opacity .6s var(--ease),transform .9s var(--ease),color .6s}
.kn-s[data-step="3"] .kn-three__w{color:rgba(245,245,247,.24)}
.kn-three__one{margin-top:56px!important;font-size:84px;font-weight:700}

/* 3 · the name */
.kn-brand__mark{width:120px;height:120px;filter:brightness(0) invert(1);margin-bottom:40px}
.kn-brand__name{font-family:Onest,sans-serif;font-size:168px;font-weight:700;letter-spacing:-.04em;line-height:1}

/* 4 · the lineup: six models on black, three by two, a label under each.
   Each render is cropped closer inside its own box, so the models, not their
   black margins, fill the grid. */
.kn-line{position:absolute;left:150px;right:150px;top:236px;display:grid;grid-template-columns:repeat(3,1fr);column-gap:24px;row-gap:22px}
.kn-line li{text-align:center;opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform 1s var(--ease)}
.kn-line i{display:block;width:330px;height:330px;margin:0 auto;overflow:hidden}
.kn-line img{width:100%;height:100%;transform:scale(1.2)}
.kn-line span{display:block;margin-top:2px;font-size:32px;font-weight:600;line-height:1.3;color:var(--k-ink)}
.kn-s.on .kn-line li{opacity:1;transform:none}
.kn-line li:nth-child(2){transition-delay:.08s}.kn-line li:nth-child(3){transition-delay:.16s}
.kn-line li:nth-child(4){transition-delay:.24s}.kn-line li:nth-child(5){transition-delay:.32s}.kn-line li:nth-child(6){transition-delay:.4s}

/* 5 · mechanism: the claim and its numbers left, the storeys right */
.kn-mech{position:absolute;left:150px;top:50%;transform:translateY(-50%);width:920px}
.kn-mech .kn-h{font-size:72px}
.kn-spec{margin-top:64px!important;border-top:1px solid var(--k-line)}
.kn-spec li{display:grid;grid-template-columns:340px 1fr;align-items:baseline;gap:32px;padding:30px 0;border-bottom:1px solid var(--k-line)}
.kn-spec b{font-size:80px;line-height:1;color:var(--k-ink)}
.kn-spec span{font-size:32px;line-height:1.35;color:var(--k-ink-dim)}
/* dim-ahead: the newest line is bright, the ones before it step back */
.kn-s[data-step="2"] .kn-spec .b1,.kn-s[data-step="3"] .kn-spec .b1,.kn-s[data-step="3"] .kn-spec .b2{opacity:.4}

/* hero numbers */
.kn-big{display:flex;align-items:baseline;gap:28px;font-family:Onest,sans-serif;line-height:.9}
.kn-big .kn-grad{font-size:400px;font-weight:700;letter-spacing:-.05em;padding:0 .04em}
.kn-big small{font-family:'Noto Sans Georgian',sans-serif;font-size:96px;font-weight:700;color:var(--k-ink)}

/* one more thing */
.kn-omt{font-size:96px;font-weight:700;color:var(--k-ink)}

/* ---- product on the light stage ---- */
/* a browser: headline centred above, the panel below and cropped by the frame,
   dissolving under the headline when the build pushes in */
.kn-head{position:absolute;left:100px;right:100px;top:100px;text-align:center}
.kn-head .kn-h{font-size:68px}
.kn-head .kn-lede{margin-top:20px!important}
.kn-view{position:absolute;left:0;right:0;top:330px;bottom:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 64px);mask-image:linear-gradient(to bottom,transparent 0,#000 64px)}
.kn-dev{position:absolute;transform-origin:0 0;transition:transform 1.3s var(--ease)}
.kn-dev.is-zoomed{transform:var(--zoom)}
.kn-dev--browser{left:320px;top:84px;width:1280px;height:800px;--bz:1}
/* the new-object form, shown without its technical fields: the slide is about the map */
.kn-dev--brief .a-mb>.two{display:none}
.kn-dev--browser .browser{box-shadow:0 1px 0 rgba(0,0,0,.04),0 50px 120px -40px rgba(20,24,40,.35)}
/* a phone: the claim left, the phone straight on right */
.kn-prod{position:absolute;left:150px;top:50%;transform:translateY(-50%);width:1040px}
.kn-prod .kn-h{font-size:84px}
.kn-prod .kn-lede{max-width:30ch}
.kn-dev--phone{right:230px;top:114px;width:393px;height:852px;--pz:1}
.kn-dev--phone .phone{box-shadow:0 60px 120px -40px rgba(0,0,0,.35),inset 0 0 0 2px #2a2d36}
/* the spotlight lands once the push-in has mostly arrived */
.kn-dev .is-focus{animation-delay:.55s}
.kn-s[data-step="1"] .kn-prod .kn-lede,.kn-s[data-step="1"] .kn-head .kn-lede,
.kn-s[data-step="2"] .kn-head .kn-lede{opacity:.35;transition:opacity .6s var(--ease)}

/* ---- 24 · recap: a bento ---- */
.kn-bento{position:absolute;left:150px;right:150px;top:270px;bottom:110px;display:grid;
  grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 1fr;gap:24px}
.kn-tile{position:relative;overflow:hidden;border-radius:32px;background:var(--k-tile);padding:40px 40px 36px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:14px;
  opacity:0;transform:scale(.97);transition:opacity .8s var(--ease),transform 1s var(--ease)}
.kn-tile b{font-size:56px;line-height:1.1;font-weight:700}
.kn-tile span{font-size:28px;line-height:1.35;color:var(--k-ink-dim)}
/* the render sits on the right of its tile, on its own black, the words on the left */
.kn-tile--img{grid-column:span 2;padding:0;background:#000}
.kn-tile--img img{position:absolute;right:-30px;top:-6%;width:72%;height:112%;object-fit:cover;object-position:78% 50%}
.kn-tile--img p{position:relative;display:flex;flex-direction:column;gap:12px;padding:40px;max-width:52%}
.kn-tile--blue{grid-column:span 2;background:var(--k-blue)}
.kn-tile--blue span{color:rgba(255,255,255,.78)}
.kn-s.on .kn-tile{opacity:1;transform:none}
.kn-tile:nth-child(2){transition-delay:.07s}.kn-tile:nth-child(3){transition-delay:.14s}
.kn-tile:nth-child(4){transition-delay:.21s}.kn-tile:nth-child(5){transition-delay:.28s}.kn-tile:nth-child(6){transition-delay:.35s}

/* ---- 25 · close ---- */
.kn-close__img{transform:translateY(-28px) scale(.9)}
.kn-close{position:absolute;left:0;right:0;top:120px;text-align:center}
.kn-close .kn-h{font-size:92px}
.kn-close__brand{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:28px!important;
  font-family:Onest,sans-serif;font-size:36px;font-weight:600;color:var(--k-ink-dim)}
.kn-close__brand img{width:40px;height:40px;filter:brightness(0) invert(1);opacity:.7}

/* ════════════════════════════════════════ v3: explained, step by step ══ */

.kn-dark .kn-eyebrow,.kn-dark .kn-step{color:var(--k-blue-hi)}
.kn-dark .kn-lede{color:var(--k-ink-dim)}
.kn-step{font-size:30px;font-weight:600;color:var(--k-blue);margin-bottom:18px!important}
.kn-head .kn-step{margin-bottom:10px!important;font-size:26px}
.kn-dark .kn-dev--phone .phone{box-shadow:0 0 0 2px #2c3040,0 50px 140px -30px rgba(47,134,224,.28)}

/* dim-ahead lists: each new line is bright, the lines before it step back.
   .kn-dim counts from the first line; --steps lists start hidden, so they lag one. */
.kn-dim li{transition:opacity .6s var(--ease),transform .9s var(--ease)}
.kn-s[data-step="1"] .kn-dim:not(.kn-dim--steps)>li:nth-child(-n+1),
.kn-s[data-step="2"] .kn-dim:not(.kn-dim--steps)>li:nth-child(-n+2),
.kn-s[data-step="2"] .kn-dim--steps>li:nth-child(-n+1),
.kn-s[data-step="3"] .kn-dim--steps>li:nth-child(-n+2){opacity:.32}

/* 2 · today */
.kn-list{position:absolute;left:180px;right:180px;top:50%;transform:translateY(-50%)}
.kn-list .kn-h{font-size:60px;color:var(--k-ink-dim);margin-bottom:40px}
.kn-list li{font-size:92px;line-height:1.25;font-weight:700;white-space:nowrap}

/* 6 · who sees what */
.kn-cols{position:absolute;left:150px;right:150px;top:420px;display:grid;grid-template-columns:repeat(3,1fr);gap:72px}
.kn-cols>div{border-top:2px solid var(--k-line);padding-top:36px}
.kn-cols__k{font-size:30px;font-weight:600;color:var(--k-blue-hi)}
.kn-cols b{display:block;margin-top:18px;font-size:56px;line-height:1.1;font-weight:700}
.kn-cols span{display:block;margin-top:22px;font-size:34px;line-height:1.45;color:var(--k-ink-dim)}

/* 7 · three steps */
.kn-steps{position:absolute;left:120px;right:120px;top:212px;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin:0;padding:0;list-style:none}
/* every column is the same four rows, so the badges and the two lines of words
   sit on one line across the slide however long a caption runs */
.kn-steps li{text-align:center;display:grid;grid-template-rows:500px auto 126px auto;justify-items:center}
/* the renders sit on the stage's own black, so they may be wider than their
   column — but never taller than their row: the words start below the art */
.kn-steps img{width:560px;height:500px;object-fit:contain;display:block}
.kn-steps em{display:grid;place-items:center;width:56px;height:56px;margin:0;border-radius:50%;
  background:var(--k-blue);font:700 30px/1 Onest,sans-serif;font-style:normal;color:#fff}
.kn-steps b{display:block;align-self:start;margin-top:22px;font-size:40px;line-height:1.25;font-weight:700;text-wrap:balance}
.kn-steps span{display:block;margin-top:14px;font-size:30px;line-height:1.35;color:var(--k-ink-dim);text-wrap:pretty}

/* 1 · the way through the deck, shown on the cold open and gone on its first click */
.kn-hint{position:absolute;left:0;right:0;bottom:70px;z-index:4;display:flex;align-items:center;justify-content:center;gap:14px;
  font-size:28px;line-height:1.4;color:var(--k-ink-dim);opacity:0;transition:opacity .45s var(--ease)}
.kn-s.on[data-step="0"] .kn-hint{opacity:1;transition:opacity 1s var(--ease) 1.4s}
.kn-hint span{margin-left:10px}
.kn-hint i{font-style:normal;font-weight:700;color:var(--k-ink)}
.kn-key{display:grid;place-items:center;width:62px;height:62px;padding:0;border-radius:16px;cursor:pointer;
  border:1px solid rgba(245,245,247,.3);background:rgba(245,245,247,.07);color:var(--k-ink);
  font:400 32px/1 Onest,system-ui,sans-serif;transition:background .3s var(--ease),transform .2s var(--ease)}
.kn-key:hover{background:rgba(245,245,247,.18)}
.kn-key:active{transform:translateY(2px)}
.kn-s.on[data-step="0"] .kn-key--next{animation:kn-key 2.8s var(--ease) 2.6s 3}
@keyframes kn-key{0%,100%{box-shadow:0 0 0 0 rgba(140,200,255,0)}40%{box-shadow:0 0 0 12px rgba(140,200,255,.12)}}

/* 9 · a render with a narrow column of words */
.kn-copy--narrow{width:680px;top:50%;transform:translateY(-50%)}
.kn-copy--narrow .kn-h{font-size:62px}

/* 12 · the floor: the same model, lit moment by moment, a label level with each storey */
.kn-s .kn-fade{transform:none;transition:opacity .9s var(--ease)}
.kn-floor__copy{position:absolute;left:150px;top:50%;transform:translateY(-50%);width:660px}
.kn-floor__copy .kn-h{font-size:72px}
.kn-floor ol{margin:52px 0 0;padding:0;list-style:none;display:grid;gap:26px}
.kn-floor li{display:grid;grid-template-columns:52px 1fr;gap:20px;align-items:start;font-size:34px;line-height:1.4;color:var(--k-ink-dim)}
.kn-floor li b{color:var(--k-ink)}
.kn-floor li em{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:2px solid var(--k-blue-hi);
  font:700 26px/1 Onest,sans-serif;font-style:normal;color:var(--k-blue-hi)}
/* a label, level with its storey, tied to the building's right edge (x 1559) */
.kn-call{position:absolute;left:1616px;top:var(--y);margin-top:-36px!important;display:flex;flex-direction:column}
.kn-call::before{content:"";position:absolute;left:-54px;top:36px;width:44px;height:2px;background:var(--k-blue-hi)}
.kn-call b{font-size:44px;line-height:1.1;font-weight:700;color:var(--k-ink)}
.kn-call span{font:500 26px/1.4 'Google Sans Code',monospace;color:var(--k-ink-dim)}
/* the supervisor's view of the same moment, as the app's own chip */
.kn-pill{position:absolute;left:1616px;top:552px;display:flex;align-items:center;gap:14px;padding:16px 24px;border-radius:999px;
  background:#E7F6EE;color:#215F42;font-size:30px;font-weight:600;white-space:nowrap}
.kn-pill i{width:14px;height:14px;border-radius:50%;background:#1E8E5A}
.kn-pill em{font-style:normal;font-size:22px;color:#1E8E5A;margin-left:6px}

/* 14 · the day at a glance: one track, 09:00 → 18:00, 540 minutes wide */
.tl{position:absolute;left:170px;right:170px;top:470px;height:64px}
.tl__track{position:absolute;inset:0;border-radius:18px;background:#E3E5EC;overflow:hidden}
.tl__bar{position:absolute;top:0;bottom:0;left:calc(var(--a) / 540 * 100%);width:calc((var(--b) - var(--a)) / 540 * 100%)}
.tl__cover{position:absolute;top:0;bottom:0;right:0;width:100%;background:#E3E5EC}
.tl__head{position:absolute;z-index:2;top:32px;left:0;transform:translate(-50%,-50%);padding:6px 14px;border-radius:12px;
  background:#1D1D1F;color:#fff;font:600 26px/1.2 'Google Sans Code',monospace;box-shadow:0 8px 24px -8px rgba(0,0,0,.4);transition:opacity .5s}
.tl__head.is-done{opacity:0}
.tl__bar--on,.tl__key--on{background:#1E8E5A}
.tl__bar--brk,.tl__key--brk{background:#E0A43A}
.tl__bar--out,.tl__key--out{background:#C7443C}
.tl__axis span{position:absolute;top:84px;left:calc(var(--t) / 540 * 100%);transform:translateX(-50%);
  font:500 24px/1 'Google Sans Code',monospace;color:#9A9CA5}
.tl__axis span:first-child{transform:none}.tl__axis span:last-child{transform:translateX(-100%)}
.tl__ev{position:absolute;left:calc(var(--t) / 540 * 100%);width:280px;margin-left:-140px!important;text-align:center;
  opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .6s var(--ease)}
.tl__ev.is-on{opacity:1;transform:none}
.tl__ev--up{bottom:calc(100% + 26px)}
.tl__ev--dn{top:calc(100% + 72px)}
.tl__ev--start{margin-left:0!important;text-align:left}
.tl__ev--end{margin-left:-280px!important;text-align:right}
.tl__ev::before{content:"";position:absolute;left:50%;width:2px;height:22px;background:#1D1D1F}
.tl__ev--up::before{top:100%;margin-top:2px}
.tl__ev--dn::before{bottom:100%;margin-bottom:4px;height:68px}
.tl__ev--start::before{left:0}.tl__ev--end::before{left:auto;right:0}
.tl__ev b{display:block;font:600 34px/1.2 'Google Sans Code',monospace;color:#1D1D1F}
.tl__ev span{display:block;margin-top:4px;font-size:28px;line-height:1.3;color:var(--k-paper-dim)}
.tl__ev--dn b{margin-top:0}
.tl__sum{position:absolute;left:170px;right:170px;top:790px;display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin:0;padding:0;list-style:none}
.tl__sum li{border-top:1px solid #D9DBE2;padding-top:26px;display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:baseline}
.tl__key{width:18px;height:18px;border-radius:5px;background:#1D1D1F;transform:translateY(-6px)}
.tl__sum b{font-size:72px;line-height:1;color:#1D1D1F}
.tl__sum span{grid-column:2;margin-top:10px;font-size:28px;color:var(--k-paper-dim)}

/* 18 · a scene: the model lower left, the headline above it, the phone right */
.kn-copy--top{top:70px;width:1080px}
.kn-copy--top .kn-eyebrow{font-size:30px;margin-bottom:10px!important}
.kn-copy--top .kn-h{font-size:64px}
.kn-copy--top .kn-sub{margin-top:14px!important;font-size:32px;max-width:none}

/* 32 · the pay, as a formula */
.kn-eq{position:absolute;left:220px;right:220px;top:330px}
.kn-eq__r{display:grid;grid-template-columns:470px 1fr 280px;align-items:baseline;gap:32px;padding:34px 0;border-bottom:1px solid var(--k-line)}
.kn-eq__r span,.kn-eq__t span{font-size:30px;color:var(--k-ink-dim)}
.kn-eq__r b{font-size:54px;line-height:1.1;white-space:nowrap}
.kn-eq__r b:last-child{text-align:right}
.kn-eq__t{display:grid;grid-template-columns:470px 1fr;align-items:center;gap:32px;padding-top:36px}
.kn-eq__t b{font-size:150px;line-height:1;font-weight:700;letter-spacing:-.03em;text-align:right}
.kn-foot{position:absolute;left:0;right:0;bottom:84px;text-align:center;font-size:28px;color:var(--k-ink-dim)}

/* 35 · the question and the answer, large */
.kn-chat{position:absolute;left:250px;right:250px;top:250px}
.kn-chat__q{margin-left:auto!important;max-width:920px;background:var(--k-blue);color:#fff;font-size:34px;line-height:1.45;
  padding:26px 36px;border-radius:36px 36px 10px 36px}
.kn-chat__a{margin-top:36px;background:#fff;border-radius:36px;padding:34px 44px 36px;max-width:1340px;
  box-shadow:0 1px 0 rgba(0,0,0,.04),0 40px 100px -40px rgba(20,24,40,.3)}
.kn-chat__who{font-size:24px;font-weight:600;color:var(--k-paper-dim)}
.kn-chat ul{margin:14px 0 0;padding:0;list-style:none}
.kn-chat li{font-size:32px;white-space:nowrap;line-height:1.6;opacity:0;transition:opacity .5s var(--ease)}
.kn-chat li b{color:#B0740E;font-weight:600}
.kn-s[data-step="1"] .kn-chat li{opacity:1}
.kn-chat li:nth-child(2){transition-delay:.15s}.kn-chat li:nth-child(3){transition-delay:.3s}
.kn-chat li:nth-child(4){transition-delay:.45s}.kn-chat li:nth-child(5){transition-delay:.6s}
.kn-chat__sum{margin-top:14px!important;font-size:34px;font-weight:700}

/* ════════════════════════════════════════ v4: the renders move ══ */

/* a plate: a render and everything placed on it, drifting together like a slow camera */
.kn-plate{position:absolute;left:0;top:0;width:1920px;height:1080px}
.kn-plate--right{translate:260px 0}
.kn-s.on .kn-plate{animation:kn-drift 18s linear both}
@keyframes kn-drift{from{scale:1}to{scale:1.04}}

/* 12 · the floor: each lit state lands when the walker arrives */
.kn-floor.on[data-step="1"] .kn-fade.b1{transition-delay:var(--in)}
.kn-floor.on[data-step="1"] .kn-call.b1{transition-delay:calc(var(--in) + .25s)}
.kn-floor[data-step="2"] .kn-fade.b1,.kn-floor[data-step="3"] .kn-fade.b1{opacity:0;transition:opacity .15s}
.kn-floor.on[data-step="2"] .kn-fade.b2{transition-delay:var(--up)}
.kn-floor.on[data-step="2"] .kn-call.b2{transition-delay:calc(var(--up) + .3s)}

/* the moment the line is crossed: a ring on the ground, and a label */
.kn-ripple{position:absolute;left:var(--x);top:var(--y);width:calc(var(--rx) * 2);height:calc(var(--ry) * 2);
  margin:calc(var(--ry) * -1) 0 0 calc(var(--rx) * -1);border:3px solid var(--k-blue-hi);border-radius:50%;opacity:0;pointer-events:none;
  box-shadow:0 0 18px rgba(47,134,224,.8),inset 0 0 14px rgba(47,134,224,.55)}
.kn-s.on .kn-ripple{animation:kn-ripple 1.5s cubic-bezier(.2,.7,.3,1) var(--t0) 2}
.kn-s.on .kn-ripple--loop{animation:kn-ripple 2.7s cubic-bezier(.2,.7,.3,1) var(--t0) infinite}
@keyframes kn-ripple{0%{transform:scale(.12);opacity:0}14%{opacity:1}100%{transform:scale(1);opacity:0}}
.kn-chip{position:absolute;left:var(--x);top:var(--y);display:flex;align-items:center;gap:12px;padding:12px 22px;border-radius:999px;
  background:rgba(18,20,26,.8);color:#fff;font-size:28px;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;
  box-shadow:0 0 0 1px rgba(140,200,255,.35),0 18px 40px -16px rgba(0,0,0,.7);transform:translate(-50%,-100%)}
.kn-chip i{width:12px;height:12px;border-radius:50%;background:var(--dot,#2FD07F);box-shadow:0 0 10px var(--dot,#2FD07F)}
.kn-s.on .kn-chip{animation:kn-pop .7s cubic-bezier(.2,1,.2,1) var(--t0) both}
@keyframes kn-pop{from{opacity:0;transform:translate(-50%,-70%) scale(.92)}to{opacity:1;transform:translate(-50%,-100%)}}

/* light that breathes: the lit floor of the cold open, the safety halo */
.kn-glow{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--gh);margin:calc(var(--gh) / -2) 0 0 calc(var(--w) / -2);
  border-radius:40%;background:radial-gradient(closest-side,rgba(64,150,240,.6),rgba(47,134,224,0));mix-blend-mode:screen;opacity:0;pointer-events:none}
.kn-glow--round{border-radius:50%}
.kn-s.on .kn-glow{animation:kn-breathe 3.4s ease-in-out 1.2s infinite}
@keyframes kn-breathe{0%,100%{opacity:.1}50%{opacity:.9}}

/* 18 · the café: the plate hands over to the render with her seated */
.kn-after{opacity:0}
.kn-s.on .kn-after{animation:kn-in 1s ease var(--t0) both}
@keyframes kn-in{from{opacity:0}to{opacity:1}}

/* 26 · a signal runs the route ahead of the responder; the alert drops onto the lock screen */
.kn-signal{position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;background:#CFEAFF;opacity:0;pointer-events:none;
  box-shadow:0 0 14px 6px rgba(47,134,224,.9),0 0 44px 14px rgba(47,134,224,.45);offset-rotate:0deg;offset-anchor:50% 50%}
.kn-s.on .kn-signal{animation:kn-signal 2.6s cubic-bezier(.45,0,.25,1) .2s infinite}
@keyframes kn-signal{0%{offset-distance:0%;opacity:0}8%{opacity:1}86%{opacity:1}100%{offset-distance:100%;opacity:0}}
.kn-s.on .kn-dev--notify .nf{animation:kn-notify .8s cubic-bezier(.2,1,.2,1) .7s both}
@keyframes kn-notify{from{opacity:0;transform:translateY(-26px) scale(.96)}to{opacity:1;transform:none}}

/* 40 · the close: floors light up one by one, from the ground (slab rows measured on kn-close.jpg) */
.kn-lightup{clip-path:inset(1045px 0 0 0)}
.kn-s.on .kn-lightup{animation:kn-floors 3.6s .5s both}
@keyframes kn-floors{
  0%{clip-path:inset(1045px 0 0 0);animation-timing-function:cubic-bezier(.6,0,.25,1)}
  14%{clip-path:inset(935px 0 0 0);animation-timing-function:cubic-bezier(.6,0,.25,1)}
  28%{clip-path:inset(851px 0 0 0);animation-timing-function:cubic-bezier(.6,0,.25,1)}
  42%{clip-path:inset(767px 0 0 0);animation-timing-function:cubic-bezier(.6,0,.25,1)}
  57%{clip-path:inset(684px 0 0 0);animation-timing-function:cubic-bezier(.6,0,.25,1)}
  71%{clip-path:inset(601px 0 0 0);animation-timing-function:cubic-bezier(.6,0,.25,1)}
  85%{clip-path:inset(518px 0 0 0);animation-timing-function:cubic-bezier(.6,0,.25,1)}
  100%{clip-path:inset(360px 0 0 0)}}

/* the walking figures are 3D (scene3d.js): a canvas over the render, her name
   above her, and her path drawn behind her */
.kn-3d{position:absolute;left:0;top:0;width:1920px;height:1080px;pointer-events:none}
.kn-trail{position:absolute;left:0;top:0;width:1920px;height:1080px;overflow:visible;pointer-events:none}
.kn-trail path{fill:none;stroke:#7FC0FF;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;opacity:.6;
  filter:drop-shadow(0 0 8px rgba(47,134,224,.55))}
/* the lift car, riding its shaft with her inside */
.kn-lift{position:absolute;left:0;top:0;width:46px;height:74px;margin:-70px 0 0 -23px;border-radius:6px;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(140,200,255,.55),rgba(47,134,224,.35));
  box-shadow:0 0 0 2px rgba(140,200,255,.85),0 0 26px rgba(47,134,224,.75)}

/* the render dims a little around her, the way a spotlight finds someone */
.kn-spot{position:absolute;left:0;top:0;width:1920px;height:1080px;opacity:0;pointer-events:none;
  transition:opacity .5s var(--ease);
  background:radial-gradient(circle 420px at var(--x,50%) var(--y,50%),rgba(4,8,16,0) 0,rgba(4,8,16,.12) 42%,rgba(4,8,16,.5) 100%)}
/* her name, on a pin */
.kn-tag{position:absolute;left:0;top:0;transform:translate(-50%,-100%);margin-top:-26px!important;padding:8px 18px;border-radius:999px;
  background:rgba(10,12,16,.72);color:#fff;font-size:26px;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;
  box-shadow:0 0 0 1px rgba(140,200,255,.4),0 14px 30px -12px rgba(0,0,0,.7)}
.kn-tag--hi{background:var(--k-blue);font-size:26px;padding:6px 16px;box-shadow:0 0 0 1px rgba(140,200,255,.55),0 0 26px rgba(47,134,224,.4)}
.kn-tag--hi::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:24px;margin-left:-1px;
  background:linear-gradient(rgba(140,200,255,.9),rgba(140,200,255,0))}
/* the camera leans in towards whatever is happening */
.kn-plate--push{transform-origin:var(--ox,50%) var(--oy,50%)}
.kn-s.on .kn-plate--push{animation:kn-push 7s cubic-bezier(.3,0,.25,1) both}
@keyframes kn-push{from{scale:1}to{scale:1.72}}

/* reduced motion: builds and slides cut instead of moving */
@media (prefers-reduced-motion:reduce){
  .kn-s,.kn-s.on,.kn-s .b1,.kn-s .b2,.kn-s .b3,.kn-open,.kn-s .kn-open__img,.kn-dev,.kn-line li,.kn-tile,.kn-three__w,.kn-dim li,.kn-s .kn-fade,.tl__ev,.kn-chat li{transition:none!important}
  .kn-s .is-focus{animation:none}
  /* the renders hold still and show their end state */
  .kn-signal,.kn-ripple,.kn-glow{display:none!important}
  .kn-plate,.kn-after,.kn-lightup,.kn-chip,.kn-dev--notify .nf{animation:none!important}
  .kn-spot{display:none!important}
  .kn-trail path{stroke-dasharray:none!important;stroke-dashoffset:0!important;opacity:.9!important}
  .kn-after{opacity:1}.kn-lightup{clip-path:none}.kn-chip{opacity:1}
}