/* ==========================================================================
   dulus.ai — home.css
   The home page's own sections, loaded after dulus.css: the hero and its
   flock, the providers strip, the closing flock call to action, and every
   section in between (each inside its own "@section" block).
   ========================================================================== */

/* ------------------------------------------------------------ rendering -- */
/* The home page is long. Every section below the first screen skips style,
   layout and paint until it comes near the viewport; the placeholder sizes
   are the sections' measured heights, so the scrollbar barely moves when one
   renders, and `auto` keeps the real size afterwards. */

main > section:not(.hero):not(.strip) {
  content-visibility: auto;
  contain-intrinsic-size: auto 1800px;
}
#product { contain-intrinsic-size: auto 1760px; }
#features { contain-intrinsic-size: auto 1270px; }
#models { contain-intrinsic-size: auto 2930px; }
#fuel { contain-intrinsic-size: auto 1880px; }
#memory { contain-intrinsic-size: auto 3740px; }
#everywhere { contain-intrinsic-size: auto 2620px; }
#story { contain-intrinsic-size: auto 1420px; }
#join { contain-intrinsic-size: auto 1050px; }
@media (max-width: 700px) {
  #product { contain-intrinsic-size: auto 1890px; }
  #features { contain-intrinsic-size: auto 2270px; }
  #models { contain-intrinsic-size: auto 4610px; }
  #fuel { contain-intrinsic-size: auto 3170px; }
  #memory { contain-intrinsic-size: auto 6560px; }
  #everywhere { contain-intrinsic-size: auto 5150px; }
  #story { contain-intrinsic-size: auto 1820px; }
  #join { contain-intrinsic-size: auto 800px; }
}

/* ----------------------------------------------------------------- hero -- */
/* The flock canvas covers the whole hero so birds can fly behind the copy;
   the formation itself fills .hero__bird, whose box CSS alone decides. */

.hero {
  position: relative;
  min-height: max(720px, 100svh);
  display: grid;
  align-items: center;
  padding: calc(var(--nav-h) + 56px) 0 96px;
  overflow: clip;
  isolation: isolate;
}
.hero__flock {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(42% 52% at 73% 46%, rgba(245, 152, 42, 0.14), transparent 70%),
    radial-gradient(30% 30% at 76% 40%, rgba(255, 210, 122, 0.08), transparent 70%),
    radial-gradient(70% 60% at 10% 110%, rgba(200, 92, 35, 0.1), transparent 70%);
}
.hero::after {
  /* Hairline horizon at the bottom of the hero. */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2) 30%, var(--line-2) 70%, transparent);
}
.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 3vw, 56px);
  pointer-events: none;
}
.hero__grid > * {
  pointer-events: auto;
}
.hero__copy {
  display: grid;
  justify-items: start;
  gap: 28px;
}
.hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 12px 0 12px;
  border-radius: var(--pill);
  font-size: 0.8125rem;
  color: var(--ink-2);
  background: rgba(245, 152, 42, 0.07);
  box-shadow: 0 0 0 1px rgba(245, 152, 42, 0.25) inset;
  transition: background-color var(--t), box-shadow var(--t);
}
.hero__chip strong {
  color: var(--gold);
  font-weight: 600;
}
.hero__chip .ico {
  width: 15px;
  height: 15px;
  color: var(--gold-ink);
  transition: transform var(--t) var(--ease);
}
.hero__chip:hover {
  background: rgba(245, 152, 42, 0.12);
  box-shadow: 0 0 0 1px rgba(245, 152, 42, 0.45) inset;
}
.hero__chip:hover .ico {
  transform: translateX(3px);
}
.hero h1 {
  font-size: clamp(3.2rem, 1.4rem + 6.2vw, 7.6rem);
}
.hero h1 > span,
.hero h1 > .serif {
  display: block;
  white-space: nowrap;
}
/* The plumage is clipped to the text, and Instrument Serif's descenders
   reach below the tight line: the padding gives the tail of the "y" its
   gradient, the negative margin gives the space back. */
.hero h1 > .serif {
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.hero__lede {
  max-width: 34rem;
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.32rem);
  color: var(--ink-3);
}
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.hero__ctas .cmd {
  height: 56px;
  padding-left: 22px;
}
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hero__facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero__facts li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--orange);
  transform: rotate(45deg);
}
.hero__bird {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 620px;
  aspect-ratio: 260 / 295;
  max-height: min(76vh, 760px);
  pointer-events: none;
}
.hero__bird img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: floaty 7s var(--ease-in-out) infinite;
  transition: opacity 1.4s var(--ease);
}
.hero.is-flocking .hero__bird img {
  opacity: 0;
}
.hero__hint {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -34px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  opacity: 0;
  transition: opacity 1.2s var(--ease) 3.4s;
}
.hero.is-flocking .hero__hint {
  opacity: 1;
}
.hero__scroll {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 22px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  border-radius: 50%;
  color: var(--ink-3);
  box-shadow: 0 0 0 1px var(--line-2) inset;
  transition: color var(--t), box-shadow var(--t);
}
.hero__scroll:hover {
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--line-3) inset;
}
.hero__scroll .ico {
  width: 18px;
  height: 18px;
  animation: floaty 3s var(--ease-in-out) infinite;
}

@media (max-width: 900px) {
  .hero {
    min-height: auto;
    padding-top: calc(var(--nav-h) + 28px);
    align-items: start;
  }
  .hero__grid {
    grid-template-columns: 1fr;
  }
  .hero__bird {
    order: -1;
    width: min(48vw, 230px);
    max-height: 28svh;
    margin: 0 auto -6px;
  }
  .hero__copy {
    gap: 22px;
  }
  .hero__lede {
    font-size: 1.06rem;
  }
  .hero__glow {
    background:
      radial-gradient(60% 34% at 50% 18%, rgba(245, 152, 42, 0.16), transparent 70%),
      radial-gradient(80% 50% at 0% 100%, rgba(200, 92, 35, 0.1), transparent 70%);
  }
  .hero__copy {
    justify-items: start;
  }
  .hero__hint,
  .hero__scroll {
    display: none;
  }
}
@media (max-width: 520px) {
  .hero__ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .hero__ctas .btn,
  .hero__ctas .cmd {
    width: 100%;
    justify-content: center;
  }
  .hero__ctas .cmd {
    justify-content: space-between;
  }
}

/* ---------------------------------------------------------- providers -- */

.strip {
  position: relative;
  padding: 34px 0 30px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 245, 230, 0.015), transparent);
}
.strip__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 36px;
}
.strip__label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  max-width: 15rem;
  line-height: 1.5;
}
.strip__viewport {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.strip__track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: marquee 60s linear infinite;
}
.strip__viewport:hover .strip__track {
  animation-play-state: paused;
}
.strip__track li {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding-right: 18px;
  font-family: var(--display);
  font-size: 1.32rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink-3);
  white-space: nowrap;
  transition: color var(--t);
}
.strip__track li::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--line-3);
  transform: rotate(45deg);
}
.strip__track li:hover {
  color: var(--ink);
}
.strip__track .strip__own {
  color: var(--gold);
}
@media (max-width: 760px) {
  .strip__inner {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .strip__label {
    max-width: none;
  }
  .strip__track li {
    font-size: 1.1rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .strip__track {
    flex-wrap: wrap;
    width: auto;
    row-gap: 8px;
  }
  .strip__track [aria-hidden="true"] {
    display: none;
  }
}

/* ---------------------------------------------------------------- join -- */
/* The closing beat: the flock comes back and spells the name. Without the
   flock (no JS, reduced motion) the word is set in type instead. */

.join {
  position: relative;
  padding: clamp(110px, 12vw, 190px) 0 clamp(90px, 10vw, 150px);
  overflow: clip;
  isolation: isolate;
  text-align: center;
}
.join__flock {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.join__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 38% at 50% 56%, rgba(245, 152, 42, 0.13), transparent 70%),
    radial-gradient(70% 50% at 50% 100%, rgba(200, 92, 35, 0.12), transparent 70%);
}
.join__inner {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 26px;
}
.join h2 {
  max-width: 14ch;
}
.join__word {
  width: min(100%, 980px);
  aspect-ratio: 3.15;
  display: grid;
  place-items: center;
  margin: 6px 0 2px;
}
.join__word span {
  font-family: var(--display);
  font-weight: 700;
  font-size: min(23vw, 300px);
  line-height: 1;
  letter-spacing: -0.06em;
  background: var(--plumage);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: opacity 1.4s var(--ease);
}
.join.is-flocking .join__word span {
  opacity: 0;
}
.join__lede {
  margin-inline: auto;
  max-width: 34rem;
}
.join__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}
.join__ctas .cmd {
  height: 56px;
  padding-left: 22px;
}
@media (max-width: 520px) {
  .join__ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .join__ctas .btn,
  .join__ctas .cmd {
    width: 100%;
    justify-content: center;
  }
  .join__ctas .cmd {
    justify-content: space-between;
  }
}

/* @section theatre */
/* -------------------------------------------------------------- theatre -- */
/* The product theatre: the desktop app recreated in HTML at its real
   proportions (220px sidebar, 13px UI, 12px mono tool pills) and in its own
   palette — black and zinc with amber — framed by the site's plumage.

   theatre.js plays a run by adding .is-armed to its panel and switching the
   lines on one by one (.is-on, .is-done …). Everything below has a finished,
   static state first — that is what no-JS and reduced motion show — and the
   pre-play states only exist under .is-armed. */

.theatre {
  /* The app's palette (gui/dulus_orchestrator), not the site's. */
  --th-panel: #09090b;
  --th-surface: #18181b;
  --th-zinc: #27272a;
  --th-amber: #fbbf24;
  --th-orange: #f97316;
  --th-text: #f8fafc;
  --th-muted: #a1a1aa;
  --th-green: #4ade80;
  --th-red: #f87171;
  --th-line: rgba(255, 255, 255, 0.08);
  --th-line-2: rgba(255, 255, 255, 0.11);
  --th-slate-3: #cbd5e1;
  --th-slate-4: #94a3b8;
  --th-slate-5: #64748b;

  --th-side-w: 220px;
  --th-pane-w: 340px;
  --th-app-h: clamp(560px, calc(100svh - 170px), 704px);
  overflow-x: clip;
}

.theatre__head {
  margin-bottom: clamp(36px, 4.4vw, 60px);
}

.theatre__stage {
  position: relative;
}

/* ------------------------------------------------------- scenario bar -- */

.theatre__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
}
.theatre__tabs {
  position: relative;
  grid-column: 2;
  display: flex;
  gap: 4px;
  max-width: 100%;
  padding: 5px;
  border-radius: var(--pill);
  background: rgba(255, 245, 230, 0.03);
  box-shadow: 0 0 0 1px var(--line-2) inset, 0 16px 40px -24px rgba(0, 0, 0, 0.9);
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.theatre__tabs::-webkit-scrollbar {
  display: none;
}
.theatre__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  height: 40px;
  padding: 0 18px 0 15px;
  border-radius: var(--pill);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-3);
  white-space: nowrap;
  transition: color var(--t-fast), background-color var(--t), box-shadow var(--t);
}
.theatre__tab .ico {
  width: 16px;
  height: 16px;
  color: var(--ink-4);
  transition: color var(--t-fast);
}
.theatre__tab:hover {
  color: var(--ink);
}
.theatre__tab:focus-visible {
  outline-offset: -2px;
  border-radius: var(--pill);
}
.theatre__tab[aria-selected="true"] {
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255, 245, 230, 0.085), rgba(255, 245, 230, 0.045));
  box-shadow: 0 0 0 1px var(--line-2) inset, 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 6px 16px -8px rgba(0, 0, 0, 0.8);
}
.theatre__tab[aria-selected="true"] .ico {
  color: var(--gold-ink);
}
/* How far the run has played, under the tab's label (theatre.js sets --p). */
.theatre__progress {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 245, 230, 0.07);
  opacity: 0;
  overflow: hidden;
  transition: opacity var(--t);
}
.theatre__progress::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--plumage-x);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
}
.theatre__stage.is-live .theatre__tab[aria-selected="true"] .theatre__progress {
  opacity: 1;
}

.theatre__ctls {
  grid-column: 3;
  justify-self: end;
  display: flex;
  gap: 6px;
}
.theatre__ctl {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--ink-3);
  box-shadow: 0 0 0 1px var(--line-2) inset;
  transition: color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast);
}
.theatre__ctl:hover {
  color: var(--ink);
  background: rgba(255, 245, 230, 0.05);
  box-shadow: 0 0 0 1px var(--line-3) inset;
}
.theatre__ctl .ico {
  width: 16px;
  height: 16px;
}
.theatre__ico-play,
.theatre__stage[data-state="paused"] .theatre__ico-pause {
  display: none;
}
.theatre__stage[data-state="paused"] .theatre__ico-play {
  display: block;
}

/* Without a script the runs are simply stacked, each under its own title. */
html:not(.js) .theatre__bar {
  display: none;
}

/* ------------------------------------------------------------- window -- */

.theatre__frame {
  position: relative;
}
.theatre__glow {
  position: absolute;
  z-index: 0;
  left: 2%;
  right: 2%;
  bottom: -110px;
  height: min(560px, 80%);
  pointer-events: none;
  background:
    radial-gradient(48% 46% at 50% 88%, rgba(245, 152, 42, 0.34), transparent 72%),
    radial-gradient(30% 30% at 50% 84%, rgba(255, 210, 122, 0.2), transparent 70%),
    radial-gradient(70% 60% at 50% 70%, rgba(200, 92, 35, 0.12), transparent 70%);
  filter: blur(34px);
}
.theatre__window {
  position: relative;
  z-index: 1;
  border-radius: 14px;
  background: var(--th-panel);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.085),
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 30px 70px -24px rgba(0, 0, 0, 0.95),
    0 70px 160px -70px rgba(245, 152, 42, 0.5);
  overflow: hidden;
  isolation: isolate;
  transform-origin: 50% 100%;
}
/* A warm rim of light on the upper edge. */
.theatre__window::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(250, 211, 139, 0.42), rgba(250, 211, 139, 0.08) 16%, rgba(255, 255, 255, 0.02) 50%, rgba(255, 255, 255, 0.05));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.theatre__sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* App icons: the sprite inside the window, drawn like lucide (the app's set). */
.theatre-ico {
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theatre-ico--accent {
  color: var(--th-amber);
}
.theatre-ico--dim {
  color: #475569;
}

/* The title bar: Windows, because that is where the desktop app ships. */
.theatre-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 36px;
  padding-left: 14px;
  background: linear-gradient(180deg, #141416, #0c0c0e);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--sans);
  user-select: none;
}
.theatre-bar__icon {
  width: 15px;
  height: auto;
  filter: drop-shadow(0 1px 4px rgba(251, 191, 36, 0.35));
}
.theatre-bar__title {
  font-size: 12px;
  font-weight: 500;
  color: var(--th-muted);
}
.theatre-bar__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 20px;
  margin-left: 6px;
  padding: 0 9px 0 8px;
  border-radius: var(--pill);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(252, 211, 77, 0.88);
  background: rgba(251, 191, 36, 0.07);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.22) inset;
}
.theatre-bar__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--th-amber);
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.85);
}
.theatre-bar__caps {
  display: flex;
  align-self: stretch;
  margin-left: auto;
  color: rgba(161, 161, 170, 0.75);
}
.theatre-bar__caps .theatre-ico {
  box-sizing: content-box;
  width: 12px;
  height: 12px;
  padding: 12px 17px;
  stroke-width: 1.5;
}

/* ---------------------------------------------------------------- app -- */

.theatre-app {
  position: relative;
  display: grid;
  grid-template-columns: var(--th-side-w) minmax(0, 1fr);
  background:
    radial-gradient(circle at 15% 50%, rgba(255, 255, 255, 0.02), transparent 25%),
    radial-gradient(circle at 85% 30%, rgba(251, 191, 36, 0.05), transparent 25%),
    #000;
  color: var(--th-text);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  font-feature-settings: normal;
  font-variant-ligatures: none; /* code reads as typed: != stays != */
  text-align: left;
}

/* Sidebar: the app's own labels, in English like the app. */
.theatre-side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: rgba(9, 9, 11, 0.72);
  border-right: 1px solid var(--th-line);
}
.theatre-side__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: none;
  height: 54px;
  padding: 0 16px;
  border-bottom: 1px solid var(--th-line);
}
.theatre-side__mark {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: radial-gradient(circle at 50% 30%, #3a2708, #0b0a07 75%);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.5), 0 0 18px rgba(251, 191, 36, 0.28);
  overflow: hidden;
}
.theatre-side__mark img {
  width: 23px;
  height: auto;
  margin-top: 3px;
}
.theatre-side__name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2em;
  background: linear-gradient(90deg, #fff 10%, var(--th-amber));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.theatre-side__scroll {
  padding: 10px 10px 8px;
}
.theatre-side__nav {
  display: grid;
  gap: 2px;
}
.theatre-side__nav li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  height: 30px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--th-muted);
  white-space: nowrap;
}
.theatre-side__nav .theatre-ico {
  width: 16px;
  height: 16px;
}
.theatre-side__nav .is-active {
  color: var(--th-amber);
  background: rgba(39, 39, 42, 0.5);
  border-color: rgba(251, 191, 36, 0.2);
  box-shadow: 0 0 15px rgba(251, 191, 36, 0.08);
}
.theatre-side__nav .is-active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--th-amber);
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.8);
}
.theatre-side__chats {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.theatre-side__label {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 8px;
  padding: 0 4px 0 6px;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--th-muted);
}
.theatre-side__label > span:first-child {
  flex: 1;
}
.theatre-side__new {
  padding: 2px 7px;
  font-size: 10.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--th-amber);
}
.theatre-side__label .theatre-ico {
  width: 12px;
  height: 12px;
  margin: 0 3px 0 4px;
}
.theatre-side__search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  margin-bottom: 8px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.55);
  font-size: 11px;
  color: #71717a;
}
.theatre-side__search .theatre-ico {
  width: 12px;
  height: 12px;
}
.theatre-side__list {
  display: grid;
  gap: 3px;
}
.theatre-side__chat {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  color: var(--th-slate-4);
  transition: background-color var(--t), border-color var(--t), color var(--t);
}
.theatre-side__chat .theatre-ico {
  width: 14px;
  height: 14px;
  color: #71717a;
}
.theatre-side__chat > span {
  display: grid;
  min-width: 0;
  line-height: 1.35;
}
.theatre-side__chat b {
  overflow: hidden;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.theatre-side__chat small {
  font-size: 9.5px;
  color: #71717a;
}
/* The open chat is the run on screen. */
html.js .theatre__stage:has(#theatre-run-fix:not([hidden])) .theatre-side__chat--fix,
html.js .theatre__stage:has(#theatre-run-mesa:not([hidden])) .theatre-side__chat--mesa,
html.js .theatre__stage:has(#theatre-run-screen:not([hidden])) .theatre-side__chat--screen,
html.js .theatre__stage:has(#theatre-run-feed:not([hidden])) .theatre-side__chat--feed {
  color: #fff;
  background: rgba(251, 191, 36, 0.13);
  border-color: rgba(251, 191, 36, 0.38);
}
html.js .theatre__stage:has(#theatre-run-fix:not([hidden])) .theatre-side__chat--fix .theatre-ico,
html.js .theatre__stage:has(#theatre-run-mesa:not([hidden])) .theatre-side__chat--mesa .theatre-ico,
html.js .theatre__stage:has(#theatre-run-screen:not([hidden])) .theatre-side__chat--screen .theatre-ico,
html.js .theatre__stage:has(#theatre-run-feed:not([hidden])) .theatre-side__chat--feed .theatre-ico {
  color: var(--th-amber);
}
.theatre-side__foot {
  display: grid;
  gap: 6px;
  flex: none;
  padding: 10px;
  border-top: 1px solid var(--th-line);
}
.theatre-side__fuel,
.theatre-side__me {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.035);
}
.theatre-side__fuel > .theatre-ico {
  width: 15px;
  height: 15px;
  color: var(--th-amber);
}
.theatre-side__fuel-body {
  display: grid;
  flex: 1;
  gap: 5px;
}
.theatre-side__fuel-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  line-height: 1.2;
}
.theatre-side__fuel-row span {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--th-muted);
}
.theatre-side__fuel-row b {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
}
.theatre-side__gauge {
  height: 5px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.theatre-side__gauge i {
  display: block;
  width: 62%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--th-amber), #fcd34d);
}
.theatre-side__av {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(251, 191, 36, 0.15);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.25);
  font-size: 12px;
  font-weight: 700;
  color: var(--th-amber);
}
.theatre-side__who {
  display: grid;
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}
.theatre-side__who b {
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.theatre-side__who small {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--th-muted);
}
.theatre-side__out {
  width: 14px;
  height: 14px;
  color: var(--th-muted);
}
.theatre-side__apps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.theatre-side__apps li {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 29px;
  padding: 0 9px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--th-muted);
}
.theatre-side__apps .theatre-ico {
  width: 15px;
  height: 15px;
}

/* --------------------------------------------------------------- runs -- */

.theatre-runs {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.theatre-run {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--th-pane-w);
  min-height: 0;
}
.theatre-run--solo {
  grid-template-columns: minmax(0, 1fr);
}
.theatre-run:focus-visible {
  outline-offset: -2px;
  border-radius: 0;
}
.theatre-run + .theatre-run {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
/* Each run's title labels the stacked transcripts when there is no script;
   with one, the tab says it and the heading stays for screen readers. */
.theatre-run__title {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--th-line);
  background: rgba(24, 24, 27, 0.7);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--th-amber);
}
.theatre-run__title::before {
  content: "//";
  letter-spacing: 0.04em;
  color: var(--th-slate-5);
}
html.js .theatre-run__title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.theatre-main {
  position: relative;
  container: th-main / inline-size;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* Header: workspace breadcrumb, model picker, Checkpoints, Export, panes. */
.theatre-top {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
  height: 46px;
  padding: 0 12px 0 16px;
  border-bottom: 1px solid var(--th-line);
  background: rgba(9, 9, 11, 0.5);
  color: var(--th-slate-3);
  white-space: nowrap;
}
.theatre-top__crumb {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 auto;
  min-width: 0;
}
.theatre-top__crumb > .theatre-ico {
  width: 15px;
  height: 15px;
}
.theatre-top__crumb .theatre-ico--dim {
  width: 14px;
  height: 14px;
}
.theatre-top__path,
.theatre-top__session {
  font-family: var(--mono);
  font-size: 12px;
}
.theatre-top__path {
  flex: none;
}
.theatre-top__session {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.theatre-top__model {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  height: 28px;
  padding: 0 8px 0 10px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.55);
  font-family: var(--mono);
  font-size: 11px;
  color: #e2e8f0;
}
.theatre-top__model .theatre-ico {
  width: 12px;
  height: 12px;
  color: var(--th-slate-5);
}
.theatre-top__acts {
  display: flex;
  gap: 13px;
  flex: none;
}
.theatre-top__acts > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--th-slate-4);
}
.theatre-top__acts .theatre-ico {
  width: 12px;
  height: 12px;
}
.theatre-top__toggles {
  display: flex;
  gap: 6px;
  flex: none;
}
.theatre-top__tg {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.5);
  color: var(--th-slate-4);
}
.theatre-top__tg .theatre-ico {
  width: 14px;
  height: 14px;
}
.theatre-top__tg.is-active {
  color: var(--th-amber);
}
/* A narrow chat column keeps the breadcrumb whole and drops the extras. */
@container th-main (max-width: 800px) {
  .theatre-top__toggles,
  .theatre-top__acts > span:last-child {
    display: none;
  }
}
@container th-main (max-width: 560px) {
  .theatre-top__acts,
  .theatre-top__crumb .theatre-ico--dim,
  .theatre-top__session {
    display: none;
  }
}

/* --------------------------------------------------------------- chat -- */

.theatre-chat {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}
.theatre-chat__track {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 22px 22px;
}
.theatre-run--solo .theatre-chat__track {
  max-width: 820px;
  margin-inline: auto;
  width: 100%;
}
.theatre-msg {
  position: relative;
  min-width: 0;
  font-size: 13.5px;
  line-height: 1.58;
}
.theatre-msg--user {
  align-self: flex-end;
  max-width: min(82%, 520px);
  padding: 10px 14px;
  border-radius: 14px 4px 14px 14px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  background: rgba(39, 39, 42, 0.62);
  color: #fff;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.8);
}
.theatre-msg__cmd {
  font-family: var(--mono);
  font-size: 12.5px;
  color: #fcd34d;
}
.theatre-msg--dulus {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(100%, 612px);
  padding: 12px 15px 14px;
  border-radius: 4px 14px 14px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(24, 24, 27, 0.82);
  color: #d4d4d8;
  box-shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.75);
}
.theatre-msg__head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 16px;
  line-height: 1;
}
.theatre-msg__who {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--th-amber);
}
.theatre-msg__stats {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--th-slate-5);
}
.theatre-msg__cache {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--th-amber);
}
.theatre-msg__cache .theatre-ico {
  width: 11px;
  height: 11px;
}
.theatre-msg__spin {
  display: none;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: rgba(251, 191, 36, 0.7);
}
.theatre-msg__spin .theatre-ico {
  width: 13px;
  height: 13px;
  color: rgba(251, 191, 36, 0.92);
  animation: spin 0.9s linear infinite;
}
.theatre-cue {
  display: none;
}

/* Collapsible thinking, folded to one line. */
.theatre-think {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(168, 85, 247, 0.18);
  background: rgba(168, 85, 247, 0.045);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(233, 213, 255, 0.55);
}
.theatre-think__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  color: rgba(216, 180, 254, 0.82);
}
.theatre-think__label .theatre-ico {
  width: 13px;
  height: 13px;
}
.theatre-think__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.theatre-think__chev {
  width: 12px;
  height: 12px;
  color: rgba(216, 180, 254, 0.45);
}

/* Tool pills: the tool, its arguments, its result. */
.theatre-tool {
  position: relative;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.4);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.4;
  overflow: hidden;
  transition: border-color var(--t), background-color var(--t);
}
.theatre-tool__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 11px;
  white-space: nowrap;
}
.theatre-tool__st {
  display: grid;
  flex: none;
  width: 14px;
  height: 14px;
}
.theatre-tool__st .theatre-ico {
  grid-area: 1 / 1;
  width: 14px;
  height: 14px;
}
.theatre-tool__spin {
  color: var(--th-amber);
  opacity: 0;
}
.theatre-tool__ok {
  color: var(--th-green);
  stroke-width: 2.3;
}
.theatre-tool__wrench {
  width: 12px;
  height: 12px;
  color: var(--th-slate-4);
}
.theatre-tool__name {
  flex: none;
  font-weight: 500;
  color: #e2e8f0;
}
.theatre-tool__args {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--th-slate-4);
}
.theatre-tool__res {
  flex: none;
  margin-left: auto;
  padding-left: 10px;
  color: var(--th-muted);
}
.theatre-tool__res--bad {
  color: var(--th-red);
}
.theatre-tool__res--good {
  color: var(--th-green);
}
.theatre-tool__run {
  display: none;
  flex: none;
  margin-left: auto;
  padding-left: 10px;
  color: rgba(251, 191, 36, 0.85);
}
.theatre-tool__out {
  margin: 0;
  padding: 8px 12px 9px 33px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.32);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.62;
  color: var(--th-muted);
  white-space: pre;
  overflow: hidden;
}
.theatre-diff {
  padding: 6px 0 7px;
}
.theatre-diff > span {
  display: inline-block;
  min-width: 100%;
  padding: 0 12px 0 33px;
}
.theatre-diff__hunk {
  color: var(--th-slate-5);
}
.theatre-diff__add {
  color: #86efac;
  background: rgba(74, 222, 128, 0.085);
}
.theatre-diff__del {
  color: #fca5a5;
  background: rgba(248, 113, 113, 0.085);
}
.theatre-diff__n--add {
  color: var(--th-green);
}
.theatre-diff__n--del {
  color: var(--th-red);
}

/* Permission banner — answered, in the finished state. */
.theatre-perm {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 7px 11px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.3);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--th-muted);
  transition: border-color var(--t), background-color var(--t), color var(--t);
}
.theatre-perm__icon {
  width: 15px;
  height: 15px;
  color: var(--th-amber);
}
.theatre-perm__text {
  flex: 1 1 240px;
  min-width: 0;
}
.theatre-perm__text kbd {
  font-family: inherit;
  font-size: inherit;
  color: #fcd34d;
}
.theatre-perm__btns {
  display: none;
  gap: 6px;
}
.theatre-perm__deny,
.theatre-perm__allow {
  display: inline-grid;
  place-items: center;
  height: 25px;
  padding: 0 11px;
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 11.5px;
}
.theatre-perm__deny {
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--th-slate-3);
}
.theatre-perm__allow {
  background: rgba(245, 158, 11, 0.85);
  font-weight: 600;
  color: #000;
}
.theatre-perm__granted {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  color: var(--th-green);
}
.theatre-perm__granted .theatre-ico {
  width: 12px;
  height: 12px;
  stroke-width: 2.3;
}

/* A system line (a slash command's answer). */
.theatre-sys {
  display: grid;
  gap: 3px;
  padding: 10px 13px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.6);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--th-slate-4);
  overflow-wrap: anywhere;
}
.theatre-sys__ok {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--th-green);
}
.theatre-sys__ok .theatre-ico {
  width: 13px;
  height: 13px;
  stroke-width: 2.3;
}

/* Markdown answer. */
.theatre-md p + p,
.theatre-md p + ul,
.theatre-md ul + p {
  margin-top: 7px;
}
.theatre-md ul {
  display: grid;
  gap: 4px;
}
.theatre-md li {
  position: relative;
  padding-left: 17px;
}
.theatre-md li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.66em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(251, 191, 36, 0.6);
}
.theatre-md strong {
  font-weight: 600;
  color: #fff;
}
.theatre-md code {
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(251, 191, 36, 0.08);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--th-amber);
}
.theatre-link {
  color: var(--th-amber);
  text-decoration: underline;
  text-decoration-color: rgba(251, 191, 36, 0.4);
  text-underline-offset: 2px;
}

/* A steer, inside the reply, where Dulus read it. */
.theatre-note {
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  max-width: min(85%, 420px);
  margin: 2px 0;
}
.theatre-note__label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: #a78b47;
}
.theatre-note__label .theatre-ico {
  width: 11px;
  height: 11px;
}
.theatre-note > p:not(.sr-only) {
  padding: 8px 12px;
  border: 1px dashed rgba(251, 191, 36, 0.3);
  border-radius: 14px 14px 4px 14px;
  background: rgba(39, 39, 42, 0.55);
  font-size: 13px;
  line-height: 1.5;
  color: #f4f4f5;
}

