.information-shell {
  width: min(76rem, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(32px, 5vw, 64px) 0 72px;
}

.information-hero {
  max-width: 54rem;
  margin-bottom: 32px;
}

.information-eyebrow {
  margin: 0 0 8px;
  color: var(--gold-data);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.information-hero h1 {
  margin: 0;
  font-size: clamp(32px, 6vw, 58px);
  line-height: 1;
  letter-spacing: -0.055em;
}

.information-lede {
  max-width: 48rem;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.65;
}

.information-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.information-card {
  min-width: 0;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.information-card.is-wide {
  grid-column: 1 / -1;
}

.information-card h2,
.information-card h3 {
  margin: 0;
  letter-spacing: -0.025em;
}

.information-card h2 {
  font-size: clamp(20px, 3vw, 27px);
}

.information-card h3 {
  font-size: 17px;
}

.information-card p,
.information-card li,
.information-card dd {
  color: var(--muted);
  line-height: 1.65;
}

.information-card p:last-child,
.information-card ul:last-child,
.information-card dl:last-child {
  margin-bottom: 0;
}

.information-card a,
.information-footer a {
  color: var(--control-link, var(--forest-soft));
  font-weight: 600;
  text-underline-offset: 3px;
}

.information-list {
  padding-left: 20px;
}

.information-list li + li {
  margin-top: 8px;
}

.definition-list {
  display: grid;
  grid-template-columns: minmax(9rem, 0.38fr) minmax(0, 1fr);
  gap: 12px 20px;
  margin: 18px 0 0;
}

.definition-list dt {
  font-weight: 700;
}

.definition-list dd {
  margin: 0;
}

.endpoint-list {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.endpoint {
  display: grid;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.endpoint code,
.inline-code {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
}

.endpoint p {
  margin: 0;
}

.information-footer {
  margin-top: 24px;
  color: var(--muted);
}

.system-overview {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.system-overview p {
  margin-bottom: 0;
}

.system-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--forest-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.system-state::before,
.check-state::before {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

[data-status="DEGRADED"] .system-state,
.operational-check[data-status="DEGRADED"] .check-state {
  color: var(--gold-data);
}

[data-status="OUT_OF_SERVICE"] .system-state,
[data-status="UNAVAILABLE"] .system-state,
.operational-check[data-status="OUT_OF_SERVICE"] .check-state {
  color: var(--rose);
}

.status-refresh {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  color: var(--control-accent-text);
  background: transparent;
  cursor: pointer;
  font-weight: 700;
}

.status-refresh:hover {
  border-color: var(--forest-soft);
  background: var(--panel-muted);
}

.operational-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.operational-check {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-muted);
}

.check-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.check-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--forest-soft);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.check-message,
.check-meta,
.check-action {
  margin: 10px 0 0;
}

.check-meta {
  font-family: var(--font-mono);
  font-size: 11px;
}

.check-action {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.check-action strong {
  color: var(--ink);
}

.status-checked-at {
  font-family: var(--font-mono);
  font-size: 11px;
}

/* System architecture page */
#systemIntro,
#systemDataPath,
#systemDecisions,
#systemOperations,
#systemChecks,
#systemHealth {
  scroll-margin-top: 90px;
}


.system-page {
  background:
    radial-gradient(circle at 8% 7%, rgba(213, 160, 33, 0.08), transparent 23rem),
    var(--ivory);
}

.system-shell {
  width: min(94rem, calc(100% - 32px));
  padding-top: 12px;
}

.system-hero {
  max-width: none;
  margin-bottom: clamp(40px, 6vw, 72px);
}

.system-hero h1 {
  position: relative;
  isolation: isolate;
}

.system-hero-source,
.system-hero-highlight-word {
  position: relative;
  z-index: 2;
  display: inline-block;
}

.system-hero-source {
  white-space: nowrap;
}

.system-hero-source::before,
.system-hero-source::after,
.system-hero-highlight-line::before,
.system-hero-highlight-line::after {
  position: absolute;
  right: 0;
  left: 0;
  z-index: -1;
  border-radius: 999px;
  content: "";
  pointer-events: none;
  transform: scaleX(0);
}

.system-hero-source::before,
.system-hero-highlight-line::before {
  bottom: 0;
  height: 0.13em;
  transform-origin: left center;
}

.system-hero-source::after,
.system-hero-highlight-line::after {
  bottom: 0.095em;
  height: 0.035em;
  transform-origin: right center;
}

.system-hero-source::before,
.system-hero-source::after {
  background: linear-gradient(90deg, #a8322d, #dc7a20);
}

.system-hero-highlight-line {
  position: absolute;
  top: var(--system-highlight-top);
  left: var(--system-highlight-left);
  z-index: 0;
  width: var(--system-highlight-width);
  height: 0.13em;
  pointer-events: none;
  transform: translateY(-100%);
}

.system-hero-highlight-line::before,
.system-hero-highlight-line::after {
  top: 0;
  background: linear-gradient(90deg, var(--gold-data), color-mix(in srgb, var(--forest-soft) 76%, var(--gold-data)));
}

.system-hero.is-visible .system-hero-source::before {
  animation: system-source-thick-loop 7.2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.system-hero.is-visible .system-hero-source::after {
  animation: system-source-thin-loop 7.2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.system-hero.is-visible .system-hero-highlight-line::before {
  animation: system-highlight-thick-loop 7.2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.system-hero.is-visible .system-hero-highlight-line::after {
  animation: system-highlight-thin-loop 7.2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.system-hero-signal {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  height: 0.13em;
  width: 0.13em;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform-origin: top left;
}

.system-hero.is-visible.has-signal-path .system-hero-signal {
  animation: system-signal-loop 7.2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes system-source-thick-loop {
  0%, 10% {
    transform: scaleX(0);
  }

  24%, 75% {
    transform: scaleX(1);
  }

  88%, 100% {
    transform: scaleX(0);
  }
}

@keyframes system-source-thin-loop {
  0%, 75% {
    transform: scaleX(0);
  }

  88%, 100% {
    transform: scaleX(1);
  }
}

@keyframes system-signal-loop {
  0%, 23.9% {
    opacity: 0;
    background: #dc7a20;
    transform: translate3d(var(--system-signal-source-end-x), var(--system-signal-source-end-y), 0);
  }

  24% {
    opacity: 1;
    background: #dc7a20;
    transform: translate3d(var(--system-signal-source-end-x), var(--system-signal-source-end-y), 0);
  }

  30.9% {
    opacity: 1;
    background: color-mix(in srgb, var(--forest-soft) 64%, var(--gold-data));
    transform: translate3d(var(--system-signal-target-x), var(--system-signal-target-y), 0);
  }

  31%, 67.9% {
    opacity: 0;
    background: color-mix(in srgb, var(--forest-soft) 64%, var(--gold-data));
    transform: translate3d(var(--system-signal-target-x), var(--system-signal-target-y), 0);
  }

  68% {
    opacity: 1;
    background: color-mix(in srgb, var(--forest-soft) 76%, var(--gold-data));
    transform: translate3d(var(--system-signal-target-x), var(--system-signal-target-y), 0);
  }

  74.9% {
    opacity: 1;
    background: #dc7a20;
    transform: translate3d(var(--system-signal-source-end-x), var(--system-signal-source-end-y), 0);
  }

  75%, 100% {
    opacity: 0;
    background: #dc7a20;
    transform: translate3d(var(--system-signal-source-end-x), var(--system-signal-source-end-y), 0);
  }
}

@keyframes system-highlight-thick-loop {
  0%, 31% {
    transform: scaleX(0);
  }

  48%, 55% {
    transform: scaleX(1);
  }

  68%, 100% {
    transform: scaleX(0);
  }
}

@keyframes system-highlight-thin-loop {
  0%, 55% {
    transform: scaleX(0);
  }

  68%, 100% {
    transform: scaleX(1);
  }
}

@keyframes system-source-underline {
  0% {
    background-position: left 96%;
    background-size: 0% 0.13em;
  }

  38%, 58% {
    background-position: left 96%;
    background-size: 100% 0.13em;
  }

  59% {
    background-position: right 96%;
    background-size: 100% 0.13em;
  }

  100% {
    background-position: right 96%;
    background-size: 0% 0.13em;
  }
}

@keyframes system-signal-handoff {
  0% {
    opacity: 0;
    background: #b4382e;
    transform: translate3d(var(--system-signal-start-x), var(--system-signal-start-y), 0) scale(0.35);
  }

  12% {
    opacity: 1;
    background: #dc7a20;
    transform: translate3d(var(--system-signal-start-x), var(--system-signal-start-y), 0) scale(1);
  }

  58% {
    opacity: 1;
    background: var(--gold-data);
  }

  88% {
    opacity: 1;
    background: color-mix(in srgb, var(--forest-soft) 64%, var(--gold-data));
    transform: translate3d(var(--system-signal-end-x), var(--system-signal-end-y), 0) scale(1);
  }

  100% {
    opacity: 0;
    background: var(--forest-soft);
    transform: translate3d(var(--system-signal-end-x), var(--system-signal-end-y), 0) scale(0.4);
  }
}

@keyframes system-highlight-draw {
  to {
    background-size: 100% 0.13em;
  }
}

.system-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.system-action {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 9px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  color: var(--forest-soft);
  background: var(--panel);
  font-weight: 700;
  text-decoration: none;
}

.system-action:hover {
  border-color: var(--forest-soft);
  background: var(--panel-muted);
}

.system-action.is-primary {
  border-color: var(--forest);
  color: #fffded;
  background: var(--forest);
}

.system-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin-top: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
  box-shadow: var(--shadow);
}

.system-facts div {
  display: grid;
  align-content: center;
  min-height: 96px;
  padding: 18px 20px;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
}

.system-facts strong {
  color: var(--forest-soft);
  font-size: clamp(21px, 2.4vw, 31px);
  letter-spacing: -0.045em;
}

.system-facts span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.system-section,
.verification-section,
.live-system-section {
  margin-top: clamp(48px, 7vw, 88px);
}

.system-plain-flow {
  display: grid;
  grid-template-columns: minmax(12rem, 0.32fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 38px);
  overflow: hidden;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid color-mix(in srgb, var(--gold-data) 32%, var(--forest-soft));
  border-radius: calc(var(--radius) + 2px);
  color: #fffef7;
  background:
    radial-gradient(circle at 12% 18%, rgb(255 197 38 / 14%), transparent 28%),
    linear-gradient(135deg, var(--forest) 0%, var(--forest-deep) 100%);
  box-shadow: var(--shadow);
}

.system-plain-flow h2 {
  margin: 0;
  font-size: clamp(20px, 2.4vw, 29px);
  letter-spacing: -0.04em;
}

.system-plain-flow .information-eyebrow {
  color: #f8c72f;
}

.system-plain-flow ol {
  position: relative;
  display: grid;
  grid-template-columns: 0.9fr 1.2fr 1fr;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.system-plain-flow ol::before {
  position: absolute;
  top: 22px;
  left: 7%;
  z-index: 0;
  content: "";
}

.system-plain-flow ol::before {
  right: 7%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(248 199 47 / 52%) 9% 91%, transparent);
}

.system-plain-flow li {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 14px;
  min-height: 142px;
  padding: 14px 16px 16px;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: calc(var(--radius) - 4px);
  background: rgb(255 254 247 / 11%);
}

.system-plain-flow li > span {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid rgb(248 199 47 / 66%);
  border-radius: 50%;
  color: #f8c72f;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  background: var(--forest-deep);
  box-shadow: 0 0 0 5px var(--forest);
}

.system-plain-flow strong {
  display: block;
  color: #fffef7;
  font-size: 15px;
}

.system-plain-flow p {
  margin: 6px 0 0;
  color: rgb(255 254 247 / 72%);
  font-size: 11px;
  line-height: 1.55;
}

.architecture-section {
  margin-top: clamp(38px, 5vw, 64px);
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 22px;
}

.section-heading h2 {
  max-width: 56rem;
  margin: 0;
  font-size: clamp(23px, 3vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.045em;
}

.section-heading > p {
  max-width: 32rem;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.compact-heading {
  align-items: start;
  margin-bottom: 20px;
}

.compact-heading h2 {
  font-size: clamp(21px, 2.3vw, 29px);
}

.architecture-legend {
  display: flex;
  justify-content: flex-end;
  gap: 22px;
  margin: -4px 2px 12px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
}

.architecture-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.legend-line {
  width: 30px;
  border-top: 2px solid var(--forest-soft);
}

.legend-line.is-dashed {
  border-top-style: dashed;
  border-top-color: var(--rose);
}

.architecture-stage > * { position: relative; z-index: 1; }

.grid-light,
.architecture-stage > .grid-light,
.api-guardrails > .grid-light {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  mask-image:
    linear-gradient(#000 1px, rgb(0 0 0 / 20%) 1px, transparent 4px, transparent 29px, rgb(0 0 0 / 20%) 32px),
    linear-gradient(90deg, #000 1px, rgb(0 0 0 / 20%) 1px, transparent 4px, transparent 29px, rgb(0 0 0 / 20%) 32px);
  mask-size: 32px 32px;
  mask-repeat: repeat;
}

.grid-light-beam {
  position: absolute;
  inset: 0 -55%;
  background: linear-gradient(112deg, transparent 42%, var(--grid-light-color, #f8c72f) 49%,
    var(--grid-light-color, #f8c72f) 51%, transparent 58%);
  opacity: 0;
  animation: grid-light-sweep 7.2s ease-in-out infinite;
}
.architecture-stage .grid-light-beam {
  inset: -42% 0;
  background: linear-gradient(to bottom, transparent 35%, var(--gold-data) 47%, var(--gold-data) 53%, transparent 65%);
  animation: grid-light-descent 8s linear infinite;
}
.status-overview { --grid-light-color: #d9959e; }

@keyframes grid-light-sweep {
  0%, 8% { transform: translate3d(-42%, 0, 0); opacity: 0; }
  16%, 82% { opacity: 0.72; }
  92%, 100% { transform: translate3d(42%, 0, 0); opacity: 0; }
}
@keyframes grid-light-descent {
  0%, 10% { transform: translate3d(0, -44%, 0); opacity: 0; }
  17%, 83% { opacity: 0.72; }
  90%, 100% { transform: translate3d(0, 44%, 0); opacity: 0; }
}

/* Decorative motion stops outside the viewport and while the tab is hidden. */
.motion-paused, .motion-paused::before, .motion-paused::after,
.motion-paused *, .motion-paused *::before, .motion-paused *::after,
html.motion-suspended body, html.motion-suspended body::before, html.motion-suspended body::after,
html.motion-suspended body *, html.motion-suspended body *::before, html.motion-suspended body *::after {
  animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) { .grid-light { display: none; } }

.architecture-stage {
  position: relative;
  overflow: hidden;
  padding: clamp(18px, 3vw, 34px);
  border: 1px solid var(--line-strong);
  border-radius: calc(var(--radius) + 4px);
  background:
    linear-gradient(color-mix(in srgb, var(--forest-soft) 16%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--forest-soft) 16%, transparent) 1px, transparent 1px),
    linear-gradient(145deg,
      color-mix(in srgb, var(--forest-soft) 11%, var(--panel-muted)),
      color-mix(in srgb, var(--gold-data) 5%, var(--panel-muted)));
  background-size: 32px 32px;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--forest-soft) 9%, transparent),
    inset 0 0 56px color-mix(in srgb, var(--forest-soft) 5%, transparent),
    var(--shadow);
}

.architecture-entry {
  display: grid;
  grid-template-areas: "tomtom routes cdot";
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(12px, 2vw, 24px);
}

.route-authority { grid-area: routes; }
.provider-tomtom { grid-area: tomtom; }
.provider-cdot { grid-area: cdot; }

.architecture-node,
.pipeline-card,
.provider-control {
  --architecture-trace-color: var(--line-strong);
  position: relative;
  min-width: 0;
  transition: border-color 160ms ease;
}

.architecture-node {
  border: 1px solid color-mix(in srgb, var(--architecture-trace-color) 28%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 96%, white);
  box-shadow: 0 9px 24px rgba(0, 37, 0, 0.085);
}

.architecture-node:focus-visible,
.pipeline-card:focus-visible,
.provider-control:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.architecture-stage.has-active-flow [data-architecture-flow].is-related {
  opacity: 1;
}

.architecture-node::after,
.pipeline-card::after,
.provider-control::after {
  position: absolute;
  inset: -2px;
  z-index: 2;
  border: 2px solid var(--architecture-trace-color);
  border-radius: inherit;
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: scale(0.992);
  transition: opacity 120ms ease, transform 180ms cubic-bezier(0.2, 0.72, 0.2, 1);
}

.architecture-node.is-related::after,
.pipeline-card.is-related::after,
.provider-control.is-related::after,
.modular-panel:hover::after,
.modular-panel:focus-visible::after {
  opacity: 1;
  transform: scale(1);
}

.has-border-trace::after { display: none; }

.panel-border-trace {
  position: absolute;
  top: -2px;
  left: -2px;
  z-index: 2;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  overflow: visible;
  pointer-events: none;
}

.panel-border-trace path {
  fill: none;
  stroke: var(--architecture-trace-color);
  stroke-width: 2;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 720ms cubic-bezier(0.3, 0.75, 0.25, 1);
}

.is-related > .panel-border-trace path,
.modular-panel:hover > .panel-border-trace path,
.modular-panel:focus-visible > .panel-border-trace path { stroke-dashoffset: 0; }

.route-authority, .provider-cdot, .persistence-node, .incident-pipeline {
  --architecture-trace-color: var(--rose);
}
.provider-node, .api-node, .flow-pipeline, .provider-control {
  --architecture-trace-color: var(--gold-data);
}
.provider-cdot { --architecture-trace-color: var(--rose); }
.ingest-node, .dashboard-node { --architecture-trace-color: var(--forest-soft); }

.node-title,
.provider-control-title,
.pipeline-heading,
.runtime-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.node-title svg,
.provider-control-title svg,
.pipeline-heading svg,
.runtime-title svg,
.verification-source svg {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.node-title span,
.provider-node span,
.provider-control-title span,
.node-heading > div > span,
.pipeline-heading span,
.runtime-title span {
  display: block;
  color: var(--forest-soft);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.node-title strong,
.provider-node strong,
.provider-control-title strong {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  line-height: 1.25;
}

.route-authority {
  padding: 20px;
  border-top: 3px solid var(--rose);
}

.route-authority > p,
.provider-node > p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.route-authority ul {
  margin: 12px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.65;
}

.provider-node {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: start;
  column-gap: 12px;
  padding: 20px;
  border-top: 3px solid var(--gold-data);
  background: color-mix(in srgb, var(--panel-muted) 58%, var(--panel));
}

.provider-node > p {
  grid-column: 1 / -1;
}

.provider-cdot {
  border-top-color: var(--rose);
}

.provider-mark {
  display: grid;
  place-items: center;
  width: 60px;
  height: 38px;
  padding: 5px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--architecture-trace-color) 24%, var(--line));
  border-radius: 9px;
  background: #fff;
}

.provider-cdot .provider-mark {
  width: 38px;
  padding: 0;
  border-radius: 50%;
}

.provider-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.architecture-connectors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 24px);
}

.architecture-entry-connectors {
  height: 42px;
}

.architecture-link {
  --architecture-link-origin: var(--forest-soft);
  --architecture-link-target: var(--forest-soft);
  --architecture-link-length: 42px;
  --architecture-link-offset: 0px;
  --architecture-pulse-delay: 0s;
  position: relative;
  align-self: start;
  justify-self: center;
  width: 2px;
  height: var(--architecture-link-length);
  background: linear-gradient(to bottom, var(--architecture-link-origin), var(--architecture-link-target));
  transform: translateY(var(--architecture-link-offset));
  transition: opacity 160ms ease;
}

.architecture-link::before {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: 6px;
  height: 6px;
  border: 1px solid var(--panel);
  border-radius: 50%;
  background: var(--architecture-link-origin);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--architecture-link-origin) 16%, transparent);
  content: "";
  opacity: 0;
  transform: translate3d(-50%, -4px, 0);
  animation: architecture-data-pulse 4.8s ease-in-out var(--architecture-pulse-delay) infinite;
}

.architecture-link::after {
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--architecture-link-target);
  border-bottom: 2px solid var(--architecture-link-target);
  content: "";
  transform: translateX(-50%) rotate(45deg);
}

.architecture-link.is-dashed {
  width: 0;
  border-left: 2px dashed var(--architecture-link-origin);
  background: none;
}

.architecture-link.is-dashed::after {
  border-color: var(--architecture-link-target);
}

.architecture-link[data-connector-from="tomtomProvider"] {
  --architecture-link-origin: var(--gold-data);
  --architecture-link-target: var(--forest-soft);
}

.architecture-link[data-connector-from="routeAuthority"] {
  --architecture-link-origin: var(--rose);
  --architecture-link-target: var(--forest-soft);
}

.architecture-link[data-connector-from="cdotProvider"] {
  --architecture-link-origin: var(--rose);
  --architecture-link-target: var(--forest-soft);
}

.architecture-link[data-connector-from="ingestService"] {
  --architecture-link-origin: var(--forest-soft);
  --architecture-link-target: var(--rose);
}

.architecture-link[data-connector-from="trafficStore"] {
  --architecture-link-origin: var(--rose);
  --architecture-link-target: var(--gold-data);
}

.architecture-link[data-connector-from="trafficApi"] {
  --architecture-link-origin: var(--gold-data);
  --architecture-link-target: var(--forest-soft);
}

.architecture-entry-connectors .architecture-link:nth-child(1) {
  --architecture-pulse-delay: -0.5s;
}

.architecture-entry-connectors .architecture-link:nth-child(2) {
  --architecture-pulse-delay: -1.3s;
}

.architecture-entry-connectors .architecture-link:nth-child(3) {
  --architecture-pulse-delay: -2.1s;
}

.ingest-node + .architecture-downlink .architecture-link {
  --architecture-pulse-delay: -2.9s;
}

.persistence-node + .architecture-downlink .architecture-link {
  --architecture-pulse-delay: -3.7s;
}

.api-node + .architecture-downlink .architecture-link {
  --architecture-pulse-delay: -4.5s;
}

@keyframes architecture-data-pulse {
  0%, 12% {
    background: var(--architecture-link-origin);
    opacity: 0;
    transform: translate3d(-50%, -4px, 0) scale(0.72);
  }
  24% {
    background: var(--architecture-link-origin);
    opacity: 0.95;
    transform: translate3d(-50%, 4px, 0) scale(1);
  }
  54% {
    background: color-mix(in srgb, var(--architecture-link-origin) 50%, var(--architecture-link-target));
  }
  78% {
    background: var(--architecture-link-target);
    opacity: 0.95;
  }
  92%, 100% {
    background: var(--architecture-link-target);
    opacity: 0;
    transform: translate3d(-50%, calc(var(--architecture-link-length) - 8px), 0) scale(0.72);
  }
}
.ingest-node {
  padding: clamp(18px, 3vw, 30px);
  border-top: 4px solid var(--forest-soft);
}

.architecture-doc-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 18px;
  padding: 14px 4px 0;
  color: var(--muted);
  font-size: 11px;
}

.architecture-doc-links span {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.architecture-doc-links a {
  color: var(--forest-soft);
  font-weight: 700;
  text-underline-offset: 3px;
}

.node-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.node-heading h3 {
  margin: 3px 0 0;
  font-size: clamp(19px, 2vw, 25px);
  letter-spacing: -0.035em;
}

.node-heading > p {
  max-width: 26rem;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  text-align: right;
}

.node-heading.compact {
  align-items: center;
  margin-bottom: 18px;
}

.ingest-pipelines {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.pipeline-card,
.provider-control {
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-muted);
}

.pipeline-heading svg {
  color: var(--gold-data);
}

.incident-pipeline .pipeline-heading svg {
  color: var(--rose);
}

.pipeline-heading h4 {
  margin: 1px 0 0;
  font-size: 18px;
}

.pipeline-steps {
  display: grid;
  gap: 0;
  margin: 16px 0 0;
  padding: 0;
  counter-reset: pipeline;
  list-style: none;
}

.pipeline-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  min-height: 32px;
  color: var(--muted);
  font-size: 12px;
  counter-increment: pipeline;
}

.pipeline-steps li::before {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--muted);
  background: var(--panel);
  content: counter(pipeline, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 7px;
}

.pipeline-steps li:not(:last-child)::after {
  position: absolute;
  top: 24px;
  bottom: -8px;
  left: 8px;
  width: 1px;
  background: var(--line-strong);
  content: "";
}

.pipeline-note,
.pipeline-callout {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.pipeline-callout {
  color: var(--ink);
  font-weight: 700;
}

.pipeline-callout + .pipeline-note {
  margin-top: 8px;
  padding-top: 0;
  border-top: 0;
}

.provider-control {
  display: grid;
  grid-template-columns: minmax(14rem, 0.7fr) minmax(0, 1.3fr);
  align-items: center;
  gap: 20px;
  margin-top: 14px;
  border-top: 3px solid var(--gold-data);
}

.provider-control ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 18px;
  margin: 0;
  padding: 0;
  color: var(--muted);
  font-size: 11px;
  list-style: none;
}

.provider-control li::before {
  margin-right: 6px;
  color: var(--gold-data);
  content: "◆";
  font-size: 7px;
}

.architecture-downlink {
  display: grid;
  place-items: center;
  height: 42px;
}

.persistence-node,
.api-node {
  padding: clamp(18px, 3vw, 28px);
}

.persistence-node {
  border-top: 4px solid var(--rose);
}

.api-node {
  border-top: 4px solid var(--gold-data);
}

.history-callout {
  margin: 0;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--gold-data) 55%, var(--line));
  border-radius: 999px;
  color: var(--gold-data);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
}

.persistence-groups,
.api-capabilities {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
}

.persistence-groups section,
.api-capabilities section {
  padding: 16px;
  background: var(--panel-muted);
}

.persistence-groups section + section,
.api-capabilities section + section {
  border-left: 1px solid var(--line);
}

.persistence-groups h4,
.api-capabilities h4 {
  margin: 0 0 7px;
  color: var(--forest-soft);
  font-size: 13px;
}

.persistence-groups p,
.api-capabilities p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.65;
}

.node-footnote {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.dashboard-node {
  display: grid;
  grid-template-columns: minmax(15rem, 0.65fr) minmax(0, 1.2fr) auto;
  align-items: center;
  gap: 24px;
  padding: 22px 26px;
  border-top: 4px solid var(--forest-soft);
}

.dashboard-node > p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.dashboard-contract {
  max-width: 14rem;
  color: var(--forest-soft);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-align: right;
}

.system-insights {
  display: grid;
  grid-template-columns: 1.25fr 0.875fr 0.875fr;
  gap: 16px;
  margin-top: 16px;
}

.insight {
  position: relative;
  overflow: hidden;
  min-height: 220px;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  transition:
    border-color 620ms ease,
    transform 180ms ease,
    color 620ms ease;
}

.insight::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  background:
    radial-gradient(280px circle at 82% 18%, color-mix(in srgb, var(--gold-data) 18%, transparent), transparent 68%),
    linear-gradient(145deg, var(--forest) 0%, var(--forest-deep) 100%);
  pointer-events: none;
  content: "";
  transition: opacity 650ms ease;
}

.insight::after {
  position: absolute;
  right: 16px;
  bottom: -18px;
  z-index: 0;
  color: var(--forest-soft);
  font-family: var(--font-mono);
  font-size: clamp(68px, 8vw, 112px);
  font-weight: 700;
  letter-spacing: -0.08em;
  opacity: 0.055;
  pointer-events: none;
  content: attr(data-index);
  transition: color 620ms ease, opacity 620ms ease;
}

.insight > * {
  position: relative;
  z-index: 1;
}

.insight:hover {
  border-color: color-mix(in srgb, var(--gold-data) 45%, var(--line));
  color: #fffded;
  transform: translateY(-3px);
  transition-duration: 180ms, 180ms, 180ms;
}

.insight:hover::before {
  opacity: 1;
  transition-duration: 220ms;
}

.insight:hover::after {
  color: #fffded;
  opacity: 0.08;
  transition-duration: 220ms, 220ms;
}

.insight:hover p {
  color: rgb(255 253 237 / 72%);
  transition-duration: 220ms;
}

.insight > span {
  color: var(--gold-data);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.insight h2 {
  margin: 10px 0 0;
  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.18;
  letter-spacing: -0.035em;
}

.insight p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
  transition: color 620ms ease;
}

.runtime-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 0.65fr);
  gap: 16px;
  margin-top: clamp(48px, 7vw, 88px);
}

.runtime-panel,
.operations-panel,
.verification-section,
.live-system-section {
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.runtime-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 5%, rgba(213, 160, 33, 0.1), transparent 28%),
    var(--panel);
}

.operations-panel {
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--forest-soft) 10%, transparent), transparent 34%),
    var(--panel);
}

