#trade-walkthrough {
  margin: 0 0 clamp(26px, 4vw, 56px);
  scroll-margin-top: 20px;
  border: 1px dotted var(--line);
  background: radial-gradient(ellipse at 88% 10%, #123023, transparent 62%), #171719;
  padding: clamp(16px, 3vw, 38px);
}
.walk-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; }
.walk-head p { margin: 0 0 7px; color: var(--accent); font-size: 11px; letter-spacing: .12em; }
.walk-head h2 { margin: 0; font: 500 clamp(27px, 4vw, 50px)/1 "Untitled Sans", sans-serif; letter-spacing: -.065em; }
#trade-walkthrough button {
  background: #151719;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 7px 12px;
  font: inherit;
  cursor: pointer;
}
#trade-walkthrough button:hover, #trade-walkthrough button[aria-pressed="true"] {
  color: var(--accent);
  border-color: #268358;
}
#trade-walkthrough button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.walk-replay { white-space: nowrap; }
.walk-symbols { display: flex; gap: 7px; margin: 18px 0 12px; }
.walk-stage { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 2.3fr); border: 1px dotted var(--line); }
.walk-steps { display: grid; align-content: stretch; margin: 0; border-right: 1px dotted var(--line); }
.walk-steps > div { display: grid; align-content: center; padding: 10px 13px; border-bottom: 1px dotted var(--line); }
.walk-steps > div:last-child { border-bottom: 0; }
.walk-steps dt { margin: 0 0 5px; color: #d1d3da; }
.walk-steps dd { display: flex; justify-content: space-between; gap: 8px; margin: 0; color: #a5a2ae; font-size: 11px; }
.walk-steps b { font-weight: 400; white-space: nowrap; }
.walk-fill dt, .walk-fill b { color: var(--accent); }
.walk-skip dt, .walk-skip b { color: #edbd9e; }
.walk-graph { margin: 0; display: grid; align-items: center; padding: 12px; min-width: 0; background: #10191540; }
.walk-graph svg { width: 100%; display: block; }
.walk-grid { stroke: #404841; stroke-width: .8; stroke-dasharray: 2 4; }
.walk-level { stroke: var(--accent); stroke-width: .8; stroke-dasharray: 4 4; }
.walk-axis { fill: #a7b7aa; font: 10px "Degrad Mono", monospace; }
.walk-line { fill: none; stroke: #a9ffce; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.walk-point { fill: #101916; stroke: #a9ffce; stroke-width: 1.2; transform-box: fill-box; transform-origin: center; }
.walk-point.above { fill: var(--accent); stroke: #101916; }
.walk-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
.walk-link { margin-left: clamp(8px, 2vw, 24px); }
@media (max-width: 640px) {
  .walk-stage { grid-template-columns: minmax(0, 1fr); }
  .walk-steps { border-right: 0; border-bottom: 1px dotted var(--line); }
  .walk-graph { padding: 7px; }
  .walk-link { display: inline-block; margin-left: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  /* Silex rule graph line/area/marker choreography, with SEAM stages. */
  .playing .walk-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: walk-draw 1.35s cubic-bezier(.65, 0, .35, 1) both; }
  .playing .walk-area { animation: walk-appear .6s .45s both; }
  .playing .walk-point { animation: walk-mark .38s var(--point-delay) both; }
  .playing .walk-steps > div { animation: walk-stage-in .38s var(--stage-delay, 0s) both; }
  .playing .walk-steps > div:nth-child(2) { --stage-delay: .26s; }
  .playing .walk-steps > div:nth-child(3) { --stage-delay: .62s; }
  .playing .walk-steps > div:nth-child(4) { --stage-delay: 1.13s; }
}
@keyframes walk-draw { to { stroke-dashoffset: 0; } }
@keyframes walk-appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes walk-mark {
  from { opacity: 0; transform: scale(.25); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes walk-stage-in { from { opacity: .15; background: #00e67615; } }