/* Phone-width figures for /homepage-dev. Opted into by ResponsiveHomepage;
   desktop figures and the other marketing variants never see these rules.
   Palette and type come from the .day-dev tokens; nothing here names a hex. */

.dd-home-mobile #context-graph > div,
.dd-home-mobile #agent-control-plane > div {
  padding-left: 0;
}

.dd-mobile-figure {
  min-width: 0;
  width: 100%;
  font-size: 12px;
  line-height: 1.5;
  color: var(--dd-ink);
}
.dd-mobile-figure *,
.dd-mobile-picker * {
  box-sizing: border-box;
}
.dd-ink {
  color: var(--dd-ink);
}
.dd-muted {
  color: var(--dd-muted);
}
.dd-faint {
  color: var(--dd-faint);
}

/* ── a node ──────────────────────────────────────────────────────────── */
.dd-box {
  position: relative;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--dd-faint);
  border-radius: 3px;
  overflow-wrap: anywhere;
}
.dd-box-ink {
  border-color: var(--dd-muted);
}
.dd-box-frame {
  border-color: var(--dd-rule);
}
.dd-box-dashed {
  border-style: dashed;
}
.dd-box-center {
  text-align: center;
}
/* labels cut into the border: page-coloured so they knock the line out */
.dd-box-top,
.dd-box-bottom {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: calc(100% - 16px);
  padding: 0 5px;
  background: var(--dd-paper);
  font-size: 11px;
  line-height: 14px;
  color: var(--dd-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dd-box-top {
  top: -8px;
  left: 7px;
}
.dd-box-bottom {
  bottom: -8px;
  right: 7px;
}
.dd-box-top svg,
.dd-box-bottom svg {
  flex: none;
}
/* a box with a bottom label needs air beneath it */
.dd-box:has(> .dd-box-bottom) {
  padding-bottom: 13px;
}

/* ── a tree: rail on the left, one tick per child ────────────────────── */
.dd-tree {
  display: grid;
  gap: 14px;
  margin-top: 14px;
  margin-left: 14px;
  padding-left: 18px;
}
.dd-tree > * {
  position: relative;
}
.dd-tree > *::before {
  content: "";
  position: absolute;
  left: -19px;
  top: 50%;
  width: 18px;
  height: 1px;
  background: var(--dd-faint);
}
.dd-tree > *::after {
  content: "";
  position: absolute;
  left: -19px;
  top: -14px;
  bottom: 0;
  width: 1px;
  background: var(--dd-faint);
}
.dd-tree > *:last-child::after {
  bottom: 50%;
}
/* paired arrows: something goes out, something comes back */
.dd-pair {
  position: absolute;
  left: -19px;
  top: 50%;
  width: 18px;
  transform: translateY(-50%);
  display: grid;
  gap: 3px;
}
.dd-pair i {
  display: block;
  position: relative;
  height: 1px;
  background: var(--dd-faint);
}
.dd-pair i::after {
  content: "";
  position: absolute;
  top: -3px;
  border: 3px solid transparent;
}
.dd-pair i:first-child::after {
  right: -1px;
  border-left: 5px solid var(--dd-faint);
}
.dd-pair i:last-child::after {
  left: -1px;
  border-right: 5px solid var(--dd-faint);
}
/* one arrow in place of the tick: the deploy goes one way */
.dd-tree-arrow > *::before {
  display: none;
}
.dd-arrow {
  position: absolute;
  left: -19px;
  top: 50%;
  width: 18px;
  height: 1px;
  background: var(--dd-faint);
}
.dd-arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -3px;
  border: 3px solid transparent;
  border-left: 5px solid var(--dd-faint);
}

/* ── a stack of cards: front card lowest and leftmost, each card behind it
   one full row up and a step right, so every name reads; ghosts tucked
   tightly behind the last ────────────────────────────────────────────── */
.dd-stack {
  position: relative;
  height: calc(28px + 24px * (var(--dd-cards) - 1) + 5px * var(--dd-ghosts));
  margin-right: 8px;
}
.dd-stack-card,
.dd-stack-ghost {
  position: absolute;
  height: 28px;
  border: 1px solid var(--dd-faint);
  border-radius: 3px;
  background: var(--dd-paper);
}
.dd-stack-card {
  display: flex;
  align-items: center;
  padding: 0 10px;
  bottom: calc(24px * var(--dd-i));
  left: calc(8px * var(--dd-i));
  right: calc(8px * (var(--dd-cards) - 1 - var(--dd-i)));
  z-index: calc(10 - var(--dd-i));
  font-size: 11px;
  white-space: nowrap;
}
.dd-stack-ghost {
  border-color: var(--dd-rule);
  bottom: calc(
    24px *
    (var(--dd-cards) - 1) +
    5px *
    (var(--dd-i) - var(--dd-cards) + 1)
  );
  left: calc(
    8px *
    (var(--dd-cards) - 1) +
    5px *
    (var(--dd-i) - var(--dd-cards) + 1)
  );
  right: calc(-5px * (var(--dd-i) - var(--dd-cards) + 1));
  z-index: calc(10 - var(--dd-i));
}

/* ── connectors ───────────────────────────────────────────────────────── */
.dd-down {
  position: relative;
  height: 34px;
}
.dd-down,
.dd-rail {
  color: var(--dd-faint);
}
.dd-down::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 5px;
  width: 1px;
  background: currentColor;
}
.dd-down::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  border: 3px solid transparent;
  border-top: 5px solid currentColor;
}
.dd-rail {
  position: relative;
}
.dd-rail::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: currentColor;
}
/* the rail turns left into the box beside it */
.dd-rail-in::before {
  top: 0;
  height: 50%;
  bottom: auto;
  left: -14px;
  right: calc(50% - 1px);
  width: auto;
  background: none;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}