.runtime-path {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) minmax(3.5rem, 0.45fr) minmax(9rem, 1fr) minmax(3.5rem, 0.45fr) minmax(9rem, 1fr);
  align-items: center;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(15, 91, 52, 0.035) 50%, transparent 50.2%),
    var(--panel-muted);
}

.runtime-hop {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 13px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 8px 22px rgba(8, 51, 30, 0.06);
  transition: border-color 180ms ease, transform 180ms ease;
}

.runtime-hop:hover {
  border-color: color-mix(in srgb, var(--forest-soft) 55%, var(--line));
  transform: translateY(-2px);
}

.runtime-hop-icon {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--forest-soft) 38%, var(--line));
  border-radius: 50%;
  color: var(--forest-soft);
  background: color-mix(in srgb, var(--panel) 80%, var(--forest-soft));
}

.runtime-hop-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.runtime-hop-icon-brand img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.runtime-hop-icon-caddy img {
  width: 24px;
  height: 24px;
}

.runtime-hop-icon-hetzner {
  width: 48px;
  border-radius: 7px;
  background: #f4f4f4;
}

.runtime-hop-icon-hetzner img {
  width: 43px;
  mix-blend-mode: multiply;
}

.runtime-hop-copy {
  display: grid;
  gap: 2px;
}

