*{box-sizing:border-box}body{margin:0;background:#000;color:#f5f5f5;font-family:Arial,Helvetica,sans-serif}button{font:inherit;cursor:pointer;color:inherit;background:none;border:0}main{max-width:1120px;margin:auto;padding:26px 30px}nav{display:flex;justify-content:center;gap:30px}nav button{display:flex;align-items:center;gap:12px;font-size:17px}nav span{font-size:30px;color:#96969b}button:hover{color:#65dcd2}button:focus-visible{outline:2px solid #65dcd2;outline-offset:6px}.test{text-align:center;margin:95px auto 70px}#go{position:relative;width:280px;height:280px;border-radius:50%;background:linear-gradient(160deg,#68e2ce,#399ee4);padding:3px;transition:transform .2s}#go span{display:grid;place-items:center;height:100%;border-radius:50%;background:#000;font-size:64px;font-weight:400}#go:hover{transform:scale(1.025)}#go.running{animation:breathe 1.8s infinite}#status{color:#8b8b90;font-size:14px;min-height:20px;margin-top:25px}.connection{display:flex;justify-content:center;align-items:flex-start;gap:36px}.client,.server{display:flex;align-items:center;gap:20px;flex:1}.client{justify-content:flex-end;text-align:right}.server{justify-content:flex-start}h2{font-size:24px;font-weight:400;margin:0}p{margin:9px 0;color:#97979c;font-size:18px}.icon{border:1px solid #42434a;border-radius:50%;height:58px;width:58px;flex:none;display:grid;place-content:center;color:#a0a0a6;font-size:32px}.mode{text-align:center;margin-top:56px}.mode p{font-size:18px}.mode>div{display:flex;align-items:center;justify-content:center;gap:22px}.mode button{font-size:25px;color:#9a9a9f}.mode button.selected{color:#38a6df}.mode .icon{font-size:16px;line-height:10px}.metrics{display:flex;justify-content:center;gap:65px;margin:65px auto -50px;text-align:center}.metrics[hidden]{display:none}.metrics small{font-size:11px;letter-spacing:1px}.metrics i{font-style:normal;color:#8d8d93}.metrics strong{display:block;font-size:36px;font-weight:400;margin-top:10px}footer{text-align:center;margin-top:70px;font-size:10px;letter-spacing:2px;color:#5a5a60}footer span{display:block;letter-spacing:.3px;margin-top:10px}dialog{background:#101114;color:#eee;border:1px solid #34363d;border-radius:16px;max-width:600px;width:90%;padding:32px}dialog::backdrop{background:#000c}.close{position:absolute;right:15px;top:10px;font-size:26px}dialog h2{font-size:24px;margin-bottom:20px}dialog p{font-size:15px;line-height:1.6}.history{padding:14px 0;border-bottom:1px solid #292b31;font-size:14px;line-height:1.8}@keyframes breathe{50%{box-shadow:0 0 32px #40bccc40}}@media(max-width:700px){main{padding:20px 18px}nav{gap:20px}nav button{font-size:12px;gap:7px}nav span{font-size:23px}.test{margin:65px auto 40px}#go{width:225px;height:225px}#go span{font-size:54px}.connection{gap:20px;flex-direction:column;align-items:center}.client,.server{width:100%;justify-content:center;text-align:left}.client>div{order:2}.icon{height:47px;width:47px;font-size:25px}h2{font-size:20px}p{font-size:15px}.mode{margin-top:34px}.metrics{gap:20px;margin:40px auto -35px}.metrics strong{font-size:25px}.metrics small{font-size:9px}footer{margin-top:40px}}

.icon svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}