:root { --bg:#f4f3ef; --card:#fff; --text:#121212; --muted:#5c5b55; --line:#e2e0d8; --accent:#ffd23f; }
@media (prefers-color-scheme: dark) { :root { --bg:#0f0f0f; --card:#1b1b1a; --text:#f4f3ef; --muted:#a6a49c; --line:#2e2d2a; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
a { color: inherit; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 3px; }
header { max-width: 720px; margin: 0 auto; padding: 20px 16px 0; display:flex; align-items:center; gap:12px; }
header img { width:40px; height:40px; border-radius:10px; }
header b { font-size:20px; flex:1; }
header nav a { font-size:15px; color:var(--muted); margin-left:14px; }
main { max-width: 720px; margin: 0 auto; padding: 8px 16px 64px; }
h1 { font-size: clamp(30px, 6vw, 44px); line-height:1.1; letter-spacing:-0.02em; margin: 28px 0 8px; }
h2 { font-size: 21px; margin: 34px 0 8px; }
h3 { font-size: 17px; margin: 22px 0 4px; }
.lede { color: var(--muted); font-size: 19px; margin: 0 0 24px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px 20px; margin: 16px 0; }
.bar { display:inline-block; background:#121212; border-radius:4px; width:7.5em; height:0.95em; vertical-align:-0.1em; }
.btn { display:inline-block; background:var(--accent); color:#121212; font-weight:700; padding:13px 20px; border-radius:14px; text-decoration:none; }
ul { padding-left: 22px; }
footer { color: var(--muted); font-size: 14px; margin-top: 48px; }