:root { color-scheme: light dark; font-family: system-ui, sans-serif; }
body { min-height: 100vh; margin: 0; display: grid; place-items: center; background: #f5f3ff; color: #211a33; }
.card { width: min(28rem, calc(100% - 3rem)); padding: 2rem; border-radius: 1.5rem; background: white; text-align: center; box-shadow: 0 1rem 3rem #392c5c24; }
.mark { width: 3.5rem; height: 3.5rem; margin: auto; display: grid; place-items: center; border-radius: 1rem; background: #6f4cff; color: white; font-size: 1.7rem; font-weight: 700; }
h1 { margin-bottom: 1.75rem; }
.code { display: block; margin: .5rem 0 1rem; font: 700 1.8rem ui-monospace, monospace; letter-spacing: .16em; }
button { border: 0; border-radius: .8rem; padding: .8rem 1.2rem; background: #6f4cff; color: white; font: inherit; font-weight: 650; cursor: pointer; }
nav { margin-top: 2rem; } nav a { color: #5635d8; } nav span { margin: 0 .5rem; }.muted { color: #706a7c; }
@media (prefers-color-scheme: dark) { body { background: #17131f; color: #f7f2ff; }.card { background: #251f30; }nav a { color: #b9a5ff; } }