.runtime-hop-copy strong {
  font-size: 12px;
  line-height: 1.15;
}

.runtime-hop-copy small,
.runtime-connector span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1.3;
}

.runtime-connector {
  --runtime-rail-center: 9px;
  position: relative;
  display: block;
  height: 30px;
  font-style: normal;
}

.runtime-connector::before {
  position: absolute;
  top: calc(var(--runtime-rail-center) - 1px);
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--forest-soft), var(--gold-data));
  content: "";
}

.runtime-connector::after {
  position: absolute;
  top: calc(var(--runtime-rail-center) - 5px);
  left: 0;
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  border: 2px solid var(--panel-muted);
  border-radius: 50%;
  background: var(--gold-data);
  box-shadow: 0 0 0 3px rgba(213, 160, 33, 0.12);
  content: "";
  opacity: 0;
}

.runtime-connector:nth-of-type(2)::after {
}

.runtime-connector span {
  position: absolute;
  top: 17px;
  left: 50%;
  transform: translateX(-50%);
}

.compose-runtime {
  position: relative;
  display: grid;
  flex: 1;
  grid-template-rows: auto minmax(min-content, 1fr) auto;
  margin-top: 12px;
  padding: 19px;
  border: 1px solid color-mix(in srgb, var(--forest-soft) 42%, var(--line));
  border-top-width: 3px;
  border-radius: 10px;
  background:
    linear-gradient(145deg, rgba(15, 91, 52, 0.05), transparent 46%),
    var(--panel-muted);
}

.compose-runtime::before {
  position: absolute;
  top: -13px;
  right: 15%;
  width: 1px;
  height: 10px;
  background: var(--forest-soft);
  content: "";
}

.runtime-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--forest-soft);
  font-weight: 700;
}

.runtime-title > span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.runtime-title svg {
  width: 18px;
  height: 18px;
}

.runtime-title small {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
}

.runtime-services {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(58px, auto));
  align-content: center;
  gap: 10px;
  margin-top: 14px;
}

.runtime-services::before {
  position: absolute;
  top: 50%;
  right: 5%;
  left: 5%;
  height: 1px;
  background: color-mix(in srgb, var(--forest-soft) 36%, var(--line));
  content: "";
}

.runtime-services::after {
  position: absolute;
  top: 5%;
  bottom: 5%;
  left: 50%;
  width: 1px;
  background: color-mix(in srgb, var(--forest-soft) 36%, var(--line));
  content: "";
}

.runtime-service {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 7px;
  padding: 10px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--service-color, var(--forest-soft));
  border-radius: 7px;
  background: var(--panel);
  box-shadow: 0 5px 14px rgba(8, 51, 30, 0.06);
  transition: transform 180ms ease;
  align-content: center;
}

.runtime-service:hover {
  transform: translateY(-2px);
}

.runtime-service svg {
  grid-row: 1 / 3;
  align-self: center;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  color: var(--service-color, var(--forest-soft));
}

.runtime-service strong {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.1;
}

.runtime-service small {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 8px;
  line-height: 1.1;
}

.runtime-service-routes,
.runtime-service-ingest {
  --service-color: var(--forest-soft);
}

.runtime-service-api {
  --service-color: var(--gold-data);
}

.runtime-service-database {
  --service-color: var(--rose);
}

.compose-runtime p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.operations-cycle {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--gold-data) 28%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--gold-data) 5%, var(--panel-muted));
}

.operations-cycle > span:last-child {
  display: grid;
  gap: 2px;
}

.operations-cycle strong {
  font-size: 11px;
}

.operations-cycle small {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.02em;
}

.operations-cycle-mark {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  color: var(--gold-data);
  background: var(--panel);
}

.operations-cycle-mark::before {
  position: absolute;
  inset: -3px;
  border: 2px solid transparent;
  border-top-color: var(--gold-data);
  border-right-color: color-mix(in srgb, var(--forest-soft) 70%, var(--gold-data));
  border-radius: 50%;
  content: "";
}

.operations-cycle-mark svg,
.operations-step-marker svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.operations-cycle-mark svg {
  width: 17px;
  height: 17px;
}

.operations-list {
  position: relative;
  display: grid;
  gap: 7px;
  padding: 2px 0;
}

.operations-list::before {
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 16px;
  width: 2px;
  background: linear-gradient(var(--gold-data), var(--forest-soft), var(--rose));
  content: "";
}

.operations-step {
  --operation-color: var(--forest-soft);
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 51px;
  padding: 8px 10px 8px 6px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--operation-color);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-muted) 92%, var(--operation-color));
  box-shadow: 0 4px 12px rgba(8, 51, 30, 0.035);
  transition: border-color 180ms ease, transform 180ms ease;
}

.operations-step:hover {
  border-color: color-mix(in srgb, var(--operation-color) 56%, var(--line));
  transform: translateX(3px);
}

.operations-step-marker {
  position: relative;
  z-index: 1;
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--operation-color) 58%, var(--line));
  border-radius: 50%;
  color: var(--operation-color);
  background: var(--panel);
}

.operations-step-marker::after {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  width: 14px;
  height: 14px;
  place-items: center;
  border-radius: 50%;
  color: var(--panel);
  background: var(--operation-color);
  content: attr(data-step);
  font-family: var(--font-mono);
  font-size: 6px;
  font-weight: 700;
}

.operations-step-marker svg {
  width: 17px;
  height: 17px;
}

.operations-step-copy {
  display: grid;
  gap: 2px;
}

.operations-step-copy strong {
  font-size: 12px;
}

.operations-step-copy small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.operations-step-health {
  --operation-color: var(--gold-data);
}

.operations-step-backups {
  --operation-color: var(--rose);
}

.operations-step-recovery {
  --operation-color: var(--forest-soft);
}

.operations-coverage {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.operations-coverage > strong {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.operations-coverage ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin: 7px 0 0;
  padding: 0;
  list-style: none;
}

.operations-coverage li {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 5px;
  padding: 5px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--panel-muted);
  font-family: var(--font-mono);
  font-size: 8px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

.operations-coverage li::before {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--forest-soft);
  content: "";
}







.verification-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 87% 0%, color-mix(in srgb, var(--gold-data) 13%, transparent), transparent 28%),
    linear-gradient(135deg, color-mix(in srgb, var(--forest-soft) 5%, transparent), transparent 46%),
    var(--panel);
}

.verification-console {
  position: relative;
  overflow: hidden;
  margin-top: 20px;
  padding: clamp(14px, 2vw, 22px);
  border: 1px solid color-mix(in srgb, var(--forest-soft) 46%, var(--line));
  border-radius: calc(var(--radius) - 3px);
  background:
    linear-gradient(color-mix(in srgb, var(--forest-soft) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--forest-soft) 6%, transparent) 1px, transparent 1px),
    color-mix(in srgb, var(--panel-muted) 80%, var(--panel));
  background-size: 26px 26px;
}

.verification-console::after {
  position: absolute;
  z-index: 0;
  top: -45%;
  right: 0;
  left: 0;
  height: 42%;
  background: linear-gradient(transparent, color-mix(in srgb, var(--gold-data) 12%, transparent), transparent);
  opacity: 0;
  pointer-events: none;
  content: "";
}

.verification-console.is-active::after {
}

.verification-track {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 16px);
}

.verification-track-line {
  position: absolute;
  top: 23px;
  right: 12.5%;
  left: 12.5%;
  z-index: 0;
  height: 2px;
  overflow: hidden;
  background: color-mix(in srgb, var(--line-strong) 76%, transparent);
}

.verification-track-line::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--forest-soft), var(--gold-data) 62%, var(--forest-soft));
  opacity: 0.36;
  content: "";
}

.verification-track-line i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 52px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--gold-data) 64%, #fff2a7);
  box-shadow: 0 0 12px color-mix(in srgb, var(--gold-data) 70%, transparent);
  opacity: 0;
  transform: translate(-100%, -50%);
}

.verification-console.is-active .verification-track-line i {
}

.verification-stage {
  --verification-accent: var(--forest-soft);
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 46px auto auto auto;
  justify-items: center;
  min-width: 0;
  padding: 0 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  box-shadow: 0 8px 18px rgb(0 37 0 / 4%);
  text-align: center;
  transition: border-color 220ms ease, transform 220ms ease;
}

.verification-stage:hover {
  border-color: color-mix(in srgb, var(--verification-accent) 68%, var(--line));
  transform: translateY(-3px);
}

.verification-stage-automation,
.verification-stage-gates {
  --verification-accent: var(--gold-data);
}

.verification-stage-change {
  --verification-stage-delay: 0.8s;
}

.verification-stage-automation {
  --verification-stage-delay: 2.6s;
}

.verification-stage-gates {
  --verification-stage-delay: 9s;
}

.verification-stage-ready {
  --verification-accent: var(--forest-soft);
  --verification-stage-delay: 11.5s;
}

.verification-stage-icon {
  position: relative;
  display: grid;
  width: 46px;
  height: 46px;
  border: 2px solid color-mix(in srgb, var(--verification-accent) 76%, var(--panel));
  border-radius: 50%;
  color: var(--verification-accent);
  background: var(--panel);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--panel) 92%, transparent);
  place-items: center;
  transform: translateY(-1px);
}

.verification-stage-icon::before {
  position: absolute;
  inset: -7px;
  border: 2px solid transparent;
  border-top-color: var(--verification-accent);
  border-right-color: color-mix(in srgb, var(--verification-accent) 56%, transparent);
  border-radius: 50%;
  opacity: 0;
  content: "";
  pointer-events: none;
}

.verification-stage-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.verification-console.is-active .verification-stage-icon {
}

.verification-console.is-active .verification-stage-icon::before {
}

.verification-console.is-active .verification-stage-automation .verification-stage-icon::before {
}

