:root {
  --anchor-offset: 2rem;
  --stage-offset: 4rem;
}
.reading-progress {
  position: fixed;
  z-index: 30;
  inset: 0 auto auto 0;
  width: 100dvw;
  max-width: 100%;
  height: 3px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  pointer-events: none;
}
.reading-progress__fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--hero-alert);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-fast) linear;
}
@media (prefers-reduced-motion: reduce) {
.reading-progress__fill {
    transition: none;
  }
}
.story-hero {
  position: relative;
  padding-bottom: clamp(2.5rem, 6vw, 3.5rem);
  background: var(--paper);
}
@media (min-width: 768px) {
.story-hero {
    min-height: 100svh;
    height: 100svh;

    overflow: hidden;
  }
}
.hero-collage {
  display: block;
}
@media (min-width: 768px) {
.hero-collage {
    display: grid;
    height: 100%;
    grid-template-columns: repeat(14, 1fr);
    grid-template-rows: repeat(6, 1fr);
    grid-auto-flow: row dense;
    border-top: 1px solid var(--rule);
    border-left: 1px solid var(--rule);
  }
.hero-collage__wall {
    display: contents;
  }
.hero-collage__cell--tile {
    aspect-ratio: auto;
    align-self: stretch;
    justify-self: stretch;
  }
}
.hero-collage__cell {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.hero-collage__cell--tile {
  aspect-ratio: 130 / 132;
}
.hero-collage__cell--title {
  border: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  min-height: 220px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .75rem;
  background: var(--paper);
}
@media (min-width: 768px) {
.hero-collage__cell--title {

    grid-column: span 6;

    grid-row: 2 / span 3;
    min-height: 0;

    align-self: stretch;
    justify-self: stretch;
  }
}
.hero-collage__cell--title .eyebrow {
  margin: 0;

  color: var(--hero-alert);
  font-weight: 600;
  font-size: clamp(.76rem, .9vw, .95rem);
}
.hero-collage__cell--title h1 {
  margin: 0;
  color: var(--ink);
  font-weight: 900;

  font-size: clamp(1.85rem, 4vw, 3.4rem);
  line-height: 1.16;
  letter-spacing: -.01em;
  word-break: keep-all;
  text-wrap: wrap;
}
.hero-collage__tagline {
  width: fit-content;
  max-width: 100%;
  margin: .15rem 0 0;
  color: color-mix(in srgb, var(--ink) 76%, transparent);
  font-family: var(--font-sans);
  font-size: clamp(.82rem, 1.15vw, 1.05rem);
  font-weight: 650;
  line-height: 1.45;
  letter-spacing: .03em;
}
.hero-collage__cell--tile {
  position: relative;
  background-color: var(--paper);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-collage__data-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .35rem;
  padding: clamp(.65rem, 1.4vw, 1.1rem);
  text-align: center;
  color: #fff;
  background: var(--hero-alert);
}
.hero-collage__data-card .hero-collage__data-number {
  font-size: clamp(1.5rem, 3vw, 2.05rem);
}
.hero-collage__data-card .hero-collage__data-number--long {
  font-size: clamp(1.2rem, 2.35vw, 1.65rem);
  letter-spacing: -.025em;
}
.hero-collage__data-card .hero-collage__data-desc {
  font-size: clamp(.84rem, 1.35vw, 1rem);
}
.hero-collage__cell.reveal-cell {
  overflow: visible;
}
.hero-collage__cell.reveal-cell.is-active {
  z-index: 8;
}
.hero-collage__reveal-window {
  position: absolute;
  inset: 0 auto 0 0;
  width: 300%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}
.hero-collage__cell.reveal-cell[data-reveal-align="start"] .hero-collage__reveal-window {
  left: 0;
}
.hero-collage__cell.reveal-cell[data-reveal-align="center"] .hero-collage__reveal-window {
  left: -100%;
}
.hero-collage__cell.reveal-cell[data-reveal-align="end"] .hero-collage__reveal-window {
  left: -200%;
}
.hero-collage__cell.reveal-cell .hero-collage__data-card {
  width: 100%;
  height: 100%;
}
.hero-collage__cell.reveal-cell.is-active .hero-collage__reveal-window {
  pointer-events: auto;
}
@media (min-width: 768px) {
.hero-collage__cell[data-hero-card-slot="1"] {
    grid-column: 3 / span 1;
    grid-row: 1 / span 1;
  }
.hero-collage__cell[data-hero-card-slot="2"] {
    grid-column: 9 / span 1;
    grid-row: 1 / span 1;
  }
.hero-collage__cell[data-hero-card-slot="3"] {
    grid-column: 12 / span 1;
    grid-row: 2 / span 1;
  }
.hero-collage__cell[data-hero-card-slot="4"] {
    grid-column: 8 / span 1;
    grid-row: 3 / span 1;
  }
.hero-collage__cell[data-hero-card-slot="5"] {
    grid-column: 13 / span 1;
    grid-row: 3 / span 1;
  }
.hero-collage__cell[data-hero-card-slot="6"] {
    grid-column: 10 / span 1;
    grid-row: 4 / span 1;
  }
.hero-collage__cell[data-hero-card-slot="7"] {
    grid-column: 2 / span 1;
    grid-row: 5 / span 1;
  }
.hero-collage__cell[data-hero-card-slot="8"] {
    grid-column: 8 / span 1;
    grid-row: 5 / span 1;
  }
.hero-collage__cell[data-hero-card-slot="9"] {
    grid-column: 5 / span 1;
    grid-row: 6 / span 1;
  }
.hero-collage__cell[data-hero-card-slot="10"] {
    grid-column: 11 / span 1;
    grid-row: 6 / span 1;
  }
}
.hero-collage__data-number {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.15;

  font-variant-numeric: tabular-nums;
}
.hero-collage__data-desc {
  margin: 0;
  font-size: .9rem;
  line-height: 1.35;

  text-wrap: balance;
}
@media (max-width: 767px) {
.hero-collage__cell--title {
    padding: 1.5rem 1.25rem;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
.hero-collage__wall {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: calc((100vw - 1px) / 3 * 132 / 130);
    height: calc((100vw - 1px) / 3 * 132 / 130 * 3);
    max-height: none;
    align-content: start;
    overflow: hidden;
    border-top: 1px solid var(--rule);
    border-left: 1px solid var(--rule);
  }
.hero-collage__wall .hero-collage__cell {
    height: 100%;
    aspect-ratio: auto;
  }
.hero-collage__data-card {
    padding: .4rem;
    gap: .2rem;
  }
.hero-collage__data-number {
    font-size: 1.16rem;
  }
.hero-collage__data-number--long {
    font-size: .94rem;
  }
.hero-collage__data-desc {
    font-size: .85rem;
  }
}
@media (max-width: 359px) {
.hero-collage__data-card {
    padding: .35rem;
    gap: .2rem;
  }
.hero-collage__data-number {
    font-size: 1.02rem;
  }
.hero-collage__data-number--long {
    font-size: .84rem;
  }
.hero-collage__data-desc {
    font-size: .78rem;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
.hero-collage__wall {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: calc((100vw - 1px) / 4 * 132 / 130);
    height: calc((100vw - 1px) / 4 * 132 / 130 * 3);
  }
.hero-collage__cell[data-hero-card-slot="1"] {
    grid-column: 1;
    grid-row: 1;
  }
.hero-collage__cell[data-hero-card-slot="2"] {
    grid-column: 3;
    grid-row: 1;
  }
.hero-collage__cell[data-hero-card-slot="3"] {
    grid-column: 2;
    grid-row: 2;
  }
.hero-collage__cell[data-hero-card-slot="4"] {
    grid-column: 4;
    grid-row: 2;
  }
.hero-collage__cell[data-hero-card-slot="5"] {
    grid-column: 1;
    grid-row: 3;
  }
.hero-collage__cell[data-hero-card-slot="6"] {
    grid-column: 3;
    grid-row: 4;
  }
.hero-collage__cell[data-hero-card-slot="7"] {
    grid-column: 2;
    grid-row: 4;
  }
.hero-collage__cell[data-hero-card-slot="8"] {
    grid-column: 4;
    grid-row: 5;
  }
.hero-collage__cell[data-hero-card-slot="9"] {
    grid-column: 1;
    grid-row: 5;
  }
.hero-collage__cell[data-hero-card-slot="10"] {
    grid-column: 3;
    grid-row: 6;
  }
}
@media (max-width: 767px) {
:root {
    --stage-offset: 1.25rem;
  }
}
.story-layout > #section-1 {
  border-top: none;
  padding-top: clamp(1rem, 3svh, 2rem);
}
.story-layout {
  width: 100%;
}
.story-scene {
  padding-block: 9vh;
  border-top: 0;
  scroll-margin-top: var(--anchor-offset);
}
.story-scene:has(+ .interview-block__context),
.story-scene:has(+ .interview-block) {
  padding-bottom: 0;
}
.story-scene[data-scene-id="section-4"] {
  padding-bottom: 0;
}
.story-scene__copy {
  width: min(var(--reading-width), 100% - 2rem);
  margin-inline: auto;
}
.story-scene__copy h2::before {
  content: "";
  display: block;
  width: 1.4em;
  height: 6px;
  margin-bottom: 1.4rem;
  background: var(--hero-alert);
}
.story-scene__copy h2 {
  margin: .5rem 0 3.4rem;
  font-size: clamp(2.3rem, 7vw, 4rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: .01em;
}
.story-scene__fallback {
  margin: 0 0 1.7rem;
  letter-spacing: .005em;
}
.story-scene__fallback strong,
.interview-block__body strong {
  color: var(--ink);
  font-weight: 700;
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--hero-alert) 16%, transparent) 0);
  padding-inline: .05em;
}
.story-scene__eyebrow-row .eyebrow {
  margin: 0 0 .5rem;
}
.story-scene__fallback,
.interview-block__body {
  font-family: var(--font-serif);
  font-size: var(--type-body);
  line-height: 2.1;
  color: var(--copy-ink);
}
.story-scene__fallback {
  color: color-mix(in srgb, var(--copy-ink) 78%, transparent);
}
.story-scene__stage-breakout {
  width: 100%;
  margin-top: 7vh;
}
.story-scene__stage-breakout:has(+ .story-scene__copy) {
  margin-bottom: 3rem;
}
.story-scene__stage {
  position: relative;
  min-height: 0;
  background: var(--paper);
}
.story-scene__stage:empty {
  min-height: 0;
}
.story-scene__stage-breakout:has(.story-scene__stage:empty) {
  margin-top: 0;
}
@media (min-width: 1024px) {
.story-scene[data-scene-id="section-3"] {
    display: grid;
    grid-template-columns: minmax(20rem, 28rem) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 4vw, 4rem);
    align-items: start;
    width: min(82rem, 100%);
    margin-inline: auto;
    padding-inline: 1rem;
  }
