| :root { |
| color-scheme: light dark; |
| --fg: #0f1115; |
| --muted: #5b6270; |
| --accent: #3b4b8a; |
| --bg: #fafafa; |
| --card: #ffffff; |
| --border: #e5e7eb; |
| --code-bg: #f4f4f7; |
| } |
|
|
| @media (prefers-color-scheme: dark) { |
| :root { |
| --fg: #e7e9ee; |
| --muted: #9aa3b2; |
| --accent: #8ea1ff; |
| --bg: #0c0e13; |
| --card: #13151b; |
| --border: #242733; |
| --code-bg: #1a1d25; |
| } |
| } |
|
|
| * { box-sizing: border-box; } |
|
|
| body { |
| margin: 0; |
| padding: 2.5rem 1.25rem 4rem; |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif; |
| font-size: 15px; |
| line-height: 1.55; |
| color: var(--fg); |
| background: var(--bg); |
| } |
|
|
| main { |
| max-width: 680px; |
| margin: 0 auto; |
| } |
|
|
| header { margin-bottom: 2.5rem; } |
|
|
| .mark { |
| font-size: 2.25rem; |
| margin-bottom: 0.25rem; |
| opacity: 0.9; |
| } |
|
|
| h1 { |
| font-size: 2rem; |
| margin: 0 0 0.5rem; |
| letter-spacing: -0.02em; |
| } |
|
|
| h2 { |
| font-size: 1.05rem; |
| text-transform: uppercase; |
| letter-spacing: 0.08em; |
| color: var(--muted); |
| margin: 2rem 0 0.75rem; |
| } |
|
|
| .tagline { |
| color: var(--muted); |
| font-size: 1.05rem; |
| margin: 0; |
| } |
|
|
| section p { color: var(--muted); margin: 0.25rem 0 0.75rem; } |
|
|
| pre { |
| background: var(--code-bg); |
| border: 1px solid var(--border); |
| border-radius: 8px; |
| padding: 0.85rem 1rem; |
| overflow-x: auto; |
| font-size: 13px; |
| margin: 0.5rem 0; |
| } |
|
|
| code { |
| font-family: ui-monospace, "SF Mono", Menlo, monospace; |
| font-size: 13px; |
| } |
|
|
| p code, li code { |
| background: var(--code-bg); |
| padding: 1px 5px; |
| border-radius: 4px; |
| } |
|
|
| .providers { |
| list-style: none; |
| padding: 0; |
| margin: 0.5rem 0; |
| display: grid; |
| gap: 0.4rem; |
| } |
|
|
| .providers li { |
| padding: 0.5rem 0.75rem; |
| background: var(--card); |
| border: 1px solid var(--border); |
| border-radius: 6px; |
| font-size: 14px; |
| color: var(--muted); |
| } |
|
|
| em { color: var(--fg); font-style: normal; font-weight: 600; } |
|
|
| footer { |
| margin-top: 3rem; |
| padding-top: 1.5rem; |
| border-top: 1px solid var(--border); |
| } |
|
|
| footer a { |
| color: var(--accent); |
| text-decoration: none; |
| font-size: 14px; |
| } |
|
|
| footer a:hover { text-decoration: underline; } |
|
|