.verification-stage > small {
  margin-top: 9px;
  color: var(--verification-accent);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.verification-stage > strong {
  margin-top: 5px;
  font-size: clamp(11px, 1.2vw, 14px);
  line-height: 1.15;
}

.verification-stage > p {
  margin: 4px 0 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 8px;
  line-height: 1.35;
}

.verification-gate-bank {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(11rem, 0.68fr) minmax(0, 1.85fr);
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--line-strong) 60%, transparent);
}

.verification-gate-bank::before,
.verification-gate-bank::after {
  position: absolute;
  top: -15px;
  width: 1px;
  height: 14px;
  background: color-mix(in srgb, var(--gold-data) 58%, var(--line));
  content: "";
}

.verification-gate-bank::before {
  left: 37.5%;
}

.verification-gate-bank::after {
  left: 62.5%;
}

.verification-gate-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px;
  border-left: 3px solid var(--gold-data);
  border-radius: 0 10px 10px 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold-data) 10%, transparent), transparent);
}

.verification-gate-intro > span {
  color: var(--gold-data);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.verification-gate-intro > strong {
  margin-top: 5px;
  font-size: clamp(13px, 1.4vw, 17px);
  line-height: 1.12;
}

.verification-gate-intro > p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.verification-checks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.verification-checks li {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  overflow: hidden;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 91%, transparent);
  transition: border-color 220ms ease, background 220ms ease, transform 220ms ease;
}

.verification-checks li::before {
  position: absolute;
  top: 0;
  right: 100%;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--forest-soft), var(--gold-data));
  opacity: 1;
  content: "";
  transition: right 520ms cubic-bezier(0.2, 0.75, 0.25, 1), opacity 160ms ease;
}

.verification-console.is-active .verification-checks li.is-complete::before {
  right: 0;
}

.verification-checks li:hover {
  border-color: color-mix(in srgb, var(--forest-soft) 55%, var(--line));
  background: color-mix(in srgb, var(--forest-soft) 7%, var(--panel));
  transform: translateY(-2px);
}

.verification-checks svg {
  width: 19px;
  height: 19px;
  color: var(--forest-soft);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.verification-checks span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.verification-checks strong {
  overflow: hidden;
  font-size: 10px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.verification-checks small {
  overflow: hidden;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 7.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.verification-checks i {
  width: 7px;
  height: 7px;
  border: 1px solid color-mix(in srgb, var(--forest-soft) 72%, var(--line));
  border-radius: 50%;
  background: var(--panel);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--forest-soft) 8%, transparent);
  transition: background 220ms ease, box-shadow 220ms ease;
}

.verification-console.is-active .verification-checks li.is-complete i {
  background: var(--forest-soft);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--forest-soft) 13%, transparent), 0 0 11px color-mix(in srgb, var(--forest-soft) 55%, transparent);
}











.live-system-section {
  overflow: hidden;
  margin-bottom: 20px;
  background:
    radial-gradient(circle at 88% 4%, color-mix(in srgb, var(--gold-data) 9%, transparent), transparent 28rem),
    var(--panel);
}

.status-overview {
  --status-accent: #8eb59a;
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 3vw, 30px);
  border-color: color-mix(in srgb, var(--status-accent) 54%, transparent);
  color: #fffdf0;
  background:
    linear-gradient(115deg, rgb(0 37 0 / 98%), rgb(2 54 24 / 95%)),
    var(--forest-deep);
  box-shadow: none;
}

.status-overview::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image:
    linear-gradient(rgb(111 208 146 / 11%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(111 208 146 / 11%) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(90deg, transparent, #000 38%, #000);
  content: "";
  pointer-events: none;
}

.status-ecg {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: calc(100% - 64px);
  height: clamp(160px, 20vw, 220px);
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.status-ecg path {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.status-ecg-pulse {
  stroke: url("#statusEcgGradient");
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  filter: drop-shadow(0 0 6px rgb(217 149 158 / 72%));
}

.status-ecg-reveal {
  width: 0;
}

.status-overview.is-heartbeat .status-ecg-reveal {
  animation: status-ecg-reveal 2.6s cubic-bezier(0.22, 0.72, 0.2, 1) both;
}

.status-overview.is-heartbeat .status-ecg {
  animation: status-ecg-handoff 2.6s ease-in-out both;
}

.status-overview.is-heartbeat .status-copy,
.status-overview.is-heartbeat .status-signal {
  animation: status-content-yield 2.6s ease-in-out both;
}

.status-overview.is-heartbeat .status-snapshot {
  animation: status-snapshot-yield 2.6s ease-in-out both;
}

.status-sync-callout {
  position: absolute;
  top: 13px;
  right: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 28px);
  padding: 7px 10px;
  border: 1px solid rgb(217 149 158 / 28%);
  border-radius: 999px;
  color: rgb(255 253 240 / 76%);
  background: rgb(0 20 5 / 72%);
  box-shadow: 0 8px 22px rgb(0 0 0 / 18%);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 180ms ease, transform 180ms ease, border-color 180ms ease;
}

.status-sync-callout i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #d9959e;
  box-shadow: 0 0 0 0 rgb(217 149 158 / 40%);
}

.status-overview.is-heartbeat .status-sync-callout {
  opacity: 1;
  transform: translateY(0);
}

.status-overview.is-heartbeat .status-sync-callout i {
  animation: status-sync-dot 1s ease-out infinite;
}

.status-overview.is-sync-complete .status-sync-callout {
  border-color: rgb(111 208 146 / 34%);
}

.status-overview.is-sync-complete .status-sync-callout i {
  background: #6fd092;
  animation: none;
}

.status-overview.is-sync-failed .status-sync-callout i {
  background: #d9959e;
  animation: none;
}

.status-overview[data-status="HEALTHY"] {
  --status-accent: #6fd092;
}

.status-overview[data-status="DEGRADED"] {
  --status-accent: #e0ad35;
}

.status-overview[data-status="OUT_OF_SERVICE"],
.status-overview[data-status="UNAVAILABLE"] {
  --status-accent: #d9959e;
}

.status-overview.is-refreshing {
  --status-accent: #e0ad35;
}

.system-overview {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(7rem, 0.34fr) minmax(18rem, 1.12fr) minmax(18rem, 0.88fr);
  align-items: stretch;
  gap: clamp(18px, 3vw, 36px);
}

.status-signal {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 14px;
  min-width: 0;
  border-right: 1px solid rgb(255 253 240 / 15%);
}

.status-beacon {
  position: relative;
  display: grid;
  width: clamp(76px, 8vw, 104px);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--status-accent) 76%, transparent);
  border-radius: 50%;
  color: var(--status-accent);
  background: radial-gradient(circle, color-mix(in srgb, var(--status-accent) 18%, transparent), transparent 64%);
  box-shadow:
    inset 0 0 28px color-mix(in srgb, var(--status-accent) 12%, transparent),
    0 0 28px color-mix(in srgb, var(--status-accent) 12%, transparent);
}

.status-beacon::before,
.status-beacon::after {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--status-accent) 54%, transparent);
  border-radius: 50%;
  content: "";
  animation: status-beacon-pulse 2.8s ease-out infinite;
}

.status-beacon::before {
  inset: 12%;
}

.status-beacon::after {
  inset: 2%;
  animation-delay: 1.4s;
}

.status-beacon svg {
  width: 38%;
  height: 38%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--status-accent) 70%, transparent));
}

.status-signal-label {
  color: rgb(255 253 240 / 64%);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.status-copy {
  display: grid;
  align-content: center;
  min-width: 0;
}

.status-copy .system-state {
  color: var(--status-accent);
}

.status-copy h3 {
  max-width: 34rem;
  color: #fffdf0;
  font-size: clamp(23px, 2.5vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.status-copy > p {
  max-width: 40rem;
  color: rgb(255 253 240 / 75%);
  font-size: 13px;
  line-height: 1.6;
}

.status-copy .status-checked-at {
  margin-top: 18px;
  color: rgb(255 253 240 / 48%);
}

.status-snapshot {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgb(255 253 240 / 15%);
  border-radius: 10px;
  background: rgb(255 253 240 / 9%);
}

.status-snapshot > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.status-snapshot > header span {
  color: rgb(255 253 240 / 58%);
}

.status-snapshot > header strong {
  color: var(--status-accent);
  font-size: 10px;
}

.status-signal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.status-signal-item {
  position: relative;
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 9px 9px 22px;
  border: 1px solid rgb(255 253 240 / 10%);
  border-radius: 8px;
  background: rgb(0 20 5 / 18%);
}

.status-signal-item::before {
  position: absolute;
  top: 13px;
  left: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6fd092;
  box-shadow: 0 0 0 3px rgb(111 208 146 / 10%);
  content: "";
}

.status-signal-item[data-status="DEGRADED"]::before {
  background: #e0ad35;
  box-shadow: 0 0 0 3px rgb(224 173 53 / 10%);
}

.status-signal-item[data-status="OUT_OF_SERVICE"]::before {
  background: #d9959e;
  box-shadow: 0 0 0 3px rgb(217 149 158 / 10%);
}

.status-signal-item strong {
  overflow: hidden;
  color: #fffdf0;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-signal-item small {
  overflow: hidden;
  color: rgb(255 253 240 / 50%);
  font-family: var(--font-mono);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-signal-placeholder {
  grid-column: 1 / -1;
  color: rgb(255 253 240 / 60%);
  font-size: 11px;
}

.status-overview .status-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 2px;
  border-color: rgb(255 253 240 / 22%);
  color: #fffdf0;
  background: rgb(255 253 240 / 7%);
}

.status-overview .status-refresh:hover {
  border-color: var(--status-accent);
  background: rgb(255 253 240 / 12%);
}

.status-overview .status-refresh:disabled {
  cursor: wait;
  opacity: 0.66;
}

.status-overview .status-refresh svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.status-overview.is-refreshing .status-refresh svg {
  animation: status-refresh-spin 900ms linear infinite;
}

.status-context {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.status-details {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel-muted) 86%, transparent);
}

.status-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
  padding: 14px 18px;
  color: var(--forest-soft);
  cursor: pointer;
  font-weight: 700;
}

.status-details > summary::-webkit-details-marker {
  display: none;
}

.status-details > summary span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.status-details > summary svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.status-details > summary strong {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.status-details[open] > summary {
  border-bottom: 1px solid var(--line);
}

.status-details .operational-checks,
.status-details .status-context {
  padding-right: 16px;
  padding-left: 16px;
}

.status-details .status-context {
  padding-bottom: 16px;
}

.status-context article {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-muted);
}

.status-context h3 {
  margin: 0;
  font-size: 16px;
}

.status-context p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

.status-details .operational-check {
  position: relative;
  overflow: hidden;
  background: var(--panel);
}

.status-details .operational-check::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--forest-soft);
  content: "";
}

.status-details .operational-check[data-status="DEGRADED"]::before {
  background: var(--gold-data);
}

.status-details .operational-check[data-status="OUT_OF_SERVICE"]::before {
  background: var(--rose);
}

@keyframes status-ecg-reveal {
  0%, 8% {
    width: 0;
  }

  82%, 100% {
    width: 600px;
  }
}

@keyframes status-ecg-handoff {
  0%, 6% {
    opacity: 0;
  }

  10%, 88% {
    opacity: 1;
  }

  96%, 100% {
    opacity: 0;
  }
}

@keyframes status-content-yield {
  0%, 8%, 94%, 100% {
    opacity: 1;
  }

  18%, 82% {
    opacity: 0.42;
  }
}

@keyframes status-snapshot-yield {
  0%, 8%, 94%, 100% {
    opacity: 1;
  }

  18%, 82% {
    opacity: 0.16;
  }
}

@keyframes status-sync-dot {
  0% {
    box-shadow: 0 0 0 0 rgb(217 149 158 / 42%);
  }

  100% {
    box-shadow: 0 0 0 7px transparent;
  }
}

@keyframes status-beacon-pulse {
  0% {
    opacity: 0.72;
    transform: scale(0.72);
  }

  72%, 100% {
    opacity: 0;
    transform: scale(1.28);
  }
}

