/* About page. Page prefix: ab-.
   Shared parts (ui-win, ui-head, ui-chip, glyph, now, live, mini-deck, cap-grid,
   split, ticks) come from /assets/site/site.css. Panel UI uses px and reflows
   with container queries; slides, cards and the loop scale with container
   units. Loops animate transform and opacity only and stop off screen. */

/* ---------- Hero: a deck, read ---------- */
.ab-read{container-name:ab-read}
.ab-read-in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"a b" "stack stack" "c d";gap:14px 18px;align-items:start}

.ab-fact{position:relative;isolation:isolate;display:flex;align-items:center;gap:12px;min-width:0;max-width:100%;padding:10px 16px 10px 10px;border-radius:16px;background:linear-gradient(180deg,var(--night-3),var(--night-2));box-shadow:inset 0 0 0 1px var(--line-2),0 28px 44px -28px rgba(0,0,0,.95)}
.ab-fact::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1.5px var(--lav),0 0 0 5px rgba(183,168,255,.12);opacity:0;pointer-events:none}
.ab-fact.is-a{grid-area:a;justify-self:start}
.ab-fact.is-b{grid-area:b;justify-self:end;margin-top:30px}
.ab-fact.is-c{grid-area:c;justify-self:start}
.ab-fact.is-d{grid-area:d;justify-self:end;margin-top:26px;background:linear-gradient(180deg,rgba(123,92,255,.24),rgba(123,92,255,.08)),var(--night-2);box-shadow:inset 0 0 0 1px rgba(183,168,255,.32),0 28px 44px -28px rgba(0,0,0,.95)}
.ab-fact-t{display:grid;gap:2px;min-width:0}
.ab-fact-t b{font:500 14px/1.3 var(--sans);color:var(--paper)}
.ab-fact-t span{font-size:13px;line-height:1.35;color:var(--muted)}
.ab-code{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;background:var(--paper);font:600 13px/1 var(--display);letter-spacing:.02em;color:var(--violet)}

/* The deck: two lavender pages behind a paper page, like the mark */
.ab-stack{grid-area:stack;position:relative;aspect-ratio:600 / 364;perspective:calc(var(--q) * 1300)}
.ab-pg{position:absolute;width:76%;aspect-ratio:16 / 10;border-radius:calc(var(--q) * 12)}
.ab-pg.is-back{left:16%;top:0;background:var(--lav);opacity:.3}
.ab-pg.is-mid{left:12%;top:6.6%;background:var(--lav);opacity:.6}
.ab-front{left:8%;top:13.19%;overflow:hidden;background:var(--paper);container-type:inline-size;box-shadow:0 44px 70px -36px rgba(0,0,0,.95)}
.ab-sheet{position:absolute;left:8%;top:13.19%;width:76%;aspect-ratio:16 / 10;border-radius:calc(var(--q) * 12);background:linear-gradient(180deg,#F2EFFF,#E6E0FF);transform-origin:50% 0;opacity:0;pointer-events:none}
.ab-prog{position:absolute;left:8%;width:76%;top:96.4%;height:calc(var(--q) * 5);overflow:hidden;border-radius:9px;background:rgba(183,168,255,.16)}
.ab-prog i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--violet),var(--lav));transform-origin:0 50%;transform:scaleX(.286)}

