:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: #111519; color: #dce2e6; font: 14px/1.5 system-ui, -apple-system, sans-serif; }
main { max-width: 900px; margin: 0 auto; padding: 32px 24px; }
h1 { margin: 0 0 20px; font-size: 23px; font-weight: 550; letter-spacing: -.03em; }
h1 a { color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
li { display: grid; grid-template-columns: 24ch minmax(0, 1fr); gap: 18px; padding: 5px 0; align-items: baseline; }
time { color: #83919c; font: 12px/1.5 ui-monospace, monospace; white-space: nowrap; }
a { color: #bacbd5; text-decoration: none; overflow-wrap: anywhere; }
a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid #96d9d1; outline-offset: 3px; }
@media (max-width: 550px) {
  main { padding: 24px 16px; }
  li { gap: 1px; grid-template-columns: minmax(0, 1fr); padding: 7px 0; }
  time { font-size: 11px; }
}