:root {
  color-scheme: light;
  --fg:#171512; --muted:#6b645c; --bg:#faf8f5; --raised:#fffdfa;
  --line:#e6e0d8; --accent:#b4452f; --accent-soft:#f3e4df;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fg:#f2efeb; --muted:#a49c92; --bg:#16150f; --raised:#1e1c16;
    --line:#2e2a24; --accent:#e08b6f; --accent-soft:#2b211c;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --fg:#f2efeb; --muted:#a49c92; --bg:#16150f; --raised:#1e1c16;
  --line:#2e2a24; --accent:#e08b6f; --accent-soft:#2b211c;
}
* { box-sizing:border-box }
body {
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.65 ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap { max-width:46rem; margin:0 auto; padding:clamp(2.5rem,8vw,5rem) 1rem; }
@media (min-width:30rem) { .wrap { padding-left:1.25rem; padding-right:1.25rem } }
a { color:var(--accent) }
h1 { font-size:clamp(1.9rem,6vw,2.9rem); letter-spacing:-.02em; line-height:1.15; margin:0 0 .35em; }
h2 { font-size:1.05rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
     font-weight:600; margin:3.5rem 0 1rem; }
h3 { font-size:1.05rem; margin:2rem 0 .4rem; }
p { margin:0 0 1rem; max-width:36rem }
.lede { color:var(--muted); font-size:1.075rem; margin:0 0 1.5rem; max-width:34rem; }
.back { display:inline-block; margin-bottom:2rem; font-size:.9rem; text-decoration:none }
.back:hover { text-decoration:underline }

ul.apps { list-style:none; padding:0; margin:0; border-top:1px solid var(--line); }
ul.apps li { border-bottom:1px solid var(--line) }
ul.apps a {
  display:flex; flex-wrap:wrap; gap:.15rem 1rem; align-items:baseline;
  padding:.95rem .25rem; text-decoration:none; color:inherit;
}
ul.apps a:hover { background:var(--accent-soft) }
.name { font-weight:600 }
.what { color:var(--muted); font-size:.93rem }

dl.facts { margin:0; border-top:1px solid var(--line) }
dl.facts div { display:flex; flex-wrap:wrap; gap:.15rem 1rem; padding:.8rem .25rem;
               border-bottom:1px solid var(--line) }
dl.facts dt { flex:0 0 11rem; color:var(--muted); font-size:.93rem; margin:0 }
dl.facts dd { margin:0; flex:1 1 14rem }

footer { margin-top:4rem; padding-top:1.5rem; border-top:1px solid var(--line);
         color:var(--muted); font-size:.9rem }
footer p { margin:0 0 .5rem }
footer nav a { margin-right:1rem; display:inline-block }