/* Home-only player. Fixed charts and shared site styles are not overridden. */
.home-walkthrough {
  /* The walkthrough is a visual tool, not a reading column. Give its fixed
     TradingView-style canvas more room than the site's normal 1180px shell. */
  width: min(calc(100% - 2rem), 1480px);
  padding-top: 0;
  scroll-margin-top: 110px;
  /* Teaching typography is role-based: 72px product introductions are
     animated in rank-walkthrough.js; the stable tiers below keep equivalent
     lessons, chart explanations, supporting copy and native labels aligned. */
  --walkthrough-type-lesson: 43px;
  --walkthrough-type-explanation: 28px;
  --walkthrough-type-support: 22px;
  --walkthrough-type-native: 16px;
}
.home-walkthrough [hidden] { display: none !important; }
.home-walkthrough .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.walkthrough-player { margin: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); padding: clamp(.75rem,2vw,1.35rem); }
.walkthrough-title { margin: 0 0 clamp(.75rem,1.8vw,1.15rem); text-align: center; font-size: clamp(1.6rem,3vw,2.4rem); line-height: 1.08; letter-spacing: -.045em; }
.walkthrough-chart-stage { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--chart-frame-radius); background: var(--chart-bg); }
/* The visible timeline stays on the chart edge. This clear strip gives the
   whole line, including the portion below Expand, an unobstructed drag area. */
.walkthrough-seek-below { height: 10px; flex: 0 0 10px; cursor: ew-resize; touch-action: none; }
.home-walkthrough.is-poster .walkthrough-seek-below { pointer-events: none; }
/* Ready and paused states share one accessible centre control.
   Only the icon and its label have a background; the chart remains visible. */
.walkthrough-center-overlay { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.walkthrough-center-action { display: grid; justify-items: center; gap: 8px; padding: 6px; border: 0; background: transparent; color: var(--ink); font: inherit; cursor: pointer; pointer-events: auto; }
.walkthrough-center-action > span { display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid #d6b65e; border-radius: 50%; color: var(--gold-bright); background: rgba(15,20,28,.94); box-shadow: 0 3px 14px rgba(0,0,0,.3); font-size: 1.5rem; line-height: 1; }
.walkthrough-center-action strong { padding: 5px 9px; border-radius: 6px; background: rgba(15,20,28,.94); font-size: .85rem; font-weight: 600; line-height: 1.2; }
.walkthrough-center-action:hover > span { background: #242c39; }
/* Paused controls use a free chart region chosen after the scene is laid out.
   The populated ready preview retains its centred control. */
[data-replay-pause-cue] .walkthrough-center-action {
  position: absolute;
  left: var(--walkthrough-pause-x, 50%);
  top: var(--walkthrough-pause-y, 50%);
  transform: translate(-50%, -50%);
}

.home-walkthrough.is-poster .replay-candle-highlight-band { fill-opacity: .04; }
.home-walkthrough button:focus-visible, .home-walkthrough input:focus-visible, .home-walkthrough summary:focus-visible, .walkthrough-explore-actions a:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.walkthrough-chart-scroll { position: relative; max-width: 100%; overflow: hidden; background: var(--chart-bg); }
.walkthrough-surface-control { display: inline-flex; flex: 0 0 auto; min-height: 44px; padding: .4rem .7rem; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--panel-2); font: inherit; cursor: pointer; }
.walkthrough-surface-control:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.walkthrough-surface-cue { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font-size: .85rem; font-weight: 600; }
.walkthrough-surface-cue [data-replay-play-symbol] { font-size: 1.3rem; line-height: 1; }
.walkthrough-surface-cue [data-replay-play-label] { display: inline; }
.walkthrough-chart { width: 100%; overflow: hidden; }
.walkthrough-chart svg { width: 100%; height: auto; aspect-ratio: var(--walkthrough-wide-aspect, 2 / 1); display: block; transition: transform .46s cubic-bezier(.22,.61,.36,1); }
.walkthrough-chart-scroll.is-mobile-framed .walkthrough-chart { overflow: hidden; transition: height .46s cubic-bezier(.22,.61,.36,1); }
.walkthrough-chart .replay-focus-node,
.walkthrough-chart .replay-stock-path { transition: opacity .58s cubic-bezier(.22,.61,.36,1); }
/* These scale and title layers hand off from identical teaching glyphs at the
   same coordinates. Fading the native copy after that swap creates a visible
   blink, so the visually identical replacements are intentionally atomic. */
.walkthrough-chart #replay-own-rank-scale,
.walkthrough-chart #replay-own-indicator-title,
.walkthrough-chart #replay-screener-indicator-title { transition: none; }
.home-walkthrough.is-intro-reset .walkthrough-chart .replay-focus-node,
.home-walkthrough.is-intro-reset .walkthrough-chart .replay-rank-step,
.home-walkthrough.is-intro-reset .walkthrough-chart .replay-marker-step { transition: none; }
.walkthrough-chart .replay-candle-step,
.walkthrough-chart .replay-rank-step,
.walkthrough-chart .replay-marker-step { transform-box: fill-box; transform-origin: center bottom; transition: opacity .34s ease-out, transform .42s cubic-bezier(.22,.61,.36,1); }
.walkthrough-chart .replay-rank-step.replay-focus-node,
.walkthrough-chart .replay-marker-step.replay-focus-node { transition: opacity .46s ease-out, transform .42s cubic-bezier(.22,.61,.36,1); }
.walkthrough-chart .replay-candle-highlight,
.walkthrough-chart .replay-candle-highlight-band,
.walkthrough-chart #replay-teaching-candle-a { transition: transform .18s ease-out; }
.walkthrough-chart .is-ending-candle-guide {
  /* Keep the quiet ending guide visible when the chart is fitted to a phone. */
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}
.walkthrough-chart .replay-native-table-row,
.walkthrough-chart .replay-native-table,
.walkthrough-chart .replay-occurrence-table { transition: opacity .46s cubic-bezier(.22,.61,.36,1); }
.walkthrough-chart #replay-symbol-legend,
.walkthrough-chart #replay-date-axis { visibility: visible; }
.walkthrough-chart #replay-symbol-legend {
  font-family: Arial, sans-serif;
  font-weight: 400;
  fill: var(--chart-status-color);
}
.walkthrough-chart #replay-own-indicator-title text,
.walkthrough-chart #replay-screener-indicator-title text {
  font-family: Arial, sans-serif;
  fill: var(--chart-pane-color);
}
.walkthrough-chart #replay-price-scale-labels text,
.walkthrough-chart #replay-own-rank-scale > text,
.walkthrough-chart #replay-total-rank-scale > text,
.walkthrough-chart #replay-date-axis > text {
  font-family: Arial, sans-serif;
  font-size: var(--walkthrough-type-axis, 15px);
  fill: var(--chart-axis-color);
}
.home-walkthrough:not(.is-portrait-player) #replay-wide-scene .is-scale-crowded { visibility: hidden !important; }
/* Match the Ranks hero's native chart chrome. The source SVG remains frozen
   evidence; these presentation overrides keep its replay palette in sync. */
