@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  * {
    margin: 0;
  }
  img,
  svg,
  video,
  canvas {
    display: block;
    max-width: 100%;
    height: auto;
  }
  html {
    -webkit-text-size-adjust: 100%;
  }
  body {
    min-height: 100dvh;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  h1,
  h2,
  h3,
  h4 {
    font-family: var(--font-serif);
    font-weight: 600;
    line-height: 1.2;
  }
  h1 { font-size: var(--step-4); }
  h2 { font-size: var(--step-3); }
  h3 { font-size: var(--step-2); }
  h4 { font-size: var(--step-1); }
  a {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
  }
  :focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
  }
  /* Alpine removes x-cloak once it has initialized, so toggled panels never flash open. */
  [x-cloak] {
    display: none !important;
  }
  /* Display math in long derivations should scroll, not overflow the phone screen. */
  .katex-display {
    overflow-x: auto;
    overflow-y: hidden;
    padding-block: 0.25rem;
  }
  table {
    border-collapse: collapse;
  }
  /* Fieldsets group answer choices and radio buttons; the grouping is for assistive
     technology, not a box on the page. */
  fieldset {
    min-width: 0;
    padding: 0;
    border: 0;
  }
  code,
  kbd,
  pre,
  samp {
    font-family: var(--font-mono);
  }
}