.dc-show {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  border-radius: inherit;
  --sh-pad: clamp(18px, 4vh, 46px);
  --sh-go: #34d399;
  --sh-mid: #fbbf24;
  --sh-no: #f87171;
  --sh-dim: rgba(255, 255, 255, .10);
  --sh-surface: #17171a;
  --sh-line: rgba(255, 255, 255, .09);
}

.sh-scene {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(10px, 1.8vh, 22px);
  padding: var(--sh-pad);
  text-align: center;
  opacity: 0; visibility: hidden;
  transition: opacity .5s ease, visibility .5s;
}
.sh-scene.is-on { opacity: 1; visibility: visible; }

.sh-eyebrow {
  font-size: min(clamp(10px, .85vw, 12px), 2.4vh);
  font-weight: 600; text-transform: uppercase; letter-spacing: .16em;
  color: rgba(255, 255, 255, .42);
}
.sh-title {
  font-size: min(clamp(20px, 2.5vw, 38px), 6.4vh);
  font-weight: 400; line-height: 1.16; letter-spacing: -.025em;
  color: #fff; max-width: 22ch; text-wrap: balance;
}
.sh-title b { font-weight: 600; }
.sh-sub {
  font-size: min(clamp(12px, 1.15vw, 16px), 3.2vh);
  color: rgba(255, 255, 255, .58); max-width: 46ch; line-height: 1.5;
}

.sh-scene.is-on > * { animation: sh-rise .55s cubic-bezier(.22, .61, .36, 1) both; }
.sh-scene.is-on > *:nth-child(2) { animation-delay: .08s; }
.sh-scene.is-on > *:nth-child(3) { animation-delay: .16s; }
.sh-scene.is-on > *:nth-child(4) { animation-delay: .24s; }
@keyframes sh-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.sh-source { display: flex; align-items: center; gap: 12px; }
.sh-source img { width: min(46px, 8vh); height: auto; display: block; }
.sh-source-name { font-size: min(15px, 3.2vh); font-weight: 600; color: #fff; letter-spacing: -.01em; }
.sh-source-sub { font-size: min(11.5px, 2.6vh); color: rgba(255, 255, 255, .45); }

.sh-figures {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(18px, 4vw, 64px);
  margin-top: clamp(4px, 1.4vh, 14px);
}
.sh-fig { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.sh-num {
  font-size: min(clamp(28px, 4.4vw, 62px), 9.5vh);
  font-weight: 600; line-height: 1; letter-spacing: -.03em; color: #fff;
  font-variant-numeric: tabular-nums;
}
.sh-lbl {
  font-size: min(clamp(10px, 1vw, 13px), 2.6vh);
  color: rgba(255, 255, 255, .5); letter-spacing: -.005em;
}

.sh-flood { justify-content: flex-start; gap: clamp(8px, 1.4vh, 16px); }
.sh-wall {
  position: relative;
  flex: 1; width: 100%; min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 15vw, 190px), 1fr));
  grid-auto-rows: min-content;
  gap: clamp(3px, .7vh, 7px);
  align-content: start;
  overflow: hidden;

  -webkit-mask-image: linear-gradient(#000 72%, transparent 100%);
          mask-image: linear-gradient(#000 72%, transparent 100%);
}
.sh-row {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 6px;
  background: var(--sh-surface);
  border: 1px solid var(--sh-line);
  border-radius: 5px;
  opacity: 0;
  animation: sh-drop .32s ease-out both;
}
@keyframes sh-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.sh-row i { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .17); }
.sh-row .b1 { width: 14px; flex: none; }
.sh-row .b2 { flex: 1; }
.sh-row .b3 { width: 18px; flex: none; opacity: .6; }

.sh-row.is-out { opacity: .16; border-color: transparent; background: #101012; transition: opacity .5s ease, background .5s; }
.sh-row.is-hit {
  border-color: rgba(52, 211, 153, .55);
  background: rgba(52, 211, 153, .12);
  transition: border-color .35s, background .35s, box-shadow .35s;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, .08);
}
.sh-row.is-hit .b1 { background: var(--sh-go); }
.sh-row.is-hit i { background: rgba(255, 255, 255, .5); }