.walkthrough-chart svg > rect:first-of-type,
.walkthrough-chart #replay-wide-scene > rect:first-of-type,
.walkthrough-chart #replay-price-scale-labels > rect,
.walkthrough-chart #replay-date-axis > rect { fill: var(--chart-bg); }
.walkthrough-chart .replay-price-horizontal-gridline { stroke: var(--chart-grid); }
.walkthrough-chart .replay-price-vertical-gridline,
.walkthrough-chart .replay-indicator-vertical-gridline { stroke: var(--chart-vertical-grid); }
.walkthrough-chart #replay-price-rank-divider,
.walkthrough-chart #replay-rank-total-divider { stroke: var(--chart-pane-divider); }
.walkthrough-chart #replay-date-axis > line,
.walkthrough-chart #replay-value-scale-divider { stroke: var(--chart-grid); }
.walkthrough-chart .replay-zero-line { stroke: var(--chart-zero); }
.walkthrough-chart #replay-own-rank-scale > line[stroke-dasharray],
.walkthrough-chart #replay-total-rank-scale > line[stroke-dasharray] { stroke-opacity: var(--chart-guide-opacity); }
.walkthrough-chart [id^="replay-candle-"] > line[stroke="#e5e8ee"] { stroke: var(--chart-candle-up); }
.walkthrough-chart [id^="replay-candle-"] > line[stroke="#8993a3"] { stroke: var(--chart-candle-down); }
.walkthrough-chart [id^="replay-candle-"] > rect[fill="#e5e8ee"] { fill: var(--chart-candle-up); }
.walkthrough-chart [id^="replay-candle-"] > rect[fill="#8993a3"] { fill: var(--chart-candle-down); }
.walkthrough-chart #replay-price-pane-content,
.walkthrough-chart #replay-price-vertical-grid,
.walkthrough-chart #replay-price-scale-labels,
.walkthrough-chart #replay-symbol-legend,
.walkthrough-chart #replay-portrait-price-content,
.walkthrough-chart #replay-portrait-price-scale,
.walkthrough-chart #replay-portrait-scene [data-chart-title] { transition: opacity .46s cubic-bezier(.22,.61,.36,1); }
/* Owner-approved walkthrough presentation: keep the historical source intact,
   but omit recurring session shading so teaching targets remain clear. */