/* Files are snapshotted before Write/Edit. */
.theatre-ckpt {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  height: 26px;
  padding: 0 12px 0 9px;
  border-radius: var(--pill);
  border: 1px solid rgba(251, 191, 36, 0.24);
  background: rgba(251, 191, 36, 0.06);
  font-family: var(--mono);
  font-size: 11px;
  white-space: nowrap;
  color: #fcd34d;
}
.theatre-ckpt .theatre-ico {
  width: 13px;
  height: 13px;
  color: var(--th-amber);
}
.theatre-ckpt__file {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--th-muted);
}

/* The table's own chat: seats answer, and answer each other. */
.theatre-seats {
  display: grid;
  gap: 11px;
  padding: 10px 13px 13px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.32);
}
.theatre-seats__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11.5px;
  line-height: 1.2;
}
.theatre-seats__head .theatre-ico {
  width: 13px;
  height: 13px;
  color: var(--th-amber);
}
.theatre-seats__title {
  font-weight: 600;
  color: #e4e4e7;
}
.theatre-seats__topic {
  min-width: 0;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #8b8b96;
}
.theatre-seats__count {
  flex: none;
  margin-left: auto;
  padding: 2px 8px;
  border-radius: var(--pill);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--th-muted);
}
.theatre-seatmsg {
  display: grid;
  gap: 4px;
}
.theatre-seatmsg__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1;
  color: var(--th-muted);
}
.theatre-seatmsg__av,
.theatre-table__av {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(251, 191, 36, 0.12);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.32) inset;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--th-amber);
}
.theatre-seatmsg p {
  padding-left: 28px;
  font-size: 13px;
  line-height: 1.55;
  color: #d4d4d8;
}

/* ----------------------------------------------------------- composer -- */

.theatre-comp {
  position: relative;
  z-index: 3;
  flex: none;
  padding: 4px 18px 14px;
  background: linear-gradient(to top, #000 60%, transparent);
}
.theatre-comp__box {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
}
.theatre-comp__ctx {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  padding: 0 6px;
}
.theatre-comp__bar {
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.theatre-comp__bar i {
  display: block;
  width: var(--w, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f59e0b, #facc15, #fcd34d);
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.45);
}
.theatre-comp__pct {
  width: 28px;
  font-family: var(--mono);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: rgba(252, 211, 77, 0.7);
}
.theatre-comp__compact {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 16px;
  padding: 0 6px;
  border-radius: 5px;
  border: 1px solid rgba(245, 158, 11, 0.25);
  background: rgba(245, 158, 11, 0.06);
  font-family: var(--mono);
  font-size: 9px;
  color: rgba(252, 211, 77, 0.8);
}
.theatre-comp__compact .theatre-ico {
  width: 9px;
  height: 9px;
}
.theatre-comp__form {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 4px;
  border-radius: 16px;
  border: 1px solid var(--th-line);
  background: rgba(9, 9, 11, 0.78);
  box-shadow: 0 24px 50px -16px rgba(0, 0, 0, 0.75);
}
.theatre-comp__side {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 1px 0 1px 1px;
  color: var(--th-slate-4);
}
.theatre-comp__side .theatre-ico {
  box-sizing: content-box;
  width: 17px;
  height: 17px;
  padding: 7px;
  border-radius: 10px;
}
.theatre-comp__input {
  flex: 1;
  min-width: 0;
  align-self: center;
  padding: 10px 10px 10px 8px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #fff;
}
.theatre-comp__ph {
  color: var(--th-slate-5);
}
.theatre-comp__btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin: 4px;
  border-radius: 12px;
  border: 1px solid #3f3f46;
  background: linear-gradient(135deg, #27272a, #000);
  box-shadow: 0 0 15px rgba(251, 191, 36, 0.15);
  color: #fff;
  opacity: 0.5;
  transition: opacity var(--t-fast), border-color var(--t-fast), color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast);
}
.theatre-comp__btn .theatre-ico {
  grid-area: 1 / 1;
  width: 18px;
  height: 18px;
}
.theatre-comp__stop {
  display: none;
}
.theatre-comp__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1;
  color: var(--th-slate-4);
}
.theatre-comp__drop {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  height: 24px;
  padding: 0 7px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}
.theatre-comp__drop .theatre-ico {
  width: 11px;
  height: 11px;
}
.theatre-comp__drop .theatre-ico:last-child {
  width: 10px;
  height: 10px;
  color: var(--th-slate-5);
}
.theatre-comp__hint {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 10px;
  text-align: right;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--th-slate-5);
}
.theatre-comp__busy {
  display: none;
}

/* Typed text lives in the HTML too; it only shows while it is being typed. */
.theatre-type {
  display: none;
}

/* The steer dock rides the composer's right edge while Dulus works. */
.theatre-steer {
  position: absolute;
  right: 2px;
  bottom: calc(100% + 12px);
  z-index: 4;
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}
.theatre-steer__bubble {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50% 50% 12px 50%;
  border: 1px solid rgba(251, 191, 36, 0.32);
  background: linear-gradient(150deg, #211a0a, #0b0a07 72%);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.72), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  color: var(--th-amber);
}
.theatre-steer__bubble > .theatre-ico {
  width: 19px;
  height: 19px;
}
.theatre-steer__badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid #000;
  border-radius: 9px;
  background: var(--th-amber);
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  color: #000;
}
.theatre-steer__panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 296px;
  padding: 11px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(9, 9, 11, 0.95);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 255, 255, 0.03) inset;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.theatre-steer__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.theatre-steer__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(251, 191, 36, 0.2);
  background: rgba(251, 191, 36, 0.05);
  color: var(--th-amber);
}
.theatre-steer__icon .theatre-ico {
  width: 14px;
  height: 14px;
}
.theatre-steer__title {
  display: grid;
  gap: 2px;
  min-width: 0;
  line-height: 1.25;
}
.theatre-steer__title b {
  font-size: 12.5px;
  font-weight: 600;
  color: #f4f4f5;
}
.theatre-steer__title small {
  font-size: 10px;
  color: #8b8b96;
}
.theatre-steer__x {
  width: 13px;
  height: 13px;
  margin-left: auto;
  color: #8b8b96;
}
.theatre-steer__log {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.theatre-steer__item {
  max-width: 92%;
  padding: 6px 10px 5px;
  border-radius: 12px 12px 4px 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(39, 39, 42, 0.6);
  font-size: 12px;
  line-height: 1.45;
  color: #f4f4f5;
}
.theatre-steer__st {
  display: grid;
  justify-items: end;
  margin-top: 4px;
  font-size: 9.5px;
  line-height: 1.2;
  color: var(--th-muted);
}
.theatre-steer__st > span {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.theatre-steer__st .theatre-ico {
  width: 10px;
  height: 10px;
}
.theatre-steer__queued .theatre-ico {
  animation: spin 0.9s linear infinite;
}
.theatre-steer__sent {
  color: #86efac;
}
.theatre-steer__form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 6px 6px 6px 11px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(0, 0, 0, 0.66);
}
.theatre-steer__input {
  flex: 1;
  min-width: 0;
  padding: 5px 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #fff;
}
.theatre-steer__ph {
  color: #6b6b76;
}
.theatre-steer__send {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--th-zinc);
  color: #5c5c66;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.theatre-steer__send .theatre-ico {
  width: 14px;
  height: 14px;
}

/* -------------------------------------------------------------- panes -- */

.theatre-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-left: 1px solid var(--th-line);
  background: rgba(9, 9, 11, 0.72);
}
.theatre-pane__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  height: 46px;
  padding: 0 12px 0 14px;
  border-bottom: 1px solid var(--th-line);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: #e2e8f0;
}
.theatre-pane__head > .theatre-ico {
  width: 15px;
  height: 15px;
}
.theatre-pane__chip {
  margin-left: 2px;
  padding: 2px 8px;
  border-radius: var(--pill);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  color: var(--th-muted);
}
.theatre-pane__head .theatre-pane__x {
  width: 13px;
  height: 13px;
  margin-left: auto;
  color: var(--th-slate-4);
}

/* Dulus Terminal: the real tmux pane, read-only. */
.theatre-pane--term {
  container-type: inline-size;
}
.theatre-term {
  position: relative;
  flex: 1 1 auto;
  min-height: 300px;
  padding: 10px 12px 12px;
  background: rgba(0, 0, 0, 0.72);
  overflow: hidden;
}
.theatre-term__out {
  font-family: var(--mono);
  font-size: 11px;
  /* 47 columns, like the pane pytest printed into. */
  font-size: min(11px, calc((100cqi - 26px) / 28.4));
  line-height: 1.62;
  color: #e2e8f0;
}
.theatre-term__ln {
  display: block;
  min-height: 1.62em;
  white-space: pre-wrap;
  word-break: break-all; /* a terminal wraps at the column, not at a word */
}
.theatre-term__ln b {
  font-weight: 600;
  color: var(--th-amber);
}
.theatre-term__ln i {
  font-style: normal;
  color: var(--th-slate-5);
}
.theatre-term__ln em {
  font-style: normal;
  color: var(--th-red);
}
.theatre-term__dim {
  color: var(--th-slate-5);
}
.theatre-term__err {
  color: #fca5a5;
}
.theatre-term__pass {
  color: var(--th-green);
}
.theatre-term__cur {
  display: inline-block;
  width: 0.62em;
  height: 1.2em;
  vertical-align: -0.24em;
  background: #e2e8f0;
  animation: blink 1.1s steps(2, start) infinite;
}
.theatre-term__idle {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px 30px;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--th-muted);
}
.theatre-term__idle b {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #e2e8f0;
}
.theatre-term__idle-ico {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  border: 1px solid rgba(251, 191, 36, 0.2);
  background: rgba(251, 191, 36, 0.1);
  color: rgba(251, 191, 36, 0.7);
}
.theatre-term__idle-ico .theatre-ico {
  width: 26px;
  height: 26px;
  stroke-width: 1.6;
}
.theatre-term__status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  height: 28px;
  padding: 0 12px;
  border-top: 1px solid var(--th-line);
  font-size: 10px;
  white-space: nowrap;
  color: var(--th-muted);
}
.theatre-term__dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.7);
}
.theatre-term__state {
  display: grid;
  flex: none;
}
.theatre-term__state > span {
  grid-area: 1 / 1;
}
.theatre-term__cwd {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-family: var(--mono);
  text-align: right;
  text-overflow: ellipsis;
  color: rgba(161, 161, 170, 0.8);
}

/* Round Table: the chair at the head, three seats, who talks to whom. */
.theatre-table {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px 16px 14px;
}
.theatre-table__ring {
  position: relative;
  flex: none;
  width: min(100%, 270px);
  aspect-ratio: 1;
  margin: 2px auto 0;
}
.theatre-table__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.theatre-table__disc {
  fill: rgba(251, 191, 36, 0.035);
  stroke: rgba(251, 191, 36, 0.3);
  stroke-width: 1;
}
.theatre-table__inner {
  fill: none;
  stroke: rgba(255, 255, 255, 0.07);
  stroke-dasharray: 2 5;
}
.theatre-table__ask,
.theatre-table__talk {
  fill: none;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-dasharray: 4 5;
}
.theatre-table__ask {
  stroke: rgba(251, 191, 36, 0.6);
}
.theatre-table__talk {
  stroke: rgba(244, 244, 245, 0.42);
}
.theatre-chair {
  position: absolute;
  left: 50%;
  top: 16.43%;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #3a2708, #0b0a07 75%);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.55), 0 0 24px rgba(251, 191, 36, 0.32);
  transform: translate(-50%, -50%);
}
.theatre-chair img {
  width: 31px;
  height: auto;
  margin-top: 4px;
}
.theatre-seat {
  position: absolute;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(180deg, #232326, #141416);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 8px 20px rgba(0, 0, 0, 0.6);
  transform: translate(-50%, -50%);
  font-size: 12.5px;
  color: #f4f4f5;
}
.theatre-seat b {
  font-weight: 700;
}
.theatre-seat--a {
  left: 20.71%;
  top: 50%;
}
.theatre-seat--b {
  left: 79.29%;
  top: 50%;
}
.theatre-seat--c {
  left: 50%;
  top: 79.29%;
}
.theatre-seat__pulse {
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid rgba(251, 191, 36, 0.7);
}
.theatre-seat__ok {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--th-green);
  box-shadow: 0 0 0 2px var(--th-panel), 0 0 10px rgba(74, 222, 128, 0.6);
}
.theatre-table__center {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  gap: 3px;
  justify-items: center;
  padding: 6px 9px;
  border-radius: 9px;
  background: rgba(11, 10, 8, 0.94);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.12);
  transform: translate(-50%, -50%);
  line-height: 1.1;
  text-align: center;
}
.theatre-table__center b {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: #e4e4e7;
}
.theatre-table__center small {
  font-size: 8.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #71717a;
}
.theatre-table__list {
  display: grid;
  gap: 6px;
  margin-top: 18px;
}
.theatre-table__list li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.025);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.2;
}
.theatre-table__model {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #d4d4d8;
}
.theatre-table__st {
  display: grid;
  justify-items: end;
  flex: none;
}
.theatre-table__st > span {
  grid-area: 1 / 1;
}
.theatre-table__wait {
  color: #71717a;
}
.theatre-table__think {
  color: var(--th-amber);
}
.theatre-table__done {
  color: var(--th-green);
}
.theatre-table__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.theatre-table__count {
  padding: 3px 9px;
  border-radius: var(--pill);
  border: 1px dashed rgba(255, 255, 255, 0.16);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.2;
  color: var(--th-muted);
}
.theatre-table__note {
  margin-top: auto;
  padding-top: 14px;
  font-size: 11.5px;
  line-height: 1.5;
  color: #71717a;
}

/* Your screen, as ScreenGround reads it: OCR boxes with click-ready points. */
.theatre-screen {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 10px;
  min-height: 0;
  padding: 12px;
}
.theatre-screen__desk {
  position: relative;
  flex: 1 1 auto;
  min-height: 420px;
  border-radius: 10px;
  background:
    radial-gradient(90% 70% at 85% 0%, rgba(245, 152, 42, 0.2), transparent 60%),
    radial-gradient(80% 60% at 0% 100%, rgba(200, 92, 35, 0.16), transparent 60%),
    linear-gradient(160deg, #1c140d, #0d0b09);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  overflow: hidden;
  font-family: var(--sans);
}
.theatre-screen__win {
  position: absolute;
  display: flex;
  flex-direction: column;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 18px 40px -10px rgba(0, 0, 0, 0.8);
}
.theatre-screen__win--pdf {
  left: 5%;
  top: 4%;
  width: 64%;
  height: 39%;
  background: #2b2b2f;
}
.theatre-screen__win--form {
  right: 5%;
  top: 41%;
  width: 66%;
  height: 49%;
  background: #121214;
}
.theatre-screen__wbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 20px;
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 8.5px;
  color: var(--th-muted);
  white-space: nowrap;
}
.theatre-screen__wbar i {
  flex: none;
  width: 22px;
  height: 5px;
  border-radius: 3px;
  background:
    radial-gradient(circle at 2.5px 2.5px, #f87171 2.5px, transparent 2.6px),
    radial-gradient(circle at 11px 2.5px, #fbbf24 2.5px, transparent 2.6px),
    radial-gradient(circle at 19.5px 2.5px, #4ade80 2.5px, transparent 2.6px);
  opacity: 0.7;
}
.theatre-screen__viewer {
  display: grid;
  place-items: start center;
  flex: 1;
  padding: 10px 10px 8px;
  background: #3a3a3f;
}
.theatre-screen__paper {
  display: grid;
  gap: 4px;
  width: 100%;
  max-width: 170px;
  padding: 10px 11px 11px;
  border-radius: 2px;
  background: #fafaf9;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  font-size: 8.5px;
  line-height: 1.35;
  color: #3f3f46;
}
.theatre-screen__h {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #18181b;
}
.theatre-screen__sub {
  margin-bottom: 4px;
  color: #71717a;
}
.theatre-screen__row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}
.theatre-screen__rule {
  height: 1px;
  margin: 2px 0;
  background: #d4d4d8;
}
.theatre-screen__total {
  font-size: 9.5px;
  font-weight: 700;
  color: #18181b;
}
.theatre-screen__form {
  display: grid;
  align-content: start;
  gap: 7px;
  flex: 1;
  padding: 10px 12px 12px;
}
.theatre-screen__title {
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 600;
  color: #f4f4f5;
}
.theatre-screen__field {
  display: grid;
  gap: 2px;
}
.theatre-screen__field small {
  font-size: 7.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #71717a;
}
.theatre-screen__field b {
  height: 19px;
  padding: 0 7px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #18181b;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  line-height: 17px;
  color: #e4e4e7;
}
.theatre-screen__submit {
  justify-self: start;
  margin-top: 3px;
  padding: 4px 14px;
  border-radius: 5px;
  background: var(--th-amber);
  font-size: 9.5px;
  font-weight: 700;
  color: #0b0a07;
}
.theatre-screen__toast {
  position: absolute;
  left: 50%;
  bottom: 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 7px;
  border-radius: var(--pill);
  border: 1px solid rgba(74, 222, 128, 0.35);
  background: rgba(20, 83, 45, 0.55);
  font-size: 8.5px;
  font-weight: 600;
  white-space: nowrap;
  color: #bbf7d0;
  transform: translateX(-50%);
}
.theatre-screen__toast .theatre-ico {
  width: 9px;
  height: 9px;
  stroke-width: 2.6;
}
.theatre-ocr {
  position: relative;
}
.theatre-ocr__box {
  position: absolute;
  inset: -3px -4px;
  border-radius: 3px;
  border: 1px solid rgba(251, 191, 36, 0.95);
  background: rgba(251, 191, 36, 0.09);
  pointer-events: none;
}
.theatre-ocr__box::after {
  content: "(" attr(data-xy) ")";
  position: absolute;
  left: -1px;
  bottom: calc(100% + 2px);
  padding: 1.5px 3px;
  border-radius: 2px;
  background: var(--th-amber);
  font-family: var(--mono);
  font-size: 6.5px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: #000;
}
.theatre-screen__ripple {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  border: 2px solid rgba(251, 191, 36, 0.9);
  opacity: 0;
  pointer-events: none;
}
.theatre-screen__cursor {
  position: absolute;
  left: 62%;
  top: 48%;
  z-index: 2;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
}
.theatre-screen__cursor .theatre-ico {
  width: 15px;
  height: 15px;
  fill: #fff;
  stroke: #111;
  stroke-width: 1.3;
}
.theatre-screen__icon {
  position: absolute;
  left: 7%;
  bottom: 40px;
  display: grid;
  justify-items: center;
  gap: 3px;
  font-size: 7.5px;
  color: #e4e4e7;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.theatre-screen__icon i {
  width: 22px;
  height: 17px;
  border-radius: 2px 3px 3px 3px;
  background: linear-gradient(180deg, #fcd34d, #f59e0b);
  box-shadow: 0 -3px 0 -1px #fbbf24 inset, 0 3px 6px rgba(0, 0, 0, 0.4);
}
.theatre-screen__taskbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 24px;
  background: rgba(10, 10, 11, 0.78);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.theatre-screen__taskbar i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.18);
}
.theatre-screen__taskbar i:first-child {
  background: linear-gradient(135deg, #60a5fa, #2563eb);
  opacity: 0.8;
}
.theatre-screen__status {
  flex: none;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--th-muted);
}
.theatre-screen__state {
  display: grid;
}
.theatre-screen__state > span {
  grid-area: 1 / 1;
}
.theatre-screen__state > span:last-child {
  color: var(--th-green);
}

/* --------------------------------------------------- the finished run -- */
/* A line switched off by the end of its run is not part of the finished
   state; while a run plays, every cued line waits for its cue. */

[data-th-on],
[data-th-off] {
  transition: opacity 0.35s var(--ease), visibility 0.35s;
}
[data-th-off]:not(.is-on),
.theatre-run.is-armed [data-th-on]:not(.is-on) {
  visibility: hidden;
  opacity: 0;
}
.theatre-steer__panel:not(.is-on),
.theatre-steer__badge:not(.is-on),
.theatre-term__idle:not(.is-on),
.theatre-run.is-armed .theatre-steer__log:not(.is-on),
.theatre-run.is-armed .theatre-term__ln:not(.is-on) {
  display: none;
}

/* ------------------------------------------------------ the live window -- */
/* With a script and motion, the window keeps the app's real proportions and
   the chat scrolls inside it; otherwise every transcript stands at full
   height, nothing hidden. */

@media (prefers-reduced-motion: no-preference) {
  html.js .theatre-app {
    height: var(--th-app-h);
    overflow: hidden;
  }
  html.js .theatre-side {
    min-height: 0;
  }
  html.js .theatre-side__scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    -webkit-mask: linear-gradient(#000 calc(100% - 26px), transparent);
    mask: linear-gradient(#000 calc(100% - 26px), transparent);
  }
  html.js .theatre-runs {
    min-height: 0;
    overflow: hidden;
  }
  html.js .theatre-run {
    flex: 0 0 100%;
    height: 100%;
    border-top: 0;
  }
  html.js .theatre-chat {
    flex: 1 1 0;
    overflow: hidden auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(161, 161, 170, 0.2) transparent;
    -webkit-mask: linear-gradient(transparent, #000 16px);
    mask: linear-gradient(transparent, #000 16px);
  }
  html.js .theatre-term {
    flex: 1 1 0;
    min-height: 0;
  }
  html.js .theatre-screen__desk {
    min-height: 0;
  }
}

/* -------------------------------------------------------------- playing -- */
/* .is-armed: theatre.js is playing this run from the top. A step that has
   not happened yet is collapsed visually but stays in the accessibility tree,
   so the whole transcript can be read at any moment. */

.theatre-run.is-armed [data-th]:not(.is-on) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
}
.theatre-run.is-armed [data-th].is-on {
  animation: th-in 0.5s var(--ease-out) both;
}
.theatre-run.is-armed .theatre-msg--user.is-on {
  transform-origin: 100% 0;
  animation-name: th-in-user;
}
.theatre-run.is-armed .theatre-note.is-on {
  transform-origin: 100% 100%;
  animation: th-in-steer 0.6s var(--ease-out) 0.38s both; /* lands as the steer panel closes */
}
.theatre-run.is-armed .theatre-md.is-on,
.theatre-run.is-armed .theatre-seatmsg.is-on {
  animation: none;
}

/* The reply works under its spinner until its turn is done. */
.theatre-run.is-armed .theatre-msg--dulus.is-on:not(.is-done) > .theatre-msg__spin {
  display: flex;
}

/* Streamed words, typed characters. */
.theatre-run.is-armed .th-w {
  transition: opacity 0.22s var(--ease);
}
.theatre-run.is-armed .th-w:not(.is-on) {
  opacity: 0;
}
/* Bullets and code chips arrive with their first word, not before. */
.theatre-run.is-armed .theatre-md li:not(:has(.th-w.is-on))::before {
  opacity: 0;
}
.theatre-run.is-armed .theatre-md code:not(:has(.th-w.is-on)) {
  background: transparent;
}
.theatre-run.is-armed .theatre-type.is-on {
  display: inline;
}
.theatre-run.is-armed .th-c:not(.is-on) {
  display: none;
}
.theatre-run.is-armed .th-c.is-caret::after,
.theatre-run.is-armed .theatre-type.is-on:not(:has(.th-c.is-on))::before {
  content: "";
  display: inline-block;
  width: 1.5px;
  height: 1.15em;
  margin-left: 1px;
  vertical-align: -0.2em;
  border-radius: 1px;
  background: var(--th-amber);
  animation: blink 1s steps(2, start) infinite;
}
.theatre-comp__input:has(.theatre-type.is-on) .theatre-comp__ph,
.theatre-steer__input:has(.theatre-type.is-on) .theatre-steer__ph {
  display: none;
}
.theatre-comp__form:has(.theatre-type.is-on .th-c.is-on) .theatre-comp__btn {
  opacity: 1;
  border-color: rgba(251, 191, 36, 0.7);
}
.theatre-steer__form:has(.theatre-type.is-on .th-c.is-on) .theatre-steer__send {
  background: var(--th-amber);
  color: #0b0a07;
}

/* Busy: Stop instead of Send, the steer bubble out. */
.theatre-run.is-busy .theatre-comp__btn {
  opacity: 1;
  border-color: rgba(239, 68, 68, 0.5);
  background: linear-gradient(135deg, #450a0a, #000);
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}
.theatre-run.is-busy .theatre-comp__send,
.theatre-run.is-busy .theatre-comp__idle {
  display: none;
}
.theatre-run.is-busy .theatre-comp__stop {
  display: block;
}
.theatre-run.is-busy .theatre-comp__busy {
  display: inline;
}
.theatre-run.is-busy .theatre-steer {
  display: flex;
  animation: th-fade 0.4s var(--ease-out) both;
}
.theatre-run.is-busy .theatre-steer__bubble {
  animation: th-invite 2.4s ease-out 2;
}
.theatre-steer__panel.is-on {
  transform-origin: 100% 100%;
  animation: th-rise 0.24s var(--ease-out) both;
}
.theatre-steer__badge.is-on {
  animation: th-pop 0.4s var(--spring) both;
}

/* A tool runs: amber border, spinner, "running…" — then its result. */
.theatre-run.is-armed .theatre-tool.is-on:not(.is-done) {
  border-color: rgba(245, 158, 11, 0.32);
  background: rgba(245, 158, 11, 0.05);
}
.theatre-run.is-armed .theatre-tool.is-on:not(.is-done) .theatre-tool__row::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.09), transparent);
  transform: translateX(-100%);
  animation: th-sweep 1.3s var(--ease-in-out) infinite;
}
.theatre-run.is-armed .theatre-tool.is-on:not(.is-done) .theatre-tool__spin {
  opacity: 1;
  animation: spin 0.8s linear infinite;
}
.theatre-run.is-armed .theatre-tool:not(.is-done) .theatre-tool__ok,
.theatre-run.is-armed .theatre-tool:not(.is-done) .theatre-tool__res,
.theatre-run.is-armed .theatre-tool:not(.is-done) .theatre-tool__out {
  display: none;
}
.theatre-run.is-armed .theatre-tool.is-on:not(.is-done) .theatre-tool__run {
  display: inline;
}
.theatre-run.is-armed .theatre-tool.is-done .theatre-tool__ok {
  animation: th-pop 0.45s var(--spring) both;
}
.theatre-run.is-armed .theatre-tool.is-done .theatre-tool__res {
  animation: th-fade 0.35s var(--ease-out) both;
}
.theatre-run.is-armed .theatre-tool.is-done .theatre-tool__out {
  animation: th-drop 0.42s var(--ease-out) both;
}

/* A permission prompt waits for an answer, then folds to its record. */
.theatre-run.is-armed .theatre-perm.is-on:not(.is-done) {
  border-color: rgba(245, 158, 11, 0.42);
  background: rgba(245, 158, 11, 0.1);
  font-size: 12px;
  color: #fef3c7;
}
.theatre-run.is-armed .theatre-perm.is-on:not(.is-done) .theatre-perm__icon {
  width: 18px;
  height: 18px;
}
.theatre-run.is-armed .theatre-perm.is-on:not(.is-done) .theatre-perm__btns {
  display: flex;
}
.theatre-run.is-armed .theatre-perm.is-on:not(.is-done) .theatre-perm__allow {
  animation: th-press 0.3s var(--ease) calc(var(--th-dur, 1600ms) - 420ms) both;
}
.theatre-run.is-armed .theatre-perm:not(.is-done) .theatre-perm__granted {
  display: none;
}
.theatre-run.is-armed .theatre-perm.is-done .theatre-perm__granted {
  animation: th-fade 0.35s var(--ease-out) both;
}

/* Panes keep time with the chat. */
.theatre-run.is-armed .theatre-term__ln.is-on {
  animation: th-fade 0.2s linear both;
}
.theatre-run.is-armed .theatre-term__dot:not(.is-on) {
  visibility: visible;
  opacity: 1;
  background: #52525b;
  box-shadow: none;
}
.theatre-run.is-armed .theatre-term__dot.is-on {
  animation: pulse 2s var(--ease-in-out) infinite;
}
.theatre-run.is-armed .theatre-table__ask.is-on,
.theatre-run.is-armed .theatre-table__talk.is-on {
  animation: th-march 1.1s linear infinite;
}
.theatre-run.is-armed .theatre-seat.is-on {
  animation: th-seat 0.5s var(--spring) both;
}
.theatre-run.is-armed .theatre-seat__pulse.is-on {
  animation: th-ping 1.3s ease-out infinite;
}
.theatre-run.is-armed .theatre-seat__ok.is-on {
  animation: th-pop 0.45s var(--spring) both;
}
.theatre-run.is-armed .theatre-ocr__box.is-on {
  animation: th-box 0.45s var(--ease-out) both;
}
.theatre-run.is-armed .theatre-screen__cursor.is-on {
  animation: th-cursor 0.7s var(--ease-in-out) both;
}
.theatre-run.is-armed .theatre-screen__ripple.is-on {
  animation: th-ripple 0.75s ease-out both;
}
.theatre-run.is-armed .theatre-screen__toast.is-on {
  animation: th-toast 0.45s var(--ease-out) both;
}

/* Pausing freezes the window mid-step, spinners and carets included. */
.theatre__stage[data-state="paused"] .theatre__window * {
  animation-play-state: paused !important;
}

@keyframes th-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@keyframes th-in-user {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
}
@keyframes th-in-steer {
  from {
    opacity: 0;
    transform: translate(18px, 26px) scale(0.92);
  }
}
@keyframes th-fade {
  from {
    opacity: 0;
  }
}
@keyframes th-drop {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
@keyframes th-rise {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
}
@keyframes th-pop {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
}
@keyframes th-press {
  50% {
    transform: scale(0.92);
    filter: brightness(1.2);
  }
}
@keyframes th-sweep {
  to {
    transform: translateX(100%);
  }
}
@keyframes th-invite {
  0% {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.72), 0 0 0 0 rgba(251, 191, 36, 0.4);
  }
  80%,
  100% {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.72), 0 0 0 12px rgba(251, 191, 36, 0);
  }
}
@keyframes th-march {
  to {
    stroke-dashoffset: -18;
  }
}
@keyframes th-seat {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
}
@keyframes th-ping {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.7);
  }
}
@keyframes th-box {
  from {
    opacity: 0;
    transform: scale(1.25);
  }
}
@keyframes th-cursor {
  from {
    opacity: 0;
    transform: translate(-70px, 54px);
  }
  30% {
    opacity: 1;
  }
}
@keyframes th-ripple {
  from {
    opacity: 1;
    transform: scale(0.3);
  }
  to {
    opacity: 0;
    transform: scale(2.2);
  }
}
@keyframes th-toast {
  from {
    opacity: 0;
    transform: translate(-50%, 6px);
  }
}

