@font-face{
  font-family: Public Sans;
  src: url('../assets/fonts/PublicSans-400.ttf') format('truetype');
  font-weight: 400;
  font-display: swap
}

@font-face{
  font-family: Public Sans;
  src: url('../assets/fonts/PublicSans-500.ttf') format('truetype');
  font-weight: 500;
  font-display: swap
}

@font-face{
  font-family: Public Sans;
  src: url('../assets/fonts/PublicSans-600.ttf') format('truetype');
  font-weight: 600;
  font-display: swap
}

@font-face{
  font-family: Barlow Condensed;
  src: url('../assets/fonts/BarlowCondensed-600.ttf') format('truetype');
  font-weight: 600;
  font-display: swap
}

:root{
  --paper: #f5f4ed;
  --surface: #fffefa;
  --ink: #1c2828;
  --muted: #596660;
  --line: #d2d6ca;
  --accent: #245c48;
  --tint: #e4eacb;
  --on-accent: #fff;
  --radius: 8px;
  color: var(--ink);
  background: var(--paper);
  font-family: Public Sans, Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth
}

*{
  box-sizing: border-box
}

body{
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  color: var(--ink)
}

body.dark{
  --paper: #151918;
  --surface: #1e2422;
  --ink: #f1f0e8;
  --muted: #b3bbb3;
  --line: #39423b;
  --accent: #daeb91;
  --tint: #2c3425;
  --on-accent: #20281b;
  --radius: 3px
}

::selection{
  background: var(--accent);
  color: var(--on-accent)
}

button, select, input{
  font: inherit
}

button, a{
  -webkit-tap-highlight-color: transparent
}

button{
  cursor: pointer;
  color: inherit
}

a{
  color: inherit;
  text-underline-offset: 5px
}

button:disabled{
  cursor: default
}

a, button, summary{
  touch-action: manipulation
}

:focus-visible{
  outline: 3px solid var(--accent);
  outline-offset: 5px
}

button:focus-visible{
  outline-color: #a278dc
}

p, h1, h2, h3, figure{
  margin: 0
}

p{
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted)
}

h1, h2, h3{
  font-weight: 500
}

h1, h2{
  text-wrap: balance
}

h1{
  font-size: clamp(3.6rem, 6.1vw, 6.4rem);
  letter-spacing: -.067em;
  line-height: 1.02
}

h1 em{
  font-family: Georgia, serif;
  font-weight: 400;
  letter-spacing: -.065em;
  line-height: 1.2;
  color: var(--accent)
}

h2{
  font-size: clamp(2.25rem, 4vw, 4.1rem);
  letter-spacing: -.055em;
  line-height: 1.08
}

h3{
  font-size: 1.3rem;
  letter-spacing: -.025em;
  line-height: 1.3
}

.wrap{
  width: min(1400px, calc(100% - 112px));
  margin-inline: auto
}

.skip-link{
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 12px;
  background: var(--accent);
  color: var(--on-accent);
  transform: translateY(-150%)
}

.skip-link:focus{
  transform: none
}

.masthead{
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 20px 40px;
  border-bottom: 1px solid var(--line);
  background: var(--paper)
}

.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0
}

.brand>span{
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -.03em
}

.brand-sub{
  display: block;
  color: var(--muted);
  font-size: .75rem;
  letter-spacing: 0;
  font-weight: 400;
  margin-top: 2px
}

.page-nav{
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-left: auto;
  font-size: .875rem
}

.page-nav a, .nav-cta{
  text-decoration: none
}

.page-nav a:hover{
  color: var(--accent)
}

.variants{
  display: flex;
  gap: 3px;
  border: 1px solid var(--line);
  padding: 3px;
  border-radius: 6px;
  margin-left: 20px
}

.variants a{
  display: grid;
  place-items: center;
  width: 36px;
  height: 34px;
  font-size: .875rem;
  text-decoration: none;
  border-radius: 3px
}

.variants a[aria-current]{
  background: var(--ink);
  color: var(--paper)
}

.variants a:hover:not([aria-current]){
  background: var(--tint)
}

.nav-cta{
  font-size: .875rem;
  border-left: 1px solid var(--line);
  padding-left: 24px;
  display: flex;
  gap: 20px
}

.eyebrow{
  display: flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .75rem;
  line-height: 1.4;
  color: var(--accent);
  font-weight: 600
}

.tiny-mark{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent)
}

.hero{
  display: grid;
  grid-template-columns: .93fr 1.07fr;
  gap: 0 50px;
  padding-top: 78px;
  align-items: center
}

.hero .eyebrow{
  margin-bottom: 26px
}

.hero-description{
  margin-top: 27px
}

.lede{
  font-size: 1.2rem;
  color: var(--ink);
  line-height: 1.6;
  max-width: 36ch
}

.hero-detail{
  max-width: 44ch;
  margin-top: 15px
}

.actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px
}

.button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-height: 50px;
  padding: 13px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
  transition: transform .2s, background .2s
}

.primary{
  background: var(--accent);
  color: var(--on-accent)
}

.secondary{
  background: transparent;
  border-color: var(--line);
  color: var(--ink)
}

.button:hover{
  transform: translateY(-2px)
}

.secondary:hover{
  background: var(--tint)
}

.requirements{
  font-size: .875rem;
  margin-top: 22px;
  line-height: 1.6
}

.hero-art{
  min-width: 0;
  position: relative;
  padding-top: 22px
}

.preview{
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 20px 50px #1a332112;
  scroll-margin-top: 110px
}

.preview-top, .preview-bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 20px
}

.preview-top{
  font-size: .75rem;
  color: var(--muted)
}

.preview-top>span:first-child{
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: .875rem;
  color: var(--ink)
}

.preview-top>span:last-child{
  letter-spacing: .09em
}

.status-dot{
  width: 7px;
  height: 7px;
  background: var(--accent);
  border-radius: 50%
}

.product-shot{
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #101619
}

.product-shot img{
  position: absolute;
  max-width: none;
  width: 131.15%;
  height: auto;
  left: -15.57%;
  top: -11.65%
}

/*
 * prelude.webp frames the quiz card differently than opening.webp frames the
 * paused video underneath it -- the two images were captured separately, not
 * as the same browser window with only the overlay toggled -- so the shared
 * crop above, tuned by eye against the base layer, left this one with a
 * top margin roughly 2.5x its bottom margin. Nudged down until both sides
 * measured out equal against a real capture.
 */
.auto-quiz-demo .auto-quiz-overlay{
  top: -19.4%
}

/*
 * The hero walkthrough cycles three captures through one element
 * (`setScene` in fresh-site.js swaps the `src` and this data attribute).
 * answer.webp's card is taller than evidence.webp's or final.webp's --
 * it carries a revealed verdict and explanation box the plain question
 * views don't -- so the crop tuned for those two cut its Rewatch/Report
 * row off at the bottom. This scene gets its own, far less aggressive
 * crop rather than a compromise that would recut the other two.
 */
.hero-shot[data-scene-name="answer"] img{
  width: 105%;
  left: -2.57%;
  top: -5.36%
}

.preview-bottom{
  align-items: flex-start
}

.preview-bottom p{
  font-size: .875rem;
  max-width: 28ch;
  line-height: 1.5
}

.play-control{
  background: none;
  border: none;
  font-size: .875rem;
  display: flex;
  gap: 8px;
  align-items: center;
  text-align: left;
  padding: 0;
  min-height: 40px;
  flex-shrink: 0;
  color: var(--accent)
}

.scene-nav{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line)
}

.scene-nav button{
  border: 0;
  border-right: 1px solid var(--line);
  padding: 16px 12px;
  background: transparent;
  font-size: .875rem;
  text-align: left;
  line-height: 1.4;
  position: relative
}

.scene-nav button:last-child{
  border-right: 0
}

.scene-nav span{
  display: block;
  font-size: .75rem;
  color: var(--muted);
  margin-bottom: 6px
}

.scene-nav [aria-pressed=true]{
  background: var(--tint)
}

.scene-nav [aria-pressed=true]::before{
  content: '';
  height: 3px;
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  background: var(--accent)
}

.margin-note{
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 25px 20px 0 35px
}

.margin-note>span{
  font-size: 2.5rem;
  color: var(--accent);
  line-height: 1
}

.margin-note p{
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 1.1rem
}

.hero-foot{
  grid-column: 1/-1;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 36px 0;
  margin-top: 58px;
  border-top: 1px solid var(--line);
  font-size: .875rem;
  color: var(--muted)
}

.hero-foot i{
  font-style: normal;
  color: var(--accent);
  padding: 0 12px
}

.standout{
  background: var(--surface)
}

.standout .chapter-marker,
.standout .chapter-marker>span{
  background: var(--surface)
}

.comparison-scroll-hint{
  display: none
}

.comparison-scroll{
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  background: var(--surface);
  scrollbar-color: var(--accent) var(--surface)
}

.comparison-scroll:focus-visible{
  outline: 3px solid var(--accent);
  outline-offset: 3px
}

