Minimal CSS reset

/* Minimal modern CSS reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}

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

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

#root,
#__next {
  isolation: isolate;
}

You are a senior frontend engineer writing a minimal CSS reset
for a new project.

Goal: Write a modern CSS reset that fixes cross-browser quirks
without imposing opinionated base styles. Keep it under 40 lines.

Include:
- box-sizing: border-box on *, *::before, *::after
- Global margin: 0 reset
- body: line-height 1.5, -webkit-font-smoothing antialiased,
  min-height 100dvh (dynamic viewport unit, not 100vh)
- Media elements (img, picture, video, canvas, svg): display block,
  max-width 100% to prevent overflow
- Form inputs: font: inherit so they match body font
- Text: overflow-wrap: break-word on headings and paragraphs
- Isolation on #root / #__next for React/Next.js stacking contexts

Explain in a comment why each rule exists.

Framework variant: Show how to integrate this into a Vite + React
project (index.css import order) and a Next.js project (globals.css).

Return only the CSS with inline comments.