/* Slides inside the front page, sized in the page's own container units */
.ab-sl{position:absolute;inset:0;opacity:0}
.ab-sl.is-2{opacity:1}
.ab-sl-eb{position:absolute;left:7cqw;top:8cqw;font:500 max(6.5px,2.9cqw)/1 var(--sans);letter-spacing:.14em;color:var(--violet);white-space:nowrap}
.ab-sl-n{position:absolute;right:5.5cqw;top:7.6cqw;font:500 max(6.5px,2.6cqw)/1 var(--sans);letter-spacing:.08em;color:rgba(18,15,46,.5);white-space:nowrap}
.ab-sl-title{position:absolute;font:600 max(10px,8cqw)/1.04 var(--display);letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
.ab-sl-title em{font-style:normal;color:var(--violet)}

.ab-cover-panel{position:absolute;left:0;top:0;bottom:0;width:34%;display:grid;place-items:center;background:var(--violet)}
.ab-cover-panel svg{width:62%;height:auto}
.ab-sl-eb.is-cover{left:42cqw;top:13cqw}
.ab-sl-title.is-cover{left:42cqw;top:20cqw;width:52cqw}
.ab-sl-sub{position:absolute;left:42cqw;right:5cqw;bottom:10cqw;font:400 max(7px,3.3cqw)/1.3 var(--sans);color:var(--ink-2)}

.ab-big{position:absolute;left:6cqw;top:12cqw;font:600 max(16px,18cqw)/1 var(--display);letter-spacing:-.05em;color:var(--ink)}
.ab-big em{font-style:normal;color:var(--violet)}
.ab-big-l{position:absolute;left:7cqw;top:33cqw;width:50cqw;font:400 max(7px,3.3cqw)/1.3 var(--sans);color:var(--ink-2)}
.ab-lines{position:absolute;left:7cqw;bottom:8cqw;width:44cqw;display:grid;gap:2.4cqw}
.ab-lines i{height:1.8cqw;border-radius:9px;background:rgba(18,15,46,.16)}
.ab-lines i:last-child{width:68%}
.ab-stats{position:absolute;left:60cqw;right:6cqw;top:16cqw;display:grid;gap:4cqw}
.ab-stat{display:grid;gap:.8cqw;padding-top:2.6cqw;border-top:1px solid rgba(18,15,46,.15);font:400 max(7px,3cqw)/1.25 var(--sans);color:var(--ink-2)}
.ab-stat b{font:600 max(10px,7cqw)/1 var(--display);letter-spacing:-.03em;color:var(--ink)}

.ab-sl-title.is-ask{left:7cqw;top:15cqw;width:64cqw;font-size:max(10px,7.2cqw)}
.ab-plan{position:absolute;left:7cqw;right:7cqw;bottom:9cqw;height:12cqw}
.ab-plan-line{position:absolute;left:0;right:0;top:3cqw;height:.6cqw;border-radius:1cqw;background:var(--lav)}
.ab-plan-step{position:absolute;left:calc(var(--x) * 1%);top:0;width:20cqw;height:12cqw;margin-left:-10cqw;padding-top:8.4cqw;text-align:center;font:500 max(7px,3cqw)/1 var(--sans);color:var(--ink-2);white-space:nowrap}
.ab-plan-step b{position:absolute;left:50%;top:3.3cqw;width:calc(var(--s) * 3.6cqw);height:calc(var(--s) * 3.6cqw);border-radius:50%;background:var(--violet);box-shadow:0 0 0 .8cqw var(--paper);transform:translate(-50%,-50%)}

@container ab-read (max-width:479px){
  .ab-read-in{gap:10px}
  .ab-read-in .ab-fact{align-self:stretch;justify-self:stretch;margin-top:0;gap:9px;padding:9px 10px 9px 9px;border-radius:14px}
  .ab-fact .glyph,.ab-code{width:28px;height:28px;border-radius:8px}
  .ab-fact .glyph svg{width:16px;height:16px}
  .ab-code{font-size:12px}
  .ab-fact-t b{font-size:13px}
}
@container ab-read (max-width:399px){
  .ab-read-in .ab-fact .glyph,.ab-read-in .ab-code{display:none}
  .ab-read-in .ab-fact{padding:9px 11px}
}

/* ---------- Why: one deck, sent two ways ---------- */
.ab-why{container-name:ab-why}
.ab-cmp{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1fr) minmax(0,1.12fr);grid-template-rows:repeat(7,auto);padding:8px 14px 14px}
.ab-cmp-hl{position:absolute;inset:4px 0 0;grid-column:3;grid-row:1 / -1;z-index:-1;border-radius:14px;background:linear-gradient(180deg,rgba(123,92,255,.2),rgba(123,92,255,.06));box-shadow:inset 0 0 0 1px rgba(183,168,255,.3)}
.ab-cmp-h{display:flex;align-items:center;gap:10px;min-width:0;padding:14px 12px 12px}
.ab-cmp-ht{display:grid;gap:2px;min-width:0}
.ab-cmp-ht b{font:600 14px/1.25 var(--display);letter-spacing:-.02em;color:var(--paper)}
.ab-cmp-ht span{font-size:13px;line-height:1.3;color:var(--muted)}
.ab-file{position:relative;flex:none;display:grid;place-items:end center;width:26px;height:32px;padding-bottom:5px;border-radius:4px 9px 4px 4px;background:rgba(185,179,218,.16);box-shadow:inset 0 0 0 1px rgba(185,179,218,.3);font:600 8px/1 var(--sans);letter-spacing:.06em;color:var(--muted)}
.ab-file i{position:absolute;right:0;top:0;width:9px;height:9px;border-radius:0 8px 0 3px;background:rgba(185,179,218,.3)}
.ab-cmp-k,.ab-cmp-v{display:flex;align-items:center;min-width:0;min-height:46px;padding:9px 12px;border-top:1px solid var(--line);font-size:13px;line-height:1.3}
.ab-cmp-k{color:var(--muted)}
.ab-cmp-v{gap:8px;color:var(--muted)}
.ab-cmp-v.is-unk{color:rgba(185,179,218,.8)}
.ab-cmp-v.is-unk i{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;border:1px dashed rgba(185,179,218,.45);font:500 11px/1 var(--sans)}
.ab-cmp-v.is-fact{font-weight:500;font-size:14px;color:var(--paper);border-top-color:rgba(183,168,255,.2)}
.ab-cmp-lang{display:inline-grid;place-items:center;height:22px;padding:0 7px;border-radius:6px;background:rgba(183,168,255,.12);box-shadow:inset 0 0 0 1px rgba(183,168,255,.24);font:600 12px/1 var(--display);color:var(--paper)}
.ab-cmp-lang.is-on{background:var(--paper);color:var(--violet);box-shadow:none}

