:root { --font: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; --bg: #f6f5f1; --text: #1b1b19; --muted: #78766f; color-scheme: light; }
:root[data-theme="dark"] { --bg: #131312; --text: #dedcd6; --muted: #85837c; color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h2, h3, p, ul, li { margin: 0; padding: 0; }
ul { list-style: none; }
body { font-family: var(--font); font-size: 0.875rem; line-height: 1.7; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

a { color: inherit; text-decoration: underline; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { color: var(--muted); }
:focus-visible { outline: 1px solid var(--text); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; }

.page { padding: 4.5rem 1.5rem 6rem clamp(1.5rem, 8vw, 7.5rem); overflow-wrap: break-word; }
.page > * { max-width: 34rem; }

.name { font-weight: 700; letter-spacing: 0.01em; text-decoration: none; }
.name:hover { color: var(--muted); }
.bar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 0.35rem; }
nav { display: flex; flex-wrap: wrap; gap: 1.25rem; color: var(--muted); }
nav a[aria-current="page"] { color: var(--text); font-weight: 700; }

.toggle { appearance: none; -webkit-appearance: none; background: none; border: 0; font: inherit; line-height: 1; color: var(--muted); cursor: pointer; display: inline-flex; padding: 0.375rem; margin: -0.375rem; }
.toggle:hover { color: var(--text); }
.toggle svg { width: 0.95rem; height: 0.95rem; display: block; }
.toggle .sun { display: none; }
:root[data-theme="dark"] .toggle .moon { display: none; }
:root[data-theme="dark"] .toggle .sun { display: block; }

main { margin-top: 3.25rem; }
main > * + * { margin-top: 1.05rem; }
h2 { font-size: 1em; font-weight: 700; margin-top: 2.75rem; }
h2 + * { margin-top: 0.55rem; }
h3 { font-size: 1em; font-weight: 700; color: var(--muted); margin-top: 1.75rem; }
h3 + * { margin-top: 0.35rem; }
ul { margin-top: 0.35rem; }
li { text-indent: -1.15rem; padding-left: 1.15rem; }
li::before { content: "— "; color: var(--muted); }
em { font-style: italic; color: var(--muted); }

.entries { margin-top: 1.5rem; }
.entries div + div { margin-top: 1.35rem; }
.entries span { display: block; color: var(--muted); }

footer { margin-top: 4rem; display: flex; flex-wrap: wrap; gap: 1.25rem; color: var(--muted); }

@media print {
  nav, footer, .skip { display: none; }
  body { background: #fff; color: #000; }
  .page { padding: 0; }
  .page > * { max-width: none; }
}
