@font-face{font-family:'Mulish';font-style:normal;font-weight:200 1000;font-display:swap;src:url('../fonts/mulish-latin-wght-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/geist-mono-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/geist-mono-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{--navy:#001C36;--body:#3A4658;--muted:#6B7789;--on-dark:#8FB4E0;--bg-soft:#F7FAFD;--bg-alt:#F3F7FC;--line:#DCE4EE;--pink:#C81F87;--purple:#7A2EA8;--blue:#2F3FB5;--deep:#0B2D50;--pink-soft:#F49AD0}
*{box-sizing:border-box}
body{margin:0;background:#FFFFFF;color:var(--body);font:16px/1.6 'Mulish',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.mono{font-family:'Geist Mono',ui-monospace,Menlo,monospace}
a{color:var(--navy);font-weight:700;text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:4px}
a:hover{color:var(--pink)}
.page{padding:24px 24px 24px}
.hero{padding:28px 16px 64px;border-radius:24px;overflow:hidden;color:#FFFFFF;background:linear-gradient(180deg,var(--navy) 46%,rgba(0,28,54,.62) 80%,rgba(0,28,54,.2) 100%),linear-gradient(150deg,var(--pink) 0%,var(--purple) 35%,var(--blue) 70%,var(--deep) 100%)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1248px;height:60px;margin:0 auto;padding:0 8px 0 24px;border-radius:999px;background:#FFFFFF}
.brand{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--navy);text-decoration:none}
.brand span{color:var(--muted);font-weight:600}
.btn-grad{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border:0;border-radius:999px;background:linear-gradient(90deg,var(--pink),var(--purple));color:#FFFFFF;font:700 15px/1 'Mulish',sans-serif;text-decoration:none;cursor:pointer}
.btn-grad:hover{color:#FFFFFF}
.stage{position:relative;max-width:1200px;margin:0 auto}
.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:48px;align-items:center;padding-top:88px}
h1{margin:0;font-size:80px;font-weight:800;line-height:1;letter-spacing:-.035em}
.lede{margin:24px 0 0;max-width:520px;font-size:20px;line-height:1.5}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.btn-lg{height:54px;padding:0 28px;font-size:17px}
.intro-slot{display:flow-root;min-height:90px}
.err{margin:20px 0 0;font-size:16px;font-weight:700;color:var(--pink-soft)}

/* JS fades these in; initial state must be hidden */
#OpenSpeedtest{opacity:0}
#UI-Desk{display:none}
#ipDesk,#ConnectErrorDesk{display:none}

.loader{position:absolute;top:88px;left:0;display:flex;gap:8px}
.loader i{width:8px;height:8px;border-radius:50%;background:var(--pink-soft);animation:pulse 1.2s ease-in-out infinite both}
.loader i:nth-child(2){animation-delay:.15s}
.loader i:nth-child(3){animation-delay:.3s}
@keyframes pulse{0%,80%,100%{opacity:.2}40%{opacity:1}}

.gauge{width:100%;height:auto;aspect-ratio:400/360;display:block;font-family:'Mulish',system-ui,sans-serif}
.gauge-ticks,.gauge-status{font-family:'Geist Mono',ui-monospace,Menlo,monospace}
#downSymbolDesk,#upSymbolDesk{display:none}
/* JS writes inline fill and font-size on this label */
#oDoTopSpeed{fill:var(--on-dark)!important;font-size:13px!important}
/* JS swaps the live number for a link (outro text, network error) */
#oDoLiveSpeed a{font-size:22px;letter-spacing:0;text-decoration:underline}

.results{max-width:1200px;margin:0 auto;padding:96px 0 112px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:48px}
.r-big{position:relative;grid-column:span 4;min-height:150px}
.r-small{grid-column:span 2}
.r-label{display:block;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.r-val{display:flex;align-items:baseline;gap:10px;margin-top:6px;color:var(--navy)}
.r-val b{font-size:72px;font-weight:800;line-height:1;letter-spacing:-.035em}
.r-val span{font-size:17px;font-weight:600;color:var(--muted)}
.r-label,.r-val{position:relative;z-index:1}
.spark{position:absolute;z-index:0;left:0;bottom:0;display:block;width:100%;height:70%}
.line{fill:url(#sparkDown)}
.line2{fill:url(#sparkUp)}
.defs{position:absolute;width:0;height:0}
.note{grid-column:2 / -1;margin:0;padding-top:28px;border-top:1px solid var(--line);font-size:15px;color:var(--muted)}
footer{margin-top:24px;border-radius:24px;background:var(--navy);color:var(--on-dark)}
.foot{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;padding:40px 0;font-size:14px}
.foot a{color:#FFFFFF}
.foot-name{font-size:15px;color:#FFFFFF}

@media (max-width:820px){
.page{padding:12px}
footer{margin-top:12px}
.hero{padding:12px 8px 40px;border-radius:20px}
.bar{padding:0 6px 0 18px}
.brand{font-size:17px}
.brand span{display:none}
.bar .btn-grad{padding:0 16px;font-size:14px}
.grid{grid-template-columns:1fr;gap:24px;padding:48px 16px 0}
.loader{top:48px;left:16px}
h1{font-size:44px}
.lede{font-size:17px}
.results{padding:56px 16px 64px;row-gap:36px}
.r-big{grid-column:1 / -1;min-height:130px}
.r-small{grid-column:span 6}
.r-val b{font-size:56px}
.note{grid-column:1 / -1}
.foot{padding:32px 20px}
}