/* ------------------------------------------------------------- tilt-in -- */
/* The window lies back and comes flat as it scrolls into view. Scroll
   timelines drive it where the browser has them; elsewhere theatre.js feeds
   --th-tilt, and only while the window is still tilted. */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html.js .theatre__frame {
      view-timeline: --th-frame block;
    }
    html.js .theatre__window {
      animation: th-tilt linear both;
      animation-timeline: --th-frame;
      animation-range: entry 0% entry 400px;
    }
    html.js .theatre__glow {
      animation: th-glow linear both;
      animation-timeline: --th-frame;
      animation-range: entry 0% entry 400px;
    }
  }
  @supports not (animation-timeline: view()) {
    html.js .theatre__frame[style*="--th-tilt"] .theatre__window {
      transform: perspective(1600px) rotateX(calc(var(--th-tilt) * 14deg)) scale(calc(1 - var(--th-tilt) * 0.05));
    }
    html.js .theatre__frame[style*="--th-tilt"] .theatre__glow {
      opacity: calc(1 - var(--th-tilt) * 0.7);
    }
  }
}
@keyframes th-tilt {
  from {
    transform: perspective(1600px) rotateX(14deg) scale(0.95);
  }
  to {
    transform: none;
  }
}
@keyframes th-glow {
  from {
    opacity: 0.3;
  }
}

/* -------------------------------------------------------- note & proof -- */

.theatre__note {
  margin-top: 28px;
  font-size: var(--fs-xs);
  text-align: center;
  color: var(--ink-3);
}
.theatre__proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3.2vw, 48px);
  margin-top: clamp(64px, 7vw, 104px);
}
.theatre__point {
  display: grid;
  align-content: start;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.theatre__point .ico-tile {
  margin-bottom: 6px;
}
.theatre__point .ico {
  width: 20px;
  height: 20px;
}
.theatre__point-title {
  font-size: 1.28rem;
  line-height: 1.2;
  letter-spacing: -0.025em;
}
.theatre__point p {
  max-width: 25rem;
  font-size: var(--fs-sm);
  line-height: 1.62;
  color: var(--ink-3);
}
.theatre__point code {
  font-size: 0.86em;
  color: var(--gold);
}

/* --------------------------------------------------------- responsive -- */

@media (max-width: 1180px) {
  .theatre {
    --th-pane-w: 304px;
  }
}
/* The sidebar folds to the app's own icon rail. */
@media (max-width: 1060px) {
  .theatre {
    --th-side-w: 60px;
  }
  .theatre-side__brand {
    justify-content: center;
    padding: 0;
  }
  .theatre-side__name,
  .theatre-side__nav span,
  .theatre-side__chats,
  .theatre-side__fuel-body,
  .theatre-side__who,
  .theatre-side__out,
  .theatre-side__apps span {
    display: none;
  }
  .theatre-side__scroll {
    padding: 10px 8px;
  }
  .theatre-side__nav li,
  .theatre-side__apps li {
    justify-content: center;
    padding: 0;
  }
  .theatre-side__nav .is-active::before {
    left: -9px;
  }
  .theatre-side__foot {
    padding: 8px;
  }
  .theatre-side__fuel,
  .theatre-side__me {
    justify-content: center;
    padding: 7px 0;
  }
  .theatre-side__apps {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 900px) {
  .theatre {
    --th-app-h: 660px;
  }
  .theatre-pane {
    display: none;
  }
  .theatre-run {
    grid-template-columns: minmax(0, 1fr);
  }
  .theatre__proof {
    grid-template-columns: 1fr;
    max-width: 34rem;
    margin-inline: auto;
  }
}
@media (max-width: 760px) {
  .theatre__bar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin-bottom: 18px;
  }
  .theatre__tabs {
    grid-column: 1;
    justify-self: stretch;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 5px;
    -webkit-mask: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
    mask: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
  }
  .theatre__tab {
    scroll-snap-align: start;
    height: 38px;
    padding: 0 15px 0 13px;
    font-size: 0.86rem;
  }
  .theatre__ctls {
    grid-column: 2;
  }
  .theatre__ctl {
    width: 38px;
    height: 38px;
  }
}
/* A phone: the chat alone, still legible. */
@media (max-width: 640px) {
  .theatre {
    --th-app-h: min(620px, 74svh);
  }
  .theatre__window {
    border-radius: 12px;
  }
  .theatre-bar {
    height: 32px;
    padding-left: 12px;
  }
  .theatre-bar__caps .theatre-ico {
    padding: 10px 12px;
  }
  .theatre-app {
    grid-template-columns: minmax(0, 1fr);
  }
  .theatre-side {
    display: none;
  }
  .theatre-top {
    gap: 10px;
    height: 42px;
    padding: 0 10px 0 12px;
  }
  .theatre-top__model {
    height: 26px;
    padding: 0 7px 0 8px;
    font-size: 10px;
  }
  .theatre-chat__track {
    gap: 13px;
    padding: 14px 12px 16px;
  }
  .theatre-msg {
    font-size: 13.5px;
  }
  .theatre-msg--user {
    max-width: 88%;
  }
  .theatre-msg--dulus {
    padding: 11px 12px 12px;
  }
  /* Code keeps its lines on a phone; long ones fade out at the edge. */
  .theatre-tool__out {
    padding-left: 12px;
    font-size: 10.5px;
    -webkit-mask: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
    mask: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
  }
  .theatre-diff > span {
    padding-left: 12px;
  }
  .theatre-msg__cache {
    display: none;
  }
  .theatre-comp {
    padding: 2px 10px 10px;
  }
  .theatre-comp__side .theatre-ico {
    padding: 6px;
  }
  .theatre-comp__input {
    padding: 8px 6px;
    font-size: 13px;
  }
  .theatre-comp__btn {
    width: 40px;
    height: 40px;
  }
  .theatre-comp__drop:nth-child(n + 3),
  .theatre-comp__hint {
    display: none;
  }
  .theatre-comp__drop:first-child span {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .theatre-steer__panel {
    width: min(280px, calc(100vw - 72px));
  }
  .theatre__note span {
    display: block;
  }
}

/* ---------------------------------------------------------- reduced, … -- */

@media (prefers-reduced-motion: reduce) {
  .theatre__ctls {
    display: none;
  }
}
@media (forced-colors: active) {
  .theatre__glow,
  .theatre__window::after {
    display: none;
  }
  .theatre__window {
    border: 1px solid CanvasText;
  }
  .theatre-side__name {
    color: CanvasText;
    background: none;
  }
}
/* @end theatre */

/* @section anatomy */
/* -------------------------------------------------------------- anatomy -- */
/* The feature overview as a field-guide plate: the golden bird, seven parts
   on hairline leaders, labels left and right, and one card per part.

   Geometry is written in the bird image's own pixels (1200 x 1359). The
   stage is that image plus margins for the leader rails (1440 x 1400) and
   its SVG uses the same numbers as its viewBox, so leaders, markers and
   labels meet exactly at any size: pins are placed in % of the image,
   labels in % of the stage height.

   Every state below is finished and static first — that is what no-JS and
   reduced motion show: the plate with all seven parts, every card listed.
   anatomy.js adds .is-live (one part lit, one card shown), .is-armed then
   .is-drawn (the leaders stroke in once), .is-accordion on phones (cards
   fold) and .is-paused while the plate is off screen or the tab hidden;
   a card it switches to gets .is-entering until its entrance has played.

   Wide screens put the card beside the plate, like the facing page of a
   field guide; from 960px it sits below; under 960px the bird keeps only
   its numbered pins and the cards are a list. */

.anatomy {
  --anat-gold: 250, 211, 139;
  --anat-col: 150px; /* room for a column of labels beside the stage */
  overflow: clip;
  isolation: isolate;
}
.anatomy::before {
  /* A warm light behind the specimen. */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(34% 32% at 40% 62%, rgba(245, 152, 42, 0.1), transparent 70%),
    radial-gradient(60% 40% at 50% 100%, rgba(200, 92, 35, 0.05), transparent 70%);
}

.anatomy__head .lede {
  max-width: 36rem;
}

.anatomy__plate {
  margin-top: clamp(44px, 5.5vw, 80px);
}

/* ------------------------------------------------------------ the plate -- */

.anatomy__fig {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 54px var(--anat-col) 46px;
}
.anatomy__fig::after {
  /* Faint drafting dots under the specimen, fading out toward the trim. */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(var(--anat-gold), 0.14) 0.8px, transparent 1.2px);
  background-size: 24px 24px;
  background-position: center;
  -webkit-mask: radial-gradient(60% 58% at 42% 52%, #000 10%, transparent 75%);
  mask: radial-gradient(60% 58% at 42% 52%, #000 10%, transparent 75%);
}
/* Trim marks at the corners, as on a printed plate. */
.anatomy__fig::before {
  --c: rgba(var(--anat-gold), 0.26);
  --l: 22px;
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) left top / 1px var(--l),
    linear-gradient(var(--c), var(--c)) right top / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) right top / 1px var(--l),
    linear-gradient(var(--c), var(--c)) left bottom / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) left bottom / 1px var(--l),
    linear-gradient(var(--c), var(--c)) right bottom / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) right bottom / 1px var(--l);
  background-repeat: no-repeat;
}

.anatomy__mark {
  position: absolute;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ink-4);
}
.anatomy__mark i {
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
}
.anatomy__mark-fig {
  margin-right: 8px;
  color: var(--gold-ink);
}
.anatomy__mark--tl {
  top: 18px;
  left: 22px;
}
.anatomy__mark--tr {
  top: 22px;
  right: 22px;
}
.anatomy__mark--br {
  right: 22px;
  bottom: 19px;
}

.anatomy__stage {
  /* Big enough to be the centrepiece, short enough that the plate and its
     card share a laptop screen. */
  --w: clamp(460px, calc((100svh - 300px) * 1.0286), 740px);
  position: relative;
  width: min(var(--w), 100%);
  aspect-ratio: 1440 / 1400;
  margin-inline: auto;
}
.anatomy__specimen {
  position: absolute;
  left: var(--img-left);
  top: var(--img-top);
  width: var(--img-w);
}
.anatomy__specimen::before {
  /* The bird's own warm light, under the body. */
  content: "";
  position: absolute;
  inset: 18% 4% 6% 10%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(245, 152, 42, 0.2), rgba(200, 92, 35, 0.07) 55%, transparent);
  pointer-events: none;
}
/* The bird glides: a slow sway pivoting on its eye, so the head — eye, beak,
   throat — stays on its markers while the wingtips and tail drift a few
   pixels. Labels, leaders and markers hold still. */
.anatomy__bird {
  width: 100%;
  height: auto;
  transform-origin: 82.33% 56.36%;
  animation: anatomy-glide 11s var(--ease-in-out) infinite;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}

/* Leaders: a dark casing so the hairline still reads over the plumage, then
   the gold line. Widths are image px — about one CSS px at desktop sizes. */
.anatomy__leads {
  /* Over the bird (they must reach their pins), under the pins. */
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.anatomy__lead-case,
.anatomy__lead-line {
  fill: none;
  stroke-linecap: butt;
  stroke-linejoin: round;
}
.anatomy__lead-case {
  stroke: rgba(10, 10, 11, 0.42);
  stroke-width: 5.5;
}
.anatomy__lead-line {
  stroke: rgb(var(--anat-gold));
  stroke-opacity: 0.5;
  stroke-width: 2.2;
  transition: stroke-opacity var(--t) var(--ease), stroke var(--t) var(--ease);
}
.anatomy__lead-end {
  fill: rgb(var(--anat-gold));
  fill-opacity: 0.6;
  transition: fill-opacity var(--t) var(--ease);
}
/* The lit part's light runs along its leader, from the label to the bird. */
.anatomy__lead-glow {
  fill: none;
  stroke: var(--gold-hi);
  stroke-width: 2.4;
  stroke-linecap: butt;
  stroke-linejoin: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: -1;
  opacity: 0;
}

/* Pins: a hairline ring with a bright centre, on a dark halo. */
.anatomy__pins {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.anatomy__pin {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: 15px;
  height: 15px;
  margin: -7.5px 0 0 -7.5px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.25px rgba(var(--anat-gold), 0.95) inset, 0 0 0 3px rgba(10, 10, 11, 0.38);
  transition: box-shadow var(--t) var(--ease), opacity var(--t) var(--ease), transform var(--t) var(--spring),
    background-color var(--t) var(--ease);
}
.anatomy__pin::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--gold-hi);
}
.anatomy__pin::after {
  /* The pulse ring of the lit part. */
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(var(--anat-gold), 0.9);
  opacity: 0;
}
.anatomy__pin > span {
  display: none;
}

/* Labels hang off the stage edges, on the leader rails; a label's first
   line is centred on its leader. */
.anatomy__labels {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.anatomy__label {
  --row: 26px;
  position: absolute;
  top: calc(var(--ly) * 1%);
  margin-top: calc(var(--row) / -2);
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 12px;
  align-items: center;
  padding: 0 4px 4px;
  border-radius: 8px;
  text-align: left;
  pointer-events: auto;
  transition: opacity 420ms var(--ease);
}
.anatomy__label--r {
  left: calc(100% + 8px);
  grid-template-areas: "num part" ". cap";
}
.anatomy__label--l {
  right: calc(100% + 8px);
  grid-template-areas: "part num" "cap .";
  justify-items: end;
  text-align: right;
}
.anatomy__label-num {
  grid-area: num;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: var(--row);
  color: var(--ink-4);
  transition: color var(--t) var(--ease);
}
.anatomy__label-part {
  grid-area: part;
  font-family: var(--display);
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: var(--row);
  white-space: nowrap;
  color: var(--ink);
  transition: color var(--t) var(--ease);
}
.anatomy__label-cap {
  grid-area: cap;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-3);
  transition: color var(--t) var(--ease);
}

/* ---------------------------------------------------------------- cards -- */
/* Without JS (and on phones) every card is listed. */

.anatomy__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: 14px;
  max-width: 1120px;
  margin: clamp(24px, 3vw, 40px) auto 0;
}
.anatomy__card {
  display: grid;
  align-content: start;
  padding: clamp(20px, 2.2vw, 28px);
  scroll-margin-top: calc(var(--nav-h) + 28px);
}
.anatomy__card:focus-visible {
  outline-offset: 4px;
  border-radius: var(--r-lg);
}
.anatomy__card-head {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
}
.anatomy__card-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px 12px;
  font-size: inherit;
  line-height: 1;
}
.anatomy__card-num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--gold);
  background: rgba(245, 152, 42, 0.07);
  box-shadow: 0 0 0 1px rgba(var(--anat-gold), 0.36) inset;
  transition: color var(--t) var(--ease), background-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.anatomy__card-part {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.anatomy__card-cap {
  grid-column: 1 / -1;
  font-size: clamp(1.5rem, 1.15rem + 0.9vw, 2rem);
  letter-spacing: -0.04em;
  line-height: 1.05;
}
.anatomy__card-line {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-3);
}
.anatomy__card-body {
  display: grid;
  grid-template-rows: 1fr;
}
.anatomy__card-list {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 0;
  padding-top: 18px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.anatomy__card-list li {
  position: relative;
  padding-left: 18px;
}
.anatomy__card-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.68em;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--orange);
  opacity: 0.85;
  transform: rotate(45deg);
}
.anatomy__card-list code {
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 0.84em;
  color: var(--gold);
  background: rgba(245, 152, 42, 0.08);
  box-shadow: 0 0 0 1px rgba(245, 152, 42, 0.18) inset;
  white-space: nowrap;
}

/* The open card wears its number in plumage, like its lit pin. */
.anatomy__plate.is-live .anatomy__card.is-active .anatomy__card-num,
.anatomy__plate.is-accordion .anatomy__card.is-open .anatomy__card-num {
  color: #1d1003;
  background: var(--plumage);
  box-shadow: 0 0 0 1px rgba(255, 220, 150, 0.5) inset, 0 6px 18px -6px rgba(245, 152, 42, 0.8);
}

/* ------------------------------------------------- live: one part lit -- */

@media (min-width: 960px) {
  /* The cards share one cell, so the box keeps the tallest card's height and
     nothing below it jumps. A card going out hides at once; the next rises. */
  .anatomy__plate.is-live .anatomy__cards {
    grid-template-columns: minmax(0, 1fr);
    max-width: 1000px;
  }
  .anatomy__plate.is-live .anatomy__card {
    grid-area: 1 / 1;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
    column-gap: clamp(28px, 4vw, 56px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
  }
  .anatomy__plate.is-live .anatomy__card.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 380ms var(--ease), transform 560ms var(--ease-out);
  }
  .anatomy__plate.is-live .anatomy__card-list {
    grid-template-columns: 1fr 1fr;
    gap: 12px 28px;
    padding-top: 2px;
  }

  /* The lit part: a bright leader, a glowing pulsing pin, its label in
     gold. The rest step back a little. */
  .anatomy__plate.is-live .anatomy__lead-line {
    stroke-opacity: 0.3;
  }
  .anatomy__plate.is-live .anatomy__lead-end {
    fill-opacity: 0.35;
  }
  .anatomy__plate.is-live .anatomy__lead.is-active .anatomy__lead-line {
    stroke: var(--gold-1);
    stroke-opacity: 0.55;
  }
  .anatomy__plate.is-live .anatomy__lead.is-active .anatomy__lead-glow {
    stroke-dashoffset: 0;
    opacity: 1;
    transition: stroke-dashoffset 600ms var(--ease-out);
  }
  .anatomy__plate.is-live .anatomy__lead.is-active .anatomy__lead-end {
    fill-opacity: 1;
  }
  .anatomy__plate.is-live .anatomy__pin {
    opacity: 0.6;
    cursor: pointer;
  }
  .anatomy__plate.is-live .anatomy__pin.is-active {
    opacity: 1;
    transform: scale(1.12);
    box-shadow: 0 0 0 1.25px var(--gold-hi) inset, 0 0 0 3px rgba(10, 10, 11, 0.42),
      0 0 22px 6px rgba(245, 152, 42, 0.55), 0 0 6px 1px rgba(255, 210, 122, 0.7);
  }
  .anatomy__plate.is-live .anatomy__pin.is-active::after {
    animation: anatomy-pulse 2.4s var(--ease-out) infinite;
  }
  .anatomy__plate.is-live .anatomy__label-part {
    color: var(--ink-3);
  }
  .anatomy__plate.is-live .anatomy__label-cap {
    color: var(--ink-4);
  }
  .anatomy__plate.is-live .anatomy__label.is-active .anatomy__label-num,
  .anatomy__plate.is-live .anatomy__label.is-active .anatomy__label-cap {
    color: var(--gold-ink);
  }
  .anatomy__plate.is-live .anatomy__label.is-active .anatomy__label-part,
  .anatomy__plate.is-live .anatomy__label:hover .anatomy__label-part {
    color: var(--ink);
  }

  /* Draw-in: each pin pops, its leader strokes out to the label, the label
     lights — part by part, about a second and a half in all. */
  .anatomy__plate.is-armed .anatomy__lead-case,
  .anatomy__plate.is-armed .anatomy__lead-line {
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
  }
  .anatomy__plate.is-armed .anatomy__lead-end {
    opacity: 0;
  }
  .anatomy__plate.is-armed .anatomy__label {
    opacity: 0.35;
  }
  .anatomy__plate.is-armed.is-drawn .anatomy__lead-case,
  .anatomy__plate.is-armed.is-drawn .anatomy__lead-line {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 620ms var(--ease-in-out) calc(var(--i) * 120ms + 140ms),
      stroke-opacity var(--t) var(--ease), stroke var(--t) var(--ease);
  }
  .anatomy__plate.is-armed.is-drawn .anatomy__lead-end {
    opacity: 1;
    transition: opacity 240ms var(--ease) calc(var(--i) * 120ms + 700ms), fill-opacity var(--t) var(--ease);
  }
  .anatomy__plate.is-armed.is-drawn .anatomy__label {
    opacity: 1;
    transition: opacity 420ms var(--ease) calc(var(--i) * 120ms + 600ms);
  }
  /* The first lit part waits for its leader to be drawn. */
  .anatomy__plate.is-armed:not(.is-drawn) .anatomy__lead.is-active .anatomy__lead-glow {
    stroke-dashoffset: -1;
    opacity: 0;
    transition: none;
  }
  .anatomy__plate.is-armed.is-drawn:not(.is-settled) .anatomy__lead.is-active .anatomy__lead-glow {
    transition-delay: calc(var(--i) * 120ms + 760ms);
  }
}

/* Pins pop in one by one (phones too, where they are the whole key). */
.anatomy__plate.is-armed:not(.is-drawn) .anatomy__pin {
  opacity: 0;
}
.anatomy__plate.is-armed.is-drawn .anatomy__pin {
  animation: anatomy-pin-in 560ms var(--spring) calc(var(--i) * 120ms) both;
}

/* Wide screens: the card is the facing page — the key beside the plate.
   It can take its own height here (the plate sets the row), so only the
   lit card is laid out, centred on the plate. */
@media (min-width: 1240px) {
  .anatomy__plate.is-live {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 344px);
    column-gap: clamp(28px, 3vw, 52px);
    align-items: center;
  }
  .anatomy__plate.is-live .anatomy__fig,
  .anatomy__plate.is-live .anatomy__cards {
    max-width: none;
    margin: 0;
  }
  .anatomy__plate.is-live .anatomy__card {
    display: none;
    grid-template-columns: minmax(0, 1fr);
  }
  .anatomy__plate.is-live .anatomy__card.is-active {
    display: grid;
  }
  .anatomy__plate.is-live .anatomy__card.is-entering {
    animation: anatomy-card-in 560ms var(--ease-out) both;
  }
  .anatomy__plate.is-live .anatomy__card-list {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
  }
}

.anatomy__plate.is-paused .anatomy__bird,
.anatomy__plate.is-paused .anatomy__pin::after {
  animation-play-state: paused;
}

/* ---------------------------------------------- phones & small tablets -- */
/* The bird on top with numbered pins, the seven cards below. With JS each
   card folds to its header (anatomy.js adds the toggle, named by the
   card's own heading); the pins of open cards light up. */

@media (max-width: 959px) {
  .anatomy__fig {
    padding: 58px 0 46px;
  }
  .anatomy__stage {
    width: 100%;
    aspect-ratio: auto;
  }
  .anatomy__specimen {
    position: relative;
    left: auto;
    top: auto;
    width: min(100%, 470px, (100svh - 96px) * 0.883); /* whole bird on a landscape phone */
    margin-inline: auto;
  }
  .anatomy__leads,
  .anatomy__labels,
  .anatomy__mark--tr {
    display: none;
  }
  .anatomy__pin {
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    background-color: rgba(12, 11, 10, 0.8);
    box-shadow: 0 0 0 1px rgba(var(--anat-gold), 0.75) inset, 0 4px 14px -4px rgba(0, 0, 0, 0.8);
  }
  .anatomy__pin::before {
    content: none;
  }
  .anatomy__pin > span {
    display: grid;
    place-items: center;
    height: 100%;
    font-family: var(--mono);
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--gold);
    transition: color var(--t) var(--ease);
  }
  .anatomy__plate.is-accordion .anatomy__pin {
    cursor: pointer;
  }
  .anatomy__pin.is-lit {
    background-color: var(--orange);
    background-image: var(--plumage);
    box-shadow: 0 0 0 1px rgba(255, 220, 150, 0.6) inset, 0 0 18px 2px rgba(245, 152, 42, 0.5);
  }
  .anatomy__pin.is-lit > span {
    color: #1d1003;
  }
  .anatomy__mark--tl {
    top: 14px;
    left: 16px;
  }
  .anatomy__mark--br {
    right: 16px;
    bottom: 15px;
  }

  .anatomy__cards {
    grid-template-columns: minmax(0, 1fr);
    max-width: 640px;
    gap: 10px;
  }

  .anatomy__plate.is-accordion .anatomy__card {
    padding: 0;
  }
  .anatomy__plate.is-accordion .anatomy__card-head {
    padding: 18px 60px 18px 18px;
  }
  .anatomy__plate.is-accordion .anatomy__card-body {
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows 420ms var(--ease-out), visibility 0s linear 420ms;
  }
  .anatomy__plate.is-accordion .anatomy__card.is-open .anatomy__card-body {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows 520ms var(--ease-out), visibility 0s;
  }
  .anatomy__plate.is-accordion .anatomy__card-list {
    overflow: hidden;
    padding: 0 18px;
  }
  .anatomy__plate.is-accordion .anatomy__card-list li:first-child {
    margin-top: 2px;
  }
  .anatomy__plate.is-accordion .anatomy__card-list li:last-child {
    margin-bottom: 22px;
  }
  .anatomy__card-toggle {
    position: absolute;
    inset: 0;
    border-radius: var(--r-lg);
    color: var(--ink-3);
    -webkit-tap-highlight-color: transparent;
  }
  .anatomy__card-toggle:focus-visible {
    outline-offset: -3px;
    border-radius: var(--r-lg);
  }
  /* A hairline circle with a plus that folds into a minus. */
  .anatomy__card-toggle::before,
  .anatomy__card-toggle::after {
    content: "";
    position: absolute;
    top: 18px;
    right: 18px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
  }
  .anatomy__card-toggle::before {
    box-shadow: 0 0 0 1px var(--line-3) inset;
    transition: box-shadow var(--t) var(--ease);
  }
  .anatomy__card-toggle::after {
    background:
      linear-gradient(currentColor, currentColor) center / 10px 1.5px no-repeat,
      linear-gradient(currentColor, currentColor) center / 1.5px 10px no-repeat;
    transition: background-size var(--t) var(--ease), color var(--t) var(--ease);
  }
  .anatomy__card-toggle[aria-expanded="true"]::after {
    background-size: 10px 1.5px, 1.5px 0;
  }
  .anatomy__card-toggle:hover::before,
  .anatomy__card-toggle[aria-expanded="true"]::before {
    box-shadow: 0 0 0 1px var(--line-gold) inset;
  }
  .anatomy__card-toggle:hover,
  .anatomy__card-toggle[aria-expanded="true"] {
    color: var(--gold-ink);
  }
}

@media (max-width: 560px) {
  .anatomy__fig {
    padding: 54px 0 42px;
  }
  .anatomy__card {
    border-radius: var(--r);
  }
  .anatomy__card-toggle,
  .anatomy__card-toggle:focus-visible {
    border-radius: var(--r);
  }
  .anatomy__card-cap {
    font-size: 1.42rem;
  }
  .anatomy__card-line {
    font-size: 0.9rem;
  }
  .anatomy__card-list {
    font-size: 0.875rem;
    gap: 9px;
  }
}

/* ------------------------------------------------------------ keyframes -- */

@keyframes anatomy-glide {
  0%,
  100% {
    transform: rotate(-0.7deg);
  }
  50% {
    transform: rotate(0.7deg);
  }
}
@keyframes anatomy-pulse {
  0% {
    opacity: 0.9;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(2.6);
  }
}
@keyframes anatomy-pin-in {
  from {
    opacity: 0;
    scale: 0.2;
  }
}
@keyframes anatomy-card-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* -------------------------------------------------------- accessibility -- */

@media (prefers-reduced-motion: reduce) {
  .anatomy__bird,
  .anatomy__pin,
  .anatomy__pin::after,
  .anatomy__card {
    animation: none !important;
  }
}
@media (forced-colors: active) {
  .anatomy__lead-line {
    stroke: CanvasText;
  }
  .anatomy__lead-case {
    stroke: Canvas;
  }
  .anatomy__lead-glow {
    stroke: Highlight;
  }
  .anatomy__lead-end {
    fill: CanvasText;
  }
  .anatomy__pin {
    border: 1px solid CanvasText;
  }
  .anatomy__fig::before,
  .anatomy__fig::after {
    display: none;
  }
}
/* @end anatomy */

/* @section table */
/* --------------------------------------------------------------- table -- */
/* Any model, and the Mesa Redonda. The stage is a round table seen from
   above, drawn in a 640×500 SVG; the seats and their name plates are HTML
   laid over it at the same percentages, so every label stays crisp and
   translatable. Messages travel as comets along the routes (table.js draws
   them in [data-pulses]).

   Everything has a finished, still state first — the round after it is
   over: every seat answered, the chair lit, every line of the transcript
   shown. That is what no-JS and reduced motion get. table.js adds
   .is-armed to [data-mesa] and walks the seats and lines through
   .is-thinking → .is-speaking → .is-done and .is-on / .is-live; the
   looping light only runs under .is-playing. */

.table {
  overflow: clip;
  isolation: isolate;
}
.table__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(46% 26% at 50% 34%, rgba(245, 152, 42, 0.07), transparent 72%),
    radial-gradient(60% 30% at 50% 100%, rgba(200, 92, 35, 0.05), transparent 70%);
}
.table__head {
  margin-bottom: clamp(48px, 6vw, 88px);
}
.table__head .lede code,
.table__facts code,
.table__card-note code,
.table__dial-note code {
  font-size: 0.86em;
  color: var(--ink-2);
}

/* ---- the round: stage | transcript, facts under both ------------------ */

.table__mesa {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
  grid-template-areas:
    "stage round"
    "facts facts";
  align-items: center;
  gap: clamp(36px, 4vw, 64px) clamp(28px, 3.6vw, 60px);
}

/* The stage. Positions are percentages of the 640×500 drawing; sizes that
   must stay legible are clamped in container units. */