@keyframes status-refresh-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 68rem) {
  .architecture-entry {
    grid-template-areas:
      "routes routes"
      "tomtom cdot";
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .architecture-entry-connectors {
    display: none;
  }

  .ingest-node {
    margin-top: 18px;
  }

  .provider-control {
    grid-template-columns: minmax(0, 1fr);
  }

  .provider-control ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .persistence-groups,
  .api-capabilities,
  .verification-checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .persistence-groups section:nth-child(3),
  .api-capabilities section:nth-child(3) {
    border-left: 0;
  }

  .persistence-groups section:nth-child(n + 3),
  .api-capabilities section:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .system-insights,
  .runtime-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .runtime-services {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: minmax(58px, auto);
  }

  .runtime-services::after { display: none; }
  .operations-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .operations-list::before { display: none; }

  .insight {
    min-height: 0;
  }
}

@media (max-width: 48rem) {
  .system-shell {
    width: min(100% - 24px, 94rem);
  }

  .system-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .system-facts div:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .section-heading,
  .node-heading,
  .node-heading.compact {
    display: grid;
    gap: 12px;
  }

  .node-heading > p {
    max-width: none;
    text-align: left;
  }

  .architecture-legend {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .architecture-entry {
    grid-template-areas: "routes" "tomtom" "cdot";
    grid-template-columns: minmax(0, 1fr);
  }

  .ingest-pipelines,
  .status-context {
    grid-template-columns: minmax(0, 1fr);
  }

  .provider-control ul {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-node {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .dashboard-contract {
    max-width: none;
    text-align: left;
  }

  .runtime-path {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .runtime-hop {
    width: 100%;
  }

  .runtime-connector {
    width: 72px;
    height: 42px;
    justify-self: center;
  }

  .runtime-connector::before {
    top: 0;
    right: auto;
    bottom: 0;
    left: 13px;
    width: 2px;
    height: auto;
    background: linear-gradient(var(--forest-soft), var(--gold-data));
  }

  .runtime-connector::after {
    top: 0;
    left: 9px;
  }

  .runtime-connector span {
    top: 50%;
    left: 29px;
    transform: translateY(-50%);
  }

  .runtime-services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(58px, auto));
  }

  .runtime-services::after {
    display: block;
  }

  .operations-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .operations-list::before {
    display: block;
  }

  .operations-list::after {
    display: none;
  }


  .verification-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .verification-track-line {
    display: none;
  }

  .verification-gate-bank::before,
  .verification-gate-bank::after {
    display: none;
  }

  .verification-gate-bank {
    grid-template-columns: minmax(0, 1fr);
  }

}

@media (max-width: 32rem) {
  .persistence-groups,
  .api-capabilities,
  .verification-checks {
    grid-template-columns: minmax(0, 1fr);
  }

  .verification-track {
    grid-template-columns: minmax(0, 1fr);
  }

  .verification-stage {
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    justify-items: start;
    padding: 10px 12px;
    text-align: left;
  }

  .verification-stage-icon {
    grid-row: 1 / 4;
    width: 38px;
    height: 38px;
    align-self: center;
  }

  .verification-stage > small {
    margin-top: 0;
  }

  .verification-stage > strong,
  .verification-stage > p {
    margin-top: 2px;
  }


  .operations-coverage ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .persistence-groups section + section,
  .api-capabilities section + section {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .panel-border-trace path { transition: none; }
  .architecture-node::after,
  .pipeline-card::after,
  .provider-control::after { transition: none; }
  .architecture-node,
  .pipeline-card,
  .provider-control,
  .architecture-link {
    transition: none;
  }
}

@media (max-width: 48rem) {
  .information-shell {
    width: min(100% - 24px, 76rem);
    padding-top: 28px;
  }

  .information-grid,
  .operational-checks {
    grid-template-columns: minmax(0, 1fr);
  }

  .definition-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .definition-list dd + dt {
    margin-top: 10px;
  }

  .system-overview {
    display: grid;
  }
}

@media (max-width: 68rem) {
  .system-overview { grid-template-columns: minmax(6rem, 0.26fr) minmax(0, 1fr); }
  .status-snapshot { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .status-snapshot > header, .status-signal-grid { grid-column: 1; }
  .status-overview .status-refresh { grid-row: 1 / 3; grid-column: 2; width: auto; min-width: 9.5rem; margin: 0; }
}

@media (max-width: 48rem) {
  .system-overview { grid-template-columns: minmax(5.5rem, 0.22fr) minmax(0, 1fr); }
  .status-snapshot { grid-template-columns: minmax(0, 1fr); }
  .status-overview .status-refresh { grid-row: auto; grid-column: 1; width: 100%; }
  .status-ecg { width: calc(100% - 32px); height: clamp(140px, 32vw, 180px); }
}

@media (max-width: 32rem) {
  .system-overview { grid-template-columns: minmax(0, 1fr); }
  .status-signal { grid-template-columns: auto 1fr; justify-items: start; padding-bottom: 18px; border-right: 0; border-bottom: 1px solid rgb(255 253 240 / 15%); }
  .status-beacon { width: 64px; }
  .status-copy h3 { font-size: 25px; }
  .status-signal-grid { grid-template-columns: minmax(0, 1fr); }
  .status-details > summary { align-items: flex-start; flex-direction: column; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .status-overview.is-heartbeat .status-ecg,
  .status-overview.is-heartbeat .status-ecg-reveal,
  .status-sync-callout i,
  .status-overview.is-heartbeat .status-copy,
  .status-overview.is-heartbeat .status-signal,
  .status-overview.is-heartbeat .status-snapshot,
  .status-beacon::before,
  .status-beacon::after,
  .status-overview.is-refreshing .status-refresh svg { animation: none; }
}

@media (max-width: 48rem) {
  .system-plain-flow, .system-plain-flow ol { grid-template-columns: minmax(0, 1fr); }
  .system-plain-flow ol::before { display: none; }
  .system-plain-flow li { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: none; min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .system-hero-source::before, .system-hero-source::after,
  .system-hero-highlight-line::before, .system-hero-highlight-line::after { animation: none; }
  .system-hero-source::before, .system-hero-source::after, .system-hero-highlight-line::after { transform: scaleX(0); }
  .system-hero-highlight-line::before { transform: scaleX(1); }
  .system-hero-signal { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .insight, .insight::before, .insight::after, .insight p { transition: none; }
  .insight:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .runtime-hop, .runtime-service, .operations-step, .verification-stage, .verification-checks li { transition: none; }
  .runtime-hop:hover, .runtime-service:hover, .operations-step:hover, .verification-stage:hover, .verification-checks li:hover { transform: none; }
}

.data-page,
.api-page {
  background: radial-gradient(circle at 88% 4%, color-mix(in srgb, var(--gold-data) 8%, transparent), transparent 28rem), var(--ivory);
}

.data-shell {
  width: min(94rem, calc(100% - 32px));
  padding-top: clamp(24px, 4vw, 48px);
}

.information-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.information-action {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 9px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  color: var(--forest-soft);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  font-weight: 700;
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.information-action:hover,
.information-action:focus-visible {
  border-color: var(--forest-soft);
  background: var(--panel-muted);
  transform: translateY(-1px);
}

.information-action.is-primary {
  border-color: var(--forest);
  color: #fffded;
  background: var(--forest);
}

.data-section {
  margin-top: clamp(52px, 7vw, 92px);
}

.data-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(28rem, 0.95fr);
  gap: clamp(28px, 5vw, 74px);
  align-items: center;
  max-width: none;
  margin-bottom: 28px;
}

.data-hero-map-shell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--forest-soft) 56%, #001f0d);
  border-radius: calc(var(--radius) + 2px);
  color: #f4f7ef;
  background: #071b12;
  box-shadow: 0 24px 54px rgb(0 37 0 / 22%);
  transform: rotate(0.35deg);
}

.data-hero-map-shell::before,
.data-hero-map-shell::after {
  position: absolute;
  z-index: 4;
  width: 28px;
  height: 28px;
  border-color: rgb(248 199 47 / 72%);
  content: "";
  pointer-events: none;
}

.data-hero-map-shell::before {
  top: 7px;
  left: 7px;
  border-top: 1px solid;
  border-left: 1px solid;
  border-radius: 7px 0 0;
}

.data-hero-map-shell::after {
  right: 7px;
  bottom: 7px;
  border-right: 1px solid;
  border-bottom: 1px solid;
  border-radius: 0 0 7px;
}

.data-hero-map-pulse {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  pointer-events: none;
  color: #70f2a4;
  background: #fffdf0;
  border: 2px solid currentColor;
  box-shadow: 0 0 5px 2px currentColor, 0 0 13px 5px currentColor;
  will-change: transform;
}

.data-hero-map-pulse.is-i70 { color: #ff95a1; }
.data-hero-map-pulse.is-unavailable { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .data-hero-map-pulse { visibility: hidden; }
}

.data-hero-map-bar,
.data-hero-map-legend {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 15px;
  border-color: rgb(255 255 255 / 10%);
  background: rgb(7 27 18 / 97%);
}

.data-hero-map-bar {
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgb(255 255 255 / 10%);
}

.data-hero-map-bar span,
.data-hero-map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
}

.data-hero-map-bar span {
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.data-hero-map-bar span i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8fd4ab;
  box-shadow: 0 0 0 4px rgb(143 212 171 / 10%);
}

.data-hero-map-bar small,
.data-hero-map-legend small {
  color: rgb(244 247 239 / 56%);
  font-family: var(--font-mono);
  font-size: 9px;
}

.data-hero-map {
  position: relative;
  z-index: 1;
  height: clamp(248px, 26vw, 320px);
  background:
    linear-gradient(rgb(143 212 171 / 6%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(143 212 171 / 6%) 1px, transparent 1px),
    #0b2117;
  background-size: 32px 32px;
}

.data-hero-map::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(circle at 50% 54%, transparent 30%, rgb(7 27 18 / 24%) 100%);
  content: "";
  pointer-events: none;
}

.data-hero-map-legend {
  gap: 16px;
  row-gap: 6px;
  flex-wrap: wrap;
  min-height: 43px;
  padding: 12px 38px 16px 15px;
  border-top: 1px solid rgb(255 255 255 / 10%);
}

.data-hero-map-legend > span > i {
  flex-shrink: 0;
  width: 18px;
  height: 3px;
  border-radius: 99px;
  background: #4fbe7d;
  box-shadow: 0 0 8px currentColor;
}

.data-hero-map-legend > span > i.is-i70 { background: #df7680; }
.data-hero-map-legend > span { max-width: 100%; flex-wrap: wrap; }
.data-hero-map-legend small {
  flex-basis: 100%;
  min-width: 0;
  margin-left: 0;
  overflow-wrap: anywhere;
}

.data-hero-map .maplibregl-canvas { outline: none; }
.data-hero-map .maplibregl-ctrl-bottom-right { z-index: 3; }
.data-hero-map .maplibregl-ctrl-attrib {
  color: rgb(244 247 239 / 65%);
  background: rgb(7 27 18 / 72%);
  font-size: 8px;
}
.data-hero-map .maplibregl-ctrl-attrib a { color: inherit; }
.data-hero-map .maplibregl-ctrl-attrib-button { filter: invert(1); opacity: 0.72; }
.data-hero-map .data-hero-map-attribution-collapsed .maplibregl-ctrl-attrib-inner { display: none; }

.data-hero h1 {
  max-width: 66rem;
}

.data-hero .information-lede {
  max-width: 52rem;
}

.data-hero-facts {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
  box-shadow: var(--shadow);
}

.data-hero-facts div {
  min-height: 104px;
  padding: 15px 18px;
  background: var(--panel);
}

.data-hero-facts dt {
  color: var(--forest-soft);
  font-family: var(--font-mono);
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 1;
}

.data-hero-facts dd {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.data-journey {
  overflow: hidden;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid color-mix(in srgb, var(--gold-data) 30%, var(--forest-soft));
  border-radius: calc(var(--radius) + 3px);
  color: #fffef7;
  background:
    radial-gradient(circle at 12% 16%, rgb(213 160 33 / 15%), transparent 24rem),
    linear-gradient(135deg, var(--forest) 0%, var(--forest-deep) 100%);
  box-shadow: var(--shadow);
}

.data-journey .section-heading h2 {
  color: #fffef7;
}

.data-journey .section-heading > p {
  color: rgb(255 254 247 / 70%);
}

.data-journey ol {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.data-journey ol::before,
.data-journey ol::after {
  position: absolute;
  top: 40px;
  left: 5%;
  z-index: 0;
  height: 2px;
  content: "";
}

.data-journey ol::before {
  right: 5%;
  background: rgb(255 254 247 / 15%);
}

.data-journey ol::after {
  width: 14%;
  background: linear-gradient(90deg, transparent, #f8c72f 50%, transparent);
  filter: drop-shadow(0 0 6px rgb(248 199 47 / 65%));
}



.data-journey li {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 10px;
  min-height: 142px;
  padding: 16px;
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: calc(var(--radius) - 4px);
  background: rgb(255 254 247 / 10%);
}

.data-journey li > span {
  color: #f8c72f;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
}

.data-journey li svg {
  grid-column: 1 / -1;
  width: 28px;
  height: 28px;
  margin: 5px 0 9px;
  color: #f8c72f;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.data-journey li strong,
.data-journey li p {
  grid-column: 1 / -1;
}

.data-journey li strong {
  font-size: 17px;
}

.data-journey li p {
  margin: 0;
  color: rgb(255 254 247 / 68%);
  font-size: 12px;
  line-height: 1.5;
}

.source-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.source-card {
  --architecture-trace-color: var(--forest-soft);
  min-width: 0;
  padding: clamp(22px, 3vw, 32px);
}

.source-card-incidents {
  --architecture-trace-color: var(--rose);
}

.source-card header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.source-logo {
  display: grid;
  place-items: center;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--forest-soft) 30%, var(--line));
  border-radius: 50%;
  background: #fff;
}

.source-logo img {
  width: 70%;
  max-height: 70%;
  object-fit: contain;
}

.source-logo-cdot img {
  width: 84%;
  max-height: 84%;
}

.source-card small,
.derived-card-title small {
  color: var(--gold-data);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.source-card h3,
.derived-card h3 {
  margin: 3px 0 0;
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: -0.035em;
}

.source-card > p,
.source-card dd,
.derived-card > p {
  color: var(--muted);
  line-height: 1.6;
}

.source-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin: 22px 0 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--line);
}

.source-card dl div {
  padding: 14px;
  background: var(--panel-muted);
}

.source-card dt {
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
}

.source-card dd {
  margin: 5px 0 0;
  font-size: 11px;
}

.corridor-coverage {
  overflow: hidden;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(color-mix(in srgb, var(--forest-soft) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--forest-soft) 6%, transparent) 1px, transparent 1px),
    var(--panel);
  background-size: 34px 34px;
  box-shadow: var(--shadow);
}

.geometry-corridors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.geometry-corridors article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--panel-muted) 94%, transparent);
}

.geometry-corridors img {
  width: 42px;
  height: 42px;
}

.geometry-corridors article > div,
.geometry-corridors article > b {
  display: grid;
}

.geometry-corridors article > div strong {
  font-size: 15px;
}

.geometry-corridors article > div span,
.geometry-corridors article > b small {
  color: var(--muted);
  font-size: 9px;
}

.geometry-corridors article > b {
  color: var(--forest-soft);
  font-family: var(--font-mono);
  font-size: 19px;
  line-height: 1.1;
  text-align: right;
}

.geometry-gates {
  display: grid;
  position: relative;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.geometry-gates::before {
  position: absolute;
  top: 28px;
  right: 8%;
  left: 8%;
  height: 2px;
  background: linear-gradient(90deg, var(--forest-soft), var(--gold-data), var(--rose));
  content: "";
}

.geometry-gates li {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 196px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--panel) 96%, transparent);
}

.geometry-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.geometry-step svg {
  width: 34px;
  height: 34px;
  padding: 7px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--forest-soft);
  background: var(--panel);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.geometry-gates li:nth-child(2) .geometry-step svg { }
.geometry-gates li:nth-child(3) .geometry-step svg { }
.geometry-gates li:nth-child(4) .geometry-step svg { }



.geometry-step b,
.geometry-gates small,
.geometry-gates em {
  font-family: var(--font-mono);
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.geometry-step b,
.geometry-gates small { color: var(--gold-data); }
.geometry-gates li > div { margin-top: 18px; }
.geometry-gates li > div strong { display: block; margin-top: 5px; font-size: 14px; }
.geometry-gates p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.geometry-gates em {
  justify-self: start;
  margin-top: 15px;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--forest-soft) 32%, var(--line));
  border-radius: 999px;
  color: var(--forest-soft);
  background: color-mix(in srgb, var(--forest-soft) 7%, var(--panel));
}

.geometry-confidence {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px;
  margin-top: 12px;
  padding: 14px 16px;
  border-left: 3px solid var(--gold-data);
  background: color-mix(in srgb, var(--gold-data) 7%, var(--panel-muted));
}

.geometry-confidence strong { font-size: 12px; }
.geometry-confidence span { color: var(--muted); font-size: 11px; line-height: 1.5; }
.geometry-confidence b { color: var(--ink); }

.data-language-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.data-language-grid article {
  --architecture-trace-color: var(--forest-soft);
  display: grid;
  align-content: start;
  min-height: 218px;
  padding: 20px;
}

.data-language-grid article:nth-child(2) { --architecture-trace-color: color-mix(in srgb, var(--forest-soft) 68%, var(--gold-data)); }
.data-language-grid article:nth-child(3) { --architecture-trace-color: var(--gold-data); }
.data-language-grid article:nth-child(4) { --architecture-trace-color: var(--rose); }

.data-language-grid svg:not(.panel-border-trace),
.derived-card-title svg {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0 0 15px;
  color: var(--forest-soft);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.data-language-grid h3 {
  margin: 0;
  color: var(--forest-soft);
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.05em;
}

.data-language-grid article > strong {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.25;
}

.data-language-grid p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.derived-section {
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--line-strong);
  border-radius: calc(var(--radius) + 3px);
  background:
    linear-gradient(color-mix(in srgb, var(--forest-soft) 8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--forest-soft) 8%, transparent) 1px, transparent 1px),
    color-mix(in srgb, var(--panel-muted) 92%, var(--panel));
  background-size: 34px 34px;
}

.derived-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.derived-card {
  --architecture-trace-color: var(--forest-soft);
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  box-shadow: 0 10px 22px rgb(0 37 0 / 6%);
}

.travel-recipe {
  display: flex;
  flex-direction: column;
}

.derived-card-title {
  display: flex;
  align-items: center;
  gap: 14px;
}

.derived-card-title svg {
  flex: 0 0 auto;
  margin: 0;
}

.travel-formula {
  display: flex;
  align-items: center;
  gap: clamp(7px, 1.5vw, 18px);
  overflow-x: auto;
  margin-top: 24px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel-muted);
}