.dd-rail-in::after {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  border: 3px solid transparent;
  border-right: 5px solid currentColor;
}
/* the arrowhead at the top: from one of `--dd-of` equal cells in the row
   beneath, cell `--dd-at`, up into the box above */
.dd-up {
  position: relative;
  height: 34px;
  width: calc((100% - 8px * (var(--dd-of) - 1)) / var(--dd-of));
  margin-left: calc(
    var(--dd-at) *
    ((100% - 8px * (var(--dd-of) - 1)) / var(--dd-of) + 8px)
  );
  color: var(--dd-faint);
}
.dd-up::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 5px;
  bottom: 0;
  width: 1px;
  background: currentColor;
}
.dd-up::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  border: 3px solid transparent;
  border-bottom: 5px solid currentColor;
}
/* the pair, vertical: down on the left, back up on the right, a label beside each */
.dd-vpair {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 8px;
  height: 44px;
  color: var(--dd-faint);
}
.dd-vpair i {
  position: relative;
  display: block;
  width: 1px;
  height: 100%;
  background: currentColor;
}
.dd-vpair i::after {
  content: "";
  position: absolute;
  left: -3px;
  border: 3px solid transparent;
}
.dd-vpair i:first-of-type::after {
  bottom: -1px;
  border-top: 5px solid currentColor;
}
.dd-vpair i:last-of-type::after {
  top: -1px;
  border-bottom: 5px solid currentColor;
}
/* the ball in flight: a dot sliding along one line of the pair; keyframes
   come from FeedbackLoops.tsx */
.dd-vpair-pulse {
  position: absolute;
  left: -3px;
  top: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dd-accent);
  opacity: 0;
  pointer-events: none;
}
.dd-vpair-down,
.dd-vpair-up {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  line-height: 14px;
  white-space: nowrap;
}
.dd-vpair-down {
  right: calc(50% + 14px);
}
.dd-vpair-up {
  left: calc(50% + 14px);
}
/* a row of small icons inside a box */
.dd-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  vertical-align: middle;
  color: var(--dd-faint);
}
.dd-badges svg {
  flex: none;
}

/* the object in flight: the line draws itself in Day blue from one end to the other */
.dd-line-lit {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--dd-accent);
  transform: scaleY(0);
  transform-origin: top;
  pointer-events: none;
}
.dd-down .dd-line-lit {
  bottom: 5px;
}
.dd-rail-in .dd-line-lit-v {
  height: 50%;
  bottom: auto;
}
.dd-rail-in .dd-line-lit-h {
  top: calc(50% - 1px);
  bottom: auto;
  left: -14px;
  right: 50%;
  width: auto;
  height: 1px;
  transform: scaleX(0);
  transform-origin: right;
}

/* ── 1.1 trace ────────────────────────────────────────────────────────── */