/* The feature label and the Quizmark column stay pinned while the rest
   scrolls, so a dot is never read without the row it belongs to or the
   column it is being compared against. */
.comparison-table{
  --comparison-label: 25%;
  width: 100%;
  min-width: 560px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-variant-numeric: tabular-nums
}

.comparison-table th,
.comparison-table td{
  padding: 14px 16px;
  border-bottom: 1px solid var(--line)
}

.comparison-table thead th{
  height: 74px;
  background: var(--surface);
  font-size: .875rem;
  font-weight: 600;
  text-align: center;
  vertical-align: middle
}

.comparison-table thead th:first-child,
.comparison-table tbody th{
  position: sticky;
  left: 0;
  z-index: 1;
  width: var(--comparison-label);
  background: var(--surface);
  border-right: 1px solid var(--line);
  text-align: left
}

.comparison-table thead th:nth-child(2),
.comparison-table tbody td:nth-child(2){
  position: sticky;
  left: var(--comparison-label);
  z-index: 1;
  background: var(--tint);
  border-right: 1px solid var(--line)
}

.comparison-table thead th:first-child,
.comparison-table thead th:nth-child(2){
  z-index: 2
}

.comparison-table thead th:first-child{
  color: var(--muted);
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em
}

.comparison-table tbody th{
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.35
}

.comparison-table tbody td{
  text-align: center;
  vertical-align: middle
}

.comparison-table thead th:nth-child(2){
  box-shadow: inset 0 3px var(--accent)
}

.comparison-table tbody tr:last-child>*{
  border-bottom: 0
}

.comparison-table a{
  text-decoration-color: var(--line);
  text-underline-offset: 4px
}

.comparison-table a:hover,
.comparison-table a:focus-visible{
  text-decoration-color: var(--accent)
}

.comparison-external{
  margin-left: 5px;
  color: var(--muted)
}

.comparison-dot{
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--muted)
}

.comparison-table td:nth-child(2) .comparison-dot{
  background: var(--accent)
}

.comparison-value{
  font-size: .875rem;
  font-weight: 600
}

.comparison-sr{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

.comparison-note{
  max-width: 100ch;
  margin-top: 18px;
  color: var(--muted);
  font-size: .8125rem;
  line-height: 1.55
}

/* Below this width the pinned pair no longer leaves the other products on
   screen, so say that the rest is reachable by scrolling. */
@media(max-width:620px){
  .comparison-scroll-hint{
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: .75rem
  }
}

.footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding-block: 36px;
  border-top: 1px solid var(--line)
}

.footer p, .footer>a{
  font-size: .875rem
}

.dark .masthead{
  padding-block: 20px
}

.dark .hero{
  display: block;
  padding-top: 62px
}

.dark .hero-copy{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 0 60px;
  align-items: end
}

.dark .hero .eyebrow{
  grid-column: 1/-1;
  margin-bottom: 20px
}

.dark h1{
  font-size: clamp(5rem, 9.4vw, 9.5rem);
  line-height: .87;
  letter-spacing: -.055em
}

.dark h1 em{
  font-family: inherit;
  font-style: normal;
  letter-spacing: inherit;
  line-height: inherit
}

.dark .hero-description{
  margin: 0;
  max-width: 470px;
  padding-bottom: 5px
}

.dark .hero-art{
  margin-top: 48px;
  padding-top: 0
}

.dark .preview{
  border-radius: var(--radius);
  box-shadow: none
}

.dark .preview .product-shot{
  aspect-ratio: 2.65
}

.dark .preview .product-shot img{
  width: 100%;
  left: 0;
  top: -21%
}

.dark .preview-bottom p{
  max-width: none
}

.dark .scene-nav button{
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px
}

.dark .scene-nav span{
  margin: 0;
  color: var(--accent)
}

.dark .hero-foot{
  margin-top: 32px
}

.dark .hero-foot>span:first-child{
  color: var(--ink)
}

@media(min-width:1600px){
  .hero{
    padding-top: 100px;
    padding-bottom: 20px
  }
}

@media(max-width:1100px){
  .wrap{
    width: calc(100% - 64px)
  }

  .masthead{
    padding-inline: 24px;
    gap: 20px
  }

  .page-nav{
    gap: 20px
  }

  .variants{
    margin-left: 0
  }

  .hero{
    gap: 30px;
    padding-top: 60px
  }

  .hero-detail{
    font-size: 1rem
  }

  .comparison-table{
    --comparison-label: 240px
  }

  .preview-top>span:last-child{
    display: none
  }

  .preview-bottom{
    display: block
  }

  .play-control{
    margin-top: 8px
  }

  .dark .preview-bottom{
    display: flex
  }

  .dark .hero-copy{
    gap: 0 35px
  }

  .dark .hero-description .lede{
    font-size: 1.1rem
  }

  .nav-cta{
    display: none
  }
}

@media(max-width:760px){
  .wrap{
    width: calc(100% - 40px)
  }

  .masthead{
    padding: 14px 20px;
    gap: 12px
  }

  .page-nav{
    display: none
  }

  .variants{
    margin-left: auto
  }

  .hero{
    grid-template-columns: 1fr;
    padding-top: 44px;
    gap: 20px
  }

  h1{
    font-size: clamp(3.4rem, 11vw, 5.5rem)
  }

  .hero-art{
    padding-top: 16px
  }

  .hero-foot{
    margin-top: 16px;
    flex-direction: column;
    padding-block: 25px;
    font-size: .8rem;
    gap: 14px
  }

  .margin-note{
    margin: 18px 10px 0
  }

  .hero .eyebrow{
    font-size: .75rem
  }

  .footer{
    flex-wrap: wrap;
    gap: 20px
  }

  .footer p{
    order: 3;
    width: 100%
  }

  .dark .hero{
    padding-top: 42px
  }

  .dark .hero-copy{
    display: block
  }

  .dark h1{
    font-size: clamp(4.2rem, 18vw, 8rem);
    line-height: .9;
  }

  .dark .hero-description{
    margin-top: 28px;
    max-width: none
  }

  .dark .hero-art{
    margin-top: 30px
  }

  .dark .preview .product-shot{
    aspect-ratio: 16/9
  }

  .dark .preview .product-shot img{
    width: 131.15%;
    left: -15.57%;
    top: -11.65%
  }

  .dark .preview-bottom{
    display: block
  }

  .dark .scene-nav button{
    display: block;
    padding: 14px 10px
  }

  .dark .scene-nav span{
    margin-bottom: 6px
  }

.scene-nav button{
    font-size: .875rem;
  padding-inline: 10px
}

  .hero-foot i{
    padding: 0 7px
  }

  .comparison-table{
    --comparison-label: 190px
  }

  .comparison-table th,
  .comparison-table td{
    padding: 13px 10px
  }

  .comparison-table thead th{
    height: 66px;
    font-size: .75rem
  }
}

@media(max-width:620px){
  .comparison-table{
    --comparison-label: 160px
  }
}

/* Keep feature names readable without squeezing the product columns. */
@media(max-width:420px){
  .comparison-table{
    --comparison-label: 150px;
    min-width: 550px
  }

  .comparison-table th,
  .comparison-table td{
    padding: 12px 8px
  }

  .comparison-table tbody th{
    font-size: .8125rem
  }
}

@media(prefers-reduced-motion:reduce){
  :root{
    scroll-behavior: auto
  }

  *, *::before, *::after{
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important
  }
}

/* The timeline remains at a single world coordinate. The whole world pans. */
.story-window{
  overflow: clip;
  border-top: 1px solid var(--line)
}

.story-world{
  --edge: clamp(30px, 3.5vw, 52px);
  --camera-x: calc(-1 * var(--edge));
  position: relative;
  width: 200%;
  transform: translate3d(var(--camera-x), 0, 0);
  will-change: transform;
  transition: none
}

.story-rail{
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
  pointer-events: none
}

.story-rail>span{
  position: absolute;
  left: -1.5px;
  top: 0;
  width: 4px;
  height: var(--rail-fill, 0px);
  background: var(--accent)
}

.story-chapter{
  position: relative;
  min-height: 100svh;
  padding: 86px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  scroll-margin-top: 90px
}

.scene-inner{
  width: calc(50% - 3 * var(--edge));
  margin-left: calc(2 * var(--edge));
  min-width: 0
}

.story-chapter[data-side=right] .scene-inner{
  margin-left: calc(50% + var(--edge))
}

.chapter-marker{
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 23px;
  width: 23px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--accent);
  display: grid;
  place-items: center
}

.chapter-marker::after{
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--paper)
}

.chapter-marker>span{
  position: absolute;
  font-size: .75rem;
  right: 35px;
  color: var(--muted);
  background: var(--paper);
  padding: 5px
}

.story-chapter[data-side=right] .chapter-marker>span{
  right: auto;
  left: 35px
}

.is-reached .chapter-marker::after{
  background: var(--accent)
}

.scene-inner>.eyebrow{
  margin-bottom: 30px
}

.section-number{
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  margin-right: 8px
}