.table__stage {
  grid-area: stage;
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 700px;
  aspect-ratio: 640 / 500;
  container-type: inline-size;
  --disc: clamp(30px, 8.6cqw, 56px);
  --chair: clamp(48px, 13.6cqw, 86px);
}
.table__floor,
.table__rim,
.table__orbit,
.table__svg,
.table__pulses {
  position: absolute;
  pointer-events: none;
}
.table__floor {
  inset: -8% -12%;
  background:
    radial-gradient(34% 40% at 50% 56%, rgba(245, 152, 42, 0.17), transparent 72%),
    radial-gradient(rgba(255, 236, 210, 0.07) 1px, transparent 1.5px) 50% 56% / 18px 18px;
  -webkit-mask: radial-gradient(closest-side, #000 40%, transparent 100%);
  mask: radial-gradient(closest-side, #000 40%, transparent 100%);
}
/* The table's light: a soft glow under the rim (static) … */
.table__rim {
  left: 23.75%;
  top: 22.8%;
  width: 52.5%;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow:
    0 0 36px rgba(245, 152, 42, 0.2),
    0 0 110px rgba(245, 152, 42, 0.12),
    inset 0 0 70px rgba(245, 152, 42, 0.11),
    inset 0 0 18px rgba(255, 210, 122, 0.08);
}
/* … and a light that circles the rim: a conic comet masked to the ring,
   turned on the compositor. The soft copy is its bloom. */
.table__orbit {
  left: 22.8125%;
  top: 21.6%;
  width: 54.375%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0turn 0.68turn, rgba(245, 152, 42, 0.22) 0.88turn, rgba(255, 231, 190, 0.7) 0.985turn, transparent 1turn);
  -webkit-mask: radial-gradient(closest-side, transparent 94.9%, #000 95.7%, #000 97.4%, transparent 98.2%);
  mask: radial-gradient(closest-side, transparent 94.9%, #000 95.7%, #000 97.4%, transparent 98.2%);
  animation: table-orbit 16s linear infinite paused;
}
.table__orbit--soft {
  opacity: 0.5;
  filter: blur(7px);
  -webkit-mask: radial-gradient(closest-side, transparent 89%, #000 94%, #000 98.5%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 89%, #000 94%, #000 98.5%, transparent 100%);
}
.table__svg,
.table__pulses {
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.table__pulses {
  will-change: transform;
  filter: drop-shadow(0 0 4px rgba(255, 190, 100, 0.85));
}
.table__surface {
  fill: url(#table-surface);
}
.table__edge {
  fill: none;
  stroke: url(#table-edge);
  stroke-width: 1.6;
}
.table__hair {
  fill: none;
  stroke: rgba(255, 236, 210, 0.075);
  stroke-width: 1;
}
.table__hair--dash {
  stroke: rgba(255, 236, 210, 0.1);
  stroke-dasharray: 2 7;
}
/* pathLength="360": one unit per degree — a tick every 3°, a major every 30°. */
.table__ticks {
  fill: none;
  stroke: rgba(255, 236, 210, 0.17);
  stroke-width: 5;
  stroke-dasharray: 0.3 2.7;
  stroke-dashoffset: 0.15;
}
.table__ticks--major {
  stroke: rgba(250, 211, 139, 0.45);
  stroke-width: 11;
  stroke-dasharray: 0.42 29.58;
  stroke-dashoffset: 0.21;
}
/* The centre keeps count: one arc facing each seat, lit once it has
   answered; the gap at the top faces the chair. */
.table__seg {
  fill: none;
  stroke: rgba(255, 210, 122, 0.72);
  stroke-width: 2.6;
  transition: stroke 0.6s var(--ease);
}
.table__core {
  fill: var(--gold-1);
  opacity: 0.6;
  transition: opacity 0.8s var(--ease);
}
.table__route {
  fill: none;
  stroke: rgba(250, 211, 139, 0.1);
  stroke-width: 1;
  transition: stroke 0.7s var(--ease), opacity 0.7s var(--ease);
}
.table__route--talk {
  stroke: rgba(250, 211, 139, 0.2);
}
.table__route.is-hot {
  stroke: rgba(255, 210, 122, 0.5);
  transition-duration: 0.25s;
}

/* Comets: five dashes of one path, longest and faintest at the back,
   ending in a bright head with its own glow. */
.table__comet path {
  fill: none;
  stroke-linecap: round;
}
.table__comet-trail {
  stroke: rgba(245, 152, 42, 0.16);
  stroke-width: 8;
}
.table__comet-tail {
  stroke: rgba(245, 152, 42, 0.55);
  stroke-width: 1.8;
}
.table__comet-mid {
  stroke: rgba(255, 214, 140, 0.88);
  stroke-width: 2.6;
}
.table__comet-core {
  stroke: #fffaf0;
  stroke-width: 3.2;
}
.table__comet-glow {
  stroke: rgba(255, 205, 120, 0.36);
  stroke-width: 10;
}

/* Seats: a zero-size anchor at the seat's centre; the disc is centred on
   it and the plate sits outside the ring, on the seat's side. */
.table__seat {
  position: absolute;
  z-index: 2;
  left: var(--x);
  top: var(--y);
  width: 0;
  height: 0;
}
/* The back of each chair: a soft crescent outside the disc, facing away
   from the table (--a turns it to the seat's side). */
.table__seat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--disc) + clamp(12px, 3.2cqw, 20px));
  height: calc(var(--disc) + clamp(12px, 3.2cqw, 20px));
  border-radius: 50%;
  border: clamp(2px, 0.5cqw, 3px) solid transparent;
  border-top-color: rgba(255, 236, 210, 0.13);
  transform: translate(-50%, -50%) rotate(var(--a, 0deg));
  pointer-events: none;
  transition: border-color 0.5s var(--ease);
}
.table__seat--chair::before {
  width: calc(var(--chair) + clamp(14px, 3.6cqw, 22px));
  height: calc(var(--chair) + clamp(14px, 3.6cqw, 22px));
  border-top-color: rgba(250, 211, 139, 0.3);
}
.table__seat.is-speaking::before {
  border-top-color: rgba(255, 210, 122, 0.45);
}
.table__disc,
.table__halo {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--disc);
  height: var(--disc);
  margin: calc(var(--disc) / -2) 0 0 calc(var(--disc) / -2);
  border-radius: 50%;
}
.table__disc {
  display: grid;
  place-items: center;
  font: 500 clamp(11px, 2.15cqw, 14px) / 1 var(--mono);
  color: var(--ink-2);
  background:
    radial-gradient(90% 90% at 32% 22%, rgba(255, 245, 230, 0.17), rgba(255, 245, 230, 0.035) 46%, transparent 70%),
    radial-gradient(closest-side, #1a181b, #0d0c0e);
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 210, 0.17),
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 -12px 20px -12px rgba(245, 152, 42, 0.22),
    0 0 0 4px rgba(10, 10, 11, 0.62),
    0 14px 30px -10px rgba(0, 0, 0, 0.95);
  transition: color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
/* Answered: a small gold light on the disc's shoulder. */
.table__disc::after {
  content: "";
  position: absolute;
  top: 3%;
  right: 3%;
  width: clamp(6px, 1.35cqw, 9px);
  height: clamp(6px, 1.35cqw, 9px);
  border-radius: 50%;
  background: var(--gold-1);
  box-shadow: 0 0 0 2px #0d0c0e, 0 0 10px rgba(245, 152, 42, 0.95);
  transition: transform 0.55s var(--spring), opacity 0.3s var(--ease);
}
/* Thinking: an arc that circles the disc. */
.table__disc::before {
  content: "";
  position: absolute;
  inset: calc(clamp(3px, 0.8cqw, 5px) * -1);
  border-radius: 50%;
  border: 1.5px solid transparent;
  border-top-color: rgba(255, 210, 122, 0.8);
  border-right-color: rgba(255, 210, 122, 0.16);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  animation: spin 1.15s linear infinite paused;
}
.table__seat.is-thinking .table__disc::before {
  opacity: 1;
}
.table__mesa.is-playing .table__seat.is-thinking .table__disc::before {
  animation-play-state: running;
}
.table__halo {
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 0 1px rgba(255, 210, 122, 0.7), 0 0 26px rgba(245, 152, 42, 0.55);
}
.table__seat.is-speaking .table__disc {
  color: var(--gold-hi);
  box-shadow:
    inset 0 0 0 1px rgba(255, 210, 122, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -14px 22px -10px rgba(245, 152, 42, 0.6),
    0 0 0 4px rgba(10, 10, 11, 0.62),
    0 0 38px rgba(245, 152, 42, 0.6);
}
.table__seat.is-speaking .table__halo {
  animation: table-breathe 1.8s var(--ease-in-out) infinite;
}

/* The chair: larger, gold-rimmed, the bird inside. Lit by default. */
.table__disc--chair,
.table__seat--chair .table__halo {
  width: var(--chair);
  height: var(--chair);
  margin: calc(var(--chair) / -2) 0 0 calc(var(--chair) / -2);
}
.table__disc--chair {
  background:
    radial-gradient(80% 80% at 34% 22%, rgba(255, 231, 190, 0.22), rgba(245, 152, 42, 0.07) 52%, transparent 74%),
    radial-gradient(closest-side, #1f1912, #0f0d0b);
  box-shadow:
    inset 0 0 0 1px rgba(250, 211, 139, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -16px 26px -14px rgba(245, 152, 42, 0.55),
    0 0 0 5px rgba(10, 10, 11, 0.62),
    0 0 46px rgba(245, 152, 42, 0.42),
    0 18px 36px -12px rgba(0, 0, 0, 0.95);
}
.table__disc--chair::after,
.table__disc--chair::before {
  content: none;
}
.table__disc--chair img {
  width: 62%;
  height: auto;
  transform: translate(3%, 1%);
  filter: drop-shadow(0 3px 10px rgba(245, 152, 42, 0.45));
}

/* Name plates. */
.table__plate {
  position: absolute;
  top: 0;
  display: grid;
  gap: 3px;
  white-space: nowrap;
  transform: translateY(-50%);
}
.table__seat--r .table__plate {
  left: calc(var(--disc) / 2 + clamp(6px, 1.7cqw, 12px));
  text-align: left;
}
.table__seat--l .table__plate {
  right: calc(var(--disc) / 2 + clamp(6px, 1.7cqw, 12px));
  text-align: right;
}
.table__seat--low .table__plate {
  transform: translateY(-22%);
}
.table__plate--t {
  top: auto;
  bottom: calc(var(--chair) / 2 + clamp(6px, 1.6cqw, 12px));
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
.table__plate b {
  font: 600 clamp(11px, 2.2cqw, 14.5px) / 1.15 var(--sans);
  letter-spacing: -0.01em;
  color: var(--ink-2);
  transition: color 0.4s var(--ease);
}
.table__plate .table__id {
  font: 500 clamp(10px, 1.95cqw, 13px) / 1.15 var(--mono);
  letter-spacing: 0;
}
.table__plate small {
  font: 500 clamp(9px, 1.62cqw, 11px) / 1.2 var(--mono);
  letter-spacing: 0.04em;
  color: var(--ink-3);
  transition: color 0.4s var(--ease);
}
.table__plate--t b {
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink);
}
.table__plate--t small {
  color: var(--gold-ink);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.table__seat.is-speaking .table__plate b {
  color: var(--ink);
}
.table__seat.is-speaking .table__plate small {
  color: var(--gold-ink);
}

/* ---- the transcript --------------------------------------------------- */

.table__round {
  grid-area: round;
  position: relative;
  padding: clamp(20px, 2.2vw, 28px) clamp(16px, 1.8vw, 24px) clamp(14px, 1.6vw, 20px);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 245, 230, 0.04), rgba(255, 245, 230, 0.012)), rgba(14, 13, 12, 0.78);
  box-shadow: 0 0 0 1px var(--line) inset, var(--shadow-2);
}
.table__round-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 0 4px 14px;
  border-bottom: 1px solid var(--line);
}
.table__round-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 500 0.7rem / 1.2 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.table__live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 3px rgba(245, 152, 42, 0.16), 0 0 12px rgba(245, 152, 42, 0.8);
  flex: none;
}
.table__round-meta {
  font: 500 0.7rem / 1.2 var(--mono);
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.table__q-label {
  margin: 18px 4px 0;
  font: 500 0.66rem / 1.2 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.table__q {
  margin: 8px 4px 0;
  font-size: clamp(1.18rem, 1rem + 0.55vw, 1.48rem);
  line-height: 1.16;
  letter-spacing: -0.025em;
}
.table__lines {
  display: grid;
  gap: 2px;
  margin-top: 14px;
}
.table__line {
  position: relative;
  display: grid;
  grid-template-columns: 24px auto auto minmax(0, 1fr);
  grid-template-areas:
    "tag name via dots"
    "tag say say say";
  align-items: baseline;
  column-gap: 9px;
  row-gap: 3px;
  padding: 9px 10px 10px;
  border-radius: 12px;
  transition: background-color 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.table__who {
  display: contents;
}
.table__tag {
  grid-area: tag;
  align-self: start;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font: 500 0.7rem / 1 var(--mono);
  color: var(--ink-2);
  background: radial-gradient(90% 90% at 32% 22%, rgba(255, 245, 230, 0.14), rgba(255, 245, 230, 0.03) 50%, transparent 72%), #121113;
  box-shadow: inset 0 0 0 1px rgba(255, 236, 210, 0.16);
  transition: color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.table__tag--chair {
  box-shadow: inset 0 0 0 1px rgba(250, 211, 139, 0.55), 0 0 16px rgba(245, 152, 42, 0.35);
}
.table__tag--chair img {
  width: 15px;
  height: auto;
}
.table__name {
  grid-area: name;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.table__name.table__id {
  font: 500 0.8rem / 1.2 var(--mono);
  letter-spacing: 0;
}
.table__via {
  grid-area: via;
  font: 500 0.68rem / 1.2 var(--mono);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.table__say {
  grid-area: say;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-2);
  transition: color 0.6s var(--ease), opacity 0.7s var(--ease);
}
.table__say code {
  font-size: 0.84em;
  padding: 1px 5px;
  border-radius: 5px;
  color: var(--gold);
  background: rgba(245, 152, 42, 0.08);
}
.table__line--chair {
  grid-template-areas: "tag say say say";
  margin-top: 6px;
  padding: 12px 12px 13px 10px;
  background: linear-gradient(180deg, rgba(245, 152, 42, 0.085), rgba(245, 152, 42, 0.035));
  box-shadow: inset 0 0 0 1px rgba(245, 152, 42, 0.24);
}
.table__line--chair .table__say {
  color: var(--ink);
}
.table__line--chair strong {
  color: var(--gold-ink);
  font-weight: 600;
}

/* Typing: three dots after the seat's name while its words come in. */
.table__line::after {
  content: "";
  grid-area: dots;
  justify-self: start;
  align-self: center;
  width: 24px;
  height: 8px;
  margin-left: 2px;
  background: radial-gradient(circle, var(--gold-ink) 2px, transparent 2.6px) 0 50% / 8px 8px repeat-x;
  opacity: 0;
  pointer-events: none;
}
.table__line--chair::after {
  content: none;
}
.table__line.is-typing::after {
  opacity: 1;
  animation: table-dots 0.9s var(--ease-in-out) infinite;
}
.table__line.is-live {
  background: rgba(245, 152, 42, 0.065);
  box-shadow: inset 0 0 0 1px rgba(245, 152, 42, 0.2);
}
.table__line.is-live .table__tag {
  color: var(--gold-hi);
  box-shadow: inset 0 0 0 1px rgba(255, 210, 122, 0.8), 0 0 16px rgba(245, 152, 42, 0.5);
}
.table__line--chair.is-live {
  background: linear-gradient(180deg, rgba(245, 152, 42, 0.13), rgba(245, 152, 42, 0.05));
  box-shadow: inset 0 0 0 1px rgba(255, 210, 122, 0.4), 0 18px 40px -22px rgba(245, 152, 42, 0.6);
}

/* ---- facts ------------------------------------------------------------ */

.table__facts {
  grid-area: facts;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px clamp(20px, 2.6vw, 40px);
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.table__facts li {
  display: grid;
  align-content: start;
  gap: 8px;
}
.table__facts b {
  font: 500 0.72rem / 1.3 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.table__facts span {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-3);
}

/* ---- the model lists -------------------------------------------------- */

.table__intro {
  max-width: 36rem;
  margin: clamp(88px, 10vw, 150px) auto clamp(26px, 3vw, 40px);
  text-align: center;
  font-family: var(--display);
  font-size: var(--fs-4);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink-2);
  text-wrap: balance;
}
.table__lists {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.table__card-in {
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
  padding: clamp(22px, 2.4vw, 30px);
}
.table__card-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.table__card-head .ico-tile {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}
.table__card-head .ico {
  width: 20px;
  height: 20px;
}
.table__card-text {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-3);
}
.table__card-note {
  margin-top: auto;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--ink-3);
}

.table__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 7px;
}
.table__chips li {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 13px;
  border-radius: var(--pill);
  font-family: var(--display);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  background: rgba(255, 245, 230, 0.035);
  box-shadow: inset 0 0 0 1px var(--line-2);
  white-space: nowrap;
  transition: color var(--t-fast), box-shadow var(--t-fast);
}
.table__chips li:hover {
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-3);
}

.table__rows li,
.table__rates li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.table__rows li {
  min-height: 54px;
}
.table__rows li:first-child,
.table__rates li:first-child {
  border-top: 1px solid var(--line);
}
.table__rows li {
  justify-content: space-between;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.table__rows code {
  font-size: 0.74rem;
  color: var(--ink-3);
  white-space: nowrap;
}
.table__term {
  margin-top: auto;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--sunk);
  box-shadow: inset 0 0 0 1px var(--line);
  font: 0.75rem / 1.65 var(--mono);
  overflow-wrap: anywhere;
}
.table__term-in {
  color: var(--ink);
}
.table__term-in::before {
  content: "› ";
  color: var(--gold-ink);
}
.table__term-out {
  color: var(--live);
}

.table__rates code {
  font-size: 0.78rem;
  color: var(--ink);
  white-space: nowrap;
}
.table__rate-note {
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.table__rate {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.table__rate b {
  min-width: 2.1em;
  font: 600 0.78rem / 1 var(--mono);
  text-align: right;
  color: var(--gold-ink);
}
.table__bars {
  width: 44px;
  height: 6px;
  background:
    linear-gradient(90deg, var(--gold-1), var(--orange-2)) 0 0 / calc(var(--r) * 25%) 100% no-repeat,
    rgba(255, 236, 210, 0.12);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(25% - 2px), transparent calc(25% - 2px) 25%);
  mask: repeating-linear-gradient(90deg, #000 0 calc(25% - 2px), transparent calc(25% - 2px) 25%);
}
.table__free .table__rate b {
  color: var(--live);
}
.table__free-ids {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  min-width: 0;
}
.table__free-ids code {
  font-size: 0.72rem;
  color: var(--ink-2);
}
.table__more {
  align-self: flex-start;
  margin-top: auto;
  font-size: var(--fs-sm);
}
.table__fine {
  display: grid;
  gap: 4px;
  max-width: 50rem;
  margin: 22px auto 0;
  text-align: center;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--ink-3);
}
.table__fine b {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--live);
}

/* ---- the reasoning dial ----------------------------------------------- */

.table__dial {
  margin-top: clamp(28px, 3vw, 40px);
}
.table__dial-in {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(28px, 4.4vw, 72px);
  padding: clamp(24px, 3.2vw, 44px);
}
.table__kicker code {
  display: inline-block;
  padding: 6px 11px;
  border-radius: var(--pill);
  font-size: 0.78rem;
  color: var(--gold);
  background: rgba(245, 152, 42, 0.08);
  box-shadow: inset 0 0 0 1px rgba(245, 152, 42, 0.28);
}
.table__dial-copy .h3 {
  margin-top: 18px;
}
.table__dial-text {
  margin-top: 14px;
  max-width: 30rem;
  color: var(--ink-3);
}
.table__dial-note {
  margin-top: 14px;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

.table__levels {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 5px;
  border-radius: 18px;
  background: var(--sunk);
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 2px 10px rgba(0, 0, 0, 0.55);
}
.table__thumb {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: calc((100% - 10px) / 5);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(250, 211, 139, 0.17), rgba(245, 152, 42, 0.06));
  box-shadow: inset 0 0 0 1px rgba(250, 211, 139, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 26px -10px rgba(245, 152, 42, 0.7);
  transform: translateX(calc(var(--lvl, 3) * 100%));
  transition: transform 0.55s var(--spring);
}
.table__lvl {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 12px 2px 11px;
  border-radius: 13px;
  color: var(--ink-3);
  transition: color var(--t-fast);
}
.table__lvl:hover {
  color: var(--ink);
}
.table__lvl[aria-checked="true"] {
  color: var(--gold-hi);
}
.table__glyph {
  display: grid;
  place-items: center;
  height: 24px;
  font: 400 1.3rem / 1 var(--mono);
}
.table__glyph--dot {
  font-size: 2.3rem;
}
.table__glyph--off::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.table__glyph--bird img {
  width: 22px;
  height: auto;
  opacity: 0.62;
  filter: saturate(0.55);
  transition: opacity var(--t-fast), filter var(--t-fast);
}
.table__lvl:hover .table__glyph--bird img,
.table__lvl[aria-checked="true"] .table__glyph--bird img {
  opacity: 1;
  filter: drop-shadow(0 2px 8px rgba(245, 152, 42, 0.55));
}
.table__lvl-n {
  font: 600 0.86rem / 1 var(--mono);
}
.table__lvl-l {
  font: 500 0.6rem / 1 var(--mono);
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.table__lvl[aria-checked="true"] .table__lvl-l {
  color: var(--gold-ink);
}
/* The control needs the script; without it the five captions read as a ladder. */
.table__dial:not(.is-live) .table__levels {
  display: none;
}
.table__dial:not(.is-live) .table__dial-in {
  align-items: start;
}

.table__caps {
  display: grid;
  margin-top: 20px;
}
.table__dial:not(.is-live) .table__cap + .table__cap {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.table__dial.is-live .table__cap {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0s linear 0.35s;
}
.table__dial.is-live .table__cap.is-on {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0s;
}
.table__readout {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 500 0.74rem / 1 var(--mono);
  white-space: nowrap;
  color: var(--ink-2);
}
.table__readout-k {
  font-weight: 600;
  color: var(--ink);
}
.table__track {
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 236, 210, 0.16);
}
.table__track-on {
  background: var(--plumage-x);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.table__readout-p {
  color: var(--gold-ink);
}
.table__cap-text {
  margin-top: 14px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-3);
}
.table__cap-text strong {
  font-weight: 600;
}
.table__wire-label {
  margin-top: 16px;
  font: 500 0.64rem / 1.2 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.table__wire {
  display: grid;
  margin-top: 8px;
  padding: 6px 14px;
  border-radius: var(--r-sm);
  background: var(--sunk);
  box-shadow: inset 0 0 0 1px var(--line);
}
.table__wire li {
  display: grid;
  grid-template-columns: 5.6rem auto minmax(0, 1fr);
  align-items: center;
  gap: 6px 12px;
  padding: 7px 0;
}
.table__wire li + li {
  border-top: 1px solid var(--line);
}
.table__fam {
  font: 500 0.66rem / 1.2 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.table__val,
.table__val code {
  font: 500 0.78rem / 1.35 var(--mono);
  color: var(--gold);
}
.table__val span {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--ink-3);
}
.table__clamp {
  justify-self: start;
  padding: 3px 8px;
  border-radius: var(--pill);
  font: 500 0.6rem / 1.2 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.table__dial-foot {
  margin-top: 14px;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

/* ---- the round, playing ----------------------------------------------- */

.table__mesa.is-playing .table__orbit {
  animation-play-state: running;
}
.table__mesa.is-playing .table__live {
  animation: pulse 2.4s var(--ease-in-out) infinite;
}
.table__mesa:not(.is-playing) .table__seat *,
.table__mesa:not(.is-playing) .table__line::after {
  animation-play-state: paused;
}
.table__mesa.is-armed .table__route {
  opacity: 0;
}
.table__mesa.is-armed .table__route.is-hot,
.table__mesa.is-armed .table__route.is-used {
  opacity: 1;
}
.table__mesa.is-armed .table__seg:not(.is-done) {
  stroke: rgba(255, 236, 210, 0.1);
}
.table__mesa.is-armed:not(.is-woken) .table__core {
  opacity: 0.22;
}
.table__mesa.is-armed .table__seat:not(.is-done) .table__disc::after {
  opacity: 0;
  transform: scale(0);
}
.table__mesa.is-armed .table__seat--chair:not(.is-lit):not(.is-speaking) .table__disc--chair {
  box-shadow:
    inset 0 0 0 1px rgba(250, 211, 139, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -16px 26px -14px rgba(245, 152, 42, 0.3),
    0 0 0 5px rgba(10, 10, 11, 0.62),
    0 0 26px rgba(245, 152, 42, 0.18),
    0 18px 36px -12px rgba(0, 0, 0, 0.95);
}
.table__mesa.is-armed .table__seat--chair:not(.is-lit):not(.is-speaking) .table__disc--chair img {
  opacity: 0.78;
}
.table__seat--chair.is-speaking .table__disc--chair {
  box-shadow:
    inset 0 0 0 1px rgba(255, 220, 150, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -16px 26px -12px rgba(245, 152, 42, 0.7),
    0 0 0 5px rgba(10, 10, 11, 0.62),
    0 0 64px rgba(245, 152, 42, 0.62),
    0 18px 36px -12px rgba(0, 0, 0, 0.95);
}
.table__disc--chair img {
  transition: opacity 0.6s var(--ease);
}
/* While a round plays, every line is there from the start — ghosted until
   its seat speaks — so the transcript never empties or changes height. */
.table__tag,
.table__name,
.table__via {
  transition: opacity 0.6s var(--ease), color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.table__mesa.is-armed .table__line:not(.is-on) .table__tag,
.table__mesa.is-armed .table__line:not(.is-on) .table__name,
.table__mesa.is-armed .table__line:not(.is-on) .table__via {
  opacity: 0.34;
}
.table__mesa.is-armed .table__line:not(.is-on) .table__say,
.table__mesa.is-armed .table__line.is-typing .table__say {
  opacity: 0.16;
}
.table__mesa.is-armed .table__line--chair:not(.is-on) {
  background: rgba(245, 152, 42, 0.03);
  box-shadow: inset 0 0 0 1px rgba(245, 152, 42, 0.1);
}
.table__mesa.is-armed .table__line.is-on:not(.is-live) .table__say {
  color: var(--ink-3);
}
.table__mesa.is-armed .table__line--chair.is-on .table__say {
  color: var(--ink);
}
.table__mesa.is-fading .table__line.is-on .table__tag,
.table__mesa.is-fading .table__line.is-on .table__name,
.table__mesa.is-fading .table__line.is-on .table__via {
  opacity: 0.34;
}
.table__mesa.is-fading .table__line.is-on .table__say {
  opacity: 0.16;
}
.table__mesa.is-fading .table__route.is-used {
  opacity: 0;
}

@keyframes table-orbit {
  to {
    transform: rotate(1turn);
  }
}
@keyframes table-breathe {
  0%,
  100% {
    opacity: 0.85;
    transform: scale(1.06);
  }
  50% {
    opacity: 0.22;
    transform: scale(1.34);
  }
}
@keyframes table-dots {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

/* ---- responsive ------------------------------------------------------- */

/* On wide screens the stage bleeds into the margin: its edges are only light. */
@media (min-width: 1181px) {
  .table__stage {
    --bleed: clamp(0px, 7vw - 30px, 110px);
    width: calc(100% + var(--bleed));
    max-width: 800px;
    margin-left: calc(var(--bleed) * -1);
    justify-self: end;
  }
}
/* Below 1180px the round stacks: the table on top, the transcript under it. */
@media (max-width: 1180px) {
  .table__mesa {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "stage"
      "round"
      "facts";
  }
  .table__stage {
    max-width: 640px;
  }
  .table__round {
    width: 100%;
    max-width: 640px;
    justify-self: center;
  }
  .table__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 1100px) {
  .table__lists {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .table__lists > :first-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 920px) {
  .table__dial-in {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  .table__stage {
    justify-self: stretch;
    width: auto;
    max-width: none;
    margin-inline: calc(var(--gutter) * -1);
  }
  .table__lists {
    grid-template-columns: minmax(0, 1fr);
  }
  .table__facts {
    gap: 22px 18px;
  }
  .table__readout {
    gap: 9px;
    font-size: 0.66rem;
  }
  .table__round {
    padding: 18px 12px 12px;
  }
  .table__q {
    font-size: 1.16rem;
  }
  .table__line {
    grid-template-columns: 22px auto auto minmax(0, 1fr);
    column-gap: 8px;
    padding: 8px 8px 9px;
  }
  .table__tag {
    width: 22px;
    height: 22px;
  }
  .table__say {
    font-size: 0.9rem;
    line-height: 1.48;
  }
  .table__wire {
    padding: 4px 12px;
  }
  .table__wire li {
    grid-template-columns: 4.6rem minmax(0, 1fr);
  }
  .table__wire .table__clamp {
    grid-column: 2;
  }
  .table__val,
  .table__val code {
    font-size: 0.72rem;
  }
}
@media (max-width: 380px) {
  .table__facts {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (forced-colors: active) {
  .table__orbit,
  .table__floor,
  .table__rim {
    display: none;
  }
  .table__track-on {
    color: CanvasText;
    background: none;
  }
}
/* @end table */

/* @section fuel-home */
/* ----------------------------------------------------------------- fuel -- */
/* Fuel and $DULUS: the moment the page changes key. Ember light from a gold
   horizon, an engraved seal behind the headline, a ledger-ruled panel for
   the proof chain, minted numerals for the totals, and the token card.

   The finished state comes first — every station lit, the track full — and
   it is what no-JS and reduced motion show. fuel.js adds .is-armed to the
   chain (stations start dim) and then .is-lit / .is-here / .is-flowing as
   the packet travels; the pre-play states only exist under .is-armed. */

.fuel {
  --fuel-travel: 1000ms;
  position: relative;
  overflow: clip;
  isolation: isolate;
}
/* A gold horizon: the light below it comes from this line. */
.fuel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 4%, var(--line-gold) 30%, rgba(255, 210, 122, 0.75) 50%, var(--line-gold) 70%, transparent 96%);
}
.fuel__atmos {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(56% 34% at 50% 0%, rgba(200, 92, 35, 0.26), transparent 72%),
    radial-gradient(28% 16% at 50% 0%, rgba(255, 210, 122, 0.16), transparent 70%),
    radial-gradient(44% 30% at 50% 50%, rgba(245, 152, 42, 0.07), transparent 70%),
    radial-gradient(64% 40% at 50% 104%, rgba(200, 92, 35, 0.14), transparent 72%),
    linear-gradient(180deg, rgba(42, 20, 8, 0.38), rgba(10, 10, 11, 0) 46%, rgba(26, 13, 6, 0.3));
}

/* -- head -- */

.fuel__head {
  position: relative;
  isolation: isolate;
  max-width: 50rem;
}
.fuel__seal {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 46%;
  width: min(1040px, 168vw);
  height: auto;
  max-width: none;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: var(--gold);
  opacity: 0.2;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  -webkit-mask: radial-gradient(closest-side, rgba(0, 0, 0, 0.6) 18%, #000 44%, rgba(0, 0, 0, 0.4) 76%, transparent 100%);
  mask: radial-gradient(closest-side, rgba(0, 0, 0, 0.6) 18%, #000 44%, rgba(0, 0, 0, 0.4) 76%, transparent 100%);
}
.fuel__seal-mill {
  stroke-width: 12;
  stroke-dasharray: 1 3;
  opacity: 0.55;
}
.fuel__seal-dots {
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 0 4;
}
.fuel__seal-band {
  stroke-width: 0.6;
  opacity: 0.7;
}
.fuel__title {
  font-size: clamp(2.3rem, 1.2rem + 3.8vw, 4.6rem);
}
.fuel__lede {
  max-width: 38rem;
  text-wrap: balance;
}
.fuel__lede strong {
  color: var(--gold);
  font-weight: 500;
  white-space: nowrap;
}
.fuel__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
}

/* -- the proof chain -- */

/* Shared by the chain and the totals, so the numbers sit on the stations' grid. */
.fuel__body {
  --tile: 52px;
  --ol-x: 12px;
  --ol-top: 40px;
  --st-x: clamp(10px, 1.1vw, 16px);
}
.fuel__chain {
  position: relative;
  margin-top: clamp(56px, 6vw, 88px);
  border-radius: var(--r-xl);
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(245, 152, 42, 0.07), transparent 70%),
    linear-gradient(180deg, rgba(255, 245, 230, 0.035), rgba(255, 245, 230, 0.01)),
    rgba(12, 11, 10, 0.72);
  box-shadow: 0 0 0 1px var(--line-2) inset, 0 1px 0 rgba(255, 236, 210, 0.06) inset, var(--shadow-3);
}
/* Ledger ruling, faint, behind the stations. */
.fuel__chain::before {
  content: "";
  position: absolute;
  inset: 64px 0 0;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  pointer-events: none;
  background-image: linear-gradient(rgba(255, 236, 210, 0.032) 1px, transparent 1px);
  background-size: 100% 26px;
  -webkit-mask: linear-gradient(180deg, transparent, #000 18%, #000 70%, transparent);
  mask: linear-gradient(180deg, transparent, #000 18%, #000 70%, transparent);
}

.fuel__bar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  min-height: 64px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
}
.fuel__tag .dot {
  width: 6px;
  height: 6px;
}
.fuel__route {
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}
.fuel__note {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

.fuel__stations {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: auto auto auto 1fr;
  padding: var(--ol-top) var(--ol-x) 34px;
}
.fuel__station {
  position: relative;
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
  padding: 0 var(--st-x);
}

/* The track: one hairline segment from each tile to the next, a gold fill
   that grows with the packet, a lead-in and a lead-out that fade. */
.fuel__stations::before,
.fuel__station::before,
.fuel__station::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.fuel__stations::before {
  left: 0;
  top: calc(var(--ol-top) + var(--tile) / 2);
  width: calc(var(--ol-x) + var(--st-x) + var(--tile) / 2);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(250, 211, 139, 0.55));
}
.fuel__station::before,
.fuel__station::after {
  left: calc(var(--st-x) + var(--tile) / 2);
  top: calc(var(--tile) / 2);
  width: 100%;
  height: 1px;
}
.fuel__station::before {
  background: var(--line-2);
}
.fuel__station::after {
  background: linear-gradient(90deg, var(--gold-1), var(--orange) 70%, var(--gold-1));
  box-shadow: 0 0 10px 0 rgba(245, 152, 42, 0.55);
  transform-origin: 0 50%;
  transition: transform var(--fuel-travel) var(--ease-in-out), opacity 600ms var(--ease);
}
.fuel__station:last-child::before {
  width: calc(100% - var(--st-x) - var(--tile) / 2 + var(--ol-x));
  background: linear-gradient(90deg, rgba(250, 211, 139, 0.55), transparent);
}
.fuel__station:last-child::after {
  content: none;
}

.fuel__tile {
  position: relative;
  z-index: 3;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: var(--tile);
  height: var(--tile);
  border-radius: 16px;
  color: var(--gold-1);
  background: var(--bg-1);
  box-shadow: 0 0 0 1px var(--line-2) inset;
  transition: color 600ms var(--ease);
}
.fuel__tile::before,
.fuel__tile::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}
/* The lit plate: cross-faded with opacity, so lighting up is compositor work. */
.fuel__tile::before {
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(250, 211, 139, 0.28), rgba(245, 152, 42, 0.08) 70%), var(--bg-1);
  box-shadow: 0 0 0 1px rgba(250, 211, 139, 0.5) inset, 0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 14px 30px -12px rgba(245, 152, 42, 0.85);
  transition: opacity 600ms var(--ease);
}
/* The arrival ring. */
.fuel__tile::after {
  inset: -1px;
  box-shadow: 0 0 0 1px rgba(255, 210, 122, 0.75), 0 0 18px rgba(245, 152, 42, 0.45);
  opacity: 0;
}
.fuel__tile .ico {
  width: 22px;
  height: 22px;
}

.fuel__name {
  grid-row: 2;
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-top: 22px;
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
  transition: color 600ms var(--ease);
}
.fuel__n {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--gold-ink);
  transition: color 600ms var(--ease);
}
.fuel__truth {
  grid-row: 3;
  margin-top: 8px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-2);
  transition: color 600ms var(--ease);
}

/* The receipt slip — the example call, as the log would print it. */
.fuel__receipt {
  grid-row: 4;
  align-self: stretch;
  display: grid;
  align-content: start;
  gap: 3px;
  margin-top: 16px;
  padding: 11px 12px 12px;
  border-radius: 11px;
  font-family: var(--mono);
  font-size: 0.71rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  background: linear-gradient(180deg, rgba(255, 245, 230, 0.04), rgba(255, 245, 230, 0.015));
  box-shadow: 0 0 0 1px rgba(250, 211, 139, 0.2) inset;
  transition: box-shadow 600ms var(--ease);
}
.fuel__receipt li {
  overflow-wrap: anywhere;
  transition: color 600ms var(--ease);
}
.fuel__receipt .fuel__hi {
  color: var(--gold);
}
.fuel__header {
  margin-top: 4px;
  padding-top: 7px;
  border-top: 1px dashed rgba(250, 211, 139, 0.28);
  transition: color 600ms var(--ease), text-shadow 600ms var(--ease);
}
/* The payoff: the charge lands on the response. */
.fuel__station.is-here .fuel__header {
  color: var(--gold-hi);
  text-shadow: 0 0 14px rgba(245, 152, 42, 0.75);
}

/* The packet: a bead of Fuel with a short tail. It rides under the tiles,
   so it enters a station rather than passing over it. */
.fuel__packet {
  --px: 0px;
  --py: 0px;
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, #fff 0 22%, var(--gold-hi) 34%, var(--gold-1) 52%, var(--orange) 74%, rgba(245, 152, 42, 0) 76%);
  box-shadow: 0 0 12px 3px rgba(245, 152, 42, 0.6), 0 0 34px 10px rgba(245, 152, 42, 0.2);
  opacity: 0;
  transform: translate3d(var(--px), var(--py), 0);
  transition: transform var(--fuel-travel) var(--ease-in-out), opacity 420ms var(--ease);
  will-change: transform;
  display: none;
}
.fuel__packet::before {
  content: "";
  position: absolute;
  right: 50%;
  top: 50%;
  width: 96px;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(245, 152, 42, 0), rgba(250, 211, 139, 0.85));
  transform-origin: 100% 50%;
  opacity: 0;
  transition: opacity 300ms var(--ease);
}

/* ---- armed: what only exists while fuel.js is playing ---- */

.fuel__chain.is-armed .fuel__packet {
  display: block;
}
.fuel__packet.is-on {
  opacity: 1;
}
.fuel__packet.is-moving::before {
  opacity: 1;
}
.fuel__packet.is-exit {
  transition: transform 800ms var(--ease-in), opacity 800ms var(--ease);
}
.fuel__packet.is-snap {
  transition: none;
}

.is-armed .fuel__station:not(.is-lit) .fuel__tile {
  color: var(--ink-3);
}
.is-armed .fuel__station:not(.is-lit) .fuel__tile::before {
  opacity: 0;
}
.is-armed .fuel__station:not(.is-lit) .fuel__name {
  color: var(--ink-2);
}
.is-armed .fuel__station:not(.is-lit) .fuel__n,
.is-armed .fuel__station:not(.is-lit) .fuel__truth,
.is-armed .fuel__station:not(.is-lit) .fuel__receipt li {
  color: var(--ink-3);
}
.is-armed .fuel__station:not(.is-lit) .fuel__receipt {
  box-shadow: 0 0 0 1px var(--line) inset;
}
.is-armed .fuel__station:not(.is-flowing)::after {
  transform: scaleX(0);
}
.fuel__chain.is-cooling .fuel__station::after {
  opacity: 0;
  transition: opacity 600ms var(--ease), transform 0s linear 600ms;
}
/* Lines print one after another as a station lights. */
.is-armed .fuel__station.is-lit .fuel__receipt li:nth-child(2) {
  transition-delay: 120ms;
}
.is-armed .fuel__station.is-lit .fuel__receipt li:nth-child(3) {
  transition-delay: 240ms;
}
.is-armed .fuel__station.is-lit .fuel__receipt li:nth-child(4) {
  transition-delay: 360ms;
}
.fuel__station.is-here .fuel__tile::after {
  animation: fuel-ring 1.5s var(--ease-out) both;
}
.fuel__station.is-here .fuel__receipt {
  box-shadow: 0 0 0 1px rgba(250, 211, 139, 0.42) inset, 0 16px 40px -22px rgba(245, 152, 42, 0.7);
}
@keyframes fuel-ring {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.55);
  }
}

/* -- the four numbers -- */

.fuel__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr;
  margin-top: clamp(64px, 7vw, 104px);
  padding-inline: calc(var(--ol-x) + var(--st-x));
}
.fuel__fact {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
  padding: 4px clamp(18px, 2.2vw, 34px) 0;
  border-left: 1px solid var(--line-2);
}
.fuel__fact:first-child {
  padding-left: 0;
  border-left: 0;
}
.fuel__num {
  display: block;
  justify-self: start;
  padding: 0 0.04em 0.06em 0;
  font-family: var(--display);
  font-size: clamp(3.4rem, 1.9rem + 4.2vw, 6.4rem);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold-1) 30%, var(--orange) 72%, var(--orange-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.fuel__label {
  display: block;
  margin-top: 16px;
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--ink);
}
.fuel__fine {
  display: block;
  margin-top: 8px;
  text-wrap: pretty;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--ink-3);
}
.fuel__fine [translate="no"] {
  font-family: var(--mono);
  font-size: 0.92em;
  color: var(--ink-2);
  white-space: nowrap;
}

/* -- the token -- */

.fuel__token {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 27rem);
  grid-template-areas:
    "coin id   mint"
    "coin fine mint";
  align-items: center;
  gap: 14px 32px;
  margin-top: clamp(64px, 7vw, 104px);
  padding: clamp(24px, 3vw, 36px);
  background:
    radial-gradient(60% 120% at 0% 50%, rgba(245, 152, 42, 0.09), transparent 60%),
    linear-gradient(180deg, rgba(255, 245, 230, 0.035), rgba(255, 245, 230, 0.012)), var(--bg-1);
  box-shadow: 0 0 0 1px var(--line-2) inset, var(--shadow-2);
}
.fuel__coin {
  grid-area: coin;
  position: relative;
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #2a1a0c, #120d09 62%, #0b0a09);
  box-shadow: 0 0 0 1px rgba(250, 211, 139, 0.32) inset, 0 18px 40px -16px rgba(245, 152, 42, 0.55),
    0 0 0 8px rgba(245, 152, 42, 0.04);
}
.fuel__coin-rim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
  opacity: 0.6;
}
.fuel__coin-mill {
  stroke-width: 6;
  stroke-dasharray: 1 1;
  opacity: 0.5;
}
.fuel__coin-dots {
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 0 2;
  opacity: 0.6;
}
.fuel__coin img {
  position: relative;
  width: 52px;
  height: auto;
  filter: drop-shadow(0 4px 12px rgba(245, 152, 42, 0.45));
}
.fuel__id {
  grid-area: id;
  align-self: end;
  display: grid;
  gap: 12px;
  justify-items: start;
}
.fuel__token-title {
  font-size: clamp(1.4rem, 1.1rem + 0.9vw, 1.9rem);
  letter-spacing: -0.03em;
}
.fuel__token-title [translate="no"] {
  color: var(--gold);
}
.fuel__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fuel__mint {
  grid-area: mint;
  display: grid;
  gap: 10px;
  min-width: 0;
}
.fuel__mint-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.fuel__mint-field {
  justify-self: start;
  height: 50px;
  padding-left: 18px;
  font-size: 0.86rem;
  letter-spacing: -0.01em;
}
.fuel__mint-field .cmd__text::before {
  content: none;
}
.fuel__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 4px;
  font-size: var(--fs-sm);
}
.fuel__disclaimer {
  grid-area: fine;
  align-self: start;
  max-width: 30rem;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--ink-3);
}
.fuel__fine strong {
  font-weight: 500;
  color: var(--ink-2);
}

/* -- laptops: the same row, with denser receipts -- */

@media (min-width: 1280px) and (max-width: 1439px) {
  .fuel__body {
    --st-x: 10px;
  }
  .fuel__truth {
    font-size: 0.86rem;
  }
  .fuel__receipt {
    padding: 10px 10px 11px;
    font-size: 0.68rem;
  }
}

/* -- below 1280: the chain turns into a column -- */

@media (max-width: 1279px) {
  .fuel__body {
    --tile: 46px;
    --ol-x: 22px;
    --ol-top: 30px;
    --gap: 34px;
  }
  .fuel__stations {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: var(--gap);
    padding: var(--ol-top) var(--ol-x) 30px;
  }
  .fuel__station {
    grid-row: auto;
    grid-template-columns: var(--tile) minmax(0, 1fr) minmax(0, 21rem);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "tile name receipt"
      "tile truth receipt";
    column-gap: 22px;
    padding: 0;
  }
  .fuel__tile {
    grid-area: tile;
    border-radius: 14px;
  }
  .fuel__name {
    grid-area: name;
    margin-top: 2px;
  }
  .fuel__truth {
    grid-area: truth;
    align-self: start;
    font-size: var(--fs-sm);
  }
  .fuel__receipt {
    grid-area: receipt;
    margin-top: 0;
  }
  .fuel__stations::before {
    left: calc(var(--ol-x) + var(--tile) / 2);
    top: 0;
    width: 1px;
    height: calc(var(--ol-top) + var(--tile) / 2);
    background: linear-gradient(180deg, transparent, rgba(250, 211, 139, 0.55));
  }
  .fuel__station::before,
  .fuel__station::after {
    left: calc(var(--tile) / 2);
    top: calc(var(--tile) / 2);
    width: 1px;
    height: calc(100% + var(--gap));
  }
  .fuel__station::after {
    background: linear-gradient(180deg, var(--gold-1), var(--orange) 70%, var(--gold-1));
    transform-origin: 50% 0;
  }
  .fuel__station:last-child::before {
    width: 1px;
    height: calc(100% - var(--tile) / 2 + 30px);
    background: linear-gradient(180deg, rgba(250, 211, 139, 0.55), transparent);
  }
  .is-armed .fuel__station:not(.is-flowing)::after {
    transform: scaleY(0);
  }
  .fuel__packet::before {
    right: auto;
    left: 50%;
    top: auto;
    bottom: 50%;
    width: 2px;
    height: 84px;
    margin: 0 0 0 -1px;
    background: linear-gradient(180deg, rgba(245, 152, 42, 0), rgba(250, 211, 139, 0.85));
  }

  .fuel__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto 1fr auto auto 1fr;
    padding-inline: var(--ol-x);
  }
  .fuel__fact:nth-child(n + 3) {
    margin-top: 48px;
  }
  .fuel__fact:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .fuel__token {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "coin id"
      "mint mint"
      "fine fine";
    gap: 24px 26px;
  }
  .fuel__id {
    align-self: center;
  }
  .fuel__disclaimer {
    max-width: none;
    padding-top: 20px;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 720px) {
  .fuel__body {
    --tile: 42px;
    --ol-x: 18px;
    --ol-top: 26px;
    --gap: 30px;
  }
  .fuel__chain {
    border-radius: var(--r-lg);
  }
  .fuel__chain::before {
    border-radius: 0 0 var(--r-lg) var(--r-lg);
  }
  .fuel__bar {
    padding: 14px 18px;
  }
  .fuel__route {
    display: none;
  }
  .fuel__note {
    margin-left: 0;
    flex-basis: 100%;
  }
  .fuel__station {
    grid-template-columns: var(--tile) minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      "tile name"
      "tile truth"
      "tile receipt";
    column-gap: 16px;
  }
  .fuel__tile {
    align-self: start;
    border-radius: 13px;
  }
  .fuel__tile .ico {
    width: 20px;
    height: 20px;
  }
  .fuel__name {
    margin-top: 0;
    font-size: 1.06rem;
    line-height: var(--tile);
    height: var(--tile);
    align-items: center;
  }
  .fuel__truth {
    margin-top: 0;
  }
  .fuel__receipt {
    margin-top: 12px;
    font-size: 0.72rem;
  }

  .fuel__facts {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: 0;
    padding-inline: 2px;
  }
  .fuel__fact,
  .fuel__fact:nth-child(n + 3) {
    grid-row: auto;
    margin-top: 0;
    grid-template-rows: none;
    grid-template-columns: 7.4rem minmax(0, 1fr);
    grid-template-areas:
      "num label"
      "num fine";
    column-gap: 14px;
    padding: 22px 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .fuel__fact:first-child {
    border-top: 0;
    padding-top: 0;
  }
  .fuel__num {
    grid-area: num;
    font-size: 2.75rem;
  }
  .fuel__label {
    grid-area: label;
    margin-top: 2px;
    font-size: 1.04rem;
  }
  .fuel__fine {
    grid-area: fine;
  }

  .fuel__token {
    gap: 22px 18px;
  }
  .fuel__coin {
    width: 76px;
    height: 76px;
  }
  .fuel__coin img {
    width: 36px;
  }
  .fuel__mint-field {
    justify-self: stretch;
    justify-content: space-between;
    height: auto;
    min-height: 50px;
    padding: 9px 6px 9px 16px;
    border-radius: 16px;
  }
  .fuel__mint-field .cmd__text {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-all;
    line-height: 1.45;
  }
}

@media (max-width: 520px) {
  .fuel__ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .fuel__ctas .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fuel__packet {
    display: none !important;
  }
}

/* Forced colours drop shadows and gradients, which draw the outlines and
   the track here: give them real borders and a system-colour line. */
@media (forced-colors: active) {
  .fuel__seal,
  .fuel__packet,
  .fuel__chain::before,
  .fuel__station::after,
  .fuel__tile::before,
  .fuel__tile::after {
    display: none;
  }
  .fuel__chain,
  .fuel__tile,
  .fuel__receipt,
  .fuel__coin {
    border: 1px solid CanvasText;
  }
  .fuel__stations::before,
  .fuel__station::before {
    forced-color-adjust: none;
    background: CanvasText;
  }
  .fuel__num {
    color: CanvasText;
    background: none;
  }
}
/* @end fuel-home */

/* @section memory */
/* --------------------------------------------------------------- memory -- */
/* "Memory & control": two movements under one head. Movement 01 is the
   context window drawn as an instrument — a cache clock that runs out, a bar
   that compacts — then memory files you can read. Movement 02 is four small
   pieces of the product: steer, permission prompt, checkpoints, budget.

   memory.js plays each [data-mem-scene] once, when it scrolls into view: it
   adds .is-armed (back to the first frame), then .is-<step> classes on a
   clock. Everything here is written finished-first — the default styles ARE
   the last frame, which is exactly what no-JS and reduced motion show; the
   earlier frames only exist under .is-armed. */

.memory {
  isolation: isolate;
}
.memory::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 70%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(48% 36% at 78% 6%, rgba(245, 152, 42, 0.07), transparent 70%),
    radial-gradient(40% 30% at 10% 40%, rgba(108, 184, 255, 0.035), transparent 70%);
}
.memory__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.memory-ico {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.memory-ico--fill {
  fill: currentColor;
  stroke: none;
}
.memory code,
.memory kbd {
  font-family: var(--mono);
  font-size: 0.86em;
}
.memory kbd {
  padding: 1px 6px;
  border-radius: 6px;
  color: var(--ink);
  background: rgba(255, 245, 230, 0.06);
  box-shadow: 0 0 0 1px var(--line-2) inset, 0 1px 0 rgba(0, 0, 0, 0.4);
}

/* Typed text: a hidden copy holds the final size, the live copy grows over
   it; a caret blinks while it waits and holds still while it types. */
.memory-type {
  display: inline-grid;
}
p.memory-type {
  display: grid;
}
.memory-type > span {
  grid-area: 1 / 1;
}
.memory-type__ghost {
  visibility: hidden;
}
.memory-type.is-typing .memory-type__live::after,
.memory-type.is-waiting .memory-type__live::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: -0.16em;
  background: currentColor;
}
.memory-type.is-waiting .memory-type__live::after {
  width: 0.55em;
  background: var(--gold-ink);
  opacity: 0.85;
  animation: blink 1.1s steps(1) infinite;
}
/* A scene that is off screen holds still (spinners, carets). */
.memory .is-offscreen,
.memory .is-offscreen *,
.memory .is-offscreen *::before,
.memory .is-offscreen *::after {
  animation-play-state: paused !important;
}
.memory .is-resetting,
.memory .is-resetting *,
.memory .is-resetting *::before,
.memory .is-resetting *::after {
  transition: none !important;
}

/* ------------------------------------------------------------ movements -- */

.memory__title > span {
  display: block;
}
.memory__title .serif {
  white-space: nowrap;
}
.memory__head .lede {
  max-width: 44rem;
}
/* dulus.css paints a split headline's accent per word, which needs main.js;
   without it the accent keeps its plumage here. */
html:not(.js) .memory .split .serif {
  background: var(--plumage);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.memory__move {
  margin-top: clamp(56px, 6vw, 96px);
}
.memory__move--ctl {
  margin-top: clamp(88px, 9vw, 144px);
}
.memory__mhead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 22px clamp(24px, 5vw, 80px);
  margin-bottom: clamp(26px, 3vw, 40px);
}
.memory__index {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.memory__index::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-2), transparent 85%);
}
.memory__num {
  color: var(--gold-ink);
  letter-spacing: 0.06em;
}
.memory__mlede {
  justify-self: end;
  max-width: 30rem;
  color: var(--ink-3);
}

/* ------------------------------------------------- the context window -- */

.memory-ctx {
  margin: 0;
  padding: clamp(18px, 2.4vw, 30px);
}
.memory-ctx__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.memory-ctx__title {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.memory-ctx__label {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.memory-ctx__use {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-3);
}
.memory-ctx__use b {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ink);
}
.memory-ctx__tools {
  display: flex;
  align-items: center;
  gap: 12px;
}
.memory-ctx__chip {
  height: 26px;
  padding: 0 10px;
}
.memory-ctx__speed {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.memory-ctx__speed .memory-ico {
  width: 12px;
  height: 12px;
  color: var(--gold-ink);
}
.memory-ctx__replay {
  display: none;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 13px 0 11px;
  border-radius: var(--pill);
  font-size: 0.8125rem;
  color: var(--ink-2);
  box-shadow: 0 0 0 1px var(--line-2) inset;
  transition: color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast);
}
.memory.is-live .memory-ctx__replay {
  display: inline-flex;
}
.memory-ctx__replay:hover {
  color: var(--ink);
  background: rgba(255, 245, 230, 0.05);
  box-shadow: 0 0 0 1px var(--line-3) inset;
}
.memory-ctx__replay .ico {
  width: 14px;
  height: 14px;
}

.memory-ctx__body {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 3.6vw, 56px);
  padding: clamp(24px, 2.8vw, 36px) 0 clamp(22px, 2.4vw, 30px);
}

/* The cache clock: 60 minute ticks, a ring that runs down, a sky dot where
   the TTL ends. */
.memory-ctx__clock {
  display: grid;
  justify-items: center;
  gap: 14px;
}
.memory-ctx__dial {
  position: relative;
  width: 152px;
  aspect-ratio: 1;
}
.memory-ctx__ring {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.memory-ctx__ring circle {
  fill: none;
}
.memory-ctx__ticks {
  stroke: rgba(255, 236, 210, 0.16);
  stroke-width: 3.2;
  stroke-dasharray: 0.07 0.93;
  transition: stroke 0.5s var(--ease);
}
.memory-ctx__track {
  stroke: rgba(255, 236, 210, 0.07);
  stroke-width: 5;
  transition: stroke 0.5s var(--ease);
}
.memory-ctx__arc {
  stroke: var(--gold);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 100 100;
  stroke-dashoffset: calc((1 - var(--p, 1)) * 100);
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
  filter: drop-shadow(0 0 5px rgba(245, 152, 42, 0.55));
  transition: stroke 0.5s var(--ease);
}
.memory-ctx__ring .memory-ctx__ttl {
  fill: var(--sky);
  filter: drop-shadow(0 0 4px rgba(108, 184, 255, 0.8));
}
.memory-ctx__read {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4px;
}
.memory-ctx__time {
  font-family: var(--mono);
  font-size: 1.62rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.memory-ctx__state {
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.memory-ctx__warm {
  color: var(--gold-ink);
}
.memory-ctx__cold {
  display: none;
  color: var(--sky);
}
.memory-ctx__cap {
  display: grid;
  justify-items: center;
  gap: 2px;
  font-size: 0.8125rem;
  color: var(--ink-2);
}
.memory-ctx__ttlv {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}

/* The window: one track, segments sized in percent of it (--w). */
.memory-ctx__bar {
  position: relative;
}
.memory-ctx__track {
  position: relative;
  display: flex;
  height: 60px;
  border-radius: 12px;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(255, 236, 210, 0.055) 0 1px, transparent 1px 10%),
    rgba(255, 245, 230, 0.015);
  box-shadow: 0 0 0 1px var(--line-2) inset;
}
.memory-seg {
  position: relative;
  flex: none;
  width: calc(var(--w) * 1%);
  height: 100%;
  box-shadow: inset 2px 0 0 #0d0c0b;
  transition: width 1.2s var(--ease-in-out), opacity 0.6s var(--ease);
}
.memory-seg:first-child {
  box-shadow: none;
}
.memory-seg--sys {
  --w: 12;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 38%),
    linear-gradient(180deg, #ffd27a, #f0a03c);
}
.memory-seg--sys::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(-45deg, rgba(108, 184, 255, 0.28) 0 1px, transparent 1px 6px),
    #0f1a26;
  box-shadow: inset 0 0 0 1px rgba(108, 184, 255, 0.6);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.memory-seg--mem {
  --w: 1.2;
  background: linear-gradient(180deg, #fff3dc, #ffd9a0);
}
.memory-seg--sum {
  --w: 3;
  background:
    repeating-linear-gradient(-45deg, rgba(250, 211, 139, 0.55) 0 2px, rgba(250, 211, 139, 0.16) 2px 6px);
}
.memory-seg--conv {
  --w: 4;
  background:
    repeating-linear-gradient(180deg, transparent 0 9px, rgba(13, 12, 11, 0.5) 9px 10px),
    rgba(255, 236, 210, 0.3);
}
.memory-seg--tool {
  --w: 3;
  background:
    repeating-linear-gradient(90deg, rgba(255, 236, 210, 0.22) 0 1px, transparent 1px 4px),
    rgba(255, 236, 210, 0.1);
}
.memory-ctx__ghost {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 25.6%;
  width: 36%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px dashed rgba(255, 236, 210, 0.2);
  border-left: 0;
  border-radius: 0 10px 10px 0;
  background: repeating-linear-gradient(-45deg, rgba(255, 236, 210, 0.05) 0 1px, transparent 1px 7px);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  transition: left 1.2s var(--ease-in-out), width 1.2s var(--ease-in-out), opacity 0.6s var(--ease);
}
.memory-ctx__ghost > * {
  transition: opacity 0.5s var(--ease) 0.6s;
}
/* The re-written prefix: one light pass across what is sent now. */
.memory-ctx__sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 25.6%;
  overflow: hidden;
  pointer-events: none;
}
.memory-ctx__sweep::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: translateX(-110%);
}
.memory-ctx.is-armed.is-done .memory-ctx__sweep::before {
  animation: memory-sweep 1.1s var(--ease-in-out) 0.15s 1 both;
}
@keyframes memory-sweep {
  to {
    transform: translateX(240%);
  }
}
.memory-ctx__mark {
  position: absolute;
  left: 70%;
  top: -7px;
  bottom: -7px;
  width: 1px;
  background: linear-gradient(180deg, var(--gold-ink), rgba(247, 180, 90, 0.35));
}
.memory-ctx__mark::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--gold-ink);
  transform: rotate(45deg);
}
.memory-ctx__scale {
  position: relative;
  height: 18px;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 18px;
  color: var(--ink-3);
}
.memory-ctx__scale > span {
  position: absolute;
  top: 0;
}
.memory-ctx__scale > span:first-child {
  left: 0;
}
.memory-ctx__scale > span:last-child {
  right: 0;
}
.memory-ctx__scale-mark {
  right: 30%;
  padding-right: 9px;
  white-space: nowrap;
}
.memory-ctx__scale-mark b {
  font-weight: 500;
  color: var(--gold-ink);
}

.memory-ctx__legend {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 22px;
  margin-top: 22px;
}
.memory-lg {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  align-items: center;
  gap: 4px 10px;
}
.memory-lg__sw {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.memory-lg--sys .memory-lg__sw {
  background: linear-gradient(180deg, #ffd27a, #f0a03c);
}
.memory-lg--mem .memory-lg__sw {
  background: #ffe8c4;
}
.memory-lg--conv .memory-lg__sw {
  background: rgba(255, 236, 210, 0.36);
}
.memory-lg--tool .memory-lg__sw {
  background:
    repeating-linear-gradient(90deg, rgba(255, 236, 210, 0.4) 0 1px, transparent 1px 3px),
    rgba(255, 236, 210, 0.12);
}
.memory-lg__name {
  font-size: 0.8125rem;
  color: var(--ink-2);
  white-space: nowrap;
}
.memory-lg__num {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
}
.memory-lg__val {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink);
}
.memory-lg__val b {
  font-weight: inherit;
}
.memory-lg__tag {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.memory-lg--sys .memory-lg__tag {
  color: var(--gold-ink);
}
.memory-t--expired {
  display: none;
  color: var(--sky);
}

.memory-ctx__log {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 3px;
  padding: 13px 16px 14px;
  border-radius: 12px;
  background: var(--sunk);
  box-shadow: 0 0 0 1px var(--line) inset;
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 1.65;
}
.memory-ctx__you {
  color: var(--ink);
}
.memory-ctx__ps {
  margin-right: 2px;
  color: var(--gold-ink);
}
.memory-ctx__notice {
  color: var(--ink-3);
}
.memory-ctx__notice {
  min-height: 0;
  overflow: hidden;
  transition: opacity 0.5s var(--ease) 0.15s, transform 0.5s var(--ease-out) 0.15s;
}
.memory-ctx.is-armed .memory-ctx__log {
  transition: grid-template-rows 0.55s var(--ease-out);
}
.memory-ctx.is-armed:not(.is-notice) .memory-ctx__log {
  grid-template-rows: auto 0fr;
}

.memory-ctx__steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0 16px;
  margin-top: 24px;
}
.memory-st {
  --c: var(--gold);
  --halo: rgba(245, 152, 42, 0.16);
  position: relative;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 5px;
  padding-top: 22px;
  transition: opacity 0.5s var(--ease);
}
.memory-st::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 18px;
  right: -12px;
  height: 1px;
  background: var(--line-2);
}
.memory-st:last-child::before {
  content: none;
}
.memory-st::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 3px var(--halo), 0 0 12px var(--halo);
  transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.memory-st--cold {
  --c: var(--sky);
  --halo: rgba(108, 184, 255, 0.2);
}
.memory-st__k {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.memory-st--cold .memory-st__k {
  color: var(--sky);
}
.memory-st__t {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ink-2);
}
.memory-st__roll {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  margin-top: 5px;
  padding: 0 10px 0 8px;
  border-radius: var(--pill);
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--gold);
  background: rgba(245, 152, 42, 0.08);
  box-shadow: 0 0 0 1px rgba(245, 152, 42, 0.3) inset;
  transition: opacity 0.5s var(--ease), transform 0.6s var(--spring);
}
.memory-st__roll .memory-ico {
  width: 13px;
  height: 13px;
}