.story-scene[data-scene-id="section-3"] > .story-scene__copy {
    width: 100%;
    max-width: 28rem;
    margin-inline: 0;
  }
.story-scene[data-scene-id="section-3"] > .story-scene__copy h2 {
    margin-bottom: 2.2rem;
  }
.story-scene[data-scene-id="section-3"] .story-scene__step {
    display: flex;
    min-height: max(88svh, 34rem);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.35rem;
    padding-block: 8svh;
  }
.story-scene[data-scene-id="section-3"] .story-scene__step:first-of-type {
    min-height: 0;
    justify-content: flex-start;
    padding-top: 0;
    padding-bottom: 12rem;
  }
.story-scene[data-scene-id="section-3"] .story-scene__step:last-of-type {
    min-height: 0;
    justify-content: flex-start;
    padding-bottom: 6rem;
  }
.js .story-scene[data-scene-id="section-3"].story-scene--scrolly-ready .story-scene__step {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease);
    transform: translateY(1rem);
  }
.js .story-scene[data-scene-id="section-3"].story-scene--scrolly-ready .story-scene__step--active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
.story-scene[data-scene-id="section-3"] .story-scene__step .story-scene__fallback {
    margin: 0;
    align-self: stretch;
  }
.story-scene[data-scene-id="section-3"] > .story-scene__stage-breakout {
    width: 100%;
    margin-top: 0;
    position: sticky;
    top: 10svh;
    align-self: start;
  }
