:root {
  --paper: #f1f3f2;
  --paper-deep: #e4e8e6;
  --surface: #ffffff;
  --ink: #14181a;
  --muted: #5c6a6c;
  --pine: #1f6f5c;
  --pine-ink: #0f4437;
  --pine-wash: rgba(31, 111, 92, 0.09);
  /* Foreground for anything sitting on --pine. It flips with the scheme,
     because --pine is a dark green in light mode and a light one in dark. */
  --on-pine: #ffffff;
  --on-pine-dim: rgba(255, 255, 255, 0.78);
  --on-pine-wash: rgba(255, 255, 255, 0.18);
  --ember: #c6552a;
  --rule: rgba(20, 24, 26, 0.12);
  --rule-strong: rgba(20, 24, 26, 0.22);
  --shadow-card: 0 1px 2px rgba(20, 24, 26, 0.06), 0 10px 24px rgba(20, 24, 26, 0.07);
  --shadow-lift: 0 2px 4px rgba(20, 24, 26, 0.08), 0 18px 40px rgba(20, 24, 26, 0.14);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --font-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f1314;
    --paper-deep: #080b0c;
    --surface: #191f20;
    --ink: #e8edec;
    --muted: #93a2a2;
    --pine: #4fc2a2;
    --pine-ink: #9fe3ce;
    --pine-wash: rgba(79, 194, 162, 0.12);
    --on-pine: #08110e;
    --on-pine-dim: rgba(8, 17, 14, 0.72);
    --on-pine-wash: rgba(8, 17, 14, 0.13);
    --ember: #ef8a5c;
    --rule: rgba(232, 237, 236, 0.14);
    --rule-strong: rgba(232, 237, 236, 0.26);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 24px rgba(0, 0, 0, 0.36);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.45), 0 18px 40px rgba(0, 0, 0, 0.5);
  }
}

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

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

body {
  margin: 0;
  min-height: 100svh;
  background:
    radial-gradient(120% 70% at 50% 0%, var(--paper) 0%, var(--paper-deep) 100%) fixed;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

h1,
h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--pine);
  outline-offset: 3px;
  border-radius: 4px;
}

.muted {
  color: var(--muted);
}

.mono {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .04em;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}