.scene-heading{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 60px;
  margin-bottom: 46px
}

.scene-heading>p{
  max-width: 54ch;
  font-size: 1.125rem
}

.scene-heading em{
  font-family: Georgia, serif;
  color: var(--accent);
  font-weight: 400
}

.explained-media{
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 40px;
  align-items: center
}

figure{
  min-width: 0
}

figure>.product-shot{
  border: 1px solid var(--line);
  border-radius: var(--radius)
}

figcaption{
  display: grid;
  gap: 5px;
  margin-top: 15px;
  font-size: .875rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 74ch
}

figcaption strong{
  font-weight: 500;
  color: var(--ink)
}

.reading-guide{
  border-top: 1px solid var(--line)
}

.reading-guide>.eyebrow{
  margin-top: 18px
}

.reading-guide>div{
  display: flex;
  gap: 15px;
  margin-top: 23px
}

.reading-guide>div>span{
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: .75rem;
  color: var(--accent)
}

.reading-guide p{
  font-size: 1rem
}

.reading-guide strong{
  display: block;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 5px
}

.evidence-chapter{
  background: var(--tint);
  min-height: 115svh
}

.evidence-chapter .chapter-marker, .evidence-chapter .chapter-marker>span{
  background: var(--tint)
}

.evidence-example{
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  gap: 50px;
  align-items: center
}

.return-flow{
  list-style: none;
  padding: 0;
  margin: 0
}

.return-flow li{
  position: relative;
  padding: 10px 0 28px 50px;
  padding-top: 0;
  padding-bottom: 30px
}

.return-flow li:not(:last-child)::before{
  content: '';
  position: absolute;
  top: 27px;
  bottom: -10px;
  left: 14px;
  width: 1px;
  background: var(--accent);
  opacity: .3
}

.return-flow li>span{
  position: absolute;
  left: 0;
  top: 9px;
  background: var(--tint);
  color: var(--accent);
  font-size: .75rem;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: 50%
}

.return-flow strong{
  font-weight: 500;
  display: block;
  margin-bottom: 7px
}

.return-flow p{
  font-size: 1rem
}

.pace-layout{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 50px
}

.pace-example{
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 32px;
  border-radius: var(--radius)
}

.artifact-title{
  padding-bottom: 25px;
  border-bottom: 1px solid var(--line)
}

.artifact-title p{
  font-size: 1rem;
  margin-top: 12px
}

.session-timeline{
  list-style: none;
  padding: 0;
  margin: 28px 0 0
}

.session-timeline li{
  padding: 0 0 26px 33px;
  position: relative
}

.session-timeline li:last-child{
  padding-bottom: 0
}

.session-timeline li:not(:last-child)::before{
  content: '';
  position: absolute;
  top: 10px;
  bottom: -6px;
  left: 5px;
  width: 1px;
  background: var(--line)
}

.session-dot{
  position: absolute;
  left: 0;
  top: 6px;
  width: 11px;
  height: 11px;
  background: var(--accent);
  border: 3px solid var(--surface);
  outline: 1px solid var(--accent);
  border-radius: 50%
}

.session-dot.final-dot{
  border-radius: 0;
  rotate: 45deg
}

.session-timeline strong{
  font-weight: 500
}

.session-timeline p{
  margin-top: 6px;
  font-size: 1rem
}

.pace-settings{
  padding: 28px 0
}

.pace-settings>p{
  margin-top: 12px
}

.sample-controls{
  margin-top: 22px;
  border-top: 1px solid var(--line)
}

.sample-controls label{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 80px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-size: 1rem
}

.sample-controls select{
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 12px;
  font-size: .875rem;
  border-radius: 4px;
  max-width: 100%
}

.sample-controls .checkbox-label{
  justify-content: flex-start;
  cursor: pointer
}

.checkbox-label input{
  accent-color: var(--accent);
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin: 0
}

.sample-result{
  background: var(--tint);
  padding: 18px;
  color: var(--ink)
}

.sample-note{
  font-size: .875rem !important
}

.settings-details{
  margin-top: 20px
}

.quality-layout, .privacy-layout{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px
}

.quality-layout>div>p, .privacy-layout>div>p{
  max-width: 52ch;
  margin-top: 25px
}

.quality-list{
  border-top: 1px solid var(--line);
  padding-top: 25px
}

.quality-list dl{
  margin: 20px 0
}

.quality-list dl div{
  border-bottom: 1px solid var(--line);
  padding: 20px 0
}

.quality-list dt{
  font-weight: 500;
  margin-bottom: 8px
}

.quality-list dd{
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65
}

.quality-list>p{
  font-size: 1rem
}

.model-options{
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  column-gap: var(--content-gap)
}

.model-options article{
  padding: 32px 45px 32px 0
}

.model-options article+article{
  border-left: 1px solid var(--line);
  padding-left: 45px;
  padding-right: 0
}

.option-label{
  font-size: .75rem;
  letter-spacing: .09em;
  color: var(--accent)
}

.model-options h3{
  font-size: 1.6rem;
  margin: 16px 0 12px
}

.model-options>article>p{
  max-width: 45ch
}

.model-options dl{
  margin: 20px 0
}

.model-options dl>div{
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 20px;
  border-top: 1px solid var(--line);
  padding: 17px 0;
  font-size: 1rem;
  line-height: 1.65;
  margin: 0
}

.model-options dt{
  font-weight: 500
}

.model-options dd{
  margin: 0;
  color: var(--muted)
}

details img{
  display: block;
  max-width: 100%;
  height: auto;
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius)
}

summary{
  cursor: pointer;
  min-height: 48px;
  padding-block: 13px;
  line-height: 1.5;
  font-size: 1rem
}

summary:hover{
  color: var(--accent)
}

.privacy-ledger article{
  border-top: 1px solid var(--line);
  padding: 25px 0
}

.privacy-ledger p{
  margin-top: 12px
}

.closing{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 90px;
  padding-block: 100px
}

.close-copy>.eyebrow{
  margin-bottom: 25px
}

.close-copy>p{
  margin-top: 25px;
  max-width: 50ch
}

.install-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}
.availability{
  margin-top: 30px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .875rem
}

.availability strong{
  font-weight: 500;
  line-height: 1.6
}

.availability p{
  font-size: .875rem;
  margin-top: 7px
}

.support-copy{
  margin-top: 38px
}

.support-copy h3{
  font-size: 1rem
}

.support-copy p{
  font-size: .875rem;
  margin-top: 9px;
  max-width: 55ch
}

.faq>h3{
  margin-bottom: 25px
}

.faq details{
  border-top: 1px solid var(--line)
}

.faq details:last-child{
  border-bottom: 1px solid var(--line)
}

.faq summary{
  padding-block: 20px
}

.faq details p{
  padding: 0 0 22px;
  font-size: 1rem
}

.dark h2{
  font-family: Public Sans, Arial, sans-serif;
  font-size: clamp(2.3rem, 4.5vw, 4.7rem)
}

.dark .scene-heading em{
  font-family: inherit;
  font-style: normal
}

.dark .story-chapter{
  padding-block: 90px;
  min-height: 108svh
}

.dark .evidence-chapter{
  background: var(--paper);
  min-height: 115svh
}

.dark .evidence-chapter .chapter-marker, .dark .evidence-chapter .chapter-marker>span{
  background: var(--paper)
}

.dark .evidence-example{
  grid-template-columns: 1.65fr 1fr
}

.dark .return-flow li>span{
  background: var(--paper)
}

.dark .scene-heading{
  margin-bottom: 50px
}

.dark .reading-guide strong{
  color: var(--accent)
}

.dark .quality-list dt{
  color: var(--accent)
}

.dark .preview .product-shot{
  aspect-ratio: 16/9
}

.dark .preview .product-shot img{
  width: 131.15%;
  left: -15.57%;
  top: -11.65%
}

.dark .hero-art{
  max-width: 1100px;
  margin-inline: auto
}

@media(min-width:1700px){
  .scene-inner{
    padding-inline: calc((50vw - 800px)/2)
  }
}

@media(max-width:1100px){
  .explained-media, .evidence-example, .dark .evidence-example{
    grid-template-columns: 1.4fr 1fr;
    gap: 28px
  }

  .scene-heading{
    gap: 40px
  }

  .scene-heading>p{
    font-size: 1rem
  }

  .reading-guide>div{
    margin-top: 14px
  }

  .reading-guide p{
    font-size: .875rem
  }

  .pace-layout{
    gap: 30px
  }

  .pace-example{
    padding: 25px
  }

  .quality-layout, .privacy-layout{
    gap: 45px
  }

  .model-options article{
    padding-right: 25px
  }

  .model-options article+article{
    padding-left: 25px
  }

  .model-options dl>div{
    grid-template-columns: 1fr;
    gap: 5px
  }

  .closing{
    gap: 45px
  }

  .sample-controls label{
    flex-wrap: wrap;
    gap: 12px
  }
}

