:root {
  --size: 1rem;
  --font: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", "Noto Sans", Arial, sans-serif;
  --font-icon: "Material Symbols Outlined";
  --speed1: 0.1s;
  --speed2: 0.2s;
  --speed3: 0.3s;
  --speed4: 0.4s;
  --active: rgb(128 128 128 / 0.192);
  --overlay: rgb(0 0 0 / 0.5);
  --elevate1: 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.32);
  --elevate2: 0 0.25rem 0.5rem 0 rgb(0 0 0 / 0.4);
  --elevate3: 0 0.375rem 0.75rem 0 rgb(0 0 0 / 0.48);
  --top: env(safe-area-inset-top);
  --bottom: env(safe-area-inset-bottom);
  --left: env(safe-area-inset-left);
  --right: env(safe-area-inset-right);
}

html {
  font-size: var(--size);
}

body {
  color: var(--on-surface);
  background-color: var(--surface);
  overflow-x: hidden;
  font-family: var(--font);
  font-size: 0.875rem;
  line-height: 1.5rem;
  letter-spacing: 0.0313rem;
}

@media (pointer: fine) {
  body ::-webkit-scrollbar,
  body ::-webkit-scrollbar-thumb,
  body ::-webkit-scrollbar-button {
    background: none;
    inline-size: 0.4rem;
    block-size: 0.4rem;
  }

  body :is(:focus, :hover)::-webkit-scrollbar-thumb,
  body :has(:focus, :hover)::-webkit-scrollbar-thumb {
    background: var(--outline);
    border-radius: 1rem;
  }
}

@media (pointer: coarse) {
  body:has(dialog[open], dialog.active),
  body:has(input[type=range]:focus) {
    overflow: hidden;
  }
}