/* ============================================================================
   Floom — the app, shown as artifacts
   ----------------------------------------------------------------------------
   Where a page shows the product, it does not shrink the whole app into a
   box. It lifts out the one part of a screen the words are about — a status
   column, a review pane, a forecast — draws it at the app's own size so it
   can be read, and lays it on a tinted ground. A second card may be pulled
   out past the ground's edge, the way a detail is pulled out of a page; the
   main card may run off the ground, the way a crop does. Then it plays: rows
   arrive, a status ticks over, a figure counts up, a cursor presses Approve,
   the view closes in on the number that matters.

     .aa                the figure; holds the scene's aspect ratio
       .aa-scene        the scene at its design size (--aa-w × --aa-h, in px),
                        scaled to the figure by floom-artifact.js (--aa-k)
         .aa-stage      the tinted ground; clips what runs off it
           .aa-cam      what the camera moves (data-cam)
             .aa-card   a part of the app, at the app's size
         .aa-card.aa-pop  a card pulled out over the ground's edge
         .aa-cursor     the pointer

   Timing lives in the markup: data-at="ms" on any part brings it in (or
   changes its state, by data-fx) that many ms after the scene starts;
   data-stagger spreads a part's children; data-loop sets the length of one
   run. floom-artifact.js plays a scene while it is on screen, from the top,
   and loops it; with reduced motion every part shows in its final state.

   Every figure is a picture: role="img" with the description, the scene
   aria-hidden, nothing in it takes focus or a click. Colours are the site
   palette's; the app's greens and blues are drawn in ink and greys. Every
   measure is on the 4px grid at the design size. Every class is `aa-`.
   ========================================================================== */

