/* One illustrative match connects the three steps. Active panels size to their content. */
.p-story-walkthrough { align-items:start; }
.p-story-stage { grid-template-rows:auto auto auto; align-self:start; }
.p-story-stage .p-story-preview { grid-area:auto; min-height:0; display:none; padding-top:18px; }
.p-story-stage #story-preview-1 { display:block; }
@supports selector(:has(*)) {
  .p-story-stage #story-preview-1 { display:none; }
  .p-story-walkthrough:has(#story-step-1:checked) #story-preview-1,
  .p-story-walkthrough:has(#story-step-2:checked) #story-preview-2,
  .p-story-walkthrough:has(#story-step-3:checked) #story-preview-3 { display:block; }
}
.p-story-stage .p-story-preview-note { font-size:12px; line-height:1.65; margin:16px 0; }
.p-story-stage .p-story-preview-title { min-height:24px; font-size:11px; }
.p-story-example-match { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:16px; align-items:center; margin:16px 0 4px; }
.p-story-example-team { display:grid; justify-items:center; gap:8px; text-align:center; }
.p-story-example-team img { width:44px; height:48px; object-fit:contain; }
.p-story-example-team strong { font-size:14px; line-height:1.4; font-weight:700; }
.p-story-kickoff { display:grid; gap:3px; text-align:center; }
.p-story-kickoff strong { font-size:34px; line-height:1.15; font-weight:750; font-variant-numeric:tabular-nums; letter-spacing:normal; }
.p-story-kickoff small { color:var(--p-color-ink-300); font-size:10px; }
.p-story-pitch-wrap { width:min(100%,330px); margin:16px auto 0; }
.p-story-stage .p-story-competition { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid #434764; border-radius:10px; background:#ffffff08; color:var(--p-color-white); }
.p-story-competition img { width:28px; height:28px; object-fit:contain; }
.p-story-competition strong { font-size:15px; font-weight:750; letter-spacing:normal; }
.p-story-pitch { display:block; width:100%; height:auto; overflow:visible; }
.p-story-market-list { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px 20px; margin:8px 0 0; padding:0; list-style:none; }
.p-story-market-list li { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--p-color-ink-200); }
.p-story-market-icon { display:inline-block; flex:none; vertical-align:middle; }
.p-story-market-list .p-story-market-icon { color:var(--p-color-lime-300); }
.p-story-stage .p-story-market-focus { display:inline-flex; gap:6px; align-items:center; border:1px solid transparent; border-radius:999px; padding:6px 10px; background:var(--p-color-lime-300); color:var(--p-color-lime-900); font-size:14px; line-height:1.3; font-weight:750; }
.p-story-stage .p-story-context-head { margin-top:14px; }
.p-story-context-head strong { font-size:40px; line-height:1.15; letter-spacing:normal; }
.p-story-example-count { color:var(--p-color-ink-200); font-size:12px; text-align:right; max-width:11ch; }
.p-story-chart-title { display:block; font-size:13px; font-weight:650; margin:20px 0 0; color:var(--p-color-white); }
.p-story-chart { margin-top:8px; }
.p-story-chart-visual { padding:20px 0 0 24px; position:relative; }
.p-story-chart-plot { height:148px; position:relative; border-bottom:1px solid var(--p-color-ink-600); background:repeating-linear-gradient(to top,transparent 0,transparent calc(25% - 1px),color-mix(in srgb,var(--p-color-ink-500) 30%,transparent) calc(25% - 1px),color-mix(in srgb,var(--p-color-ink-500) 30%,transparent) 25%); }
.p-story-chart-y { position:absolute; top:20px; left:0; height:148px; width:15px; color:var(--p-color-ink-300); font-size:10px; text-align:right; }
.p-story-chart-y span { position:absolute; right:0; transform:translateY(50%); }
.p-story-chart-columns { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; height:100%; padding-inline:12px; }
.p-story-chart-column { position:relative; height:100%; display:flex; align-items:flex-end; justify-content:center; }
.p-story-chart-bar { position:relative; width:min(100%,38px); background:var(--p-color-cobalt-400); border-radius:5px 5px 0 0; transform-origin:bottom; }
.p-story-chart-bar b { position:absolute; bottom:100%; left:0; right:0; padding-bottom:4px; color:var(--p-color-white); font-size:12px; font-weight:650; text-align:center; }
.p-story-chart-column>span { position:absolute; top:100%; padding-top:6px; font-size:10px; color:var(--p-color-ink-200); }
.p-story-chart-projection { position:absolute; z-index:1; left:0; right:0; border-top:1px dashed var(--p-color-lime-300); pointer-events:none; }
.p-story-chart-projection>span { position:absolute; right:0; bottom:4px; border-radius:4px; padding:0 3px; font-size:11px; font-weight:750; line-height:1.4; color:var(--p-color-lime-300); background:var(--p-color-ink-900); }
.p-story-chart-order { display:flex; justify-content:space-between; gap:8px; margin-top:24px; font-size:10px; color:var(--p-color-ink-300); }
.p-story-chart-legend { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin-top:14px; font-size:11px; color:var(--p-color-ink-200); }
.p-story-chart-legend span { display:inline-flex; align-items:center; gap:6px; }
.p-story-legend-bar { width:9px; height:9px; border-radius:2px; background:var(--p-color-cobalt-400); }
.p-story-legend-line { width:18px; border-top:1px dashed var(--p-color-lime-300); }
.p-story-stage .p-story-final-pick { margin:24px 0 30px; }
.p-story-stage .p-story-final-pick strong { letter-spacing:normal; }
@media(prefers-reduced-motion:no-preference) {
  .p-story-walkthrough.is-in-view:has(#story-step-2:checked) .p-story-chart-bar { animation:p-story-bar 480ms var(--p-ease-enter) var(--delay) both; }
}
@media(max-width:540px) {
  .p-story-example-match { gap:10px; }
  .p-story-example-team img { width:38px; height:42px; }
  .p-story-example-team strong { font-size:12px; }
  .p-story-kickoff strong { font-size:28px; }
  .p-story-kickoff small { font-size:9px; max-width:10ch; }
  .p-story-market-list { gap:8px 12px; justify-content:space-between; }
  .p-story-market-list li { gap:4px; font-size:11px; }
  .p-story-market-list svg { width:18px; height:18px; }
  .p-story-stage .p-story-preview-title { font-size:10px; }
  .p-story-stage .p-story-market-focus { font-size:12px; }
  .p-story-chart-columns { gap:10px; padding-inline:10px; }
  .p-story-chart-bar { max-width:30px; }
  .p-story-stage .p-story-final-pick strong { font-size:26px; }
}
@media(forced-colors:active) {
  .p-story-chart-bar { background:Highlight; }
  .p-story-chart-projection,.p-story-legend-line { border-color:CanvasText; }
  .p-story-market-focus { border-color:CanvasText; }
}