/* ============================
   Modern CSS Reset (opinionated)
   ============================ */

/* 1) Box sizing ---------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
  }
  
  /* 2) Remove default margin/padding ---------------- */
  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  article, aside, canvas, details, embed,
  figure, figcaption, footer, header, hgroup,
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    background: transparent;
  }
  
  /* 3) HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure,
  footer, header, hgroup, menu, nav, section {
    display: block;
  }
  
  /* 4) Base html/body ------------------------------- */
  html, body {
    height: 100%;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    color: inherit;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: transparent;
  }
  
  /* 5) Lists ---------------------------------------- */
  ol, ul {
    list-style: none;
  }
  
  /* 6) Links ---------------------------------------- */
  a {
    color: inherit;
    text-decoration: none;
    background-color: transparent;
  }
  
  /* 7) Images & media ------------------------------- */
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
  }
  
  /* 8) Forms & buttons ------------------------------ */
  button, input, select, textarea {
    font: inherit;           /* inherit font from parent */
    color: inherit;          /* inherit color */
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
  }
  
  button {
    cursor: pointer;
    background: transparent;
  }
  
  /* Remove inner focus border in Firefox for buttons */
  button::-moz-focus-inner { border: 0; padding: 0; }
  
  /* 9) Fieldset / legend ---------------------------- */
  fieldset { border: 0; margin: 0; padding: 0; }
  legend  { padding: 0; }
  
  /* 10) Tables -------------------------------------- */
  table { border-collapse: collapse; border-spacing: 0; }
  
  /* 11) Inputs type number remove arrows (optional) */
  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  
  /* 12) Accessibility / Reduced motion --------------- */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
  }
  
  /* 13) Utility defaults you probably want            */
  /* set a sane base font-size if needed (optional) */
  html { font-size: 16px; }
  
  /* base container behavior (optional) */
  body { min-height: 100vh; }
  
  /* 14) Helper: visually-hidden (for accessibility) */
  .visually-hidden {
    position: absolute !important;
    height: 1px; width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
  }