:root { --bg:#0b0f0c; --fg:#59e36f; --dim:#4c8a57; --hi:#e8ffe9; --amber:#ffc240; --cyan:#66dbff; --line:#1d3a23; }
@media (prefers-color-scheme: light) {
  :root { --bg:#ffffff; --fg:#1a1a1a; --dim:#6a6a6a; --hi:#000000; --amber:#b86600; --cyan:#0061d1; --line:#dddddd; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.6 Menlo, Consolas, "Courier New", monospace; }
main { max-width: 720px; margin: 0 auto; padding: 28px 16px 64px; }
.bar { color: var(--dim); font-size: 0.85rem; border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 28px;
       display: flex; flex-wrap: wrap; gap: 6px 18px; }
.bar a { color: var(--cyan); text-decoration: none; }
.bar a:hover { text-decoration: underline; }
h1 { color: var(--hi); font-size: 1.5rem; margin: 0 0 4px; letter-spacing: 0.04em; }
h2 { color: var(--hi); font-size: 1rem; margin: 32px 0 6px; text-transform: uppercase; letter-spacing: 0.06em; }
p, li { max-width: 66ch; }
ul { padding-left: 1.2em; }
a { color: var(--cyan); }
.dim { color: var(--dim); }
.big { color: var(--amber); font-size: 1.1rem; }

.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.logo { display:block; margin: 6px 0 14px; image-rendering: pixelated; }