*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

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

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

table {
  border-collapse: collapse;
}

/* The `hidden` attribute only works through the browser's own
   `[hidden] { display: none }` rule, and ANY author `display` declaration
   outranks it — author styles beat user-agent styles. So the moment a
   component gets `display: flex` (or grid, or inline-flex), every `hidden`
   on it silently stops working and the element is permanently visible.

   That had already been patched six separate times with one-off
   `.thing[hidden] { display: none }` rules, and each new component hit it
   again — most recently the AI-description report status, which read
   "Reported — thanks for the feedback" to every user before they had
   clicked anything. One rule, applied once, ends the whole class of bug.
   !important is required: it has to beat the component's own display. */
[hidden] {
  display: none !important;
}