:root { --bg:#fff; --fg:#0f172a; --muted:#475569; --line:#e2e8f0; --accent:#1d4ed8; --accent-fg:#fff; --card:#f8fafc; }
@media (prefers-color-scheme: dark) { :root { --bg:#0f172a; --fg:#f1f5f9; --muted:#cbd5e1; --line:#334155; --accent:#93c5fd; --accent-fg:#0f172a; --card:#1e293b; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
.wrap { max-width:46rem; margin:0 auto; padding:0 16px; }
header.site { padding:20px 0; border-bottom:1px solid var(--line); }
header.site .wrap { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.brand { font-weight:700; font-size:1.25rem; color:var(--fg); text-decoration:none; }
.lilypad { display:inline-block; width:.8em; height:.8em; margin-right:.3em; vertical-align:baseline; }
nav a { margin-left:16px; color:var(--accent); }
main { padding:40px 0 56px; }
h1 { font-size:2.1rem; line-height:1.2; margin:0 0 12px; }
h2 { font-size:1.35rem; margin:40px 0 8px; }
.lead { font-size:1.2rem; color:var(--muted); margin:0 0 24px; }
a { color:var(--accent); }
a:focus-visible, .button:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.actions { display:flex; gap:12px; flex-wrap:wrap; margin:8px 0 8px; }
.button { display:inline-block; min-height:44px; padding:10px 18px; border-radius:8px; border:2px solid var(--accent); background:var(--accent); color:var(--accent-fg); font-weight:600; text-decoration:none; }
.button.secondary { background:transparent; color:var(--accent); }
.uses { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); margin:16px 0; padding:0; list-style:none; }
.uses li { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; }
.uses h3 { margin:0 0 6px; font-size:1.05rem; }
.uses p { margin:0; color:var(--muted); font-size:.97rem; }
ul.plain { padding-left:1.2rem; }
footer { border-top:1px solid var(--line); padding:20px 0 32px; color:var(--muted); font-size:.95rem; }
code { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.92em; background:var(--card); border:1px solid var(--line); border-radius:4px; padding:1px 5px; }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }