:root { color-scheme: light dark; font-family: system-ui, sans-serif; }
body { margin: 0; min-height: 100dvh; display: grid; place-items: center; background: #f6f3fa; color: #30293b; }
main { width: min(360px, calc(100% - 48px)); padding: 32px 0; }
h1 { margin: 0 0 16px; font-size: 24px; font-weight: 500; }
p { font-size: 14px; line-height: 1.8; }
a { display: inline-flex; min-height: 44px; align-items: center; margin-top: 16px; padding: 0 20px; border-radius: 8px; background: #8055d9; color: #fff; text-decoration: none; }
a[hidden] { display: none; }
.detail { margin-top: 28px; font-size: 12px; color: #888092; }
@media (prefers-color-scheme: dark) { body { background: #24222b; color: #eeebf4; } .detail { color: #a7a0b5; } }