*{box-sizing:border-box}body{margin:0;background:#071624;color:#eef8ff;font:15px/1.5 system-ui,-apple-system,sans-serif}main{max-width:620px;margin:auto;padding:20px 22px 24px}header{display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{font-size:19px;font-weight:850;letter-spacing:-.7px}.brand span{font-weight:350;margin-left:4px;color:#83a1b7}.secure{font-size:11px;color:#a9becd;display:flex;align-items:center;gap:7px}.secure i{width:6px;height:6px;border-radius:50%;background:#4ed5c8;box-shadow:0 0 12px #4ed5c8}.steps{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;color:#587187;margin-top:26px}.steps .active{color:#4ed5c8}.dial{position:relative;width:min(100%,350px);margin:10px auto -10px;aspect-ratio:360/330}.dial svg{width:100%;height:100%;overflow:visible}.track,.arc,.ticks{fill:none}.track{stroke:#173346;stroke-width:9}.arc{stroke:#4ed5c8;stroke-width:9;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .4s ease,stroke .3s;filter:drop-shadow(0 0 7px #4ed5c855)}.ticks{stroke:#2d4c60;stroke-width:2;stroke-dasharray:1 14}.readout{position:absolute;top:31%;left:0;width:100%;text-align:center;display:flex;flex-direction:column;align-items:center}.readout>span:first-child{font-size:10px;letter-spacing:2px;color:#7e9bb0}.readout strong{font-size:clamp(45px,12vw,66px);font-weight:600;letter-spacing:-3px;line-height:1.25;font-variant-numeric:tabular-nums}.readout strong span{font-size:.5em;color:#91abbd;letter-spacing:-1px}.readout>span:last-child{font-size:13px;color:#94afc1}.start{position:absolute;left:50%;top:51%;transform:translate(-50%,-50%);width:166px;height:166px;border:2px solid #4ed5c8;border-radius:50%;background:radial-gradient(circle at 50% 60%,#173e4c,#0b202e);color:white;box-shadow:0 0 0 10px #4ed5c807,0 0 40px #4ed5c810;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.start span{font-size:24px;letter-spacing:3px;font-weight:600}.start small{font-size:11px;color:#98b9c8}.dial-caption{position:absolute;bottom:10px;width:100%;text-align:center;font-size:11px;color:#728fa2}body[data-mode=idle] .readout{visibility:hidden}body:not([data-mode=idle]) .start{display:none}#status{text-align:center;min-height:23px;margin:4px 0 18px;color:#a9c2d2;font-size:12px}.results{display:grid;grid-template-columns:1fr 1fr;gap:12px}.results article{border:1px solid #1c394b;border-radius:17px;background:#0c2130;padding:16px 18px;transition:border-color .2s}.results .active{border-color:#4ed5c8}.label{display:block;color:#a4bccd;font-size:12px}.label b{color:#4ed5c8;font-size:17px;margin-right:5px}.results strong{font-size:clamp(24px,7vw,35px);display:inline-block;font-weight:600;letter-spacing:-1px;font-variant-numeric:tabular-nums;margin-top:7px}.results small{font-size:10px;color:#7894a7;margin-left:6px}.latency{display:flex;justify-content:center;gap:28px;border-bottom:1px solid #183344;padding:18px 0;color:#829eaf;font-size:11px}.latency strong{font-size:16px;color:#eef8ff;font-weight:500;margin:0 5px}.latency small{font-size:10px}.actions{text-align:center;margin-top:14px}.primary,.secondary{font:inherit;font-size:13px;cursor:pointer;padding:12px 20px;border-radius:28px;border:1px solid #29495e}.primary{background:#4ed5c8;border-color:#4ed5c8;color:#061822;font-weight:700}.secondary{background:transparent;color:#a6c0d0}button[hidden]{display:none}.hint{color:#6f8e9f;font-size:10px;text-align:center;margin:17px auto 12px;max-width:330px}details{font-size:11px;color:#8ca8ba;text-align:center}details p{text-align:left}summary{cursor:pointer}a{color:#4ed5c8}dialog{background:#102a3a;color:#eff8ff;border:1px solid #2e546b;border-radius:22px;padding:24px;width:min(90%,390px)}dialog::backdrop{background:#0009;backdrop-filter:blur(4px)}dialog h2{margin:0 0 10px}dialog p{color:#a7c0d0;font-size:13px}dialog>div{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}:focus-visible{outline:3px solid #fff;outline-offset:5px}@media(max-height:740px){main{padding-top:12px}.steps{margin-top:16px}.dial{width:min(100%,280px)}.start{width:140px;height:140px}.readout strong{font-size:50px}.results article{padding:12px 14px}.latency{padding:12px 0}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
