/* Self-hosted Inter; redistribution license is included in fonts/OFL.txt. */
@font-face { font-family: Inter; src: url("fonts/inter-latin.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; }
:root { color-scheme: dark; --bg: #0b0d0f; --ink: #f4f5f7; --muted: #aeb8c5; --purple: #c18ae1; --blue: #61baf3; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-optical-sizing: auto; font-synthesis: none; -webkit-font-smoothing: antialiased; color: var(--ink); background: var(--bg); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { overflow: hidden; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.viewport { position: fixed; inset: 0; display: grid; place-items: center; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); container-type: size; }
.slide { position: relative; width: min(100cqw, 100cqh * 16 / 9); height: min(100cqh, 100cqw * 9 / 16); container-type: size; --u: calc(100cqw / 1440); overflow: hidden; user-select: none; background: radial-gradient(ellipse at 49% 47%, #20242a16, transparent 64%); }
.slide-header { position: absolute; top: calc(34 * var(--u)); right: calc(55 * var(--u)); display: flex; flex-direction: column; align-items: flex-end; gap: calc(9 * var(--u)); z-index: 2; }
.slide-header p { margin: 0; }
.wordmark { display: flex; align-items: center; font-size: calc(21 * var(--u)); font-weight: 650; letter-spacing: -.045em; }
.brand-mark { display: flex; align-items: center; gap: calc(3 * var(--u)); margin-right: calc(9 * var(--u)); transform: rotate(-24deg); }
.brand-mark i { display: block; width: calc(4 * var(--u)); height: calc(13 * var(--u)); border-radius: calc(3 * var(--u)); background: var(--blue); }
.brand-mark i:nth-child(2) { height: calc(22 * var(--u)); }
.brand-dot { color: var(--blue); }
.chapter { display: flex; gap: calc(10 * var(--u)); font-size: calc(14 * var(--u)); color: #89949f; }
.chapter .chapter-number { color: var(--purple); }
.intro { position: absolute; top: calc(31 * var(--u)); left: calc(70 * var(--u)); right: calc(480 * var(--u)); z-index: 2; text-align: left; }
.intro h1 { margin: 0; font-size: calc(61 * var(--u)); font-weight: 720; line-height: .98; letter-spacing: -.045em; }
.intro h1 span { color: var(--purple); }
.intro p { margin: calc(12 * var(--u)) 0 0; font-size: calc(26 * var(--u)); line-height: 1.3; color: var(--muted); letter-spacing: -.025em; }
.headline-break { display: block; }
.portrait-break { display: none; }
.scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene text { font-family: inherit; font-kerning: normal; letter-spacing: -.02em; }
.reveal-part.is-unrevealed { display: none; }
.is-building .takeaway { visibility: hidden; }
.has-issues .scene { filter: grayscale(1); opacity: .62; }
.has-issues .intro, .has-issues .slide-header, .has-issues .takeaway, .has-issues .illustrative { filter: grayscale(1); opacity: .62; }
.art-label { fill: #f1f3f6; font-weight: 460; }
.strong-label { font-weight: 600; }
.art-note { fill: var(--muted); font-weight: 400; }
.column-label { letter-spacing: .005em; }
.cold-note { fill: #98b3c5; font-weight: 400; }
.loss-label { fill: #cf9bf0; font-weight: 550; }
.investment-ring { fill: #111619; stroke: var(--blue); stroke-width: 1.15; }
.tray-wall { fill: url(#tray-glass); stroke: #b5c0c9; stroke-width: 1; }
.tray-rim { fill: #242a2f; stroke: #b5c0c9; stroke-width: .9; }
.tray-shine { fill: none; stroke: #e7eef5; stroke-opacity: .1; stroke-width: 1; }
.holding-icon, .people-icon { fill: none; stroke: #dce4ea; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: #dce4ea; }
.flow-route { fill: none; stroke: var(--blue); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.loss-route { stroke: #cf9bf0; stroke-dasharray: 6 7; }
.issue-annotations { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.issue-annotations[hidden] { display: none; }
.issue-outline { fill: none; stroke: var(--bg); stroke-width: 5; }
.issue-ring, .issue-leader { fill: none; stroke: #d6a6f2; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.issues { position: absolute; top: calc(109 * var(--u)); left: calc(1025 * var(--u)); right: calc(55 * var(--u)); margin: 0; padding: 0; list-style: none; z-index: 2; }
.issue { position: relative; }
.issue[hidden] { display: none; }
.issue-number { position: absolute; left: calc(-52 * var(--u)); top: calc(8 * var(--u)); display: grid; place-items: center; width: calc(36 * var(--u)); height: calc(36 * var(--u)); border: calc(1.25 * var(--u)) solid #d6a6f2; border-radius: 50%; color: #dbb8ee; background: var(--bg); font-size: calc(18 * var(--u)); font-variant-numeric: tabular-nums; font-weight: 550; }
.issue h2 { margin: 0; font-size: calc(30 * var(--u)); line-height: 1.15; font-weight: 550; letter-spacing: -.035em; color: #deb7f4; }
.issue p { margin: calc(9 * var(--u)) 0 0; font-size: calc(23 * var(--u)); line-height: 1.35; color: #c7d0db; letter-spacing: -.02em; }
.issue p strong { color: #deb7f4; font-weight: 600; }
.takeaway { position: absolute; bottom: calc(58 * var(--u)); left: calc(70 * var(--u)); right: calc(330 * var(--u)); margin: 0; font-size: calc(25.5 * var(--u)); line-height: 1.35; font-weight: 550; letter-spacing: -.02em; }
.takeaway-mark { display: none; }
.takeaway-secondary { color: var(--muted); font-weight: 400; }
.illustrative { position: absolute; bottom: calc(27 * var(--u)); left: calc(70 * var(--u)); margin: 0; color: #95a0ac; font-size: calc(15.5 * var(--u)); }
.controls { position: absolute; bottom: calc(18 * var(--u)); right: calc(48 * var(--u)); display: flex; align-items: center; gap: calc(9 * var(--u)); z-index: 3; }
.control { display: grid; place-items: center; width: max(36px, calc(38 * var(--u))); height: max(36px, calc(38 * var(--u))); padding: 0; border: 0; border-radius: 50%; background: transparent; color: #98a4b2; cursor: pointer; }
.control svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.control .icon-play, .control.is-paused .icon-pause { display: none; }
.control.is-paused .icon-play { display: block; }
.control:hover { background: #ffffff09; color: #fff; }
.control:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.has-issues .control:focus-visible, .has-story-focus .control:focus-visible { outline-color: #d6a6f2; }
.control:disabled { color: #58616b; cursor: default; }
.control:disabled:hover { background: transparent; }
.advance-control { width: auto; min-width: calc(132 * var(--u)); padding: 0 calc(15 * var(--u)); border: 1px solid #353b44; border-radius: calc(7 * var(--u)); color: #cbd4df; font-size: max(13px, calc(16 * var(--u))); }
.advance-control:disabled { border-color: #252a31; }
.back-control { display: flex; justify-content: center; gap: calc(5 * var(--u)); width: auto; min-width: calc(94 * var(--u)); padding: 0 calc(12 * var(--u)); border: 1px solid #353b44; border-radius: calc(7 * var(--u)); color: #cbd4df; font-size: max(13px, calc(16 * var(--u))); }
.back-control:disabled { border-color: #252a31; }
.progress-count { min-width: calc(95 * var(--u)); text-align: center; color: #919eac; font-size: max(12px, calc(15 * var(--u))); font-variant-numeric: tabular-nums; white-space: nowrap; }
.presenter-cue { position: relative; display: grid; place-items: center; flex: 0 0 22px; height: 30px; color: #7e8b99; cursor: help; border-radius: 4px; }
.presenter-cue > svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.cue-track { opacity: .22; }
.cue-spinner, .cue-check, .cue-pause, .cue-error { display: none; }
[data-state="playing"] .cue-spinner { display: block; transform-origin: 8px 8px; animation: cue-turn 1.3s linear infinite; }
[data-state="ready"] .cue-check, [data-state="paused"] .cue-pause, [data-state="error"] .cue-error { display: block; }
.presenter-cue[data-state="error"] { color: #c6a48e; }
.presenter-cue:focus-visible { outline: 1px solid #7e8b99; outline-offset: 2px; }
.presenter-cue-detail { position: absolute; bottom: 100%; right: -36px; width: 240px; padding: 10px 12px; border: 1px solid #303842; border-radius: 6px; background: #13181e; color: #aeb8c4; font: 12px/1.5 Inter, sans-serif; box-shadow: 0 6px 22px #0004; opacity: 0; visibility: hidden; pointer-events: none; }
.presenter-cue:hover .presenter-cue-detail, .presenter-cue:focus-visible .presenter-cue-detail { opacity: 1; visibility: visible; }
@keyframes cue-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { [data-state="playing"] .cue-spinner { animation: none; } }
.control[hidden] { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.noscript { position: absolute; top: 45%; left: 10%; right: 10%; font-size: 24px; text-align: center; }
.is-bridge > .intro, .is-bridge > .scene, .is-bridge > .issue-annotations, .is-bridge > .issues, .is-bridge > .takeaway, .is-bridge > .illustrative, .is-bridge > #scene-description { display: none; }
.bridge-screen { position: absolute; inset: 0; }
.bridge-screen[hidden], .story-question[hidden], .story-summary[hidden] { display: none; }
.bridge-intro { position: absolute; top: calc(31 * var(--u)); left: calc(70 * var(--u)); right: calc(405 * var(--u)); z-index: 1; }
.bridge-intro h1 { margin: 0; font-size: calc(54 * var(--u)); line-height: 1.04; font-weight: 720; letter-spacing: -.045em; }
.bridge-intro h1 span { color: var(--purple); }
.bridge-intro p { margin: calc(14 * var(--u)) 0 0; max-width: calc(900 * var(--u)); font-size: calc(23 * var(--u)); line-height: 1.4; color: var(--muted); letter-spacing: -.02em; }
.bridge-screen.has-focus .bridge-intro, .has-story-focus .slide-header { filter: grayscale(1); opacity: .62; }
.bridge-diagram { position: absolute; inset: 0; width: 100%; height: 100%; }
.bridge-diagram text { font-family: inherit; letter-spacing: -.02em; }
.story-route { fill: none; stroke: #424242; stroke-width: 1.3; stroke-dasharray: 4 7; stroke-linecap: round; }
.story-route.is-active { stroke: #8a8a8a; }
.story-source-ring { fill: #101418; stroke: #737b83; stroke-width: 1.15; }
.story-lead-core { fill: var(--blue); stroke: #91d3fc; stroke-width: 1; }
.story-label { fill: #eef1f4; font-weight: 500; }
.story-note { fill: #a0a7af; font-weight: 400; }
.has-focus .story-lead-core { fill: #9e9e9e; stroke: #c1c1c1; }
.has-focus .story-label, .has-focus .story-note { fill: #969696; }
.story-marker circle { fill: var(--bg); stroke: #424242; stroke-width: 1.4; }
.story-marker text { fill: #686868; font-size: 19px; font-weight: 500; }
.story-marker.is-seen circle { stroke: #7c7c7c; }
.story-marker.is-seen text { fill: #929292; }
.story-marker.is-active circle { stroke: #d6a6f2; stroke-width: 1.7; }
.story-marker.is-active text { fill: #dbb8ee; }
.story-traveller { fill: #b4b4b4; }
.story-question { position: absolute; top: calc(293 * var(--u)); left: calc(704 * var(--u)); right: calc(70 * var(--u)); }
.story-question[data-question="2"] { top: calc(418 * var(--u)); }
.story-question[data-question="3"] { top: calc(543 * var(--u)); }
.story-question h2 { margin: 0; font-size: calc(30 * var(--u)); line-height: 1.2; font-weight: 550; letter-spacing: -.03em; color: #909090; }
.story-question p { display: none; margin: calc(9 * var(--u)) 0 0; color: #c7d0db; font-size: calc(23 * var(--u)); line-height: 1.4; letter-spacing: -.02em; }
.story-question.is-active h2 { color: #deb7f4; }
.story-question.is-active p { display: block; }
.story-question strong { color: #deb7f4; font-weight: 550; }
.story-summary { position: absolute; left: calc(70 * var(--u)); right: calc(70 * var(--u)); bottom: calc(80 * var(--u)); margin: 0; color: #edf0f4; font-size: calc(34 * var(--u)); line-height: 1.28; letter-spacing: -.03em; font-weight: 450; }
.story-summary strong { color: #deb7f4; font-weight: 550; }
.story-footnote { position: absolute; bottom: calc(27 * var(--u)); left: calc(70 * var(--u)); margin: 0; color: #858585; font-size: calc(15.5 * var(--u)); }
@media (max-aspect-ratio: 1/1) {
  .slide { width: min(100cqw, 100cqh * 680 / 1440); height: min(100cqh, 100cqw * 1440 / 680); --u: calc(100cqw / 680); }
  .slide-header { top: calc(33 * var(--u)); left: calc(38 * var(--u)); right: calc(38 * var(--u)); flex-direction: row; justify-content: space-between; align-items: center; }
  .wordmark { font-size: calc(26 * var(--u)); }
  .chapter { font-size: calc(20 * var(--u)); }
  .intro { top: calc(100 * var(--u)); left: calc(38 * var(--u)); right: calc(38 * var(--u)); }
  .intro h1 { font-size: calc(51 * var(--u)); line-height: 1.05; }
  .intro p { font-size: calc(26 * var(--u)); line-height: 1.45; margin-top: calc(17 * var(--u)); max-width: calc(570 * var(--u)); }
  .portrait-break { display: block; }
  .has-issues .intro { visibility: hidden; }
  .issues { top: calc(120 * var(--u)); left: calc(111 * var(--u)); right: calc(38 * var(--u)); }
  .issue-number { left: calc(-68 * var(--u)); top: calc(4 * var(--u)); width: calc(50 * var(--u)); height: calc(50 * var(--u)); font-size: calc(24 * var(--u)); }
  .issue h2 { font-size: calc(46 * var(--u)); }
  .issue p { margin-top: calc(14 * var(--u)); font-size: calc(28 * var(--u)); }
  .takeaway { bottom: calc(68 * var(--u)); left: calc(35 * var(--u)); right: calc(35 * var(--u)); font-size: calc(27 * var(--u)); line-height: 1.45; text-align: center; }
  .illustrative { display: none; }
  .controls { bottom: calc(7 * var(--u)); left: calc(20 * var(--u)); right: calc(20 * var(--u)); justify-content: space-between; }
  .advance-control { min-width: calc(210 * var(--u)); padding: 0 calc(18 * var(--u)); font-size: calc(25 * var(--u)); }
  .progress-count { min-width: calc(125 * var(--u)); font-size: calc(22 * var(--u)); }
  .bridge-intro { top: calc(100 * var(--u)); left: calc(38 * var(--u)); right: calc(38 * var(--u)); }
  .bridge-intro h1 { font-size: calc(45 * var(--u)); line-height: 1.06; }
  .bridge-intro p { font-size: calc(24 * var(--u)); line-height: 1.4; margin-top: calc(17 * var(--u)); }
  .story-question { top: calc(643 * var(--u)); left: calc(140 * var(--u)); right: calc(38 * var(--u)); }
  .story-question[data-question="2"] { top: calc(818 * var(--u)); }
  .story-question[data-question="3"] { top: calc(993 * var(--u)); }
  .story-question h2 { font-size: calc(32 * var(--u)); }
  .story-question p { font-size: calc(26 * var(--u)); }
  .story-summary { left: calc(38 * var(--u)); right: calc(38 * var(--u)); bottom: calc(120 * var(--u)); font-size: calc(30 * var(--u)); }
  .story-footnote { display: none; }
}