/* ctx: the earlier frames */
.memory-ctx.is-armed:not(.is-cold) .memory-st--cold,
.memory-ctx.is-armed:not(.is-l1) .memory-st--l1,
.memory-ctx.is-armed:not(.is-ck) .memory-st--ck,
.memory-ctx.is-armed:not(.is-l2) .memory-st--l2,
.memory-ctx.is-armed:not(.is-done) .memory-st--done {
  opacity: 0.38;
  --c: transparent;
  --halo: transparent;
}
.memory-ctx.is-armed:not(.is-cold) .memory-st--cold::after,
.memory-ctx.is-armed:not(.is-l1) .memory-st--l1::after,
.memory-ctx.is-armed:not(.is-ck) .memory-st--ck::after,
.memory-ctx.is-armed:not(.is-l2) .memory-st--l2::after,
.memory-ctx.is-armed:not(.is-done) .memory-st--done::after {
  box-shadow: inset 0 0 0 1px var(--ink-3);
}
.memory-ctx.is-armed:not(.is-ck) .memory-st__roll {
  opacity: 0;
  transform: scale(0.86);
}
.memory-ctx.is-armed.is-cold:not(.is-done) .memory-ctx__arc {
  stroke: var(--sky);
}
.memory-ctx.is-armed.is-cold:not(.is-done) .memory-ctx__track {
  stroke: rgba(108, 184, 255, 0.22);
}
.memory-ctx.is-armed.is-cold:not(.is-done) .memory-ctx__ticks {
  stroke: rgba(108, 184, 255, 0.3);
}
.memory-ctx.is-armed.is-cold:not(.is-done) .memory-ctx__warm,
.memory-ctx.is-armed.is-cold:not(.is-done) .memory-t--cached {
  display: none;
}
.memory-ctx.is-armed.is-cold:not(.is-done) .memory-ctx__cold,
.memory-ctx.is-armed.is-cold:not(.is-done) .memory-t--expired {
  display: inline;
}
.memory-ctx.is-armed.is-cold:not(.is-done) .memory-seg--sys::after {
  opacity: 1;
}
.memory-ctx.is-armed:not(.is-notice) .memory-ctx__notice {
  opacity: 0;
  transform: translateY(5px);
}
.memory-ctx.is-armed:not(.is-l1) .memory-seg--tool {
  --w: 24;
}
.memory-ctx.is-armed.is-l1:not(.is-l2) .memory-seg--tool {
  --w: 11;
}
.memory-ctx.is-armed:not(.is-l2) .memory-seg--conv {
  --w: 22;
}
.memory-ctx.is-armed:not(.is-l2) .memory-seg--sum {
  --w: 0;
}
.memory-ctx.is-armed:not(.is-l1) .memory-ctx__ghost {
  left: 61.6%;
  width: 0;
  opacity: 0;
}
.memory-ctx.is-armed.is-l1:not(.is-l2) .memory-ctx__ghost {
  left: 48.6%;
  width: 13%;
}
.memory-ctx.is-armed:not(.is-l2) .memory-ctx__ghost > * {
  opacity: 0;
  transition-delay: 0s;
}
.memory-v {
  font: inherit;
  color: inherit;
}
.memory-v--a,
.memory-v--b,
.memory-t--after,
.memory-t--l1 {
  display: none;
}
.memory-v--c,
.memory-ctx:not(.is-armed) .memory-t--after,
.memory-ctx:not(.is-armed) .memory-t--l1 {
  display: inline;
}
.memory-ctx.is-armed:not(.is-l1) .memory-v--a {
  display: inline;
}
.memory-ctx.is-armed:not(.is-l1) .memory-v--c,
.memory-ctx.is-armed.is-l1:not(.is-l2) .memory-v--c {
  display: none;
}
.memory-ctx.is-armed.is-l1:not(.is-l2) .memory-v--b,
.memory-ctx.is-armed.is-l1:not(.is-l2) .memory-lg--conv .memory-v--a {
  display: inline;
}
.memory-ctx.is-armed.is-l1 .memory-t--l1,
.memory-ctx.is-armed.is-l2 .memory-t--after {
  display: inline;
}

