:root {
  --bg: #080909;
  --panel: #111313;
  --ink: #f1f2ef;
  --muted: #8b908d;
  --line: #2b2e2d;
  --soft: #c8cbc7;
  --dim: #868b89;
  --mono: "DM Mono", monospace;
  --sans: "Inter", sans-serif;
  /* eight steps, and nothing between them. every size on the page is one
     of these; a literal rem in a rule below is a bug. */
  --t-micro: 0.72rem; /* caps labels, badges, provenance ticks */
  --t-note: 0.78rem; /* footnotes, hints, source rows */
  --t-meta: 0.82rem; /* metadata, tickers, counters */
  --t-row: 0.88rem; /* ledger rows, controls, list items */
  --t-num: 0.98rem; /* filed amounts */
  --t-body: 1rem; /* prose */
  --t-lead: 1.12rem; /* section decks */
  --t-sub: 1.35rem; /* the one figure a panel is read for */
  --max: 1280px;
  --pad: clamp(1.25rem, 4vw, 4rem);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 1rem;
}
body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}
body::before {
  position: fixed;
  z-index: 30;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(
    rgb(255 255 255 / 14%) 0.45px,
    transparent 0.55px
  );
  background-size: 5px 5px;
  content: "";
  opacity: 0.055;
}
a {
  color: inherit;
}
button {
  font: inherit;
}
.skip-link {
  position: fixed;
  z-index: 50;
  top: 1rem;
  left: 1rem;
  padding: 0.7rem 1rem;
  background: var(--ink);
  color: var(--bg);
  transform: translateY(-200%);
}
.skip-link:focus {
  transform: none;
}
:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 4px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: max-content;
  text-decoration: none;
  font-size: var(--t-body);
  font-weight: 600;
  letter-spacing: 0.08em;
}
.brand svg {
  width: 25px;
  fill: var(--ink);
}
.scroll-progress {
  position: fixed;
  z-index: 40;
  top: 0;
  right: 0;
  width: 2px;
  height: 100svh;
  background: rgb(255 255 255 / 5%);
  pointer-events: none;
}
.scroll-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: top;
}
main > section,
footer {
  width: min(100%, var(--max));
  margin: auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}
