:root { --bg: #0f1116; --panel: #151824; --text: #f0f1f5; --muted: #c6c8d6; --border: #33384a; --link: #a9c0ff; --max: 920px; --radius: 12px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height: 1.6; font-size: 16px; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } .container { max-width: var(--max); margin: 0 auto; padding: 28px 18px 48px; } .header { border-bottom: 1px solid var(--border); padding-bottom: 14px; margin-bottom: 22px; } .brand { display: flex; flex-direction: column; gap: 6px; } .brand h1 { font-size: 22px; margin: 0; letter-spacing: 0.2px; font-weight: 650; } .brand p { margin: 0; color: var(--muted); font-size: 15px; } .nav { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px 14px; } .nav a { font-size: 15px; color: var(--text); padding: 7px 11px; border: 1px solid var(--border); border-radius: 999px; background: transparent; } .nav a:hover { text-decoration: none; border-color: #454c66; } .main { display: grid; gap: 16px; } .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 18px; } .card h2 { margin: 0 0 10px; font-size: 17px; font-weight: 650; } .card p, .card li { color: var(--muted); font-size: 15px; } .card ul { margin: 10px 0 0; padding-left: 18px; } .footer { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; } .kicker { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; } .notice { font-size: 14px; color: var(--muted); } .callout { border-left: 3px solid #465a9a; padding-left: 12px; margin-top: 10px; } .nav a.active { border-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.08); }