.story-scene[data-scene-id="section-3"] > .story-scene__stage-breakout .story-scene__stage {
    min-height: 0;
    height: max(min(78svh, 44rem), 38rem);
  }
}
.interview-block__context {
  width: min(var(--reading-width), 100% - 2rem);
  margin: 1.7rem auto -1.9rem;
}
.interview-block {
  width: min(var(--reading-width), 100% - 2rem);
  margin: 3.4rem auto;

  scroll-margin-top: var(--anchor-offset);
  padding: 0 0 0 1.6rem;
  border: 0;
  border-left: 3px solid var(--hero-alert);
  background: transparent;
}
.photo-placeholder {
  width: min(var(--reading-width), 100% - 2rem);
  margin: 1.5rem auto 0;

  scroll-margin-top: var(--anchor-offset);
}
.photo-placeholder:has(+ .story-scene__copy) {
  margin-bottom: 3rem;
}
.photo-placeholder--upgraded {
  width: 100%;
}
.interview-block__role {
  display: block;
  margin: 1.1rem 0 0;
  font-family: var(--font-sans);
  font-size: .86rem;
  font-style: normal;
  letter-spacing: .08em;
  color: var(--unknown);
}
.interview-block__role::before {
  content: "";
  display: inline-block;
  width: 1.5em;
  height: 1px;
  margin-right: .6em;
  background: currentColor;
  opacity: .5;
  vertical-align: middle;
}
.interview-block__body {
  margin: 0;
  font-weight: 700;
  font-size: clamp(1.6rem, 5vw, 2.5rem);
  line-height: 1.5;
  letter-spacing: .01em;
}
.photo-placeholder__caption {
  margin: 0;
  font-family: var(--font-sans);
  font-size: .84rem;
  line-height: 1.7;
  color: var(--copy-ink);
  opacity: .78;
}
.photo-placeholder__marker {
  color: var(--hero-alert);
  opacity: 1;
}
.viz-tag {
  display: block;
  width: fit-content;
  justify-self: start;
  align-self: start;
  margin-block: 0 .6rem;
  margin-inline: max(0px, calc((100% - var(--viz-tag-block-width, 100%)) / 2)) auto;
  padding: .2rem .55rem;
  font-family: var(--font-sans);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--paper);
  background: var(--ink);
  border-radius: var(--radius);
}
[data-section-chart="section-1"] .viz-tag,
[data-section-chart="section-2"] .viz-tag {
  justify-self: center;
  margin-inline: auto;
  font-size: 1.125rem;
}
.viz-tag:has(+ .event-network__scale-grid) {
  --viz-tag-block-width: 42rem;
}
.viz-tag:has(+ .event-network__panel) {
  --viz-tag-block-width: 52rem;
}
.viz-tag:has(+ #scene-4-equity-cards) {
  --viz-tag-block-width: 46rem;
}
#scene-4-equity-cards {
  max-width: 46rem;
  justify-self: center;
}
.oil-check-callout {
  width: min(46rem, calc(100% - 3rem));
  margin: 0 auto clamp(2.5rem, 6vw, 4rem);
  text-align: center;
}
.oil-check-callout__title {
  max-width: var(--reading-width);
  margin: 0 auto var(--space-2);
  font-size: clamp(1.15rem, 3vw, 1.65rem);
  font-weight: 800;
  line-height: 1.35;
  text-align: left;
}
.oil-check-callout__frame {
  overflow: hidden;
  padding: clamp(.45rem, 1.2vw, .75rem);
  border: 1px solid var(--rule-strong);
  background: var(--paper-tint);
}
.oil-check-callout__hero {
  container-type: inline-size;
  position: relative;
  display: block;
  min-height: 0;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: #0a0906;
  color: #f2ecdf;
  text-decoration: none;
  isolation: isolate;
}
.oil-check-minihero__media,
.oil-check-minihero__overlay,
.oil-check-minihero__oilpool,
.oil-check-minihero__glow {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}
.oil-check-minihero__media {
  z-index: 0;
  overflow: hidden;
  background: #0a0906;
}
.oil-check-minihero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .7;
}
.oil-check-minihero__overlay {
  z-index: 1;
  background: linear-gradient(180deg, rgba(10, 9, 6, .5) 0%, rgba(10, 9, 6, .15) 40%, rgba(10, 9, 6, .75) 82%, #0a0906 100%);
}
.oil-check-minihero__oilpool {
  z-index: 1;
  inset: auto 0 0;
  height: 34%;
  overflow: hidden;
}
.oil-check-minihero__wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
  animation: oil-check-flow 14s linear infinite;
}
.oil-check-minihero__wave--back {
  fill: #5c3f14;
  animation-duration: 20s;
  opacity: .85;
}
.oil-check-minihero__wave--middle {
  fill: #8a6626;
}
.oil-check-minihero__wave--front {
  fill: #c89b3c;
  animation-duration: 9s;
  opacity: .6;
}
.oil-check-minihero__glow {
  z-index: 2;
  inset: auto 0 0;
  height: 14%;
  background: linear-gradient(180deg, transparent, rgba(236, 209, 137, .1) 55%, rgba(200, 155, 62, .2));
  filter: blur(2px);
}
.oil-check-minihero__content {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 7%;
  overflow: hidden;
  font-family: var(--font-sans);
  text-align: center;
}
.oil-check-minihero__brand {
  margin-bottom: 2.8cqw;
  color: #c7bfa9;
  font-family: ui-monospace, "SFMono-Regular", "Roboto Mono", monospace;
  font-size: clamp(.55rem, 1.25cqw, .78rem);
  letter-spacing: .3em;
}
.oil-check-minihero__brand b {
  color: #c89b3c;
}
.oil-check-minihero__title {
  position: relative;
  color: transparent;
  background: linear-gradient(178deg, #fff9ea 0%, #f5dc9c 30%, #eac972 58%, #d9b355 82%, #b98f34 100%);
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55)) drop-shadow(0 3px 16px rgba(0, 0, 0, .45)) drop-shadow(0 6px 26px rgba(200, 155, 62, .2));
  font-family: var(--font-serif);

  max-width: 100%;
  font-size: clamp(2.25rem, 11.7cqw, 6.1rem);
  font-weight: 900;
  line-height: .98;
  letter-spacing: .02em;
  white-space: nowrap;
}
.oil-check-minihero__drip {
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 3px;
  height: 0;
  border-radius: var(--radius);
  background: linear-gradient(#ecd189, transparent);
  opacity: 0;
  transform: translateX(-50%);
}
.oil-check-callout__hero.is-in .oil-check-minihero__drip {
  animation: oil-check-drip 1.6s ease .6s both;
}
.oil-check-minihero__subtitle {
  margin-top: 2.2cqw;
  color: #f2ecdf;
  font-family: var(--font-serif);
  font-size: clamp(.9rem, 1.8cqw, 1rem);
  font-weight: 500;
  letter-spacing: .04em;
}
.oil-check-minihero__subtitle em {
  color: #f4796d;
  font-style: normal;
}
.oil-check-minihero__kicker {
  margin-top: 1.45cqw;
  color: #c7bfa9;
  font-size: clamp(.72rem, 1.25cqw, .82rem);
  letter-spacing: .05em;
}
@keyframes oil-check-flow {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes oil-check-drip {
  0% { height: 0; opacity: 0; }
  28% { height: 46px; opacity: 1; }
  70% { height: 46px; opacity: 1; }
  100% { height: 64px; opacity: 0; }
}
@media (max-width: 520px) {
.oil-check-callout__hero {
    width: 100%;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
.oil-check-minihero__content {
    padding: 6%;
  }
.oil-check-minihero__brand {
    letter-spacing: .2em;
  }
.oil-check-minihero__kicker {
    max-width: 90%;
    line-height: 1.55;
  }
}
@media (prefers-reduced-motion: reduce) {
.oil-check-minihero__video {
    display: none;
  }
.oil-check-minihero__wave,
  .oil-check-callout__hero.is-in .oil-check-minihero__drip {
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
html {
    scroll-behavior: auto;
  }
*,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
[data-reveal-group].is-reveal-armed > * {
  opacity: 0;
  transform: translateY(14px);
}
[data-reveal-group].is-reveal-armed.is-revealed > * {
  animation: reveal-fade-up .55s cubic-bezier(.2, .8, .3, 1) both;
  animation-delay: calc(var(--reveal-order, 0) * 60ms);
}
@keyframes reveal-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.chapter-wall {
  margin: 2.5rem 0 0;

  scroll-margin-top: var(--anchor-offset);
}
.photo-placeholder:not(.photo-placeholder--upgraded) {
  padding: clamp(1rem, 3vw, 1.75rem);
  border: 1px dashed color-mix(in srgb, var(--ink) 35%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--paper) 97%, var(--ink) 3%);
}
.photo-placeholder__media {
  position: relative;
  width: 100%;
  margin: .75rem 0 0;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;

  max-height: 78vh;
  background: var(--stage);
}
.photo-placeholder__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92) contrast(1.02);
}
.photo-placeholder--upgraded .photo-placeholder__caption {
  width: min(var(--reading-width), 100% - 2rem);
  margin-top: .6rem;
  margin-inline: auto;
}
.story-scene__stage {
  overflow: hidden;
}
.mass-balance {
  --content-inset: max(1rem, calc((100% - var(--reading-width)) / 2));
  display: grid;
  align-content: center;
  gap: 1.5rem;
  width: min(var(--breakout-width), 100% - var(--content-inset) - 1rem);
  margin-inline: var(--content-inset) auto;
  min-height: calc(100svh - var(--stage-offset));
  padding: 1.5rem clamp(1rem, 3vw, 2.5rem);
  color: var(--ink);
}
.mass-balance[data-state="revealed"] .mass-balance__grid {
  animation: mass-balance-grid-pop var(--dur-slow) var(--ease) both;
}
@keyframes mass-balance-grid-pop {
  0% { transform: scale(.97); opacity: .55; }
  100% { transform: scale(1); opacity: 1; }
}
.story-scene[data-visual-type="dual-flow"] .story-scene__stage,
.story-scene[data-visual-type="crush-simulator"] .story-scene__stage,
.story-scene[data-visual-type="narrow-gate"] .story-scene__stage {
  overflow: visible;
}
.scrolly {
  display: block;
}
@media (min-width: 768px) {
.scrolly {
    display: grid;

    grid-template-columns: minmax(0, 38%) minmax(0, 62%);
    align-items: start;
    gap: var(--space-3);

    width: min(1160px, 100% - 2rem);
    margin-inline: auto;
  }
}
三個格位全部顯式指定，不依賴自動排版：DOM 順序是 tag→stage→steps（無 JS
   時先看到終態圖再讀完整文字，是刻意的退化順序），但視覺上文字要在左、圖
   在右。舞台掛 aria-hidden="true"，是文字的視覺重述而非資訊來源，所以視覺
   換位不影響報讀順序。 */
.scrolly > .viz-tag {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: start;
}
.scrolly[data-scrolly-armed] .scrolly__step {
  opacity: .55;
  border-color: var(--rule);
  transition: opacity var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease);
}
.scrolly[data-scrolly-armed] .scrolly__step.is-active {
  opacity: 1;
  border-color: var(--ink);
}
.scrolly[data-motion="reduced"] .scrolly__step {
  transition: none;
}
.scrolly[data-scrolly-armed] .scrolly__frame {
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease);
}
.scrolly[data-scrolly-armed] .scrolly__frame.is-active {
  opacity: 1;
}
.scrolly[data-motion="reduced"] .scrolly__frame {
  transition: none;
}
.crush-sim .scrolly__frame-stack {
  --scrolly-frame-ratio: 400 / 290;
}
.event-network {

  --viz-tag-block-width: 46rem;
  width: 100%;
  display: grid;
  justify-items: center;
}
#scene-5-network-cards {
  max-width: 46rem;
}
.global-comparison {

  --viz-tag-block-width: 46rem;
  display: grid;
  justify-items: center;
  gap: 1.75rem;
  padding: 2rem clamp(1rem, 3vw, 2.5rem) 3rem;
  color: var(--ink);
}
#scene-6-step-cards {
  max-width: 46rem;
}
.reveal-cell {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.reveal-cell .reveal-card {
  position: absolute;
  inset: 0;
  transform: translateY(102%);
  opacity: 0;
  transition: transform var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease);
  pointer-events: none;
}
.reveal-cell.is-active .reveal-card {
  transform: translateY(0);
  opacity: 1;
}
html:not(.js) .reveal-cell:hover .reveal-card,
html:not(.js) .reveal-cell:focus-within .reveal-card {
  transform: translateY(0);
  opacity: 1;
}
.reveal-cell::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: .5rem solid var(--ink);
  border-left: .5rem solid transparent;
  opacity: .45;
  transition: opacity var(--dur-mid) var(--ease);
  pointer-events: none;
}
.reveal-cell.is-active::after {
  opacity: 0;
}
.reveal-cell:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}
@media (prefers-reduced-motion: reduce) {
.reveal-cell .reveal-card {
    transform: none;
    transition: opacity var(--dur-mid) var(--ease);
  }
.reveal-cell.is-active .reveal-card,
  html:not(.js) .reveal-cell:hover .reveal-card,
  html:not(.js) .reveal-cell:focus-within .reveal-card {
    transform: none;
  }
}
.story-credits {
  background: var(--stage);
  color: var(--stage-ink);
  padding: var(--space-4) 0;
  text-align: center;
}
.story-credits__wrap {
  width: min(var(--reading-width), 100% - 2rem);
  margin: 0 auto;
}
.story-credits__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(.85rem, 2.6vw, 1.45rem);
  line-height: 1.35;
  letter-spacing: 0;
  white-space: nowrap;
}
.story-credits__list {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  max-width: 24rem;
  margin: 0 auto var(--space-3);
  padding: 0;
  list-style: none;
}
.story-credits__list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: .55rem;
  border-bottom: 1px dotted var(--rule-stage);
  font-family: var(--font-serif);
  font-size: var(--type-ui);
}
.story-credits__list span {
  font-family: var(--font-sans);
  font-size: var(--type-meta);
  letter-spacing: .08em;
  color: color-mix(in srgb, var(--stage-ink) 70%, transparent);
}
.story-credits__pub {
  margin: 0 0 var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--type-meta);
  letter-spacing: .18em;
  color: color-mix(in srgb, var(--stage-ink) 70%, transparent);
}
.story-credits__copyright {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--type-meta);
  line-height: 1.8;

  color: color-mix(in srgb, var(--stage-ink) 55%, transparent);
}
.story-scene__stage:has(.section-chart) {
  display: block;
}
.section-chart {
  width: min(var(--breakout-width), 100% - 2rem);
  margin-inline: auto;
  padding-block: 0;
}
.chart-group + .chart-group {
  margin-top: var(--space-3);
}
.chart-group__eyebrow {
  margin-bottom: .15rem;
}
.chart-group__title {
  margin: .3rem 0 1.3rem;
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 3.6vw, 1.85rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .02em;
}
.chart-group__source {
  margin: 1.4rem 0 0;
  color: var(--unknown);
  font-family: var(--font-sans);
  font-size: .78rem;
  line-height: 1.5;
  text-align: center;
}
@media (min-width: 768px) {
.js .story-scene[data-scene-id="section-3"] .story-scene__stage[data-section-id="section-3"] .section-chart {
    width: 100%;
    height: 100%;
    padding: clamp(.75rem, 1.6vw, 1.25rem) 0;
  }
.js .story-scene[data-scene-id="section-3"] .story-scene__stage[data-section-id="section-3"] .section-chart__groups {
    position: relative;
    min-height: calc(100% - 3rem);
  }
.js .story-scene[data-scene-id="section-3"] .story-scene__stage[data-section-id="section-3"] .chart-group {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin: 0;
  }
.js .story-scene[data-scene-id="section-3"] .story-scene__stage[data-section-id="section-3"] .chart-group--inactive {
    visibility: hidden;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
  }
.js .story-scene[data-scene-id="section-3"] .story-scene__stage[data-section-id="section-3"] .chart-group--active {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }
@media (prefers-reduced-motion: no-preference) {
.js .story-scene[data-scene-id="section-3"] .story-scene__stage[data-section-id="section-3"] .chart-group {
      transition: opacity var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease);
    }
}
}
.chart-bar {
  display: grid;
  grid-template-columns: minmax(6rem, 8.5rem) 1fr auto;
  grid-template-areas:
    "label track value"
    "note  note  note";
  align-items: center;
  row-gap: .35rem;
  column-gap: .75rem;
  padding: .6rem .5rem;
  border-top: 1px solid var(--rule);
}
.chart-group__body > .chart-bar:last-child {
  border-bottom: 1px solid var(--rule);
}
.chart-bar__label {
  grid-area: label;
  font-family: var(--font-sans);
  font-size: var(--type-ui);
}
.chart-bar__value {
  grid-area: value;
  min-width: 6.8rem;
  font-family: var(--font-display);
  font-size: var(--type-meta);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.chart-bar__track {
  grid-area: track;
  position: relative;
  display: block;
  height: 1.4rem;
  background: var(--paper-tint);
}
.chart-bar__fill {
  position: absolute;
  inset-block: 0;
  display: block;
}
.chart-bar__fill--range {
  opacity: .38;
}
.chart-bar__note {
  grid-area: note;
  margin: 0;
  color: var(--unknown);
  font-size: var(--type-meta);
  line-height: 1.5;
}
.chart-bar--armed:not(.chart-bar--revealed) .chart-bar__fill {
  width: 0 !important;
}
.chart-bar--armed .chart-bar__fill {
  transition: width var(--dur-slow) var(--ease);
  transition-delay: calc(var(--chart-bar-order, 0) * 90ms);
}
.chart-card {
  display: flex;
  flex-direction: column;
  min-height: 10rem;
  padding: var(--space-2);
  border: 1px solid var(--rule-strong);
}
.chart-card__face {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .35rem;
}
.chart-card__label {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--type-title);
  line-height: 1.25;
}
.chart-card__sub {
  margin: 0;
  font-size: var(--type-meta);
  line-height: 1.5;
  color: var(--unknown);
}
.chart-card__card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .45rem;
  padding: var(--space-2);
  background: var(--ink);
  color: var(--paper);
}
.chart-card__headline {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.chart-card__note {
  font-size: var(--type-meta);
  line-height: 1.55;
  opacity: .92;
}
@media (max-width: 567px) {
.chart-bar {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "track"
      "value"
      "note";
    gap: .3rem;
  }
.chart-bar__value {
    text-align: left;
  }
}
.mass-balance-donut {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.mass-balance-donut__chart {
  position: relative;
  flex: none;
  width: clamp(9rem, 22vw, 12rem);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
}
.mass-balance-donut__track {
  fill: none;
  stroke: var(--paper-tint);
  stroke-width: 16;
}
.mass-balance-donut:has(.mass-balance-donut__legend-item.is-active) .mass-balance-donut__arc {
  opacity: .3;
}
.mass-balance-donut:has(.mass-balance-donut__legend-item[data-metric-id="mass-balance-meal"].is-active)
  .mass-balance-donut__arc[data-metric-id="mass-balance-meal"],
.mass-balance-donut:has(.mass-balance-donut__legend-item[data-metric-id="mass-balance-oil"].is-active)
  .mass-balance-donut__arc[data-metric-id="mass-balance-oil"],
.mass-balance-donut:has(.mass-balance-donut__legend-item[data-metric-id="mass-balance-loss"].is-active)
  .mass-balance-donut__arc[data-metric-id="mass-balance-loss"] {
  opacity: 1;
}
.mass-balance-donut__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.mass-balance-donut:has(.mass-balance-donut__legend-item.is-active) .mass-balance-donut__center-value--default {
  opacity: 0;
}
.mass-balance-donut:has(.mass-balance-donut__legend-item[data-metric-id="mass-balance-meal"].is-active)
  .mass-balance-donut__center-value[data-metric-id="mass-balance-meal"],
.mass-balance-donut:has(.mass-balance-donut__legend-item[data-metric-id="mass-balance-oil"].is-active)
  .mass-balance-donut__center-value[data-metric-id="mass-balance-oil"],
.mass-balance-donut:has(.mass-balance-donut__legend-item[data-metric-id="mass-balance-loss"].is-active)
  .mass-balance-donut__center-value[data-metric-id="mass-balance-loss"] {
  opacity: 1;
}
@media (max-width: 567px) {
.mass-balance-donut {
    flex-direction: column;
  }
.mass-balance-donut__chart {
    width: min(60vw, 10.5rem);
  }
}
.mass-balance-ring.is-active .mass-balance-ring__center--share {
  opacity: 0;
  transform: translateY(-6px);
}
.mass-balance-ring.is-active .mass-balance-ring__center--mass {
  opacity: 1;
  transform: translateY(0);
}
.mass-balance-donut {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-top: .25rem;
}
.mass-balance-donut__seg.is-faded {
  opacity: .18;
}
.mass-balance-donut__chart {
  position: relative;
  flex: none;
  width: clamp(14rem, 42vw, 18rem);
  aspect-ratio: 1;
  margin-inline: auto;
}
.mass-balance-donut__chart svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.mass-balance-donut__track,
.mass-balance-donut__seg {
  fill: none;
  stroke-width: 15;
}
.mass-balance-donut__track {
  stroke: var(--paper-tint);
}
.mass-balance-donut__seg {
  stroke-linecap: butt;
  transform-origin: 60px 60px;
  cursor: pointer;
  transition: stroke-dashoffset 1.3s var(--ease), opacity var(--dur-mid) var(--ease), stroke-width var(--dur-fast) var(--ease);
  transition-delay: calc(.12s + var(--segment-order) * .14s), 0s, 0s;
}
.mass-balance-donut__seg:focus {
  outline: none;
}
.mass-balance-donut__seg.is-selected,
.mass-balance-donut__seg:hover,
.mass-balance-donut__seg:focus-visible {
  opacity: 1;
  stroke-width: 18;
}
.mass-balance-donut--armed:not(.mass-balance-donut--revealed) .mass-balance-donut__seg {
  stroke-dashoffset: var(--segment-length);
}
.mass-balance-donut__center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.mass-balance-donut__hint {
  font-family: var(--font-sans);
  font-size: .9rem;
  line-height: 1.45;
  letter-spacing: .08em;
  color: var(--unknown);
}
.mass-balance-donut__selection:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
}
.mass-balance-donut__selection strong {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 8vw, 3.4rem);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.mass-balance-donut__selection small {
  font-family: var(--font-sans);
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--ink);
}
@media (max-width: 567px) {
.mass-balance-donut__chart {
    width: min(72vw, 16rem);
  }
}
.supply-flow__lane-trigger.is-active {
  border-color: var(--rule-strong);
  background: color-mix(in srgb, var(--paper-tint) 62%, transparent);
}
.supply-flow__lane-trigger.is-faded {
  opacity: .34;
}
.supply-flow__lane-head .eyebrow {
  display: block;
  margin: 0 0 .5rem;
}
.supply-flow--interactive .supply-flow__lane.is-active .supply-flow__connector,
.supply-flow--interactive .supply-flow__lane.is-active .supply-flow__measure {
  opacity: 1;
  transform: translateY(0);
}
.supply-flow--interactive .supply-flow__lane.is-faded .supply-flow__connector,
.supply-flow--interactive .supply-flow__lane.is-faded .supply-flow__measure {
  opacity: .08;
}
.flow-tree {
  --flow-line: color-mix(in srgb, var(--ink) 48%, transparent);
  width: min(56rem, 100%);
  margin: 1.2rem auto 0;
}
.flow-tree__prompt {
  margin: 0;
  color: var(--unknown);
  font-family: var(--font-sans);
  font-size: .82rem;
  line-height: 1.55;
  letter-spacing: .04em;
  text-align: center;
}
.flow-tree__origin {
  display: grid;
  place-items: center;
  margin-top: 1rem;
}
.flow-tree__bean {
  display: grid;
  width: clamp(8.5rem, 24vw, 11rem);
  aspect-ratio: 1;
  place-items: center;
  padding: .75rem;
  overflow: hidden;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper-tint);
  cursor: pointer;
  transition: transform var(--dur-mid) var(--ease), background var(--dur-mid) var(--ease);
}
.flow-tree__bean:hover,
.flow-tree__bean:focus-visible {
  background: color-mix(in srgb, var(--oil) 18%, var(--paper));
  transform: translateY(-.2rem) scale(1.02);
}
.flow-tree__bean:focus-visible,
.flow-tree__segment:is(button):focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
.flow-tree__bean img {
  width: 82%;
  height: 82%;
  object-fit: contain;
}
.flow-tree__split {
  width: min(48rem, 100%);
  margin: 0 auto;
  overflow: hidden;
}
#flow-tree-split > .flow-tree__connector {
  position: static;
  width: 100%;
  height: 3rem;
  margin: 0 auto;
}
.flow-tree__stack--origin {
  margin-top: 0;
}
.flow-tree__stack--origin .flow-tree__remainder {
  writing-mode: vertical-rl;
  padding: .5rem .3rem;
  letter-spacing: .15em;
}
.flow-tree__downstream {
  display: grid;
  grid-template-columns: 1fr;
  width: min(48rem, 100%);
  margin: 0 auto;
  align-items: start;
}
.flow-tree__stage {
  min-width: 0;
  overflow: hidden;
}
.flow-tree__stage--meal,
.flow-tree__stage--oil {
  margin-top: 0;
  padding-top: 3.8rem;
}
.flow-tree__panel-head {
  position: relative;
  margin: -3.8rem 0 0;
}
.flow-tree__panel-text {
  display: flow-root;
  padding-top: 3.8rem;
}
.flow-tree__connector {
  position: absolute;
  inset: 0;
  display: block;
  overflow: visible;
  width: 100%;
  height: 100%;
  transform-origin: center top;
}
.flow-tree__connector line {
  stroke: var(--flow-line);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}
