| :root { |
| color-scheme: dark; |
| } |
|
|
| body { |
| margin: 0; |
| min-height: 100vh; |
| display: grid; |
| place-items: center; |
| padding: 2rem; |
| font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; |
| background: radial-gradient(1200px 600px at 50% -10%, #1e2a4a, #0b0f1a 60%); |
| color: #e8ecf5; |
| } |
|
|
| .card { |
| text-align: center; |
| max-width: 620px; |
| padding: 2.5rem 2rem; |
| border: 1px solid #ffffff1a; |
| border-radius: 20px; |
| background: #ffffff08; |
| } |
|
|
| h1 { |
| font-size: clamp(2.5rem, 9vw, 4.5rem); |
| margin: 0 0 0.25rem; |
| color: #f1f5f9; |
| letter-spacing: -0.02em; |
| } |
|
|
| .rule { |
| width: 96px; |
| height: 4px; |
| margin: 0 auto 1.25rem; |
| border-radius: 999px; |
| background: linear-gradient(90deg, #7dd3fc, #a78bfa, #f472b6); |
| } |
|
|
| p { |
| color: #c3cbdb; |
| font-size: 1rem; |
| line-height: 1.6; |
| margin: 0.5rem 0; |
| } |
|
|
| button { |
| margin-top: 1.5rem; |
| padding: 0.6rem 1.2rem; |
| font-size: 1rem; |
| border-radius: 999px; |
| border: 1px solid #ffffff33; |
| background: #ffffff14; |
| color: inherit; |
| cursor: pointer; |
| } |
|
|
| button:hover { |
| background: #ffffff26; |
| } |
|
|
| .out { |
| min-height: 1.6rem; |
| margin-top: 1rem; |
| color: #7dd3fc; |
| } |
|
|
