/* Reader-paced desktop walkthrough; the full narrative remains the no-JS fallback. */
#example .walk-options, #example .walk-footer { display: none; }
#example .walk-selection, #example .walk-caution { font-size: 14px; line-height: 1.6; color: var(--vx-t3); }
#example .walk-distances { display: flex; gap: 28px; padding-block: 20px; }
#example .walk-distances > div { flex: 1; border-top: 1px solid var(--vx-hair); padding-top: 12px; }
#example .walk-distances dt { color: var(--vx-mint); font-size: 13px; margin-bottom: 8px; }
#example .walk-distances dd { font-size: 28px; letter-spacing: -.035em; color: var(--vx-t1); }
#example .walk-distances dd span { font-size: 14px; color: var(--vx-t3); letter-spacing: 0; }
#example .walk-order { padding-block: 14px; color: var(--vx-mint); font-size: 18px; letter-spacing: -.015em; }
@media (min-width: 1001px) {
  #example.has-walkthrough { scroll-margin-top: 16px; --vx-ch: clamp(350px, calc(100svh - 465px), 480px); }
  #example.has-walkthrough .vx-ans { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 64px; }
  #example.has-walkthrough .vx-ans__k { grid-column: 1 / -1; }
  #example.has-walkthrough .vx-ans__h { grid-column: 1; grid-row: 2 / 4; max-width: 17ch; font-size: clamp(36px, 3.3vw, 52px); line-height: 1.08; }
  #example.has-walkthrough #ansTop { grid-column: 2; grid-row: 2; max-width: 45ch; align-self: end; font-size: 18px; line-height: 1.55; color: var(--vx-t2); }
  #example.has-walkthrough .vx-ans__m { display: none; }
  #example.has-walkthrough .vx-answer-limit { grid-column: 2; grid-row: 3; margin-top: 12px; font-size: 12px; line-height: 1.55; max-width: 62ch; }
  #example .walkthrough { column-gap: 48px; margin-top: 36px; }
  #example .walkthrough .vx-side { position: relative; top: auto; grid-column: 1 / 8; }
  #example .walkthrough .vx-narr { grid-column: 8 / 13; min-height: calc(var(--vx-ch) + var(--vx-hd) + var(--vx-dk)); display: flex; flex-direction: column; }
  #example .walkthrough .vx-ntop { position: relative; top: auto; padding: 0; }
  #example .walkthrough .vx-ntop::before { content: none; }
  #example .walkthrough .vx-tabs a { min-height: 48px; font-size: 14px; }
  #example .walkthrough .demo__steps { padding: 0; margin-top: 32px; flex: 1; }
  #example .walkthrough .vx-rail { display: none; }
  #example .walkthrough .vx-ch, #example .walkthrough .vx-ch:last-child { padding: 0; min-height: 0; }
  #example .walkthrough [hidden] { display: none !important; }
  #example .walkthrough .vx-ch__hd { margin: 0 0 24px; padding: 0; border: 0; }
  #example .walkthrough .vx-ch__n { display: none; }
  #example .walkthrough .vx-ch h3 { font-size: clamp(25px, 2vw, 32px); line-height: 1.15; letter-spacing: -.035em; font-weight: 500; }
  #example .walkthrough .walk-options { display: flex; gap: 6px; margin-bottom: 24px; flex-wrap: wrap; }
  #example .walk-options button { border: 1px solid var(--vx-hair); border-radius: 4px; background: transparent; padding: 9px 12px; color: var(--vx-t2); font: inherit; font-size: 13px; cursor: pointer; transition: background 160ms, color 160ms; }
  #example .walk-options button[aria-pressed="true"] { background: var(--vx-t1); border-color: var(--vx-t1); color: #142019; }
  #example .walk-options button:hover { border-color: var(--vx-mint); }
  #example .walkthrough .dstep { padding: 0; border: 0; gap: 14px; }
  #example .walkthrough .vx-moment__label { display: none; }
  #example .walkthrough .vx-moment__lead { font-size: 21px; line-height: 1.4; font-weight: 500; letter-spacing: -.018em; }
  #example .walkthrough .vx-moment__body { max-width: 49ch; font-size: 15px; line-height: 1.65; }
  #example .walkthrough .drawer { margin-top: 8px; }
  #example .walkthrough .drawer > summary { min-height: 44px; }
  #example .walkthrough .walk-footer { display: flex; align-items: center; gap: 18px; border-top: 1px solid var(--vx-hair); padding-top: 20px; margin-top: 32px; }
  #example .walk-footer button { min-height: 42px; border: 0; background: none; font: inherit; font-size: 14px; color: var(--vx-t2); padding: 0; cursor: pointer; }
  #example .walk-footer button:disabled { opacity: .3; cursor: default; }
  #example .walk-footer #walkNext { margin-left: auto; color: var(--vx-t1); text-align: right; }
  #example #walkProgress { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--vx-t3); }
  #example .walk-options button:focus-visible, #example .walk-footer button:focus-visible { outline: 2px solid var(--vx-mint); outline-offset: 4px; }
  #example .walkthrough .mapwrap { border-radius: 5px; box-shadow: none; }
  #example .walkthrough .walk-selection { padding-left: 16px; border-left: 2px solid var(--vx-mint); }
  #example .walkthrough .dcards { margin-top: 8px; }
  #example .walkthrough #exDecisionReason { font-size: 17px; line-height: 1.6; }
  #example .walkthrough .walk-candidates { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #example .walk-options button { transition: none; }
}