:root{color-scheme:light;--ink:#26344c;--muted:#5d6b82;--edge:#ffffffb3;--accent:#476deb}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;color:var(--ink);background:#dce7f4;font:15px/1.5 system-ui,-apple-system,'Segoe UI',sans-serif}
body:before{content:'';position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at 12% 18%,#fff5db 0,transparent 43%),radial-gradient(ellipse at 85% 15%,#b5d5fa 0,transparent 48%),radial-gradient(ellipse at 76% 88%,#d6c7f6 0,transparent 48%),radial-gradient(ellipse at 10% 90%,#b5e4df 0,transparent 44%)}
main{max-width:820px;margin:auto;padding:32px 32px 24px}
header{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;font-size:20px;font-weight:650;letter-spacing:-.7px}
.logo{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:#ffffff55;border:1px solid var(--edge);box-shadow:inset 0 1px 2px #fff9,0 5px 12px #50709b0c;font-size:24px}
.badge{display:flex;align-items:center;gap:7px;padding:7px 13px;border-radius:24px;background:#ffffff45;border:1px solid #fff9;font-size:12px;color:var(--muted);backdrop-filter:blur(20px)}
.badge i{width:6px;height:6px;background:#429d82;border-radius:50%;box-shadow:0 0 8px #54bf9360}
.intro{text-align:center;padding:43px 0 28px}
h1{font-size:clamp(40px,7vw,54px);line-height:1.1;font-weight:580;letter-spacing:-2.5px;margin:0 0 12px}
.intro p{color:var(--muted);margin:0;font-size:14px}
.test{position:relative;isolation:isolate;background:linear-gradient(145deg,#ffffff65,#ffffff25 48%,#ffffff48);backdrop-filter:blur(28px) saturate(145%);-webkit-backdrop-filter:blur(28px) saturate(145%);border:1px solid var(--edge);border-radius:36px;box-shadow:inset 0 1px 1px #fffe,inset 1px 0 1px #fff8,inset 0 -1px 1px #fff8,0 24px 70px #536c9a17,0 4px 14px #57759e0b;overflow:hidden;padding:38px 34px 0}
.test:before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,#ffffff35,transparent 35%,transparent 70%,#ffffff24);z-index:-1}
.dial{width:244px;height:244px;margin:0 auto 26px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(140deg,#ffffff82,#ffffff0a 50%,#ffffff45);border:1px solid #ffffffb8;box-shadow:inset 0 2px 3px #fff,inset 0 -3px 10px #708cbe12,0 12px 36px #6888b719,0 0 0 9px #ffffff16,0 0 0 10px #ffffff45}
.dial-inner{text-align:center}.dial-inner>span{display:block;font-size:12px;color:var(--muted)}
#live{display:block;font-size:64px;line-height:1.4;letter-spacing:-3px;font-weight:450;font-variant-numeric:tabular-nums}
.controls{text-align:center}
button{min-width:178px;padding:14px 25px;border-radius:24px;border:1px solid #ffffff9c;background:linear-gradient(145deg,#6f91f5,#4c70df);box-shadow:inset 0 1px 1px #ffffff7a,0 6px 20px #4770cf26;color:white;font:550 15px system-ui;cursor:pointer;transition:transform .2s,box-shadow .2s}
button span{margin-left:20px}button:hover{transform:translateY(-2px);box-shadow:inset 0 1px 1px #ffffff7a,0 10px 25px #4770cf36}button:active{transform:translateY(0)}button:focus-visible{outline:3px solid #496bd6;outline-offset:5px}
.secondary{background:linear-gradient(145deg,#fff9,#ffffff35);color:var(--ink);box-shadow:inset 0 1px 1px white,0 6px 20px #607aa112}
[hidden]{display:none!important}
#status{color:var(--muted);font-size:12px;min-height:18px;margin:12px 0 28px}
.progress{height:2px;background:#ffffff60;margin:0 -34px}.progress div{height:100%;width:0;background:linear-gradient(90deg,#80b9ef,#7075df);transition:width .2s}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);padding:26px 0 30px}.metrics article{text-align:center;border-right:1px solid #ffffff80}.metrics article:last-child{border:0}.metrics label{color:var(--muted);font-size:12px}.metrics article>div{margin-top:7px}.metrics strong{font-size:27px;font-weight:500;letter-spacing:-1px;font-variant-numeric:tabular-nums}.metrics small{font-size:10px;color:var(--muted)}
footer{display:flex;justify-content:space-between;gap:16px;padding:21px 7px 0;font-size:11px;color:var(--muted)}#server{overflow-wrap:anywhere}
@media(max-width:540px){main{padding:24px 18px}.intro{padding:38px 0 26px}.test{padding:30px 20px 0;border-radius:30px}.dial{width:220px;height:220px}.progress{margin:0 -20px}.metrics{grid-template-columns:1fr 1fr;gap:22px;padding:23px 0}.metrics article:nth-child(even){border:0}.metrics strong{font-size:28px}footer{font-size:10px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@supports not (backdrop-filter:blur(1px)){.test{background:#e9eff9ed}}