@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
}

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
    min-block-size: 100svb;
    background: var(--color-page);
    color: var(--color-text);
    font-family: var(--font-ui);
    line-height: 1.5;
  }

  a {
    color: inherit;
    text-underline-offset: 0.2em;
  }

  button,
  input,
  select {
    font: inherit;
  }

  button {
    cursor: pointer;
  }

  img,
  svg {
    display: block;
    max-inline-size: 100%;
  }

  :focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-accent) 75%, white);
    outline-offset: 3px;
  }
}

.demo-notice { margin: 0; padding: .7rem 1rem; text-align: center; background: #e5eee8; color: #163b33; font-size: .875rem; }
.demo-notice a { color: inherit; text-decoration: underline; }