:root{color-scheme:dark}*{box-sizing:border-box;margin:0}
body{min-height:100dvh;display:grid;place-items:center;background:radial-gradient(1200px 600px at 50% -10%,#10202c 0,#07090c 60%);color:#e6edf3;font:15px/1.4 -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",sans-serif;-webkit-tap-highlight-color:transparent}
.box{width:min(320px,90vw);text-align:center}
h1{font-size:28px;letter-spacing:-.02em;font-weight:650}h1 b{color:#4fd1ff}
p{color:#7d8a99;font-size:13px;margin:6px 0 26px}
.dots{display:flex;gap:14px;justify-content:center;margin-bottom:28px;height:14px}
.dots i{width:12px;height:12px;border-radius:50%;border:1.5px solid #3a4654;transition:.15s}
.dots i.on{background:#4fd1ff;border-color:#4fd1ff;box-shadow:0 0 12px #4fd1ff88}
.dots.err i{border-color:#ff5470;background:#ff547044;animation:sh .35s}
@keyframes sh{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pad button{height:64px;border-radius:18px;border:1px solid #ffffff12;background:#ffffff08;color:#e6edf3;font-size:24px;font-weight:500;backdrop-filter:blur(10px);cursor:pointer;font-variant-numeric:tabular-nums}
.pad button:active{background:#4fd1ff22}.pad button.k{font-size:15px;color:#7d8a99}
.msg{min-height:20px;margin-top:18px;color:#ff5470;font-size:13px}