.travel-formula span {
  display: grid;
  min-width: max-content;
  color: var(--forest-soft);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

.travel-formula .formula-sum {
  color: var(--gold-data);
  font-size: 24px;
}

.travel-formula small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 500;
}

.travel-formula b {
  color: var(--gold-data);
  font-size: 18px;
}

.travel-formula strong {
  min-width: max-content;
  padding: 7px 10px;
  border-radius: 8px;
  color: #fffded;
  background: var(--forest);
  font-family: var(--font-mono);
  font-size: 12px;
}

.travel-recipe-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: auto;
  padding-top: 20px;
}

.travel-recipe-facts span {
  display: grid;
  align-content: start;
  min-height: 82px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel-muted) 88%, transparent);
}

.travel-recipe-facts strong {
  color: var(--forest-soft);
  font-family: var(--font-mono);
  font-size: 20px;
}

.travel-recipe-facts small {
  margin-top: 6px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
}

.daily-range-visual {
  margin-top: 24px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel-muted);
}

.daily-range-period {
  display: grid;
  grid-template-columns: auto minmax(50px, 1fr) auto;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
}

.daily-range-period i {
  position: relative;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--forest-soft), var(--gold-data));
}

.daily-range-period i::before,
.daily-range-period i::after {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  border: 2px solid var(--panel-muted);
  border-radius: 50%;
  background: currentColor;
  content: "";
  transform: translateY(-50%);
}

.daily-range-period i::before { left: 0; color: var(--forest-soft); }
.daily-range-period i::after { right: 0; color: var(--gold-data); }

.daily-range-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.daily-range-results span {
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 85%, transparent);
}

.daily-range-results small {
  color: var(--muted);
  font-size: 9px;
}

.daily-range-results strong {
  color: var(--forest-soft);
  font-size: 13px;
}

.daily-range-results span:last-child strong {
  color: var(--rose);
}

.daily-range-corridors {
  display: grid;
  gap: 7px;
  margin-top: 14px;
}

.daily-range-corridors > div {
  display: grid;
  grid-template-columns: 42px repeat(2, minmax(0, 1fr));
  gap: 7px;
  align-items: stretch;
}

.daily-range-corridors > div > b {
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fffef7;
  background: var(--forest-soft);
  font-family: var(--font-mono);
  font-size: 10px;
}

.daily-range-corridors > div:last-child > b { background: var(--rose); }

.daily-range-corridors span {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding: 9px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 86%, transparent);
}

.daily-range-corridors small { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.daily-range-corridors strong { color: var(--forest-soft); font-family: var(--font-mono); font-size: 15px; overflow-wrap: anywhere; }
.daily-range-corridors span:last-child strong { color: var(--rose); }
.daily-range-status { margin: 9px 0 0; color: var(--muted); font-size: 9px; }

.history-section {
  overflow: hidden;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 3px);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.history-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.history-track::before {
  position: absolute;
  top: 32px;
  right: 7%;
  left: 7%;
  height: 2px;
  background: linear-gradient(90deg, var(--forest-soft), var(--gold-data), var(--rose), var(--gold-data), var(--forest-soft));
  background-size: 220% 100%;
  content: "";
}



.history-track article {
  --architecture-trace-color: var(--gold-data);
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 176px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel-muted);
}

.history-track article > span {
  color: var(--gold-data);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
}

.history-track svg:not(.panel-border-trace) {
  width: 34px;
  height: 34px;
  margin: 8px 0 18px;
  padding: 7px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--forest-soft);
  background: var(--panel);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.history-track strong {
  font-size: 14px;
}

.history-track p,
.history-note {
  color: var(--muted);
  line-height: 1.55;
}

.history-track p {
  margin: 6px 0 0;
  font-size: 11px;
}

.history-note {
  margin: 18px 0 0;
  padding: 14px 16px;
  border-left: 3px solid var(--gold-data);
  background: var(--panel-muted);
  font-size: 12px;
}

.history-note strong { color: var(--ink); }
.history-note a { color: var(--forest-soft); font-weight: 700; }

.data-truth {
  position: relative;
  overflow: hidden;
  margin-top: clamp(52px, 7vw, 92px);
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid color-mix(in srgb, var(--gold-data) 36%, var(--forest-soft));
  border-radius: calc(var(--radius) + 3px);
  color: #fffef7;
  background:
    linear-gradient(rgb(248 199 47 / 8%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(248 199 47 / 8%) 1px, transparent 1px),
    radial-gradient(circle at 8% 50%, rgb(213 160 33 / 14%), transparent 25rem),
    linear-gradient(135deg, var(--forest), var(--forest-deep));
  background-size: 32px 32px, 32px 32px, auto, auto;
  background-position: 0 0;
  box-shadow: var(--shadow);
}

.truth-heading {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.truth-beacon {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border: 1px solid rgb(248 199 47 / 42%);
  border-radius: 50%;
  background: rgb(255 254 247 / 7%);
  box-shadow: 0 0 0 9px rgb(248 199 47 / 7%);
}

.truth-beacon svg,
.truth-checks svg {
  width: 30px;
  height: 30px;
  color: #f8c72f;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.truth-heading h2 { margin: 0; color: #fffef7; font-size: clamp(23px, 3vw, 36px); letter-spacing: -0.045em; }
.truth-heading p:last-child { margin: 7px 0 0; color: rgb(255 254 247 / 67%); font-size: 12px; }

.truth-checks {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
}

.truth-checks article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  min-height: 112px;
  padding: 16px;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 11px;
  background: rgb(255 254 247 / 10%);
}

.truth-checks svg { width: 25px; height: 25px; }
.truth-checks div { display: grid; align-content: start; }
.truth-checks strong { font-size: 14px; }
.truth-checks span { margin-top: 7px; color: rgb(255 254 247 / 68%); font-size: 11px; line-height: 1.5; }

/* API */

@media (min-width: 100rem) and (min-height: 62rem) {
  .data-shell { width: min(112rem, calc(100% - 56px)); }
  .data-language-grid article { min-height: 245px; }
}
@media (max-width: 64rem) {
  .data-hero { grid-template-columns: minmax(0, 1fr); }
  .data-hero-map-shell { width: min(100%, 52rem); max-width: 52rem; transform: none; }
  .data-hero-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 58rem) {
  .data-journey ol, .history-track, .data-language-grid,
  .geometry-corridors, .geometry-gates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .data-journey ol::before, .data-journey ol::after,
  .history-track::before, .geometry-gates::before { display: none; }
  .source-pair, .derived-grid, .truth-checks { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 48rem) {
  .data-shell { width: min(100% - 24px, 94rem); }
  .data-hero-map { height: 280px; }
  .data-hero-map-bar { flex-wrap: wrap; padding: 12px 15px; }
  .data-hero-map-bar small { display: none; }
  .data-hero-facts, .data-language-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .data-hero-facts div { padding: 13px; }
  .section-heading { display: grid; gap: 10px; }
  .data-journey, .derived-section, .history-section { padding: 18px; }
  .source-card dl, .geometry-corridors { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 34rem) {
  .data-hero-map { height: 240px; }
  .data-hero-map-legend { gap: 8px 14px; }
  .data-journey ol, .history-track, .data-language-grid, .data-hero-facts,
  .geometry-gates { grid-template-columns: minmax(0, 1fr); }
  .data-journey li, .history-track article, .data-language-grid article { min-height: auto; }
  .source-card header { align-items: flex-start; }
  .geometry-confidence { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .geometry-corridors article { grid-template-columns: auto minmax(0, 1fr); }
  .geometry-corridors article > b { grid-column: 2; justify-self: start; text-align: left; }
  .truth-heading { grid-template-columns: minmax(0, 1fr); }
  .travel-formula { gap: 7px; padding: 12px; }
  .travel-recipe-facts { grid-template-columns: minmax(0, 1fr); }
  .daily-range-corridors > div { grid-template-columns: 42px minmax(0, 1fr); }
  .daily-range-corridors > div > b { grid-row: span 2; }
  .daily-range-corridors strong { font-size: clamp(11px, 3.34vw, 13px); }
}
@media (prefers-reduced-motion: reduce) {
  .information-action { transition: none; }
  .information-action:hover { transform: none; }
}

.api-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(28rem, 0.95fr);
  gap: clamp(28px, 5vw, 74px);
  align-items: center;
  max-width: none;
  margin-bottom: 28px;
}

.api-terminal {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--forest-soft) 60%, #001f0d);
  border-radius: calc(var(--radius) + 2px);
  color: #f4f7ef;
  background: #071b12;
  box-shadow: 0 24px 54px rgb(0 37 0 / 22%);
  transform: rotate(0.6deg);
}

.api-terminal::after {
  position: absolute;
  z-index: 0;
  right: 0;
  left: 0;
  height: 42px;
  background: linear-gradient(180deg, transparent, rgb(143 212 171 / 8%), transparent);
  content: "";
  pointer-events: none;
}

.api-terminal > * {
  position: relative;
  z-index: 1;
}



.api-terminal-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 14px;
  border-bottom: 1px solid rgb(255 255 255 / 10%);
  background: #0d271b;
}

.api-terminal-bar > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cf6e73;
}

.api-terminal-bar > span:nth-child(2) { background: #d5a021; }
.api-terminal-bar > span:nth-child(3) { background: #4da377; }

.api-terminal-bar small {
  margin-left: auto;
  color: rgb(244 247 239 / 55%);
  font-family: var(--font-mono);
  font-size: 9px;
}

.api-terminal-body {
  padding: clamp(20px, 3vw, 30px);
  font-family: var(--font-mono);
  font-size: 11px;
}

.api-terminal-body p { margin: 0; }
.terminal-method { color: #f8c72f; font-weight: 700; }

.api-terminal-body .terminal-status {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  color: #8fd4ab;
}

.terminal-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgb(143 212 171 / 10%);
}

.api-terminal pre {
  position: relative;
  margin: 18px 0 0;
  color: rgb(244 247 239 / 76%);
  font: inherit;
  line-height: 1.8;
  white-space: pre-wrap;
}

.api-terminal pre b { color: #e7a2a8; font-weight: 500; }

.api-terminal pre::after {
  display: inline-block;
  width: 6px;
  height: 11px;
  margin-left: 5px;
  background: #8fd4ab;
  content: "";
  vertical-align: -2px;
}



.api-hero-facts {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
}

.api-hero-facts div {
  padding: 15px 18px;
  background: var(--panel);
}

.api-hero-facts dt {
  color: var(--forest-soft);
  font-family: var(--font-mono);
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 1;
}

.api-hero-facts dd {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.api-request-path {
  overflow: hidden;
  margin-top: clamp(48px, 6vw, 72px);
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.api-request-path ol {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.api-request-path ol::before,
.api-request-path ol::after {
  position: absolute;
  top: 25px;
  left: 6%;
  height: 2px;
  content: "";
}

.api-request-path ol::before {
  right: 6%;
  background: var(--line-strong);
}

.api-request-path ol::after {
  width: 15%;
  background: linear-gradient(90deg, transparent, var(--gold-data), transparent);
}



.api-request-path li {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 104px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-muted);
}

.api-request-path li span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--gold-data);
  border-radius: 50%;
  color: var(--gold-data);
  background: var(--panel);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
}

.api-request-path li:nth-child(2) span { }
.api-request-path li:nth-child(3) span { }
.api-request-path li:nth-child(4) span { }



.api-request-path li strong { margin-top: 14px; font-size: 14px; }
.api-request-path li small { margin-top: 4px; color: var(--muted); line-height: 1.4; }

.api-request-path li b {
  justify-self: start;
  align-self: end;
  margin-top: 13px;
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--gold-data) 34%, var(--line));
  border-radius: 999px;
  color: var(--forest-soft);
  background: color-mix(in srgb, var(--gold-data) 8%, var(--panel));
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.api-explorer {
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid color-mix(in srgb, var(--gold-data) 35%, var(--forest-soft));
  border-radius: calc(var(--radius) + 4px);
  background:
    linear-gradient(color-mix(in srgb, var(--forest-soft) 10%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--forest-soft) 10%, transparent) 1px, transparent 1px),
    color-mix(in srgb, var(--panel-muted) 91%, var(--panel));
  background-size: 34px 34px;
  box-shadow: var(--shadow);
  scroll-margin-top: 90px;
}

.api-explorer-grid {
  display: grid;
  grid-template-columns: minmax(17rem, 0.72fr) minmax(0, 1.28fr);
  gap: 16px;
}

.api-explorer-controls,
.api-response {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel) 96%, transparent);
}

