:root {
  color-scheme: light;
  --page-background: #ffffff;
  --page-text: #172033;
  --muted-text: #526078;
  --surface-background: #eef3fb;
  --accent-color: #1268c4;
  font-family: "Nunito Sans", "Inter", "Segoe UI", Tahoma, sans-serif;
  line-height: 1.5;
}

:root.dark-mode {
  color-scheme: dark;
  --page-background: #0d111b;
  --page-text: #eef2fa;
  --muted-text: #acb8ce;
  --surface-background: #192235;
  --accent-color: #8bbfff;
}

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

body {
  margin: 0;
  min-width: 280px;
  min-height: 100vh;
  background: var(--page-background);
  color: var(--page-text);
}

a {
  color: var(--accent-color);
}

.site-shell {
  width: min(100% - 3rem, 72rem);
  margin-inline: auto;
  padding-block: clamp(3rem, 10vw, 8rem);
}

.eyebrow {
  color: var(--accent-color);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}

h1 {
  margin-block: 0.5rem;
  font-size: clamp(3rem, 10vw, 6rem);
  line-height: 1.1;
}

.site-intro {
  font-size: clamp(1rem, 3vw, 1.25rem);
}

.site-note {
  max-width: 38rem;
  color: var(--muted-text);
}

.theme-status {
  margin: 0;
  padding: 0.75rem 1.5rem;
  background: var(--surface-background);
  color: var(--page-text);
  font-size: 0.875rem;
}

.theme-status:not([hidden]) {
  display: block;
}