/* Same article theme and controller as the faithful port. */
.slide { padding: 0; justify-content: center; align-items: center; gap: 32px; }
.slide > h2 { max-width: 1540px; flex-shrink: 0; }
.content { width: max-content; max-width: 1500px; max-height: 100%; }
.content ul { display: grid; gap: 18px; }
.content li > ul { margin-top: 8px; gap: 8px; }
.title-slide { text-align: center; }
.title-details { line-height: 1.6; }
.image-slide { display: block; }
.image-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.figure-slide { justify-content: flex-start; gap: 24px; }
.figure-slide figure { width: 100%; flex: 1; grid-template-rows: minmax(0, 1fr); gap: 0; }
.figure-slide figure:has(figcaption) { grid-template-rows: minmax(0, 1fr) auto; gap: 16px; }
.figure-slide figcaption { font-size: 28px; font-style: normal; }
.flow { display: grid; grid-template-columns: 1fr 70px 1fr 70px 1fr; width: 1480px; align-items: center; text-align: center; }
.flow-node { font-size: 48px; line-height: 1.2; }
.flow-node small { display: block; font-size: 32px; line-height: 1.4; margin-top: 24px; }
.flow-arrow { font-size: 58px; }
.concepts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; width: 1480px; text-align: center; }
.diagram { width: 1440px; height: 560px; flex: none; overflow: visible; font-size: 38px; }
.diagram text { font-family: var(--font); fill: currentColor; }
.widget-slide { display: block; }
.widget-slide iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--paper); }
.video-slide video { width: 100%; height: 100%; object-fit: contain; }
.sense-table { width: 1400px; border-collapse: collapse; margin: 0; }
.sense-table th, .sense-table td { text-align: left; padding: 16px 24px; border: 0; border-bottom: 1px solid var(--rule); }
.sense-table th { font-weight: 400; }
.sense-table thead th { font-weight: 700; }
.references-list { max-width: 1480px; display: grid; gap: 28px; font-size: 28px; line-height: 1.4; }
.references-list a { white-space: normal; }
/* Keep reference markup in the source without projecting it or reserving space. */
.slide.has-references { padding-bottom: 0; }
.slide-references { position: absolute; bottom: 0; left: 0; right: calc(190px / var(--slide-scale)); display: none; gap: 4px; font-size: 22px; line-height: 1.2; text-align: left; }
.slide-references p { margin: 0; }
.slide-references a { color: inherit; text-decoration: none; }
/* One sample per plot, with a shared percentage scale. */
.chart-slide { gap: 12px; }
.chart-sample { font-size: 32px; }
.vertical-chart { position: relative; display: block; width: 1480px; height: 610px; flex: none; }
.percentage-axis-title { position: absolute; left: 0; top: 50px; bottom: 150px; width: 54px; display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 30px; }
.vertical-plot { position: absolute; left: 140px; right: 10px; top: 50px; bottom: 150px; border-left: 1px solid color-mix(in srgb, currentColor 55%, transparent); }
.percentage-grid { position: absolute; inset: 0; }
.percentage-gridline { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
.percentage-gridline:first-child { border-top-color: color-mix(in srgb, currentColor 55%, transparent); }
.percentage-gridline span { position: absolute; right: calc(100% + 16px); top: 0; transform: translateY(-50%); font-size: 26px; line-height: 1; }
.vertical-bars { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--bar-count), minmax(0, 1fr)); gap: 48px; padding: 0 34px; align-items: end; }
.vertical-bar-slot { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.vertical-bar { position: relative; width: min(100%, var(--column-width)); height: var(--bar-height); }
.column-fill { position: absolute; inset: 0; border: 0; clip-path: inset(0); }
.column-value { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); font-size: 32px; line-height: 1; white-space: nowrap; }
.column-label { position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%); width: calc(100% + 34px); font-size: 30px; line-height: 1.2; text-align: center; }
.combination-axis-title { position: absolute; bottom: 0; left: 140px; right: 10px; text-align: center; font-size: 30px; line-height: 1.2; }
/* Reveal the fixed-height bars; do not stretch their diagonal stripe pattern. */
@keyframes chart-grow { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
.slide:not([hidden]) .column-fill { animation: chart-grow 850ms cubic-bezier(.2, .65, .25, 1) both; }
:root[data-transitions="off"] .column-fill { animation: none; }
.controls { position: fixed; bottom: 8px; right: 8px; z-index: 10; display: flex; align-items: center; gap: 4px; background: var(--paper); color: var(--ink); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 150ms ease, visibility 150ms; }
.controls.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }
.controls[hidden] { display: none !important; }
.controls button { padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font-size: 22px; width: 42px; height: 36px; cursor: pointer; }
.controls button:disabled { opacity: .3; cursor: default; }
#counter { font: 13px sans-serif; min-width: 60px; text-align: center; font-variant-numeric: tabular-nums; }
::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }
::view-transition { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .column-fill { animation: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@media print {
  @page { size: 1600px 900px; margin: 0; }
  html, body { height: auto; overflow: visible; }
  .viewport, .stage { position: static; display: block; width: 1600px; height: auto; transform: none; overflow: visible; }
  .slide, .slide[hidden] { position: relative; display: flex !important; width: 1600px; height: 900px; break-after: page; }
  .image-slide, .image-slide[hidden] { display: block !important; }
  .controls { display: none; }
  .column-fill { animation: none !important; clip-path: none !important; }
}