@media(max-width:760px){
  .story-world{
    width: 100%;
    transform: none !important;
    will-change: auto
  }

  .story-rail{
    left: 20px
  }

  .story-chapter, .dark .story-chapter{
    padding: 58px 0;
    min-height: auto;
    scroll-margin-top: 76px
  }

  .scene-inner, .story-chapter[data-side=right] .scene-inner{
    width: calc(100% - 62px);
    margin-left: 42px
  }

  .chapter-marker{
    left: 20px;
    top: 62px;
    width: 17px;
    height: 17px
  }

  .chapter-marker>span{
    display: none
  }

  .chapter-marker::after{
    width: 7px;
    height: 7px
  }

  .scene-inner>.eyebrow{
    margin-bottom: 24px
  }

  .scene-heading{
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 30px
  }

  .explained-media, .evidence-example, .dark .evidence-example{
    grid-template-columns: 1fr;
    gap: 28px
  }

  .reading-guide{
    margin-top: 0
  }

  .reading-guide p{
    font-size: 1rem
  }

  .reading-guide>div{
    margin-top: 20px
  }

  .pace-layout, .quality-layout, .privacy-layout{
    grid-template-columns: 1fr;
    gap: 28px
  }

  .return-flow li{
    padding-bottom: 22px
  }

  .pace-example{
    padding: 20px
  }

  .pace-settings{
    padding-top: 0
  }

  .model-options{
    grid-template-columns: 1fr
  }

  .model-options article{
    padding: 28px 0
  }

  .model-options article+article{
    padding: 28px 0;
    border-left: 0;
    border-top: 1px solid var(--line)
  }

  .model-options dl>div{
    grid-template-columns: 1fr
  }

  .closing{
    grid-template-columns: 1fr;
    padding-block: 60px;
    gap: 45px
  }

  .dark h2{
    font-size: clamp(2.2rem, 8vw, 3.8rem)
  }

  .dark .scene-heading{
    margin-bottom: 28px
  }

  .preview-top, .preview-bottom{
    padding-inline: 14px
  }

  .scene-heading h2 br{
    display: none
  }

  .quality-layout h2 br, .privacy-layout h2 br{
    display: none
  }
}

@media(prefers-reduced-motion:reduce) and (min-width:761px){
  .story-world{
    width: 100%;
    transform: none !important;
    will-change: auto
  }

  .story-rail{
    left: auto;
    right: 26px
  }

  .scene-inner, .story-chapter[data-side=right] .scene-inner{
    width: calc(100% - 110px);
    margin-inline: 40px 70px
  }

  .chapter-marker{
    left: auto;
    right: 15px;
    transform: translateY(-50%)
  }

  .chapter-marker>span{
    display: none
  }
}

.evidence-context{
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0
}

.evidence-context .eyebrow{
  margin-bottom: 13px
}

.evidence-context h3{
  font-size: 1.125rem;
  line-height: 1.55;
  max-width: 58ch
}

.evidence-demo>.product-shot{
  border-radius: 0
}

.evidence-demo-controls{
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius)
}

.evidence-demo-controls>p{
  font-size: .875rem;
  min-height: 1.7em
}

.evidence-demo-controls .button{
  margin-top: 14px
}

.evidence-chapter .scene-heading{
  align-items: center
}

@media(max-width:760px){
  .evidence-context, .evidence-demo-controls{
    padding: 18px
  }

  .evidence-context h3{
    font-size: 1rem
  }

  .evidence-demo-controls .button{
    padding-inline: 12px;
    gap: 8px;
    width: 100%;
    text-align: left
  }

  .evidence-chapter, .dark .evidence-chapter{
    min-height: auto
  }
}

/* Shared alignment: every two-column section uses the same reading grid. */
:root{
  --content-columns: minmax(0, 3fr) minmax(0, 2fr);
  --content-gap: clamp(32px, 4.4vw, 64px);
  --section-space: clamp(64px, 7vw, 104px);
}

.story-chapter,
.dark .story-chapter,
.evidence-chapter,
.dark .evidence-chapter{
  min-height: 0;
  padding-block: var(--section-space);
  align-items: flex-start;
}

.scene-heading,
.dark .scene-heading,
.evidence-chapter .scene-heading,
.explained-media,
.evidence-example,
.dark .evidence-example,
.pace-layout,
.quality-layout,
.privacy-layout{
  grid-template-columns: var(--content-columns);
  gap: var(--content-gap);
  align-items: start;
}

.scene-heading,
.dark .scene-heading{
  margin-bottom: 40px;
}

.scene-heading>p{
  max-width: 46ch;
}

.scene-heading h2{
  max-width: 18ch;
}

.scene-heading h2 br,
.quality-layout h2 br,
.privacy-layout h2 br{
  display: none;
}

.scene-heading em{
  display: block;
}

.scene-inner>.eyebrow{
  margin-bottom: 24px;
}

.reading-guide{
  padding-top: 0;
}

.reading-guide>.eyebrow{
  margin-top: 0;
  padding-block: 16px;
  border-bottom: 1px solid var(--line);
}

.reading-guide>div{
  margin-top: 24px;
}

.return-flow{
  padding-top: 0;
}

.return-flow li>span{
  top: 0;
}

.return-flow li:last-child{
  padding-bottom: 0;
}

.pace-example,
.pace-settings{
  padding: 28px;
}

.pace-settings{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.quality-list{
  padding-top: 0;
  border-top: 0;
}

.quality-list>h3{
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.quality-list dl{
  margin-top: 0;
}

.privacy-ledger article:first-child{
  padding-top: 0;
  border-top: 0;
}

.privacy-ledger article:last-child{
  padding-bottom: 0;
}

#models .scene-heading{
  grid-template-columns: 1fr;
  gap: 20px;
}

#models .scene-heading h2{
  max-width: 24ch;
}

#models .scene-heading>p{
  max-width: 72ch;
}

.model-options article,
.model-options article+article{
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 7;
  padding: 28px 0;
  border-left: 0;
}

.model-options dl{
  display: contents;
}

.model-options article>p{
  padding-bottom: 24px;
  max-width: none;
}

.model-options details{
  margin-top: 12px;
}

.model-options summary{
  padding-block: 12px;
}

.model-options h3{
  margin: 14px 0 12px;
}

.closing{
  grid-template-columns: var(--content-columns);
  gap: var(--content-gap);
  align-items: start;
}

.faq{
  padding-top: 45px;
}

.faq details[open] summary{
  color: var(--accent);
}

.dark .hero-art{
  max-width: none;
}

.dark .hero-copy{
  align-items: start;
}

.light .hero{
  align-items: start;
}

.light .hero-art{
  padding-top: 43px;
}

.margin-note{
  margin-left: 0;
}

@media (max-width: 1000px){
  :root{
    --content-columns: minmax(0, 1fr) minmax(0, 1fr);
    --content-gap: 28px;
  }

  .pace-example, .pace-settings{
    padding: 22px;
  }

  .sample-controls label{
    align-items: flex-start;
  }

  .sample-controls select{
    width: 100%;
  }

  .scene-heading h2{
    font-size: 2.5rem;
  }
}

@media (max-width: 760px){
  :root{
    --content-columns: minmax(0, 1fr);
    --section-space: 52px;
  }

  .story-world{
    transition: none;
  }

  .scene-heading, .dark .scene-heading{
    margin-bottom: 28px;
    gap: 20px;
  }

  .scene-heading h2{
    max-width: 20ch;
    font-size: clamp(2rem, 8vw, 3.25rem);
  }

  .scene-heading>p{
    max-width: none;
  }

  .scene-inner>.eyebrow{
    margin-bottom: 20px;
  }

  .model-options{
    display: block;
  }

  .model-options article, .model-options article+article{
    display: block;
    padding-block: 26px;
  }

  .model-options article+article{
    border-top: 1px solid var(--line);
  }

  .model-options dl{
    display: block;
    margin-top: 0;
  }

  .model-options article>p{
    padding-bottom: 20px;
  }

  .model-options h3{
    margin-block: 14px 12px;
  }

  .closing{
    padding-block: 52px;
    gap: 36px;
  }

  .faq{
    padding-top: 0;
  }

  .light .hero-art{
    padding-top: 12px;
  }
}

@media (prefers-reduced-motion: reduce){
  .story-world{
    transition: none;
  }
}

/* Give the major chapters a full-width title; keep quieter chapters compact. */
#how .scene-heading,
#evidence .scene-heading,
#models .scene-heading{
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

#how .scene-heading h2,
#evidence .scene-heading h2,
#models .scene-heading h2{
  max-width: none;
  font-size: clamp(2.5rem, 5.2vw, 5.25rem);
  text-wrap: pretty;
}

#how .scene-heading>p,
#evidence .scene-heading>p,
#models .scene-heading>p{
  max-width: 72ch;
}

#evidence .scene-heading em{
  display: inline;
}

@media (max-width: 760px){

  #how .scene-heading h2,
  #evidence .scene-heading h2,
  #models .scene-heading h2{
    font-size: clamp(2.25rem, 9vw, 3.6rem);
  }
}