.api-explorer-controls {
  display: grid;
  gap: 15px;
  align-content: start;
  padding: 20px;
}

.api-explorer-controls label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.api-explorer-controls select {
  width: 100%;
  min-height: 42px;
  padding: 8px 34px 8px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--ink);
  background: var(--panel);
  font: 600 13px var(--font-sans);
}

.api-explorer-controls select:disabled { opacity: 0.55; }

.api-request-preview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-muted);
}

.api-request-preview span {
  padding: 2px 6px;
  border-radius: 5px;
  color: #fffded;
  background: var(--forest-soft);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
}

.api-request-preview code,
.response-contract code {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 10px;
}

.api-explorer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.api-run,
.api-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--forest-soft);
  border-radius: 8px;
  color: #fffded;
  background: var(--forest);
  cursor: pointer;
  font-weight: 700;
}

.api-copy {
  color: var(--forest-soft);
  background: transparent;
}

.api-run:disabled,
.api-copy:disabled { cursor: wait; opacity: 0.62; }

.api-run svg,
.api-copy svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.api-explorer-controls > p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.api-response {
  position: relative;
  overflow: hidden;
  border-color: var(--line);
  color: #f4f7ef;
  background: #071b12;
}

.api-response::after {
  position: absolute;
  z-index: 2;
  top: 41px;
  left: 0;
  width: 34%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #f8c72f, transparent);
  content: "";
  opacity: 0;
  pointer-events: none;
}

.api-response.is-loading {
  border-color: color-mix(in srgb, var(--gold-data) 72%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold-data) 9%, transparent);
}

.api-response.is-loading::after {
  opacity: 1;
}

.api-response.is-success {
  border-color: color-mix(in srgb, #8fd4ab 72%, var(--line));
  box-shadow: 0 0 0 4px rgb(143 212 171 / 7%);
}

.api-response.is-error {
  border-color: color-mix(in srgb, #e7a2a8 72%, var(--line));
  box-shadow: 0 0 0 4px rgb(231 162 168 / 7%);
}



.api-response header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 42px;
  padding: 10px 14px;
  border-bottom: 1px solid rgb(255 255 255 / 10%);
  background: #0d271b;
}

.api-response-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #bfc9bf;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.api-response-state::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.api-response.is-loading .api-response-state { color: #f8c72f; }
.api-response.is-success .api-response-state { color: #8fd4ab; }
.api-response.is-error .api-response-state { color: #e7a2a8; }

.api-response.is-loading .api-response-state::before {
}



.api-response header small {
  color: rgb(244 247 239 / 54%);
  font-family: var(--font-mono);
  font-size: 9px;
  text-align: right;
}

.api-response pre {
  max-height: 440px;
  min-height: 300px;
  margin: 0;
  padding: 20px;
  overflow: auto;
  color: #d8e2d8;
  font: 11px/1.65 var(--font-mono);
  tab-size: 2;
  white-space: pre-wrap;
}

.api-catalog {
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 3px);
  background:
    linear-gradient(color-mix(in srgb, var(--forest-soft) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--forest-soft) 7%, transparent) 1px, transparent 1px),
    var(--panel);
  background-size: 34px 34px;
  box-shadow: var(--shadow);
}

.endpoint-atlas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.endpoint-card {
  display: flex;
  flex-direction: column;
  min-height: 390px;
  padding: 20px;
}

.endpoint-card:nth-child(1) { --architecture-trace-color: var(--forest-soft); }
.endpoint-card:nth-child(2) { --architecture-trace-color: var(--gold-data); }
.endpoint-card:nth-child(3) { --architecture-trace-color: var(--rose); }

.endpoint-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.endpoint-card > header > span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid color-mix(in srgb, var(--architecture-trace-color) 44%, var(--line));
  border-radius: 50%;
  color: var(--architecture-trace-color);
  background: var(--panel);
}

.endpoint-card svg:not(.panel-border-trace) {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.endpoint-card em {
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--architecture-trace-color) 32%, var(--line));
  border-radius: 999px;
  color: var(--architecture-trace-color);
  font-family: var(--font-mono);
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
}

.endpoint-card h3 {
  margin: 18px 0 0;
  font-size: clamp(18px, 2vw, 23px);
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.endpoint-card > p {
  min-height: 38px;
  margin: 8px 0 16px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.endpoint-card ul {
  display: grid;
  gap: 1px;
  margin: auto 0 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--line);
  list-style: none;
}

.endpoint-card li {
  display: grid;
  gap: 4px;
  min-height: 58px;
  padding: 11px 12px;
  background: var(--panel-muted);
}

.endpoint-card code {
  overflow-wrap: anywhere;
  color: var(--forest-soft);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
}

.endpoint-card small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
}

.api-integration-recipe {
  margin-top: 16px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--gold-data) 34%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--gold-data) 6%, var(--panel-muted));
}

.api-integration-recipe header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.api-integration-recipe h3 { margin: 0; font-size: 20px; letter-spacing: -0.04em; }
.api-integration-recipe .information-eyebrow { margin-bottom: 5px; }
.api-integration-recipe button {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: var(--panel);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.api-integration-recipe button:hover { border-color: var(--gold-data); }
.api-recipe-request {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}
.api-recipe-request > span { color: var(--gold-data); font: 700 11px var(--font-mono); }
.api-integration-recipe code {
  color: var(--forest-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.api-integration-recipe dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
}
.api-integration-recipe dd { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.api-recipe-note { display: grid; gap: 5px; margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.5; }
.api-recipe-note strong { color: var(--ink); }
.api-recipe-note span { color: var(--muted); }

.access-section {
  overflow: hidden;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.access-lanes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.access-lane {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  min-height: 226px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-muted);
}

.access-lane-public { border-top: 4px solid var(--forest-soft); }
.access-lane-private { border-top: 4px solid var(--gold-data); }

.access-lane > header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.access-lane header span,
.access-core > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--forest-soft);
  background: var(--panel);
}

.access-lane svg,
.access-core svg {
  width: 100%;
  height: 100%;
  padding: 9px;
  box-sizing: border-box;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.access-lane header em {
  padding: 5px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--forest-soft);
  font-family: var(--font-mono);
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
}

.access-lane > small {
  grid-column: 1 / -1;
  margin-top: 17px;
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
}

.access-lane > strong {
  grid-column: 1 / -1;
  margin-top: 3px;
  color: var(--forest-soft);
  font-family: var(--font-mono);
  font-size: 22px;
}

.access-lane > p {
  grid-column: 1 / -1;
  margin: 8px 0 14px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.access-lane dl {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: auto 0 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--line);
}

.access-lane dl div {
  padding: 10px;
  background: var(--panel);
}

.access-lane dt {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 8px;
  text-transform: uppercase;
}

.access-lane dd {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
}

.access-handoff {
  position: relative;
  height: 50px;
  overflow: hidden;
}

.access-handoff::before,
.access-handoff::after {
  position: absolute;
  content: "";
}

.access-handoff::before {
  top: 17px;
  right: 25%;
  left: 25%;
  height: 1px;
  background: var(--line-strong);
}

.access-handoff::after {
  top: 17px;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--line-strong);
}

.access-handoff span {
  position: absolute;
  top: 12.5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold-data);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold-data) 14%, transparent);
}

.access-handoff span:first-child { left: 25%; }
.access-handoff span:last-child { right: 25%; }





.access-core {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--forest-soft) 34%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--forest-soft) 8%, var(--panel));
}

.access-core small {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 8px;
  text-transform: uppercase;
}

.access-core strong { display: block; margin-top: 3px; font-size: 15px; }
.access-core p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }

.access-core ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  list-style: none;
}

.access-core li {
  padding: 5px 7px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--forest-soft);
  background: var(--panel);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
}