/* ── the figure ─────────────────────────────────────────────────────────── */
.aa{
  --aa-k: 1;
  --aa-w: 810; --aa-h: 505;
  --aa-ground: color-mix(in srgb, #FFB199 18%, #FAF6F1);
  --aa-line: rgba(24, 24, 24, .08);
  --aa-line-2: rgba(24, 24, 24, .14);
  --aa-soft: #FAF6F1;
  --aa-mute: #767270;
  --aa-ink: #181818;
  --aa-ink-2: #312E2E;
  --aa-or: #FF3C00;
  --aa-or-bg: color-mix(in srgb, #FF3C00 8%, #FFFFFF);
  --aa-or-line: color-mix(in srgb, #FF3C00 28%, #FFFFFF);
  --aa-shadow: 0 1px 2px rgba(49, 46, 46, .06), 8px 12px 32px -12px color-mix(in srgb, #FF8A4D 30%, rgba(49, 46, 46, .32));
  --aa-shadow-pop: 0 2px 4px rgba(49, 46, 46, .08), 12px 20px 48px -12px color-mix(in srgb, #FF8A4D 34%, rgba(49, 46, 46, .4));
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--aa-w) / var(--aa-h);
  margin: 0;
  color: var(--aa-ink);
}
/* on a product page the figure takes the plate's place: the ground is drawn
   by the scene, so the plate's own padding and grey come off */
.pp-plate.aa{ display: block; padding: 0; background: none; border-radius: 0; aspect-ratio: var(--aa-w) / var(--aa-h); }
.pp-slide > .aa{ flex: none; }

.aa-scene{
  position: absolute;
  left: 0; top: 0;
  width: calc(var(--aa-w) * 1px);
  height: calc(var(--aa-h) * 1px);
  transform-origin: 0 0;
  transform: scale(var(--aa-k));
  font-family: var(--font);
  font-size: 13px;
  font-weight: 450;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: left;
  pointer-events: none;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  transition: opacity .42s ease;
}
.aa-scene.is-resetting{ opacity: 0; }

/* the ground: tinted, rounded, clipping what runs off it */
.aa-stage{
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 16px;
  background: var(--aa-ground);
}
.aa-cam{
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  transition: transform 1.2s var(--ac-move, cubic-bezier(.2, .8, .2, 1));
}
/* grounds — the default is a pale peach; a hero takes the warm sweep */
.aa.is-warm{ --aa-ground: linear-gradient(135deg, color-mix(in srgb, #FFB199 72%, #FAF6F1) 0%, color-mix(in srgb, #FF8A4D 88%, #FFB199) 58%, color-mix(in srgb, #FF3C00 70%, #FF8A4D) 100%); }
.aa.is-sand{ --aa-ground: linear-gradient(160deg, #FAF6F1 0%, color-mix(in srgb, #DBD4CF 70%, #FAF6F1) 100%); }
.aa.is-ink{ --aa-ground: linear-gradient(160deg, #312E2E 0%, #181818 100%); }
.aa.is-app{ --aa-ground: #EDEDED; }
.aa.is-app .aa-stage{ border-radius: 0; }
.aa-mon{ position: absolute; left: 0; top: 0; width: 176px; height: 100%; }
.aa-card.is-flat{ border-color: transparent; box-shadow: none; }
.aa.is-ember{ --aa-ground: linear-gradient(160deg, color-mix(in srgb, #FFB199 40%, #FAF6F1) 0%, color-mix(in srgb, #FFB199 76%, #FAF6F1) 100%); }

/* ── a card: a part of the app at the app's size ───────────────────────── */
.aa-card{
  position: absolute;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--aa-line);
  border-radius: 12px;
  box-shadow: var(--aa-shadow);
  color: var(--aa-ink);
}
.aa-pop{ z-index: 3; box-shadow: var(--aa-shadow-pop); }
.aa-card.is-shell{ border-radius: 16px; }
.aa-pad{ padding: 16px; }
.aa-pad-l{ padding: 20px 24px; }

/* ── type inside the app ───────────────────────────────────────────────── */
.aa-t{ margin: 0; font-family: var(--font-display); font-size: 15.79px; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; color: var(--aa-ink); }
.aa-t.is-l{ font-size: 20.08px; font-weight: 600; }
.aa-t.is-xl{ font-size: 25.55px; font-weight: 600; letter-spacing: -0.02em; }
.aa-s{ margin: 0; font-size: 11.01px; color: var(--aa-mute); line-height: 1.3; }
.aa-k{ font-size: 9.76px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--aa-mute); line-height: 1; }
.aa-v{ font-family: var(--font-display); font-size: 20.08px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.aa-v.is-l{ font-size: 28.81px; }
.aa-num{ font-variant-numeric: tabular-nums; }
.aa-mono{ font-family: var(--mono, var(--font)); font-size: 11.01px; letter-spacing: 0; }
.aa-or-t{ color: var(--aa-or); }
.aa-mute{ color: var(--aa-mute); }
.aa-b{ font-weight: 600; }

/* a card's head: title and subline at the leading edge, actions trailing */
.aa-h{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 12px; }
.aa-h > div:not(.aa-row){ display: grid; gap: 4px; min-width: 0; }
.aa-row{ display: flex; align-items: center; gap: 8px; }
.aa-col{ display: grid; gap: 8px; }
.aa-sp{ flex: 1 1 auto; }
.aa-hr{ height: 1px; background: var(--aa-line); }

/* ── controls ─────────────────────────────────────────────────────────── */
.aa-btn{
  display: inline-flex; align-items: center; gap: 4px;
  height: 28px; padding: 0 12px;
  border: 1px solid var(--aa-line-2); border-radius: 8px;
  background: #FFFFFF;
  font-size: 12.41px; font-weight: 500; line-height: 1; color: var(--aa-ink-2);
  white-space: nowrap;
  transition: transform .18s ease, background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.aa-btn.is-solid{ border-color: transparent; background: var(--aa-or); color: #FFFFFF; }
.aa-btn.is-ink{ border-color: transparent; background: var(--aa-ink); color: #FFFFFF; }
.aa-btn svg{ width: 12px; height: 12px; }
.aa-tabs{ display: flex; gap: 20px; padding: 0 20px; border-bottom: 1px solid var(--aa-line); font-size: 12.41px; color: var(--aa-mute); }
.aa-tabs > span{ padding: 8px 0 12px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.aa-tabs > .is-on{ color: var(--aa-ink); border-color: var(--aa-or); font-weight: 500; }
.aa-seg{ display: inline-flex; padding: 4px; gap: 4px; border-radius: 8px; background: #EDEDED; font-size: 11.01px; }
.aa-seg > span{ padding: 4px 8px; border-radius: 4px; color: var(--aa-mute); }
.aa-seg > .is-on{ background: #FFFFFF; color: var(--aa-ink); box-shadow: 0 1px 2px rgba(24, 24, 24, .08); }
.aa-search{ display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 8px; background: #EDEDED; font-size: 12.41px; color: var(--aa-mute); }
.aa-search svg{ width: 12px; height: 12px; }

/* ── chips and flags ──────────────────────────────────────────────────── */
.aa-chip{
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 8px;
  border-radius: 999px;
  background: #EDEDED;
  font-size: 11.01px; font-weight: 500; line-height: 1; color: var(--aa-ink-2);
  white-space: nowrap;
}
.aa-chip.is-ink{ background: var(--aa-ink); color: #FFFFFF; }
.aa-chip.is-or{ background: var(--aa-or-bg); color: var(--aa-or); }
.aa-chip.is-line{ background: #FFFFFF; border: 1px dashed var(--aa-line-2); color: var(--aa-mute); }
.aa-chip.is-soft{ background: var(--aa-soft); border: 1px solid var(--aa-line); }
.aa-chip svg{ width: 10px; height: 10px; }
.aa-flag{ font-size: 9.76px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--aa-mute); white-space: nowrap; }
.aa-flag.is-ink{ color: var(--aa-ink); }
.aa-flag.is-or{ color: var(--aa-or); }
.aa-av{
  display: inline-grid; place-items: center; flex: none;
  width: 24px; height: 24px; border-radius: 999px;
  background: #EDEDED; color: var(--aa-ink-2);
  font-size: 9.76px; font-weight: 600; line-height: 1;
}
.aa-av.is-l{ width: 40px; height: 40px; font-size: 15.79px; }
.aa-av.is-ink{ background: var(--aa-ink); color: #FFFFFF; }
.aa-dot{ display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--aa-or); flex: none; }
.aa-tick{ width: 12px; height: 12px; flex: none; }

/* ── a table ──────────────────────────────────────────────────────────── */
.aa-tbl{ width: 100%; border-collapse: collapse; font-size: 12.41px; line-height: 1.3; }
.aa-tbl th{
  padding: 8px 12px; text-align: left; white-space: nowrap;
  background: var(--aa-soft); border-bottom: 1px solid var(--aa-line);
  font-size: 11.01px; font-weight: 500; color: var(--aa-mute);
}
.aa-tbl td{ padding: 8px 12px; border-bottom: 1px solid var(--aa-line); white-space: nowrap; vertical-align: middle; }
.aa-tbl tr:last-child td{ border-bottom: 0; }
.aa-tbl .is-r{ text-align: right; font-variant-numeric: tabular-nums; }
.aa-tbl .is-tot td{ font-weight: 600; background: var(--aa-soft); }
.aa-tbl .aa-co{ display: flex; align-items: center; gap: 8px; font-weight: 500; }
.aa-tbl td.is-tall{ padding-block: 12px; }

/* a key-value list */
.aa-kv{ display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 12.41px; }
.aa-kv > dt{ color: var(--aa-mute); }
.aa-kv > dd{ margin: 0; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }

/* a strip of figures */
.aa-kpis{ display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.aa-kpis > div{ display: grid; gap: 8px; align-content: start; padding: 16px 20px; border-left: 1px solid var(--aa-line); }
.aa-kpis > div:first-child{ border-left: 0; }
.aa-kpis .aa-chip{ justify-self: start; height: 20px; font-size: 9.76px; background: var(--aa-soft); border: 1px solid var(--aa-line); color: var(--aa-mute); }

/* ── a document, as the app shows it in review ─────────────────────────── */
.aa-sheet{ display: grid; font-size: 11.01px; line-height: 1; border-top: 1px solid var(--aa-line); }
.aa-sheet > div{ display: grid; grid-template-columns: 32px var(--aa-sheet-cols, 1.6fr 1fr 1fr); }
.aa-sheet > div > span{ padding: 8px; border-right: 1px solid var(--aa-line); border-bottom: 1px solid var(--aa-line); white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums; transition: background-color .35s ease, box-shadow .35s ease; }
.aa-sheet > div > span:first-child{ background: var(--aa-soft); color: var(--aa-mute); text-align: center; }
.aa-sheet > .is-head > span{ background: var(--aa-soft); color: var(--aa-mute); text-align: center; }
.aa-sheet .is-r{ text-align: right; }
.aa-file{ display: flex; align-items: center; gap: 8px; }
.aa-file-ic{ display: grid; place-items: center; width: 28px; height: 32px; border-radius: 4px; background: var(--aa-ink); color: #FFFFFF; font-size: 8.65px; font-weight: 700; letter-spacing: 0.05em; flex: none; }
.aa-file-ic.is-or{ background: var(--aa-or); }

/* ── the agent ────────────────────────────────────────────────────────── */
.aa-ask{
  justify-self: end; max-width: 80%;
  padding: 8px 12px; border-radius: 12px 12px 4px 12px;
  background: #EDEDED; font-size: 12.41px; color: var(--aa-ink);
}
.aa-steps{ display: grid; gap: 8px; font-size: 11.01px; color: var(--aa-mute); }
.aa-steps > div{ display: flex; align-items: center; gap: 8px; }
.aa-steps .aa-mono{ padding: 4px; border-radius: 4px; background: var(--aa-soft); border: 1px solid var(--aa-line); color: var(--aa-ink-2); font-size: 9.76px; }
.aa-say{ font-size: 12.41px; line-height: 1.3; color: var(--aa-ink); }
.aa-say p{ margin: 0 0 8px; }
.aa-cite svg{ width: 12px; height: 12px; flex: none; }
.aa-cite{ display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 4px; background: var(--aa-soft); border: 1px solid var(--aa-line); font-size: 9.76px; font-weight: 500; color: var(--aa-ink-2); }
.aa-composer{
  display: flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 8px 0 16px;
  border: 1px solid var(--aa-line-2); border-radius: 12px; background: #FFFFFF;
  font-size: 12.41px; color: var(--aa-mute);
  box-shadow: 0 4px 16px -8px rgba(24, 24, 24, .16);
}
.aa-composer .aa-send{ display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--aa-or); color: #FFFFFF; flex: none; }
.aa-composer .aa-send svg{ width: 14px; height: 14px; }

/* ── the app's frame, where a card is the whole window ─────────────────── */
.aa-shell{ display: grid; grid-template-columns: 176px 1fr; height: 100%; background: #EDEDED; }
.aa-nav{ display: grid; align-content: start; gap: 4px; padding: 16px 12px; font-size: 12.41px; color: var(--aa-ink-2); }
.aa-nav > b{ display: flex; align-items: center; gap: 8px; padding: 0 8px 12px; font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--aa-ink); }
.aa-nav > b img{ width: 20px; height: 20px; }
.aa-nav > i{ padding: 12px 8px 4px; font-style: normal; font-size: 9.76px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--aa-mute); }
.aa-nav > span{ display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; border-radius: 8px; }
.aa-nav > span.is-on{ background: #FFFFFF; color: var(--aa-or); font-weight: 500; }
.aa-nav svg{ width: 14px; height: 14px; flex: none; }
.aa-panel{ margin: 8px 8px 8px 0; border-radius: 12px; background: #FFFFFF; overflow: hidden; }

/* ── charts ───────────────────────────────────────────────────────────── */
.aa-chart{ display: block; overflow: visible; }
.aa-chart .is-grid{ stroke: var(--aa-line); stroke-width: 1; }
.aa-chart .is-axis{ font-family: var(--font); font-size: 9.76px; fill: var(--aa-mute); }
.aa-chart .is-line{ fill: none; stroke: var(--aa-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.aa-chart .is-line.is-or{ stroke: var(--aa-or); }
.aa-chart .is-line.is-grey{ stroke: #C5C5C5; stroke-dasharray: 4 4; }
.aa-chart .is-area{ fill: color-mix(in srgb, #FF3C00 8%, transparent); stroke: none; }
.aa-chart .is-bar{ fill: var(--aa-ink); }
.aa-chart .is-bar.is-or{ fill: var(--aa-or); }
.aa-chart .is-bar.is-soft{ fill: #DBD4CF; }


/* ── more of the app ──────────────────────────────────────────────────── */
/* a stacked bar of states, and its legend */
.aa-meter{ display: flex; gap: 4px; height: 8px; overflow: hidden; border-radius: 999px; }
.aa-meter > i{ display: block; min-width: 0; background: var(--aa-ink); }
.aa-meter > .is-2, .aa-legend .is-2{ background: #767270; }
.aa-meter > .is-3, .aa-legend .is-3{ background: #C5C5C5; }
.aa-meter > .is-4, .aa-legend .is-4{ background: #DBD4CF; }
.aa-meter > .is-or, .aa-legend .is-or{ background: var(--aa-or); }
.aa-legend > dt{ display: flex; align-items: center; gap: 8px; }
.aa-legend > dt > i{ width: 8px; height: 8px; border-radius: 2px; background: var(--aa-ink); }
.aa-leg{ display: inline-flex; align-items: center; gap: 8px; font-size: 11.01px; color: var(--aa-mute); }
.aa-leg > i{ width: 16px; height: 2px; background: var(--aa-ink); }
.aa-leg > i.is-grey{ background: repeating-linear-gradient(90deg, #C5C5C5 0 4px, transparent 4px 8px); }
.aa-leg > i.is-or{ background: var(--aa-or); }
/* a table row lit under the pointer: data-fx="hlrow" on each of its cells */
.aa [data-fx="hlrow"].is-in{ background-color: var(--aa-or-bg); }
.aa td[data-fx="hlrow"]:first-child.is-in{ box-shadow: inset 2px 0 0 var(--aa-or); }
.aa [data-fx="hlrow"].is-in.is-off, .aa td[data-fx="hlrow"]:first-child.is-in.is-off{ background-color: transparent; box-shadow: none; }
/* a list of things, one per row */
.aa-list > .aa-li{ display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; border-top: 1px solid var(--aa-line); }
.aa-list .aa-s{ margin-top: 4px; }
/* an activity feed */
.aa-feed{ display: grid; gap: 12px; padding: 0 20px 20px; font-size: 12.41px; }
.aa-feed > div{ display: flex; align-items: flex-start; gap: 12px; }
.aa-feed .aa-av svg{ width: 12px; height: 12px; }
.aa-feed .aa-s{ display: block; margin-top: 4px; }
/* a checkbox in a table row */
.aa-cbx{ display: inline-grid; }
/* the agent's thread */
.aa-thread{ display: grid; gap: 16px; align-content: start; padding: 24px; }
.aa-thread > .aa-ask{ min-height: 36px; }
.aa-ans{ border: 1px solid var(--aa-line); border-radius: 8px; overflow: hidden; border-collapse: separate; border-spacing: 0; }
.aa-chg{ display: grid; gap: 8px; font-size: 12.41px; }
.aa-chg > div{ display: grid; grid-template-columns: 96px 1fr auto; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 8px; background: var(--aa-soft); }
/* a tooltip-sized card */
.aa-tip{ border-radius: 8px; }
/* a scene with no ground of its own: its slide is the ground */
.aa.is-bare{ --aa-ground: transparent; }
.aa.is-bare .aa-stage{ border-radius: 0; }
.pp-slide.has-aa{ padding-right: 0; padding-bottom: 0; overflow: hidden; background: var(--aa-slide, color-mix(in srgb, #FFB199 18%, #FAF6F1)); }
.pp-slide.has-aa > .pp-slide-h{ padding-right: round(clamp(16px, 2.5vw, 40px), 4px); }
.pp-slide.has-aa > .aa{ margin-top: auto; }
/* a part that has left again */
.aa [data-at].is-in.is-off:not([data-fx="hl"]):not([data-fx="hlrow"]){ opacity: 0; }

/* two readings side by side, and the decision */
.aa-cmp{ display: grid; grid-template-columns: 1fr 1fr auto; gap: 16px; align-items: center; padding: 12px; border-radius: 8px; background: var(--aa-soft); }
.aa-cmp > div{ display: grid; gap: 8px; }
.aa-cmp .aa-v{ font-size: 17.81px; }

/* ── where a scene stands in the home page ─────────────────────────────── */
/* a product card's picture: the card's own rounded frame holds the scene */
.prod-shot:has(> .aa){ background: none; }
.prod-shot > .aa{ height: 100%; }
.prod-shot > .aa .aa-stage{ border-radius: 0; }
/* the pinned square in "Connect every layer": the scene is its ground */
.sx-visual:has(> .aa){ padding: 0; background: none; border-radius: 16px; }
.sx-visual > .aa{ width: 100%; }

/* ── the pointer ──────────────────────────────────────────────────────── */
.aa-cursor{
  position: absolute; left: 0; top: 0; z-index: 9;
  width: 20px; height: 20px;
  opacity: 0;
  transition: opacity .3s ease;
  will-change: transform;
}
.aa-cursor.is-on{ opacity: 1; }
.aa-cursor svg{ display: block; width: 20px; height: 20px; filter: drop-shadow(0 2px 4px rgba(24, 24, 24, .24)); }
.aa-cursor::after{
  content: ""; position: absolute; left: -8px; top: -8px;
  width: 16px; height: 16px; border-radius: 999px;
  background: rgba(255, 60, 0, .32);
  opacity: 0; transform: scale(.4);
}
.aa-cursor.is-click::after{ animation: aa-click .5s ease-out; }
@keyframes aa-click{ 0%{ opacity: 1; transform: scale(.4); } 100%{ opacity: 0; transform: scale(2.2); } }

/* ── the motion: what data-at does, by data-fx ──────────────────────────
   enter (the default) rises in · fade · grow (bars, from the baseline) ·
   draw (a line, along its length) · swap (a state word turns over) ·
   hl (a part lights up, and stays lit until data-off) · press (a button is
   pressed) · check (a box is ticked) · type (the text types itself) ·
   count (the figure counts up) · pop (a card is pulled out) */
.aa [data-at]{ transition: opacity .5s ease, transform .7s var(--ac-move, cubic-bezier(.2, .8, .2, 1)), background-color .35s ease, box-shadow .35s ease, color .35s ease; }
.aa [data-at]:not([data-fx]), .aa [data-fx="enter"]{ opacity: 0; transform: translateY(8px); }
.aa [data-fx="fade"]{ opacity: 0; }
.aa [data-fx="slide"]{ opacity: 0; transform: translateX(24px); }
.aa [data-fx="pop"]{ opacity: 0; transform: translate(-12px, 12px) scale(.96); transition-duration: .5s, .8s; transition-timing-function: ease, var(--ac-soft, cubic-bezier(.2, .8, .2, 1)); }
.aa [data-at].is-in:not([data-fx]), .aa .is-in[data-fx="enter"], .aa .is-in[data-fx="fade"], .aa .is-in[data-fx="slide"], .aa .is-in[data-fx="pop"]{ opacity: 1; transform: none; }
.aa [data-fx="grow"]{ transform: scaleY(0); transform-box: fill-box; transform-origin: 50% 100%; transition: transform .9s var(--ac-soft, cubic-bezier(.2, .8, .2, 1)); }
.aa [data-fx="grow"].is-in{ transform: none; }
.aa [data-fx="growx"]{ transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--ac-move, cubic-bezier(.2, .8, .2, 1)); }
.aa [data-fx="growx"].is-in{ transform: none; }
.aa [data-fx="draw"]{ stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s cubic-bezier(.4, 0, .2, 1); }
.aa [data-fx="draw"].is-in{ stroke-dashoffset: 0; }
.aa [data-fx="hl"].is-in{ background-color: var(--aa-or-bg); box-shadow: inset 0 0 0 1px var(--aa-or-line); }
.aa [data-fx="hl"].is-in.is-off{ background-color: transparent; box-shadow: none; }
.aa [data-fx="press"].is-in{ animation: aa-press .36s ease; }
@keyframes aa-press{ 40%{ transform: scale(.94); } 100%{ transform: none; } }
.aa [data-fx="check"] .aa-box{ display: grid; place-items: center; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--aa-line-2); background: #FFFFFF; transition: background-color .25s ease, border-color .25s ease; }
.aa [data-fx="check"] .aa-box svg{ width: 10px; height: 10px; opacity: 0; transition: opacity .2s ease; }
.aa [data-fx="check"].is-in .aa-box{ background: var(--aa-or); border-color: var(--aa-or); }
.aa [data-fx="check"].is-in .aa-box svg{ opacity: 1; }
/* swap: the first child is the state before, the second the state after */
.aa [data-fx="swap"]{ display: inline-grid; }
.aa [data-fx="swap"] > *{ grid-area: 1 / 1; transition: opacity .35s ease, transform .5s var(--ac-move, cubic-bezier(.2, .8, .2, 1)); }
.aa [data-fx="swap"] > :last-child{ opacity: 0; transform: translateY(8px); }
.aa [data-fx="swap"].is-in > :first-child{ opacity: 0; transform: translateY(-8px); }
.aa [data-fx="swap"].is-in > :last-child{ opacity: 1; transform: none; }
/* type: the caret blinks while the text is being written */
.aa [data-fx="type"].is-typing::after{ content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 1px; vertical-align: -2px; background: currentColor; animation: aa-caret .9s steps(1) infinite; }
@keyframes aa-caret{ 50%{ opacity: 0; } }
/* thinking dots */
.aa-think{ display: inline-flex; gap: 4px; }
.aa-think > i{ width: 4px; height: 4px; border-radius: 999px; background: var(--aa-mute); animation: aa-think 1.1s ease-in-out infinite; }
.aa-think > i:nth-child(2){ animation-delay: .15s; }
.aa-think > i:nth-child(3){ animation-delay: .3s; }
@keyframes aa-think{ 0%, 80%, 100%{ opacity: .25; } 40%{ opacity: 1; } }

/* reduced motion: every part is where it ends, nothing moves */
@media (prefers-reduced-motion: reduce){
  .aa [data-at], .aa [data-fx] > *, .aa-cam, .aa-scene{ transition: none !important; animation: none !important; }
  .aa-cursor{ display: none; }
}
.aa-tbl.is-tight th, .aa-tbl.is-tight td{ padding-inline: 8px; }

/* ══ more of the app, first drawn for one page ═════════════════════════════
   Parts each product page needed beyond the core set above. They are as
   generic as the rest — any scene may use them — and named apart where two
   pages drew the same idea differently:
     forms      .aa-fld > .aa-label + .aa-input (.is-s, .is-soft) · .aa-fld > label
                + .aa-in (.is-focus) · .aa-lbl + .aa-inp (.is-sm, .is-ph,
                .is-focus) · .aa-unit (an input with its unit) · .aa-ro (a
                read-only field) · .aa-form · .aa-hint · .aa-otp (code boxes)
     choices    .aa-pill / .aa-pills (a reading's value) · .aa-pick (a reading
                to choose) · .aa-opt · .aa-choose (one of, as pills) · .aa-modes
                · .aa-choice · .aa-switch (.is-s small; data-fx="toggle")
     marks      .aa-src (.is-book · .is-prior · .is-judge · .is-you · .is-calc
                · .is-edit) + .aa-key · .aa-n · .aa-ring (.is-fill, .is-out)
                · .aa-ck / .aa-mx · .aa-ul
     panels     .aa-eyebrow · .aa-eb · .aa-prov · .aa-note · .aa-ok · .aa-toast
                · .aa-sug / .aa-sugs · .aa-ag · .aa-impact · .aa-sec / .aa-set
                · .aa-code · .aa-viewer / .aa-page · .aa-stat / .aa-donut ·
                .aa-stops / .aa-stop · .aa-stack
     motion     data-fx="open" (a section unfolds) · swap .is-block / .is-still
                / .aa-fold
   ========================================================================== */

/* ── Deal Intelligence ── */
/* a reading's value, with a small caption after it */
.aa-pill{
  display: inline-flex; align-items: center; gap: 4px;
  height: 28px; padding: 0 12px;
  border: 1px solid var(--aa-line-2); border-radius: 999px;
  background: #FFFFFF;
  font-size: 12.41px; font-weight: 500; line-height: 1; color: var(--aa-ink);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.aa-pill > small{ font-size: 9.76px; font-weight: 450; color: var(--aa-mute); }
.aa-pill.is-dash{ border-style: dashed; color: var(--aa-mute); font-weight: 450; }
.aa-pills{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* a form field: .aa-fld (below) holds an .aa-label over an .aa-input */
.aa-label{ font-size: 11.01px; font-weight: 600; line-height: 1; color: var(--aa-ink-2); white-space: nowrap; }
.aa-label > em{ font-style: normal; color: var(--aa-or); }
.aa-input{
  display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px;
  border: 1px solid var(--aa-line-2); border-radius: 8px;
  background: #FFFFFF;
  font-size: 13px; line-height: 1; color: var(--aa-ink);
  white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums;
}
.aa-input.is-s{ height: 28px; padding: 0 8px; font-size: 12.41px; }
.aa-input.is-soft{ background: var(--aa-soft); }
.aa-input svg{ width: 14px; height: 14px; flex: none; color: var(--aa-mute); }
.aa-input .aa-sp + svg{ margin-left: auto; }

/* one of a row of choices */
.aa-opt{
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 16px;
  border: 1px solid var(--aa-line-2); border-radius: 999px;
  background: #FFFFFF;
  font-size: 12.41px; font-weight: 500; line-height: 1; color: var(--aa-mute);
  white-space: nowrap;
}
.aa-opt.is-sq{ border-radius: 8px; }
.aa-opt.is-on{ border-color: rgba(24, 24, 24, .55); color: var(--aa-ink); font-weight: 600; }

/* the big segmented choice across the top of a form */
.aa-modes{ display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 16px; background: #EDEDED; }
.aa-modes > span{ display: grid; justify-items: center; gap: 4px; padding: 8px 0; border-radius: 12px; font-size: 12.41px; line-height: 1; color: var(--aa-mute); }
.aa-modes > .is-on{ background: #FFFFFF; color: var(--aa-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(24, 24, 24, .08); }
.aa-modes svg{ width: 16px; height: 16px; }
.aa-modes > .is-on svg{ color: var(--aa-or); }

/* a small switch, off: .aa-switch.is-s */
.aa-switch.is-s{ width: 28px; height: 16px; }
.aa-switch.is-s::after{ content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 999px; background: #FFFFFF; }

/* a section label with its hairline */
.aa-eyebrow{ display: flex; align-items: center; gap: 12px; }
.aa-eyebrow > .aa-ln{ flex: 1 1 auto; height: 1px; background: var(--aa-line); }

/* one line of a two-readings chooser */
.aa-choice{
  display: flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 12px;
  border: 1px solid var(--aa-line); border-radius: 8px;
  font-size: 12.41px; color: var(--aa-ink);
  font-variant-numeric: tabular-nums;
}
.aa-choice svg{ width: 12px; height: 12px; flex: none; }

/* stops on a timeline */
.aa-stops{ position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 16px; }
/* measured: the rule runs through the centre of the 12px stop dots */
.aa-stops::before{ content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: var(--aa-line-2); }
.aa-stop{ position: relative; display: grid; gap: 4px; align-content: start; padding-top: 24px; font-size: 11.01px; line-height: 1.3; color: var(--aa-mute); }
.aa-stop::before{ content: ""; position: absolute; left: 0; top: 0; width: 12px; height: 12px; box-sizing: border-box; border-radius: 999px; border: 2px solid #C5C5C5; background: #FFFFFF; }
.aa-stop.is-on::before{ border-color: var(--aa-or); background: var(--aa-or); }
.aa-stop > b{ font-size: 12.41px; font-weight: 600; color: var(--aa-ink); }

/* a swap whose before-state is taller than its after-state: once it turns
   over, the part folds to the after-state's height (--aa-fold) */
.aa [data-fx="swap"].aa-fold > :first-child{ max-height: 96px; overflow: hidden; transition: opacity .35s ease, transform .5s var(--ac-move, cubic-bezier(.2, .8, .2, 1)), max-height .5s var(--ac-move, cubic-bezier(.2, .8, .2, 1)) .15s; }
.aa [data-fx="swap"].aa-fold.is-in > :first-child{ max-height: var(--aa-fold, 28px); }

/* ── Fund Modeling ── */
/* a value marked by its source */
.aa .aa-src{ position: relative; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aa .aa-src.is-book{ background: #FAF6F1; box-shadow: inset 2px 0 0 #312E2E; color: var(--aa-ink); }
.aa .aa-src.is-prior{ background: #EDEDED; box-shadow: inset 2px 0 0 #C5C5C5; color: #767270; }
.aa .aa-src.is-judge{ background: var(--aa-or-bg); box-shadow: inset 2px 0 0 var(--aa-or); color: var(--aa-ink); }
.aa .aa-src.is-you{ background: #181818; box-shadow: inset 2px 0 0 #181818; color: #FFFFFF; }
.aa .aa-src.is-calc{ background: #FFFFFF; color: #767270; }
.aa .aa-src.is-edit{ background: #FFFFFF; box-shadow: inset 0 0 0 2px var(--aa-or); color: var(--aa-ink); }
/* a table of them: the cell holds the value; no padding of its own */
.aa-tbl td.aa-tc{ padding: 0; }
.aa-tbl td.aa-tc > .aa-src, .aa-tbl td.aa-tc > .aa-stack > .aa-src{ display: block; padding: 8px 12px; }
.aa-tbl.is-tight td.aa-tc > .aa-src, .aa-tbl.is-tight td.aa-tc > .aa-stack > .aa-src{ padding-inline: 8px; }
.aa-tbl th.is-k{ font-size: 9.76px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.aa-n{ margin-left: 4px; font-size: 8.65px; color: #767270; }
.aa-src.is-you .aa-n{ color: #C5C5C5; }

/* the legend */
.aa-key{ display: inline-flex; align-items: center; gap: 8px; font-size: 11.01px; color: var(--aa-mute); white-space: nowrap; }
.aa-key > i{ width: 12px; height: 12px; border-radius: 4px; flex: none; }
.aa-key > i.is-book{ background: #FAF6F1; border: 1px solid #312E2E; }
.aa-key > i.is-prior{ background: #EDEDED; border: 1px solid #C5C5C5; }
.aa-key > i.is-judge{ background: var(--aa-or-bg); border: 1px solid var(--aa-or); }
.aa-key > i.is-you{ background: #181818; border: 1px solid #181818; }

/* parts laid over each other */
.aa .aa-stack{ display: grid; }
.aa .aa-stack > *{ grid-area: 1 / 1; }

/* a ring that lights a part */
.aa-ring{ position: absolute; inset: 0; border-radius: 4px; box-shadow: inset 0 0 0 2px var(--aa-or); pointer-events: none; }
.aa-ring.is-fill{ background: color-mix(in srgb, #FF3C00 6%, transparent); }

/* an input with its unit */
.aa-unit{
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 28px; padding: 0 8px;
  border: 1px solid var(--aa-line-2); border-radius: 8px; background: #FFFFFF;
  font-size: 12.41px; font-variant-numeric: tabular-nums; color: var(--aa-ink);
  transition: box-shadow .35s ease, border-color .35s ease;
}
.aa-unit > small{ font-size: 9.76px; color: var(--aa-mute); }
.aa-unit.is-focus{ border-color: var(--aa-or); box-shadow: 0 0 0 2px var(--aa-or-bg); }
.aa-form{ display: grid; grid-template-columns: 1fr 96px; gap: 8px 16px; align-items: center; font-size: 12.41px; color: var(--aa-ink-2); }

/* a suggested follow-up */
.aa-sug{
  display: inline-flex; align-items: center;
  height: 24px; padding: 0 12px;
  border: 1px solid var(--aa-line-2); border-radius: 999px; background: #FFFFFF;
  font-size: 11.01px; font-weight: 450; line-height: 1; color: var(--aa-ink-2);
  white-space: nowrap;
}
.aa-sugs{ display: flex; flex-wrap: wrap; gap: 8px; }

/* a note set off by a rule on its leading edge */
.aa-prov{ display: grid; gap: 4px; padding: 12px 16px; border-radius: 0 8px 8px 0; background: #FAF6F1; box-shadow: inset 4px 0 0 #312E2E; }
.aa-prov.is-judge{ background: var(--aa-or-bg); box-shadow: inset 4px 0 0 var(--aa-or); }
.aa-prov.is-prior, .aa-prov.is-calc{ background: #EDEDED; box-shadow: inset 4px 0 0 #C5C5C5; }
.aa-prov.is-you{ background: #FAF6F1; box-shadow: inset 4px 0 0 #181818; }
.aa-prov > p{ margin: 0; }

/* the agent's own label */
.aa-ag{ display: inline-flex; align-items: center; gap: 4px; font-size: 9.76px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--aa-or); line-height: 1; }
.aa-ag svg{ width: 12px; height: 12px; flex: none; }

/* a figure in a strip that a ring can light */
.aa-kpis > div{ position: relative; }
/* a ring that sits just outside a part with no padding of its own (a row in a list) */
.aa-ring.is-out{ inset: -4px -8px; }

/* ── Fund Operations ── */
/* a section's eyebrow, with its rule */
.aa-eb{ display: flex; align-items: center; gap: 12px; min-height: 28px; }
.aa-eb > b{ font-size: 9.76px; font-weight: 600; letter-spacing: 0.05em; line-height: 1; text-transform: uppercase; color: var(--aa-mute); white-space: nowrap; }
.aa-eb > i{ flex: 1 1 auto; height: 1px; background: var(--aa-line); }
.aa-eb > em{ font-style: normal; font-size: 11.01px; color: var(--aa-mute); white-space: nowrap; }

/* a form field */
.aa-fld{ display: grid; gap: 8px; align-content: start; min-width: 0; }
.aa-fld > label{ font-size: 11.01px; font-weight: 500; line-height: 1; color: var(--aa-ink-2); }
.aa-fld > label > i{ margin-left: 4px; font-style: normal; color: var(--aa-or); }
.aa-in{
  display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px;
  border: 1px solid var(--aa-line-2); border-radius: 8px; background: var(--aa-soft);
  font-size: 12.41px; color: var(--aa-ink); white-space: nowrap; overflow: hidden;
  font-variant-numeric: tabular-nums;
  transition: border-color .35s ease, box-shadow .35s ease, background-color .35s ease;
}
.aa-in > small{ font-size: 12.41px; color: var(--aa-mute); }
.aa-in > svg{ width: 12px; height: 12px; margin-left: auto; color: var(--aa-mute); flex: none; }
.aa-in.is-focus{ border-color: var(--aa-or); box-shadow: 0 0 0 2px var(--aa-or-bg); background: #FFFFFF; }
.aa-hint{ margin: 0; font-size: 11.01px; line-height: 1.3; color: var(--aa-mute); }

/* a choice of one, as pills */
.aa-choose{ display: flex; flex-wrap: wrap; gap: 8px; }
.aa-choose > span{
  display: inline-flex; align-items: center; justify-content: center;
  height: 28px; padding: 0 12px;
  border: 1px solid var(--aa-line-2); border-radius: 999px; background: #FFFFFF;
  font-size: 11.01px; font-weight: 450; line-height: 1; color: var(--aa-mute); white-space: nowrap;
}
.aa-choose > .is-on{ border-color: rgba(24, 24, 24, .55); color: var(--aa-ink); font-weight: 600; }
.aa-choose.is-grid{ display: grid; grid-template-columns: repeat(3, 1fr); }
.aa-choose.is-grid > span{ border-radius: 8px; background: var(--aa-soft); }

/* what saving will change */
.aa-impact{ display: flex; flex-wrap: wrap; gap: 8px 24px; }
.aa-impact > div{ display: grid; gap: 4px; }
.aa-impact > div > span{ font-size: 9.76px; font-weight: 500; line-height: 1; color: var(--aa-mute); }
.aa-impact > div > b{ font-family: var(--font-display); font-size: 15.79px; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--aa-ink); white-space: nowrap; }
.aa-impact s{ text-decoration: none; color: #C5C5C5; }

/* a chart's metric list */
.aa-ck{ display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 4px; background: var(--c, var(--aa-ink)); color: #FFFFFF; flex: none; }
.aa-ck > svg{ width: 10px; height: 10px; }
.aa-ck.is-off{ background: #FFFFFF; box-shadow: inset 0 0 0 1.5px var(--aa-line-2); }
.aa-mx{ display: grid; gap: 8px; font-size: 11.01px; color: var(--aa-ink-2); }
.aa-mx > div{ display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; align-items: center; }
.aa-mx > div > b{ font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; color: var(--aa-ink); white-space: nowrap; }

/* ── AI Inbox ── */
/* a settings section: its title, then a bordered list of label · value rows */
.aa-sec{ margin: 0 0 8px; font-size: 11.01px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--aa-ink); line-height: 1.3; }
.aa-set{ border: 1px solid var(--aa-line); border-radius: 12px; overflow: hidden; background: #FFFFFF; font-size: 12.41px; }
.aa-set > div{ display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 8px 16px; border-top: 1px solid var(--aa-line); }
.aa-set > div:first-child{ border-top: 0; }
.aa-set .is-val{ display: inline-flex; align-items: center; gap: 8px; color: var(--aa-ink-2); }
.aa-set .is-ic{ display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; color: var(--aa-mute); }
.aa-set .is-ic svg{ width: 14px; height: 14px; }

/* inline code: an address, an id */
.aa-code{ display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 4px; border: 1px solid var(--aa-line-2); background: var(--aa-soft); font-family: var(--mono, var(--font)); font-size: 11.01px; color: var(--aa-ink-2); white-space: nowrap; }

/* a form field: an input or a select, with its label */
.aa-lbl{ display: block; margin: 0 0 4px; font-size: 11.01px; font-weight: 500; color: var(--aa-ink-2); }
.aa-inp{ display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 1px solid var(--aa-line-2); border-radius: 8px; background: #FFFFFF; font-size: 12.41px; color: var(--aa-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.aa-inp.is-sm{ height: 28px; padding: 0 8px; }
.aa-inp.is-ph{ color: var(--aa-mute); }
.aa-inp.is-focus{ border-color: var(--aa-or); box-shadow: 0 0 0 4px var(--aa-or-bg); }
.aa-inp > svg{ width: 12px; height: 12px; flex: none; margin-left: auto; color: var(--aa-mute); }

/* a reading to choose — its value, and what it is (on file · this doc) */
.aa-pick{ display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border: 1px solid var(--aa-line-2); border-radius: 8px; background: var(--aa-soft); font-size: 11.01px; font-weight: 500; color: var(--aa-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.aa-pick .aa-flag{ font-size: 8.65px; }
.aa-pick.is-dash{ border-style: dashed; background: #FFFFFF; color: var(--aa-mute); }
.aa-pick svg{ width: 10px; height: 10px; flex: none; }
/* a field name that opens its place in the document */
.aa-ul{ text-decoration: underline dotted rgba(24, 24, 24, .32); text-underline-offset: 4px; }

/* a document page, in the viewer */
.aa-viewer{ padding: 16px; background: #EDEDED; }
.aa-page{ padding: 24px; border: 1px solid var(--aa-line); border-radius: 4px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(24, 24, 24, .06); font-size: 11.01px; line-height: 1.3; color: var(--aa-ink-2); }
.aa-page p{ margin: 0 0 8px; }
.aa-page .aa-hl{ border-radius: 2px; }

/* a stat tile, and a ring that fills to a share */
.aa-stat{ display: grid; gap: 8px; align-content: start; padding: 16px 20px; border: 1px solid var(--aa-line); border-radius: 12px; background: #FFFFFF; }
.aa-stat .aa-v{ display: flex; align-items: center; gap: 8px; }
.aa-stat .aa-v svg{ width: 20px; height: 20px; flex: none; }
.aa-donut .is-track{ fill: none; stroke: #EDEDED; stroke-width: 8; }
.aa-donut .is-fill{ fill: none; stroke: var(--aa-or); stroke-width: 8; stroke-linecap: round; }

/* a group row inside a table ("Auto-adopted into the record") */
.aa-tbl .is-grp td{ padding: 8px 12px; background: var(--aa-soft); }
/* a cell whose text may wrap */
.aa-tbl td.is-wrap{ white-space: normal; }
.aa-tbl td.is-top{ vertical-align: top; }

/* a swap that is a block, and a swap whose two states stand still and only
   cross-fade (for a list that gains a row, a table that re-sorts) */
.aa [data-fx="swap"].is-block{ display: grid; }
.aa [data-fx="swap"].is-still > *{ transform: none !important; }

/* ── AI & MCP ── */
/* open: the section's row grows from nothing to its content's height */
.aa [data-fx="open"]{ display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .7s var(--ac-move, cubic-bezier(.2, .8, .2, 1)), opacity .45s ease; }
.aa [data-fx="open"] > *{ min-height: 0; overflow: hidden; }
.aa [data-fx="open"].is-in{ grid-template-rows: 1fr; opacity: 1; }

/* a switch */
.aa-switch{ position: relative; display: inline-block; flex: none; width: 40px; height: 24px; border-radius: 999px; background: #C5C5C5; transition: background-color .3s ease; }
.aa-switch > i{ position: absolute; left: 4px; top: 4px; width: 16px; height: 16px; border-radius: 999px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(24, 24, 24, .24); transition: transform .45s var(--ac-move, cubic-bezier(.2, .8, .2, 1)); }
.aa-switch.is-on, .aa [data-fx="toggle"].is-in{ background: var(--aa-or); }
.aa-switch.is-on > i, .aa [data-fx="toggle"].is-in > i{ transform: translateX(16px); }

/* a read-only field */
.aa-ro{ display: flex; align-items: center; flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 12px; border: 1px solid var(--aa-line); border-radius: 8px; background: #EDEDED; font-family: var(--mono, var(--font)); font-size: 12.41px; color: var(--aa-ink); white-space: nowrap; overflow: hidden; }

/* one-digit code boxes */
.aa-otp{ display: flex; gap: 8px; justify-content: center; }
.aa .aa-otp > span{ display: grid; place-items: center; width: 44px; height: 52px; border: 1.5px solid #E2E2E2; border-radius: 8px; background: #FFFFFF; font-family: var(--font-display); font-size: 24px; font-weight: 600; line-height: 1; color: var(--aa-ink); transition: border-color .3s ease; }
.aa-otp > span > b{ font-weight: 600; opacity: 0; transform: translateY(4px); transition: opacity .25s ease, transform .35s var(--ac-move, cubic-bezier(.2, .8, .2, 1)); }
.aa .aa-otp > span.is-in{ border-color: var(--aa-ink); }
.aa .aa-otp > span.is-in > b{ opacity: 1; transform: none; }

/* a ticked item */
.aa-ok{ display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--aa-line); }
.aa-ok > i{ display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 999px; background: #EDEDED; color: var(--aa-ink); }
.aa-ok > i svg{ width: 12px; height: 12px; }

/* a quoted note */
.aa-note{ padding: 8px 12px; border-left: 2px solid var(--aa-or); border-radius: 0 8px 8px 0; background: var(--aa-soft); font-size: 12.41px; color: var(--aa-ink-2); }

/* the app's message toast */
.aa-toast{ display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; font-size: 12.41px; white-space: nowrap; }
.aa-toast svg{ width: 16px; height: 16px; flex: none; color: var(--aa-or); }

/* a fully rounded button */
.aa-btn.is-round{ border-radius: 999px; }

/* ── Highlights ──
   The pages show the moment a feature is about, never the whole screen: the
   figures that matter stay sharp and the rest steps back — a table's lower
   rows dissolve, a document's other clauses are drawn as rules. Nothing here
   hides a fact the words depend on; it keeps a scene from reading as a full
   capture of the app.
     .aa-fade           the card dissolves into the ground below --aa-fade
                        (default 56% of its height); .is-r dissolves to the right
     .aa-dim            a row or part that is context, not the point
     .aa-lines          a document's body as soft rules, so only the lit
                        clause can be read; <i> per line, --w its length */
.aa-fade{
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--aa-fade, 56%), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 var(--aa-fade, 56%), transparent 100%);
}
.aa-fade.is-r{
  -webkit-mask-image: linear-gradient(to right, #000 var(--aa-fade, 64%), transparent 100%);
          mask-image: linear-gradient(to right, #000 var(--aa-fade, 64%), transparent 100%);
}
.aa-dim{ opacity: .4; }
.aa-lines{ display: grid; gap: 8px; margin: 0 0 12px; }
.aa-lines > i{ display: block; width: var(--w, 100%); height: 8px; border-radius: 4px; background: #EDEDED; }