/* Beat 10 #proof, "The market" (spec r3 7.1): the block recedes to a dimmed
   stand and third-party numerals take the stage one per step, centred over
   it. Growth line (step 1), a pair of numerals (step 2), bars (step 5). */
html.b-live .sh-beat[data-b-deck] { display: flex; flex-direction: column; }
html.b-live .sh-beat[data-b-deck] > .sh-hud { margin-top: auto; }
.sh-beat--proof { --b-step-h: 40svh; }
.sh-beat--proof .b-frame { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head tag" "steps steps" "foot foot"; column-gap: 32px; }
.sh-beat--proof .b-head { grid-area: head; }
.sh-beat--proof .b-head h2 { font-size: clamp(28px, 2.9vw, 46px); }
.sh-beat--proof .b-tag { grid-area: tag; align-self: start; margin-top: 64px; }
.sh-beat--proof .b-steps { grid-area: steps; }
.sh-beat--proof .b-foot { grid-area: foot; max-width: min(62%, 860px); gap: 12px; }
.sh-beat--proof .b-step { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sh-beat--proof .b-line { margin-inline: auto; max-width: 30em; }
.sh-beat--proof .sh-src { text-align: center; }

/* Step 1: the growth line over the stand. */
.sh-beat--proof .b-step:first-child .b-num { font-size: clamp(56px, 8.2vw, 148px); }
.b-growth { display: block; width: min(500px, 80vw, 46vh * 2.7); height: auto; margin: 14px auto 0; overflow: visible; }
.b-growth__grid { fill: none; stroke: rgb(255 255 255 / 7%); stroke-width: 1; }
.b-growth polyline { fill: none; stroke: var(--sh-gold-hi); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgb(229 198 92 / 45%)); }
.b-growth circle { fill: var(--sh-ink-0); stroke: var(--sh-gold-hi); stroke-width: 2; }
.b-growth circle.is-teal { fill: var(--sh-teal); stroke: #c9fff6; filter: drop-shadow(0 0 8px var(--sh-teal)); }
.b-growth text { fill: var(--sh-fg-2); font: 600 15px var(--sh-font-mono); letter-spacing: .1em; paint-order: stroke; stroke: var(--sh-ink-0); stroke-width: 5px; }
.b-draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
html.b-live .b-draw { stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.45, 0, .2, 1) .25s; }
html.b-live .is-active .b-draw { stroke-dashoffset: 0; }
html.b-live .b-growth circle, html.b-live .b-growth text { opacity: 0; transition: opacity .4s ease; }
html.b-live .is-active .b-growth circle, html.b-live .is-active .b-growth text { opacity: 1; }
html.b-live .is-active .b-growth circle:nth-of-type(2), html.b-live .is-active .b-growth text:nth-of-type(2) { transition-delay: .9s; }
html.b-live .is-active .b-growth circle:nth-of-type(3), html.b-live .is-active .b-growth text:nth-of-type(3) { transition-delay: 1.3s; }
html.b-live .is-active .b-growth circle:nth-of-type(4), html.b-live .is-active .b-growth text:nth-of-type(4) { transition-delay: 1.75s; }

/* Step 2: two numerals side by side. */
.b-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 96px); align-items: start; }
.b-pair .b-num { font-size: var(--b-xl); }
.b-pair > div { display: flex; flex-direction: column; align-items: center; }
.b-pair > div + div { position: relative; }
.b-pair > div + div::before { content: ""; position: absolute; left: calc(clamp(24px, 5vw, 96px) / -2); top: 8%; bottom: 8%; width: 1px; background: linear-gradient(transparent, var(--sh-line-2), transparent); }

/* Step 5: slots against crash, bars grown from zero. */
.b-bars { display: grid; gap: 18px; width: min(760px, 86vw); text-align: left; }
.b-bar { position: relative; display: flex; align-items: baseline; gap: 14px; padding: 0 0 12px; color: var(--sh-fg); font-size: 16px; }
.b-bar__num { font: 400 var(--b-xl)/.9 var(--sh-font-num); letter-spacing: -.03em; color: var(--sh-fg); }
.b-bar--crash .b-bar__num { color: var(--sh-teal); }
.b-bar__fill { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--sh-fg-3), var(--sh-fg)); transform-origin: 0 50%; transform: scaleX(var(--b-w, 1)); }
.b-bar--crash .b-bar__fill { --b-w: .0192; min-width: 4px; background: var(--sh-teal); box-shadow: 0 0 12px var(--sh-teal); }
.b-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 1px; background: var(--sh-line); }
html.b-live .b-bar__fill { transform: scaleX(0); transition: transform 1.4s cubic-bezier(.45, 0, .2, 1) .3s; }
html.b-live .is-active .b-bar__fill { transform: scaleX(var(--b-w, 1)); }

.sh-beat--proof .b-closing { font-size: clamp(18px, 1.6vw, 24px); }
.sh-beat--proof .b-disclaimer { font-size: 12.5px; }

@media (max-width: 767px) {
  .sh-beat--proof { --b-step-h: 52svh; }
  .sh-beat--proof .b-frame { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "steps" "foot"; row-gap: 10px; }
  .sh-beat--proof .b-tag { grid-area: head; justify-self: end; margin-top: -4px; padding: 5px 7px; font-size: 8.5px; letter-spacing: .14em; }
  html.b-live .sh-beat--proof .b-closing:not(.is-shown) { display: none; }
  .sh-beat--proof .b-foot { max-width: none; gap: 10px; }
  .sh-beat--proof .b-closing { font-size: 16px; }
  .sh-beat--proof .b-disclaimer { font-size: 11px; }
  .b-growth { width: 100%; margin-top: 8px; }
  .b-growth text { font-size: 15px; }
  .b-pair { grid-template-columns: 1fr; gap: 18px; }
  .b-pair > div + div::before { left: 20%; right: 20%; top: -9px; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, transparent, var(--sh-line-2), transparent); }
  .b-bars { width: 100%; }
  .b-bar { flex-wrap: wrap; font-size: 14px; }
}
@media (max-height: 559px) and (orientation: landscape) {
  .b-pair .b-num, .b-bar__num { font-size: 56px; }
}