.solid-scheme, .solid-scheme *, .solid-scheme *::before, .solid-scheme *::after { box-sizing: border-box; }

.test-shell {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color-scheme: dark;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
}

.test-page { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 48px 0 80px; }
.test-header { margin: 0 0 28px; }
.test-header h1 { margin: 0 0 8px; font-size: clamp(26px, 4vw, 38px); line-height: 1.12; }
.test-header p { max-width: 680px; margin: 0; color: var(--muted); line-height: 1.5; }
.test-header .test-kicker { margin-bottom: 8px; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.solid-scheme {
  --backing-solid: #0a0e24;
  --card-solid: #0b0e25;
  /* Opaque equivalents of the old alpha strokes composited on each surface. */
  --hairline-on-canvas: #181d31;
  --hairline-on-backing: #1e2136;
  --hairline-on-card: #1f2136;
  --hairline-on-tile: #353852;
  --muted-line-on-canvas: #4f556c;
  --glow-near-peak: 5px;
  --glow-mid-peak: 10px;
  --glow-outer-peak: 24px;
  position: relative;
  margin: var(--space-9) 0 0;
  padding: var(--space-8);
  overflow: hidden;
  border: 1px solid var(--hairline-on-canvas);
  border-radius: calc(var(--radius-infra-node) + var(--space-8));
  background-color: var(--surface-recessed);
  background-image: radial-gradient(circle at center, rgba(255,255,255,.06) 1px, transparent 0);
  background-size: 24px 24px;
  background-position: center calc(50% + var(--dot-parallax-y, 0px));
}

.solid-grid {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  justify-content: center;
  column-gap: var(--width-infra-wire);
}

/* All connector art is painted first. The opaque surfaces below cover
   prolonged paths and particles through ordinary stacking—there are no masks. */
.solid-wires { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.solid-vias { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.solid-wires .wire, .solid-vias .wire { fill: none; stroke: var(--hairline-on-canvas); stroke-width: 2px; stroke-linecap: round; }
.solid-wires .wire-muted, .solid-vias .wire-muted { stroke: var(--muted-line-on-canvas); }
.solid-wires .packet-muted, .solid-vias .packet-muted { fill: var(--muted); opacity: .45; }
.solid-wires .packet-gold {
  fill: var(--accent);
}
.solid-wires .packet-gold-glow { pointer-events: none; }
.solid-wires .trail { fill: none; stroke-width: 1px; stroke-linecap: butt; }
.solid-vias .via-muted { fill: var(--muted); }

.solid-stack, .solid-hub { position: relative; z-index: 2; }
.solid-hub { z-index: 5; }
.solid-stack { display: flex; flex-direction: column; gap: 10px; }
.solid-supply { height: calc(var(--height-infra-node) * 3 + 20px); justify-content: space-between; }

/* This is the key prototype change: the computed visual result of the old
   translucent surface is stored as a fully opaque color. */
.solid-stack::before,
.solid-stack::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: calc(var(--radius-infra-node) + 10px);
  pointer-events: none;
}
.solid-stack::before {
  z-index: 0;
  background: var(--backing-solid);
  border: 1px solid var(--hairline-on-backing);
  box-shadow: 0 16px 32px rgba(0,0,0,.20);
}
.solid-stack::after {
  z-index: 1;
  border: 1px solid var(--accent);
  opacity: 0;
}

.solid-node { position: relative; z-index: 2; width: var(--width-infra-node); height: var(--height-infra-node); }
.solid-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border: 1px solid var(--hairline-on-card);
  border-radius: var(--radius-infra-node);
  background: var(--card-solid);
  box-shadow: 0 16px 32px rgba(0,0,0,.10);
  text-align: center;
}
.solid-images { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.solid-image { position: relative; display: flex; width: 44px; height: 44px; flex: none; align-items: center; justify-content: center; overflow: hidden; border: 0; border-radius: calc(var(--radius-infra-node) * .4); background: var(--navy-700); }
.solid-image::after { content: ''; position: absolute; inset: 0; z-index: 1; border: 1px solid rgba(255,255,255,.20); border-radius: inherit; pointer-events: none; }
.solid-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.solid-image--flag { width: 35.2px; height: 35.2px; border: 0; background: transparent; }
.solid-image--flag::after { border-radius: 50%; }
.solid-image--flag img { object-fit: contain; }
.solid-label { font-size: var(--fs-body); font-weight: 700; line-height: var(--lh-tight); }
.solid-caption { margin-top: 4px; color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-tight); }
.label-narrow { display: none; }

.solid-hub { width: var(--width-infra-node); height: var(--height-infra-node); justify-self: center; }
.solid-hub-halo, .solid-hub-ring, .solid-hub-card { position: absolute; top: 50%; left: 50%; width: 90px; height: 90px; border-radius: 50%; transform: translate(-50%, -50%); }
.solid-hub-halo { width: 88px; height: 88px; animation: solid-hub-breathe 3400ms ease-in-out infinite; }
.solid-hub-card { display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; overflow: visible; border: 0; background: var(--card-solid); box-shadow: 0 0 10px rgba(245,246,250,.30), 0 16px 32px rgba(0,0,0,.18); animation: solid-logo-heartbeat 3400ms cubic-bezier(.45,0,.55,1) infinite; will-change: transform; }
.solid-hub-card img { display: block; width: auto; height: 90px; }
@keyframes solid-logo-heartbeat {
  0%, 36%, 70%, 100% { transform: translate(-50%, -50%) scale(1); }
  45% { transform: translate(-50%, -50%) scale(1.025); }
  51% { transform: translate(-50%, -50%) scale(1); }
  58% { transform: translate(-50%, -50%) scale(1.012); }
}
@keyframes solid-hub-breathe { 0%, 100% { box-shadow: 0 0 0 rgba(154,161,185,0); } 50% { box-shadow: 0 0 30px rgba(154,161,185,.65); } }

.solid-feedback { margin-top: var(--space-8); color: var(--faint); font-size: var(--fs-plan-label); line-height: var(--lh-body); text-align: center; }
.solid-feedback strong { display: inline-block; margin-bottom: 4px; color: var(--accent); font-weight: 900; }

/* Same glow, fill lift, outline weight, scale and icon echoes as production. */
.solid-demand.is-hit::after {
  will-change: inset, border-radius, border-width, box-shadow, opacity;
  animation: solid-gold-pulse 1400ms cubic-bezier(.4,0,.2,1) both,
             solid-grow 1150ms cubic-bezier(.16,1,.3,1) both;
  animation-delay: 0ms, 0ms;
}
/* Contact response uses restrained overlap: outline/scale lead, the solid
   fill follows by one frame, then card hairlines and icon echoes settle in. */
.solid-demand.is-hit::before {
  animation: solid-fill-pulse 1100ms ease-in-out both,
             solid-grow 1150ms cubic-bezier(.16,1,.3,1) both;
  animation-delay: 16ms, 0ms;
}
.solid-demand.is-hit .solid-card {
  animation: solid-card-line 1100ms ease-in-out both;
  animation-delay: 42ms;
}
.solid-demand.is-hit .solid-image {
  --node-icon-stagger: 0ms;
  --icon-stagger: 0ms;
  transform-origin: center;
  animation: solid-icon-echo 1100ms cubic-bezier(.45,0,.55,1) both;
  animation-delay: calc(56ms + var(--node-icon-stagger) + var(--icon-stagger));
}
.solid-demand.is-hit .solid-node:nth-child(1) .solid-image { --node-icon-stagger: 48ms; }
.solid-demand.is-hit .solid-node:nth-child(2) .solid-image { --node-icon-stagger: 24ms; }
.solid-demand.is-hit .solid-image:nth-child(2) { --icon-stagger: 46ms; }
.solid-demand.is-hit .solid-image:nth-child(3) { --icon-stagger: 92ms; }

/* Desktop wave follows the diagram by rows, moving right to left within
   each row: bottom, middle, then top. */
@media (min-width: 761px) {
  .solid-demand.is-hit .solid-node:nth-child(3) .solid-image:nth-child(2) { --node-icon-stagger: 0ms; --icon-stagger: 0ms; }
  .solid-demand.is-hit .solid-node:nth-child(3) .solid-image:nth-child(1) { --node-icon-stagger: 0ms; --icon-stagger: 42ms; }
  .solid-demand.is-hit .solid-node:nth-child(2) .solid-image:nth-child(2) { --node-icon-stagger: 0ms; --icon-stagger: 84ms; }
  .solid-demand.is-hit .solid-node:nth-child(2) .solid-image:nth-child(1) { --node-icon-stagger: 0ms; --icon-stagger: 126ms; }
  .solid-demand.is-hit .solid-node:nth-child(1) .solid-image:nth-child(3) { --node-icon-stagger: 0ms; --icon-stagger: 168ms; }
  .solid-demand.is-hit .solid-node:nth-child(1) .solid-image:nth-child(2) { --node-icon-stagger: 0ms; --icon-stagger: 210ms; }
  .solid-demand.is-hit .solid-node:nth-child(1) .solid-image:nth-child(1) { --node-icon-stagger: 0ms; --icon-stagger: 252ms; }
}

@keyframes solid-gold-pulse {
  0% {
    opacity: 0;
    border-width: 1px;
    box-shadow: 0 0 var(--glow-near-peak) rgba(254,201,2,0), 0 0 var(--glow-mid-peak) rgba(254,201,2,0), 0 0 var(--glow-outer-peak) rgba(254,201,2,0);
  }
  18% {
    opacity: 1;
    border-width: 1px;
    box-shadow: 0 0 var(--glow-near-peak) rgba(254,201,2,.42), 0 0 var(--glow-mid-peak) rgba(254,201,2,.24), 0 0 var(--glow-outer-peak) rgba(254,201,2,.1);
  }
  48% {
    opacity: 1;
    border-width: 1px;
    box-shadow: 0 0 var(--glow-near-peak) rgba(254,201,2,.28), 0 0 var(--glow-mid-peak) rgba(254,201,2,.15), 0 0 var(--glow-outer-peak) rgba(254,201,2,.06);
  }
  68% {
    opacity: .72;
    border-width: 1px;
    box-shadow: 0 0 var(--glow-near-peak) rgba(254,201,2,.14), 0 0 var(--glow-mid-peak) rgba(254,201,2,.07), 0 0 var(--glow-outer-peak) rgba(254,201,2,.025);
  }
  100% {
    opacity: 0;
    border-width: 1px;
    box-shadow: 0 0 var(--glow-near-peak) rgba(254,201,2,0), 0 0 var(--glow-mid-peak) rgba(254,201,2,0), 0 0 var(--glow-outer-peak) rgba(254,201,2,0);
  }
}
@keyframes solid-grow {
  0% { inset: -10px; border-radius: calc(var(--radius-infra-node) + 10px); }
  38%, 56.43% { inset: -15px; border-radius: calc(var(--radius-infra-node) + 15px); }
  100% { inset: -10px; border-radius: calc(var(--radius-infra-node) + 10px); }
}
@keyframes solid-fill-pulse {
  0%, 100% { background: var(--backing-solid); }
  33%, 59% { background: #0c112b; }
  78% { background: #0b1029; }
  92% { background: #0a0f25; }
}
@keyframes solid-card-line { 0%, 100% { border-color: #1f2136; } 18%, 59% { border-color: #2b2d41; } 78% { border-color: #272a3e; } 92% { border-color: #202338; } }
@keyframes solid-icon-echo { 0%, 45%, 68%, 85%, 94%, 98%, 100% { transform: scale(1); } 24% { transform: scale(1.08); } 58% { transform: scale(1.03); } 77% { transform: scale(1.015); } 90% { transform: scale(1.006); } 96% { transform: scale(1.003); } 99% { transform: scale(1.0015); } }

@media (max-width: 760px) {
  .solid-scheme {
    --glow-near-peak: 4px;
    --glow-mid-peak: 10px;
    --glow-outer-peak: 24px;
  }
  .test-page { width: calc(100% - 32px); padding: 24px 0 48px; }
  .test-header { margin-bottom: 18px; }
  .solid-grid { grid-template-columns: 1fr; row-gap: var(--space-8); justify-items: center; }
  .solid-stack { width: 100%; align-items: center; }
  .solid-demand { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .solid-demand .solid-node { width: 100%; }
  .solid-demand .solid-node:last-child { width: calc((100% - 10px) / 2); grid-column: 1 / -1; justify-self: center; }
  .solid-demand .solid-node:nth-child(3) .solid-caption { display: none; }
  .solid-supply { height: auto; flex-flow: row nowrap; justify-content: center; gap: 10px; }
  .solid-supply .solid-node { width: calc((100% - 10px) / 2); }
  .solid-demand .solid-node:nth-child(-n + 2) .solid-label { white-space: nowrap; }
  .desktop-only { display: none; }
  .label-wide { display: none; }
  .label-narrow { display: inline; }
  .solid-feedback { margin-top: var(--space-8) !important; }

  /* The mobile wave begins beside the arriving packet, crosses the bottom
     row, then sweeps across all four icons in the top row. */
  .solid-demand.is-hit.is-hit-from-left .solid-node:nth-child(3) .solid-image:nth-child(1) { --node-icon-stagger: 0ms; --icon-stagger: 0ms; }
  .solid-demand.is-hit.is-hit-from-left .solid-node:nth-child(3) .solid-image:nth-child(2) { --node-icon-stagger: 0ms; --icon-stagger: 42ms; }
  .solid-demand.is-hit.is-hit-from-left .solid-node:nth-child(1) .solid-image:nth-child(1) { --node-icon-stagger: 0ms; --icon-stagger: 84ms; }
  .solid-demand.is-hit.is-hit-from-left .solid-node:nth-child(1) .solid-image:nth-child(2) { --node-icon-stagger: 0ms; --icon-stagger: 126ms; }
  .solid-demand.is-hit.is-hit-from-left .solid-node:nth-child(2) .solid-image:nth-child(1) { --node-icon-stagger: 0ms; --icon-stagger: 168ms; }
  .solid-demand.is-hit.is-hit-from-left .solid-node:nth-child(2) .solid-image:nth-child(2) { --node-icon-stagger: 0ms; --icon-stagger: 210ms; }

  .solid-demand.is-hit.is-hit-from-right .solid-node:nth-child(3) .solid-image:nth-child(2) { --node-icon-stagger: 0ms; --icon-stagger: 0ms; }
  .solid-demand.is-hit.is-hit-from-right .solid-node:nth-child(3) .solid-image:nth-child(1) { --node-icon-stagger: 0ms; --icon-stagger: 42ms; }
  .solid-demand.is-hit.is-hit-from-right .solid-node:nth-child(2) .solid-image:nth-child(2) { --node-icon-stagger: 0ms; --icon-stagger: 84ms; }
  .solid-demand.is-hit.is-hit-from-right .solid-node:nth-child(2) .solid-image:nth-child(1) { --node-icon-stagger: 0ms; --icon-stagger: 126ms; }
  .solid-demand.is-hit.is-hit-from-right .solid-node:nth-child(1) .solid-image:nth-child(2) { --node-icon-stagger: 0ms; --icon-stagger: 168ms; }
  .solid-demand.is-hit.is-hit-from-right .solid-node:nth-child(1) .solid-image:nth-child(1) { --node-icon-stagger: 0ms; --icon-stagger: 210ms; }
}

@media (prefers-reduced-motion: reduce) {
  .solid-hub-halo { display: none; animation: none; }
  .solid-hub-card { animation: none; box-shadow: 0 0 10px rgba(245,246,250,.30), 0 16px 32px rgba(0,0,0,.18); }
  .solid-wires .packet-muted, .solid-wires .packet-gold, .solid-wires .trail { display: none; }
  .solid-demand.is-hit::before, .solid-demand.is-hit::after, .solid-demand.is-hit .solid-card, .solid-demand.is-hit .solid-image { animation: none; }
}