@layer reset {
  * { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--color-pri) transparent; }
  :root { interpolate-size: allow-keywords; }
  html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; }
  body {
    margin: 0; padding: 0;
    min-height: 100svh; max-height: 100svh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    background: var(--surface-bak);
    color: var(--text-color);
  }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin-block-end: 0; }
  h1, h2, h3, h4, h5, h6 { text-wrap: balance; margin: 0; }
  p, li, figcaption { text-wrap: pretty; }
  ul[role='list'], ol[role='list'] { list-style: none; }
  a:not([class]) { text-decoration-skip-ink: auto; color: currentColor; }
  img, picture { max-width: 100%; display: block; }
  input, button, textarea, select { font-family: inherit; font-size: inherit; }
  dialog { padding: 0; }
  button, input, label { line-height: 1.1; }
  textarea:not([rows]) { min-height: 10em; }
  :target { scroll-margin-block: 5ex; }

  /* Scrollbar (webkit) */
  ::-webkit-scrollbar { width: 8px; }
  ::-webkit-scrollbar-track { background: transparent; margin-block: var(--space-2); }
  ::-webkit-scrollbar-thumb { background: var(--color-pri); border-radius: var(--radius-full); }

  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
    
  }
}