:root { --bg:#fafaf8; --fg:#1c1c1a; --muted:#6b6b66; --line:#e2e2dc; }
@media (prefers-color-scheme: dark) { :root { --bg:#141413; --fg:#ececE8; --muted:#9a9a93; --line:#2b2b28; } }
html,body { min-height:100%; margin:0; }
body { background:var(--bg); color:var(--fg); font:18px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; display:grid; place-items:center; padding:48px 16px; box-sizing:border-box; }
main { text-align:center; width:100%; max-width:480px; }
h1 { font-size:clamp(2.5rem,8vw,4.5rem); font-weight:600; letter-spacing:-.02em; margin:0 0 .25em; }
p { color:var(--muted); margin:0 0 1.5em; }
a { color:inherit; }
nav ul { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
nav a { display:block; padding:14px 18px; border:1px solid var(--line); border-radius:10px; text-decoration:none; font-weight:500; }
nav a:hover, nav a:focus-visible { border-color:var(--fg); }
.crumbs { margin-top:2em; font-size:.9rem; }
select { width:100%; font:inherit; color:var(--fg); background:var(--bg); padding:14px 18px; border:1px solid var(--line); border-radius:10px; }
select:focus-visible { outline:2px solid var(--fg); outline-offset:2px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; text-align:left; }
.grid a small { display:block; color:var(--muted); font-weight:400; font-size:.85rem; margin-top:2px; }
main.wide { max-width:760px; }
nav a small { display:block; color:var(--muted); font-weight:400; font-size:.85rem; }