:root { color-scheme: dark; }
html, body { margin: 0; height: 100%; }
body { display: grid; place-items: center; padding: 16px; box-sizing: border-box;
  background: radial-gradient(ellipse at 50% 40%, #08263a 0%, #02070d 65%); color: #cfefff;
  font-family: "Segoe UI", system-ui, sans-serif; }
form { width: min(340px, 100%); text-align: center; }
.mark { width: 120px; color: #3fdcff; filter: drop-shadow(0 0 12px rgba(63,220,255,.6)); animation: spin 14s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mark { animation: none; } }
h1 { letter-spacing: .4em; color: #3fdcff; margin: 12px 0 2px; font-weight: 600; text-shadow: 0 0 14px rgba(63,220,255,.5); }
p { margin: 0 0 22px; color: #6f9cb3; font-family: Consolas, monospace; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
input, button { width: 100%; box-sizing: border-box; padding: 12px; font: inherit; font-size: 16px; color: inherit; }
input { background: rgba(0,0,0,.4); border: 1px solid rgba(64,214,255,.3); outline: none; margin-bottom: 10px; }
input:focus { border-color: rgba(64,214,255,.7); }
button { background: rgba(63,220,255,.1); border: 1px solid rgba(64,214,255,.6); color: #3fdcff; cursor: pointer;
  letter-spacing: .2em; text-transform: uppercase; font-size: 13px; }
button:hover { background: rgba(63,220,255,.2); }
#err { min-height: 20px; margin-top: 12px; color: #ff4d61; font-family: Consolas, monospace; font-size: 13px; }