/* ------------------------------------------------------------- notes -- */

.memory__notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 44px);
  margin-top: clamp(30px, 3.4vw, 44px);
}
.memory-note {
  display: grid;
  align-content: start;
  gap: 9px;
  padding-top: 20px;
  border-top: 1px solid var(--line-2);
}
.memory-note__k {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.memory-note__t {
  font-size: 1.2rem;
  line-height: 1.2;
  letter-spacing: -0.025em;
}
.memory-note > p:not([class]) {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-3);
}
.memory-note__code {
  margin-top: 2px;
}
.memory-note__code code {
  font-size: 0.72rem;
  color: var(--gold);
  overflow-wrap: anywhere;
}

/* Loopback: the archive on the left stays local, the window on the right is
   sent, one archived turn is fetched back. */
.memory-loop {
  margin-top: 8px;
}
.memory-loop__strip {
  display: flex;
  gap: 6px;
  height: 26px;
}
.memory-loop__archive,
.memory-loop__window {
  position: relative;
  border-radius: 6px;
}
.memory-loop__archive {
  flex: 3;
  background: repeating-linear-gradient(90deg, rgba(255, 236, 210, 0.2) 0 2px, transparent 2px 7px) 4px 7px / calc(100% - 8px) 12px no-repeat;
  box-shadow: 0 0 0 1px var(--line) inset;
}
.memory-loop__window {
  flex: 2;
  background:
    repeating-linear-gradient(90deg, var(--gold) 0 2px, transparent 2px 7px) 4px 5px / calc(100% - 8px) 16px no-repeat,
    rgba(245, 152, 42, 0.07);
  box-shadow: 0 0 0 1px rgba(245, 152, 42, 0.35) inset;
}
.memory-loop__hit {
  position: absolute;
  left: 39%;
  top: 3px;
  bottom: 3px;
  width: 4px;
  border-radius: 2px;
  background: var(--gold-hi);
  box-shadow: 0 0 10px rgba(255, 210, 122, 0.9);
}
.memory-loop__labels {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.memory-loop__labels > span:first-child {
  flex: 3;
}
.memory-loop__labels > span:last-child {
  flex: 2;
  color: var(--gold-ink);
}

/* ---------------------------------------------------- memory you read -- */

.memory__mem {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: start;
  gap: clamp(28px, 4.4vw, 72px);
  margin-top: clamp(64px, 7vw, 104px);
}
.memory__mem-copy {
  display: grid;
  gap: 18px;
  padding-top: 6px;
  container-type: inline-size;
}
.memory__mem-lede {
  max-width: 32rem;
  color: var(--ink-3);
}
.memory__facts {
  margin-top: 10px;
  border-top: 1px solid var(--line);
}
.memory__facts > div {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.memory__facts dt {
  padding-top: 2px;
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--gold-ink);
}
.memory__facts dd {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.memory__facts dd code {
  color: var(--ink);
}
@container (max-width: 440px) {
  .memory__facts > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}
/* Where the files live: you, and each project, each with its own index. */
.memory__tree {
  margin: 8px 0 0;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--sunk);
  box-shadow: 0 0 0 1px var(--line) inset;
  font-size: 0.74rem;
  line-height: 1.8;
  color: var(--ink-3);
  white-space: pre;
  overflow: hidden;
}
.memory__tree-dir {
  color: var(--ink-3);
}
.memory__tree-g {
  color: var(--ink-4);
}
.memory__tree-i {
  color: var(--ink-2);
}
.memory__tree-gold {
  color: var(--gold-ink);
}

.memory-recall {
  margin: 0;
  padding: 10px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 245, 230, 0.025), rgba(255, 245, 230, 0.008)), var(--sunk);
  box-shadow: 0 0 0 1px var(--line) inset, var(--shadow-2);
}
.memory-recall__turn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 14px;
  font-family: var(--mono);
  font-size: 0.8rem;
}
.memory-recall__ps {
  color: var(--gold-ink);
}
.memory-recall__q {
  flex: 1;
  min-width: 0;
  color: var(--ink);
}
.memory-recall__n {
  flex: none;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: opacity 0.5s var(--ease);
}
.memory-recall__n b {
  margin-left: 4px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--gold-ink);
}
.memory-recall__files {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.memory-file {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px 16px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 245, 230, 0.035), rgba(255, 245, 230, 0.012)), var(--bg-1);
  box-shadow: 0 0 0 1px var(--line) inset;
  transition: box-shadow 0.6s var(--ease), outline-color 0.6s var(--ease);
}
.memory-file__tab,
.memory-file__body,
.memory-file__fm .v {
  transition: color 0.6s var(--ease);
}
.memory-file__tab {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--ink);
}
.memory-file__tab .memory-ico {
  color: var(--ink-4);
}
.memory-file__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.memory-file__state {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 18px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: opacity 0.5s var(--ease);
}
.memory-file__state .memory-ico {
  width: 12px;
  height: 12px;
}
.memory-file__score {
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}
.memory-file__fm {
  margin: 0;
  padding: 9px 11px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: 0 0 0 1px var(--line) inset;
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--ink-4);
  white-space: pre;
  overflow: hidden;
}
.memory-file__fm .k {
  color: var(--ink-3);
}
.memory-file__fm .v {
  color: var(--gold-ink);
}
.memory-file__body {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.memory-file__body code {
  color: var(--ink);
}
.memory-file--gold {
  box-shadow: 0 0 0 1px rgba(250, 211, 139, 0.3) inset, 0 0 40px -18px rgba(245, 152, 42, 0.6);
}
.memory-file--gold .memory-file__state,
.memory-file--gold .memory-file__tab .memory-ico {
  color: var(--gold-ink);
}
.memory-file--hit {
  box-shadow: inset 2px 0 0 var(--gold), 0 0 0 1px var(--line-2) inset;
}
.memory-file--hit .memory-file__state {
  color: var(--gold-ink);
}
.memory-file--hit .memory-file__score {
  color: var(--gold);
}
.memory-file--miss {
  background: transparent;
  box-shadow: none;
  outline: 1px dashed var(--line-2);
  outline-offset: -1px;
}
.memory-file--miss .memory-file__tab,
.memory-file--miss .memory-file__body,
.memory-file--miss .memory-file__fm .v,
.memory-file--miss .memory-file__score {
  color: var(--ink-3);
}
.memory-file--miss .memory-file__fm {
  background: transparent;
}

/* recall: the earlier frames */
.memory-recall.is-armed:not(.is-s1) .memory-file--s1,
.memory-recall.is-armed:not(.is-s2) .memory-file--s2,
.memory-recall.is-armed:not(.is-s3) .memory-file--s3 {
  background: linear-gradient(180deg, rgba(255, 245, 230, 0.035), rgba(255, 245, 230, 0.012)), var(--bg-1);
  box-shadow: 0 0 0 1px var(--line) inset;
  outline-color: transparent;
}
.memory-recall.is-armed:not(.is-s3) .memory-file--s3 .memory-file__tab,
.memory-recall.is-armed:not(.is-s3) .memory-file--s3 .memory-file__body {
  color: var(--ink-2);
}
.memory-recall.is-armed:not(.is-s3) .memory-file--s3 .memory-file__tab {
  color: var(--ink);
}
.memory-recall.is-armed:not(.is-s3) .memory-file--s3 .memory-file__fm .v {
  color: var(--gold-ink);
}
.memory-recall.is-armed:not(.is-s1) .memory-file--s1 .memory-file__state,
.memory-recall.is-armed:not(.is-s2) .memory-file--s2 .memory-file__state,
.memory-recall.is-armed:not(.is-s3) .memory-file--s3 .memory-file__state,
.memory-recall.is-armed:not(.is-done) .memory-recall__n {
  opacity: 0;
}

/* ------------------------------------------------------------ control -- */

.memory__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}
.memory-ctl {
  display: flex;
  flex-direction: column;
}
/* Stages and copy line up across a row of cards. */
@supports (grid-template-rows: subgrid) {
  .memory__grid {
    row-gap: 0;
  }
  .memory-ctl {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    margin-bottom: clamp(14px, 1.6vw, 20px);
  }
}
.memory-ctl__stage {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  min-height: 312px;
  margin: 10px 10px 0;
  padding: 22px;
  border-radius: calc(var(--r-lg) - 8px);
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(255, 245, 230, 0.035), transparent 70%),
    var(--sunk);
  box-shadow: 0 0 0 1px var(--line) inset;
  overflow: hidden;
}
.memory-ctl__copy {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 22px 26px 28px;
}
.memory-ctl__meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.memory-ctl__title {
  font-size: 1.32rem;
  line-height: 1.15;
  letter-spacing: -0.03em;
}
.memory-ctl__copy > p:not([class]) {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-3);
}
.memory-ctl__copy code {
  color: var(--ink-2);
}
.memory-ctl__note {
  font-size: 0.8125rem;
  color: var(--ink-3);
}

/* (a) steer — a tool pill running, a steer typed over it, read before the
   next step. */
.memory-steer {
  grid-template-rows: auto 1fr auto;
  gap: 14px;
}
.memory-steer__chat {
  display: grid;
  align-content: start;
  gap: 10px;
}
.memory-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  background: rgba(255, 245, 230, 0.035);
  box-shadow: 0 0 0 1px var(--line) inset;
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--ink-3);
  white-space: nowrap;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease-out);
}
.memory-pill__st {
  position: relative;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
}
.memory-pill__st .memory-ico {
  grid-area: 1 / 1;
}
.memory-pill__ok {
  color: var(--live);
}
.memory-pill__spin {
  display: none;
  color: var(--gold-ink);
  animation: spin 0.9s linear infinite;
}
.memory-pill__name {
  font-weight: 600;
  color: var(--ink);
}
.memory-pill__arg {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.memory-pill__run {
  display: none;
  margin-left: auto;
  color: var(--ink-3);
}
.memory-pill__res {
  margin-left: auto;
}
.memory-pill__add {
  color: var(--live);
}
.memory-pill__del {
  color: var(--danger);
}
.memory-steer__note {
  justify-self: end;
  display: grid;
  justify-items: end;
  gap: 5px;
  max-width: 86%;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease-out);
}
.memory-steer__label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--gold-ink);
}
.memory-steer__label .memory-ico {
  width: 11px;
  height: 11px;
}
.memory-steer__said {
  padding: 7px 12px;
  border-radius: 12px 12px 4px 12px;
  background: rgba(245, 152, 42, 0.1);
  box-shadow: 0 0 0 1px rgba(245, 152, 42, 0.26) inset;
  font-size: 0.8125rem;
  color: var(--ink);
}
.memory-steer__panel {
  align-self: end;
  justify-self: end;
  display: grid;
  gap: 10px;
  width: min(100%, 300px);
  padding: 12px;
  border-radius: 16px;
  background: var(--raised);
  box-shadow: 0 0 0 1px var(--line-2) inset, 0 24px 48px -20px rgba(0, 0, 0, 0.95);
}
.memory-steer__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.memory-steer__bubble {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  color: #1d1003;
  background: var(--plumage);
  box-shadow: 0 6px 16px -6px rgba(245, 152, 42, 0.8);
}
.memory-steer__bubble .memory-ico {
  width: 15px;
  height: 15px;
}
.memory-steer__h {
  display: grid;
  gap: 1px;
  line-height: 1.3;
}
.memory-steer__h strong {
  font-size: 0.8125rem;
}
.memory-steer__h span {
  font-size: 0.6875rem;
  color: var(--ink-3);
}
.memory-steer__msg {
  padding: 9px 11px 7px;
  border-radius: 10px;
  background: rgba(255, 245, 230, 0.04);
  box-shadow: 0 0 0 1px var(--line) inset;
}
.memory-steer__typed {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink);
}
.memory-steer__status {
  display: flex;
  justify-content: flex-end;
  min-height: 16px;
  margin-top: 3px;
  font-size: 0.66rem;
  color: var(--ink-3);
}
.memory-steer__status > span {
  align-items: center;
  gap: 4px;
}
.memory-steer__status .memory-ico {
  width: 11px;
  height: 11px;
}
.memory-steer__composer {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 42px;
  padding: 0 6px 0 14px;
  border-radius: 12px;
  background: rgba(255, 245, 230, 0.03);
  box-shadow: 0 0 0 1px var(--line-2) inset;
}
.memory-steer__ph {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
  color: var(--ink-3);
}
.memory-steer__stop {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 8px 0 10px;
  border-radius: 9px;
  font-size: 0.72rem;
  color: var(--ink-2);
  background: rgba(255, 245, 230, 0.05);
  box-shadow: 0 0 0 1px var(--line-2) inset;
}
.memory-steer__sq {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--ink-2);
}
.memory-steer__stop kbd {
  padding: 0 5px;
  font-size: 0.62rem;
  color: var(--ink-3);
}
.memory-steer__queued {
  display: none;
}
.memory-steer__done {
  display: inline-flex;
  color: var(--live);
}

/* steer: the earlier frames */
.memory-ctl.is-armed:not(.is-adone) .memory-pill--a .memory-pill__spin,
.memory-ctl.is-armed.is-b:not(.is-bdone) .memory-pill--b .memory-pill__spin {
  display: block;
}
.memory-ctl.is-armed:not(.is-adone) .memory-pill--a .memory-pill__ok,
.memory-ctl.is-armed:not(.is-bdone) .memory-pill--b .memory-pill__ok,
.memory-ctl.is-armed:not(.is-adone) .memory-pill--a .memory-pill__res,
.memory-ctl.is-armed:not(.is-bdone) .memory-pill--b .memory-pill__res {
  display: none;
}
.memory-ctl.is-armed:not(.is-adone) .memory-pill--a .memory-pill__run,
.memory-ctl.is-armed:not(.is-bdone) .memory-pill--b .memory-pill__run {
  display: inline;
}
.memory-ctl.is-armed:not(.is-read) .memory-steer__note,
.memory-ctl.is-armed:not(.is-b) .memory-pill--b {
  opacity: 0;
  transform: translateY(6px);
}
.memory-ctl.is-armed:not(.is-sent) .memory-steer__done,
.memory-ctl.is-armed:not(.is-read) .memory-steer__done {
  display: none;
}
.memory-ctl.is-armed.is-sent:not(.is-read) .memory-steer__queued {
  display: inline-flex;
}

/* (b) permission */
.memory-perm {
  align-content: center;
  gap: 16px;
}
.memory-perm__term {
  display: grid;
  gap: 4px;
  padding: 13px 15px;
  border-radius: 12px;
  background: #050506;
  box-shadow: 0 0 0 1px var(--line) inset;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.6;
}
.memory-perm__call {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-3);
}
.memory-perm__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-ink);
  box-shadow: 0 0 10px rgba(245, 152, 42, 0.7);
}
.memory-perm__tool {
  font-weight: 600;
  color: var(--ink);
}
.memory-perm__ask {
  color: var(--ink);
  white-space: pre-wrap;
  transition: opacity 0.4s var(--ease);
}
.memory-perm__allow {
  color: var(--gold-ink);
}
.memory-perm__keys {
  color: var(--ink-3);
}
.memory-perm__caret {
  display: inline-block;
  width: 7px;
  height: 1.15em;
  margin-left: 4px;
  vertical-align: -0.22em;
  background: var(--gold);
  animation: blink 1.1s steps(1) infinite;
}
.memory-perm__modes {
  display: grid;
  gap: 2px;
}
.memory-perm__mode {
  display: grid;
  grid-template-columns: 6.6rem minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  transition: background-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.memory-perm__mode code {
  font-size: 0.76rem;
  color: var(--ink-2);
}
.memory-perm__mode span {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-3);
}
.memory-perm__mode + .memory-perm__mode {
  box-shadow: 0 -1px 0 var(--line);
}
.memory-perm__mode--on {
  background: rgba(245, 152, 42, 0.075);
  box-shadow: 0 0 0 1px rgba(245, 152, 42, 0.24) inset !important;
}
.memory-perm__mode--on + .memory-perm__mode {
  box-shadow: none;
}
.memory-perm__mode--on code {
  color: var(--gold);
}
.memory-perm__mode--on span {
  color: var(--ink-2);
}
.memory-perm__mode--hot code {
  color: var(--danger);
}
.memory-ctl.is-armed:not(.is-ask) .memory-perm__ask {
  opacity: 0;
}
.memory-ctl.is-armed:not(.is-modes) .memory-perm__mode--on {
  background: transparent;
  box-shadow: 0 0 0 1px transparent inset !important;
}

/* (c) checkpoints — one dot per turn, small file ticks for every snapshot.
   The rewind menu opens under turn #3, or beside it when the stage is wide. */
.memory-ckpt {
  container-type: inline-size;
}
.memory-ckpt__list {
  position: relative;
  display: grid;
  padding-bottom: 44px;
}
.memory-ckpt__list::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 14px;
  bottom: 30px;
  width: 1px;
  background: linear-gradient(180deg, var(--line-3), var(--line));
}
.memory-ckpt__row {
  position: relative;
  display: grid;
  grid-template-columns: 9px 2rem minmax(0, 1fr);
  align-items: center;
  gap: 4px 12px;
  padding: 6px 0 8px;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease-out);
}
.memory-ckpt__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(245, 152, 42, 0.14), 0 0 0 4px #070708;
  transition: background-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.memory-ckpt__id {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
}
.memory-ckpt__p {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8125rem;
  color: var(--ink-2);
  transition: color 0.5s var(--ease), text-decoration-color 0.5s var(--ease);
}
.memory-ckpt__files {
  grid-column: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--ink-3);
}
.memory-ckpt__files > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.memory-ckpt__files > span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--gold-ink);
  opacity: 0.75;
}
.memory-ckpt__row--3 .memory-ckpt__dot {
  background: var(--gold-hi);
  box-shadow: 0 0 0 4px rgba(250, 211, 139, 0.22), 0 0 14px rgba(255, 210, 122, 0.7);
}
.memory-ckpt__row--4 .memory-ckpt__p,
.memory-ckpt__row--5 .memory-ckpt__p {
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 236, 210, 0.35);
}
.memory-ckpt__row--4 .memory-ckpt__files > span::before,
.memory-ckpt__row--5 .memory-ckpt__files > span::before {
  background: var(--ink-4);
}
.memory-ckpt__row--4 .memory-ckpt__dot,
.memory-ckpt__row--5 .memory-ckpt__dot {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--ink-3), 0 0 0 4px #070708;
}
.memory-ckpt__menu {
  position: absolute;
  z-index: 2;
  right: 0;
  top: calc(100% - 2px);
  width: 214px;
  padding: 8px;
  border-radius: 14px;
  background: var(--raised);
  box-shadow: 0 0 0 1px var(--line-2) inset, 0 28px 56px -18px rgba(0, 0, 0, 0.95);
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease-out);
  transform-origin: 85% 0;
}
.memory-ckpt__mt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
}
.memory-ckpt__mt .memory-ico {
  color: var(--gold-ink);
}
.memory-ckpt__opts {
  display: grid;
  gap: 2px;
}
.memory-ckpt__opt {
  position: relative;
  padding: 7px 10px 7px 28px;
  border-radius: 9px;
  font-size: 0.78rem;
  color: var(--ink-3);
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
.memory-ckpt__opt::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -5px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--ink-4);
}
.memory-ckpt__opt--pick {
  color: var(--ink);
  background: rgba(245, 152, 42, 0.1);
}
.memory-ckpt__opt--pick::before {
  background: var(--gold);
  box-shadow: inset 0 0 0 2px var(--raised), 0 0 0 1px var(--gold);
}
@container (min-width: 480px) {
  .memory-ckpt__list {
    padding-bottom: 0;
  }
  .memory-ckpt__menu {
    top: -2px;
  }
}

/* checkpoints: the earlier frames */
.memory-ctl.is-armed:not(.is-r1) .memory-ckpt__row--1,
.memory-ctl.is-armed:not(.is-r2) .memory-ckpt__row--2,
.memory-ctl.is-armed:not(.is-r3) .memory-ckpt__row--3,
.memory-ctl.is-armed:not(.is-r4) .memory-ckpt__row--4,
.memory-ctl.is-armed:not(.is-r5) .memory-ckpt__row--5 {
  opacity: 0;
  transform: translateY(6px);
}
.memory-ctl.is-armed:not(.is-pick) .memory-ckpt__p {
  color: var(--ink-2);
  text-decoration-color: transparent;
}
.memory-ctl.is-armed:not(.is-pick) .memory-ckpt__files > span::before {
  background: var(--gold-ink);
}
.memory-ctl.is-armed:not(.is-pick) .memory-ckpt__dot {
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(245, 152, 42, 0.14), 0 0 0 4px #070708;
}
.memory-ctl.is-armed:not(.is-menu) .memory-ckpt__menu {
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
}
.memory-ctl.is-armed:not(.is-pick) .memory-ckpt__opt--pick {
  color: var(--ink-3);
  background: transparent;
}
.memory-ctl.is-armed:not(.is-pick) .memory-ckpt__opt--pick::before {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--ink-4);
}