/* ── 1.2 pipeline ─────────────────────────────────────────────────────── */
.dd-pipe {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  column-gap: 16px;
  margin-top: 8px;
}
.dd-pipe > .dd-box,
.dd-pipe > .dd-down {
  grid-column: 1;
}
.dd-pipe > .dd-pipe-rules,
.dd-pipe > .dd-rail {
  grid-column: 2;
}
.dd-pipe > .dd-rail-drop {
  grid-row: 2 / span 3;
}
.dd-pipe-sources,
.dd-pipe-rules {
  padding: 20px 10px 12px;
}
.dd-pipe .dd-stack-card {
  padding: 0 8px;
}

/* ── 1.2 / 1.3 chips ──────────────────────────────────────────────────── */
.dd-chips-frame {
  padding: 16px 12px 12px;
}
.dd-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 8px;
}
.dd-chip {
  padding: 7px 10px;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dd-chip-any {
  margin-top: 12px;
}
.dd-frame-foot {
  margin-top: 12px;
  font-size: 11px;
  color: var(--dd-faint);
}

/* ── 2.1 agent card ───────────────────────────────────────────────────── */
.dd-card {
  padding: 18px 12px 12px;
}
.dd-card-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 12px;
}
.dd-card-blurb {
  margin: 8px 0 14px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--dd-muted);
}
.dd-skills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 10px;
  margin-top: 14px;
}
.dd-skills .dd-box {
  padding-left: 10px;
  padding-right: 10px;
}
.dd-ellipsis {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 2.2 deploy: agents on the left of the box, the person on the right ── */
.dd-deploy-person {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ── 2.2 skills and versions: skills one to a row, the version chips
   beneath the card in a row the arrow rises from ─────────────────────── */
.dd-skills-head {
  margin-top: 14px;
}
.dd-skills-column {
  grid-template-columns: minmax(0, 1fr);
}
.dd-versions {
  display: flex;
  gap: 8px;
}
.dd-version {
  flex: 1 1 0;
  padding: 7px 0;
  font-size: 12px;
  white-space: nowrap;
}

/* ── 2.1 org chart: people and agents on the left, the context graph one
   tall box on the right, a pair of arrows from every agent into it ─────── */
.dd-org {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px 118px;
  align-items: stretch;
}
.dd-org > * {
  min-width: 0;
}
.dd-org-human,
.dd-org-agent {
  grid-column: 1;
}
.dd-org-next {
  padding-top: 20px;
}
/* agents hang off a rail under their person; rows pad rather than gap so
   the rail runs unbroken */
.dd-org-agent {
  position: relative;
  padding: 14px 0 0 32px;
}
.dd-org-agent::before {
  content: "";
  position: absolute;
  left: 14px;
  top: calc(50% + 7px);
  width: 18px;
  height: 1px;
  background: var(--dd-faint);
}
.dd-org-agent::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--dd-faint);
}
.dd-org-agent:has(+ .dd-org-link + .dd-org-human)::after,
.dd-org-agent:has(+ .dd-org-link + .dd-org-graph)::after {
  bottom: calc(50% - 7px);
}
/* reads and writes: out to the graph, back to the agent */
.dd-org-link {
  grid-column: 2;
  position: relative;
}
.dd-org-link .dd-pair {
  left: 5px;
  right: 5px;
  width: auto;
  top: calc(50% + 7px);
}
.dd-org-graph {
  grid-column: 3;
  display: flex;
  align-items: center;
  padding: 16px 10px;
}
.dd-org-graph-note {
  font-size: 11px;
  line-height: 1.6;
  color: var(--dd-muted);
}

/* ── 1.2 pipeline, in motion: the desktop figure's clock, one object at a
   time on a loop, as CSS keyframes (generated; see IngestPipeline.tsx for
   the sequence). Stages stay lit once reached and go dark together. Lit
   cards and stages take the same faint wash as the desktop figure, mixed
   over the paper so a stack card still hides the card behind it. ──────── */
