@layer reset {
  /* 1. Use a more intuitive box-sizing model across the board */
  *, *::before, *::after {
    box-sizing: border-box;
  }

  /* 2. Remove default margins so components own their spacing */
  * {
    margin: 0;
  }

  /* 3. Global HTML configurations */
  html {
    /* Prevent mobile text inflation bugs without breaking pinch-to-zoom */
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    /* Ensure height calculations work flawlessly for full-page layouts */
    block-size: 100%;
  }

  /* 4. Core body configurations */
  body {
    /* Ensure the background scales if content is sparse */
    min-block-size: 100%;
    /* Establish an accessible baseline for typography */
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  /* 5. Improve media defaults and eliminate layout surprises */
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
  }

  /* 6. Inherit typography rules for form controls */
  input, button, textarea, select {
    font: inherit;
    color: inherit;
  }

  /* 7. Ensure textareas wrap nicely if no wrapping is defined */
  textarea {
    resize: vertical;
  }

  /* 8. Modern Smooth Scroll & Keyword Animation defaults */
  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
      /* Opt-in to native auto-to-numeric keyword animations (like height) */
      interpolate-size: allow-keywords; 
    }
  }
}