:root { color-scheme: dark light; --bg:#0b0b0c; --fg:#ececec; --mut:#8b8b90; --line:#232326; --card:#111113; }
@media (prefers-color-scheme: light) { :root { --bg:#f7f7f5; --fg:#141414; --mut:#6a6a6f; --line:#dedede; --card:#fff; } }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 760px; margin: 0 auto; padding: 40px 24px 80px; }
a { color: inherit; text-underline-offset: 3px; }
.top, footer { display: flex; gap: 20px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.top a, footer a { color: var(--mut); text-decoration: none; }
.top a:hover, footer a:hover { color: var(--fg); }
footer { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line); }
h1 { font-size: 30px; line-height: 1.2; margin: 28px 0 10px; letter-spacing: -.01em; font-weight: 600; }
h2 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); margin: 32px 0 6px; font-weight: 600; }
p { margin: 0 0 12px; max-width: 64ch; }
.meta { color: var(--mut); font-size: 13px; }
.tools { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.tools a { display: grid; gap: 4px; padding: 16px; background: var(--card); text-decoration: none; height: 100%; box-sizing: border-box; }
.tools a:hover { background: var(--bg); }
.tools b { font-weight: 600; }
.tools span { color: var(--mut); font-size: 13px; line-height: 1.5; }
.btn { display: inline-block; padding: 10px 16px; border: 1px solid var(--fg); text-decoration: none; margin: 4px 8px 0 0; }
@media (max-width: 600px) { .tools { grid-template-columns: 1fr; } }