/* Open sections: a chapter, a demonstration, then its reading notes. */
.layout-open .scene-heading,
.layout-open .explained-media,
.layout-open .evidence-example,
.layout-open .quality-layout,
.layout-open .privacy-layout{
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

.layout-open .scene-heading h2,
.layout-open .quality-layout h2,
.layout-open .privacy-layout h2{
  max-width: none;
  font-size: clamp(2.5rem, 5.2vw, 5.25rem);
}

.layout-open .scene-heading>p,
.layout-open .quality-layout>div>p,
.layout-open .privacy-layout>div>p{
  max-width: 72ch;
}

.layout-open .reading-guide{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 32px;
}

.layout-open .reading-guide>.eyebrow{
  grid-column: 1 / -1;
}

.layout-open .return-flow{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.layout-open .return-flow li{
  padding: 16px 0 0;
  border-top: 1px solid var(--accent);
}

.layout-open .return-flow li::before{
  display: none;
}

.layout-open .return-flow li>span{
  position: static;
  margin-bottom: 16px;
}

.layout-open .pace-layout{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.layout-open .quality-list dl{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.layout-open .quality-list dl>div{
  border-bottom: 0;
}

.layout-open .privacy-ledger{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.layout-open .privacy-ledger article,
.layout-open .privacy-ledger article:first-child{
  padding: 24px 0 0;
  border-top: 1px solid var(--line);
}

.layout-open .evidence-context h3{
  max-width: none;
}

.layout-open .evidence-demo-controls{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.layout-open .evidence-demo-controls .button{
  margin-top: 0;
  flex-shrink: 0;
}

/* Guided sections: keep each explanation together beside its artifact. */
.layout-guided .scene-inner{
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  column-gap: var(--content-gap);
  row-gap: 22px;
  align-items: start;
}

.layout-guided .scene-inner>.eyebrow{
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

.layout-guided .scene-inner>.scene-heading{
  grid-column: 1;
  grid-row: 2;
  display: block;
  margin: 0;
}

.layout-guided .scene-heading h2,
.layout-guided#how .scene-heading h2,
.layout-guided#evidence .scene-heading h2,
.layout-guided#models .scene-heading h2{
  font-size: clamp(2.4rem, 4vw, 4.2rem);
  max-width: none;
  line-height: 1.1;
}

.layout-guided .scene-heading>p{
  margin-top: 24px;
  max-width: none;
  font-size: 1rem;
}

.layout-guided .scene-inner> :is(.explained-media, .evidence-example, .pace-layout, .model-options){
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

.layout-guided .reading-guide>.eyebrow{
  padding-top: 16px;
}

.layout-guided .reading-guide>div{
  margin-top: 18px;
}

.layout-guided .quality-layout,
.layout-guided .privacy-layout{
  display: contents;
}

.layout-guided :is(.quality-layout, .privacy-layout)>div:first-child{
  grid-column: 1;
  grid-row: 2;
}

.layout-guided :is(.quality-layout, .privacy-layout)>div:last-child{
  grid-column: 2;
  grid-row: 1 / span 2;
}

.layout-guided :is(.quality-layout, .privacy-layout) h2{
  font-size: clamp(2.4rem, 4vw, 4.2rem);
}

.layout-guided .model-options{
  border: 0;
}

.layout-guided .model-options article,
.layout-guided .model-options article+article{
  display: block;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.layout-guided .model-options dl{
  display: block;
}

.layout-guided .model-options article>p{
  padding-bottom: 20px;
}

.layout-guided .return-flow{
  border-top: 1px solid var(--line);
  padding-top: 24px;
}

.layout-guided .pace-example, .layout-guided .pace-settings{
  padding: 24px;
}

@media (max-width: 1100px){
  .masthead{
    gap: 20px;
  }

  .page-nav{
    gap: 18px;
  }
}

@media (max-width: 900px){
  .page-nav{
    display: none;
  }

  .variants{
    margin-left: auto;
  }
}

@media (max-width: 760px){
  .masthead{
    gap: 8px;
    padding-inline: 16px;
  }

  .brand{
    gap: 7px;
  }

  .brand>span{
    font-size: 1rem;
  }

  .variants{
    gap: 0;
    padding: 2px;
  }

  .variants a{
    width: 29px;
    height: 34px;
  }

  .layout-open .reading-guide,
  .layout-open .return-flow,
  .layout-open .pace-layout,
  .layout-open .quality-list dl,
  .layout-open .privacy-ledger{
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .layout-open .reading-guide>div{
    margin-top: 0;
  }

  .layout-open .scene-heading h2,
  .layout-open .quality-layout h2,
  .layout-open .privacy-layout h2{
    font-size: clamp(2.25rem, 9vw, 3.6rem);
  }

  .layout-open .evidence-demo-controls{
    display: block;
  }

  .layout-open .evidence-demo-controls .button{
    margin-top: 16px;
  }

  .layout-guided .scene-inner{
    display: block;
  }

  .layout-guided .scene-inner>.eyebrow{
    margin-bottom: 20px;
  }

  .layout-guided .scene-inner>.scene-heading{
    margin-bottom: 28px;
  }

  .layout-guided .scene-inner> :is(.explained-media, .evidence-example, .pace-layout, .model-options){
    display: grid;
  }

  .layout-guided .quality-layout,
  .layout-guided .privacy-layout{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .layout-guided :is(.quality-layout, .privacy-layout)>div{
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

@media (max-width: 359px){.masthead{
    padding-inline: 10px;
  flex-wrap: wrap
}

  .brand img{
    width: 28px;
    height: 28px;
  }

.variants a{
    width: 26px;
  flex: 1
}

  .brand-sub{
    font-size: .7rem;
  }
}

.layout-guided .scene-inner{
  grid-template-rows: min-content 1fr;
}

/* E/F: let the label column size to its longest label, with shared row alignment. */
.light .hero-art{
  padding-top: 0;
  margin-top: -8px;
}

@media (min-width: 1000px){
  .layout-open .model-options article{
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 24px;
  }

  .layout-open .model-options article> :is(.option-label, h3, p, details){
    grid-column: 1 / -1;
  }

  .layout-open .model-options dl>div,
  .layout-guided .model-options dl>div{
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    column-gap: inherit;
    align-items: baseline;
  }

  .layout-guided .model-options dl{
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 24px;
  }

  .layout-open .model-options dt,
  .layout-guided .model-options dt{
    white-space: nowrap;
  }

  .layout-open .model-options dd,
  .layout-guided .model-options dd{
    min-width: 0;
  }
}

/* E uses crisp containers and puts walkthrough controls directly above the image. */
body.light{
  --radius: 1px;
}

.light :is(.preview, .variants, .variants a, .sample-controls select){
  border-radius: var(--radius);
}

.light .preview-top{
  padding-block: 10px;
  flex-wrap: wrap;
}

.light .preview-top .play-control{
  margin: 0 0 0 auto;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .055em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--on-accent);
  border-color: transparent;
}

.light .preview-top .play-control:hover{
  background: var(--accent);
}

.light .hero-shot::after{
  content: '';
  position: absolute;
  inset: 55% 0 0;
  background: linear-gradient(transparent, #000c);
  pointer-events: none;
}

.light .hero-shot [data-scene-caption]{
  position: absolute;
  z-index: 1;
  left: 20px;
  right: 20px;
  bottom: 16px;
  color: #fff;
  font-size: clamp(.875rem, 1.25vw, 1.125rem);
  line-height: 1.4;
  font-weight: 600;
  text-shadow: 0 1px 5px #000;
}

@media (max-width: 760px){
  .light .hero-shot [data-scene-caption]{
    left: 14px;
    right: 14px;
    bottom: 12px;
  }
}

/* F keeps its original type and card treatment in the horizontal sections. */
.dark #how .scene-heading h2,
.dark #evidence .scene-heading h2,
.dark #pace .scene-heading h2,
.dark #models .scene-heading h2{
  font-size: clamp(2.4rem, 4vw, 4.2rem);
  line-height: 1.1;
}

.dark .layout-open .scene-heading{
  gap: 24px;
}

.dark .layout-open .scene-heading>p{
  font-size: 1rem;
}

.dark .layout-open .pace-example,
.dark .layout-open .pace-settings{
  padding: 24px;
}

:is(.light, .dark) .model-options{
  border: 0;
}

:is(.light, .dark) .model-options article,
:is(.light, .dark) .model-options article+article{
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

:is(.light, .dark) .model-options article>p{
  padding-bottom: 20px;
}

@media (max-width: 760px){
  :is(.light, .dark) .model-options article+article{
    margin-top: 28px;
  }
}

/* Match E's explanatory items to the source-return steps in the next chapter. */
.light .reading-guide{
  border-top: 0;
  row-gap: 20px;
}

.light .reading-guide>.eyebrow{
  margin: 0;
  padding: 0;
  border: 0;
}

.light .reading-guide>div{
  display: block;
  margin-top: 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--accent);
}

.light .reading-guide>div>span{
  width: 28px;
  height: 28px;
  margin-bottom: 16px;
  border-color: var(--accent);
  background: var(--paper);
}

.light .reading-guide strong{
  margin-bottom: 7px;
}

/* Keep the Git example caption attached to its image in E. */
.light #how .explained-media figure>.product-shot{
  border-radius: var(--radius) var(--radius) 0 0;
}

.light #how figcaption{
  margin-top: 0;
  max-width: none;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
}

@media (max-width: 760px){
  .light #how figcaption{
    padding: 18px;
  }
}

/* Persistent selection-style emphasis in E. */
.light .text-highlight{
  background: var(--accent);
  color: var(--on-accent);
  padding-inline: .045em;
  margin-inline-start: -.045em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

:is(.light, .dark) .nav-cta{
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid transparent;
  padding: 12px 16px;
  min-height: 44px;
  white-space: nowrap;
}

.light #evidence .scene-heading{
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 22px 40px;
}

.light #evidence .scene-heading h2{
  grid-column: 1 / -1;
}

.light #evidence .scene-heading>p{
  grid-column: 1;
  max-width: 72ch;
  align-self: center
}

.light #evidence .evidence-reply{
  grid-column: 2;
  align-self: center;
  justify-self: end;
  font-family: inherit;
  font-style: normal;
  font-size: clamp(2.5rem, 5.2vw, 5.25rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.055em;
  color: var(--on-accent);
  white-space: nowrap;
}

/* F's first chapters use a centered demonstration with equal-width notes below. */
.dark :is(#how, #evidence) .scene-heading{
  text-align: center;
}

.dark :is(#how, #evidence) .scene-heading>p{
  margin-inline: auto;
}

.dark :is(#how, #evidence) .scene-inner>.eyebrow{
  justify-content: center;
}

.dark :is(#how, #evidence) .scene-inner> :is(.explained-media, .evidence-example){
  gap: 32px;
}

.dark :is(#how, #evidence) figure{
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
}

.dark #how .reading-guide{
  border-top: 0;
  row-gap: 20px;
}

.dark #how .reading-guide>.eyebrow{
  padding: 0;
  border: 0;
}

.dark #how .reading-guide>div{
  margin: 0;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.dark #evidence .return-flow li{
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

@media (max-width: 760px){
  .light #evidence .scene-heading{
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .light #evidence .evidence-reply{
    grid-column: 1;
    font-size: clamp(2.25rem, 9vw, 3.6rem);
  }

  .dark :is(#how, #evidence) .scene-heading{
    text-align: left;
  }

  .dark :is(#how, #evidence) .scene-inner>.eyebrow{
    justify-content: flex-start;
  }
}

/* E/G retain the selected tab fill, without the green line above it. */
.light .scene-nav [aria-pressed=true]::before{
  display: none;
}

/* The last three items share one visual treatment in the two new F experiments. */
.dark #how .reading-guide>div{
  display: block;
}

.dark #how .reading-guide>div>span{
  width: 28px;
  height: 28px;
  border-color: var(--accent);
  margin-bottom: 16px;
  background: var(--surface);
}

.dark #how .reading-guide strong{
  color: var(--ink);
  margin-bottom: 7px;
}