@container ab-why (max-width:459px){
  .ab-cmp{grid-template-columns:minmax(0,.84fr) minmax(0,1fr) minmax(0,1.1fr);padding:4px 8px 10px}
  .ab-cmp-h{flex-direction:column;align-items:flex-start;gap:8px;padding:12px 8px 10px}
  .ab-cmp-ht span{display:none}
  .ab-cmp-k,.ab-cmp-v{padding:8px}
  .ab-cmp-v.is-fact{font-size:13px}
  .ab-cmp-v.is-unk i{display:none}
}

/* ---------- What we believe: card fragments (sized with --q, 1px at 340) ---------- */
.ab-cv{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--q) * 10);font-size:calc(var(--q) * 13)}

/* Facts */
.ab-cv-facts{align-items:stretch;padding:0 calc(var(--q) * 38)}
.ab-cv-fact{display:grid;grid-template-columns:calc(var(--q) * 22) minmax(0,1fr) auto;align-items:center;gap:calc(var(--q) * 10);height:calc(var(--q) * 42);padding:0 calc(var(--q) * 14) 0 calc(var(--q) * 10);border-radius:calc(var(--q) * 12);background:rgba(14,12,36,.78);box-shadow:inset 0 0 0 1px var(--line-2);line-height:1.2;color:var(--muted)}
.ab-cv-fact span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ab-cv-fact b{font:600 calc(var(--q) * 15)/1 var(--display);letter-spacing:-.02em;color:var(--paper);white-space:nowrap}
.ab-cv-fact:first-child{background:linear-gradient(90deg,rgba(123,92,255,.3),rgba(123,92,255,.08)),rgba(14,12,36,.78);box-shadow:inset 0 0 0 1px rgba(183,168,255,.34)}
.ab-ck{width:calc(var(--q) * 22);height:calc(var(--q) * 22);border-radius:calc(var(--q) * 7);background:rgba(183,168,255,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23B7A8FF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6'/%3E%3C/svg%3E") center / 64% no-repeat}

/* Reader first: a phone with the reader notice */
.ab-cv-reader{flex-direction:row;gap:0}
.ab-cv-phone{position:relative;display:flex;flex-direction:column;gap:calc(var(--q) * 8);width:calc(var(--q) * 108);height:calc(var(--q) * 188);margin-top:calc(var(--q) * 12);padding:calc(var(--q) * 16) calc(var(--q) * 9) calc(var(--q) * 9);border-radius:calc(var(--q) * 20);background:var(--night);box-shadow:inset 0 0 0 calc(var(--q) * 3) rgba(183,168,255,.5),0 30px 40px -24px rgba(0,0,0,.9)}
.ab-cv-phone::before{content:"";position:absolute;left:50%;top:calc(var(--q) * 7);width:calc(var(--q) * 26);height:calc(var(--q) * 5);margin-left:calc(var(--q) * -13);border-radius:9px;background:rgba(183,168,255,.4)}
.ab-cv-pslide{position:relative;display:block;height:calc(var(--q) * 56);border-radius:calc(var(--q) * 6);background:var(--paper);overflow:hidden}
.ab-cv-pslide i{position:absolute;left:calc(var(--q) * 8);height:calc(var(--q) * 5);border-radius:9px;background:var(--ink)}
.ab-cv-pslide i:nth-child(1){top:calc(var(--q) * 9);width:calc(var(--q) * 22);height:calc(var(--q) * 3);background:var(--violet)}
.ab-cv-pslide i:nth-child(2){top:calc(var(--q) * 18);width:calc(var(--q) * 62)}
.ab-cv-pslide i:nth-child(3){top:calc(var(--q) * 27);width:calc(var(--q) * 44)}
.ab-cv-plines{display:grid;gap:calc(var(--q) * 6);padding:0 calc(var(--q) * 2)}
.ab-cv-plines i{height:calc(var(--q) * 4);border-radius:9px;background:rgba(183,168,255,.24)}
.ab-cv-plines i:nth-child(2){width:86%}
.ab-cv-plines i:nth-child(3){width:64%}
.ab-cv-notice{display:flex;align-items:center;gap:calc(var(--q) * 7);margin-top:auto;padding:calc(var(--q) * 8);border-radius:calc(var(--q) * 9);background:var(--lav)}
.ab-cv-notice b{display:grid;place-items:center;flex:none;width:calc(var(--q) * 16);height:calc(var(--q) * 16);border-radius:50%;background:var(--night);font:600 calc(var(--q) * 10)/1 var(--display);color:var(--lav)}
.ab-cv-notice span{display:grid;flex:1;gap:calc(var(--q) * 4)}
.ab-cv-notice span i{height:calc(var(--q) * 3.5);border-radius:9px;background:rgba(18,15,46,.55)}
.ab-cv-notice span i + i{width:70%}
.ab-cv-tag{align-self:flex-end;margin:0 0 calc(var(--q) * 30) calc(var(--q) * 10);padding:calc(var(--q) * 7) calc(var(--q) * 11);border-radius:calc(var(--q) * 10);background:var(--night-2);box-shadow:inset 0 0 0 1px var(--line-2),0 16px 30px -16px rgba(0,0,0,.9);font-weight:500;line-height:1;color:var(--paper);white-space:nowrap}

/* One link: the address and its versions */
.ab-cv-link{gap:calc(var(--q) * 16)}
.ab-cv-url{display:flex;align-items:center;gap:calc(var(--q) * 8);width:calc(var(--q) * 258);height:calc(var(--q) * 40);padding:0 calc(var(--q) * 14);border-radius:999px;background:rgba(14,12,36,.82);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--paper);white-space:nowrap}
.ab-cv-url svg{flex:none;width:calc(var(--q) * 15);height:calc(var(--q) * 15);stroke:var(--lav);stroke-width:1.6;stroke-linecap:round}
.ab-cv-url span{overflow:hidden;text-overflow:ellipsis}
.ab-cv-vers{position:relative;display:flex;justify-content:space-between;width:calc(var(--q) * 200)}
.ab-cv-vers::before{content:"";position:absolute;left:calc(var(--q) * 18);right:calc(var(--q) * 18);top:50%;height:calc(var(--q) * 2);margin-top:calc(var(--q) * -1);background:linear-gradient(90deg,rgba(183,168,255,.25),var(--lav))}
.ab-cv-v{position:relative;display:grid;place-items:center;width:calc(var(--q) * 38);height:calc(var(--q) * 38);border-radius:50%;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--line-2);font:600 calc(var(--q) * 13)/1 var(--display);color:var(--muted)}
.ab-cv-v.is-on{background:var(--violet);box-shadow:0 0 0 calc(var(--q) * 6) rgba(123,92,255,.22);color:var(--paper)}
.ab-cv-cap{color:var(--muted);line-height:1}
.ab-cv-cap b{font-weight:500;color:var(--paper)}