.flow-tree__connector polygon {
  fill: color-mix(in srgb, var(--flow-line) 14%, transparent);
}
.flow-tree__stage h3 {
  margin: 0 0 .45rem;
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 2.5vw, 1.45rem);
  line-height: 1.35;
}
.flow-tree__stack,
.flow-tree__single {
  display: flex;
  width: 100%;
  min-height: 6.4rem;
  overflow: hidden;
  background: var(--paper-tint);
}
.flow-tree__segment {
  position: relative;
  display: flex;
  width: var(--segment-share);
  min-width: 0;
  flex: 0 0 var(--segment-share);
  flex-direction: column;
  justify-content: center;
  gap: .2rem;
  padding: .65rem;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius);
  background: var(--segment-color);
  color: var(--ink);
  font: inherit;
  text-align: left;
  transform-origin: left center;
}
.flow-tree__segment--meal,
.flow-tree__segment--oil {
  color: var(--paper);
}
.flow-tree__segment:is(button) {
  cursor: pointer;
  transition: opacity var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease);
}
.flow-tree__segment:is(button).is-active {
  transform: translateY(-.12rem);
}
.flow-tree__segment:is(button).is-faded {
  opacity: .34;
}
.flow-tree__segment > span {
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: .75rem;
  line-height: 1.25;
  text-overflow: ellipsis;
}
.flow-tree__segment strong {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 3.5vw, 1.75rem);
  font-variant-numeric: tabular-nums;
}
.flow-tree__segment-hint {
  margin-top: auto;
  color: inherit;
  opacity: .8;
  font-family: var(--font-sans);
  font-size: .68rem;
  letter-spacing: .04em;
}
.flow-tree__remainder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  flex: 1;
  padding: .5rem;
  color: var(--unknown);
  font-family: var(--font-sans);
  font-size: .74rem;
  text-align: center;
}
.flow-tree__stage--protein {
  margin-top: 0;
  padding-top: 3.8rem;
}
.flow-tree__stage--protein .flow-tree__single {
  min-height: 7.7rem;
  flex-direction: row-reverse;
}
.flow-tree__stage--protein .flow-tree__segment {
  transform-origin: right center;
}
.flow-tree__stage--protein .flow-tree__segment strong {
  font-size: clamp(1.75rem, 5vw, 2.65rem);
}
.flow-tree__takeaway {
  margin: 1.6rem 0 0;
  padding-left: 1rem;
  border-left: 3px solid var(--hero-alert);
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 750;
  line-height: 1.65;
}
.flow-tree--interactive .flow-tree__split,
.flow-tree--interactive .flow-tree__stage--meal,
.flow-tree--interactive .flow-tree__stage--oil,
.flow-tree--interactive .flow-tree__stage--protein {
  max-height: 0;
  padding-top: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-.65rem);
  transition: max-height .75s var(--ease), padding-top .75s var(--ease), opacity var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease), visibility 0s linear .75s;
}
.flow-tree--interactive[data-flow-state="start"] .flow-tree__split {
  max-height: 0;
}
.flow-tree--interactive:not([data-flow-state="start"]) .flow-tree__split {
  max-height: 24rem;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.flow-tree--interactive[data-flow-state="meal"] #flow-tree-meal,
.flow-tree--interactive[data-flow-state="meal-protein"] #flow-tree-meal {
  max-height: 54rem;
  padding-top: 3.8rem;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.flow-tree--interactive[data-flow-state="meal-protein"] #flow-tree-protein {
  max-height: 22rem;
  padding-top: 3.8rem;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.flow-tree--interactive[data-flow-state="oil"] #flow-tree-oil {
  max-height: 32rem;
  padding-top: 3.8rem;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.flow-tree--interactive .flow-tree__connector {
  transform: scaleY(0);
}
.flow-tree--interactive .flow-tree__segment {
  transform: scaleX(0);
}
.flow-tree--interactive:not([data-flow-state="start"]) #flow-tree-split > .flow-tree__connector,
.flow-tree--interactive[data-flow-state="meal"] #flow-tree-meal > .flow-tree__panel-head > .flow-tree__connector,
.flow-tree--interactive[data-flow-state="meal-protein"] #flow-tree-meal > .flow-tree__panel-head > .flow-tree__connector,
.flow-tree--interactive[data-flow-state="meal-protein"] #flow-tree-protein > .flow-tree__panel-head > .flow-tree__connector,
.flow-tree--interactive[data-flow-state="oil"] #flow-tree-oil > .flow-tree__panel-head > .flow-tree__connector {
  transform: scaleY(1);
  transition: transform .75s var(--ease);
}
.flow-tree--interactive:not([data-flow-state="start"]) .flow-tree__stack--origin .flow-tree__segment,
.flow-tree--interactive[data-flow-state="meal"] #flow-tree-meal > .flow-tree__stack .flow-tree__segment,
.flow-tree--interactive[data-flow-state="meal-protein"] #flow-tree-meal > .flow-tree__stack .flow-tree__segment,
.flow-tree--interactive[data-flow-state="meal-protein"] #flow-tree-protein .flow-tree__segment,
.flow-tree--interactive[data-flow-state="oil"] #flow-tree-oil .flow-tree__segment {
  transform: scaleX(1);
  transition: transform .95s var(--ease) .12s;
}
@media (max-width: 700px) {
.flow-tree__stack,
  .flow-tree__single {
    min-height: 6.8rem;
  }
}
@media (prefers-reduced-motion: reduce) {
.flow-tree *,
  .flow-tree *::before,
  .flow-tree *::after {
    transition-duration: .01ms !important;
  }
}