.dark #evidence .return-flow li>span{
  background: var(--surface);
}

.dark :is(#how, #evidence) .scene-inner>.eyebrow{
  justify-content: flex-start;
}

.dark :is(#how, #evidence) .scene-heading{
  text-align: left;
}

.dark :is(#how, #evidence) .scene-heading>p{
  margin-inline: 0;
}

.dark :is(#how, #evidence) figure{
  max-width: none;
}

/* A keeps the evidence introduction in the same vertical rhythm as Pace. */
.dark #evidence .scene-heading{
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.dark #evidence .scene-heading em{
  display: inline;
}

/* B: equally sized copy and demonstration panels, with notes across both below. */
@media (min-width: 1001px){
  .dark #how .scene-inner{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px var(--content-gap);
    grid-template-rows: min-content 1fr auto;
    align-items: start;
  }

  .dark #how .scene-inner>.eyebrow{
    grid-column: 1;
    grid-row: 1;
    margin: 0;
  }

  .dark #how .scene-heading{
    display: block;
    grid-column: 1;
    grid-row: 2;
    margin: 0;
  }

  .dark #how .scene-heading>p{
    margin-top: 28px;
    font-size: 1.125rem;
  }

  .dark #how .scene-inner> :is(.explained-media, .evidence-example){
    display: contents;
  }

  .dark #how figure{
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .dark #how :is(.reading-guide, .return-flow){
    grid-column: 1 / -1;
    margin-top: 8px;
  }

}

@media (max-width: 760px){
  .dark #evidence .scene-heading{
    gap: 24px;
  }

  .variants a{
    width: 25px;
  }
}

@media (max-width: 359px){

  .variants{
    width: 100%;
    justify-content: space-between;
  }
}

/* G sweeps the background and contrasting text color together, like a selection. */
@property --highlight-sweep{
  syntax: '<percentage>';
  inherits: false;
  initial-value: 100%;
}

.light .text-highlight{
  --highlight-sweep: 100%;
  color: transparent;
  background: linear-gradient(to right, var(--on-accent) 0 var(--highlight-sweep), var(--ink) var(--highlight-sweep) 100%),
    linear-gradient(to right, var(--accent) 0 var(--highlight-sweep), transparent var(--highlight-sweep) 100%);
  -webkit-background-clip: text, border-box;
  background-clip: text, border-box;
}

.light .text-highlight.is-highlight-pending{
  --highlight-sweep: 0%;
}

.light .text-highlight.is-highlight-revealed{
  animation: highlight-reveal 950ms cubic-bezier(.22, .65, .3, 1) both;
}

.light #evidence .evidence-reply{
  color: transparent;
}

@keyframes highlight-reveal{
  from{
    --highlight-sweep: 0%;
  }

  to{
    --highlight-sweep: 100%;
  }
}

@media (prefers-reduced-motion: reduce){
  .light .text-highlight.is-highlight-revealed{
    animation: none;
  }
}

/* A uses a left-to-right italic reveal for dark-theme emphasis. The upright
   text remains underneath so the heading never shifts as the italic face arrives. */
.dark .dark-emphasis{
  position: relative;
  display: inline-block;
  color: var(--accent);
  font-family: inherit;
  font-style: normal;
}

.dark .dark-emphasis-italic{
  position: absolute;
  inset: 0;
  color: var(--accent);
  font-style: italic;
  clip-path: inset(0);
}

.dark .dark-emphasis.is-highlight-pending .dark-emphasis-italic{
  clip-path: inset(0 100% 0 0);
}

.dark .dark-emphasis.is-highlight-revealed .dark-emphasis-italic{
  animation: italic-reveal 850ms cubic-bezier(.22, .65, .3, 1) both;
}

@keyframes italic-reveal{
  from{
    clip-path: inset(0 100% 0 0);
  }

  to{
    clip-path: inset(0);
  }
}

@media (prefers-reduced-motion: reduce){
  .dark .dark-emphasis.is-highlight-revealed .dark-emphasis-italic{
    animation: none;
  }
}

/* Lift the complete preview card, including its header and scene controls. */
.light .preview{
  box-shadow: 0 10px 24px #1633281a, 0 28px 64px -16px #16332833;
}

/* Final header and closing refinements shared by the retained directions. */
.brand-sub sup{
  margin-left: .08em;
  font-size: .62em;
  line-height: 0;
  vertical-align: super;
}

@media (min-width: 761px){
  /* Indent with padding, not an offset: an offset moves the box itself and
     eats the gap the layout reserved against the viewport edge. */
  .dark .hero-description{
    width: calc(100% + 11px);
    max-width: 542px;
    padding-left: 32px;
  }

  .dark .hero-description .lede,
  .dark .hero-description .hero-detail{
    max-width: 48ch;
  }

  .dark .hero-description .actions .button{
    padding-inline: 28px;
  }
}

.support-copy{
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding: 22px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: none;
}

.support-copy .support-kicker{
  display: block;
  color: var(--accent);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .09em;
  line-height: 1.4;
  text-transform: uppercase;
}

.support-copy h3{
  font-size: 1.3rem;
}

.support-copy>p{
  margin: 0;
}

.support-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

.sponsor-button{
  gap: 10px;
}

.sponsor-icon{
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

@media (hover: hover){
  .light .scene-nav button{
    transition: background-color .18s ease, color .18s ease;
  }

  .light .scene-nav button:hover:not([aria-pressed="true"]){
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--ink);
  }
}

