/* Load before a slide's own styles; all defaults can be overridden locally. */
@layer slide {
  :root {
    --color-yellow: #e0ff3e;
    --color-dark: #111;
    --color-light: #faf6ed;
  }

  * {
    box-sizing: border-box;
  }

  html,
  body {
    margin: 0;
    min-block-size: 100%;
  }

  body {
    min-block-size: 100dvh;
    padding: 7vmin;
    background: var(--color-dark);
    color: #fff;
    font-family: system-ui, sans-serif;
    display: grid;
    align-content: center;
  }

  h1 {
    font-size: clamp(2.3rem, 5.5vw, 6rem);
    letter-spacing: -.04em;
    text-wrap: balance;
  }

  .step,
  .eyebrow {
    text-transform: uppercase;
    letter-spacing: .1em;
  }
}