/* Languages: original, approved, draft */
.ab-cv-langs{align-items:stretch;gap:calc(var(--q) * 8);padding:0 calc(var(--q) * 40)}
.ab-cv-lang{display:grid;grid-template-columns:calc(var(--q) * 30) minmax(0,1fr) auto;align-items:center;gap:calc(var(--q) * 10);height:calc(var(--q) * 42);padding:0 calc(var(--q) * 8);border-radius:calc(var(--q) * 12);background:rgba(14,12,36,.78);box-shadow:inset 0 0 0 1px var(--line);color:var(--paper);line-height:1}
.ab-cv-lang b{display:grid;place-items:center;height:calc(var(--q) * 26);border-radius:calc(var(--q) * 7);background:rgba(183,168,255,.14);font:600 calc(var(--q) * 12)/1 var(--display)}
.ab-cv-lang span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ab-cv-lang em{font-style:normal;padding:calc(var(--q) * 5) calc(var(--q) * 8);border-radius:999px;font-size:calc(var(--q) * 12);color:var(--muted);white-space:nowrap}
.ab-cv-lang.is-ok{background:linear-gradient(90deg,rgba(123,92,255,.3),rgba(123,92,255,.08)),rgba(14,12,36,.78);box-shadow:inset 0 0 0 1px rgba(183,168,255,.34)}
.ab-cv-lang.is-ok b{background:var(--paper);color:var(--violet)}
.ab-cv-lang.is-ok em{background:var(--lav);color:var(--night)}
.ab-cv-lang.is-draft{background:none;box-shadow:none;outline:1px dashed rgba(183,168,255,.32);outline-offset:-1px;color:var(--muted)}
.ab-cv-lang.is-draft em{outline:1px dashed rgba(183,168,255,.4);outline-offset:-1px}

