:root { --bg:#fbfaf6; --ink:#222; --muted:#666; --link:#1565c0; --green:#1b7f3a; --btn:#1b7f3a; --todo:#b71c1c; }
/* --btn: the download buttons keep the darker green in dark mode too, for white words at 5:1 (WCAG AA). */
@media (prefers-color-scheme: dark) { :root { --bg:#16181a; --ink:#e8e6e1; --muted:#9a9a9a; --link:#7fb3ff; --green:#4caf50; --todo:#ff8a80; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 Inter, "Segoe UI", system-ui, sans-serif; }
main { max-width:44rem; margin:0 auto; padding:1.5rem 16px 6rem; }
h1 { font-size:1.6rem; margin:.4rem 0 .2rem; }
h2 { font-size:1.1rem; margin:1.6rem 0 .3rem; }
a { color:var(--link); }
code { font-size:.9em; overflow-wrap:anywhere; }
.muted { color:var(--muted); }
.todo { color:var(--todo); font-weight:600; }
.hero { display:flex; align-items:center; gap:1rem; }
.hero img { width:72px; height:72px; border-radius:16px; }
.links { list-style:none; padding:0; }
.links li { margin:.35rem 0; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* the screenshots slideshow (P5.17): a scroll-snap row (swipeable without JS), buttons added by the inline script */
.shots { margin:1.6rem 0; }
.shots-track { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; overscroll-behavior-x:contain; border-radius:12px; }
.shots-track.js { scrollbar-width:none; }
.shots-track.js::-webkit-scrollbar { display:none; }
.shots-track:focus-visible { outline:2px solid var(--link); outline-offset:2px; }
.shot { flex:0 0 100%; scroll-snap-align:center; margin:0; padding:16px 28px 34px; display:grid; grid-template-columns:auto 1fr; gap:1.5rem; align-items:center; }
.shot img { display:block; width:min(260px, 62vw); height:auto; border:8px solid #222; border-radius:28px; box-shadow:0 6px 24px rgb(0 0 0 / .18); background:#fff; }
.shot figcaption b { display:block; font-size:1.15rem; margin-bottom:.3rem; }
.shots-nav { display:flex; align-items:center; justify-content:center; gap:.25rem; margin-top:.5rem; }
.shots-nav[hidden] { display:none; }
.shots-nav button { min-width:44px; min-height:44px; border:0; background:none; color:var(--ink); font:inherit; cursor:pointer; border-radius:22px; }
.shots-nav button:hover { background:rgb(127 127 127 / .12); }
.shots-nav button:focus-visible { outline:2px solid var(--link); outline-offset:-2px; }
.shots-nav .arrow { font-size:1.9rem; line-height:1; }
.shots-nav .play { font-size:.9rem; color:var(--muted); padding:0 .6rem; }
.shots-nav .dots { display:flex; }
.shots-nav .dot { position:relative; min-width:28px; }
.shots-nav .dot::before { content:""; position:absolute; left:50%; top:50%; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:var(--muted); opacity:.45; }
.shots-nav .dot[aria-current]::before { background:var(--green); opacity:1; transform:scale(1.25); }
.credit { font-size:.85rem; text-align:center; }
@media (prefers-color-scheme: dark) { .shot img { border-color:#444; box-shadow:0 6px 24px rgb(0 0 0 / .5); } }
@media (max-width:560px) { .shot { grid-template-columns:1fr; justify-items:center; text-align:center; gap:.9rem; } }
@media (prefers-reduced-motion: reduce) { .shots-track { scroll-behavior:auto; } }
/* the download button stays on screen on every page and device (user 2026-10-21): a pill over the bottom right
   corner, above the iPhone home bar; main keeps 6rem of room below so it never covers the last line */
.dl-fab { position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:20; display:inline-flex; align-items:center; min-height:44px; padding:.6rem 1.15rem; border-radius:999px; background:var(--btn); color:#fff; font-weight:600; text-decoration:none; box-shadow:0 4px 16px rgb(0 0 0 / .25); }
.dl-fab:hover { filter:brightness(1.08); }
.dl-fab:focus-visible { outline:3px solid var(--link); outline-offset:3px; }
/* download.html: the APK link itself is the button, kept at the top while the page scrolls */
main > p:has(> a.dl) { position:sticky; top:0; z-index:20; margin:0 -16px; padding:.6rem 16px; background:var(--bg); box-shadow:0 2px 8px rgb(0 0 0 / .08); }
a.dl { display:inline-flex; align-items:center; min-height:44px; padding:.5rem 1.1rem; border-radius:999px; background:var(--btn); color:#fff; font-weight:600; text-decoration:none; }
@media print { .dl-fab { display:none; } main > p:has(> a.dl) { position:static; box-shadow:none; } }