.dd-pipe .dd-stack-card,
.dd-pipe .dd-stack-ghost,
.dd-pipe .dd-box,
.dd-pipe .dd-down,
.dd-pipe .dd-rail,
.dd-pipe .dd-line-lit {
  animation-duration: 9980ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes dd-src-0 {
  0% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  4.4990000000000006% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  4.509% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  9.419% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  12.625% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  100% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
}
@keyframes dd-src-1 {
  0% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  3.5970000000000004% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  3.607% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  4.509% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  7.715% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  100% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
}
@keyframes dd-src-2 {
  0% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  2.6950000000000003% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  2.705% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  3.607% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  6.814% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  100% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
}
@keyframes dd-src-3 {
  0% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
  1.794% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
  1.804% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  2.705% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  5.912% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
  100% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
}
@keyframes dd-src-4 {
  0% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
  0.892% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
  0.902% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  1.804% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  5.01% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
  100% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
}
@keyframes dd-src-5 {
  0% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
  -0.01% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
  0.0% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  0.902% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  4.108% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
  100% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
}
@keyframes dd-rule-0 {
  0% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  45.481% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  45.491% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  50.401% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  53.607% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  100% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
}
@keyframes dd-rule-1 {
  0% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  44.579% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  44.589% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  45.491% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  48.697% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  100% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
}
@keyframes dd-rule-2 {
  0% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  43.677% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  43.687% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  44.589% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  47.796% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  100% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
}
@keyframes dd-rule-3 {
  0% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
  42.776% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
  42.786% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  43.687% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  46.894% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
  100% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
}
@keyframes dd-rule-4 {
  0% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
  41.874% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
  41.884% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  42.786% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  45.992% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
  100% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
}
@keyframes dd-rule-5 {
  0% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
  40.972% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
  40.982% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  41.884% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  45.09% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
  100% {
    border-color: var(--dd-rule);
    background-color: var(--dd-paper);
  }
}
@keyframes dd-layout {
  0% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  16.924% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  16.934% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  85.96199999999999% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  85.972% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  100% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
}
@keyframes dd-perm {
  0% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  35.962% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  35.972% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  85.96199999999999% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  85.972% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  100% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
}
@keyframes dd-graph {
  0% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  73.93799999999999% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  73.948% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  85.96199999999999% {
    border-color: var(--dd-accent);
    background-color: color-mix(in srgb, var(--dd-accent) 10%, var(--dd-paper));
  }
  85.972% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
  100% {
    border-color: var(--dd-faint);
    background-color: var(--dd-paper);
  }
}
@keyframes dd-hop1 {
  0% {
    color: var(--dd-faint);
  }
  16.924% {
    color: var(--dd-faint);
  }
  16.934% {
    color: var(--dd-accent);
  }
  85.96199999999999% {
    color: var(--dd-accent);
  }
  85.972% {
    color: var(--dd-faint);
  }
  100% {
    color: var(--dd-faint);
  }
}
@keyframes dd-hop2 {
  0% {
    color: var(--dd-faint);
  }
  35.962% {
    color: var(--dd-faint);
  }
  35.972% {
    color: var(--dd-accent);
  }
  85.96199999999999% {
    color: var(--dd-accent);
  }
  85.972% {
    color: var(--dd-faint);
  }
  100% {
    color: var(--dd-faint);
  }
}
@keyframes dd-hop3 {
  0% {
    color: var(--dd-faint);
  }
  73.93799999999999% {
    color: var(--dd-faint);
  }
  73.948% {
    color: var(--dd-accent);
  }
  85.96199999999999% {
    color: var(--dd-accent);
  }
  85.972% {
    color: var(--dd-faint);
  }
  100% {
    color: var(--dd-faint);
  }
}
@keyframes dd-rail {
  0% {
    color: var(--dd-faint);
  }
  55.902% {
    color: var(--dd-faint);
  }
  55.912% {
    color: var(--dd-accent);
  }
  85.96199999999999% {
    color: var(--dd-accent);
  }
  85.972% {
    color: var(--dd-faint);
  }
  100% {
    color: var(--dd-faint);
  }
}
@keyframes dd-rail-in {
  0% {
    color: var(--dd-faint);
  }
  55.902% {
    color: var(--dd-faint);
  }
  55.912% {
    color: var(--dd-accent);
  }
  85.96199999999999% {
    color: var(--dd-accent);
  }
  85.972% {
    color: var(--dd-faint);
  }
  100% {
    color: var(--dd-faint);
  }
}
@keyframes dd-hop1-draw {
  0% {
    transform: scaleY(0);
  }
  6.904% {
    transform: scaleY(0);
  }
  6.914% {
    transform: scaleY(0);
    animation-timing-function: ease-in-out;
  }
  16.934% {
    transform: scaleY(1);
  }
  85.96199999999999% {
    transform: scaleY(1);
  }
  85.972% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(0);
  }
}
@keyframes dd-hop2-draw {
  0% {
    transform: scaleY(0);
  }
  25.942% {
    transform: scaleY(0);
  }
  25.952% {
    transform: scaleY(0);
    animation-timing-function: ease-in-out;
  }
  35.972% {
    transform: scaleY(1);
  }
  85.96199999999999% {
    transform: scaleY(1);
  }
  85.972% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(0);
  }
}
@keyframes dd-hop3-draw {
  0% {
    transform: scaleY(0);
  }
  63.918% {
    transform: scaleY(0);
  }
  63.928% {
    transform: scaleY(0);
    animation-timing-function: ease-in-out;
  }
  73.948% {
    transform: scaleY(1);
  }
  85.96199999999999% {
    transform: scaleY(1);
  }
  85.972% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(0);
  }
}
@keyframes dd-rail-draw {
  0% {
    transform: scaleY(0);
  }
  47.886% {
    transform: scaleY(0);
  }
  47.896% {
    transform: scaleY(0);
    animation-timing-function: ease-in-out;
  }
  52.705% {
    transform: scaleY(1);
  }
  85.96199999999999% {
    transform: scaleY(1);
  }
  85.972% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(0);
  }
}
@keyframes dd-rail-in-draw-v {
  0% {
    transform: scaleY(0);
  }
  52.695% {
    transform: scaleY(0);
  }
  52.705% {
    transform: scaleY(0);
    animation-timing-function: ease-in-out;
  }
  53.908% {
    transform: scaleY(1);
  }
  85.96199999999999% {
    transform: scaleY(1);
  }
  85.972% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(0);
  }
}
@keyframes dd-rail-in-draw-h {
  0% {
    transform: scaleX(0);
  }
  53.898% {
    transform: scaleX(0);
  }
  53.908% {
    transform: scaleX(0);
    animation-timing-function: ease-in-out;
  }
  55.912% {
    transform: scaleX(1);
  }
  85.96199999999999% {
    transform: scaleX(1);
  }
  85.972% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(0);
  }
}

