:root { color-scheme: light dark; font-family: system-ui, sans-serif; background: #14111d; color: #f4f1fa; }
body { margin: 0; padding: 24px; }
main { box-sizing: border-box; max-width: 620px; margin: 8vh auto; padding: 28px; border: 1px solid #51465f; border-radius: 20px; background: #211b2c; }
h1 { line-height: 1.15; font-size: clamp(1.8rem, 6vw, 2.5rem); }
p { line-height: 1.6; overflow-wrap: anywhere; }
.label { color: #dbb9ff; font-size: .8rem; letter-spacing: .12em; font-weight: 700; }
.button { display: inline-flex; align-items: center; box-sizing: border-box; min-height: 48px; padding: 12px 18px; border-radius: 12px; background: #dfb9ff; color: #261334; text-decoration: none; font-weight: 700; }
.button:focus-visible { outline: 3px solid white; outline-offset: 5px; }
.note { color: #c7bdcf; font-size: .9rem; }
code { color: #e7caff; }
@media (max-width: 400px) { body { padding: 12px; } main { padding: 20px; margin: 24px auto; } }