:root { color-scheme: dark; font-family: Inter, system-ui, sans-serif; background: #080c14; color: #edf2fa; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(ellipse at 70% 0, #123066 0, transparent 60%); }
header { display: flex; align-items: center; gap: 14px; padding: 24px max(24px, calc((100vw - 1040px)/2)); border-bottom: 1px solid #243146; font-size: 18px; font-weight: 650; }
.brand { color: #4b88ff; font-weight: 900; font-size: 30px; font-style: italic; }
.badge { margin-left: auto; padding: 6px 12px; background: #172b4c; border-radius: 100px; font-size: 14px; color: #a9c6ff; white-space: nowrap; }
main { max-width: 780px; margin: 70px auto; padding: 0 24px; }
.eyebrow { font-weight: 650; letter-spacing: .12em; font-size: 15px; color: #86afff; }
h1 { font-size: clamp(36px, 6vw, 58px); line-height: 1.1; letter-spacing: -.035em; margin: 20px 0; }
p { font-size: 19px; line-height: 1.65; color: #c0ccdf; }
section { margin: 32px 0 24px; padding: 28px; border: 1px solid #2b3b55; background: #101a2bcc; border-radius: 18px; }
h2 { margin: 0; font-size: 25px; }
button, .login-button { display: inline-flex; align-items: center; gap: 12px; padding: 15px 22px; border: 0; border-radius: 10px; color: white; background: #175ee8; font-size: 18px; font-weight: 650; cursor: pointer; }
button:hover, .login-button:hover { background: #2673ff; }
button:focus-visible, .login-button:focus-visible { outline: 3px solid #acd0ff; outline-offset: 4px; }
button img, .login-button img { width: 25px; height: 20px; }
.secondary { background: #253651; }
.muted, footer { font-size: 16px; color: #a4b3cb; line-height: 1.6; }
.notice { border-left: 3px solid #408aff; background: #162944; padding: 14px 18px; border-radius: 6px; }
footer { margin-top: 42px; }
a { color: #a9c6ff; text-decoration: none; }
a:hover { color: white; }
.reader { max-width: 1200px; }
iframe { display: block; width: 100%; height: 75vh; border: 1px solid #2b3b55; border-radius: 12px; background: #101a2b; }
ul { padding: 0; list-style: none; }
li { padding: 16px 0; border-bottom: 1px solid #2b3b55; font-size: 19px; }
li span { display: block; color: #a4b3cb; font-size: 16px; margin-top: 5px; }
@media (max-width: 500px) { header { gap: 9px; font-size: 16px; padding: 20px 16px; } .badge { font-size: 12px; } main { margin-top: 40px; } section { padding: 22px; } }