/* ===== Reset ===== */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

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

body {
  min-height: 100vh;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

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

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

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

ul[class] { list-style: none; padding: 0; }

a { color: inherit; }

/* `hidden` must win over any component `display` rule. Without this a class selector
   like `.panel { display: flex }` silently defeats the attribute, because the UA
   stylesheet's `[hidden]` rule has lower specificity. */
[hidden] { display: none !important; }