*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--s5); }
body {
  margin: 0;
  min-height: 100dvh;
  font: var(--step-0)/1.5 var(--font-ui);
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(70rem 32rem at 85% -12%, var(--glow), transparent 70%),
    radial-gradient(48rem 30rem at -10% 105%, var(--glow-2), transparent 70%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
h1, h2, h3 { font-family: var(--font-serif); font-weight: 600; line-height: 1.2; margin: 0 0 var(--s3); letter-spacing: -0.01em; }
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
p { margin: 0 0 var(--s4); }
a { color: var(--accent-text); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--accent); color: var(--on-accent); }

.muted { color: var(--ink-muted); }
.small { font-size: var(--step--1); }
.reading { font-family: var(--font-serif); font-size: var(--step-read); line-height: 1.6; max-width: 68ch; }
.sr-only {
  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; border: 0;
}

.skip-link {
  position: absolute; left: var(--s4); top: -4rem; z-index: 100;
  padding: var(--s3) var(--s4); border-radius: var(--r-sm);
  background: var(--ink); color: var(--paper); text-decoration: none;
  transition: top 0.15s var(--ease);
}
.skip-link:focus { top: var(--s3); }

.boot-splash { display: grid; place-items: center; min-height: 60dvh; }
.boot-mark {
  width: 3rem; height: 3rem; background: var(--accent); transform: rotate(45deg); border-radius: 6px;
  animation: boot-pulse 1.6s var(--ease) infinite;
}
@keyframes boot-pulse { 0%, 100% { opacity: 0.35; transform: rotate(45deg) scale(0.88); } 50% { opacity: 1; transform: rotate(45deg) scale(1); } }
.noscript { padding: var(--s5); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}