:root{--c:#3DDBFF;--bg:#04080d;--fg:#e8f6ff;--mut:#7fa3b5}
body.kitt{--c:#ff2a1f;--bg:#060303;--fg:#ffe9e6;--mut:#b5847f}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:radial-gradient(ellipse at center,color-mix(in srgb,var(--c) 10%,var(--bg)) 0%,var(--bg) 70%);color:var(--fg);font-family:Inter,system-ui,sans-serif;display:grid;place-items:center;padding:24px}
.box{width:min(360px,100%);text-align:center}
.mark{width:120px;height:120px;filter:drop-shadow(0 0 12px var(--c))}
.mark circle{fill:none;stroke:var(--c)}
.r1{stroke-width:1.5;stroke-dasharray:6 10;animation:spin 18s linear infinite;transform-origin:60px 60px}
.r2{stroke-width:3;stroke-dasharray:40 20;opacity:.7;animation:spin 9s linear infinite reverse;transform-origin:60px 60px}
.core{fill:var(--c)!important;opacity:.85;animation:pulse 2.4s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{50%{opacity:.45}}
h1{font-family:Rajdhani,sans-serif;letter-spacing:.45em;font-weight:700;margin:14px 0 2px;padding-left:.45em}
.sub{color:var(--mut);margin:0 0 26px;font-size:14px;letter-spacing:.1em;text-transform:uppercase}
form{display:grid;gap:10px;text-align:left}
label{font-size:13px;color:var(--mut);letter-spacing:.08em;text-transform:uppercase}
input{background:rgba(255,255,255,.04);border:1px solid color-mix(in srgb,var(--c) 45%,transparent);color:var(--fg);padding:13px 14px;border-radius:10px;font-size:16px;outline:none}
input:focus{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 25%,transparent)}
button{margin-top:6px;background:var(--c);color:var(--bg);border:0;border-radius:10px;padding:13px;font-family:Rajdhani,sans-serif;font-weight:700;font-size:17px;letter-spacing:.15em;text-transform:uppercase;cursor:pointer}
button:disabled{opacity:.5}
#err{min-height:1.2em;color:#ff7a6b;margin:4px 0 0;font-size:14px}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}