.response-contract > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.response-contract article {
  min-height: 178px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.response-contract article:nth-child(1) { --architecture-trace-color: var(--forest-soft); }
.response-contract article:nth-child(2),
.response-contract article:nth-child(3) { --architecture-trace-color: var(--gold-data); }
.response-contract article:nth-child(4) { --architecture-trace-color: var(--rose); }

.response-contract article > span {
  display: inline-grid;
  place-items: center;
  min-width: 48px;
  min-height: 30px;
  padding: 3px 9px;
  border-radius: 999px;
  color: #fffded;
  background: var(--forest-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
}

.response-contract article:nth-child(2) > span,
.response-contract article:nth-child(3) > span { background: var(--gold-data); }
.response-contract article:nth-child(4) > span { background: var(--rose); }

.response-contract h3 { margin: 18px 0 0; font-size: 16px; }
.response-contract p { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.api-guardrails {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(16rem, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(28px, 5vw, 72px);
  margin-top: clamp(52px, 7vw, 92px);
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid color-mix(in srgb, var(--gold-data) 36%, var(--forest-soft));
  border-radius: calc(var(--radius) + 3px);
  color: #fffef7;
  background:
    linear-gradient(rgb(248 199 47 / 8%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(248 199 47 / 8%) 1px, transparent 1px),
    radial-gradient(circle at 8% 50%, rgb(213 160 33 / 14%), transparent 25rem),
    linear-gradient(135deg, var(--forest), var(--forest-deep));
  background-size: 32px 32px, 32px 32px, auto, auto;
  background-position: 0 0;
  box-shadow: var(--shadow);
}

.api-guardrails > div,
.api-guardrails > ul {
  position: relative;
  z-index: 1;
}

.api-guardrails > div > svg {
  width: 36px;
  height: 36px;
  margin-bottom: 18px;
  color: #f8c72f;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.api-guardrails h2 {
  margin: 0;
  color: #fffef7;
  font-size: clamp(23px, 3vw, 36px);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.api-guardrails ul {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: 11px;
  background: rgb(255 255 255 / 13%);
  list-style: none;
}

.api-guardrails li {
  display: grid;
  grid-template-columns: minmax(8rem, 0.38fr) minmax(0, 1fr);
  gap: 18px;
  padding: 15px;
  background: rgb(255 254 247 / 7%);
}

.api-guardrails li strong {
  color: #f8c72f;
  font-size: 12px;
}

.api-guardrails li span {
  color: rgb(255 254 247 / 72%);
  font-size: 12px;
  line-height: 1.5;
}

.api-shell { width: min(94rem, calc(100% - 32px)); padding-top: clamp(24px, 4vw, 48px); }
.api-section, .api-explorer { margin-top: clamp(52px, 7vw, 92px); }
.api-hero h1 { max-width: 66rem; }
.api-hero .information-lede { max-width: 52rem; }
.api-terminal-body, .api-response header small { overflow-wrap: anywhere; }
.api-response pre { overflow-wrap: anywhere; }
@media (min-width:100rem) and (min-height:62rem) {
 .api-shell { width:min(112rem,calc(100% - 56px)); }
 .api-response pre { min-height:360px; }
}
@media (max-width:64rem) {
 .api-hero { grid-template-columns:minmax(0,1fr); }
 .api-terminal { max-width:52rem; transform:none; }
}
@media (max-width:58rem) {
 .api-request-path ol, .response-contract > div { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .api-request-path ol::before, .api-request-path ol::after { display:none; }
 .api-explorer-grid, .endpoint-atlas, .api-guardrails { grid-template-columns:minmax(0,1fr); }
 .endpoint-card { min-height:auto; }
 .endpoint-card ul { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:48rem) {
 .api-shell { width:min(100% - 24px,94rem); }
 .api-hero-facts, .response-contract > div { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .api-hero-facts div { padding:13px; }
 .api-catalog, .api-explorer, .api-request-path, .access-section { padding:18px; }
 .endpoint-card ul, .access-lanes { grid-template-columns:minmax(0,1fr); }
 .api-integration-recipe dl { grid-template-columns:minmax(0,1fr); gap:14px; }
 .access-handoff { height:36px; }
 .access-handoff::before, .access-handoff span { display:none; }
 .access-handoff::after { top:0; }
 .access-core { grid-template-columns:auto minmax(0,1fr); }
 .access-core ul { grid-column:1/-1; justify-content:flex-start; }
 .api-guardrails li { grid-template-columns:minmax(0,1fr); gap:5px; }
 .api-terminal-body { font-size:9px; }
 .api-response header { align-items:flex-start; }
 .api-response pre { min-height:250px; font-size:9px; }
}
@media (max-width:34rem) {
 .api-request-path ol, .response-contract > div, .api-hero-facts, .access-lane dl { grid-template-columns:minmax(0,1fr); }
 .api-request-path li, .response-contract article { min-height:auto; }
}

/* Restore the diagram clocks without per-frame layout positioning. */
.architecture-stage > :not(.grid-light) {
  animation: architecture-content-float 5.6s ease-in-out infinite alternate;
}
@keyframes architecture-content-float {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -6px, 0); }
}
.system-plain-flow ol, .runtime-connector, .verification-track-line, .access-handoff {
  container-type: inline-size;
}
.system-plain-flow ol::after {
  position: absolute; top: 22px; left: 7%; z-index: 0;
  width: 8px; height: 8px; margin-top: -3px; border-radius: 50%;
  background: #f8c72f;
  box-shadow: 0 0 0 4px rgb(248 199 47 / 14%), 0 0 16px rgb(248 199 47 / 65%);
  content: ""; animation: system-signal 5s ease-in-out infinite;
}
@keyframes system-signal {
  0%, 12% { transform: translateX(0); opacity: 0; }
  20%, 82% { opacity: 1; }
  92%, 100% { transform: translateX(calc(86cqw - 8px)); opacity: 0; }
}
.runtime-connector::after { animation: runtime-packet 5.2s ease-in-out infinite; }
.runtime-connector:nth-of-type(2)::after { animation-delay: 2.6s; }
@keyframes runtime-packet {
  0%, 52%, 100% { transform: translateX(0); opacity: 0; }
  6% { opacity: 1; }
  40% { transform: translateX(calc(100cqw - 10px)); opacity: 1; }
  46% { transform: translateX(calc(100cqw - 10px)); opacity: 0; }
}
@keyframes runtime-packet-mobile {
  0%, 52%, 100% { transform: translateY(0); opacity: 0; }
  6% { opacity: 1; }
  40% { transform: translateY(32px); opacity: 1; }
  46% { transform: translateY(32px); opacity: 0; }
}
.operations-cycle-mark::before { animation: operations-cycle-spin 8s linear infinite; }
@keyframes operations-cycle-spin { to { transform: rotate(360deg); } }
.verification-console::after {
  top: 0; height: 100%;
  background: linear-gradient(transparent, color-mix(in srgb, var(--gold-data) 12%, transparent) 21%, transparent 42%);
}
.verification-console.is-active::after { animation: verification-console-scan 16s 0.8s ease-in-out infinite; }
.verification-console.is-active .verification-track-line i { animation: verification-runner 16s 0.8s ease-in-out infinite; }
.verification-console.is-active .verification-stage-icon {
  animation: verification-stage-pulse 16s var(--verification-stage-delay, 0.8s) ease-in-out infinite;
}
.verification-stage-icon::after {
  position: absolute; inset: -2px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--verification-accent) 12%, transparent),
    0 0 20px color-mix(in srgb, var(--verification-accent) 32%, transparent);
  opacity: 0; content: "";
}
.verification-console.is-active .verification-stage-icon::after {
  animation: verification-stage-glow 16s var(--verification-stage-delay, 0.8s) ease-in-out infinite;
}
.verification-console.is-active .verification-stage-icon::before {
  animation: verification-stage-orbit 16s var(--verification-stage-delay, 0.8s) linear infinite;
}
.verification-console.is-active .verification-stage-automation .verification-stage-icon::before {
  animation-name: verification-automation-orbit;
}
@keyframes verification-runner {
  0%, 3% { opacity: 0; transform: translate(-100%, -50%); }
  6% { opacity: 1; }
  18%, 54% { opacity: 1; transform: translate(calc(33.333cqw), -50%); }
  62% { opacity: 1; transform: translate(calc(66.666cqw), -50%); }
  76% { opacity: 1; transform: translate(100cqw, -50%); }
  84%, 100% { opacity: 0; transform: translate(100cqw, -50%); }
}
@keyframes verification-stage-pulse {
  0%, 2%, 12%, 100% { transform: translateY(-1px) scale(1); }
  4%, 8% { transform: translateY(-1px) scale(1.04); }
}
@keyframes verification-stage-glow {
  0%, 2%, 12%, 100% { opacity: 0; }
  4%, 8% { opacity: 1; }
}
@keyframes verification-stage-orbit {
  0%, 1% { opacity: 0; transform: rotate(0deg); }
  3%, 9% { opacity: 1; }
  11%, 100% { opacity: 0; transform: rotate(720deg); }
}
@keyframes verification-automation-orbit {
  0%, 1% { opacity: 0; transform: rotate(0deg); }
  3%, 38% { opacity: 1; }
  42%, 100% { opacity: 0; transform: rotate(2160deg); }
}
@keyframes verification-console-scan {
  0%, 18% { transform: translateY(-45%); opacity: 0; }
  28% { opacity: 0.7; }
  70% { transform: translateY(104%); opacity: 0.36; }
  78%, 100% { transform: translateY(104%); opacity: 0; }
}
.data-journey ol::after { animation: data-journey-sweep 6.5s ease-in-out infinite; }
@keyframes data-journey-sweep {
  0%, 10% { transform: translateX(-120%); opacity: 0; }
  18%, 82% { opacity: 1; }
  92%, 100% { transform: translateX(650%); opacity: 0; }
}
.geometry-step { position: relative; }
.geometry-step::after {
  position: absolute; top: 0; left: 0; width: 34px; height: 34px;
  border-radius: 50%; pointer-events: none; content: ""; opacity: 0;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold-data) 13%, transparent),
    0 0 18px color-mix(in srgb, var(--gold-data) 28%, transparent);
  animation: geometry-gate-glow 8s ease-in-out infinite;
}
.geometry-step svg { animation: geometry-gate-check 8s ease-in-out infinite; }
.geometry-gates li:nth-child(2) .geometry-step { --gate-delay: 1.35s; }
.geometry-gates li:nth-child(3) .geometry-step { --gate-delay: 2.7s; }
.geometry-gates li:nth-child(4) .geometry-step { --gate-delay: 4.05s; }
.geometry-step::after, .geometry-step svg { animation-delay: var(--gate-delay, 0s); }
@keyframes geometry-gate-check {
  0%, 7%, 24%, 100% { color: var(--forest-soft); border-color: var(--line-strong); transform: scale(1); }
  11%, 19% { color: var(--gold-data); border-color: var(--gold-data); transform: scale(1.08); }
}
@keyframes geometry-gate-glow {
  0%, 7%, 24%, 100% { opacity: 0; transform: scale(1); }
  11%, 19% { opacity: 1; transform: scale(1.08); }
}
.history-track-light {
  position: absolute; top: 32px; right: 7%; left: 7%; height: 2px;
  overflow: hidden; pointer-events: none;
}
.history-track-light span {
  display: block; width: 220%; height: 100%;
  background: linear-gradient(90deg, var(--forest-soft), var(--gold-data), var(--rose), var(--gold-data), var(--forest-soft));
  animation: history-track-flow 8s ease-in-out infinite alternate;
}
@keyframes history-track-flow {
  from { transform: translateX(0); }
  to { transform: translateX(-54.545%); }
}
.api-terminal::after {
  top: 0; height: 100%;
  background: linear-gradient(180deg, transparent, rgb(143 212 171 / 8%) 21px, transparent 42px);
  animation: api-terminal-scan 6.8s ease-in-out infinite;
}
@keyframes api-terminal-scan {
  0%, 14% { transform: translateY(-48px); opacity: 0; }
  24%, 72% { opacity: 1; }
  86%, 100% { transform: translateY(calc(100% + 6px)); opacity: 0; }
}
.api-terminal pre::after { animation: api-terminal-cursor 1.15s steps(1, end) infinite; }
@keyframes api-terminal-cursor {
  0%, 48% { opacity: 0.9; }
  49%, 100% { opacity: 0; }
}
.api-request-path ol::after { animation: api-request-scan 7s ease-in-out infinite; }
@keyframes api-request-scan {
  0%, 12% { transform: translateX(-120%); opacity: 0; }
  20%, 82% { opacity: 1; }
  92%, 100% { transform: translateX(590%); opacity: 0; }
}
.api-request-path li span { position: relative; animation: api-path-step 8s ease-in-out infinite; }
.api-request-path li:nth-child(2) { --path-delay: 1.35s; }
.api-request-path li:nth-child(3) { --path-delay: 2.7s; }
.api-request-path li:nth-child(4) { --path-delay: 4.05s; }
.api-request-path li span, .api-request-path li span::after { animation-delay: var(--path-delay, 0s); }
.api-request-path li span::after {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; content: "";
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold-data) 14%, transparent);
  opacity: 0; animation: api-path-glow 8s ease-in-out infinite;
  animation-delay: var(--path-delay, 0s);
}
@keyframes api-path-step {
  0%, 10%, 28%, 100% { color: var(--gold-data); background: var(--panel); }
  14%, 23% { color: #fffef7; background: var(--gold-data); }
}
@keyframes api-path-glow {
  0%, 10%, 28%, 100% { opacity: 0; }
  14%, 23% { opacity: 1; }
}
.api-response.is-loading::after { animation: api-response-scan 1.5s ease-in-out infinite; }
@keyframes api-response-scan {
  from { transform: translateX(-105%); }
  to { transform: translateX(400%); }
}
.api-response.is-loading .api-response-state::before {
  box-shadow: 0 0 0 6px rgb(248 199 47 / 13%);
  animation: api-status-pulse 900ms ease-in-out infinite alternate;
}
@keyframes api-status-pulse { to { opacity: 0.35; transform: scale(0.8); } }
.access-handoff span:first-child { animation: access-merge-left 4.8s ease-in-out infinite; }
.access-handoff span:last-child { animation: access-merge-right 4.8s ease-in-out infinite; }
@keyframes access-merge-left {
  0%, 16% { transform: translateX(-50%); opacity: 0; }
  24% { opacity: 1; }
  56%, 60% { transform: translate(calc(25cqw - 50%), 0); opacity: 1; }
  87.99% { transform: translate(calc(25cqw - 50%), 28.5px); opacity: 1; }
  88%, 100% { transform: translate(calc(25cqw - 50%), 28.5px); opacity: 0; }
}
@keyframes access-merge-right {
  0%, 16% { transform: translateX(50%); opacity: 0; }
  24% { opacity: 1; }
  56%, 59% { transform: translateX(calc(-25cqw + 50%)); opacity: 1; }
  60%, 100% { transform: translateX(calc(-25cqw + 50%)); opacity: 0; }
}
@media (max-width: 48rem) {
  .runtime-connector::after { animation-name: runtime-packet-mobile; }
  .system-plain-flow ol::after { display: none; }
}
@media (max-width: 58rem) { .history-track-light { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .architecture-stage > :not(.grid-light) { animation: none; transform: none; }
  .architecture-link::before, .system-plain-flow ol::after, .runtime-connector::after,
  .verification-console::after, .verification-track-line i, .verification-stage-icon::before,
  .verification-stage-icon::after, .geometry-step::after, .api-terminal::after,
  .api-terminal pre::after, .api-request-path ol::after, .api-request-path li span::after,
  .api-response.is-loading::after, .access-handoff span { display: none; }
  .history-track-light span,
  .operations-cycle-mark::before, .verification-stage-icon, .geometry-step svg,
  .history-track::before, .api-request-path li span, .api-response-state::before {
    animation: none;
  }
}