:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --ink: #111111;
  --muted: #6b6b6b;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #111111; --ink: #ececec; --muted: #9a9a9a; }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  line-height: 1.7;
}
.skip {
  position: absolute; left: 0; top: 0;
  padding: .4rem .8rem;
  background: var(--ink); color: var(--bg);
  transform: translateY(-120%);
}
.skip:focus { transform: none; outline: 2px solid var(--ink); }
main {
  max-width: 40rem;
  margin: 0 auto;
  padding: 4rem 1.5rem 3rem;
}
h1 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 2.5rem;
  letter-spacing: .02em;
}
p { margin: 0 0 1.4rem; }
a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.foot { margin-top: 3.5rem; color: var(--muted); font-size: .85em; }