/* =========================================================================
   Agent build layer
   A storytelling pass on top of the finished page: a few "agent" cursors
   draw, paste, type and style each section as it scrolls into view. The page
   underneath is never changed; every element is restored to its original
   markup and styles once its section is built.
   ========================================================================= */

:root {
  --ab-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  --ab-ease: cubic-bezier(.22, .61, .36, 1);
  --ab-pop: cubic-bezier(.3, 1.6, .5, 1);
  --ab-guide: #FF4D9D;
  --ab-panel: rgba(14, 15, 22, .9);
  --ab-panel-line: rgba(255, 255, 255, .1);
}

/* Hide the hero for the instant between first paint and the build starting.
   A timer in the <head> lifts this if the script never arrives. */
.ab-pending .hero__copy > *,
.ab-pending .portrait > * { opacity: 0; }

body { position: relative; }

/* Anything the build is animating opts out of the site's own transitions so
   the two never fight over the same property. */
[data-ab] { transition: none !important; animation: none !important; }

/* 1 ─ Text effects ------------------------------------------------------ */
.ab-h { opacity: 0; }
.ab-new { animation: ab-ink .7s var(--ab-ease) both; }
@keyframes ab-ink {
  0%   { opacity: 0; filter: blur(3px); color: var(--abc, #5B4BF5); }
  35%  { opacity: 1; filter: none; color: var(--abc, #5B4BF5); }
  100% { opacity: 1; }
}

.ab-caret {
  display: inline-block;
  width: 2px;
  height: 1.02em;
  margin: 0 -1px;
  vertical-align: -.12em;
  border-radius: 1px;
  background: var(--abc, #5B4BF5);
  animation: ab-blink 1s steps(1) infinite;
}
@keyframes ab-blink { 50% { opacity: 0; } }

/* Decoding glyphs, ghost suggestions, accepted suggestions */
.ab-scr { color: var(--abc, #5B4BF5); opacity: .9; }
.ab-gh { opacity: .3; animation: ab-ghin .35s var(--ab-ease) both; }
@keyframes ab-ghin { from { opacity: 0; } to { opacity: .3; } }
.ab-acc { animation: ab-acc .6s var(--ab-ease) both; }
@keyframes ab-acc {
  0%   { opacity: .3; color: var(--abc, #5B4BF5); }
  40%  { opacity: 1; color: var(--abc, #5B4BF5); }
  100% { opacity: 1; }
}

.ab-hl {
  background: var(--abh, rgba(91, 75, 245, .28));
  box-shadow: 0 0 0 2px var(--abh, rgba(91, 75, 245, .28));
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Accent words start in the body face; the design agent styles them after. */
.ab-plain .accent {
  font-family: inherit !important;
  font-style: normal !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: inherit !important;
  padding: 0 !important;
}

/* Empty image frame waiting for an asset. */
.news__mark.ab-slot { position: relative; }
.ab-slot::before {
  content: '';
  position: absolute;
  inset: 10px;
  z-index: 1;
  border: 1.5px dashed rgba(12, 14, 22, .2);
  border-radius: 12px;
  background: center / 34px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23868C9C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='m21 16-5-5-9 9'/%3E%3C/svg%3E");
}

.ab-swap { animation: ab-swap .4s var(--ab-pop) both; }
@keyframes ab-swap { from { opacity: 0; transform: scale(.4) rotate(-12deg); } }

/* 2 ─ Overlay layer ----------------------------------------------------- */
.ab-layer {
  position: absolute;
  inset: 0;
  z-index: 95;
  overflow: hidden;
  pointer-events: none;
}

/* Cursor: arrow tip sits exactly on the element's x/y. */
.ab-cur {
  position: absolute;
  left: 0; top: 0;
  opacity: 0;
  visibility: hidden;
  will-change: transform;
}
/* The site caps svg at max-width: 100%, which is 0 inside a 0×0 cursor. */
.ab-cur svg { max-width: none; }
.ab-cur__arrow {
  position: absolute;
  left: -3px; top: -3px;
  overflow: visible;
  filter: drop-shadow(0 0 6px var(--glow)) drop-shadow(0 3px 5px rgba(10, 11, 16, .35));
}
.ab-cur__att { position: absolute; left: 20px; top: 26px; }
.ab-cur__kbd { position: absolute; left: -14px; top: -40px; }

/* Thinking: a small bubble of bouncing dots beside the cursor. */
.ab-cur__think {
  position: absolute;
  left: 17px; top: 15px;
  display: none;
  gap: 3px;
  padding: 6px 7px;
  border-radius: 4px 10px 10px 10px;
  background: var(--c);
  box-shadow: 0 6px 14px -6px rgba(10, 11, 16, .45);
  transform-origin: 0 0;
}
.ab-cur__think b {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ink);
  animation: ab-dot 1s ease-in-out infinite;
}
.ab-cur__think b:nth-child(2) { animation-delay: .15s; }
.ab-cur__think b:nth-child(3) { animation-delay: .3s; }
.ab-cur.is-think .ab-cur__think { display: flex; animation: ab-in .22s var(--ab-pop) both; }

/* Eyedropper tool swaps in for the arrow. */
.ab-cur__drop {
  position: absolute;
  left: -3px; top: -19px;
  display: none;
  overflow: visible;
  filter: drop-shadow(0 3px 5px rgba(10, 11, 16, .32));
}
.ab-cur.is-drop .ab-cur__drop { display: block; }
.ab-cur.is-drop .ab-cur__arrow { display: none; }

/* Dragged file, or the "generating" badge while text streams in. */
.ab-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px 5px 5px;
  border-radius: 10px;
  background: #fff;
  color: #12141A;
  font: 500 11.5px/1.2 var(--ab-mono);
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow: 0 14px 30px -12px rgba(10, 11, 16, .5), 0 0 0 1px rgba(12, 14, 22, .08);
  transform-origin: 0 0;
  animation: ab-in .28s var(--ab-pop) both;
}
.ab-file i {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--c), #B9AEFF);
}
.ab-file.is-out { animation: ab-out .24s ease-in forwards; }
.ab-gen { background: #12141A; color: rgba(255, 255, 255, .88); box-shadow: 0 14px 30px -12px rgba(10, 11, 16, .6), 0 0 0 1px rgba(255, 255, 255, .1); }
.ab-gen i { width: 22px; height: 22px; background: none; }
.ab-gen em { display: inline-flex; gap: 3px; margin-left: 2px; }
.ab-gen em b {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--c);
  animation: ab-dot 1s ease-in-out infinite;
}
.ab-gen em b:nth-child(2) { animation-delay: .15s; }
.ab-gen em b:nth-child(3) { animation-delay: .3s; }
@keyframes ab-dot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }

/* Dictation waveform */
.ab-wave em { align-items: center; gap: 2px; height: 12px; margin-left: 4px; }
.ab-wave em b {
  width: 2px; height: 100%;
  border-radius: 2px;
  background: var(--c);
  transform-origin: 50% 50%;
  animation: ab-bar .8s ease-in-out infinite;
}
.ab-wave em b:nth-child(2) { animation-delay: .1s; }
.ab-wave em b:nth-child(3) { animation-delay: .25s; }
.ab-wave em b:nth-child(4) { animation-delay: .05s; }
.ab-wave em b:nth-child(5) { animation-delay: .18s; }
@keyframes ab-bar { 0%, 100% { opacity: .5; transform: scaleY(.25); } 50% { opacity: 1; transform: scaleY(1); } }

/* Autocomplete hint, colour swatch, tag bundle */
.ab-hint kbd {
  margin-left: 2px;
  padding: 3px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .4);
  color: #fff;
  font: 600 10px/1 var(--ab-mono);
}
.ab-swatch i { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6), 0 0 0 1px rgba(12, 14, 22, .12); }
.ab-bag i { background: linear-gradient(135deg, var(--c), #FFC0DB); }

@keyframes ab-in  { from { opacity: 0; transform: scale(.6); } }
@keyframes ab-out { to   { opacity: 0; transform: scale(.7) translateY(6px); } }

/* Keyboard shortcut caps that flash above the cursor. */
.ab-kbd { display: flex; gap: 3px; animation: ab-kbd 1s var(--ab-ease) forwards; }
.ab-kbd i {
  display: grid;
  place-items: center;
  min-width: 23px; height: 23px;
  padding: 0 6px;
  border-radius: 6px;
  background: #12141A;
  color: #fff;
  font: 600 11.5px/1 var(--ab-mono);
  font-style: normal;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 2px 0 rgba(0, 0, 0, .35), 0 8px 18px -8px rgba(0, 0, 0, .5);
}
@keyframes ab-kbd {
  0%   { opacity: 0; transform: translateY(6px) scale(.8); }
  14%  { opacity: 1; transform: none; }
  70%  { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-6px); }
}

.ab-ripple { position: absolute; left: 0; top: 0; }
.ab-ripple::after {
  content: '';
  position: absolute;
  left: -14px; top: -14px;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--c);
  animation: ab-ripple .5s ease-out forwards;
}
@keyframes ab-ripple { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }

/* Drag marquee and selection frames */
.ab-marq {
  position: absolute;
  border: 1.5px solid var(--c);
  background: var(--ch);
  border-radius: 2px;
  transition: opacity .35s var(--ab-ease);
}
.ab-marq.is-kept { border-style: dashed; background: transparent; }
.ab-dim {
  position: absolute;
  right: -2px; bottom: -25px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--c);
  color: var(--ink);
  font: 600 10.5px/1.4 var(--ab-mono);
  letter-spacing: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ab-mtag {
  position: absolute;
  left: -2px; top: -21px;
  color: var(--c);
  font: 600 10.5px/1.4 var(--ab-mono);
  letter-spacing: 0;
  white-space: nowrap;
}
.ab-frame {
  position: absolute;
  border: 1.5px solid var(--c);
  transition: opacity .35s var(--ab-ease);
}
.ab-frame b {
  position: absolute;
  width: 9px; height: 9px;
  background: #fff;
  border: 1.5px solid var(--c);
  border-radius: 2px;
}
.ab-frame b:nth-child(1) { left: -5px;  top: -5px; }
.ab-frame b:nth-child(2) { right: -5px; top: -5px; }
.ab-frame b:nth-child(3) { left: -5px;  bottom: -5px; }
.ab-frame b:nth-child(4) { right: -5px; bottom: -5px; }
.is-out { opacity: 0 !important; }

/* Snapping guides */
.ab-guide { position: absolute; background: var(--ab-guide); animation: ab-flash .9s ease forwards; }
.ab-guide--h { height: 1px; }
.ab-guide--v { width: 1px; }
@keyframes ab-flash { 0% { opacity: 0; } 15% { opacity: 1; } 65% { opacity: 1; } 100% { opacity: 0; } }

.ab-rule { position: absolute; height: 1.5px; width: 0; background: var(--c); transition: opacity .4s var(--ab-ease); }

/* Floating format toolbar */
.ab-tool {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 11px;
  border-radius: 10px;
  background: #12141A;
  color: rgba(255, 255, 255, .7);
  font: 500 12px/1 'Inter Tight', system-ui, sans-serif;
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow: 0 16px 36px -14px rgba(10, 11, 16, .6), inset 0 0 0 1px rgba(255, 255, 255, .1);
  transform-origin: 0 100%;
  animation: ab-in .26s var(--ab-pop) both;
  transition: opacity .3s var(--ab-ease);
}
.ab-tool b { font: italic 400 16px/1 'Instrument Serif', Georgia, serif; color: #fff; }
.ab-tool i { width: 1px; height: 14px; background: rgba(255, 255, 255, .16); }
.ab-tool span:last-child { color: #fff; }

/* QA check badge */
.ab-check {
  position: absolute;
  transform: translate(-100%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 7px;
  border-radius: 999px;
  background: #0E2419;
  color: #6CF0A8;
  border: 1px solid rgba(108, 240, 168, .3);
  font: 600 11px/1.2 var(--ab-mono);
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .55);
  animation: ab-badge 1.9s var(--ab-ease) forwards;
}
@keyframes ab-badge {
  0%   { opacity: 0; scale: .7; }
  12%  { opacity: 1; scale: 1; }
  80%  { opacity: 1; scale: 1; }
  100% { opacity: 0; scale: .96; }
}

.ab-toast {
  position: absolute;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px 11px 12px;
  border-radius: 999px;
  background: #fff;
  color: #12141A;
  font: 600 14px/1.2 'Inter Tight', system-ui, sans-serif;
  white-space: nowrap;
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .6);
  animation: ab-toast 3.2s var(--ab-ease) forwards;
}
.ab-toast i {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #22C55E;
}
.ab-toast small { font: 500 12px/1 var(--ab-mono); color: #868C9C; }
@keyframes ab-toast {
  0%   { opacity: 0; translate: 0 14px; scale: .9; }
  10%  { opacity: 1; translate: 0 0; scale: 1; }
  85%  { opacity: 1; translate: 0 0; }
  100% { opacity: 0; translate: 0 -10px; }
}

.ab-toast--ship { position: fixed; left: 50%; top: auto; bottom: 28px; z-index: 97; }

/* Image agent: viewfinder with corner brackets and a sweeping scan */
.ab-vf { position: absolute; transition: opacity .4s var(--ab-ease); }
.ab-vf > b {
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid var(--c);
  transition: border-color .3s var(--ab-ease), transform .3s var(--ab-ease);
}
.ab-vf > b:nth-child(1) { left: -3px;  top: -3px;    border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.ab-vf > b:nth-child(2) { right: -3px; top: -3px;    border-left: 0;  border-bottom: 0; border-top-right-radius: 6px; }
.ab-vf > b:nth-child(3) { left: -3px;  bottom: -3px; border-right: 0; border-top: 0;    border-bottom-left-radius: 6px; }
.ab-vf > b:nth-child(4) { right: -3px; bottom: -3px; border-left: 0;  border-top: 0;    border-bottom-right-radius: 6px; }
.ab-vf.is-done > b { border-color: #6CF0A8; transform: scale(1.15); }
.ab-vf__win { position: absolute; inset: 0; overflow: hidden; border-radius: 4px; }
.ab-vf__scan {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 30%;
  background: linear-gradient(to bottom, transparent, var(--ch));
  border-bottom: 1.5px solid var(--c);
  animation: ab-vscan .9s linear infinite;
}
.ab-vf.is-done .ab-vf__scan { display: none; }
@keyframes ab-vscan {
  0%   { transform: translateY(-100%); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translateY(340%); opacity: 0; }
}

.ab-scanline {
  position: absolute;
  border-radius: 2px;
  background: var(--c);
  box-shadow: 0 0 14px 2px var(--ch), 0 0 2px var(--c);
  transition: opacity .3s var(--ab-ease);
}
.ab-scanline::after {
  content: '';
  position: absolute;
  left: 8px; right: 8px; bottom: 2px;
  height: 40px;
  background: linear-gradient(to top, var(--ch), transparent);
}
.ab-iris {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid var(--c);
  box-shadow: 0 0 20px var(--ch), inset 0 0 20px var(--ch);
  transition: opacity .3s var(--ab-ease);
}

/* Code agent: network request chip */
.ab-net {
  position: absolute;
  translate: -50% 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 9px 4px 4px;
  border-radius: 8px;
  background: #12141A;
  color: rgba(255, 255, 255, .82);
  font: 500 10.5px/1.2 var(--ab-mono);
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .1);
  transform-origin: 50% 0;
  animation: ab-in .25s var(--ab-pop) both;
  transition: opacity .3s var(--ab-ease);
}
.ab-net b {
  padding: 3px 5px;
  border-radius: 4px;
  background: #FF7A45;
  color: #2A0E02;
  font-weight: 700;
  transition: background-color .2s var(--ab-ease);
}
.ab-net i { width: 40px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.ab-net s { display: block; height: 100%; background: #FF7A45; transform: scaleX(0); transform-origin: left; }
.ab-net.is-ok b { background: #22C55E; color: #04210F; }
.ab-net.is-ok s { background: #22C55E; }

/* Code agent: floating editor and terminal */
.ab-code {
  position: absolute;
  translate: 0 -100%;
  width: max-content;
  min-width: 200px;
  max-width: min(340px, calc(100vw - 32px));
  border-radius: 12px;
  background: #0F1117;
  color: #D8DBE6;
  box-shadow: 0 22px 46px -18px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .09);
  font: 500 11.5px/1.55 var(--ab-mono);
  letter-spacing: 0;
  overflow: hidden;
  transform-origin: 0 100%;
  animation: ab-in .26s var(--ab-pop) both;
  transition: opacity .3s var(--ab-ease);
}
.ab-code.is-below { translate: 0 0; transform-origin: 0 0; }
.ab-code header {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .45);
  font-size: 10.5px;
}
.ab-code header b { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.ab-code header span { margin-left: 5px; }
.ab-code header em { margin-left: auto; padding-left: 14px; font-style: normal; color: var(--c); }
.ab-code header em::before { content: '● writing'; }
.ab-code.is-run header em { color: #6CF0A8; }
.ab-code.is-run header em::before { content: '✓ compiled'; }
.ab-term header em::before { content: '● running'; }
.ab-term.is-run header em::before { content: '✓ done'; }
.ab-code pre {
  margin: 0;
  padding: 9px 12px 10px;
  font: inherit;
  white-space: pre-wrap;
  word-break: break-word;
}
.ab-code pre i { font-style: normal; }
.ab-code .s { color: #A5E8B8; }
.ab-code .t { color: #FF9DC4; }
.ab-code .a { color: #9CC8FF; }
.ab-code .k { color: #FFB86B; }
.ab-code .ab-caret { background: var(--c); }

/* Star burst */
.ab-spark { position: absolute; width: 0; height: 0; }
.ab-spark svg { position: absolute; left: -6px; top: -6px; filter: drop-shadow(0 0 4px var(--ch)); }

/* Spacing redline */
.ab-red { position: absolute; height: 1px; background: var(--ab-guide); animation: ab-flash 1.5s ease forwards; }
.ab-red::before, .ab-red::after { content: ''; position: absolute; top: -4px; width: 1px; height: 9px; background: var(--ab-guide); }
.ab-red::before { left: 0; }
.ab-red::after  { right: 0; }
.ab-red--v { width: 1px; height: auto; }
.ab-red--v::before, .ab-red--v::after { top: auto; left: -4px; width: 9px; height: 1px; }
.ab-red--v::before { top: 0; }
.ab-red--v::after  { bottom: 0; right: auto; }
.ab-red span {
  position: absolute;
  left: 50%; top: -24px;
  translate: -50% 0;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--ab-guide);
  color: #fff;
  font: 600 10.5px/1.3 var(--ab-mono);
  letter-spacing: 0;
  white-space: nowrap;
}
.ab-red--v span { left: 8px; top: 50%; translate: 0 -50%; }

/* Review comments */
.ab-cmt {
  position: absolute;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  translate: 0 -100%;
  transform-origin: 0 100%;
  animation: ab-in .28s var(--ab-pop) both;
  transition: opacity .35s var(--ab-ease);
}
.ab-cmt.is-left { flex-direction: row-reverse; translate: -100% -100%; transform-origin: 100% 100%; }
.ab-cmt__pin {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50% 50% 50% 4px;
  background: var(--c);
  color: var(--ink);
  font: 700 10px/1 var(--ab-mono);
  box-shadow: 0 0 0 2px #fff, 0 8px 18px -6px rgba(0, 0, 0, .4);
}
.ab-cmt.is-left .ab-cmt__pin { border-radius: 50% 50% 4px 50%; }
.ab-cmt__body {
  display: grid;
  gap: 7px;
  width: max-content;
  max-width: 240px;
  margin-bottom: 14px;
  padding: 9px 12px 10px;
  border-radius: 12px;
  background: #fff;
  color: #12141A;
  font: 500 12.5px/1.38 'Inter Tight', system-ui, sans-serif;
  letter-spacing: -.005em;
  box-shadow: 0 18px 40px -16px rgba(10, 11, 16, .5), 0 0 0 1px rgba(12, 14, 22, .07);
}
.ab-cmt__body p { margin: 0; }
.ab-cmt__body p + p { padding-top: 7px; border-top: 1px solid rgba(12, 14, 22, .08); animation: ab-line .3s var(--ab-ease) both; }
.ab-cmt__body b {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 2px;
  color: #4B5060;
  font: 600 10.5px/1.3 var(--ab-mono);
  letter-spacing: 0;
}
.ab-cmt__body b::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.ab-cmt.is-done .ab-cmt__body::after {
  content: '✓ Resolved';
  color: #16A34A;
  font: 600 10.5px/1 var(--ab-mono);
  animation: ab-line .3s var(--ab-ease) both;
}

/* Keyboard focus walk */
.ab-focus {
  position: absolute;
  border-radius: 12px;
  box-shadow: 0 0 0 2px var(--c), 0 0 0 6px var(--ch);
  transition: opacity .3s var(--ab-ease);
}
.ab-tabn {
  position: absolute;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--c);
  color: var(--ink);
  font: 700 10.5px/1 var(--ab-mono);
  box-shadow: 0 0 0 2px #fff;
  animation: ab-in .25s var(--ab-pop) both;
  transition: opacity .3s var(--ab-ease);
}

/* Lasso */
.ab-lasso { position: absolute; transition: opacity .35s var(--ab-ease); }
.ab-lasso svg { display: block; overflow: visible; }
.ab-lasso path {
  fill: transparent;
  stroke: var(--c);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: fill .3s var(--ab-ease);
}
.ab-lasso.is-closed path { fill: var(--cw); animation: ab-ants .6s linear infinite; }
@keyframes ab-ants { to { stroke-dashoffset: -18; } }

/* Check-off tick */
.ab-tick {
  position: absolute;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: #22C55E;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .2);
  animation: ab-tick 1.2s var(--ab-ease) forwards;
}
.ab-tick svg { width: 10px; height: 10px; }
@keyframes ab-tick {
  0%   { opacity: 0; scale: .3; }
  15%  { opacity: 1; scale: 1.15; }
  30%  { scale: 1; }
  75%  { opacity: 1; scale: 1; }
  100% { opacity: 0; scale: .6; }
}

/* 3 ─ The hive ---------------------------------------------------------- */
/* A straw skep in the corner. Cursors fly out of its entrance to work and
   back in when they're done; its straw fills with honey as the page builds. */
.ab-hive {
  position: fixed;
  right: 14px; bottom: 8px;
  z-index: 96;
  width: 96px; height: 96px;
  animation: ab-hive-in .7s var(--ab-pop) both;
}
@keyframes ab-hive-in { from { opacity: 0; transform: translateY(26px) scale(.7); } }

.ab-hive__btn {
  display: block;
  width: 100%; height: 100%;
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ab-hive__btn:focus-visible { outline: 2px solid #FFB224; outline-offset: 2px; }
.ab-hive__svg { display: block; width: 100%; height: 100%; overflow: visible; transition: filter .3s var(--ab-ease); }
.ab-hive__btn:hover .ab-hive__svg { filter: drop-shadow(0 0 14px rgba(255, 178, 36, .45)); }

.ab-hive__body { transform-origin: 60px 102px; animation: ab-sway 5s ease-in-out infinite; }
.ab-hive.is-busy .ab-hive__body { animation-duration: 2.6s; }
@keyframes ab-sway { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } }

/* Warm light around the entrance while agents are out working. */
.ab-hive__warm { opacity: 0; transition: opacity .6s var(--ab-ease); }
.ab-hive.is-busy .ab-hive__warm { opacity: 1; animation: ab-warm 1.8s ease-in-out infinite; }
@keyframes ab-warm { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* The entrance flashes in the colour of the agent going in or out. */
.ab-hive__flash { opacity: 0; }

/* A drop of honey appears once everything is built. */
.ab-hive__drip {
  opacity: 0;
  transform-origin: 79px 70px;
  transform: scaleY(.2);
  transition: opacity .5s var(--ab-ease), transform .9s var(--ab-pop);
}
.ab-hive.is-done .ab-hive__drip { opacity: 1; transform: none; animation: ab-drip 3s ease-in-out 1.2s infinite; }
@keyframes ab-drip { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.2); } }

/* Latest log line, floating beside the hive. */
.ab-hive__say {
  position: absolute;
  right: calc(100% - 2px); bottom: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(320px, calc(100vw - 140px));
  padding: 8px 13px 8px 10px;
  border-radius: 14px 14px 4px 14px;
  background: rgba(14, 15, 22, .92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: rgba(255, 255, 255, .9);
  font: 500 11.5px/1.3 var(--ab-mono);
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow: 0 16px 36px -16px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .08);
  opacity: 0;
  transform: translateX(10px) scale(.95);
  transform-origin: 100% 100%;
  transition: opacity .3s var(--ab-ease), transform .35s var(--ab-ease);
  pointer-events: none;
}
.ab-hive__say.is-on { opacity: 1; transform: none; }
.ab-hive__say i { flex: none; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 255, 255, .08); }
.ab-hive__say span { overflow: hidden; text-overflow: ellipsis; }

/* Status card on hover or keyboard focus. */
.ab-hive__tip {
  position: absolute;
  right: 6px; bottom: calc(100% + 4px);
  display: grid;
  gap: 2px;
  min-width: 196px;
  padding: 11px 13px 12px;
  border-radius: 14px;
  background: rgba(14, 15, 22, .94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  font-family: 'Inter Tight', system-ui, sans-serif;
  white-space: nowrap;
  box-shadow: 0 20px 44px -18px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(255, 255, 255, .09);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s var(--ab-ease), transform .25s var(--ab-ease);
  pointer-events: none;
}
.ab-hive__tip b { font-size: 13.5px; font-weight: 600; }
.ab-hive__tip small { color: rgba(255, 255, 255, .55); font-size: 12px; font-variant-numeric: tabular-nums; }
.ab-hive__tip em {
  justify-self: start;
  margin-top: 7px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #FFB224;
  color: #2A1900;
  font: 600 11px/1.3 var(--ab-mono);
  font-style: normal;
}
.ab-hive:hover .ab-hive__tip,
.ab-hive:focus-within .ab-hive__tip { opacity: 1; transform: none; }
.ab-hive:hover .ab-hive__say,
.ab-hive:focus-within .ab-hive__say { opacity: 0; }

@media (max-width: 680px) {
  .ab-hive { right: 8px; bottom: 4px; width: 72px; height: 72px; }
  .ab-hive__say { display: none; }
  .ab-toast--ship { bottom: 76px; }
  .ab-code { font-size: 10.5px; }
  .ab-cmt__body { max-width: 200px; font-size: 12px; }
}

@media print {
  .ab-layer, .ab-hive { display: none !important; }
  [data-ab] { opacity: 1 !important; clip-path: none !important; transform: none !important; }
}