/* whyilost.app's plain pages (story 028, ADR-0064): privacy, support and about, in the Togethis pattern. The landing page in
   the game's own look is backlog 105. One column, the system font, light and dark. No script, no web font, no cookie. */
:root { --bg: #ffffff; --fg: #1a1a1a; --muted: #5f5f5f; --line: #e3e3e3; --link: #b8400c; color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #111111; --fg: #ededed; --muted: #a3a3a3; --line: #333333; --link: #ff8a57; }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}
header.top, main, footer { max-width: 42rem; margin-inline: auto; padding-inline: 20px; }
header.top {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px;
  padding-block: 18px; border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; letter-spacing: .02em; color: var(--fg); text-decoration: none; }
a { color: var(--link); text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
nav a[aria-current] { color: var(--fg); font-weight: 600; text-decoration: none; }
.langs { font-size: 15px; }
h1 { font-size: 1.9rem; line-height: 1.2; margin: 1.3em 0 .3em; text-wrap: balance; }
h2 { font-size: 1.12rem; line-height: 1.3; margin: 1.8em 0 .35em; }
p { margin: .5em 0; }
.meta { color: var(--muted); margin-top: 0; }
details { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 12px 0; }
summary { cursor: pointer; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.5 ui-monospace, Menlo, monospace; color: var(--muted); }
footer { margin-top: 3em; padding-block: 20px 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; }
footer nav { margin-bottom: .4em; }
main.root { padding-block: 16vh 40px; }
.choose { list-style: none; padding: 0; margin: 1.2em 0; display: grid; gap: 14px; }
.choose li { display: grid; gap: 2px; }
.choose a { font-weight: 600; font-size: 1.1rem; }
.choose span { color: var(--muted); }