.light .scene-nav button:focus-visible:not([aria-pressed="true"]){
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.auto-quiz-demo .auto-quiz-overlay{
  animation: auto-quiz-arrive 7s cubic-bezier(.22, .65, .3, 1) infinite;
  animation-play-state: paused;
  transform-origin: 50% 50%;
}

@keyframes auto-quiz-arrive{
  0%, 30%{
    opacity: 0;
    transform: scale(.985);
  }

  40%, 88%{
    opacity: 1;
    transform: scale(1);
  }

  100%{
    opacity: 0;
    transform: scale(1);
  }
}

/*
 * Started once the demo is first seen, not tied to `.is-reached`.
 *
 * That class is recomputed on every scroll frame against a fixed viewport
 * threshold, which is right where a reader's scroll position naturally
 * settles on this section. A few pixels of trackpad jitter flipped it on and
 * off repeatedly, and `animation-play-state: paused` freezes mid-frame rather
 * than resetting -- so the loop stuttered at random points instead of
 * playing. An IntersectionObserver trigger that never un-triggers keeps the
 * loop running once it has started, the same one-way reveal already used for
 * the text highlights below.
 */
.auto-quiz-demo.is-active .auto-quiz-overlay{
  animation-play-state: running;
}

@media (prefers-reduced-motion: reduce){
  .auto-quiz-demo .auto-quiz-overlay{
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.footer-links{
  display: flex;
  align-items: center;
  gap: 24px;
}

.footer-links a{
  font-size: .875rem;
}

@media (max-width: 760px){

  .support-copy{
    padding: 20px;
  }

  .footer-links{
    width: 100%;
    justify-content: space-between;
    gap: 16px;
  }
}
/*
 * Product captures are cropped to the YouTube player region when they are
 * exported (see README, "Assets and release boundary"), so the page no longer
 * re-crops them. The rules being reset here scaled every capture to 131% and
 * pushed it up and left, which was an attempt to hide the YouTube sidebar,
 * header and comments that the uncropped 2880x1620 full-page captures carried.
 * It hid some of that chrome and cut into the quiz card at the same time, and
 * every capture whose card sat at a different height then needed its own
 * correction on top. Cropping at export removes the whole class of problem:
 * each file is already 16/9 and already centred on the quiz overlay, so the
 * page only has to fill the box.
 */
.product-shot img,
.dark .preview .product-shot img,
.hero-shot[data-scene-name="answer"] img,
.auto-quiz-demo .auto-quiz-overlay{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* The backup page's hero cropped its capture to a 2.65 letterbox, which cuts
   the top and bottom off a quiz card that now fills the frame. */
.dark .preview .product-shot{
  aspect-ratio: 16/9;
}

/*
 * The FAQ column starts level with the closing heading rather than with the
 * eyebrow above it. 71px is what sits above the h2 in the other column: the
 * eyebrow's 25px lead, its 21px line box, and its 25px bottom margin. The
 * second term is an optical correction -- a 57px heading sits far lower inside
 * its own line box than a 21px one does, so matching the boxes alone still
 * reads as misaligned. It tracks the same clamp the h2 uses.
 */
.closing > .faq{
  padding-top: calc(71px + .15 * clamp(2.25rem, 4vw, 4.1rem));
}

/*
 * Hovering a row in either setup card tints the full width of that card, not
 * just the text column. The row carries the card's own side padding as its
 * own, and cancels it again with a matching negative margin, so the tint
 * reaches both edges while the text stays where it was. The divider keeps its
 * original inset, which is why it moves to a pseudo-element here.
 */
/* How far a row has to reach on each side to meet the card's inner edge. It is
   the card's own side padding: 0 where the card is a bare grid column, 24px
   where it is a bordered box. */
.model-options article{
  --card-bleed: 0px;
}

:is(.light, .dark) .model-options article,
.layout-guided .model-options article{
  --card-bleed: 24px;
}

.model-options dl > div{
  position: relative;
  border-top: 0;
  margin-inline: calc(-1 * var(--card-bleed));
  padding-inline: var(--card-bleed);
  transition: background-color .15s ease;
}

.model-options dl > div::before{
  content: '';
  position: absolute;
  top: 0;
  left: var(--card-bleed);
  right: var(--card-bleed);
  border-top: 1px solid var(--line);
}

.model-options dl > div:hover{
  background: var(--tint);
}

/* The FAQ questions take the same tint as a setup-card row. This list has no
   side padding, so a row already spans its whole column and the tint lands
   flush with the dividers above and below it, no bleed needed. The tint is on
   the summary rather than the whole details: an open answer is part of the
   item, but it is not the thing the pointer is on. */
.faq summary{
  /* The global summary:hover also changes colour, and an untransitioned colour
     against a fading background reads as a flicker on the way in. */
  transition: background-color .15s ease, color .15s ease;
}

/* Light page only. Hovering lights the row; opening lights the whole item,
   answer included, so what is marked is the block you are reading. The dark
   page leaves its FAQ untinted and keeps the accent colour on hover as its
   only affordance. */
.light .faq summary:hover{
  background: var(--tint);
}

.light .faq details[open]{
  background: var(--tint);
  transition: background-color .15s ease;
}

/* A touch device reports :hover on tap and then keeps it until the next tap,
   which would leave a row lit with nothing pointing at it. The open tint is on
   the details rather than the summary, so cancelling the hover here cannot
   take it with it. This selector carries `.light` to stay heavier than the
   rule it is cancelling. */
@media (hover: none){
  .model-options dl > div:hover,
  .light .faq summary:hover{
    background: none;
  }
}

@media (max-width: 760px){
  .closing > .faq{
    padding-top: 0;
  }
}

/*
 * A phone renders these captures about 330px wide. At 16/9 that puts the quiz
 * card itself at roughly 190px across, which is below the size its own body
 * text survives. The captures are centred on the card with dead video either
 * side of it, so narrowing the frame to 4/3 and letting `object-fit: cover`
 * take the difference off the left and right loses nothing but that dead space
 * and returns about a third more width to the part worth reading.
 */
@media (max-width: 760px){
  .product-shot,
  .dark .preview .product-shot{
    aspect-ratio: 4/3;
  }
}

/* Why it works: a figure plate. These are the page's only charts, so the
   section reads like the results page of a paper (ruled head, numbered
   figures, footnoted sources) rather than another screenshot with notes.
   Chart colours are an emphasis pair, checked with the dataviz validator:
   the soft grey clears 3:1 on paper and stays apart from the accent under
   colour-blind simulation, in both themes. */
.layout-research{
  --chart-strong: var(--accent);
  --chart-soft: #7f887c
}

.dark .layout-research{
  --chart-soft: #6e7a72
}

.research-head{
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  gap: var(--content-gap);
  align-items: end;
  padding-bottom: 34px;
  border-bottom: 2px solid var(--ink)
}

.research-head h2,
.dark .research-head h2{
  margin: 0;
  max-width: 11ch;
  font-size: clamp(2.5rem, 5.2vw, 5.25rem)
}

.research-head p{
  margin: 0;
  max-width: 52ch;
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.7
}

.research-head p+p{
  margin-top: 16px
}

.research-head .research-scope{
  padding-left: 14px;
  border-left: 2px solid var(--accent);
  font-size: .875rem;
  line-height: 1.6
}

.research-plate{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr))
}

/* Heading, chart, caption and the In Quizmark line share rows across both
   figures, so the captions start level however tall each chart is. */
.research-figure{
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 0;
  min-width: 0;
  margin: 0;
  padding: 34px 40px 32px 0
}

.research-figure>.dumbbell{
  display: flex;
  flex-direction: column
}

.dumbbell>.dumbbell-plot{
  margin-block: auto
}

.research-figure+.research-figure{
  padding: 34px 0 32px 40px;
  border-left: 1px solid var(--line)
}

.figure-head{
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 22px
}

.figure-number{
  flex: none;
  color: var(--accent);
  font-family: Barlow Condensed, Public Sans, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase
}

.figure-head h3{
  margin: 0;
  font-size: 1.2rem
}

.research-figure figcaption{
  gap: 8px;
  margin: 24px 0 20px;
  max-width: none
}

.research-figure figcaption strong{
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -.01em
}

.in-quizmark{
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: .875rem;
  line-height: 1.55
}

.in-quizmark>span{
  flex: none;
  color: var(--accent);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase
}

.research-finding{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--content-gap);
  align-items: baseline;
  padding: 30px 32px;
  border-top: 1px solid var(--line);
  border-bottom: 2px solid var(--ink);
  background: var(--tint)
}

.finding-kicker{
  color: var(--muted);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase
}

.research-finding>p:not(.in-quizmark){
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.25rem, 1.9vw, 1.65rem);
  line-height: 1.35;
  letter-spacing: -.025em
}

.research-finding .in-quizmark{
  margin: 0;
  padding: 0;
  border: 0
}

.research-cite{
  margin-left: 2px;
  font-size: .68em;
  line-height: 0
}

.research-cite a{
  padding: 0 2px;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none
}

.research-cite a:hover,
.research-cite a:focus-visible{
  text-decoration: underline
}

.research-sources{
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: source;
  columns: 2;
  column-gap: var(--content-gap);
  color: var(--muted);
  font-size: .8125rem;
  line-height: 1.55
}

.research-sources li{
  position: relative;
  margin-bottom: 10px;
  padding-left: 24px;
  break-inside: avoid;
  counter-increment: source;
  scroll-margin-top: 120px
}

