:root { --bg:#ffffff; --fg:#1a1a1a; --muted:#4a4a4a; --link:#0b3d91; --rule:#b8b8b8; --head:#f0f0f0; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#121212; --fg:#f2f2f2; --muted:#cfcfcf; --link:#9cc4ff; --rule:#5a5a5a; --head:#222222; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font: 1.125rem/1.6 Georgia, "Times New Roman", serif; }
.wrap { max-width: 60rem; margin: 0 auto; padding: 0 1rem; }
a { color: var(--link); }
a:focus, summary:focus { outline: 3px solid var(--link); outline-offset: 2px; }
.skip { position:absolute; left:-999px; }
.skip:focus { position:static; display:inline-block; padding:.5rem; }
header.site { border-bottom: 2px solid var(--rule); padding: 1rem 0; }
header.site p.name { font-size: 1.5rem; font-weight: bold; margin: 0; }
header.site p.tag { margin: 0; color: var(--muted); }
nav ul { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-wrap: wrap; gap: 1rem; }
h1 { font-size: 2rem; line-height: 1.25; }
h2 { font-size: 1.5rem; margin-top: 2.5rem; border-top: 1px solid var(--rule); padding-top: 1rem; }
h3 { font-size: 1.2rem; }
.lede { font-size: 1.25rem; }
p.verse { margin: .5rem 0; }
p.slot { border: 1px dashed var(--rule); padding: .75rem; color: var(--muted); }
p.source { color: var(--muted); font-size: 1rem; margin: -.5rem 0 1.25rem 1rem; }
audio { display:block; width:100%; max-width: 40rem; margin: .5rem 0 1rem; }
.video { position:relative; width:100%; max-width: 48rem; aspect-ratio: 16 / 9; margin: .5rem 0 1rem; }
.video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
blockquote { margin: 1rem 0; padding: .25rem 1rem; border-left: 4px solid var(--rule); }
code { font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: .95em; background: var(--head); padding: .1rem .3rem; }
pre { background: var(--head); border: 1px solid var(--rule); padding: .75rem; overflow-x: auto; font-size: 1rem; }
pre code { background: none; padding: 0; }
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; margin: 1rem 0; }
caption { text-align: left; font-weight: bold; padding: .5rem 0; }
th, td { border: 1px solid var(--rule); padding: .5rem; text-align: left; vertical-align: top; }
thead th { background: var(--head); }
footer { border-top: 2px solid var(--rule); margin-top: 3rem; padding: 1rem 0 2rem; color: var(--muted); font-size: 1rem; }