The ultimate CSS Reset (eventually)

proper-reset.css

/* Reasonable default view transition */
@view-transition {
  navigation: auto;
}

html {
  box-sizing: border-box;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  /* More accessible default line-hieht */
  line-height: 1.5;
  /* Improve font legibility */
  -webkit-font-smoothing: antialiased;
  font-size: clamp(1rem, calc(1rem + 2.5vw), 6rem); /* Fluid font scaling*/
}

*,
*::before,
*::after,
*::backdrop {
  box-sizing: inherit;
}

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* enable transitions, allow-discrete, define timing */
[popover], dialog, ::backdrop {
  transition: display 1s allow-discrete, overlay 1s allow-discrete, opacity 1s;
  opacity: 0;
}

:popover-open,
:popover-open::backdrop,
[open],
[open]::backdrop {
  opacity: 1;
}

@starting-style {
  :popover-open,
  :popover-open::backdrop,
  [open],
  [open]::backdrop {
    opacity: 0;
  }
}

details {
  inline-size: 50ch;

  @media (prefers-reduced-motion: no-preference) {
    interpolate-size: allow-keywords;
  }

  &::details-content {
    opacity: 0;
    block-size: 0;
    overflow-y: clip;
    transition: content-visibility 1s allow-discrete, opacity 1s, block-size 1s;
  }

  &[open]::details-content {
    opacity: 1;
    block-size: auto;
  }
}

/* More specific selectors */

/* Media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* Form controls */
input, button, textarea, select {
  /* inherit from body */
  font: inherit;
}

/* Text legibility */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}