/* (d) budget — a terminal: two limits, a lock, the audit trail. */
.memory-bd {
  gap: 2px;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.65;
}
.memory-bd > * {
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease-out);
}
.memory-bd__cmd {
  color: var(--ink);
}
.memory-bd__ps {
  margin-right: 8px;
  color: var(--gold-ink);
}
.memory-bd__meters {
  display: grid;
  gap: 6px;
  margin: 8px 0 12px 16px;
}
.memory-bd__m {
  display: grid;
  grid-template-columns: 5.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  color: var(--ink-3);
}
.memory-bd__line {
  position: relative;
  height: 3px;
  background: linear-gradient(var(--line-3), var(--line-3)) center / 100% 1px no-repeat;
}
.memory-bd__line::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-1), var(--orange));
  box-shadow: 0 0 10px rgba(245, 152, 42, 0.5);
  transform-origin: 0 50%;
  transform: scaleX(var(--f));
  /* ease-out cubic, the same curve memory.js counts the numbers on */
  transition: transform 1.9s cubic-bezier(0.33, 1, 0.68, 1);
}
.memory-bd__v {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink-3);
}
.memory-bd__v b {
  font-weight: 500;
  color: var(--ink);
}
.memory-bd__ok {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 0 16px;
  color: var(--live);
}
.memory-bd__ok .memory-ico {
  width: 13px;
  height: 13px;
}
.memory-bd__audit {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line-2);
}
.memory-bd__ah {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 12px;
  margin-bottom: 4px;
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.memory-bd__tools {
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink-3);
}
.memory-bd__row {
  display: grid;
  grid-template-columns: 4.9rem 6.4rem minmax(0, 1fr);
  gap: 10px;
  color: var(--ink-3);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease-out);
}
.memory-bd__t {
  color: var(--ink-3);
}
.memory-bd__tool {
  color: var(--gold-ink);
}
.memory-bd__arg {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* budget: the earlier frames */
.memory-ctl.is-armed:not(.is-c1) .memory-bd__cmd--1,
.memory-ctl.is-armed:not(.is-c2) .memory-bd__cmd--2,
.memory-ctl.is-armed:not(.is-meter) .memory-bd__meters,
.memory-ctl.is-armed:not(.is-iso) .memory-bd__cmd--3,
.memory-ctl.is-armed:not(.is-isook) .memory-bd__ok,
.memory-ctl.is-armed:not(.is-a1) .memory-bd__audit,
.memory-ctl.is-armed:not(.is-a1) .memory-bd__row--1,
.memory-ctl.is-armed:not(.is-a2) .memory-bd__row--2,
.memory-ctl.is-armed:not(.is-a3) .memory-bd__row--3 {
  opacity: 0;
  transform: translateY(4px);
}
.memory-ctl.is-armed:not(.is-meter) .memory-bd__line::before {
  transform: scaleX(0);
}

/* --------------------------------------------------------- responsive -- */

@media (max-width: 1100px) {
  .memory-ctx__body {
    grid-template-columns: 150px minmax(0, 1fr);
  }
  .memory-ctx__dial {
    width: 140px;
  }
  .memory-ctx__legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .memory__mem {
    grid-template-columns: 1fr;
  }
  .memory__mem-copy {
    max-width: 40rem;
  }
}

@media (max-width: 860px) {
  .memory__mhead {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .memory__mlede {
    justify-self: start;
  }
  .memory__notes {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .memory__grid {
    grid-template-columns: 1fr;
  }
  .memory-ctx__steps {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 22px;
  }
  .memory-st {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 0 0 26px;
    gap: 3px;
  }
  .memory-st::after {
    top: 4px;
  }
  .memory-st::before {
    top: 18px;
    bottom: -16px;
    left: 4px;
    right: auto;
    width: 1px;
    height: auto;
  }
}

@media (max-width: 640px) {
  .memory-ctx {
    padding: 16px;
  }
  .memory-ctx__top {
    padding-bottom: 14px;
  }
  .memory-ctx__tools {
    gap: 8px;
  }
  .memory-ctx__body {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 20px 0 18px;
  }
  .memory-ctx__clock {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    gap: 18px;
  }
  .memory-ctx__dial {
    width: 112px;
  }
  .memory-ctx__time {
    font-size: 1.28rem;
  }
  .memory-ctx__state {
    font-size: 0.58rem;
  }
  .memory-ctx__cap {
    justify-items: start;
    font-size: 0.875rem;
  }
  .memory-ctx__track {
    height: 46px;
    border-radius: 10px;
  }
  .memory-ctx__ghost {
    font-size: 0.62rem;
  }
  .memory-ctx__ghost > span:first-child {
    display: none;
  }
  .memory-ctx__legend {
    gap: 14px 16px;
    margin-top: 18px;
  }
  .memory-lg__name {
    white-space: normal;
  }
  .memory-ctx__log {
    padding: 11px 13px 12px;
    font-size: 0.68rem;
  }
  .memory-recall {
    padding: 8px;
  }
  .memory-recall__turn {
    flex-wrap: wrap;
    padding: 8px 8px 12px;
    font-size: 0.75rem;
  }
  .memory-recall__q {
    flex-basis: calc(100% - 24px);
  }
  .memory-recall__n {
    margin-left: 20px;
  }
  .memory-recall__files {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .memory-file {
    gap: 8px;
    padding: 12px 14px 14px;
  }
  .memory-file__fm {
    padding: 7px 10px;
    line-height: 1.5;
  }
  .memory-ctl__stage {
    min-height: 0;
    margin: 8px 8px 0;
    padding: 16px;
  }
  .memory-ctl__copy {
    padding: 18px 18px 22px;
  }
  .memory-perm__mode {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .memory-ckpt__menu {
    width: 196px;
  }
  .memory-bd__meters {
    margin-left: 14px;
  }
  .memory-bd__m {
    grid-template-columns: 4.7rem minmax(0, 1fr) auto;
    gap: 10px;
  }
  .memory-bd__row {
    grid-template-columns: 4.4rem 5.6rem minmax(0, 1fr);
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .memory-perm__caret {
    animation: none;
  }
}
/* @end memory */

/* @section everywhere */
/* ----------------------------------------------------------- everywhere -- */
/* Where Dulus lives and how it grows: a 12-column bento of small product
   vignettes drawn in HTML/CSS. All nine share one kit (12px window radius,
   warm hairlines, JetBrains Mono at 10–12px, one window shadow) so very
   different surfaces read as one family. Each vignette adapts to its own
   width with container queries, so a card looks right in any grid cell.

   Motion is CSS only. Every loop has a resting frame that reads on its own:
   reduced motion shows it, and under html.js a card's loops stay paused
   until everywhere.js marks the card .is-live (on screen, tab visible). */

.everywhere {
  --ev-r: 12px;
  --ev-line: rgba(255, 236, 210, 0.09);
  --ev-line-2: rgba(255, 236, 210, 0.15);
  --ev-shadow: 0 0 0 1px var(--ev-line), 0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 34px 70px -34px rgba(0, 0, 0, 0.95), 0 16px 32px -20px rgba(0, 0, 0, 0.75);
  --ev-mono: 12px;
  /* the CLI's own accent and its banner gradient */
  --ev-cli-orange: #ff8700;
  --ev-cli-gold: #ffc832;
  position: relative;
  isolation: isolate;
}
.everywhere__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 28% at 22% 30%, rgba(245, 152, 42, 0.07), transparent 70%),
    radial-gradient(36% 26% at 82% 78%, rgba(250, 211, 139, 0.05), transparent 70%);
}

/* ------------------------------------------------------- head & grid -- */

.everywhere__head {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: end;
  gap: 24px clamp(32px, 6vw, 110px);
  margin-bottom: clamp(40px, 5vw, 68px);
}
.everywhere__headline {
  display: grid;
  justify-items: start;
  gap: 22px;
}
.everywhere__headline .h2 {
  max-width: 13ch;
}
.everywhere__lede {
  justify-self: end;
  max-width: 30rem;
  padding-bottom: 6px;
}

.everywhere__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}
.everywhere__card {
  --stage-h: 330px;
  display: flex;
  flex-direction: column;
  grid-column: span 6;
}
.everywhere__card--cli { grid-column: span 7; --stage-h: 446px; }
.everywhere__card--app { grid-column: span 5; --stage-h: 446px; }
.everywhere__card--phone { grid-column: span 3; --stage-h: 356px; }
.everywhere__card--tg { grid-column: span 5; --stage-h: 356px; }
.everywhere__card--voice { grid-column: span 4; --stage-h: 356px; }
.everywhere__card--pet { grid-column: span 5; --stage-h: 316px; }
.everywhere__card--ext { grid-column: span 7; --stage-h: 316px; }
.everywhere__card--os { grid-column: span 7; --stage-h: 330px; }
.everywhere__card--json { grid-column: span 5; --stage-h: 330px; }

/* --------------------------------------------------------------- card -- */
/* The vignette sits on top; the words come first in the DOM so a screen
   reader meets the heading before the (hidden) picture. */

.everywhere__stage {
  order: -1;
  position: relative;
  height: var(--stage-h);
  overflow: hidden;
  container-type: inline-size;
}
.everywhere__stage::before {
  /* a faint dot field and a warm floor: the surface the vignette rests on */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 70% at 50% 108%, rgba(245, 152, 42, 0.075), transparent 72%),
    radial-gradient(rgba(255, 236, 210, 0.07) 1px, transparent 1.4px) 0 0 / 18px 18px;
  -webkit-mask: radial-gradient(90% 90% at 50% 40%, #000 30%, transparent 85%);
  mask: radial-gradient(90% 90% at 50% 40%, #000 30%, transparent 85%);
}
.everywhere__stage > * {
  transition: transform 700ms var(--ease-out);
}
.everywhere__card:hover .everywhere__stage > * {
  transform: translateY(-5px);
}

.everywhere__text {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 6px clamp(22px, 2.2vw, 30px) clamp(22px, 2.2vw, 28px);
}
.everywhere__title {
  font-size: 1.24rem;
  line-height: 1.15;
  letter-spacing: -0.028em;
}
.everywhere__copy {
  max-width: 46ch;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-3);
}
.everywhere__copy code {
  padding: 0.1em 0.42em;
  border-radius: 6px;
  font-size: 0.84em;
  color: var(--gold);
  background: rgba(245, 152, 42, 0.08);
  box-shadow: 0 0 0 1px rgba(245, 152, 42, 0.2) inset;
  white-space: nowrap;
}
.everywhere__os {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.everywhere__os li {
  padding: 4px 9px;
  border-radius: var(--pill);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  box-shadow: 0 0 0 1px var(--line-2) inset;
}
.everywhere__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.everywhere__meta .ico {
  width: 15px;
  height: 15px;
}

.everywhere__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 22px;
  margin-top: 28px;
  font-size: var(--fs-sm);
  color: var(--ink-3);
  text-align: center;
}

/* --------------------------------------------------------- shared kit -- */

.everywhere-lights {
  display: inline-flex;
  gap: 6px;
  flex: none;
}
.everywhere-lights i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 236, 210, 0.12);
  box-shadow: 0 0 0 1px rgba(255, 236, 210, 0.05) inset;
}

/* ✓ is not in the site's mono subset, so the check is drawn, one character
   cell wide, so terminal columns still line up. */
.everywhere-ck {
  position: relative;
  display: inline-block;
  width: 0.6em;
  height: 1em;
  vertical-align: -0.16em;
  color: var(--live);
}
.everywhere-ck::before {
  content: "";
  position: absolute;
  left: 0.2em;
  top: 0.1em;
  width: 0.24em;
  height: 0.52em;
  border: solid currentColor;
  border-width: 0 0.12em 0.12em 0;
  transform: rotate(45deg);
}

/* Terminals do not draw ligatures, and Geist's stylistic sets (on body)
   must not reach the mono face. */
.everywhere-term,
.everywhere-json,
.everywhere-tg,
.everywhere-ext,
.everywhere-app {
  font-feature-settings: normal;
  font-variant-ligatures: none;
}

/* ---------------------------------------------------------------- CLI -- */

.everywhere-term {
  position: absolute;
  top: 28px;
  left: 28px;
  right: 28px;
  border-radius: var(--ev-r);
  background: linear-gradient(180deg, #131211, #0b0a09 42px);
  box-shadow: var(--ev-shadow);
  overflow: hidden;
}
.everywhere-term__bar {
  position: relative;
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border-bottom: 1px solid var(--ev-line);
}
.everywhere-term__title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-4);
  white-space: nowrap;
}
.everywhere-term__panes {
  display: flex;
}
.everywhere-term__body,
.everywhere-term__job {
  padding: 15px 20px 20px;
  font-family: var(--mono);
  font-size: var(--ev-mono);
  line-height: 1.62;
  color: var(--ink);
  overflow: hidden;
}
.everywhere-term__body {
  flex: none;
  max-width: 100%;
}
/* white-space goes on the p itself: dulus.css gives every p text-wrap:
   pretty, which beats a value inherited from the container. */
.everywhere-term__body > p,
.everywhere-term__job > p {
  white-space: pre;
}
.everywhere-term__ps,
.everywhere-term__cwd,
.everywhere-term__dim {
  color: var(--ink-4);
}
/* The banner is JetBrains Mono's own block and double-line glyphs merged
   into one SVG path: set as text, every abutting cell shows an anti-aliased
   seam, which no terminal does. It is sized in em, one 0.6 × 1.32em cell
   per character, so it scales exactly like the text around it. */
.everywhere-term__banner {
  width: 25.8em;
  max-width: 100%;
  height: auto;
  margin: 8px 0 1px;
  overflow: visible;
  filter: drop-shadow(0 0 14px rgba(255, 135, 0, 0.32));
}
.everywhere-term__tagline {
  width: max-content;
  background: linear-gradient(90deg, var(--ev-cli-orange), var(--ev-cli-gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.everywhere-term__gap {
  margin-top: 0.9em;
}
.everywhere-term__ctx {
  color: var(--live);
  font-weight: 700;
}
.everywhere-term__ps2 {
  color: var(--ev-cli-orange);
  font-weight: 700;
}
.everywhere-term__out {
  color: var(--ink-2);
}
.everywhere-term__out b,
.everywhere-term__job b {
  font-weight: 700;
  color: var(--ink);
}
.everywhere-term__done {
  color: var(--live);
}
.everywhere-term__glyph {
  display: inline-block;
  color: var(--ev-cli-orange);
  font-weight: 700;
  animation: everywhere-throb 1.4s var(--ease-in-out) infinite;
}
.everywhere-term__phrase {
  background: linear-gradient(90deg, var(--ink-3) 0 38%, var(--gold-hi) 50%, var(--ink-3) 62% 100%) 100% 0 / 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: everywhere-shimmer 2.8s linear infinite;
}
/* A tmux split: the test run on the right, the status line under both.
   Drawn only when the window is wide enough to hold it. */
.everywhere-term__job,
.everywhere-term__tmux {
  display: none;
}
.everywhere-term__job {
  flex: 1;
  min-width: 0;
  color: var(--ink-3);
  box-shadow: 1px 0 0 var(--ev-line) inset;
}
.everywhere-term__pass {
  padding: 0 0.3em;
  border-radius: 2px;
  font-weight: 700;
  color: #04130c;
  background: #2fbf88;
}
.everywhere-term__cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.15em;
  vertical-align: -0.22em;
  background: var(--ink-3);
  animation: blink 1.1s steps(1) infinite;
}
.everywhere-term__tmux {
  justify-content: space-between;
  height: 22px;
  padding: 0 12px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 22px;
  color: var(--gold);
  background: rgba(255, 135, 0, 0.11);
  box-shadow: 0 1px 0 rgba(255, 135, 0, 0.16) inset;
  white-space: pre;
}
@container (max-width: 420px) {
  .everywhere-term__opt {
    display: none;
  }
}
@container (min-width: 640px) {
  .everywhere-term__job {
    display: block;
  }
  .everywhere-term__tmux {
    display: flex;
  }
  .everywhere-term__body {
    padding-right: 28px;
  }
}
@container (min-width: 640px) and (max-width: 759px) {
  .everywhere-term {
    --ev-mono: 11px;
  }
}

/* -------------------------------------------------------- desktop app -- */
/* The app in its own palette (zinc and amber), at about a third of its
   size: sidebar, chat with tool pills and a queued steer, and the WebDrive
   and Terminal panes. */

.everywhere-app {
  --z-950: #09090b;
  --z-925: #0e0e11;
  --z-900: #18181b;
  --z-800: #27272a;
  --amber: #fbbf24;
  --a-ink: #f8fafc;
  --a-mute: #a1a1aa;
  --a-green: #4ade80;
  position: absolute;
  top: 28px;
  left: 24px;
  right: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  border-radius: var(--ev-r);
  background: var(--z-950);
  box-shadow: var(--ev-shadow);
  overflow: hidden;
  font-family: var(--sans);
  color: var(--a-mute);
}
.everywhere-app .everywhere-ck {
  color: var(--a-green);
}
.everywhere-app .ico {
  width: 12px;
  height: 12px;
}
.everywhere-app__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding-left: 10px;
  flex: none;
  border-bottom: 1px solid var(--z-800);
  font-size: 11px;
  font-weight: 600;
  color: var(--a-ink);
}
.everywhere-app__bar img {
  width: 13px;
  height: auto;
}
.everywhere-app__caps {
  display: flex;
  height: 100%;
  margin-left: auto;
}
.everywhere-app__caps i {
  position: relative;
  width: 34px;
  height: 100%;
}
.everywhere-app__caps i::before,
.everywhere-app__caps i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
}
.everywhere-app__caps .is-min::before {
  width: 9px;
  height: 1px;
  margin-left: -4.5px;
  background: var(--a-mute);
}
.everywhere-app__caps .is-max::before {
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border: 1px solid var(--a-mute);
  border-radius: 1.5px;
}
.everywhere-app__caps .is-close::before,
.everywhere-app__caps .is-close::after {
  width: 11px;
  height: 1px;
  margin-left: -5.5px;
  background: var(--a-mute);
  transform: rotate(45deg);
}
.everywhere-app__caps .is-close::after {
  transform: rotate(-45deg);
}
.everywhere-app__body {
  display: flex;
  flex: 1;
  min-height: 0;
}
.everywhere-app__side {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 118px;
  flex: none;
  padding: 8px 0;
  border-right: 1px solid var(--z-800);
}
.everywhere-app__side > span {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 23px;
  margin: 0 6px;
  padding: 0 7px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 500;
  white-space: nowrap;
}
.everywhere-app__side > .is-active {
  color: var(--amber);
  background: rgba(251, 191, 36, 0.1);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.2) inset;
}
.everywhere-app__side > .everywhere-app__gauge {
  display: grid;
  gap: 5px;
  height: auto;
  margin-top: auto;
  padding: 8px 7px 2px;
  font-size: 9.5px;
}
.everywhere-app__gauge i {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--amber) 64%, var(--z-800) 0);
}
.everywhere-app__main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  background: var(--z-925);
}
.everywhere-app__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 28px;
  padding: 0 10px;
  flex: none;
  border-bottom: 1px solid var(--z-800);
  font-size: 10px;
  white-space: nowrap;
}
.everywhere-app__crumb {
  overflow: hidden;
  text-overflow: ellipsis;
}
.everywhere-app__model {
  padding: 2px 7px;
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--a-ink);
  background: var(--z-900);
  box-shadow: 0 0 0 1px var(--z-800) inset;
}
.everywhere-app__chat {
  /* scrolled to the newest step, like the app: older lines leave at the top */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 5px;
  flex: 1;
  min-height: 0;
  padding: 12px 10px 8px;
  overflow: hidden;
  -webkit-mask: linear-gradient(transparent, #000 16px);
  mask: linear-gradient(transparent, #000 16px);
}
.everywhere-app__chat > * {
  flex: none;
}
.everywhere-app__user {
  align-self: flex-end;
  max-width: 88%;
  padding: 6px 10px;
  border-radius: 11px 11px 3px 11px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--a-ink);
  background: var(--z-800);
}
.everywhere-app__who {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--amber);
}
.everywhere-app__think {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  color: #71717a;
}
.everywhere-app__chev {
  width: 5px;
  height: 5px;
  border: solid currentColor;
  border-width: 0 1.2px 1.2px 0;
  transform: rotate(-45deg);
}
.everywhere-app__reply {
  max-width: 100%;
  margin: 1px 0;
  font-size: 10.5px;
  line-height: 1.45;
  color: #e4e4e7;
}
.everywhere-app__pill {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  height: 24px;
  padding: 0 8px;
  border-radius: 7px;
  font-family: var(--mono);
  font-size: 9.5px;
  white-space: nowrap;
  background: var(--z-900);
  box-shadow: 0 0 0 1px var(--z-800) inset;
}
.everywhere-app__pill b {
  font-weight: 600;
  color: var(--a-ink);
}
.everywhere-app__pill span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.everywhere-app__pill em {
  margin-left: 6px;
  font-style: normal;
  color: var(--amber);
}
.everywhere-app__pill--done {
  opacity: 0.8;
}
.everywhere-app__spin,
.everywhere-app__steer-state i {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid rgba(251, 191, 36, 0.25);
  border-top-color: var(--amber);
  animation: spin 0.9s linear infinite;
}
.everywhere-app__steer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 10px 6px;
  padding: 6px 8px;
  border-radius: 9px;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--a-ink);
  background: rgba(251, 191, 36, 0.06);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.28) inset;
}
.everywhere-app__steer p {
  flex: 1;
  min-width: 0;
}
.everywhere-app__steer-icon {
  /* the chat-bubble glyph of the app's steer button */
  width: 14px;
  height: 14px;
  flex: none;
  border: 1.5px solid var(--amber);
  border-radius: 50% 50% 50% 2px;
}
.everywhere-app__steer-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--amber);
}
.everywhere-app__composer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 30px;
  margin: 0 10px 10px;
  padding: 0 5px 0 10px;
  flex: none;
  border-radius: 9px;
  font-size: 9.5px;
  color: #71717a;
  white-space: nowrap;
  background: var(--z-950);
  box-shadow: 0 0 0 1px var(--z-800) inset;
}
.everywhere-app__composer > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}
.everywhere-app__stop {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 600;
  color: #f87171;
  background: rgba(248, 113, 113, 0.1);
}
.everywhere-app__stop i {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: currentColor;
}
.everywhere-app__panes {
  display: grid;
  grid-template-rows: 1fr 1fr;
  width: 30%;
  max-width: 170px;
  flex: none;
  border-left: 1px solid var(--z-800);
}
.everywhere-app__pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.everywhere-app__pane + .everywhere-app__pane {
  border-top: 1px solid var(--z-800);
}
.everywhere-app__pane-head {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  flex: none;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--a-ink);
}
.everywhere-app__pane-head .ico {
  width: 11px;
  height: 11px;
  color: var(--amber);
}
.everywhere-app__web {
  position: relative;
  flex: 1;
  margin: 0 8px 8px;
  border: 1px solid var(--z-800);
  border-radius: 6px;
  background: #1c1c20;
  overflow: hidden;
}
.everywhere-app__url {
  display: block;
  padding: 4px 7px;
  border-bottom: 1px solid var(--z-800);
  font-family: var(--mono);
  font-size: 8px;
  color: var(--a-mute);
  background: var(--z-900);
  white-space: nowrap;
}
.everywhere-app__form {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
}
.everywhere-app__form::before {
  /* the page heading */
  content: "";
  width: 42%;
  height: 6px;
  margin-bottom: 3px;
  border-radius: 3px;
  background: #3f3f46;
}
.everywhere-app__form i,
.everywhere-app__form b {
  height: 10px;
  border-radius: 3px;
  background: var(--z-950);
  box-shadow: 0 0 0 1px #3f3f46 inset;
}
.everywhere-app__form b {
  width: 55%;
  margin-top: 2px;
  background: var(--amber);
  box-shadow: none;
}
.everywhere-app__pointer {
  /* the browser's cursor, driven by the agent: field, field, click */
  position: absolute;
  left: 0;
  top: 0;
  width: 9px;
  height: 13px;
  background: #fafafa;
  clip-path: polygon(0 0, 0 100%, 30% 76%, 50% 100%, 64% 93%, 45% 69%, 86% 69%);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.9));
  transform: translate(48px, 76px);
  animation: everywhere-pointer 7s var(--ease-in-out) infinite;
}
.everywhere-app__tty {
  flex: 1;
  padding: 2px 9px 8px;
  font-family: var(--mono);
  font-size: 8.5px;
  line-height: 1.6;
  color: var(--a-mute);
}
.everywhere-app__tty > p {
  white-space: nowrap;
}
.everywhere-app__pass {
  padding: 0 3px;
  border-radius: 2px;
  font-weight: 700;
  color: #052e16;
  background: var(--a-green);
}
.everywhere-app__cursor i {
  display: inline-block;
  width: 5px;
  height: 10px;
  vertical-align: -1px;
  background: var(--a-mute);
  animation: blink 1.1s steps(1) infinite;
}
/* A narrow window folds the sidebar to icons, as the app's does. */
@container (max-width: 470px) {
  .everywhere-app__side {
    width: 38px;
  }
  .everywhere-app__side > span {
    justify-content: center;
    padding: 0;
  }
  .everywhere-app__side > span > span,
  .everywhere-app__side > .everywhere-app__gauge {
    display: none;
  }
}
@container (max-width: 330px) {
  .everywhere-app__panes {
    display: none;
  }
}

/* -------------------------------------------------------------- phone -- */
/* WebChat in a phone's browser, at the computer's LAN address. The phone
   runs off the bottom of the card. */

.everywhere-phone {
  --phone-top: 26px;
  --phone-h: 392px;
  position: absolute;
  top: var(--phone-top);
  left: 50%;
  width: 204px;
  height: var(--phone-h);
  margin-left: -102px;
  padding: 7px;
  border-radius: 38px;
  background: linear-gradient(155deg, #34302b, #141210 38%, #1f1c19 80%, #2b2723);
  box-shadow: 0 0 0 1px rgba(255, 236, 210, 0.13), 0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 40px 80px -30px rgba(0, 0, 0, 0.95), 0 0 60px -20px rgba(245, 152, 42, 0.18);
}
.everywhere-phone__screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 31px;
  background: #07070a;
  overflow: hidden;
}
.everywhere-phone__status {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  padding: 0 18px 0 22px;
  flex: none;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink);
}
.everywhere-phone__island {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 62px;
  height: 18px;
  margin-left: -31px;
  border-radius: 10px;
  background: #000;
}
.everywhere-phone__icons {
  display: flex;
  align-items: flex-end;
  gap: 1.5px;
  height: 9px;
}
.everywhere-phone__icons i {
  width: 2.5px;
  border-radius: 1px;
  background: var(--ink);
}
.everywhere-phone__icons i:nth-child(1) { height: 4px; }
.everywhere-phone__icons i:nth-child(2) { height: 6px; }
.everywhere-phone__icons i:nth-child(3) { height: 8.5px; }
.everywhere-phone__icons b {
  width: 17px;
  height: 8.5px;
  margin-left: 4px;
  border-radius: 2.5px;
  background: linear-gradient(90deg, var(--ink) 72%, transparent 0) 1.5px 1.5px / calc(100% - 3px) calc(100% - 3px) no-repeat;
  box-shadow: 0 0 0 1px rgba(245, 245, 247, 0.5) inset;
}
.everywhere-phone__url {
  display: grid;
  place-items: center;
  height: 22px;
  margin: 2px 12px 0;
  flex: none;
  border-radius: 8px;
  font-size: 9.5px;
  font-weight: 500;
  color: var(--ink-2);
  background: #16161a;
}
.everywhere-phone__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  flex: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.everywhere-phone__mark {
  font-family: var(--display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink);
}
.everywhere-phone__badge {
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 8px;
  color: #ffb347;
  background: rgba(255, 107, 31, 0.12);
  box-shadow: 0 0 0 1px rgba(255, 107, 31, 0.3) inset;
}
.everywhere-phone__msgs {
  /* a chat sits on its composer: the newest message is the lowest */
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  gap: 7px;
  min-height: 0;
  padding: 14px 11px 10px;
}
.everywhere-phone__me,
.everywhere-phone__bot {
  max-width: 84%;
  padding: 7px 10px;
  font-size: 11px;
  line-height: 1.4;
}
.everywhere-phone__me {
  align-self: flex-end;
  border-radius: 13px 13px 4px 13px;
  color: #fff4ea;
  background: linear-gradient(180deg, #e8742a, #c95a1c);
}
.everywhere-phone__bot {
  align-self: flex-start;
  border-radius: 13px 13px 13px 4px;
  color: #f0e8df;
  background: #17171c;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}
.everywhere-phone__typing {
  display: inline-flex;
  align-self: flex-start;
  gap: 3px;
  padding: 8px 10px;
  border-radius: 13px 13px 13px 4px;
  background: #17171c;
}
.everywhere-phone__typing i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #8a8490;
  animation: everywhere-dot 1.2s var(--ease-in-out) infinite;
}
.everywhere-phone__typing i:nth-child(2) { animation-delay: 0.15s; }
.everywhere-phone__typing i:nth-child(3) { animation-delay: 0.3s; }
.everywhere-phone__composer {
  /* just above the card's edge, wherever the stage height puts it */
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  margin: 2px 10px calc(var(--phone-top) + var(--phone-h) + 7px - var(--stage-h));
  padding: 0 4px 0 12px;
  flex: none;
  border-radius: 15px;
  font-size: 10px;
  color: #6a6470;
  background: #111115;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07) inset;
}
.everywhere-phone__composer i {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ff6b1f;
}
.everywhere-phone__composer i::before {
  /* an up arrow */
  content: "";
  position: absolute;
  left: 50%;
  top: 7px;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border: solid #1d0d02;
  border-width: 1.6px 0 0 1.6px;
  transform: rotate(45deg);
}

/* ----------------------------------------------------------- telegram -- */

.everywhere-tg {
  position: absolute;
  top: 26px;
  left: 26px;
  right: 26px;
  border-radius: var(--ev-r);
  background: #0f161e;
  box-shadow: var(--ev-shadow);
  overflow: hidden;
}
.everywhere-tg__head {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 14px;
  background: #16202a;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.everywhere-tg__head img {
  width: 30px;
  height: 30px;
  padding: 3px 4px 0;
  border-radius: 50%;
  object-fit: contain;
  object-position: 50% 0;
  background: radial-gradient(circle at 50% 30%, #3b2614, #1b130c);
}
.everywhere-tg__name {
  display: grid;
  line-height: 1.2;
}
.everywhere-tg__name b {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}
.everywhere-tg__name small {
  font-size: 10.5px;
  color: #7d8c9b;
}
.everywhere-tg__logo {
  width: 17px;
  height: 17px;
  margin-left: auto;
  color: var(--sky);
}
.everywhere-tg__msgs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 14px 18px;
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(108, 184, 255, 0.05), transparent 70%),
    radial-gradient(60% 50% at 0% 100%, rgba(245, 152, 42, 0.04), transparent 70%);
}
.everywhere-tg__msg {
  max-width: 82%;
  padding: 6px 10px 7px;
  border-radius: 13px;
  font-size: 11.5px;
  line-height: 1.42;
  color: #eef2f6;
}
.everywhere-tg__msg--in {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  background: #182430;
}
.everywhere-tg__msg--out {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  background: #284c70;
}
.everywhere-tg__msg--short {
  padding-inline: 14px;
  font-weight: 600;
}
.everywhere-tg__label {
  color: #8cc2f0;
}
.everywhere-tg__mono {
  font-family: var(--mono);
  font-size: 10px;
  color: #c3d6e8;
  white-space: pre;
}
.everywhere-tg__voice {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px 7px 7px;
}
.everywhere-tg__play {
  position: relative;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: #4f8fca;
}
.everywhere-tg__play::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 8.5px;
  border-style: solid;
  border-width: 5.5px 0 5.5px 8.5px;
  border-color: transparent transparent transparent #fff;
}
.everywhere-tg__wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 20px;
}
.everywhere-tg__wave i {
  width: 2px;
  height: calc(var(--h) * 18px + 2px);
  border-radius: 1px;
  background: rgba(225, 238, 250, 0.45);
}
.everywhere-tg__wave i:nth-child(-n + 9) {
  background: #e6f1fb;
}
.everywhere-tg__time {
  font-size: 10px;
  color: #a9c4dd;
}

/* -------------------------------------------------------------- voice -- */
/* Astral Voice speaks (gold), you cut in (ink) and it listens: one ten
   second loop. The resting frame is the interruption. */

.everywhere-voice {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  padding: 18px 20px 22px;
  color: var(--ink-2);
  animation: everywhere-voice-ink 10s var(--ease-in-out) infinite;
}
.everywhere-voice__state {
  display: grid;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--gold-ink);
}
.everywhere-voice__state > span {
  grid-area: 1 / 1;
  justify-self: center;
}
.everywhere-voice__speak {
  opacity: 0;
  animation: everywhere-voice-speak 10s var(--ease-in-out) infinite;
}
.everywhere-voice__listen {
  color: var(--ink);
  animation: everywhere-voice-listen 10s var(--ease-in-out) infinite;
}
.everywhere-voice__orb {
  position: relative;
  display: grid;
  place-items: center;
  width: 230px;
  height: 168px;
}
.everywhere-voice__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 152, 42, 0.16), rgba(245, 152, 42, 0.02) 62%, transparent 70%);
  box-shadow: 0 0 0 1px rgba(250, 211, 139, 0.16) inset;
  animation: everywhere-breathe 5s var(--ease-in-out) infinite;
}
.everywhere-voice__ring--2 {
  width: 166px;
  height: 166px;
  margin: -83px 0 0 -83px;
  background: none;
  box-shadow: 0 0 0 1px rgba(250, 211, 139, 0.08) inset;
  animation-delay: -2.5s;
}
.everywhere-voice__wave {
  position: relative;
  display: flex;
  align-items: center;
  gap: 3px;
  height: 70px;
}
.everywhere-voice__wave i {
  width: 3px;
  height: calc(var(--h) * 66px + 4px);
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 0 10px -2px currentColor;
  transform: scaleY(0.6);
  animation: everywhere-bar 0.9s var(--ease-in-out) infinite alternate;
  animation-delay: calc(var(--i) * -0.137s);
}
.everywhere-voice__line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--ink-2);
  animation: everywhere-voice-line 10s var(--ease-in-out) infinite;
}
.everywhere-voice__who {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.everywhere-voice__cli {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 2px;
}
.everywhere-voice__cli span {
  padding: 3px 8px;
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  background: rgba(255, 245, 230, 0.03);
  box-shadow: 0 0 0 1px var(--ev-line-2) inset;
}

/* ---------------------------------------------------------------- pet -- */
/* The pet on a desktop; its sub-agent crew stacks up the right edge, as the
   real crew windows do (name, current step and seconds, a live track). */

.everywhere-pet {
  position: absolute;
  inset: 0;
}
.everywhere-pet__main {
  position: absolute;
  left: 9%;
  bottom: 66px;
  width: 128px;
}
.everywhere-pet__img {
  position: relative;
  z-index: 1;
  width: 128px;
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.55));
  animation: everywhere-bob 3.6s var(--ease-in-out) infinite;
}
.everywhere-pet__shadow {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -10px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), transparent);
  animation: everywhere-shadow 3.6s var(--ease-in-out) infinite;
}
.everywhere-pet__bubble {
  position: absolute;
  z-index: 2;
  left: 104px;
  top: -12px;
  padding: 6px 12px 7px;
  border-radius: 14px 14px 14px 4px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: #1a1206;
  background: var(--gold-hi);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.8);
  animation: everywhere-bob 3.6s var(--ease-in-out) -0.25s infinite;
}
.everywhere-pet__crew {
  position: absolute;
  right: 18px;
  bottom: 60px;
  display: grid;
  gap: 8px;
}
.everywhere-pet__crew li {
  --st: var(--gold);
  display: flex;
  align-items: center;
  gap: 9px;
  width: 168px;
  padding: 7px 11px 7px 7px;
  border-radius: 12px;
  background: rgba(9, 9, 8, 0.88);
  box-shadow: 0 0 0 1px var(--ev-line-2) inset, 0 14px 28px -16px rgba(0, 0, 0, 0.9);
}
.everywhere-pet__crew .is-done {
  --st: #4ade80;
}
.everywhere-pet__crew img {
  width: 30px;
  height: auto;
  flex: none;
}
.everywhere-pet__crew .is-running img {
  animation: everywhere-bob-sm 1.7s var(--ease-in-out) infinite;
}
.everywhere-pet__crew .is-running:nth-child(2) img {
  animation-delay: -0.6s;
}
.everywhere-pet__info {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
  font-family: var(--mono);
}
.everywhere-pet__info b {
  font-size: 10.5px;
  color: var(--gold);
}
.everywhere-pet__info small {
  font-size: 9.5px;
  color: var(--st);
}
.everywhere-pet__info i {
  position: relative;
  height: 3px;
  margin-top: 3px;
  border-radius: 2px;
  background: #1f2937;
  overflow: hidden;
}
.everywhere-pet__info i::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 28%;
  border-radius: inherit;
  background: var(--st);
  animation: everywhere-slide 2.2s var(--ease-in-out) infinite alternate;
}
.everywhere-pet__crew li:nth-child(2) .everywhere-pet__info i::before {
  animation-delay: -1.1s;
}
.everywhere-pet__crew .is-done .everywhere-pet__info i::before {
  width: 100%;
  animation: none;
}
.everywhere-pet__taskbar {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 30px;
  border-radius: 10px;
  background: rgba(16, 15, 14, 0.92);
  box-shadow: 0 0 0 1px var(--ev-line) inset, 0 12px 24px -14px rgba(0, 0, 0, 0.9);
}
.everywhere-pet__taskbar i {
  position: relative;
  width: 17px;
  height: 17px;
  border-radius: 5px;
  background: rgba(255, 245, 230, 0.08);
  box-shadow: 0 0 0 1px rgba(255, 236, 210, 0.07) inset;
}
.everywhere-pet__taskbar .is-on {
  background: linear-gradient(180deg, rgba(250, 211, 139, 0.4), rgba(245, 152, 42, 0.2));
}
.everywhere-pet__taskbar .is-on::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 6px;
  height: 2px;
  margin-left: -3px;
  border-radius: 1px;
  background: var(--gold);
}
/* A half-width or phone card: a smaller pet, a narrower crew. */
@container (max-width: 440px) {
  .everywhere-pet__main,
  .everywhere-pet__img {
    width: 96px;
  }
  .everywhere-pet__main {
    left: 6%;
  }
  .everywhere-pet__bubble {
    left: 72px;
    top: -18px;
  }
  .everywhere-pet__crew {
    right: 12px;
  }
  .everywhere-pet__crew li {
    width: 148px;
  }
}