.walkthrough-chart #replay-extended-session-bands,
.walkthrough-chart #replay-portrait-session-bands { display: none; }
.walkthrough-chart #replay-price-pane-content *,
.walkthrough-chart .replay-price-vertical-gridline,
.walkthrough-chart #replay-rank-pane-content *,
.walkthrough-chart #replay-screener-pane-content * { vector-effect: non-scaling-stroke; }
.walkthrough-chart #replay-price-vertical-grid { pointer-events: none; }
.walkthrough-chart .replay-native-table-row { transition: opacity .46s cubic-bezier(.22,.61,.36,1), filter .28s ease; }
.walkthrough-chart .replay-native-table-row > rect { transition: stroke .28s ease, stroke-opacity .28s ease, stroke-width .28s ease; }
.walkthrough-chart .replay-native-table-row.is-source-positive { filter: drop-shadow(0 0 4px rgb(var(--chart-emphasis-rgb) / .34)) brightness(1.08); }
.walkthrough-chart .replay-native-table-row.is-source-positive > rect { stroke: var(--chart-emphasis-color); stroke-width: 1.25; stroke-opacity: .78; }
.walkthrough-chart .replay-native-table-row.is-source-neutral { filter: brightness(.78); }
.walkthrough-chart .replay-native-table-row.is-source-neutral > rect { stroke: #77808d; stroke-width: 1; stroke-opacity: .62; }
.walkthrough-chart #replay-screener-readings-at-a > rect:first-child {
  transition: stroke .3s ease, stroke-width .3s ease, filter .3s ease;
}
.walkthrough-chart .replay-cursor { stroke: #edf0f6; stroke-width: 1; stroke-opacity: .38; pointer-events: none; }
.walkthrough-chart .replay-price-outcome-arrow {
  fill: none;
  stroke: var(--chart-emphasis-color);
  stroke-width: 2.1;
  stroke-opacity: .9;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgb(var(--chart-emphasis-rgb) / .42));
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.walkthrough-chart .replay-price-outcome-origin {
  fill: var(--chart-emphasis-color);
  stroke: #0d1118;
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.walkthrough-chart .replay-callout-dimmer,
.walkthrough-chart .replay-teaching-dimmer { fill: #05070b; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.walkthrough-chart .replay-callout { opacity: 0; pointer-events: none; transform-box: fill-box; transform-origin: center; transform: translateY(9px) scale(.965); transition: opacity .3s ease, transform .46s cubic-bezier(.22,.61,.36,1); }
.walkthrough-chart .replay-callout.is-active { opacity: 1; transform: translateY(0) scale(1); }
.walkthrough-chart .replay-callout-box { fill: var(--chart-callout-background); fill-opacity: var(--chart-callout-background-opacity); stroke: var(--chart-callout-border); stroke-opacity: var(--chart-callout-border-opacity); stroke-width: var(--chart-callout-border-width); }
.walkthrough-chart .replay-callout.is-active .replay-callout-box { animation: replay-callout-attention .58s ease-out both; }
.walkthrough-chart .replay-callout-leader { fill: none; stroke: var(--chart-callout-leader); stroke-width: var(--chart-callout-leader-width); stroke-opacity: var(--chart-callout-leader-opacity); stroke-linecap: round; stroke-linejoin: round; }
.walkthrough-chart .replay-callout.is-extreme-callout .replay-callout-leader { stroke: #f1f4f8; stroke-width: 2.1; stroke-opacity: 1; }
.walkthrough-chart .replay-callout.is-active .replay-callout-leader { animation: replay-leader-in .44s .12s ease-out both; }
.walkthrough-chart .replay-callout-step { fill: var(--chart-emphasis-color); }
.walkthrough-chart .replay-callout-step-text { fill: #0b0e13; font: 800 13px "Inter",Arial,sans-serif; }
.walkthrough-chart .replay-callout-copy { fill: var(--chart-callout-text); font-family: var(--chart-callout-font-family); letter-spacing: -.01em; }
.walkthrough-chart .replay-callout-headline { font-size: 18px; font-weight: 760; }
.walkthrough-chart .replay-callout-detail { fill: var(--chart-callout-detail); font-size: 15.5px; font-weight: 600; letter-spacing: 0; }
.walkthrough-chart .replay-title-dimmer { fill: #070a0f; pointer-events: none; }
.walkthrough-chart .replay-title-morph {
  fill: #f4f1e9;
  stroke: #090c11;
  stroke-width: 4px;
  paint-order: stroke fill;
  font-family: Arial,sans-serif;
  /* Animated SVG weight, spacing and outline own the seamless title landing. */
  pointer-events: none;
}
.walkthrough-chart .replay-title-morph-accent { fill: #ef74eb; }
.walkthrough-chart .replay-rank-lesson { pointer-events: none; }
.walkthrough-chart .replay-rank-lesson-grid { stroke: var(--chart-vertical-grid); stroke-width: 1; }
.walkthrough-chart .replay-rank-lesson-region,
.walkthrough-chart .replay-rank-guide,
.walkthrough-chart .replay-rank-guide-label,
.walkthrough-chart .replay-rank-lesson-zero-glow,
.walkthrough-chart .replay-rank-lesson-zero,
.walkthrough-chart .replay-rank-direction-copy,
.walkthrough-chart .replay-rank-lesson-copy,
.walkthrough-chart .replay-rank-lesson-title,
.walkthrough-chart .replay-rank-extreme-leader,
.walkthrough-chart .replay-rank-extreme-copy { transition: filter .2s ease; }
.walkthrough-chart .replay-rank-lesson-region.is-overbought { fill: #cb0000; fill-opacity: .14; }
.walkthrough-chart .replay-rank-lesson-region.is-oversold { fill: #38d453; fill-opacity: .13; }
.walkthrough-chart .replay-rank-guide { stroke-linecap: round; }
.walkthrough-chart .replay-rank-guide-label { fill: var(--chart-axis-color); font: 400 var(--walkthrough-type-axis, 15px) Arial,sans-serif; }
.walkthrough-chart .replay-rank-lesson-zero-glow {
  stroke: #f4f1e9;
  stroke-linecap: round;
  filter:
    drop-shadow(0 0 var(--replay-zero-glow-inner,5px) rgb(var(--chart-emphasis-rgb) / .42))
    drop-shadow(0 0 var(--replay-zero-glow-outer,11px) rgb(var(--chart-emphasis-rgb) / .18));
}
.walkthrough-chart .replay-rank-lesson-zero { stroke: #f4f1e9; stroke-linecap: round; }
.walkthrough-chart .replay-rank-lesson-title {
  fill: var(--chart-pane-color);
  font: 400 var(--walkthrough-type-native) Arial,sans-serif;
  letter-spacing: -.025em;
}
.walkthrough-chart .replay-rank-lesson-copy,
.walkthrough-chart .replay-rank-direction-copy,
.walkthrough-chart .replay-rank-extreme-copy,
.walkthrough-chart .replay-rank-extreme-equation-copy {
  fill: #f4f1e9;
  stroke: #090c11;
  stroke-width: 5px;
  paint-order: stroke fill;
  font-family: "Inter",Arial,sans-serif;
  font-weight: 800;
  letter-spacing: -.025em;
}
.walkthrough-chart .replay-rank-lesson-copy { font-size: var(--walkthrough-type-lesson); }
.walkthrough-chart .replay-rank-direction-copy { font-size: var(--walkthrough-type-lesson); letter-spacing: .035em; }
.walkthrough-chart .replay-rank-direction-copy.is-overbought { fill: #ff6657; }
.walkthrough-chart .replay-rank-direction-copy.is-oversold { fill: #66df7a; }
.walkthrough-chart .replay-rank-extreme-equation { opacity: 0; }
.walkthrough-chart .replay-rank-extreme-icon {
  stroke: #11151d;
  stroke-width: 1px;
  stroke-linejoin: round;
}
.walkthrough-chart .replay-rank-extreme-icon.is-overbought { fill: #ff875c; }
.walkthrough-chart .replay-rank-extreme-icon.is-oversold { fill: #05ed02; }
.walkthrough-chart .replay-rank-extreme-equation-copy {
  fill: #f4f1e9;
  font-size: var(--walkthrough-type-explanation);
  font-weight: 800;
  stroke-width: 4px;
}
.walkthrough-chart .replay-rank-extreme-leader {
  fill: none;
  stroke: #f4f1e9;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
}
.walkthrough-chart .replay-rank-extreme-copy {
  fill: #f4f1e9;
  font-size: var(--walkthrough-type-explanation);
  font-weight: 800;
  stroke-width: 4px;
}
.walkthrough-chart .replay-rank-extreme-copy .is-spy { fill: #66df7a; }
.walkthrough-chart .replay-explanation-note {
  fill: #d2d7df;
  stroke: #090c11;
  stroke-width: 4px;
  paint-order: stroke fill;
  font: 650 var(--walkthrough-type-support) "Inter",Arial,sans-serif;
  pointer-events: none;
}
.walkthrough-chart .replay-explanation-note.is-rewind { font-size: 27px; }
.walkthrough-chart .replay-explanation-note.is-closing { fill: #b9c0cb; font-weight: 500; }
.walkthrough-chart .replay-rank-lesson-copy,
.walkthrough-chart .replay-rank-direction-copy,
.walkthrough-chart .replay-rank-extreme-copy { transform-box: fill-box; transform-origin: center; }
.walkthrough-chart .replay-screener-lesson { pointer-events: none; }
.walkthrough-chart .replay-screener-lesson-background { fill: #0e1219; fill-opacity: .99; }
.walkthrough-chart .replay-screener-lesson-grid { stroke: var(--chart-vertical-grid); stroke-width: 1; }
.walkthrough-chart .replay-screener-lesson-guide:not([stroke-dasharray]) { stroke: var(--chart-zero); }
.walkthrough-chart .replay-screener-lesson-highlight-band {
  fill: var(--chart-emphasis-color);
  fill-opacity: .08;
  pointer-events: none;
}
.walkthrough-chart .replay-screener-lesson-guide { stroke-width: 1.35; }
.walkthrough-chart .replay-screener-lesson-scale { fill: var(--chart-axis-color); font: 400 var(--walkthrough-type-axis, 15px) Arial,sans-serif; }
.walkthrough-chart .replay-screener-lesson-title {
  fill: var(--chart-pane-color);
  font: 400 var(--walkthrough-type-native) Arial,sans-serif;
  letter-spacing: -.015em;
}
.walkthrough-chart .replay-screener-lesson-copy {
  transform-box: fill-box;
  transform-origin: center;
}
.walkthrough-chart .replay-screener-lesson-headline,
.walkthrough-chart .replay-screener-lesson-detail {
  stroke: #090c11;
  paint-order: stroke fill;
  font-family: "Inter",Arial,sans-serif;
}
.walkthrough-chart .replay-screener-lesson-headline { fill: #f4f1e9; stroke-width: 5px; font-size: var(--walkthrough-type-lesson); font-weight: 800; letter-spacing: -.025em; }
.walkthrough-chart .replay-screener-lesson-headline.is-total { font-size: var(--walkthrough-type-lesson); }
.walkthrough-chart .replay-screener-total-value {
  fill: #ef74eb;
  stroke: #090c11;
  stroke-width: 4px;
  paint-order: stroke fill;
  font: 800 var(--walkthrough-type-support) "Inter",Arial,sans-serif;
  letter-spacing: -.015em;
}
.walkthrough-chart .replay-screener-lesson-pointer {
  fill: none;
  stroke: #f4f1e9;
  stroke-width: 2.5;
  stroke-opacity: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.walkthrough-chart .replay-screener-total-flow {
  fill: none;
  stroke: #f4f1e9;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.walkthrough-chart .replay-screener-lesson-copy.is-attention-visible .replay-screener-lesson-pointer {
  animation: replay-leader-in .44s .12s ease-out both;
}
.walkthrough-chart .replay-screener-lesson-detail { fill: #d2d7df; stroke-width: 4px; font-size: var(--walkthrough-type-support); font-weight: 650; }
.walkthrough-chart .replay-screener-neutral-copy { pointer-events: none; }
.walkthrough-chart .replay-screener-neutral-copy text {
  fill: #e5e9ef;
  stroke: #090c11;
  stroke-width: 4px;
  paint-order: stroke fill;
  font: 750 27px "Inter",Arial,sans-serif;
  letter-spacing: -.02em;
}
.walkthrough-chart .replay-screener-neutral-copy path {
  fill: none;
  stroke: #d4dae3;
  stroke-width: 1.5;
  stroke-opacity: .82;
  stroke-linecap: round;
}
.walkthrough-chart .replay-screener-lesson-cause {
  pointer-events: none;
  transition: opacity .24s ease;
}
.walkthrough-chart .replay-screener-row-meaning-copy {
  fill: #f4f1e9;
  stroke: #090c11;
  stroke-width: 4px;
  paint-order: stroke fill;
  font: 800 var(--walkthrough-type-explanation) "Inter",Arial,sans-serif;
  letter-spacing: -.025em;
}
.walkthrough-chart .replay-screener-row-meaning-copy .is-spy { fill: #ff6657; }
.walkthrough-chart .replay-screener-row-meaning-copy .is-alternative { fill: #66df7a; }
.walkthrough-chart .replay-screener-row-meaning-copy .is-score { fill: #ef74eb; }
.walkthrough-chart .replay-screener-row-meaning-detail {
  fill: #d9dee6;
  stroke: #090c11;
  stroke-width: 4px;
  paint-order: stroke fill;
  font: 700 30px "Inter",Arial,sans-serif;
  letter-spacing: -.025em;
}
.walkthrough-chart .replay-screener-row-meaning-detail .is-ticker { font-weight: 800; }
.walkthrough-chart .replay-screener-row-meaning-detail.is-nvda .is-ticker { fill: var(--chart-ticker-nvda); }
.walkthrough-chart .replay-screener-row-meaning-detail.is-aapl .is-ticker { fill: var(--chart-ticker-aapl); }
.walkthrough-chart .replay-screener-row-meaning-detail tspan:not(.is-ticker) { font-size: 24px; }
.walkthrough-chart .replay-screener-row-meaning-pointer {
  fill: none;
  stroke: #e5e9ef;
  stroke-opacity: .88;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.walkthrough-chart .replay-screener-preference { pointer-events: none; }
.walkthrough-chart .replay-screener-preference-title,
.walkthrough-chart .replay-screener-preference-subtitle,
.walkthrough-chart .replay-screener-preference-row {
  opacity: 0;
  stroke: #090c11;
  stroke-width: 4px;
  paint-order: stroke fill;
  font-family: "Inter",Arial,sans-serif;
  letter-spacing: -.012em;
  transition: opacity .24s ease, transform .32s cubic-bezier(.22,.61,.36,1);
}
.walkthrough-chart .replay-screener-preference-title {
  fill: var(--chart-emphasis-color);
  font-size: 24px;
  font-weight: 750;
}
.walkthrough-chart .replay-screener-preference-subtitle {
  fill: #b9c0cb;
  font-size: 18px;
  font-weight: 500;
}
.walkthrough-chart .replay-screener-preference-extreme-at {
  font-family: "Inter",Arial,sans-serif;
  font-weight: 500;
}
.walkthrough-chart .replay-screener-preference-row {
  fill: #eef1f6;
  font-size: 24px;
  font-weight: 800;
}
.walkthrough-chart .replay-screener-preference-row .is-number { fill: var(--chart-emphasis-color); }
.walkthrough-chart .replay-screener-preference-row .is-preferred { fill: #66df7a; }
.walkthrough-chart .replay-screener-preference-mover {
  opacity: 0;
  stroke: #090c11;
  stroke-width: 4px;
  paint-order: stroke fill;
  font: 800 24px "Inter",Arial,sans-serif;
  letter-spacing: -.012em;
  pointer-events: none;
}
.walkthrough-chart .replay-screener-preference-mover.is-preferred { fill: #66df7a; }
.walkthrough-chart .replay-screener-preference-row .is-detail {
  fill: #b9c0cb;
  font-size: 18px;
  font-weight: 650;
}
.walkthrough-chart .replay-screener-lesson-bar { transition: opacity .34s ease, filter .34s ease; }
.walkthrough-chart .replay-screener-lesson-bar.is-overbought { fill: #d619d0; }
.walkthrough-chart .replay-screener-lesson-bar.is-oversold { fill: #abb007; }
.walkthrough-chart .replay-screener-lesson-bar.is-neutral { fill: #6c7380; }
.walkthrough-chart .replay-screener-lesson-bar.is-total-focus.is-overbought {
  filter: drop-shadow(0 0 calc(4px * var(--replay-phone-paint-scale, 1)) rgba(239,116,235,.6));
}
.walkthrough-chart .replay-screener-lesson-bar.is-total-focus.is-oversold {
  filter: drop-shadow(0 0 calc(4px * var(--replay-phone-paint-scale, 1)) rgba(171,176,7,.62));
}
.walkthrough-chart .replay-screener-lesson-bar.is-selected {
  filter: drop-shadow(0 0 calc(5px * var(--replay-phone-paint-scale, 1)) rgba(255,255,255,.82)) drop-shadow(0 0 calc(15px * var(--replay-phone-paint-scale, 1)) rgba(239,116,235,.9));
}
.walkthrough-chart .replay-screener-lesson-bar.is-cause-focus {
  filter: drop-shadow(0 0 calc(6px * var(--replay-phone-paint-scale, 1)) rgba(255,255,255,.95)) drop-shadow(0 0 calc(20px * var(--replay-phone-paint-scale, 1)) rgba(239,116,235,1));
}
.walkthrough-chart .replay-screener-table-frame { fill: #10141b; fill-opacity: .98; stroke: #697383; stroke-width: 1.4; transition: stroke .3s ease, stroke-width .3s ease, filter .3s ease; }
.walkthrough-chart .replay-screener-lesson-table.is-individual-focus .replay-screener-table-frame {
  stroke: var(--chart-emphasis-color);
  stroke-width: 2;
  filter: drop-shadow(0 0 calc(9px * var(--replay-phone-paint-scale, 1)) rgb(var(--chart-emphasis-rgb) / .52));
}
.walkthrough-chart .replay-screener-lesson-table.is-individual-focus .replay-screener-table-row {
  filter: brightness(1.1);
}
.walkthrough-chart .replay-screener-table-header { fill: #3a3f48; }
.walkthrough-chart .replay-screener-table-header-copy { fill: #e2e5ea; font: 400 14px "Courier New",monospace; }
.walkthrough-chart .replay-screener-table-row { transition: opacity .3s ease, filter .28s ease; }
.walkthrough-chart .replay-screener-table-row rect { fill: #11151d; stroke: #343c49; stroke-width: .8; transition: fill .28s ease, stroke .28s ease, filter .28s ease; }
.walkthrough-chart .replay-screener-table-row rect.is-positive { fill: #d619d0; fill-opacity: .58; }
.walkthrough-chart .replay-screener-table-rank,
.walkthrough-chart .replay-screener-table-pair { fill: #edf0f6; font: 400 14px "Courier New",monospace; }
.walkthrough-chart .replay-screener-table-row.is-example-row { filter: brightness(1.08); }
.walkthrough-chart .replay-screener-table-row.is-example-row rect {
  stroke: var(--chart-emphasis-color);
  stroke-width: 1.5;
  stroke-opacity: 1;
  /* Put the warm halo on the cell surface so its white glyphs stay crisp. */
  filter:
    drop-shadow(0 0 calc(4px * var(--replay-phone-paint-scale, 1)) rgb(var(--chart-emphasis-rgb) / .62))
    drop-shadow(0 0 calc(9px * var(--replay-phone-paint-scale, 1)) rgb(var(--chart-emphasis-rgb) / .24));
}
.walkthrough-chart .replay-screener-neutral-outline {
  fill: none;
  stroke: #d4dae3;
  stroke-width: 1.7;
  filter:
    drop-shadow(0 0 calc(3px * var(--replay-phone-paint-scale, 1)) rgb(var(--chart-emphasis-rgb) / .30))
    drop-shadow(0 0 calc(7px * var(--replay-phone-paint-scale, 1)) rgb(var(--chart-emphasis-rgb) / .16));
  pointer-events: none;
}
.walkthrough-chart .replay-screener-table-row.is-neutral-focus { filter: brightness(1.2); }
.walkthrough-chart .replay-screener-table-row.is-neutral-focus rect { fill: #242d38; stroke: #8693a4; stroke-width: 1; }
.walkthrough-chart .replay-screener-table-row.is-summary-positive { filter: drop-shadow(0 0 7px rgba(239,116,235,.72)) brightness(1.15); }
.walkthrough-chart .replay-rank-continuity { pointer-events: none; }
.walkthrough-chart .replay-rank-continuity-background { fill: var(--chart-bg); fill-opacity: .985; }
.walkthrough-chart .replay-rank-continuity-grid { stroke: var(--chart-vertical-grid); stroke-width: 1; }
.walkthrough-chart .replay-rank-continuity-divider { stroke: var(--chart-pane-divider); stroke-width: 1; opacity: .45; }
.walkthrough-chart .replay-rank-continuity-title {
  fill: #bcc3cf;
  font: 400 12px "Inter",Arial,sans-serif;
  letter-spacing: -.015em;
  opacity: .45;
}
.walkthrough-chart .replay-rank-continuity-zero { stroke: var(--chart-zero); stroke-width: 1.25; opacity: .45; }
.walkthrough-chart .replay-rank-continuity-guide { fill: none; stroke-width: 1.2; opacity: .45; }
.walkthrough-chart .replay-rank-continuity-scale { fill: var(--chart-axis-color); font: 400 var(--walkthrough-type-axis, 15px) Arial,sans-serif; opacity: .45; }
.walkthrough-chart .replay-rank-continuity-bar { transition: none; }
.walkthrough-chart .replay-rank-continuity-marker {
  stroke: #11151d;
  stroke-width: .8;
  transition: none;
}
.walkthrough-chart .replay-rank-continuity-highlight-band { fill: var(--chart-emphasis-color); fill-opacity: .055; }
.walkthrough-chart .is-attention-visible { animation: replay-teaching-text-in .52s cubic-bezier(.22,.61,.36,1) both; }
.walkthrough-chart #replay-portrait-opening text { transform-box: fill-box; transform-origin: center; }
.walkthrough-chart #replay-portrait-scene [data-annotation-copy] { transform-box: fill-box; transform-origin: center; }
@keyframes replay-teaching-text-in {
  0% { transform: translateY(9px) scale(.965); filter: drop-shadow(0 0 18px rgb(var(--chart-emphasis-rgb) / .86)); }
  64% { transform: translateY(-1px) scale(1.012); filter: drop-shadow(0 0 9px rgb(var(--chart-emphasis-rgb) / .38)); }
  100% { transform: translateY(0) scale(1); filter: none; }
}
@keyframes replay-callout-attention {
  0% { filter: drop-shadow(0 0 0 rgb(var(--chart-emphasis-rgb) / 0)); stroke: var(--chart-emphasis-color); }
  38% { filter: drop-shadow(0 0 13px rgb(var(--chart-emphasis-rgb) / .52)); stroke: var(--chart-emphasis-color); }
  100% { filter: none; stroke: #737c89; }
}
@keyframes replay-leader-in {
  from { stroke-dasharray: 1; stroke-dashoffset: 1; }
  to { stroke-dasharray: 1; stroke-dashoffset: 0; }
}
.walkthrough-chart .replay-rank-step.is-teaching-cue { animation: replay-signal-cue .8s ease-out 1; }
.walkthrough-chart .replay-marker-step.is-teaching-cue { animation: replay-marker-cue .78s ease-out 1; }
@keyframes replay-signal-cue {
  0%,100% { filter: none; }
  48% { filter: drop-shadow(0 0 calc(7px * var(--replay-phone-paint-scale, 1)) rgb(var(--chart-emphasis-rgb) / .95)) brightness(1.45); }
}
@keyframes replay-marker-cue {
  0%,100% { filter: none; }
  28%,62% {
    filter:
      drop-shadow(0 0 calc(5px * var(--replay-phone-paint-scale, 1)) rgba(255,255,255,.95))
      drop-shadow(0 0 calc(13px * var(--replay-phone-paint-scale, 1)) rgba(5,237,2,1))
      drop-shadow(0 0 calc(24px * var(--replay-phone-paint-scale, 1)) rgba(5,237,2,.82))
      brightness(1.7);
  }
}
.walkthrough-chart .replay-a-pulse { fill: var(--chart-emphasis-color); fill-opacity: .13; stroke: none; opacity: 0; pointer-events: none; transform-box: fill-box; transform-origin: center; }
.walkthrough-chart .replay-a-pulse.is-active { animation: replay-a-pulse .92s ease-out 1; }
@keyframes replay-a-pulse {
  0% { opacity: 0; transform: scaleX(.5); }
  22% { opacity: .95; }
  100% { opacity: 0; transform: scaleX(1.8); }
}
.walkthrough-chart #replay-price-pane-content.is-price-return-focus,
.walkthrough-chart #replay-portrait-price-content.is-price-return-focus {
  animation: replay-price-return-focus .5s ease-out 1;
}
.walkthrough-chart .replay-candle-highlight-band.is-price-return-cue {
  fill-opacity: .16;
  filter: drop-shadow(0 0 max(4px, calc(8px * var(--replay-phone-paint-scale, 1))) rgb(var(--chart-emphasis-rgb) / .55));
  animation: replay-price-return-cue .5s ease-out 1;
}
.walkthrough-chart .is-price-return-bar {
  /* Generated wick colour is inline; this temporary cue also outlines it. */
  stroke: #fff0be !important;
  stroke-width: 1px;
  stroke-opacity: .7;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 2px rgba(255,250,229,.6))
    drop-shadow(0 0 max(6px, calc(10px * var(--replay-phone-paint-scale, 1))) rgb(var(--chart-emphasis-rgb) / .7));
  animation: replay-price-return-bar-cue .5s ease-out 1;
}
@keyframes replay-price-return-focus {
  0% { filter: brightness(.94); }
  38% { filter: brightness(1.1); }
  100% { filter: brightness(1); }
}
@keyframes replay-price-return-cue {
  0%,100% { fill-opacity: .16; filter: drop-shadow(0 0 max(4px, calc(8px * var(--replay-phone-paint-scale, 1))) rgb(var(--chart-emphasis-rgb) / .55)); }
  22%,72% { fill-opacity: .32; filter: drop-shadow(0 0 max(7px, calc(12px * var(--replay-phone-paint-scale, 1))) rgb(var(--chart-emphasis-rgb) / .8)); }
}
@keyframes replay-price-return-bar-cue {
  0%,100% {
    stroke-opacity: .7;
    filter: drop-shadow(0 0 2px rgba(255,250,229,.6))
      drop-shadow(0 0 max(6px, calc(10px * var(--replay-phone-paint-scale, 1))) rgb(var(--chart-emphasis-rgb) / .7));
  }
  22%,72% {
    stroke-opacity: 1;
    filter: drop-shadow(0 0 3px rgba(255,250,229,.9))
      drop-shadow(0 0 max(8px, calc(14px * var(--replay-phone-paint-scale, 1))) rgb(var(--chart-emphasis-rgb) / .95)) brightness(1.25);
  }
}
/* Desktop owns visibility. Portrait receives only the matching paint emphasis,
   avoiding a second opacity/transform transition on projected teaching nodes. */
.walkthrough-chart #replay-portrait-scene .replay-rank-step,
.walkthrough-chart #replay-portrait-scene .replay-marker-step { transition: none; }
.walkthrough-chart #replay-portrait-scene .replay-screener-lesson-bar { transition: filter .34s ease; }
.walkthrough-chart #replay-portrait-scene .replay-screener-table-row { transition: filter .28s ease; }
.walkthrough-chart #replay-portrait-scene .replay-screener-table-frame { stroke-width: 1; }
.walkthrough-chart #replay-portrait-scene .is-individual-focus .replay-screener-table-frame { stroke-width: 1.5; }
.walkthrough-player-bar { position: relative; display: flex; align-items: center; gap: .65rem; min-height: 52px; margin-top: .3rem; }
.walkthrough-transport { position: relative; display: flex; flex: 1 1 auto; align-items: center; gap: .5rem; min-width: 0; height: 44px; }
.walkthrough-transport input { appearance: none; -webkit-appearance: none; width: 100%; min-width: 0; height: 28px; margin: 0; border: 0; border-radius: 0; background: linear-gradient(to right, var(--gold-bright) 0 var(--walkthrough-progress, 0%), #69717c var(--walkthrough-progress, 0%) 100%) left bottom / 100% 3px no-repeat; cursor: pointer; }
.walkthrough-transport input::-webkit-slider-runnable-track { height: 28px; background: transparent; }
.walkthrough-transport input::-moz-range-track { height: 28px; background: transparent; }
.walkthrough-transport input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; margin-top: 8px; border: 2px solid #0e1219; border-radius: 50%; background: var(--gold-bright); opacity: 0; transform: translateY(10px); }
.walkthrough-transport input::-moz-range-thumb { width: 10px; height: 10px; border: 2px solid #0e1219; border-radius: 50%; background: var(--gold-bright); opacity: 0; transform: translateY(10px); }
.walkthrough-transport input:hover::-webkit-slider-thumb, .walkthrough-transport input:focus-visible::-webkit-slider-thumb, .walkthrough-transport input:active::-webkit-slider-thumb { opacity: 1; }
.walkthrough-transport input:hover::-moz-range-thumb, .walkthrough-transport input:focus-visible::-moz-range-thumb, .walkthrough-transport input:active::-moz-range-thumb { opacity: 1; }
.walkthrough-transport .walkthrough-time { position: absolute; left: clamp(48px, var(--walkthrough-time-position, 0%), calc(100% - 48px)); bottom: 20px; transform: translateX(-50%); min-width: 86px; padding: 4px 6px; border: 1px solid #69717c; border-radius: 4px; background: #151a22; color: #f4f1e9; box-shadow: 0 2px 8px #0008; font: 600 12px "DM Mono",monospace; text-align: center; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .12s ease, visibility .12s ease; }
.walkthrough-transport input:hover + .walkthrough-time, .walkthrough-transport input:focus + .walkthrough-time, .walkthrough-transport input:active + .walkthrough-time { opacity: 1; visibility: visible; }
.walkthrough-explore-actions { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; padding: 16px; margin: 0; background: rgba(5,7,11,.26); }
.walkthrough-explore-panel { width: min(100%, 400px); display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(15,20,28,.96); box-shadow: 0 3px 14px rgba(0,0,0,.25); }
.home-walkthrough.is-portrait-player .walkthrough-explore-panel { max-width: 260px; grid-template-columns: 1fr; }
.walkthrough-explore-actions a { min-height: 44px; border: 1px solid #f4ce6d; border-radius: 8px; padding: .5rem .85rem; display: inline-flex; align-items: center; justify-content: center; color: #090b0f; background: var(--gold-bright); font-size: .85rem; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; }
.walkthrough-explore-actions a:hover { filter: brightness(1.06); }
.walkthrough-more { scroll-margin-top: 110px; margin-top: .35rem; }
.home-walkthrough .walkthrough-more > summary { min-height: 44px; padding: .45rem 0; color: var(--muted); font-size: .8rem; font-weight: 400; line-height: 1.4; }
.home-walkthrough .walkthrough-more > summary::marker { font-size: .7em; }
.home-walkthrough .walkthrough-more > summary:hover { color: var(--ink); }
.walkthrough-more-body { padding-bottom: .25rem; }
.walkthrough-breakdown { max-width: 76ch; margin: .5rem auto 1.5rem; text-align: left; }
.walkthrough-breakdown h3 { margin: 0 0 .8rem; font-size: clamp(1.3rem, 2.5vw, 1.8rem); line-height: 1.25; }
.walkthrough-breakdown > section { padding-block: 1.15rem; border-bottom: 1px solid var(--line); }
.walkthrough-breakdown h4 { margin: 0 0 .6rem; font-size: 1.05rem; color: var(--ink); }
.walkthrough-breakdown p { margin: .6rem 0 0; color: var(--muted); font-size: .95rem; line-height: 1.75; }
.walkthrough-breakdown strong { color: var(--ink); font-weight: 600; }
.walkthrough-breakdown code { font-size: .9em; overflow-wrap: anywhere; }
.walkthrough-breakdown .walkthrough-breakdown-equation { color: var(--ink); }
.walkthrough-breakdown a { color: var(--gold-bright); text-decoration: underline; text-underline-offset: .2em; }
.walkthrough-breakdown .walkthrough-breakdown-links { margin-top: 1.25rem; }
.home-walkthrough table { width: 100%; border-collapse: collapse; font-size: .85rem; font-variant-numeric: tabular-nums; }
.home-walkthrough caption { text-align: left; font-weight: 600; padding: 0 0 .65rem; }
.home-walkthrough th, .home-walkthrough td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--line); }
.home-walkthrough thead th { font-size: .75rem; color: var(--muted); }
.home-walkthrough tbody td { font-family: "DM Mono",monospace; }
.home-walkthrough tbody th { font-weight: 400; }
.home-walkthrough tfoot th, .home-walkthrough tfoot td { border-top: 2px solid var(--line); font-weight: 600; }
.walkthrough-occurrences, .walkthrough-method { border-top: 1px solid var(--line); }
.home-walkthrough summary { padding: 1rem 0; color: var(--gold-bright); font-size: .9rem; cursor: pointer; }
.walkthrough-occurrences > p, .walkthrough-method p, .walkthrough-method li { color: var(--muted); font-size: .85rem; line-height: 1.7; }
.walkthrough-occurrence-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.walkthrough-occurrence-grid > div { min-width: 0; }
.walkthrough-occurrence-grid h4 { margin: .5rem 0; }
.walkthrough-occurrence-grid p { color: var(--muted); font-size: .8rem; }
.walkthrough-occurrence-grid td:not(:first-child) { text-align: right; }
.walkthrough-source-note { color: var(--muted); font-size: .8rem; line-height: 1.7; padding-block: .75rem; margin: 0; }
.walkthrough-source-note a { color: var(--gold-bright); }
.walkthrough-method ol { padding-left: 1.25rem; }
.walkthrough-method li + li { margin-top: .5rem; }
@media (min-width: 481px) {
  /* Playback is capped to the usable viewport. A separate landscape treatment
     below keeps the complete chart and every control visible in short windows. */
  .home-walkthrough.is-height-fitted .walkthrough-player {
    height: var(--walkthrough-fit-height, calc(100svh - 96px));
    max-height: var(--walkthrough-fit-height, calc(100svh - 96px));
    scroll-margin-top: var(--walkthrough-scroll-offset, 84px);
    padding: clamp(.6rem,1.5svh,1.1rem);
    display: flex;
    flex-direction: column;
  }
  .home-walkthrough.is-height-fitted .walkthrough-title {
    flex: 0 0 auto;
    margin-bottom: clamp(.45rem,1.2svh,.85rem);
    font-size: clamp(1.45rem,4svh,2.65rem);
  }
  .home-walkthrough.is-height-fitted .walkthrough-chart-stage {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .home-walkthrough.is-height-fitted .walkthrough-chart-scroll {
    min-height: 120px;
    flex: 1 1 auto;
  }
  /* The player has a fixed viewport height during playback. Fit the complete
     SVG inside that space in both dimensions so later panes and the anchored
     time scale can never be clipped behind the transport controls. */
  .home-walkthrough.is-height-fitted .walkthrough-chart-scroll {
    display: grid;
    place-items: center;
    overflow: hidden;
  }
  .home-walkthrough.is-height-fitted .walkthrough-chart-scroll .walkthrough-chart {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
  }
  .home-walkthrough.is-height-fitted .walkthrough-chart-scroll .walkthrough-chart svg {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
  }
  .home-walkthrough.is-height-fitted .walkthrough-chart-scroll.is-landscape-fit {
    flex: none;
    margin-inline: auto;
  }
}
@media (min-width: 1180px) and (max-height: 800px) {
  /* A wide, short browser has spare horizontal room but very little vertical
     room. Put the lesson and transport in a right rail while fitting the
     complete chart in the remaining space. */
  .home-walkthrough.is-landscape-player .walkthrough-player {
    height: var(--walkthrough-fit-height, calc(100svh - 96px));
    max-height: var(--walkthrough-fit-height, calc(100svh - 96px));
    padding: .45rem;
    display: grid;
    /* Keep the guidance readable without surrendering nearly a third of the
       player to a mostly empty rail. */
    grid-template-columns: minmax(0,1fr) clamp(300px,23vw,370px);
    grid-template-rows: auto minmax(0,1fr) 52px 10px 30px;
    column-gap: .45rem;
    overflow: hidden;
  }
  .home-walkthrough.is-landscape-player .walkthrough-title {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    padding: .25rem .55rem .15rem;
    text-align: left;
    font-size: clamp(1rem,3.1svh,1.45rem);
    letter-spacing: -.025em;
  }
  .home-walkthrough.is-landscape-player .walkthrough-chart-note {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    margin: 0;
    padding: .25rem .55rem;
  }
  .home-walkthrough.is-landscape-player .walkthrough-chart-stage { display: contents; }
  .home-walkthrough.is-landscape-player .walkthrough-chart-scroll {
    grid-column: 1;
    grid-row: 1 / 3;
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    justify-self: center;
    align-self: end;
    border: 1px solid var(--line);
    border-radius: 9px;
    display: grid;
    place-items: center;
    overflow: hidden;
  }
  .home-walkthrough.is-landscape-player .walkthrough-seek-below {
    grid-column: 1; grid-row: 4;
  }
  .home-walkthrough.is-landscape-player .walkthrough-player-bar { grid-column: 1; grid-row: 3; }
  .home-walkthrough.is-landscape-player .walkthrough-more { grid-column: 1 / 3; grid-row: 5; margin: 0; }
  .home-walkthrough.is-landscape-player .walkthrough-chart-scroll.is-landscape-fit .walkthrough-chart {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
  }
  .home-walkthrough.is-landscape-player .walkthrough-chart-scroll.is-landscape-fit .walkthrough-chart svg {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    transform: none !important;
  }
}
@media (max-width: 700px) {
  .walkthrough-center-action > span { width: 56px; height: 56px; font-size: 1.3rem; }
  .walkthrough-occurrence-grid { grid-template-columns: 1fr; gap: 1rem; }
  .walkthrough-surface-control { padding-inline: .5rem; }
  .walkthrough-surface-cue [data-replay-play-symbol] { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  /* Every SVG teaching element is static, including future effects and inline
     handoff transitions. Keep their settled colour, outline and glow. */
  .walkthrough-chart,
  .walkthrough-chart svg,
  .walkthrough-chart svg *,
  .walkthrough-surface-cue,
  .walkthrough-chart-scroll.is-mobile-framed .walkthrough-chart {
    transition: none !important;
    animation: none !important;
  }
  .walkthrough-chart-scroll { scroll-behavior: auto; }
}

/* Home mobile rhythm: one chart frame, generous width, and shorter section gaps. */
@media (max-width: 700px) {
  .home-walkthrough { width: calc(100% - 16px); padding-bottom: 0; }
  .home-walkthrough .walkthrough-player { padding: 0; border: 0; background: transparent; }
  .home-walkthrough .walkthrough-title { margin-inline: 8px; }
  .home-walkthrough .walkthrough-chart-note { margin-inline: 8px; }
  .home-walkthrough .walkthrough-more { margin-inline: 8px; }
  body[data-page="home"] #products { padding-top: 3.5rem; padding-bottom: 0; }
  body[data-page="home"] .access-band { margin-block: 3rem 0; gap: 1.5rem; }
  body[data-page="home"] .access-band > div > p:last-child { margin-bottom: 0; }
  body[data-page="home"] .site-footer { margin-top: 3rem; }
}
.walkthrough-view-tools {
  position: relative; flex: 0 0 44px;
  display: grid; place-items: center; width: 44px; height: 44px;
  pointer-events: auto;
}
.walkthrough-view-button {
  position: relative; display: grid; place-items: center;
  flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; padding: 4px 0 0 4px;
  border: 0; background: transparent; color: var(--gold-bright); cursor: pointer;
}
.walkthrough-view-button::before {
  content: ""; position: absolute; inset: var(--chart-expand-inset);
  border: 1px solid var(--line); border-radius: 8px; background: var(--chart-expand-bg);
}
.walkthrough-view-icon { position: relative; display: block; width: var(--chart-expand-icon-size); height: var(--chart-expand-icon-size); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.walkthrough-view-contract, .walkthrough-view-button.is-expanded .walkthrough-view-expand { display: none; }
.walkthrough-view-button.is-expanded .walkthrough-view-contract { display: block; }
.walkthrough-view-tooltip {
  position: absolute; right: 0; bottom: calc(100% + 8px); width: max-content;
  max-width: calc(100vw - 32px); padding: .4rem .6rem; border: 1px solid var(--line);
  border-radius: 6px; background: #151b25; color: var(--ink); font: 500 .8rem/1.4 Manrope, sans-serif;
  pointer-events: none; opacity: 0; visibility: hidden;
}
.walkthrough-view-button:hover:not(.is-tooltip-dismissed) .walkthrough-view-tooltip,
.walkthrough-view-button:focus-visible:not(.is-pointer-activation):not(.is-tooltip-dismissed) .walkthrough-view-tooltip { opacity: 1; visibility: visible; }
.home-walkthrough .walkthrough-view-button:focus-visible { outline: none; }
.walkthrough-view-button:focus-visible:not(.is-pointer-activation)::before { outline: 2px solid var(--gold-bright); outline-offset: 0; }
.walkthrough-view-dialog {
  position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh;
  max-width: none; max-height: none; margin: 0; box-sizing: border-box;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  border: 0; background: var(--bg); color: var(--ink);
}
.walkthrough-view-dialog[open] { display: grid; place-items: center; }
.walkthrough-view-dialog::backdrop { background: #080a0f; }
body.walkthrough-view-open { overflow: hidden; }
.walkthrough-view-dialog .home-walkthrough {
  /* Cap width by the shared canvas aspect so a portrait
     window centers a chart-sized player instead of a tall empty canvas. */
  width: min(100%, 1480px, calc(var(--walkthrough-portrait-height, calc(100dvh - 150px)) * 2)); height: auto;
  padding: 0; margin: 0;
}
.walkthrough-view-dialog .home-walkthrough .walkthrough-player {
  display: flex; flex-direction: column; height: auto; max-height: none;
  padding: 0; border: 0; background: transparent; overflow: hidden;
}
.walkthrough-view-dialog .walkthrough-title {
  flex: 0 0 auto; margin: 0 0 .25rem; padding: 0; text-align: center; font-size: 1.1rem;
}
.walkthrough-view-dialog .walkthrough-chart-note { display: none; }
.walkthrough-view-dialog .home-walkthrough .walkthrough-chart-stage {
  display: flex; flex-direction: column; flex: none; min-height: 0; aspect-ratio: var(--walkthrough-wide-aspect, 2 / 1);
}
.walkthrough-view-dialog .home-walkthrough .walkthrough-chart-scroll {
  display: grid; place-items: center; flex: 1 1 auto; min-height: 0; height: 100%; border: 0;
}
.walkthrough-view-dialog .walkthrough-chart {
  display: grid; place-items: center; width: 100%; height: 100%;
}
.walkthrough-view-dialog .walkthrough-chart svg {
  width: 100%; height: 100%; max-width: 100%; max-height: 100%; transform: none !important;
}
.walkthrough-view-dialog { overflow: auto; }
.walkthrough-view-dialog[open] { align-items: start; }
.walkthrough-view-dialog .home-walkthrough.is-portrait-player { width: min(100%,1480px); }
.walkthrough-view-dialog .walkthrough-more { flex: 0 0 auto; }

/* Transport and reading are outside the chart, including enlarged view. */
.walkthrough-transport input { flex: 1 1 auto; height: 44px; background-position: left center; }
.walkthrough-transport .walkthrough-time { position: static; transform: none; flex: 0 0 auto; min-width: 0; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--chart-caption-color); opacity: 1; visibility: visible; font-size: 12px; }
/* Original wide nodes supply portrait data without painting behind it. */
.home-walkthrough.is-portrait-player #replay-wide-scene { display: none; }
/* Fixed 2:3 portrait framing, fitted to width AND visible browser height. */
.home-walkthrough.is-portrait-player .walkthrough-chart-stage,
.walkthrough-view-dialog .home-walkthrough.is-portrait-player .walkthrough-chart-stage {
  display: block; flex: none; aspect-ratio: 2 / 3;
  width: min(100%, calc(var(--walkthrough-portrait-height, 453px) * 2 / 3));
  margin-inline: auto;
}
.home-walkthrough.is-portrait-player .walkthrough-chart,
.home-walkthrough.is-portrait-player .walkthrough-chart-scroll { display: block; height: 100%; }
.home-walkthrough.is-portrait-player .walkthrough-chart svg,
.walkthrough-view-dialog .home-walkthrough.is-portrait-player .walkthrough-chart svg {
  display: block; width: 100%; height: 100%; max-height: 100%;
  aspect-ratio: 2 / 3; transition: none;
}
/* A horizontal phone retains the wide canvas, with the same height budget. */
.home-walkthrough.is-wide-phone-player .walkthrough-chart-stage {
  display: block; width: min(100%, calc(var(--walkthrough-portrait-height) * 2));
  aspect-ratio: var(--walkthrough-wide-aspect, 2 / 1); margin-inline: auto;
}
.home-walkthrough.is-wide-phone-player .walkthrough-chart-scroll,
.home-walkthrough.is-wide-phone-player .walkthrough-chart { display: block; height: 100%; min-height: 0; }
.home-walkthrough.is-wide-phone-player .walkthrough-chart svg { width: 100%; height: 100%; max-height: 100%; }
.walkthrough-view-dialog[open]:has(.is-portrait-player) { align-items: start; }
.walkthrough-view-dialog[open]:has(.walkthrough-more[open]) { align-items: start; }
@media (max-width: 700px) {
  .walkthrough-player-bar { margin-inline: 8px; }
}