:root{
 --bg:#0a0f19;
 --panel:#121b2b;
 --panel2:#152034;
 --border:#25344a;
 --text:#edf5ff;
 --muted:#879ab4;
 --cyan:#43d7f5;
 --violet:#a690ff;
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--bg)}
body{
 margin:0;color:var(--text);
 font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
 background:
 radial-gradient(ellipse 65% 32% at 52% 0%,#17325265,transparent),
 var(--bg);
 min-height:100vh;
}
.topbar{
 height:86px;padding:0 max(28px,calc((100vw - 1160px)/2));
 display:flex;align-items:center;justify-content:space-between;
 border-bottom:1px solid #ffffff0b;
}
.brand{display:flex;align-items:center;gap:12px}
.brand-icon{
 width:40px;height:40px;border-radius:12px;
 display:grid;place-items:center;
 background:linear-gradient(140deg,var(--cyan),#6387ff);
 color:#081526;font-size:27px;font-weight:800;
}
.brand-name{font-size:19px;font-weight:850;letter-spacing:1px}
.brand-name span{color:var(--cyan)}
.top-right,.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.5px;color:var(--muted)}
.top-right{display:flex;align-items:center;gap:11px}
.live-dot{
 display:inline-block;width:8px;height:8px;flex:none;
 border-radius:50%;background:#4ce4af;
 box-shadow:0 0 15px #4ce4af80;
}
.container{max-width:1160px;margin:auto;padding:58px 28px 34px}
.hero{
 display:flex;align-items:center;justify-content:space-between;
 gap:40px;margin-bottom:46px;
}
.eyebrow{display:flex;align-items:center;gap:12px;color:var(--cyan)}
h1{font-size:clamp(34px,4.1vw,54px);letter-spacing:-2.3px;line-height:1.15;margin:22px 0}
h1 span{color:var(--cyan)}
.hero-copy>p{color:var(--muted);font-size:15px;line-height:1.8;max-width:535px}
.start-area{display:flex;flex-direction:column;align-items:center;gap:18px;flex-shrink:0}
#start-button{
 border:1px solid #7ceaff50;color:#071b2c;
 background:linear-gradient(140deg,#75ebfa,#4897f5);
 width:150px;height:150px;border-radius:50%;
 box-shadow:0 0 0 10px #38cfff0a,0 0 0 24px #38cfff07,0 18px 65px #2399f534;
 font-size:15px;font-weight:800;cursor:pointer;
 transition:transform .25s,box-shadow .25s;
}
#start-button:hover{transform:scale(1.04);box-shadow:0 0 0 14px #38cfff13,0 18px 70px #2399f550}
#start-button.disabled{opacity:.5;cursor:wait}
#start-button.active{background:linear-gradient(140deg,#ffb28c,#ff668e)}
.start-area>span{font-size:12px;color:var(--muted)}
.server-panel{
 border:1px solid var(--border);background:#111a2a;
 border-radius:16px;padding:20px 24px;
 display:flex;align-items:center;justify-content:space-between;
 gap:20px;margin-bottom:24px;
}
.server-info{display:flex;align-items:center;gap:17px}
.server-symbol{
 width:45px;height:45px;display:grid;place-items:center;
 border-radius:12px;background:#203550;color:var(--cyan);font-size:30px;
}
.server-selector .chosen p{font-size:10px;letter-spacing:1.4px;color:var(--muted);margin:0 0 8px}
.server-selector h2{margin:0;font-size:17px;font-weight:700}
.server-selector ul{position:absolute;z-index:5;background:var(--panel);padding:0;list-style:none}
.server-selector ul:not(.active){display:none}
.server-selector li{padding:8px 12px}
.server-selector a{color:var(--cyan)}
#sponsor{display:none}
.connection-state{display:flex;align-items:center;gap:10px;color:#7be3b8;font-size:12px}
.hidden{display:none!important}
#privacy-warning{
 margin:12px 0 22px;color:var(--muted);font-size:12px;overflow-wrap:anywhere;
}
.gauge-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.gauge{
 --accent:var(--cyan);
 min-width:0;position:relative;overflow:hidden;
 border:1px solid var(--border);border-radius:22px;
 padding:29px 32px 20px;
 background:linear-gradient(165deg,#172338,#101827);
}
.gauge.upload{--accent:var(--violet)}
.gauge:before{
 content:"";position:absolute;right:-90px;top:-130px;
 width:250px;height:250px;background:var(--accent);
 opacity:.035;filter:blur(45px);border-radius:50%;
}
.metric-top{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:10px;letter-spacing:1.5px}
.metric-icon{
 width:43px;height:43px;border-radius:12px;
 display:grid;place-items:center;background:#183d51;
 color:var(--cyan);font-size:25px
}
.upload-icon{background:#302d53;color:var(--violet)}
.gauge h2{font-size:23px;margin:19px 0 5px;letter-spacing:-.6px}
.metric-description,.mini-description{color:var(--muted);font-size:13px;margin:0}
.dial{height:200px;width:250px;position:relative;margin:24px auto 0}
.dial .progress{
 position:absolute;left:15px;top:0;width:220px;height:220px;
 border-radius:50%;
 background:conic-gradient(from 270deg,var(--accent) 0deg var(--progress-rotation,0deg),#293b51 var(--progress-rotation,0deg) 180deg,transparent 180deg);
 -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 10px),#000 calc(100% - 9px));
 mask:radial-gradient(farthest-side,transparent calc(100% - 10px),#000 calc(100% - 9px));
}
.dial .speed{
 position:absolute;left:calc(50% - 2px);top:28px;
 width:4px;height:82px;border-radius:4px;
 background:var(--accent);opacity:.45;
 transform-origin:center bottom;
 transform:rotate(calc(var(--speed-rotation,0deg) - 90deg));
 transition:transform .2s;
}
.dial-value{position:absolute;left:0;right:0;bottom:4px;text-align:center}
.dial-value strong{display:block;font-size:clamp(40px,4vw,56px);letter-spacing:-2px}
.dial-value small{color:var(--muted);font-size:14px}
.metric-bottom{
 border-top:1px solid #ffffff12;padding-top:18px;
 display:flex;justify-content:space-between;color:var(--muted);
 font-size:10px;letter-spacing:1.2px;font-weight:700;
}
.metric-bottom span:last-child{color:var(--accent);font-size:17px}
.latency-row{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:22px}
.mini-card{
 display:flex;align-items:center;gap:22px;
 padding:23px 28px;background:#121b2b;
 border:1px solid var(--border);border-radius:18px;
}
.mini-icon{
 width:56px;height:56px;border-radius:15px;
 background:#1c3147;display:grid;place-items:center;
 font-size:29px;color:var(--cyan);flex:none;
}
.jitter .mini-icon{color:var(--violet);background:#292947}
.mini-card .label{font-size:11px;letter-spacing:1.4px;color:var(--muted);font-weight:700;margin:0 0 6px}
.mini-value{font-size:34px;font-weight:750;letter-spacing:-1px;margin-bottom:5px}
.mini-value small{font-size:14px;color:var(--muted);font-weight:400;margin-left:6px}
#share-results{
 margin:26px 0;background:#19344b;border:1px solid var(--cyan);
 color:var(--cyan);padding:13px 22px;border-radius:12px;cursor:pointer
}
footer{
 max-width:1160px;margin:35px auto 0;padding:25px 28px 35px;
 border-top:1px solid #ffffff12;color:#667991;
 display:flex;justify-content:space-between;gap:15px;font-size:12px;
}
footer a{color:#9fcde9}
dialog{
 border:1px solid var(--border);background:var(--panel);color:var(--text);
 border-radius:18px;padding:30px;max-width:min(540px,90vw);
}
dialog::backdrop{background:#000b}
.close-dialog{float:right;cursor:pointer;font-size:20px}
dialog button{margin-top:16px;padding:11px 18px;cursor:pointer}
dialog img{max-width:100%}
@media(max-width:760px){
 .topbar{height:70px;padding:0 20px}
 .top-right{font-size:9px}
 .container{padding:40px 18px 18px}
 .hero{flex-direction:column;align-items:stretch;text-align:center;gap:30px}
 .eyebrow{justify-content:center}
 h1{font-size:35px;letter-spacing:-1.5px}
 .hero-copy>p{font-size:14px}
 #start-button{width:132px;height:132px}
 .server-panel{padding:18px;align-items:flex-start}
 .connection-state{display:none}
 .gauge-layout,.latency-row{grid-template-columns:1fr;gap:15px}
 .latency-row{grid-column:1}
 .gauge{padding:23px}
 .dial{margin:20px auto 0}
 footer{flex-direction:column;padding:25px 18px}
}


/* NetAway speedometer refinement */

.dial .speed {
    width: 4px;
    height: 88px;
    top: 22px;
    left: calc(50% - 2px);
    opacity: 1;
    background: linear-gradient(
        to top,
        var(--accent),
        #ffffff
    );
    border-radius: 6px;
    transform-origin: center bottom;
    box-shadow: 0 0 12px var(--accent);
}

.dial .speed::after {
    content: "";
    position: absolute;
    width: 13px;
    height: 13px;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    background: var(--accent);
    border: 3px solid #142034;
    border-radius: 50%;
}

.dial .scale-label {
    position: absolute;
    color: #8ea2bd;
    font-size: 10px;
    font-weight: 600;
    pointer-events: none;
}

.scale-zero {
    left: 27px;
    top: 120px;
}

.scale-hundred {
    left: 50%;
    top: 14px;
    transform: translateX(-50%);
}

.scale-thousand {
    right: 24px;
    top: 43px;
}

.scale-max {
    right: 7px;
    top: 120px;
}

/* NETAWAY INFO PAGES */

.site-nav{
 display:flex;align-items:center;gap:25px;
}
.site-nav a,.footer-links a{
 color:#8fa3bc;text-decoration:none;font-size:13px;
 transition:color .2s;
}
.site-nav a:hover,.site-nav a.active,
.footer-links a:hover{color:#43d7f5}
.footer-links{display:flex;gap:18px;flex-wrap:wrap}

.page-container{
 max-width:900px;margin:auto;
 padding:65px 28px 90px;
 min-height:65vh;
}
.back-link{
 color:#43d7f5;text-decoration:none;font-size:13px;
}
.page-container h1{
 font-size:clamp(35px,5vw,53px);
 margin:28px 0 35px;
 letter-spacing:-1.6px;
}
.page-content{
 background:linear-gradient(150deg,#172338,#101827);
 border:1px solid #25344a;
 border-radius:20px;
 padding:36px 40px;
}
.page-content h2{
 font-size:21px;margin:28px 0 12px;
 letter-spacing:-.4px;
}
.page-content h2:first-child{margin-top:0}
.page-content p,.page-content li{
 color:#a6b6cb;
 font-size:15px;
 line-height:1.9;
}
.page-content p{margin:0 0 14px}
.page-content li{margin-bottom:9px}
.page-content ol{padding-left:22px}
.page-cta{
 display:inline-block;
 margin-top:26px;
 padding:15px 22px;
 background:linear-gradient(135deg,#75ebfa,#4897f5);
 color:#081526;
 border-radius:12px;
 font-size:13px;
 font-weight:800;
 text-decoration:none;
}
@media(max-width:900px){
 .topbar{
  height:auto;min-height:75px;
  flex-wrap:wrap;gap:12px;padding:18px 22px;
 }
 .site-nav{
  order:3;width:100%;
  overflow-x:auto;white-space:nowrap;
  gap:20px;padding-top:12px;
 }
 .page-container{padding:44px 18px 65px}
 .page-content{padding:25px 23px}
 .page-content h2{font-size:19px}
 .page-content p,.page-content li{font-size:14px}
}