.sh-sweep {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 26%;
  background: linear-gradient(90deg,
    transparent, rgba(255, 68, 161, .10) 42%, rgba(149, 62, 232, .30) 72%, rgba(255, 255, 255, .55));
  filter: blur(6px);
  opacity: 0;
  pointer-events: none;
}
.sh-flood.is-scanning .sh-sweep { animation: sh-sweep 3.4s cubic-bezier(.4, 0, .5, 1) forwards; }
@keyframes sh-sweep {
  from { opacity: 0; transform: translateX(-120%); }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  to   { opacity: 0; transform: translateX(420%); }
}

.sh-agents { position: absolute; inset: 0; pointer-events: none; }
.sh-agent {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg, #FF44A1, #953EE8);
  box-shadow: 0 0 10px rgba(255, 68, 161, .8);
  opacity: 0;
}
.sh-flood.is-scanning .sh-agent { animation: sh-agent 3.4s ease-in-out both; }
@keyframes sh-agent {
  0%   { opacity: 0; transform: translateX(-40px) scale(.4); }
  14%  { opacity: 1; transform: translateX(0) scale(1); }
  86%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(60px) scale(.4); }
}

.sh-flood-foot {
  display: flex; align-items: baseline; gap: 10px; justify-content: center;
  min-height: 1.6em;
}
.sh-count {
  font-size: min(clamp(16px, 2vw, 26px), 4.4vh); font-weight: 600;
  color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.sh-count-lbl { font-size: min(12px, 2.6vh); color: rgba(255, 255, 255, .5); }

.sh-verdict { opacity: 0; transition: opacity .4s ease; font-size: min(clamp(13px, 1.3vw, 18px), 3.4vh); color: #fff; }
.sh-flood.is-done .sh-verdict { opacity: 1; }
.sh-flood.is-done .sh-flood-live { opacity: 0; transition: opacity .3s; }
.sh-flood-live { display: flex; align-items: baseline; gap: 8px; }
.sh-flood-foot { position: relative; }
.sh-flood-foot > * { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; }

.sh-board-wrap { width: min(620px, 100%); }

.sh-board-wrap .mk-board { box-shadow: 0 24px 60px rgba(0, 0, 0, .55); text-align: left; }
.sh-scene.is-on .sh-board-wrap .mk-lane { animation: sh-lane .45s ease-out both; }
.sh-scene.is-on .sh-board-wrap .mk-lane:nth-of-type(2) { animation-delay: .10s; }
.sh-scene.is-on .sh-board-wrap .mk-lane:nth-of-type(3) { animation-delay: .20s; }
.sh-scene.is-on .sh-board-wrap .mk-lane:nth-of-type(4) { animation-delay: .30s; }
.sh-scene.is-on .sh-board-wrap .mk-lane:nth-of-type(5) { animation-delay: .40s; }
@keyframes sh-lane { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

.sh-web { width: min(760px, 100%); height: min(46vh, 340px); }
.sh-web svg { width: 100%; height: 100%; overflow: visible; }
.sh-edge {
  stroke: rgba(255, 255, 255, .22); stroke-width: 1.4; fill: none;
  stroke-dasharray: 260; stroke-dashoffset: 260;
}
.sh-scene.is-on .sh-edge { animation: sh-draw .7s ease-out forwards; }
.sh-scene.is-on .sh-edge:nth-of-type(2) { animation-delay: .10s; }
.sh-scene.is-on .sh-edge:nth-of-type(3) { animation-delay: .20s; }
.sh-scene.is-on .sh-edge:nth-of-type(4) { animation-delay: .30s; }
.sh-scene.is-on .sh-edge:nth-of-type(5) { animation-delay: .40s; }
.sh-scene.is-on .sh-edge:nth-of-type(6) { animation-delay: .50s; }
@keyframes sh-draw { to { stroke-dashoffset: 0; } }
.sh-node circle { fill: #1b1b1f; stroke: rgba(255, 255, 255, .28); stroke-width: 1.4; }
.sh-node text { fill: rgba(255, 255, 255, .78); font-size: 11px; text-anchor: middle; }
.sh-node.is-you circle { fill: #2a1030; stroke: #FF44A1; stroke-width: 2; }
.sh-node.is-you text { fill: #fff; font-weight: 600; }
.sh-node.is-buyer circle { fill: #101a19; stroke: rgba(52, 211, 153, .5); }
.sh-node.is-buyer text { fill: rgba(52, 211, 153, .85); font-size: 10px; }
.sh-scene.is-on .sh-node { animation: sh-pop .4s cubic-bezier(.34, 1.4, .52, 1) both; }
.sh-scene.is-on .sh-node:nth-of-type(n+2) { animation-delay: .35s; }
@keyframes sh-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

.sh-pulse-card {
  width: min(560px, 100%);
  background: var(--sh-surface); border: 1px solid var(--sh-line);
  border-radius: 14px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px; text-align: left;
}
.sh-dictate { display: flex; align-items: center; gap: 10px; }
.sh-mic {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, #FF44A1, #953EE8); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.sh-mic svg { width: 14px; height: 14px; }
.sh-scene.is-on .sh-mic { animation: sh-beat 1.4s ease-in-out .3s 3; }
@keyframes sh-beat { 50% { box-shadow: 0 0 0 8px rgba(255, 68, 161, .14); } }
.sh-said { font-size: min(14px, 3vh); color: #fff; overflow: hidden; white-space: nowrap; }
.sh-scene.is-on .sh-said { animation: sh-type 2s steps(52, end) .4s backwards; }
@keyframes sh-type { from { width: 0; } to { width: 100%; } }
.sh-rule {
  display: flex; align-items: center; gap: 9px;
  padding-top: 12px; border-top: 1px solid var(--sh-line);
}
.sh-badge {
  flex: none; font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; padding: 3px 8px; border-radius: 999px;
  background: rgba(248, 113, 113, .16); color: #fca5a5;
}
.sh-rule-txt { font-size: min(12.5px, 2.8vh); color: rgba(255, 255, 255, .68); }
.sh-scene.is-on .sh-rule { animation: sh-rise .5s ease-out 2.5s backwards; }

.sh-end-mark { width: min(54px, 9vh); height: auto; display: block; }
.sh-end-cta { margin-top: clamp(6px, 1.6vh, 16px); }

.sh-rail {
  position: absolute; left: clamp(10px, 2vw, 18px); top: clamp(10px, 2.2vh, 18px);
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .05);
}
.sh-seg {
  width: clamp(18px, 3vw, 34px); height: 3px; padding: 0; border: 0;
  border-radius: 2px; background: rgba(255, 255, 255, .18);
  cursor: pointer; position: relative; overflow: hidden;
}
.sh-seg::after {
  content: ''; position: absolute; inset: 0;
  background: #fff; transform: scaleX(0); transform-origin: left;
}
.sh-seg.is-done::after { transform: scaleX(1); }
.sh-seg.is-current::after { animation: sh-fill linear forwards; animation-duration: inherit; }
@keyframes sh-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sh-seg:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.sh-skip {
  position: absolute; right: clamp(10px, 2vw, 18px); bottom: clamp(10px, 2.2vh, 20px);
  padding: 6px 12px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .72);
  font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
  transition: background .16s, color .16s;
}
.sh-skip:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.sh-skip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-height: 460px) {
  .sh-rail { top: 6px; }
  .sh-skip { bottom: 6px; font-size: 11px; padding: 4px 10px; }
  .sh-scene { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {

  .sh-scene.is-on > *,
  .sh-scene.is-on .mk-lane,
  .sh-scene.is-on .sh-node,
  .sh-scene.is-on .sh-rule { animation: sh-fade .3s ease both; }
  .sh-scene.is-on .sh-said { animation: none; width: auto; }
  .sh-scene.is-on .sh-mic { animation: none; }
  .sh-row { animation: none; opacity: 1; }
  .sh-sweep, .sh-agent { display: none; }
  .sh-scene.is-on .sh-edge { animation: none; stroke-dashoffset: 0; }
  .sh-seg.is-current::after { animation: none; transform: scaleX(.5); }
  @keyframes sh-fade { from { opacity: 0; } to { opacity: 1; } }
}