/* Private: a question only the sender sees */
.ab-cv-private{gap:calc(var(--q) * 12)}
.ab-cv-q{display:grid;gap:calc(var(--q) * 8);width:calc(var(--q) * 236);padding:calc(var(--q) * 12) calc(var(--q) * 14) calc(var(--q) * 14);border-radius:calc(var(--q) * 16) calc(var(--q) * 16) calc(var(--q) * 16) calc(var(--q) * 4);background:var(--night-2);box-shadow:inset 0 0 0 1px var(--line-2),0 22px 36px -22px rgba(0,0,0,.9)}
.ab-cv-qh{display:flex;align-items:center;gap:calc(var(--q) * 8);font-size:calc(var(--q) * 12);line-height:1;color:var(--muted)}
.ab-cv-av{display:grid;place-items:center;width:calc(var(--q) * 22);height:calc(var(--q) * 22);border-radius:50%;background:rgba(183,168,255,.2);font:600 calc(var(--q) * 11)/1 var(--display);color:var(--lav)}
.ab-cv-qt{font:500 calc(var(--q) * 15)/1.3 var(--sans);color:var(--paper)}
.ab-cv-lock{display:flex;align-items:center;gap:calc(var(--q) * 7);padding:calc(var(--q) * 7) calc(var(--q) * 12);border-radius:999px;background:rgba(183,168,255,.1);box-shadow:inset 0 0 0 1px var(--line-2);line-height:1;color:var(--paper);white-space:nowrap}
.ab-cv-lock svg{width:calc(var(--q) * 14);height:calc(var(--q) * 14);stroke:var(--lav);stroke-width:1.7;stroke-linecap:round}

