/* Reuse the showcase palette, scale, type and shared presentation clock. */
.slide.is-wandaloo { width: min(100cqw, 100cqh * 16 / 9); height: min(100cqh, 100cqw * 9 / 16); --u: calc(100cqw / 1440); }
.is-wandaloo > .intro, .is-wandaloo > .scene, .is-wandaloo > .issue-annotations, .is-wandaloo > .issues, .is-wandaloo > .takeaway, .is-wandaloo > .illustrative, .is-wandaloo > #scene-description { display: none; }
.wandaloo-screen { position: absolute; inset: 0; }
.wandaloo-screen[hidden] { display: none; }
.wandaloo-intro { position: absolute; left: calc(70 * var(--u)); right: calc(395 * var(--u)); top: calc(31 * var(--u)); }
.wandaloo-intro h1 { margin: 0; font-size: calc(56 * var(--u)); font-weight: 720; line-height: 1.04; letter-spacing: -.045em; }
.wandaloo-intro [data-wandaloo-accent] { color: var(--purple); }
.wandaloo-intro > p { margin: calc(15 * var(--u)) 0 0; font-size: calc(23 * var(--u)); line-height: 1.35; color: var(--muted); letter-spacing: -.02em; }
.wandaloo-diagram { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wandaloo-process, .wandaloo-process-diagram { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wandaloo-process[hidden], .wandaloo-process .system-caption[hidden] { display: none; }
.wandaloo-process-diagram text { font-family: inherit; letter-spacing: -.02em; }
[data-wandaloo-step="0"] .wandaloo-detail { top: calc(695 * var(--u)); }
.wandaloo-diagram text { font-family: inherit; letter-spacing: -.02em; }
.w-label { fill: var(--ink); font-weight: 500; }
.w-note { fill: var(--muted); font-weight: 400; }
.w-brand { font-weight: 650; letter-spacing: -.045em !important; }
.w-metric { fill: var(--blue); font-weight: 650; letter-spacing: -.055em !important; font-variant-numeric: tabular-nums; }
.w-blue { fill: var(--blue); }
.w-purple { fill: var(--purple); }
.w-panel { fill: color-mix(in srgb, var(--blue) 4%, var(--bg)); stroke: color-mix(in srgb, var(--blue) 28%, var(--bg)); stroke-width: 1.3; }
.w-offer { fill: color-mix(in srgb, var(--purple) 7%, var(--bg)); stroke: color-mix(in srgb, var(--purple) 50%, var(--bg)); stroke-width: 1.3; }
.w-segment { fill: color-mix(in srgb, var(--blue) 5%, var(--bg)); stroke: color-mix(in srgb, var(--blue) 28%, var(--bg)); stroke-width: 1.2; }
.w-divider { fill: none; stroke: color-mix(in srgb, var(--muted) 25%, var(--bg)); stroke-width: 1; }
.w-icon { fill: none; stroke: var(--blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.w-ring { fill: color-mix(in srgb, var(--blue) 6%, var(--bg)); stroke: color-mix(in srgb, var(--blue) 65%, var(--bg)); stroke-width: 1.2; }
.w-halo { fill: none; stroke: var(--blue); stroke-width: 1; stroke-opacity: .12; }
.w-browser-dot { fill: var(--muted); opacity: .55; }
.w-route { fill: none; stroke: var(--blue); stroke-width: 1.35; stroke-opacity: .65; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.w-route-purple { stroke: var(--purple); }
.w-token { fill: var(--blue); }
.w-token-purple { fill: var(--purple); }
[data-wandaloo-scene="4"] .w-halo { stroke: var(--purple); stroke-opacity: .25; }
[data-wandaloo-scene="4"] .w-ring, [data-wandaloo-scene="6"] .w-ring { stroke: var(--purple); }
[data-wandaloo-scene="4"] .w-icon, [data-wandaloo-scene="6"] .w-icon { stroke: var(--purple); }
.wandaloo-detail { position: absolute; left: calc(70 * var(--u)); right: calc(70 * var(--u)); top: calc(674 * var(--u)); }
.wandaloo-caption { margin: 0; color: var(--purple); font-size: calc(25 * var(--u)); line-height: 1.2; letter-spacing: -.025em; font-weight: 550; }
.wandaloo-note { margin: calc(7 * var(--u)) 0 0; max-width: calc(1210 * var(--u)); color: var(--muted); font-size: calc(20 * var(--u)); line-height: 1.4; letter-spacing: -.015em; }
.wandaloo-footer { position: absolute; bottom: calc(25 * var(--u)); left: calc(70 * var(--u)); max-width: calc(760 * var(--u)); margin: 0; color: var(--muted); opacity: .75; font-size: calc(12 * var(--u)); line-height: 1.4; }
.wandaloo-replay { position: absolute; right: calc(70 * var(--u)); top: calc(204 * var(--u)); display: flex; align-items: center; gap: calc(8 * var(--u)); min-height: 32px; padding: calc(6 * var(--u)); background: none; border: 0; border-radius: calc(6 * var(--u)); color: var(--muted); font-size: max(12px, calc(15 * var(--u))); cursor: pointer; z-index: 1; }
.wandaloo-replay svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.wandaloo-replay:hover { color: var(--purple); background: color-mix(in srgb, var(--purple) 5%, transparent); }
.wandaloo-replay:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (max-aspect-ratio: 1/1) {
  .slide.is-wandaloo { width: min(100cqw, 100cqh * 680 / 1440); height: min(100cqh, 100cqw * 1440 / 680); --u: calc(100cqw / 680); }
  .is-wandaloo .chapter { font-size: calc(18 * var(--u)); }
  .wandaloo-intro { left: calc(38 * var(--u)); right: calc(38 * var(--u)); top: calc(106 * var(--u)); }
  .wandaloo-intro h1 { font-size: calc(47 * var(--u)); line-height: 1.08; }
  .wandaloo-intro > p { font-size: calc(24 * var(--u)); }
  .wandaloo-replay { top: calc(277 * var(--u)); right: calc(38 * var(--u)); }
  .wandaloo-detail { top: calc(1155 * var(--u)); left: calc(38 * var(--u)); right: calc(38 * var(--u)); }
  [data-wandaloo-step="0"] .wandaloo-detail { top: calc(1155 * var(--u)); }
  .wandaloo-caption { font-size: calc(30 * var(--u)); line-height: 1.25; }
  .wandaloo-note { font-size: calc(23 * var(--u)); line-height: 1.45; margin-top: calc(13 * var(--u)); }
  .wandaloo-footer { bottom: calc(94 * var(--u)); left: calc(38 * var(--u)); max-width: calc(604 * var(--u)); font-size: calc(17 * var(--u)); }
  .is-wandaloo .controls { gap: 3px; }
  .is-wandaloo .advance-control { min-width: 0; max-width: calc(225 * var(--u)); min-height: 36px; padding: 4px 8px; font-size: max(11px, calc(21 * var(--u))); }
  .is-wandaloo .back-control { min-width: 0; padding: 0 6px; }
  .is-wandaloo .progress-count { min-width: 0; font-size: max(10px, calc(18 * var(--u))); }
}