/* --------------------------------------------------------- extensions -- */
/* Three market cards, the front one with its install and the security
   review the app offers first; the CLI commands beside them. */

.everywhere-ext {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: center;
  gap: 26px;
  padding: 0 30px 0 28px;
}
.everywhere-ext__deck {
  position: relative;
  height: 262px;
}
.everywhere-ext__card {
  position: absolute;
  left: 0;
  width: min(100%, 330px);
  padding: 11px 13px;
  border-radius: var(--ev-r);
  background: linear-gradient(180deg, #171615, #100f0e);
  box-shadow: var(--ev-shadow);
}
.everywhere-ext__card--3 {
  top: 0;
  opacity: 0.55;
}
.everywhere-ext__card--2 {
  top: 40px;
  margin-left: 18px;
  opacity: 0.8;
}
.everywhere-ext__card--1 {
  top: 80px;
  margin-left: 36px;
}
.everywhere-ext__row {
  display: flex;
  align-items: center;
  gap: 9px;
}
.everywhere-ext__row b {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.everywhere-ext__tile {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 7px;
  color: var(--gold);
  background: linear-gradient(180deg, rgba(250, 211, 139, 0.16), rgba(245, 152, 42, 0.05));
  box-shadow: 0 0 0 1px rgba(250, 211, 139, 0.22) inset;
}
.everywhere-ext__tile .ico {
  width: 13px;
  height: 13px;
}
.everywhere-ext__kind {
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: var(--gold-ink);
  box-shadow: 0 0 0 1px rgba(250, 211, 139, 0.25) inset;
}
.everywhere-ext__desc {
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ink-3);
}
.everywhere-ext__chips {
  display: flex;
  gap: 5px;
  margin-top: 8px;
}
.everywhere-ext__chips span {
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-3);
  background: rgba(255, 245, 230, 0.05);
}
.everywhere-ext__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--ev-line);
}
.everywhere-ext__state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--ink-4);
}
.everywhere-ext__state i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #64646e;
}
.everywhere-ext__install {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 600;
  color: #1d1003;
  background: var(--plumage);
  box-shadow: 0 6px 16px -8px rgba(245, 152, 42, 0.9), 0 1px 0 rgba(255, 255, 255, 0.45) inset;
}
.everywhere-ext__install .ico {
  width: 12px;
  height: 12px;
  stroke-width: 2;
}
.everywhere-ext__review {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  padding: 6px 8px;
  border-radius: 7px;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--gold);
  background: rgba(245, 152, 42, 0.07);
  box-shadow: 0 0 0 1px rgba(245, 152, 42, 0.22) inset;
}
.everywhere-ext__review .ico {
  width: 13px;
  height: 13px;
  flex: none;
}
.everywhere-ext__yes {
  margin-left: auto;
  padding: 2px 8px;
  flex: none;
  border-radius: 5px;
  font-weight: 600;
  color: var(--gold-hi);
  box-shadow: 0 0 0 1px rgba(250, 211, 139, 0.45) inset;
}
.everywhere-ext__cmds {
  display: grid;
  gap: 14px;
}
.everywhere-ext__cmds li {
  display: grid;
  gap: 3px;
}
.everywhere-ext__cmds code {
  font-size: 12px;
  color: var(--gold);
  white-space: nowrap;
}
.everywhere-ext__cmds code::before {
  content: "» ";
  color: var(--ev-cli-orange);
  font-weight: 700;
}
.everywhere-ext__cmds span {
  padding-left: 2ch;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-3);
}

/* ----------------------------------------------------------- Dulus OS -- */
/* A browser tab on /sandbox: the OS's own top panel, desktop icons, a chat
   window and a chess game over its default wallpaper, and the dock. */

.everywhere-os {
  position: absolute;
  top: 26px;
  left: 28px;
  right: 28px;
  border-radius: var(--ev-r);
  background: #151413;
  box-shadow: var(--ev-shadow);
  overflow: hidden;
}
.everywhere-os__chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}
.everywhere-os__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 12px 0 9px;
  flex: none;
  border-radius: 7px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-2);
  background: #0c0b0a;
  box-shadow: 0 0 0 1px var(--ev-line) inset;
}
.everywhere-os__tab img {
  width: 11px;
  height: auto;
}
.everywhere-os__addr {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  height: 24px;
  padding: 0 10px;
  border-radius: 7px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  white-space: nowrap;
  background: #0c0b0a;
}
.everywhere-os__addr span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.everywhere-os__addr .ico {
  width: 11px;
  height: 11px;
  flex: none;
  color: var(--ink-4);
}
.everywhere-os__desk {
  position: relative;
  height: 236px;
  background:
    radial-gradient(70% 60% at 82% 112%, rgba(245, 152, 42, 0.16), transparent 70%),
    linear-gradient(160deg, #1b1c20 0%, #101114 55%, #0b0b0d 100%);
  overflow: hidden;
}
/* Its default wallpaper: charcoal, crossed by orange ribbons of light. */
.everywhere-os__wall {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px rgba(245, 152, 42, 0.45));
}
.everywhere-os__wall path {
  stroke: rgba(245, 152, 42, 0.7);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.everywhere-os__wall .everywhere-os__thin {
  stroke: rgba(245, 152, 42, 0.3);
  stroke-width: 1;
}
.everywhere-os__wall .everywhere-os__plane {
  stroke: rgba(255, 255, 255, 0.045);
  stroke-width: 34;
}
.everywhere-os__panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 20px;
  padding: 0 10px;
  font-size: 9px;
  font-weight: 600;
  color: var(--ink-2);
  background: rgba(6, 6, 6, 0.55);
}
.everywhere-os__brand {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.everywhere-os__brand i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--live);
}
.everywhere-os__tray {
  display: inline-flex;
  gap: 4px;
}
.everywhere-os__tray i {
  width: 9px;
  height: 6px;
  border-radius: 1.5px;
  background: rgba(245, 245, 247, 0.5);
}
.everywhere-os__icons {
  position: absolute;
  left: 14px;
  top: 34px;
  display: grid;
  grid-template-columns: repeat(4, 56px);
  gap: 10px 4px;
}
.everywhere-os__icons li {
  display: grid;
  justify-items: center;
  gap: 4px;
  font-size: 8.5px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.everywhere-os__app {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  color: var(--ink);
  background: rgba(255, 245, 230, 0.08);
  box-shadow: 0 0 0 1px rgba(255, 236, 210, 0.12) inset, 0 6px 14px -8px rgba(0, 0, 0, 0.8);
}
.everywhere-os__app .ico {
  width: 16px;
  height: 16px;
}
.everywhere-os__app--sheet i {
  /* a grid, as the OS's own Spreadsheet icon */
  width: 16px;
  height: 14px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  background:
    linear-gradient(currentColor, currentColor) 0 3.5px / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 0 7.5px / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 50% 0 / 1.5px 100% no-repeat;
}
.everywhere-os__app--chess i,
.everywhere-os__dock-chess::before {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  background: conic-gradient(#efd9b0 25%, #9a6a41 0 50%, #efd9b0 0 75%, #9a6a41 0) 0 0 / 50% 50%;
}
.everywhere-os__chat,
.everywhere-os__win {
  position: absolute;
  border-radius: 9px;
  background: #121110;
  box-shadow: 0 0 0 1px var(--ev-line-2), 0 24px 40px -20px rgba(0, 0, 0, 0.95);
}
.everywhere-os__chat {
  left: 282px;
  top: 44px;
  width: 196px;
  padding-bottom: 8px;
  background: rgba(18, 17, 16, 0.94);
}
.everywhere-os__win {
  right: 18px;
  top: 30px;
  width: 166px;
  overflow: hidden;
}
.everywhere-os__win-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 22px;
  padding: 0 8px;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--ink-2);
}
.everywhere-os__win-caps {
  display: inline-flex;
  gap: 4px;
}
.everywhere-os__win-caps i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 236, 210, 0.16);
}
.everywhere-os__hosted {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 5px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: 0.04em;
  color: var(--gold-ink);
  box-shadow: 0 0 0 1px rgba(250, 211, 139, 0.3) inset;
}
.everywhere-os__hosted i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--live);
}
.everywhere-os__me,
.everywhere-os__bot,
.everywhere-os__ask {
  margin: 5px 8px 0;
  font-size: 8.5px;
  line-height: 1.4;
}
.everywhere-os__me {
  width: fit-content;
  margin-left: auto;
  padding: 4px 7px;
  border-radius: 8px 8px 2px 8px;
  color: #fff4ea;
  background: #c95a1c;
}
.everywhere-os__bot {
  padding: 5px 7px;
  border-radius: 8px 8px 8px 2px;
  color: var(--ink-2);
  background: rgba(255, 245, 230, 0.06);
}
.everywhere-os__ask {
  margin-top: 7px;
  padding: 4px 7px;
  border-radius: 6px;
  font-size: 8px;
  color: var(--ink-4);
  box-shadow: 0 0 0 1px var(--ev-line-2) inset;
}
.everywhere-os__board {
  position: relative;
  aspect-ratio: 1;
  margin: 0 8px 8px;
  border-radius: 3px;
  background: conic-gradient(#efd9b0 25%, #9a6a41 0 50%, #efd9b0 0 75%, #9a6a41 0) 0 0 / 25% 25%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.everywhere-os__piece {
  /* a pawn: base and head */
  position: absolute;
  width: 8%;
  height: 9%;
  border-radius: 40% 40% 12% 12% / 30% 30% 12% 12%;
  background: #fbf6ec;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.everywhere-os__piece::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -55%;
  width: 70%;
  height: 70%;
  margin-left: -35%;
  border-radius: 50%;
  background: inherit;
}
.everywhere-os__piece--a { left: 33.5%; top: 52%; }
.everywhere-os__piece--b { left: 58.5%; top: 39.5%; background: #1c1917; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); }
.everywhere-os__piece--c { left: 21%; top: 64.5%; }
.everywhere-os__dock {
  position: absolute;
  left: 50%;
  bottom: 9px;
  display: flex;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 12px;
  background: rgba(8, 8, 8, 0.6);
  box-shadow: 0 0 0 1px rgba(255, 236, 210, 0.1) inset;
  transform: translateX(-50%);
}
.everywhere-os__dock i {
  position: relative;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  color: var(--ink-2);
  background: rgba(255, 245, 230, 0.1);
}
.everywhere-os__dock .ico {
  width: 11px;
  height: 11px;
}
.everywhere-os__dock-chess::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 2px;
}
.everywhere-os__dock .is-on::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 3px;
  height: 3px;
  margin-left: -1.5px;
  border-radius: 50%;
  background: var(--gold);
}
/* Three windows' worth of room or less: the chat narrows, then leaves; on a
   phone only the first row of icons stays. */
@container (max-width: 720px) {
  .everywhere-os__chat {
    left: 266px;
    width: 170px;
  }
}
@container (max-width: 560px) {
  .everywhere-os__chat {
    display: none;
  }
}
@container (max-width: 420px) {
  .everywhere-os__icons {
    grid-template-columns: repeat(2, 52px);
  }
  .everywhere-os__icons li:nth-child(n + 5) {
    display: none;
  }
  .everywhere-os__win {
    right: 12px;
    width: 140px;
  }
}

/* ---------------------------------------------------------- scripting -- */

.everywhere-json {
  position: absolute;
  top: 26px;
  left: 26px;
  right: 26px;
  border-radius: var(--ev-r);
  background: linear-gradient(180deg, #121110, #0b0a09 40px);
  box-shadow: var(--ev-shadow);
  overflow: hidden;
}
.everywhere-json__label {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-bottom: 1px solid var(--ev-line);
}
.everywhere-json__label span {
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  box-shadow: 0 0 0 1px var(--ev-line-2) inset;
}
.everywhere-json__label span:first-child {
  color: var(--gold-ink);
  box-shadow: 0 0 0 1px rgba(250, 211, 139, 0.25) inset;
}
.everywhere-json__body {
  padding: 14px 18px 18px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.68;
  color: var(--ink-2);
}
.everywhere-json__body > p {
  /* long frames wrap under themselves, like a terminal with a hanging indent */
  padding-left: 2ch;
  text-indent: -2ch;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.everywhere-json__cmd {
  color: var(--ink);
}
.everywhere-json__cmd + p:not(.everywhere-json__cmd) {
  margin-top: 2px;
}
.everywhere-json__ps {
  color: var(--ink-4);
}
.everywhere-json__body .k { color: var(--ink-3); }
.everywhere-json__body .s { color: var(--gold); }
.everywhere-json__body .n { color: var(--sky); }
.everywhere-json__body .p { color: var(--ink-4); }
.everywhere-json__exit {
  color: var(--live);
}
.everywhere-json__cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.15em;
  vertical-align: -0.22em;
  background: var(--gold);
  animation: blink 1.1s steps(1) infinite;
}

/* ---------------------------------------------------------- keyframes -- */

@keyframes everywhere-throb {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.84); }
}
@keyframes everywhere-shimmer {
  to { background-position: 0 0; }
}
@keyframes everywhere-dot {
  0%, 60%, 100% { opacity: 0.4; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}
@keyframes everywhere-bar {
  from { transform: scaleY(0.28); }
  to { transform: scaleY(1); }
}
@keyframes everywhere-breathe {
  0%, 100% { transform: scale(0.96); opacity: 0.7; }
  50% { transform: scale(1.04); opacity: 1; }
}
@keyframes everywhere-voice-ink {
  0%, 54% { color: var(--gold); }
  60%, 93% { color: var(--ink-2); }
  100% { color: var(--gold); }
}
@keyframes everywhere-voice-speak {
  0%, 54% { opacity: 1; }
  58%, 96% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes everywhere-voice-listen {
  0%, 56% { opacity: 0; }
  60%, 93% { opacity: 1; }
  97%, 100% { opacity: 0; }
}
@keyframes everywhere-voice-line {
  0%, 56% { opacity: 0; transform: translateY(5px); }
  62%, 93% { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; transform: none; }
}
@keyframes everywhere-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes everywhere-bob-sm {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@keyframes everywhere-shadow {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  50% { transform: scaleX(0.8); opacity: 0.6; }
}
@keyframes everywhere-pointer {
  0%, 10% { transform: translate(104px, 46px); }
  26%, 40% { transform: translate(96px, 62px); }
  58%, 68% { transform: translate(48px, 76px); }
  71% { transform: translate(48px, 76px) scale(0.82); }
  75%, 92% { transform: translate(48px, 76px) scale(1); }
  100% { transform: translate(104px, 46px); }
}
@keyframes everywhere-slide {
  from { transform: translateX(-10%); }
  to { transform: translateX(270%); }
}

/* Loops run only while their card is on screen and the tab is visible. */
html.js .everywhere__card:not(.is-live) .everywhere__stage *,
html.js .everywhere__card:not(.is-live) .everywhere__stage *::before,
html.js .everywhere__card:not(.is-live) .everywhere__stage *::after {
  animation-play-state: paused;
}

/* ---------------------------------------------------------- responsive -- */

@media (max-width: 1099px) {
  .everywhere__head {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .everywhere__lede {
    justify-self: start;
  }
  .everywhere__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row dense;
  }
  .everywhere__card {
    grid-column: span 1;
  }
  .everywhere__card--cli,
  .everywhere__card--app,
  .everywhere__card--ext,
  .everywhere__card--os,
  .everywhere__card--json {
    grid-column: span 2;
  }
  .everywhere__card--app { --stage-h: 400px; }
  .everywhere__card--phone,
  .everywhere__card--tg,
  .everywhere__card--voice,
  .everywhere__card--pet { --stage-h: 340px; }
  .everywhere__card--json { --stage-h: 290px; }
}

@media (max-width: 699px) {
  .everywhere {
    --ev-mono: 10.5px;
  }
  .everywhere__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .everywhere__card,
  .everywhere__card--cli,
  .everywhere__card--app,
  .everywhere__card--ext,
  .everywhere__card--os,
  .everywhere__card--json {
    grid-column: auto;
  }
  .everywhere__card--cli { --stage-h: 384px; }
  .everywhere__card--app { --stage-h: 340px; }
  .everywhere__card--phone,
  .everywhere__card--tg { --stage-h: 330px; }
  .everywhere__card--voice { --stage-h: 316px; }
  .everywhere__card--pet { --stage-h: 290px; }
  .everywhere__card--ext { --stage-h: 520px; }
  .everywhere__card--os { --stage-h: 300px; }
  .everywhere__card--json { --stage-h: 352px; }
  .everywhere-term,
  .everywhere-tg,
  .everywhere-json,
  .everywhere-os {
    top: 18px;
    left: 16px;
    right: 16px;
  }
  .everywhere-app {
    top: 18px;
    left: 16px;
    right: 16px;
    bottom: 18px;
  }
  .everywhere-term__body {
    padding: 13px 14px 16px;
  }
  .everywhere-voice__orb {
    height: 150px;
  }
  .everywhere-ext {
    grid-template-columns: 1fr;
    align-content: start;
    gap: 20px;
    padding: 20px 18px 0;
  }
  .everywhere-ext__deck {
    height: 252px;
  }
  .everywhere-ext__card {
    width: calc(100% - 36px);
  }
  .everywhere-os__desk {
    height: 222px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .everywhere__stage *,
  .everywhere__stage *::before,
  .everywhere__stage *::after {
    animation: none !important;
  }
}
/* @end everywhere */

/* @section story */
/* ---------------------------------------------------------------- story -- */
/* Why a bird. The palmchat is hung like a museum plate — a double hairline
   frame, a dark sheet with a faint warm vignette, the plate inscriptions and
   a numbered caption — beside the reason for the name, set as a short
   essay: lede, pull quote, the workshop's coordinates, the rules of the
   nest and a colophon.

   --art is the engraving's width and is mirrored by the <img> `sizes`
   attribute (434px · 34vw · 274px): change one, change the other.

   The art keeps its keyed-out darks transparent, so the sheet behind it
   must stay near-black: the vignette may warm it, never lighten it.

   Motion is CSS only: the engraving drifts a few pixels against its frame
   as the section scrolls by (a scroll timeline, where supported, with
   motion allowed). Everywhere else the plate is simply still. */

.story {
  --art: 434px;
  --mat: clamp(18px, 2.1vw, 30px);
  isolation: isolate;
  overflow: clip;
}
/* A royal palm — where palmchats build — stands at the far edge, barely
   there, and a low warm light sits behind the plate. */
.story::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: max(-90px, calc(50% - 840px));
  bottom: -2%;
  width: clamp(300px, 34vw, 520px);
  aspect-ratio: 520 / 1180;
  pointer-events: none;
  background: url("/assets/img/story-palm.svg") right bottom / contain no-repeat;
  opacity: 0.04;
}
.story::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(34% 46% at 27% 46%, rgba(245, 152, 42, 0.065), transparent 70%),
    radial-gradient(40% 40% at 88% 92%, rgba(200, 92, 35, 0.05), transparent 70%);
}

.story__grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: clamp(48px, 7.4vw, 124px);
}

/* The plate. ------------------------------------------------------------ */

.story__plate {
  align-self: center;
  width: fit-content;
  max-width: 100%;
}
.story__frame {
  position: relative;
  padding: 7px;
  border: 1px solid var(--line-gold);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(255, 245, 230, 0.03), rgba(255, 245, 230, 0.01));
  box-shadow: var(--shadow-3), 0 50px 110px -60px rgba(245, 152, 42, 0.28);
}
/* Registration ticks at the frame's corners — the engraving's own
   crosshair eye, repeated where a printer would put it. */
.story__frame::before,
.story__frame::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  pointer-events: none;
  background:
    linear-gradient(var(--line-gold), var(--line-gold)) center / 1px 100% no-repeat,
    linear-gradient(var(--line-gold), var(--line-gold)) center / 100% 1px no-repeat;
}
.story__frame::before {
  top: -6px;
  left: -6px;
}
.story__frame::after {
  right: -6px;
  bottom: -6px;
}
.story__sheet {
  position: relative;
  padding: calc(var(--mat) + 26px) var(--mat) var(--mat);
  border: 1px solid var(--line-2);
  border-radius: 1px;
  overflow: clip;
  background:
    radial-gradient(62% 48% at 50% 46%, rgba(245, 152, 42, 0.07), transparent 72%),
    radial-gradient(120% 100% at 50% 42%, var(--bg-1) 30%, var(--sunk) 100%);
  box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 245, 230, 0.03);
}
.story__marks {
  position: absolute;
  top: calc(var(--mat) - 2px);
  left: var(--mat);
  right: var(--mat);
  display: flex;
  justify-content: space-between;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.625rem;
  line-height: 1;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.story__art {
  position: relative;
  width: min(var(--art), 100%);
  height: auto;
}
.story__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 4px 12px;
  margin-top: 18px;
  font-size: var(--fs-sm);
  color: var(--ink-3);
  text-align: center;
  text-wrap: balance;
}
.story__fig {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
/* A binomial is set in a true italic, as naturalists set it. */
.story__caption i,
.story__lede i {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.14em;
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
  color: var(--ink-2);
}

/* The copy. ------------------------------------------------------------- */

.story__copy {
  display: grid;
  gap: clamp(26px, 2.6vw, 36px);
  max-width: 38rem;
}
.story__head {
  display: grid;
  justify-items: start;
  gap: 22px;
}
.story__title {
  font-size: clamp(2.3rem, 1.25rem + 2.75vw, 3.7rem);
}
.story__lede {
  margin-top: 4px;
}
.story__text {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink-3);
}
.story__text strong {
  font-weight: 560;
}
.story__pull {
  margin-block: clamp(4px, 1.4vw, 18px);
  padding-left: clamp(18px, 2vw, 28px);
  border-left: 1px solid var(--line-gold);
  font-family: var(--display);
  /* Sized with the column so the first line of the poem stays one line. */
  font-size: clamp(1.5rem, 0.3rem + 2.15vw, 2.25rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.034em;
  text-wrap: balance;
  color: var(--ink);
}
.story__pull .serif {
  font-size: 1.16em;
  line-height: 0.9;
  letter-spacing: -0.01em;
  margin-right: -0.06em; /* keeps the overhang padding, pulls the comma home */
}

/* A label is a small line with a hairline running out to the right edge,
   or to the coordinates when it has them. */
.story__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-wrap: wrap;
  color: var(--ink-2);
}
.story__label::after {
  content: "";
  order: 1;
  flex: 1 1 24px;
  height: 1px;
  background: linear-gradient(90deg, var(--line-3), var(--line));
}
.story__coords {
  order: 2;
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  white-space: nowrap;
  color: var(--gold-ink);
}
.story__made {
  display: grid;
  gap: 14px;
}

/* The rules of the nest: numbered by the stylesheet, set in mono. */
.story__rules {
  display: grid;
  gap: 10px;
}
.story__list {
  counter-reset: nest;
}
.story__list li {
  counter-increment: nest;
  display: grid;
  grid-template-columns: 3.4em minmax(0, 1fr);
  align-items: baseline;
  padding: 13px 0 12px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink-2);
}
.story__list li::before {
  content: counter(nest, decimal-leading-zero);
  font-size: 0.86em;
  letter-spacing: 0.06em;
  color: var(--gold-ink);
}

/* The colophon: where the essay ends, the way a book does. */
.story__end {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px 32px;
  margin-top: clamp(4px, 1vw, 12px);
}
.story__colophon {
  display: grid;
  justify-items: end;
  gap: 8px;
  text-align: right;
}
.story__wink {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.22rem;
  line-height: 1.2;
  color: var(--ink-3);
}
.story__flying {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.story__flying .ico {
  width: 18px;
  height: 18px;
}

/* Motion. --------------------------------------------------------------- */

/* On a screen tall enough to hold it, the plate stays in view while the
   essay beside it is read. */
@media (min-width: 901px) and (min-height: 840px) {
  .story__plate {
    position: sticky;
    top: calc(var(--nav-h) + 40px);
    align-self: start;
  }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .story {
      view-timeline: --story block;
    }
    .story__art {
      animation: story-drift linear both;
      animation-timeline: --story;
      animation-range: cover 0% cover 100%;
    }
  }
}
@keyframes story-drift {
  from {
    transform: translateY(-16px);
  }
  to {
    transform: translateY(16px);
  }
}

/* Small screens. -------------------------------------------------------- */

@media (max-width: 1199px) {
  .story {
    --art: 34vw;
  }
}
@media (max-width: 900px) {
  .story {
    --art: 274px;
    --mat: 18px;
  }
  .story::before {
    right: -70px;
    bottom: auto;
    top: 2%;
    width: 260px;
    opacity: 0.045;
  }
  .story::after {
    background: radial-gradient(70% 30% at 50% 18%, rgba(245, 152, 42, 0.07), transparent 70%);
  }
  .story__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(56px, 12vw, 80px);
  }
  .story__plate {
    justify-self: center;
  }
  .story__copy {
    max-width: 40rem;
  }
  .story__pull {
    font-size: clamp(1.6rem, 0.9rem + 3.2vw, 2.4rem);
  }
}
@media (max-width: 520px) {
  .story__label {
    font-size: 0.6875rem;
    letter-spacing: 0.13em;
  }
  .story__end {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    gap: 26px;
  }
  .story__list li {
    grid-template-columns: 3em minmax(0, 1fr);
    font-size: 0.8125rem;
  }
  .story__colophon {
    justify-items: start;
    text-align: left;
    padding-top: 22px;
    border-top: 1px solid var(--line);
  }
}

@media (forced-colors: active) {
  .story::before,
  .story::after {
    display: none;
  }
  .story__frame,
  .story__sheet {
    border-color: CanvasText;
  }
}
/* @end story */

/* @section proof */
/* ---------------------------------------------------------------- proof -- */
/* The benchmark headline: four numbers in the fuel-facts style, the four
   mechanisms behind them, and the way to the full method on /benchmarks/. */

.proof__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(48px, 6vw, 88px);
}
.proof__fact {
  display: grid;
  align-content: start;
  padding: 4px clamp(18px, 2.2vw, 34px) 0;
  border-left: 1px solid var(--line-2);
}
.proof__fact:first-child {
  padding-left: 0;
  border-left: 0;
}
.proof__num {
  display: block;
  justify-self: start;
  padding: 0 0.04em 0.06em 0;
  font-family: var(--display);
  font-size: clamp(3rem, 1.7rem + 3.6vw, 5.6rem);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold-1) 30%, var(--orange) 72%, var(--orange-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.proof__label {
  display: block;
  margin-top: 16px;
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--ink);
}
.proof__fine {
  display: block;
  margin-top: 8px;
  text-wrap: pretty;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--ink-3);
}

.proof__how {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(48px, 6vw, 80px);
}
.proof__card {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: clamp(20px, 2vw, 28px);
}
.proof__card > .ico {
  width: 22px;
  height: 22px;
  color: var(--gold);
}
.proof__title {
  margin-top: 4px;
  font-family: var(--display);
  font-size: 1.16rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ink);
}
.proof__text {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-3);
  text-wrap: pretty;
}

.proof__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  margin-top: clamp(36px, 4vw, 56px);
}
.proof__pdf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.proof__note {
  max-width: 62ch;
  margin-top: 18px;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--ink-4);
}

@media (max-width: 1080px) {
  .proof__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 40px;
  }
  .proof__fact:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
  .proof__how {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .proof__facts {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }
  .proof__fact,
  .proof__fact:nth-child(3) {
    grid-template-columns: 8.4rem minmax(0, 1fr);
    grid-template-areas:
      "num label"
      "num fine";
    column-gap: 14px;
    padding: 22px 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .proof__fact:first-child {
    border-top: 0;
    padding-top: 0;
  }
  .proof__num {
    grid-area: num;
    font-size: 2.5rem;
  }
  .proof__label {
    grid-area: label;
    margin-top: 2px;
    font-size: 1.04rem;
  }
  .proof__fine {
    grid-area: fine;
  }
  .proof__how {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (forced-colors: active) {
  .proof__num {
    color: CanvasText;
    background: none;
  }
}
/* @end proof */