/* Control: a suggestion stays a draft */
.ab-cv-card{display:grid;gap:calc(var(--q) * 10);width:calc(var(--q) * 246);padding:calc(var(--q) * 14);border-radius:calc(var(--q) * 16);background:linear-gradient(180deg,var(--night-3),var(--night-2));box-shadow:inset 0 0 0 1px var(--line-2),0 22px 36px -22px rgba(0,0,0,.9)}
.ab-cv-ch{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--q) * 8)}
.ab-cv-kind{font-size:calc(var(--q) * 12);letter-spacing:.12em;text-transform:uppercase;line-height:1;color:var(--lav);white-space:nowrap}
.ab-cv-pill{padding:calc(var(--q) * 4) calc(var(--q) * 8);border-radius:999px;outline:1px dashed rgba(183,168,255,.5);outline-offset:-1px;font-size:calc(var(--q) * 12);line-height:1;color:var(--paper)}
.ab-cv-ct{font:600 calc(var(--q) * 15)/1.25 var(--display);letter-spacing:-.02em;color:var(--paper)}
.ab-cv-btns{display:flex;justify-content:flex-end;gap:calc(var(--q) * 8)}
.ab-cv-b{padding:calc(var(--q) * 8) calc(var(--q) * 13);border-radius:999px;box-shadow:inset 0 0 0 1px rgba(183,168,255,.35);font-weight:500;line-height:1;color:var(--paper)}
.ab-cv-b.is-p{background:var(--violet);box-shadow:none}
.ab-cv-cursor{position:absolute;left:calc(50% + var(--q) * 92);top:calc(50% + var(--q) * 44)}
.ab-cv-cursor svg{width:calc(var(--q) * 16);height:calc(var(--q) * 19);fill:var(--paper);stroke:var(--night);stroke-width:1.4;stroke-linejoin:round}