/* ── 2.3 loops, in motion: the desktop figure's clock as keyframes,
   generated in FeedbackLoops.tsx from the same numbers. A ball slides
   along a line; the box it reaches lights for the dwell. ─────────────── */
.dd-loops .dd-box,
.dd-loops .dd-vpair-pulse {
  animation-duration: var(--dd-loop-cycle);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
/* the loop lanes are taller than the pair elsewhere and the two lines sit
   further apart; the labels sit 9.5px clear of the lines' outer edges (the
   1px lines run from 14px to 15px either side of centre) */
.dd-loops .dd-vpair {
  height: 54px;
  gap: 28px;
}
.dd-loops .dd-vpair-down {
  right: calc(50% + 24.5px);
}
.dd-loops .dd-vpair-up {
  left: calc(50% + 24.5px);
}

/* ── prefers-reduced-motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .dd-mobile-figure *,
  .dd-mobile-figure *::before,
  .dd-mobile-figure *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ── the subsection picker: one open at a time ────────────────────────── */
.dd-mobile-picker {
  margin-top: 24px;
  border-top: 1px solid var(--dd-rule);
}
.dd-mobile-picker-item {
  border-bottom: 1px solid var(--dd-rule);
}
.dd-mobile-picker-trigger {
  scroll-margin-top: 12px;
}
.dd-mobile-picker-trigger {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 48px;
  width: 100%;
  padding: 13px 0;
  text-align: left;
  font-size: 12px;
  line-height: 1.7;
  cursor: pointer;
  color: var(--dd-muted);
}
.dd-mobile-picker-trigger > span:first-child {
  flex: none;
  color: var(--dd-accent);
}
.dd-mobile-picker-trigger > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.dd-mobile-picker-trigger > span:last-child {
  flex: none;
  color: var(--dd-accent);
}
.dd-mobile-picker-trigger[aria-expanded="true"] {
  color: var(--dd-ink);
}
.dd-mobile-picker-panel {
  padding: 12px 0 28px;
}
.dd-mobile-picker-panel > section {
  margin-top: 0;
}
.dd-mobile-picker-panel > section > h3 {
  display: none;
}
.dd-mobile-picker-panel > section > div {
  margin-top: 0;
}