:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: #0e0818; color: #e8dcfa;
  font: 1rem/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { width: min(32rem, 90vw); text-align: center; padding: 2rem 0; }
.mark { display: block; width: 5.5rem; height: auto; margin: 0 auto 1.25rem; }
.logo { width: min(22rem, 100%); height: auto; margin-bottom: 1.5rem; }
a { color: #c58bff; }
.btn, button { display: inline-block; background: #a855f7; color: #0e0818; border: 0; border-radius: 6px; padding: .65rem 1.4rem;
  font: 700 1rem ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; text-decoration: none; cursor: pointer; }
.btn:hover, button:hover { background: #c58bff; }
input { width: 100%; background: #1a1030; color: #e8dcfa; border: 1px solid #2e1f52; border-radius: 6px; padding: .65rem .8rem;
  font: inherit; margin-bottom: 1rem; }
a:focus-visible, input:focus-visible, button:focus-visible { outline: 2px solid #a855f7; outline-offset: 3px; }
.meta { color: #b3a5cf; font: .8rem ui-monospace, Menlo, Consolas, monospace; word-break: break-all; }
.err { color: #ff748f; }
.btn.alt { background: transparent; color: #c58bff; border: 2px solid #a855f7; }
.btn.alt:hover { background: #1a1030; color: #fff; }
code { background: #120a22; border: 1px solid #2e1f52; border-radius: 4px; padding: .08em .35em; }