.principles-story {
  --color-principles-ink: var(--_base--neutral--neutral-900);
  --color-principles-muted: var(--_base--neutral--neutral-500);
  --color-principles-line: var(--_base--neutral--neutral-200);
  --color-principles-accent: var(--_base--blue--blue-600);
  --color-principles-surface: var(--_base--neutral--neutral-50);
  --spacing-principles-small: var(--_typography---text-size-regular--font-size);
  --spacing-principles-gap: var(--_layout---global--page-padding);
  --spacing-principles-nav: var(--_layout---global--nav-height);
  --duration-principles: 240ms;
  padding: var(--spacing-principles-nav) var(--spacing-principles-gap);
  color: var(--color-principles-ink);
  background: var(--_base--neutral--neutral-0);
  scroll-margin-top: var(--spacing-principles-nav);
}
.principles-stage { max-width: var(--_layout---container--container-large); margin-inline: auto; }
.principles-intro { max-width: var(--_layout---container--container-small); margin-bottom: var(--spacing-principles-gap); }
.principles-eyebrow { color: var(--color-principles-muted); margin-bottom: var(--spacing-principles-small); }
.principles-intro h2 { font-size: var(--_typography---heading-style-h2--font-size); line-height: var(--_typography---heading-style-h3--line-height); text-wrap: balance; margin: 0 0 var(--spacing-principles-gap); }
.principles-intro > p:last-child { font-size: var(--_typography---text-size-regular--font-size); line-height: 1.5; max-width: var(--_layout---container--container-xsmall); }
.principles-step { padding: var(--spacing-principles-small); border-left: thin solid var(--color-principles-line); scroll-margin-top: calc(var(--spacing-principles-nav) + var(--spacing-principles-small)); }
.principles-step h3 { margin: 0; font-size: var(--_typography---heading-style-h3--font-size); line-height: var(--_typography---heading-style-h3--line-height); }
.principles-step h3 a { color: inherit; text-decoration: none; }
.principles-description { margin: var(--spacing-principles-small) 0 0; font-size: var(--_typography---text-size-regular--font-size); line-height: 1.5; }
.principles-mobile-image { display: block; width: 100%; max-width: var(--_layout---container--container-xsmall); aspect-ratio: 1; object-fit: contain; margin: var(--spacing-principles-gap) auto; background: var(--color-principles-surface); border-radius: var(--_layout---border-radius--border-radius-small); }
.principles-visual { display: none; }
.principles-more { display: inline-flex; gap: var(--spacing-principles-small); margin: var(--spacing-principles-small); color: var(--color-principles-accent); font-weight: var(--_typography---font-weight--font-weight-medium); text-decoration: none; }
.principles-more:hover { text-decoration: underline; }
.principles-story a:focus-visible { outline: medium solid var(--color-principles-accent); outline-offset: var(--_layout---screenshots--padding); }
.principles-story.is-scroll-story { height: 300svh; }
.is-scroll-story .principles-stage {
  position: sticky;
  top: calc(var(--spacing-principles-nav) + var(--spacing-principles-small));
  height: calc(100svh - var(--spacing-principles-nav) - 2 * var(--spacing-principles-small));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-principles-nav);
}
.is-scroll-story .principles-copy { display: flex; flex-direction: column; justify-content: space-between; min-height: 0; padding-block: var(--spacing-principles-small); }
.is-scroll-story .principles-intro { max-width: var(--_layout---container--container-xsmall); }
.is-scroll-story .principles-intro h2 { max-width: 16ch; }
.is-scroll-story .principles-intro > p:last-child { max-width: 42ch; }
.is-scroll-story .principles-step { border-left-color: transparent; padding-block: var(--_layout---screenshots--padding); color: var(--color-principles-muted); }
.is-scroll-story .principles-step.is-active { border-left-color: var(--color-principles-accent); color: var(--color-principles-ink); }
.is-scroll-story .principles-description { display: none; margin-top: var(--_layout---screenshots--padding); }
.is-scroll-story .principles-step.is-active .principles-description { display: block; }
.is-scroll-story .principles-mobile-image { display: none; }
.is-scroll-story .principles-visual { display: block; position: relative; overflow: hidden; margin: 0; min-height: 0; border-radius: var(--_layout---border-radius--border-radius-small); background: var(--color-principles-surface); }
.is-scroll-story .principles-visual img { position: absolute; inset: 0; width: 100%; height: 100%; padding: var(--spacing-principles-gap); object-fit: contain; opacity: 0; transition: opacity var(--duration-principles) ease; }
.is-scroll-story .principles-visual img.is-active { opacity: 1; }