/* ---------- How we build: one product ---------- */
.ab-build{container-name:ab-build}
.ab-parts{list-style:none;margin:0;padding:10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.ab-part{display:flex;align-items:center;gap:12px;min-width:0;padding:12px;border-radius:14px}
.ab-part:nth-child(4n+1),.ab-part:nth-child(4n+4){background:rgba(183,168,255,.05)}
.ab-part-t{display:grid;gap:2px;min-width:0}
.ab-part-t b{font:500 15px/1.3 var(--sans);color:var(--paper)}
.ab-part-t span{font-size:13px;line-height:1.35;color:var(--muted)}
.ab-build-foot{display:flex;align-items:center;gap:14px;margin:0 10px;padding:14px 12px 16px;border-top:1px solid var(--line);font-size:13px;line-height:1.35;color:var(--paper)}
.ab-hub{position:relative;flex:none;width:34px;height:34px;border-radius:50%;background:rgba(123,92,255,.22);box-shadow:inset 0 0 0 1px rgba(183,168,255,.3)}
.ab-hub::before{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:3px;background:var(--paper)}
.ab-hub i{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:var(--lav)}
.ab-hub i:nth-child(1){transform:rotate(0deg) translateY(-13px)}
.ab-hub i:nth-child(2){transform:rotate(60deg) translateY(-13px)}
.ab-hub i:nth-child(3){transform:rotate(120deg) translateY(-13px)}
.ab-hub i:nth-child(4){transform:rotate(180deg) translateY(-13px)}
.ab-hub i:nth-child(5){transform:rotate(240deg) translateY(-13px)}
.ab-hub i:nth-child(6){transform:rotate(300deg) translateY(-13px)}
@container ab-build (max-width:469px){
  .ab-parts{grid-template-columns:minmax(0,1fr);padding:8px}
  .ab-part{padding:10px}
  .ab-part:nth-child(n){background:none}
  .ab-part:nth-child(odd){background:rgba(183,168,255,.05)}
  .ab-build-foot{margin:0 8px}
}

/* ---------- The loop ---------- */
.ab-loop{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:72px;align-items:center}
.ab-loop-fig{position:relative;min-width:0;margin:0}
.ab-orbitv{width:100%;max-width:600px;margin-inline:auto}
.ab-stage{position:relative;aspect-ratio:1}
.ab-ring{position:absolute;inset:14%;border-radius:50%;border:1px solid var(--line-2)}
.ab-ring::before{content:"";position:absolute;inset:-12%;border-radius:50%;border:1px dashed rgba(183,168,255,.12)}
.ab-ring::after{content:"";position:absolute;inset:18%;border-radius:50%;background:radial-gradient(closest-side,rgba(123,92,255,.2),transparent)}
.ab-orbit{position:absolute;inset:14%;border-radius:50%;transform:rotate(324deg)}
.ab-orbit i{position:absolute;left:50%;top:0;width:calc(var(--q) * 14);height:calc(var(--q) * 14);margin:calc(var(--q) * -7) 0 0 calc(var(--q) * -7);border-radius:50%;background:var(--lav);box-shadow:0 0 0 calc(var(--q) * 6) rgba(183,168,255,.18)}
.ab-arr{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateY(calc(var(--q) * -216))}
.ab-arr::before{content:"";position:absolute;left:calc(var(--q) * -6);top:calc(var(--q) * -5);width:calc(var(--q) * 10);height:calc(var(--q) * 10);border-top:1.5px solid var(--lav);border-right:1.5px solid var(--lav);opacity:.75;transform:rotate(45deg)}

.ab-node{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);isolation:isolate;display:inline-flex;align-items:center;gap:calc(var(--q) * 10);padding:calc(var(--q) * 7) calc(var(--q) * 18) calc(var(--q) * 7) calc(var(--q) * 7);border-radius:999px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--line-2),0 18px 30px -18px rgba(0,0,0,.9);font:500 max(12px,calc(var(--q) * 17))/1 var(--sans);color:var(--paper);white-space:nowrap;transform:translate(-50%,-50%)}
.ab-node::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1.5px var(--lav),0 0 0 calc(var(--q) * 6) rgba(183,168,255,.14);opacity:0;pointer-events:none}
.ab-node .glyph{width:calc(var(--q) * 36);height:calc(var(--q) * 36);min-width:20px;min-height:20px;border-radius:50%}
.ab-node .glyph svg{width:62%;height:62%}

.ab-core{position:absolute;left:50%;top:50%;width:38%;display:grid;justify-items:center;gap:calc(var(--q) * 12);transform:translate(-50%,-50%)}
.ab-core-slide{position:relative;width:100%;aspect-ratio:16 / 10;overflow:hidden;border-radius:calc(var(--q) * 10);background:var(--paper);box-shadow:0 30px 50px -26px rgba(0,0,0,.95)}
.ab-core-panel{position:absolute;left:0;top:0;bottom:0;width:36%;background:var(--violet)}
.ab-core-l1,.ab-core-l2,.ab-core-l3{position:absolute;left:44%;border-radius:9px;background:var(--ink)}
.ab-core-l1{top:22%;width:30%;height:5%;background:var(--violet)}
.ab-core-l2{top:36%;width:46%;height:10%}
.ab-core-l3{top:52%;width:34%;height:10%}
.ab-core-ver{display:grid;justify-items:center;padding:calc(var(--q) * 7) calc(var(--q) * 14);border-radius:999px;background:var(--violet);font:600 max(12px,calc(var(--q) * 15))/1 var(--display);letter-spacing:-.01em;color:var(--paper);white-space:nowrap}
.ab-core-ver i{grid-area:1 / 1;opacity:0}
.ab-core-ver i:nth-child(2){opacity:1}
.ab-core-name{font:500 max(12px,calc(var(--q) * 14))/1.2 var(--sans);color:var(--muted);white-space:nowrap}

