:root{color-scheme:dark;font-family:system-ui,sans-serif;color:#e8f1ff;background:#020713}*{box-sizing:border-box}body{min-height:100vh;margin:0;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 20%,#063149,transparent 60%)}main{width:min(420px,92vw);padding:34px;border:1px solid #187898;border-radius:22px;background:#05111ee8;box-shadow:0 0 50px #00baff15}h1{letter-spacing:3px;text-align:center;font-size:28px}p,small{text-align:center;display:block;color:#91b6cc}.orb{margin:auto;width:74px;height:74px;display:grid;place-items:center;border-radius:50%;font-size:48px;font-weight:900;color:#06101a;background:#e8f5ff;outline:2px solid #00d4ff;outline-offset:9px;box-shadow:0 0 32px #00bdff80}label{display:block;margin:18px 0 8px;font-size:14px}input{margin-top:8px;width:100%;padding:13px;border:1px solid #27617c;border-radius:9px;background:#020b14;color:#fff;font:inherit}input:focus{outline:2px solid #00ceff}button{width:100%;padding:14px;margin:18px 0;border:0;border-radius:9px;background:#00cfff;color:#001321;font:700 16px system-ui;cursor:pointer}button:disabled{opacity:.5}output{display:block;color:#ff98ac;min-height:24px;font-size:14px}small{margin-top:18px;font-size:12px}