.research-sources li::before{
  content: counter(source);
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums
}

.research-sources li:target{
  color: var(--ink)
}

.research-sources a{
  color: inherit;
  overflow-wrap: anywhere;
  text-underline-offset: 3px
}

/* Chart chrome shared by both figures. */
.chart-legend{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: .8125rem
}

.chart-legend li{
  display: flex;
  align-items: center;
  gap: 8px
}

.chart-key.dot{
  width: 10px;
  height: 10px;
  border-radius: 50%
}

.chart-key.line{
  width: 16px;
  height: 2px;
  border-radius: 1px
}

.chart-key.strong{
  background: var(--chart-strong)
}

.chart-key.soft{
  background: var(--chart-soft)
}

.chart-key.bar{
  width: 14px;
  height: 8px;
  border-radius: 2px
}

.chart-key.neutral{
  border: 1px solid var(--ink);
  background: transparent
}

.chart-grid,
.chart-grid span{
  position: absolute;
  pointer-events: none
}

.chart-grid{
  inset: 0
}

.chart-grid i{
  font-style: normal
}

.chart-dot{
  position: absolute;
  z-index: 2;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--chart-soft);
  box-shadow: 0 0 0 2px var(--paper);
  transform: translate(-50%, -50%)
}

.chart-dot.strong{
  background: var(--chart-strong)
}

.chart-dot[tabindex]{
  cursor: default
}

/* The hit area is larger than the painted dot. */
.chart-dot[tabindex]::before{
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%
}

.chart-dot.is-active{
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--chart-soft)
}

.chart-dot.strong.is-active{
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--chart-strong)
}

.chart-dot:focus-visible,
.line-hit:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 4px
}

.chart-tip{
  position: absolute;
  z-index: 5;
  bottom: calc(100% + 8px);
  display: grid;
  gap: 2px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: 0 6px 20px rgb(0 0 0 / .12);
  color: var(--ink);
  width: max-content;
  max-width: 220px;
  font-size: .75rem;
  line-height: 1.35;
  transform: translateX(-50%);
  pointer-events: none
}

.chart-tip-title{
  margin-bottom: 2px;
  color: var(--muted)
}

.chart-tip-row{
  display: grid;
  grid-template-columns: 16px auto minmax(0, 1fr);
  align-items: baseline;
  gap: 8px
}

.chart-tip strong{
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.35;
  font-variant-numeric: tabular-nums
}

/* The key mirrors the chart's mark (dot or bar) and is centred on the
   number's line, not on the row: a long label wraps and makes the row taller. */
.chart-tip .chart-key{
  --key-h: 2px;
  align-self: start;
  justify-self: center;
  margin-top: calc((.9375rem * 1.35 - var(--key-h)) / 2)
}

.chart-tip .chart-key.dot{
  --key-h: 10px
}

.chart-tip .chart-key.bar{
  --key-h: 8px
}

/* Fig. 1: one row per measure, reviewed and quizzed on a shared 0-100 axis. */
.dumbbell-plot{
  display: grid;
  gap: 2px
}

.dumbbell-row{
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  gap: 18px;
  align-items: center
}

.dumbbell-label{
  color: var(--ink);
  font-size: .875rem;
  line-height: 1.35
}

.dumbbell-track{
  position: relative;
  height: 60px
}

.dumbbell-track .chart-grid span{
  top: 0;
  bottom: 0;
  left: min(calc(var(--v) * 1%), calc(100% - 1px));
  width: 1px;
  background: var(--line)
}

.dumbbell-track .chart-grid i{
  display: none
}

.dumbbell-link{
  position: absolute;
  top: 50%;
  left: calc(var(--from) * 1%);
  width: calc((var(--to) - var(--from)) * 1%);
  height: 2px;
  background: var(--chart-soft);
  opacity: .55;
  transform: translateY(-50%)
}

.dumbbell-track .chart-dot{
  top: 50%;
  left: calc(var(--v) * 1%)
}

.dumbbell-track .chart-dot b{
  position: absolute;
  top: 50%;
  color: var(--muted);
  font-size: .8125rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform: translateY(-50%)
}

.dumbbell-track .chart-dot.soft b{
  right: calc(100% + 9px)
}

.dumbbell-track .chart-dot.strong b{
  left: calc(100% + 9px);
  color: var(--ink);
  font-weight: 600
}

.dumbbell-axis .dumbbell-track{
  height: 20px
}

.dumbbell-axis i{
  position: absolute;
  left: calc(var(--v) * 1%);
  color: var(--muted);
  font-size: .6875rem;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  transform: translateX(-50%)
}

.dumbbell-axis i:first-child{
  transform: none
}

.dumbbell-axis i:last-child{
  transform: translateX(-100%)
}

/* Fig. 2: two outcomes from the same online-lecture experiments. Series are
   written beside every bar so the comparison never depends on colour alone. */
.research-figure>.outcome-chart{
  display: flex;
  flex-direction: column
}

.outcome-plot{
  margin-block: auto
}

.outcome-group h4{
  margin: 0 0 8px;
  color: var(--ink);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.35
}

.outcome-group+.outcome-group{
  margin-top: 18px
}

.outcome-series,
.outcome-axis{
  display: grid;
  grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr);
  gap: 16px;
  align-items: center
}

.outcome-series-label{
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.25
}

.outcome-track{
  position: relative;
  height: 26px;
  margin-right: 36px
}

.outcome-track .chart-grid span{
  top: 0;
  bottom: 0;
  left: min(calc(var(--v) * 1%), calc(100% - 1px));
  width: 1px;
  background: var(--line)
}

.outcome-track .chart-grid i{
  display: none
}

/* Every bar is the same 10px box with a 1px outline. The filled bars take an
   outline in their own colour, so only the unfilled one reads as outlined, and
   all three stay the same height. */
.outcome-fill{
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 0;
  width: calc(var(--v) * 1%);
  height: 10px;
  border: 1px solid var(--chart-soft);
  border-radius: 1px;
  background: var(--chart-soft);
  transform: translateY(-50%)
}

.outcome-fill.strong{
  border-color: var(--chart-strong);
  background: var(--chart-strong)
}

.outcome-fill.neutral{
  border-color: var(--ink);
  background: transparent
}

.outcome-fill[tabindex]{
  cursor: default
}

.outcome-fill[tabindex]::before{
  content: '';
  position: absolute;
  inset: -7px 0
}

.outcome-fill:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 4px
}

.outcome-fill.is-active{
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--chart-soft)
}

.outcome-fill.strong.is-active{
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--chart-strong)
}

.outcome-fill.neutral.is-active{
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink)
}

.outcome-fill b{
  position: absolute;
  top: 50%;
  left: calc(100% + 8px);
  color: var(--ink);
  font-size: .8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform: translateY(-50%)
}

.outcome-axis{
  margin-top: 8px
}

.outcome-axis>div{
  position: relative;
  height: 18px;
  margin-right: 36px
}

.outcome-axis i{
  position: absolute;
  left: calc(var(--v) * 1%);
  color: var(--muted);
  font-size: .6875rem;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  transform: translateX(-50%)
}

.outcome-axis i:first-child{
  transform: none
}

.outcome-axis i:last-child{
  transform: translateX(-100%)
}

.figure-data{
  margin-top: 18px;
  color: var(--muted);
  font-size: .8125rem
}

.figure-data summary{
  width: max-content;
  color: var(--ink);
  cursor: pointer
}

.figure-data table{
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums
}

.figure-data th,
.figure-data td{
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 500;
  text-align: left
}

.figure-data td{
  padding-left: 12px;
  text-align: right
}

.figure-data thead th{
  color: var(--muted);
  font-size: .75rem
}

.figure-data thead th+th{
  text-align: right
}

.figure-data tbody th{
  color: var(--ink)
}

@media (max-width: 1000px){
  .research-head,
  .research-plate,
  .research-finding{
    grid-template-columns: minmax(0, 1fr)
  }

  .research-head{
    gap: 22px
  }

  .research-figure,
  .research-figure+.research-figure{
    padding: 30px 0
  }

  .research-figure+.research-figure{
    border-left: 0;
    border-top: 1px solid var(--line)
  }

  .research-finding{
    gap: 14px;
    padding: 24px 20px
  }
}

@media (max-width: 760px){
  .research-head h2,
  .dark .research-head h2{
    font-size: clamp(2.25rem, 9vw, 3.6rem)
  }

  .research-head p{
    font-size: 1rem
  }

  .dumbbell-row{
    grid-template-columns: minmax(0, 1fr);
    gap: 0
  }

  .dumbbell-label{
    padding-top: 12px
  }

  .dumbbell-track{
    height: 48px;
    margin-inline: 4px
  }

  .dumbbell-axis .dumbbell-label{
    display: none
  }

  .outcome-series,
  .outcome-axis{
    grid-template-columns: minmax(0, 7.25rem) minmax(0, 1fr);
    gap: 12px
  }

  .outcome-axis i:nth-child(even){
    display: none
  }

  .research-sources{
    columns: 1
  }
}