h1,
h2 {
  font-weight: 500;
  letter-spacing: -0.055em;
}
h1 {
  margin: 0;
  font-size: clamp(3.6rem, 8vw, 7.6rem);
  line-height: 0.92;
}
h2 {
  margin: 0;
  font-size: clamp(2.4rem, 5vw, 4.8rem);
  line-height: 0.95;
}
.hero {
  position: relative;
  display: block;
  min-height: 100svh;
  padding-top: 0;
  padding-bottom: 0;
  min-width: 0;
}
.hero-masthead {
  position: absolute;
  z-index: 8;
  top: 0;
  right: var(--pad);
  left: var(--pad);
  display: flex;
  align-items: center;
  min-height: 5rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font: var(--t-micro) var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  animation: folio-in 800ms 80ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-masthead .brand {
  color: var(--ink);
}
.hero-copy {
  position: absolute;
  z-index: 6;
  top: clamp(11rem, 23vh, 15rem);
  left: var(--pad);
  width: min(61rem, 72%);
  min-width: 0;
  transform: translate3d(
    var(--copy-x, 0px),
    calc(var(--copy-y, 0px) + var(--copy-scroll, 0px)),
    0
  );
  transition: transform 180ms ease-out;
  pointer-events: none;
}
.hero-copy a {
  pointer-events: auto;
}

.hero-copy h1 span {
  display: block;
  width: max-content;
  max-width: 100%;
  animation: title-in 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-copy h1 span:first-child {
  animation-delay: 240ms;
}
.hero-copy h1 span:last-child {
  animation-delay: 330ms;
}
.hero-deck {
  max-width: 34rem;
  margin: 2rem 0;
  color: var(--soft);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  animation: copy-in 700ms 430ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.primary-action {
  display: inline-flex;
  justify-content: space-between;
  gap: 3rem;
  min-width: 17rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--ink);
  font: var(--t-row) var(--mono);
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  animation: copy-in 700ms 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-links {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  margin-top: 1.9rem;
  animation: copy-in 700ms 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-link {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border: 1px solid var(--line);
  color: var(--muted);
  transition:
    color 0.2s,
    border-color 0.2s;
}
.hero-link:hover {
  color: var(--ink);
  border-color: var(--ink);
}
.hero-link svg {
  display: block;
  width: 0.85rem;
  height: 0.85rem;
  fill: currentColor;
}
/* the mark ships as a white glyph on a black tile; screen drops the tile */
.hero-link .dex-mark {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
  mix-blend-mode: screen;
  opacity: 0.66;
  transition: opacity 0.2s;
}
.hero-link:hover .dex-mark {
  opacity: 1;
}
.hero-visual {
  position: absolute;
  z-index: 2;
  top: clamp(7rem, 12vh, 9rem);
  right: var(--pad);
  width: min(64vw, 58rem);
  height: calc(100svh - 13.5rem);
  min-height: 32rem;
  border: 1px solid var(--line);
  overflow: hidden;
  background: #0b0c0c;
  min-width: 0;
  transform: translate3d(
    var(--visual-x, 0px),
    calc(var(--visual-y, 0px) + var(--visual-scroll, 0px)),
    0
  );
  transition: transform 220ms ease-out;
  animation: visual-in 1s 180ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-visual::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 3px,
    rgb(255 255 255 / 1.4%) 4px
  );
  content: "";
}
.hero-visual::after {
  position: absolute;
  z-index: 3;
  top: -12%;
  right: 0;
  left: 0;
  height: 12%;
  pointer-events: none;
  background: linear-gradient(transparent, rgb(241 242 239 / 8%), transparent);
  content: "";
  animation: hero-scan 8s linear infinite;
}
.hero-canvas-control {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: crosshair;
  touch-action: pan-y;
}
.hero-canvas-control:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: -5px;
}
.hero-visual canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.visual-split {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgb(241 242 239 / 45%);
  pointer-events: none;
}


/* ---- AI Capital Loop mascot ----------------------------------------------
   The character from the model sheet, redrawn as one SVG rig so it can change
   expression, blink and hover from CSS rather than shipping six PNGs. One
   instance is cloned per placeholder; every part is a class and every colour
   is a custom property, so the same drawing serves a 24px brand mark and a
   190px hero pose.
   viewBox is 0 0 120 112. Head is 76 x 68, which is the sheet's 1.12:1.     */
.mascot {
  --m-ink: #1f2329;
  --m-frame: var(--soft);
  --m-lens: var(--ink);
  --m-shadow: rgb(241 242 239 / 9%);
  --m-wire: 4;
  display: block;
  width: 120px;
  height: auto;
  overflow: visible;
}
.mascot .head,
.mascot .ear,
.mascot .paw,
.mascot .brow {
  fill: var(--m-ink);
}
.mascot .lens {
  fill: var(--m-lens);
}
.mascot .shadow {
  fill: var(--m-shadow);
  opacity: 0;
}
.mascot .frame,
.mascot .bridge {
  fill: none;
  stroke: var(--m-frame);
  stroke-width: var(--m-wire);
  stroke-linejoin: miter;
  stroke-miterlimit: 6;
}
.mascot .smile {
  fill: none;
  stroke: var(--m-lens);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* pivots: a blink squashes from the lens centre, an ear twitches from its base */
.mascot .head,
.mascot .lens,
.mascot .paw,
.mascot .shadow,
.mascot .ear {
  transform-box: fill-box;
}
.mascot .lens,
.mascot .paw,
.mascot .shadow {
  transform-origin: 50% 50%;
}
.mascot .ear-left {
  transform-origin: 57% 88%;
}
.mascot .ear-right {
  transform-origin: 43% 88%;
}

/* expressions ride one class on the root, so an instance can change at runtime */
.mascot .lens {
  opacity: 1;
  transform: none;
}
.mascot .smile,
.mascot .brow {
  opacity: 0;
}
.mascot .lens,
.mascot .smile,
.mascot .brow {
  transition:
    opacity 110ms linear,
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mascot.is-happy .lens {
  opacity: 0;
}
.mascot.is-happy .smile {
  opacity: 1;
}
.mascot.is-focused .lens,
.mascot.is-reading .lens {
  transform: scaleY(0.3);
}
.mascot.is-surprised .lens {
  transform: scale(1.28);
}
.mascot.is-thinking .lens {
  transform: translate(-4.5px, -4px) scale(0.72);
}
.mascot.is-working .lens {
  transform: translate(0, 2.5px) scaleY(0.62);
}
.mascot.is-determined .brow {
  opacity: 1;
}

@keyframes m-blink {
  0%,
  92%,
  100% {
    transform: scaleY(1);
  }
  96% {
    transform: scaleY(0.06);
  }
}
@keyframes m-twitch {
  0%,
  88%,
  100% {
    rotate: 0deg;
  }
  92% {
    rotate: -9deg;
  }
  96% {
    rotate: 3deg;
  }
}
@keyframes m-bob {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -5px;
  }
}
@keyframes m-bobsh {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.84);
    opacity: 0.6;
  }
}
/* the blink is staggered per instance so a row of them never blinks in unison */
.mascot.is-blinking .lens {
  animation: m-blink 5.6s var(--m-delay, 0s) ease-in-out infinite;
}
.mascot.is-twitching .ear-left {
  animation: m-twitch 7.4s var(--m-delay, 0s) ease-in-out infinite;
}
.mascot.is-hovering .shadow {
  opacity: 1;
  animation: m-bobsh 3.2s ease-in-out infinite;
}
.mascot.is-hovering .body,
.mascot.is-hovering .eyes,
.mascot.is-hovering .glasses {
  animation: m-bob 3.2s ease-in-out infinite;
}

/* the logo lockup: two tones, no grey. the lens becomes a ring rather than a
   disc, so the silhouette reads straight through it. */
.mascot.is-logo .frame,
.mascot.is-logo .bridge {
  stroke: var(--m-line);
  stroke-width: 5;
}
.mascot.is-logo .lens {
  fill: none;
  stroke: var(--m-line);
  stroke-width: 4.6;
  r: 9;
}
.mascot.is-logo .smile,
.mascot.is-logo .brow {
  display: none;
}

/* ---- the card the whole page is about ---------------------------------- */
.gpu-card {
  --gpu-body:   #15171b;
  --gpu-edge:   #717880;
  --gpu-accent: #76b900;
  --gpu-ink:    #f2f4f6;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* --- structure --- */
.gpu-shell,
.gpu-bracket    { fill: var(--gpu-body); stroke: var(--gpu-edge); stroke-width: 1.4; }
.gpu-side       { fill: var(--gpu-body); stroke: var(--gpu-edge); stroke-width: 1.2;
                  stroke-linejoin: round; }
.gpu-top        { fill: var(--gpu-edge); stroke: var(--gpu-edge); stroke-width: 1.2;
                  stroke-linejoin: round; fill-opacity: .38; }
.gpu-seam       { fill: none; stroke: var(--gpu-edge); stroke-width: .7; opacity: .4; }
.gpu-slot       { fill: var(--gpu-edge); opacity: .45; }
.gpu-screw      { fill: var(--gpu-edge); opacity: .5; }
.gpu-vent       { fill: var(--gpu-edge); opacity: .26; }

/* --- fans --- */
.gpu-fan-well   { fill: var(--gpu-edge); opacity: .09; }
.gpu-fan-ring   { fill: none; stroke: var(--gpu-edge); stroke-width: 1.8; }
.gpu-fan-blades { fill: var(--gpu-edge); opacity: .55; }
.gpu-fan-hub    { fill: var(--gpu-edge); }
.gpu-fan-cap    { fill: var(--gpu-body); }
.gpu-fan-anchor { fill: none; stroke: none; pointer-events: none; }

/* each fan spins about its own centre */
.gpu-fan {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

/* opt-in motion */
.gpu-card.is-spinning .gpu-fan--top    { animation: gpu-spin 2.6s linear infinite; }
.gpu-card.is-spinning .gpu-fan--bottom { animation: gpu-spin 3.4s linear infinite reverse; }
@keyframes gpu-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .gpu-card.is-spinning .gpu-fan { animation: none; }
}

/* --- the one colour --- */
.gpu-stripe { fill: var(--gpu-accent); }
.gpu-mark   { fill: var(--gpu-body); }

/* --- lettering --- */
.gpu-rtx path {
  fill: none;
  stroke: var(--gpu-ink);
  stroke-width: 1.05;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* the hero pose from the sheet: hovering, card tucked under one paw. the card
   is the only saturated colour anywhere on this site, which is the joke. */
.mascot-hero {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
}
.mascot-hero .mascot {
  width: 66%;
  flex: none;
}
.mascot-hero .gpu-card {
  width: 27%;
  flex: none;
  margin-left: -3%;
  --gpu-body: #0f1114;
  --gpu-edge: #6a7078;
  --gpu-ink: var(--ink);
}
/* the card rides the same bob as the cat, a beat behind, so it reads as held */
.mascot-hero.is-lifting .gpu-card {
  animation: m-bob 3.2s 0.18s ease-in-out infinite;
}

/* ---- placements ---------------------------------------------------------- */
/* the sheet's ICON (LIGHT): the one place the character keeps its own black */
.brand-mark {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  flex: none;
  border-radius: 8px;
  background: var(--ink);
}
.brand-mark .mascot {
  width: 24px;
  --m-ink: #0b0c0c;
  --m-line: var(--ink);
}
.brand svg {
  width: 23px;
  fill: var(--ink);
}
.brand-word {
  font-size: var(--t-row);
}
.masthead-rail {
  display: flex;
  gap: 1.4rem;
  margin: 0 0 0 auto;
  color: var(--muted);
}
.masthead-rail span::after {
  margin-left: 1.4rem;
  content: "·";
  opacity: 0.5;
}
.masthead-rail span:last-child::after {
  content: none;
}

.head-mascot {
  display: block;
  width: clamp(2.6rem, 4vw, 3.7rem);
  margin-bottom: 0.8rem;
}
.head-mascot .mascot,
.footer-mascot .mascot {
  --m-ink: var(--soft);
  --m-line: var(--bg);
}
.head-mascot .mascot {
  width: 100%;
}

.footer-mascot {
  display: block;
  width: 34px;
}
.footer-mascot .mascot {
  width: 100%;
}

/* the flagship pose, hovering over the sculpture it presides over */
.mascot-hero {
  position: absolute;
  z-index: 4;
  top: clamp(1.5rem, 5vh, 3.5rem);
  right: clamp(1.5rem, 4vw, 3.5rem);
  width: clamp(9.5rem, 17vw, 15rem);
  pointer-events: none;
  animation: origin-in 900ms 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.mascot-hero .mascot {
  width: 100%;
  --m-ink: #1c2026;
  --m-shadow: rgb(241 242 239 / 12%);
}

@media (max-width: 800px) {
  .masthead-rail {
    display: none;
  }
  .mascot-hero {
    width: 9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mascot *,
  .mascot-hero {
    animation: none !important;
    transition: none !important;
  }
}

/* ---- The origin exhibit --------------------------------------------------
   The page is named after one post, so the post is reproduced the way X
   renders it rather than restyled into this site's register: X's own Chirp
   webfont off its CDN, its lights-out palette, its 15/17px type ramp, its
   40px avatar and the three glyph paths it ships. Every number below was
   read off X's production bundle. The site's own label sits outside the
   frame, because the frame is a quotation.                                */
@font-face {
  font-family: "TwitterChirp";
  src: url("https://abs.twimg.com/responsive-web/client-web/Chirp-Regular.80fda27a.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TwitterChirp";
  src: url("https://abs.twimg.com/responsive-web/client-web/Chirp-Medium.20fc288a.woff2")
    format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TwitterChirp";
  src: url("https://abs.twimg.com/responsive-web/client-web/Chirp-Bold.ebb56aba.woff2")
    format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.hero-origin {
  position: absolute;
  z-index: 31;
  right: var(--pad);
  bottom: clamp(1.5rem, 4vh, 3.25rem);
  /* 600px is X's own status column width, so the post wraps where it wraps */
  width: min(600px, 46vw);
  margin: 0;
  animation: origin-in 900ms 760ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.origin-kicker {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.55rem;
  color: var(--muted);
  font: var(--t-micro) var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.origin-kicker a {
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}
.origin-kicker a:hover {
  color: var(--ink);
}

/* --- from here down the numbers are X's, not this site's ---------------- */
.xpost {
  --x-bg: #000;
  --x-text: #e7e9ea;
  --x-dim: #71767b;
  --x-blue: #1d9bf0;
  --x-line: #2f3336;
  padding: 12px 16px;
  background: var(--x-bg);
  color: var(--x-text);
  font-family:
    "TwitterChirp", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-align: left;
  color-scheme: dark;
  /* the host body sets these; X sets neither, and both inherit */
  text-rendering: auto;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  /* 600px total minus the two side borders minus 2x16px padding leaves the
     566px of text X wraps this post at, which is the width whose line breaks
     match the source screenshot. */
  border: 1px solid var(--x-line);
  border-radius: 16px;
  overflow: hidden;
  transition:
    border-color 220ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.xpost *,
.xpost *::before,
.xpost *::after {
  box-sizing: border-box;
}
.xpost-link {
  display: block;
  border-radius: 16px;
  color: inherit;
  text-decoration: none;
}
.xpost-link:hover .xpost {
  border-color: #536471;
  transform: translateY(-2px);
}
.xpost-link:active .xpost {
  transform: none;
}
.xpost-link:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 5px;
}
.xpost-link:focus-visible .xpost {
  border-color: #536471;
}

.xpost-head {
  display: flex;
  /* X's identity block carries margin-bottom: 2px, which makes the header row
     42px rather than 40px and centres the 40px avatar inside it */
  align-items: stretch;
  gap: 8px;
}
.xpost-identity {
  display: flex;
  flex: 1 1 auto;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  margin-bottom: 2px;
}
.xpost-avatar {
  display: block;
  width: 40px;
  height: 40px;
  flex: none;
  align-self: center;
  border-radius: 9999px;
  background: #3e4144;
  object-fit: cover;
}
.xpost-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.xpost-name {
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: unset;
  color: var(--x-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}
/* X ships the badge as one path: the tick is a hole, so on lights out it
   shows the black cell through rather than rendering white */
.xpost-verified {
  width: 18.75px;
  height: 18.75px;
  flex: none;
  margin-inline-start: 2px;
  fill: var(--x-blue);
}
.xpost-handle {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: unset;
  color: var(--x-dim);
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
}
.xpost-actions {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-left: auto;
  padding-left: 12px;
}
.xpost-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  flex: none;
  color: var(--x-dim);
}
/* the hover disc inflates outside layout, which is why the glyph edges stay
   8px apart while the target reads as 34.75px */
.xpost-btn::before {
  position: absolute;
  inset: -8px;
  border-radius: 9999px;
  content: "";
}
.xpost-btn.is-grok {
  color: var(--x-text);
}
.xpost-glyph {
  width: 18.75px;
  height: 18.75px;
  fill: currentcolor;
}
.xpost-glyph.is-grok {
  width: 19.34px;
}

.xpost-body {
  margin: 12px 0 0;
  color: var(--x-text);
  font-size: 17px;
  font-weight: 400;
  line-height: 24px;
  overflow-wrap: break-word;
}
.xpost-body p {
  margin: 0;
  color: inherit;
  font: inherit;
}
/* X renders the post as one pre-wrap text node, so the gap between the two
   paragraphs is a real empty line box exactly one line-height tall */
.xpost-body p + p {
  margin-top: 24px;
}

.xpost-meta {
  display: block;
  margin-top: 16px;
  color: var(--x-dim);
  font-size: 15px;
  line-height: 20px;
}
.xpost-time {
  display: inline;
}
.xpost-meta time {
  font: inherit;
  letter-spacing: inherit;
}
.xpost-sep {
  display: inline;
  padding: 0 4px;
}
.xpost-views {
  display: inline;
  font-size: 14px;
  line-height: 16px;
}
.xpost-views b {
  color: var(--x-text);
  font-weight: 700;
}

.origin-word {
  display: inline-block;
  animation: origin-word 520ms var(--d, 0ms) cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes origin-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes origin-word {
  from {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(0.3em);
  }
  to {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

@media (max-width: 1180px) {
  .hero-origin {
    width: min(600px, 52vw);
  }
}
@media (max-width: 620px) {
  .origin-kicker {
    flex-direction: column;
    gap: 0.35rem;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@keyframes hero-scan {
  to {
    transform: translateY(940%);
  }
}
@keyframes title-in {
  from {
    opacity: 0;
    transform: translateY(35%) skewY(2deg);
  }
}
@keyframes copy-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}
@keyframes visual-in {
  from {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }
}
@keyframes folio-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.signal-grid span {
  display: block;
  margin-bottom: 4rem;
  color: var(--muted);
  font: var(--t-meta) var(--mono);
}
.product {
  padding-top: 8rem;
  padding-bottom: 8rem;
}
.product-head {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  align-items: end;
  margin-bottom: 3rem;
}
.product-head > p {
  justify-self: end;
  max-width: 26rem;
  margin: 0;
  color: var(--muted);
  font-size: var(--t-lead);
}
.product-shell {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #0b0c0c;
}
.map-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 3.5rem;
  padding: 0 1rem;
  border-bottom: 1px solid var(--line);
}
.map-status {
  font: var(--t-meta) var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.map-status i {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--soft);
}
.filters {
  display: flex;
  gap: 0.25rem;
}
.filters button {
  position: relative;
  padding: 0.45rem 0.75rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: var(--t-note) var(--mono);
  text-transform: uppercase;
  cursor: pointer;
}
.filters button:hover,
.filters button.is-active {
  color: var(--ink);
}
.filters button::after {
  position: absolute;
  right: 0.75rem;
  bottom: 0.2rem;
  left: 0.75rem;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transition: transform 180ms ease;
}
.filters button.is-active::after,
.filters button:hover::after {
  transform: scaleX(1);
}
.map-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  min-height: 34rem;
}
.company-grid {
  --map-x: 50%;
  --map-y: 50%;
  position: relative;
  min-height: 41rem;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background-image: radial-gradient(
    rgb(255 255 255 / 8%) 0.65px,
    transparent 0.75px
  );
  background-size: 17px 17px;
}
.company-grid::before,
.company-grid::after {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  background: rgb(241 242 239 / 5%);
  content: "";
  transition:
    top 220ms ease-out,
    left 220ms ease-out;
}
.company-grid::before {
  top: var(--map-y);
  right: 0;
  left: 0;
  height: 1px;
}
.company-grid::after {
  top: 0;
  bottom: 0;
  left: var(--map-x);
  width: 1px;
}
.map-web {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.map-ascii {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.map-edge {
  stroke: rgb(241 242 239 / 48%);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  transition:
    stroke 0.2s,
    stroke-width 0.2s,
    opacity 0.2s;
}
.map-edge.edge-financing {
  stroke: rgb(241 242 239 / 66%);
  stroke-width: 2.1;
  stroke-dasharray: 14 4;
  animation: flow-financing 3.4s linear infinite;
}
.map-edge.edge-investment {
  stroke-dasharray: 7 4;
  animation: flow-investment 2.6s linear infinite;
}
.map-edge.edge-capacity {
  stroke: rgb(241 242 239 / 42%);
  stroke-dasharray: 2 4.6;
  animation: flow-capacity 2.2s linear infinite;
}
@keyframes flow-financing {
  to {
    stroke-dashoffset: -90;
  }
}
@keyframes flow-investment {
  to {
    stroke-dashoffset: -55;
  }
}
@keyframes flow-capacity {
  to {
    stroke-dashoffset: -66;
  }
}
.map-edge.is-active {
  stroke: var(--ink);
  stroke-width: 2.4;
  opacity: 1;
  filter: drop-shadow(0 0 4px rgb(241 242 239 / 40%));
}
.map-edge.is-dimmed {
  opacity: 0.12;
}
.map-edge.is-filtered-out {
  opacity: 0;
}
.map-core {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.map-core::before {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 20rem;
  height: 20rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgb(241 242 239 / 5%),
    transparent 68%
  );
  animation: core-breathe 7s ease-in-out infinite;
  content: "";
}
@keyframes core-breathe {
  50% {
    opacity: 0.45;
  }
}
.map-core strong {
  display: block;
  color: var(--soft);
  font: var(--t-row) var(--mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.company-card {
  position: absolute;
  z-index: 2;
  top: var(--y);
  left: var(--x);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 8.8rem;
  min-height: 6.4rem;
  padding: 0.7rem;
  border: 1px solid var(--line);
  background: rgb(11 12 12 / 92%);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
}
.company-card:hover,
.company-card.is-active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgb(241 242 239 / 8%);
  transform: translate(-50%, -50%) scale(1.06);
}
.company-card.is-muted {
  opacity: 0.22;
}
.company-logo {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 3px;
  width: 76px;
  height: 29px;
}
.company-logo img {
  display: block;
  max-width: 25px;
  max-height: 22px;
  filter: saturate(0.9);
  transition: filter 0.2s;
}
/* multi-entity cards (Capital pool) hold a capped,
single-row cluster —
   six mismatched favicons wrapped and spilled out of the box. */
.company-logo:has(img:nth-child(2)) {
  flex-wrap: nowrap;
  overflow: hidden;
}
.company-logo:has(img:nth-child(2)) img {
  max-width: 20px;
  max-height: 18px;
}
.company-card:hover img,
.company-card.is-active img {
  filter: saturate(1.15);
}
/* CoreWeave has no Simple Icons entry,
so it stays a near-black favicon;
   lift it to read on the dark card,
but let hover show it untouched. */
.company-card[data-id="coreweave"] img,
.detail-logo[data-id="coreweave"] img {
  filter: saturate(0.9) brightness(2);
}
.company-card[data-id="coreweave"]:hover img,
.company-card[data-id="coreweave"].is-active img {
  filter: saturate(1.15);
}

.company-card small {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font: var(--t-micro) var(--mono);
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.company-card strong {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--t-body);
  font-weight: 500;
}
.company-card b {
  position: absolute;
  right: 0.65rem;
  top: 0.65rem;
  color: var(--muted);
  font: 400 var(--t-note) var(--mono);
}
.company-detail {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  background: var(--panel);
}
.company-detail.is-updating > * {
  animation: dossier-update 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes dossier-update {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
}
.detail-logo {
  display: grid;
  place-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: auto;
  border: 1px solid var(--line);
}
.detail-logo:empty {
  display: none;
}
.detail-logo img {
  width: 34px;
  height: 30px;
  object-fit: contain;
  filter: saturate(0.9);
}
.detail-logo:has(img:nth-child(2)) {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 3px;
  width: 96px;
}
.detail-logo:has(img:nth-child(2)) img {
  width: 24px;
  height: 20px;
  object-fit: contain;
}
.detail-title span {
  color: var(--muted);
  font: var(--t-micro) var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.detail-title h3 {
  margin: 0.5rem 0 0.7rem;
  font-size: 1.65rem;
  font-weight: 500;
  letter-spacing: -0.04em;
}
.detail-title strong {
  font: var(--t-row) var(--mono);
  letter-spacing: 0.06em;
}
.company-detail > p {
  margin: 1.5rem 0;
  color: var(--muted);
  font-size: var(--t-body);
}
.company-detail dl {
  margin: 0 0 1.5rem;
}
.company-detail dl div {
  display: flex;
  justify-content: space-between;
  padding: 0.65rem 0;
  border-top: 1px solid var(--line);
  font: var(--t-note) var(--mono);
}
.company-detail dt {
  color: var(--muted);
}
.company-detail dd {
  margin: 0;
  text-align: right;
}
.company-detail > a {
  display: flex;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font: var(--t-row) var(--mono);
  text-decoration: none;
  text-transform: uppercase;
}

.structure {
  padding-top: 7rem;
  padding-bottom: 8rem;
  border-top: 1px solid var(--line);
}
.structure > header {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: end;
  gap: 2rem;
  margin-bottom: 3rem;
}
.structure > header p {
  justify-self: end;
  max-width: 26rem;
  margin: 0;
  color: var(--muted);
  font-size: var(--t-lead);
}

.desk-label {
  margin: 0 0 1.2rem;
  color: var(--muted);
  font: var(--t-micro) var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.desk-foot {
  margin: 1rem 0 0;
  color: var(--muted);
  font: var(--t-note) var(--mono);
  line-height: 1.7;
}
.desk-foot strong {
  color: var(--soft);
  font-weight: 400;
}

/* --- collateral picker */
.collateral-picker {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.collateral-chip {
  display: grid;
  grid-template-columns: 1.6rem 1fr auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  border: 0;
  background: #0b0c0c;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  transition:
    background 0.18s,
    color 0.18s;
}
.collateral-chip:hover {
  background: #191c1b;
  color: var(--soft);
}
.collateral-chip.is-on {
  background: var(--ink);
  color: var(--bg);
}
.chip-logo {
  display: flex;
  gap: 2px;
  align-items: center;
  overflow: hidden;
}
.chip-logo img {
  display: block;
  width: 14px;
  height: 14px;
  object-fit: contain;
}
.collateral-chip.is-on .chip-logo img {
  filter: grayscale(1) invert(1) contrast(1.2);
}
.chip-name {
  font-size: var(--t-num);
  letter-spacing: -0.01em;
}
.chip-owed {
  font: var(--t-meta) var(--mono);
  opacity: 0.85;
}

/* --- capital structure */
.tranche-stack {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.tranche {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  background: var(--panel);
  transition:
    border-color 0.25s,
    opacity 0.25s;
}
.tranche.is-hit {
  border-color: #5d5346;
}
.tranche.is-wiped {
  border-color: #6d4a41;
  opacity: 0.62;
}
.tranche-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.5rem;
}
.tranche-head strong {
  font-size: var(--t-body);
  font-weight: 500;
}
.tranche-rating {
  font: var(--t-row) var(--mono);
  letter-spacing: 0.1em;
  color: var(--soft);
}
.tranche-bar {
  position: relative;
  height: 5px;
  background: #232726;
  overflow: hidden;
}
.tranche-bar i {
  display: block;
  height: 100%;
  background: var(--soft);
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.tranche.is-wiped .tranche-bar i {
  background: #b3705f;
}
.tranche-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 0.45rem;
  color: var(--muted);
  font: var(--t-note) var(--mono);
}
.tranche-loss {
  color: var(--soft);
}
.tranche.is-wiped .tranche-loss {
  color: #c58676;
}
.desk-empty {
  margin: 0;
  color: var(--muted);
  font: var(--t-row) var(--mono);
  line-height: 1.8;
}

/* --- deal ticket */
.deal-ticket {
  margin: 0;
}
.deal-ticket > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
}
.deal-ticket dt {
  color: var(--muted);
  font: var(--t-note) var(--mono);
  letter-spacing: 0.04em;
}
.deal-ticket dd {
  margin: 0;
  color: var(--soft);
  font: var(--t-num) var(--mono);
  text-align: right;
}
.desk-verdict {
  margin: 1.1rem 0 0;
  color: var(--soft);
  font-size: var(--t-body);
  line-height: 1.6;
}

.stress-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.stress-control {
  display: block;
}
.stress-control > span {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.6rem;
  font: var(--t-row) var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--soft);
}
.stress-control em {
  font-style: normal;
  color: var(--muted);
}
.stress-control small {
  display: block;
  margin-top: 0.5rem;
  color: var(--muted);
  font: var(--t-note) var(--mono);
}
.stress-control input[type="range"] {
  width: 100%;
  height: 2.5rem;
  margin: -0.75rem 0;
  appearance: none;
  background-color: transparent;
  background-image: linear-gradient(var(--line), var(--line));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 1px;
  cursor: ew-resize;
  touch-action: pan-y;
}
.stress-control input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ink);
}
.stress-control input[type="range"]::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
}
.stress-control input[type="range"]:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 6px;
}

@media (max-width: 960px) {
  .structure > header {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .structure > header p {
    justify-self: start;
  }

  .stress-row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.signals {
  padding-top: 9rem;
  padding-bottom: 9rem;
}
.signals header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 4rem;
}
.signal-grid {
  display: block;
  border-top: 1px solid var(--line);
}
.signal-grid article {
  display: grid;
  grid-template-columns: minmax(8rem, 0.6fr) minmax(16rem, 1.2fr) minmax(
      14rem,
      0.8fr
    );
  gap: 2rem;
  align-items: center;
  min-height: 10rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  transition:
    background 200ms ease,
    padding 200ms ease;
}
.signal-grid span {
  margin-bottom: 0;
}
.signal-grid strong {
  display: block;
  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 400;
  letter-spacing: -0.06em;
  transition:
    transform 220ms ease,
    letter-spacing 220ms ease;
}
.signal-grid p {
  max-width: 18rem;
  margin: 0;
  color: var(--muted);
  font-size: var(--t-body);
}
.signal-grid article:hover {
  padding-right: 1rem;
  padding-left: 1rem;
  background: rgb(255 255 255 / 2.5%);
}
.signal-grid article:hover strong {
  letter-spacing: -0.075em;
  transform: translateX(5px);
}
.sources {
  display: grid;
  grid-template-columns: 0.8fr 2.2fr;
  gap: 6vw;
  padding-top: 6rem;
  padding-bottom: 6rem;
  border-top: 1px solid var(--line);
}
.sources h2 {
  font-size: clamp(2rem, 3.5vw, 3.5rem);
}
.sources ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sources li {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
  font: var(--t-row) var(--mono);
}
.sources li span,
.sources time {
  color: var(--muted);
}
.sources a {
  position: relative;
  text-decoration: none;
}
.sources a::after {
  position: absolute;
  right: 0;
  bottom: -0.25rem;
  left: 0;
  height: 1px;
  background: var(--ink);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms ease;
}
.sources a:hover::after {
  transform: scaleX(1);
}
footer {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  gap: 4rem;
  align-items: start;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font: var(--t-micro) var(--mono);
}
footer p {
  max-width: 38rem;
  margin: 0;
}
.footer-brand span {
  display: block;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 500;
}
.footer-brand small {
  display: block;
  margin-top: 0.35rem;
}
footer > a {
  text-decoration: none;
}
.reveal-target {
  opacity: 0;
  transform: translateY(15px);
  transition:
    opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-target.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 800px) {

  .hero {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
    min-height: 0;
    padding-top: 8.5rem;
    padding-bottom: 3.5rem;
  }
  .hero-copy,
  .hero-visual,
  .hero-origin {
    position: static;
    width: auto;
    transform: none;
  }
  .hero-visual {
    position: relative;
    inset: auto;
    order: 1;
    height: 26rem;
    min-height: 0;
    animation-delay: 120ms;
  }
  .hero-origin {
    position: relative;
    inset: auto;
    z-index: 31;
    width: auto;
  }
  .sources {
    grid-template-columns: 1fr;
  }
  .product-head {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .product-head > p {
    justify-self: start;
  }
  .map-layout {
    grid-template-columns: 1fr;
  }
  .company-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    min-height: 0;
    overflow: visible;
    background: var(--line);
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .company-grid::before,
  .company-grid::after,
  .map-ascii,
  .map-web,
  .map-core {
    display: none;
  }
  .company-grid .company-card {
    position: relative;
    top: auto;
    left: auto;
    inset: auto;
    width: auto;
    min-height: 9rem;
    background: var(--panel);
    transform: none;
  }
  .company-grid .company-card:hover,
  .company-grid .company-card.is-active {
    transform: translateY(-3px);
  }
  .company-detail {
    min-height: 30rem;
  }
  .signal-grid article {
    grid-template-columns: 5rem 1fr;
    gap: 1rem;
    min-height: 11rem;
  }
  .signal-grid p {
    grid-column: 2;
  }
  footer {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
@media (max-width: 520px) {
  .hero-masthead {
    min-height: 4.25rem;
  }
  .hero {
    padding-top: 7.25rem;
  }
  .hero-copy h1 span {
    width: auto;
  }
  .hero-visual {
    height: 19rem;
  }

  .hero-deck {
    margin: 1.5rem 0;
  }
  .filters {
    flex-wrap: wrap;
    gap: 0;
  }
  .filters button {
    padding: 0.4rem 0.45rem;
    font-size: var(--t-micro);
  }
  .filters button::after {
    right: 0.45rem;
    left: 0.45rem;
  }
  .company-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .company-grid .company-card {
    min-height: 8.5rem;
  }
  .signal-grid article {
    grid-template-columns: 3.25rem 1fr;
    padding: 1.5rem 0;
  }
  .signal-grid p {
    max-width: none;
  }
  .sources li {
    grid-template-columns: 2rem 1fr;
  }
  .sources time {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .hero-visual::after {
    animation: none;
  }
  .xpost {
    transition: none;
  }
  .xpost-link:hover .xpost {
    transform: none;
  }
  .hero-masthead,
  .hero-origin,
  .origin-word,
  .hero-copy h1 span,
  .hero-deck,
  .primary-action,
  .hero-links,
  .hero-visual,
  .map-web,
  .map-edge,
  .map-core::before,
  .company-detail.is-updating > * {
    animation: none;
  }
  .company-card,
  .signal-grid article,
  .signal-grid strong,
  .sources a::after,
  .hero-copy,
  .hero-visual,
  .filters button::after {
    transition: none;
  }
  .company-card:hover,
  .company-card.is-active {
    transform: translate(-50%, -50%);
  }
  .signal-grid article:hover strong {
    transform: none;
  }
  .reveal-target {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* the assumption the market is about to price for us */
.signal-live strong {
  color: var(--ink);
}
.signal-live span {
  color: var(--soft);
}
.signal-live::after {
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 1.2rem;
  background: linear-gradient(90deg, var(--soft), transparent);
  content: "";
}

.waterfall-frame {
  position: relative;
  height: 17rem;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0b0c0c;
}
.waterfall-frame canvas {
  display: block;
  width: 100%;
  height: 100%;
}
@media (max-width: 960px) {
  .waterfall-frame {
    height: 12rem;
  }
}
/* --- what this is: the explainer above the desk */
.structure-note {
  display: grid;
  grid-template-columns: 0.9fr 2.1fr;
  gap: 2rem;
  padding-bottom: 2.6rem;
  margin-bottom: 2.6rem;
  border-bottom: 1px solid var(--line);
}
.note-title {
  margin: 0;
  color: var(--muted);
  font: var(--t-micro) var(--mono);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.note-body {
  columns: 2;
  column-gap: 2.5rem;
  max-width: 52rem;
}
.note-body p {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: var(--t-body);
  line-height: 1.65;
  break-inside: avoid;
}
.note-body p:last-child {
  margin-bottom: 0;
}
.note-body strong {
  color: var(--soft);
  font-weight: 500;
}
.note-body em {
  font-style: italic;
  color: var(--soft);
}
.note-caveat {
  color: var(--dim) !important;
  font: var(--t-note) var(--mono) !important;
  line-height: 1.8 !important;
}
@media (max-width: 960px) {
  .structure-note {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .note-body {
    columns: 1;
  }
}
/* --- restructured desk: visual, then parameters, then the short note */
.desk-visual {
  padding: 1.4rem;
  border: 1px solid var(--line);
  background: #0b0c0c;
}
.desk-visual .desk-label,
.param-block .desk-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.desk-visual .desk-label em,
.param-block .desk-label em {
  font-style: normal;
  color: var(--soft);
  letter-spacing: 0.12em;
}
/* tranche summary sits under the canvas, three across */
.desk-visual .tranche-stack {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-top: 0;
}
.desk-visual .tranche {
  border: 0;
  background: #0b0c0c;
}
/* deal ticket becomes a stat strip */
.desk-visual .deal-ticket {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  margin: 1.1rem 0 0;
  background: var(--line);
  border: 1px solid var(--line);
}
.desk-visual .deal-ticket > div {
  display: block;
  padding: 0.7rem 0.8rem;
  border-bottom: 0;
  background: #0b0c0c;
}
.desk-visual .deal-ticket dt {
  display: block;
  margin-bottom: 0.35rem;
}
.desk-visual .deal-ticket dd {
  text-align: left;
  font-size: var(--t-num);
}
.desk-params {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 1px;
  margin-top: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.param-block {
  padding: 1.4rem;
  background: #0b0c0c;
}
/* chips wrap horizontally now that they are an input row */
.desk-params .collateral-picker {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1px;
}
.desk-params .collateral-chip {
  grid-template-columns: auto auto;
  flex: 1 1 auto;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
}
.desk-params .chip-owed {
  display: none;
}
.structure-note {
  margin-top: 2.6rem;
  padding-bottom: 0;
  border-bottom: 0;
}
@media (max-width: 960px) {
  .desk-visual .deal-ticket,
  .desk-visual .tranche-stack {
    grid-template-columns: repeat(2, 1fr);
  }
  .desk-params {
    grid-template-columns: 1fr;
  }
}
/* --- responsive polish */
@media (max-width: 960px) {
  /* single column: 5 stats and 3 tranches left orphaned cells that painted
     as empty grey blocks, because the grid gap shows the container colour */
  .desk-visual .tranche-stack,
  .desk-visual .deal-ticket {
    grid-template-columns: 1fr;
  }
  .desk-visual .deal-ticket > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
  }
  .desk-visual .deal-ticket dt {
    margin-bottom: 0;
  }
  /* touch targets */
  .map-toolbar [data-filter],
  .collateral-chip {
    min-height: 2.75rem;
  }
  .company-card small {
    font-size: var(--t-row);
  }
  .desk-visual .tranche {
    padding: 0.8rem;
  }
}
@media (max-width: 560px) {
  .structure {
    padding-top: 4.5rem;
    padding-bottom: 5rem;
  }
  .waterfall-frame {
    height: 13rem;
  }
  .desk-visual,
  .param-block {
    padding: 1rem;
  }
}
@media (max-width: 960px) {
  /* 1fr tracks default to min-width:auto, so long tickers forced the grid
     wider than the viewport once the label font grew. Let them shrink. */
  .company-grid .company-card {
    min-width: 0;
  }
  .company-card small,
  .company-card strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@media (max-width: 960px) {
  /* wide-but-thin text links: give them a real vertical target on touch */
  .sources a,
  footer a {
    display: inline-block;
    padding: 0.5rem 0;
  }
  .sources li {
    padding: 0.5rem 0;
  }
  .hero-masthead .brand {
    padding: 0.6rem 0;
  }
}
/* ---- Underwriting ledger ------------------------------------------------
   Marginal return on the newest dollar, assembled by hand from filed line
   items. Typography carries severity: strike-through, accounting
   parentheses, and which side of the hurdle band the tick lands on.       */
.ledger {
  padding-top: 7rem;
  padding-bottom: 8rem;
  border-top: 1px solid var(--line);
}
.ledger > header {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: end;
  gap: 2rem;
  margin-bottom: 3rem;
}
.ledger > header p {
  justify-self: end;
  max-width: 26rem;
  margin: 0;
  color: var(--muted);
  font-size: var(--t-lead);
}

.ledger-visual {
  padding: clamp(1.2rem, 2.4vw, 2.2rem);
  border: 1px solid var(--line);
  background: #0b0c0c;
}
.ledger-visual .desk-label,
.ledger-block .desk-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.ledger-visual .desk-label em,
.ledger-block .desk-label em {
  font-style: normal;
  color: var(--soft);
  letter-spacing: 0.12em;
}

.step-head {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin: 0 0 0.7rem;
}
.step-head .step-n {
  align-self: center;
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
  border: 1px solid var(--line);
  color: var(--muted);
  font: var(--t-micro) var(--mono);
}
.step-head h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-lead);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.step-head p {
  flex: 1 1 16rem;
  margin: 0;
  color: var(--muted);
  font-size: var(--t-note);
  line-height: 1.5;
}
.step-head .step-period {
  color: var(--muted);
  font: var(--t-micro) var(--mono);
  letter-spacing: 0.1em;
}
.step-head .step-unit {
  margin-left: auto;
  color: var(--muted);
  font: var(--t-micro) var(--mono);
  letter-spacing: 0.14em;
}

.ledger-subject {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1.2rem;
  color: var(--muted);
  font: var(--t-note) var(--mono);
  letter-spacing: 0.04em;
}
.ledger-subject strong {
  color: var(--soft);
  font-weight: 400;
}
.ledger-subject img {
  width: 14px;
  height: 14px;
  filter: grayscale(1) contrast(0.92);
  opacity: 0.72;
}

/* --- the T-account: two cells, so no orphaned hairline cells are possible */
.ledger-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.ledger-group {
  padding: 1.2rem 1.3rem;
  background: #0b0c0c;
}
.ledger-group-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 0 0 0.2rem;
  color: var(--muted);
  font: var(--t-micro) var(--mono);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ledger-group-hint {
  margin: 0 0 0.4rem;
  color: var(--dim);
  font: var(--t-micro) var(--mono);
}

.ledger-row {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) auto 6.4rem;
  column-gap: 0.65rem;
  row-gap: 0.25rem;
  align-items: baseline;
  width: 100%;
  padding: 0.62rem 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}
.ledger-row + .ledger-row {
  border-top: 1px solid var(--line);
}
.ledger-return .ledger-row {
  grid-template-columns: minmax(0, 1fr) auto 5.5rem;
  column-gap: 0.6rem;
}
button.ledger-row {
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.18s;
}
button.ledger-row:hover {
  background: #191c1b;
}
.row-tick {
  color: var(--muted);
  font: var(--t-meta) var(--mono);
  white-space: nowrap;
}
.row-label {
  color: var(--soft);
  font: var(--t-row) var(--mono);
  line-height: 1.45;
}
.row-label,
.bottom-formula {
  overflow-wrap: break-word;
  word-break: normal;
}
.row-badge {
  color: var(--muted);
  font: var(--t-micro) var(--mono);
  letter-spacing: 0.1em;
}
.row-amount {
  color: var(--soft);
  font: var(--t-num) var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.row-note {
  grid-column: 2 / -1;
  color: var(--dim);
  font: var(--t-micro) var(--mono);
  line-height: 1.5;
}
.ledger-return .row-note {
  grid-column: 1 / -1;
}
.ledger-row.is-struck .row-label,
.ledger-row.is-struck .row-amount {
  /* the recession is carried in colour alone; stacking opacity on top drops
     10px monospace under the 4.5:1 contrast minimum while it is still a
     live control the reader has to be able to read */
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.ledger-row.is-rule {
  border-bottom: 1px solid var(--line);
}
/* the next row's own border-top would stack against it into a 2px slab */
.ledger-row.is-rule + .ledger-row {
  border-top: 0;
}
.ledger-row.is-total {
  position: relative;
  margin-top: 0.35rem;
  padding-top: 0.6rem;
}
/* accounting paper rules the bottom line twice: two hairlines, never a
   heavier one */
.ledger-row.is-total::before {
  position: absolute;
  top: 3px;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--line);
  content: "";
}
.ledger-row.is-total .row-label {
  color: var(--ink);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ledger-row.is-total .row-amount {
  color: var(--ink);
  font-size: var(--t-sub);
  letter-spacing: -0.02em;
}

/* --- the quotient: the moment a celebrated number lands as something else */
.ledger-quotient {
  margin-top: 1.6rem;
  padding: 1.5rem 1.5rem 1.6rem;
  border: 1px solid var(--line);
  background: #0e100f;
}
.q-label {
  margin: 0 0 0.5rem;
  color: var(--muted);
  font: var(--t-micro) var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.q-operands {
  margin: 0 0 0.5rem;
  color: var(--soft);
  font: var(--t-row) var(--mono);
  font-variant-numeric: tabular-nums;
}
.q-figure {
  display: block;
  color: var(--ink);
  font: clamp(3.2rem, 7vw, 5rem) var(--mono);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
}
.q-cushion {
  margin: 0.7rem 0 0;
  color: var(--soft);
  font: var(--t-row) var(--mono);
}

/* --- the hurdle bar: position is the whole severity signal */
.hurdle {
  padding-top: 0.4rem;
  /* the marks are full-width boxes slid by a percentage transform, so their
     empty right half would otherwise scroll the whole page sideways */
  overflow: hidden;
  margin-top: 1.7rem;
}
.hurdle-track {
  --hatch: 9px;
  position: relative;
  height: 5.6rem;
}
.hurdle-track.is-short,
.hurdle-track.is-negative {
  --hatch: 5px;
}
.hurdle-axis {
  position: absolute;
  top: 4rem;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--line);
}
.hurdle-fail {
  position: absolute;
  top: 2.9rem;
  left: 0;
  width: 23.35%;
  height: 1.1rem;
  background: repeating-linear-gradient(
    45deg,
    rgba(139, 144, 141, 0.16) 0 1px,
    transparent 1px var(--hatch)
  );
}
.hurdle-band {
  position: absolute;
  top: calc(4rem - 4px);
  left: 23.35%;
  width: 3.3%;
  height: 9px;
  border-right: 1px solid var(--line);
  border-left: 1px solid var(--line);
  /* the same inset-track grey the tranche bar uses, so the band the tick is
     read against is not the dimmest thing on its own bar */
  background: #232726;
}
.hurdle-minor {
  position: absolute;
  top: calc(4rem + 1px);
  width: 1px;
  height: 3px;
  background: var(--line);
}
.hurdle-end,
.hurdle-band-caption {
  position: absolute;
  top: calc(4rem + 0.6rem);
  color: var(--muted);
  font: var(--t-micro) var(--mono);
  white-space: nowrap;
}
.hurdle-end.is-max {
  right: 0;
}
.hurdle-band-caption {
  left: 25%;
  transform: translateX(-50%);
  color: var(--soft);
}
.hurdle-mark {
  position: absolute;
  left: 0;
  width: 100%;
  transform: translateX(var(--x, 0%));
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.hurdle-mark i {
  position: absolute;
  left: 0;
  display: block;
  width: 1px;
}
.hurdle-mark span {
  position: absolute;
  left: 0;
  transform: translateX(-50%);
  font: var(--t-row) var(--mono);
  white-space: nowrap;
}
.hurdle-mark b {
  color: var(--muted);
  font: var(--t-micro) var(--mono);
  font-weight: 400;
  letter-spacing: 0.1em;
}
.hurdle-mark.is-earned i {
  top: 2.2rem;
  height: 1.85rem;
  width: 2px;
  margin-left: -1px;
  background: var(--ink);
}
.hurdle-mark.is-earned span {
  top: 1.05rem;
  color: var(--ink);
}
.hurdle-mark.is-quoted i {
  top: 3.1rem;
  height: 0.95rem;
  background: var(--muted);
}
.hurdle-mark.is-quoted span {
  top: 0.05rem;
  color: var(--muted);
}
.hurdle-mark.is-left span {
  transform: translateX(0);
}
.hurdle-mark.is-right span {
  transform: translateX(-100%);
}
.hurdle-note {
  max-width: 46rem;
  margin: 1rem 0 0;
  color: var(--dim);
  font: var(--t-micro) var(--mono);
  line-height: 1.55;
}

/* --- the bottom line, ruled twice the way a worksheet is */
.ledger-bottom {
  position: relative;
  margin-top: 1.7rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}
.ledger-bottom::before {
  position: absolute;
  top: 3px;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--line);
  content: "";
}
.bottom-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  column-gap: 1.4rem;
  padding: 0.7rem 0;
}
.bottom-row + .bottom-row {
  border-top: 1px solid var(--line);
}
.bottom-label {
  color: var(--muted);
  font: var(--t-micro) var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.bottom-flag {
  margin-right: 0.5rem;
  color: var(--ink);
  letter-spacing: 0.14em;
}
.bottom-formula {
  color: var(--dim);
  font: var(--t-note) var(--mono);
  font-variant-numeric: tabular-nums;
}
.bottom-value {
  color: var(--ink);
  font: var(--t-sub) var(--mono);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.ledger-bottom.is-negative .is-headline .bottom-value {
  color: var(--ink);
  font-weight: 500;
}

.ledger-verdict {
  margin: 1.6rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: var(--t-lead);
  line-height: 1.55;
  letter-spacing: -0.011em;
  text-wrap: pretty;
}

/* --- controls, fused to the panel above by the 1px margin */
.ledger-params {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 1px;
  margin-top: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.ledger-block {
  padding: clamp(1.2rem, 2.4vw, 2.2rem);
  background: #0b0c0c;
}
.ledger-cases {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
/* company marks are grayscale everywhere the ledger draws them */
.ledger-cases .chip-logo img {
  filter: grayscale(1) contrast(0.92);
}
.ledger-cases-note {
  margin: 0.6rem 0 0;
  color: var(--dim);
  font: var(--t-micro) var(--mono);
}
.ledger-basis-note {
  margin: 0.7rem 0 0;
  color: var(--muted);
  font: var(--t-note) var(--mono);
  line-height: 1.55;
}
.ledger-basis-static {
  margin: 0.4rem 0 0;
  color: var(--soft);
  font: var(--t-note) var(--mono);
  line-height: 1.55;
}
.ledger-sources {
  display: grid;
  gap: 0.45rem;
  margin: 1.1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}
.ledger-sources p {
  display: grid;
  grid-template-columns: 7.5rem 1fr auto;
  align-items: baseline;
  gap: 0.25rem 1rem;
  margin: 0;
  color: var(--muted);
  font: var(--t-note) var(--mono);
}
.ledger-sources a {
  color: var(--soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.ledger-sources a:hover {
  border-bottom-color: var(--soft);
}
.ledger-reset {
  position: relative;
  margin-top: 1rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: var(--t-micro) var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.ledger-reset:hover,
.ledger-reset:focus-visible {
  color: var(--ink);
}
/* the same wiping hairline the basis buttons carry, so the one control that
   discards the reader's edits does not read as a third label */
.ledger-reset::after {
  position: absolute;
  right: 0;
  bottom: -0.25rem;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}
.ledger-reset:hover::after,
.ledger-reset:focus-visible::after {
  transform: scaleX(1);
}

.ledger-note {
  display: grid;
  grid-template-columns: 0.9fr 2.1fr;
  gap: 2rem;
  margin-top: 2.6rem;
}
.note-body .note-exclusions {
  margin: 0 0 1rem;
  color: var(--dim);
  font: var(--t-note) var(--mono);
  line-height: 1.7;
  break-inside: avoid;
}

@media (max-width: 960px) {
  .ledger > header {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .ledger > header p {
    justify-self: start;
  }
  .ledger-cols,
  .ledger-params,
  .ledger-note {
    grid-template-columns: 1fr;
  }
  .ledger-note {
    gap: 1.2rem;
  }
  button.ledger-row {
    min-height: 2.75rem;
  }
  .bottom-row {
    grid-template-columns: 1fr;
    row-gap: 0.2rem;
  }
  .bottom-value {
    text-align: left;
  }
}

@media (max-width: 720px) {
  .step-head {
    flex-wrap: wrap;
  }
  .step-head h3 {
    flex: 1 1 auto;
  }
  .step-head p {
    flex: 1 0 100%;
    order: 3;
  }
  .step-head .step-unit,
  .step-head .step-period {
    order: 2;
  }
}

@media (max-width: 560px) {
  .ledger {
    padding-top: 4.5rem;
    padding-bottom: 5rem;
  }
  .ledger-visual,
  .ledger-block {
    padding: 1rem;
  }
  .ledger-row {
    grid-template-columns: 1.2rem 1fr auto;
  }
  .ledger-return .ledger-row {
    grid-template-columns: 1fr auto;
  }
  .row-amount {
    grid-column: 2 / -1;
  }
  .ledger-return .row-amount {
    grid-column: 1 / -1;
  }
  .hurdle-track {
    height: 5rem;
  }
}

/* the ledger region is appended after the reduced-motion allowlist above, so
   its transitions have to be stripped here to win on source order */
@media (prefers-reduced-motion: reduce) {
  .hurdle-mark,
  button.ledger-row,
  .ledger-reset::after {
    transition: none;
  }
}