.ab-steps{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--line)}
.ab-step{position:relative;isolation:isolate;display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px;align-items:start;padding:18px 16px 18px 14px;border-bottom:1px solid var(--line)}
.ab-step::before{content:"";position:absolute;inset:0 0 -1px;z-index:-1;border-radius:14px;background:linear-gradient(90deg,rgba(183,168,255,.12),rgba(183,168,255,0) 80%);box-shadow:inset 2px 0 0 var(--lav);opacity:0}
.ab-step-n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--line-2);font:600 16px/1 var(--display);color:var(--paper)}
.ab-step-t{margin:0;font:600 var(--fs-h3)/1.3 var(--display);letter-spacing:-.02em;color:var(--paper)}
.ab-step-d{margin-top:4px;font-size:16px;line-height:1.55}

@media (max-width:899px){
  .ab-loop{grid-template-columns:minmax(0,1fr);gap:48px}
  .ab-loop-fig{width:100%;max-width:560px;justify-self:center}
}

/* ---------- Entrances ---------- */
.js .ab-cmp-v.is-fact{opacity:0;transform:translateX(-8px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(300ms + var(--k) * 120ms)}
.js .is-in .ab-cmp-v.is-fact{opacity:1;transform:none}
.js .ab-part{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(250ms + var(--k) * 90ms)}
.js .is-in .ab-part{opacity:1;transform:none}
.js .ab-node{opacity:0;transition:opacity .5s var(--ease);transition-delay:calc(250ms + var(--k) * 120ms)}
.js .is-in .ab-node{opacity:1}

/* ---------- Loops ---------- */
@keyframes ab-sl{0%{opacity:0}3%,30%{opacity:1}33.3%,100%{opacity:0}}
@keyframes ab-flip{0%,2%{opacity:1;transform:none}15%{opacity:0;transform:translateY(calc(var(--q) * -12)) rotateX(-95deg)}15.1%,100%{opacity:0;transform:none}}
@keyframes ab-hl{0%{opacity:0}4%,28%{opacity:1}33.3%,100%{opacity:0}}
@keyframes ab-prog{0%,30%{transform:scaleX(.143)}36%,63%{transform:scaleX(.286)}69%,96%{transform:scaleX(.857)}100%{transform:scaleX(.143)}}
@keyframes ab-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes ab-hit{0%{opacity:1}16%,100%{opacity:0}}
@keyframes ab-ver{0%{opacity:0}2%,31%{opacity:1}33.3%,100%{opacity:0}}

@media (prefers-reduced-motion:no-preference){
  .ab-sl{animation:ab-sl 9s linear infinite;animation-delay:calc((var(--k) - 3) * 3s)}
  .ab-sheet{animation:ab-flip 3s var(--ease) infinite}
  .ab-prog i{animation:ab-prog 9s var(--ease) infinite}
  .ab-fact.is-a::after,.ab-fact.is-b::after,.ab-fact.is-d::after{animation:ab-hl 9s linear infinite}
  .ab-fact.is-a::after{animation-delay:-9s}
  .ab-fact.is-b::after{animation-delay:-6s}
  .ab-fact.is-d::after{animation-delay:-3s}
  .ab-orbit{animation:ab-spin 10s linear infinite}
  .ab-node::after,.ab-step::before{animation:ab-hit 10s ease-out infinite;animation-delay:calc(var(--k) * 2s)}
  .ab-core-ver i{animation:ab-ver 30s linear infinite}
  .ab-core-ver i:nth-child(1){animation-delay:-30s}
  .ab-core-ver i:nth-child(2){animation-delay:-20s}
  .ab-core-ver i:nth-child(3){animation-delay:-10s}
}

/* Reduced motion: a still frame, the deck on Traction and version 2 */
@media (prefers-reduced-motion:reduce){
  .ab-fact.is-b::after{opacity:1}
  .js .ab-cmp-v.is-fact,.js .ab-part{opacity:1;transform:none}
  .js .ab-node{opacity:1}
}