.speed-main{max-width:920px;margin:auto}
.speed-intro{display:flex;align-items:center;gap:14px;padding:24px 0 18px}
.speed-intro .tool-logo{flex:none}
.speed-intro h1{font-size:30px;line-height:1.15;letter-spacing:-1px}
.speed-intro .lead{font-size:13px;line-height:1.5;margin:5px 0 0}
.test-panel{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;border:1px solid #ff7a3d35;border-radius:20px;padding:20px 24px;background:#1c1c1f}
.test-heading{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:11px;color:var(--muted)}
.server-label{display:flex;align-items:center;gap:8px}
.readout{grid-column:1;grid-row:2;padding:0}
.readout>p:first-child{color:var(--muted);font-size:12px;margin:0 0 2px}
.readout>div{display:flex;align-items:baseline;gap:9px}
#live-value{font-size:64px;font-weight:600;line-height:1.08;letter-spacing:-3px;font-variant-numeric:tabular-nums}
#live-unit{color:var(--orange);font-size:14px}
#test-message{font-size:11px;color:var(--muted);line-height:1.4;margin:4px 0 0;min-height:16px}
.metrics{grid-column:2;grid-row:2;align-self:center;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0}
.metric{text-align:center;border-right:1px solid var(--line)}
.metric:last-child{border:0}.metric>span{font-size:11px;color:var(--muted)}
.metric p{margin:4px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.metric output{font-size:25px;line-height:1.25;font-weight:600;font-variant-numeric:tabular-nums}
.metric p span{color:var(--muted);font-size:10px}
/* Piecewise scale: 100 Mbit/s at 50%, 1000 at the right edge. */
.speed-scale{--speed-position:0%;grid-column:1 / -1;grid-row:3;padding:0 4px 4px}
.scale-caption{display:flex;justify-content:space-between;gap:12px;align-items:center;color:#c3c6c8;font-size:11px;margin-bottom:12px}
.scale-caption>span:last-child{color:var(--muted);font-size:10px}
.scale-meter{height:30px;position:relative}
.scale-track{position:absolute;inset:5px 0;background:#323235;border-radius:4px;overflow:hidden;box-shadow:inset 0 1px 0 #ffffff0d}
.scale-fill{height:100%;width:var(--speed-position);background:linear-gradient(90deg,#ffac53 0%,#ff7a3d 55%,#f24722 100%);box-shadow:0 0 26px #ff7a3d45;transition:width .38s cubic-bezier(.2,.7,.2,1)}
.scale-segments{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(2% - 2px),#1c1c1f calc(2% - 2px),#1c1c1f 2%)}
.scale-needle{position:absolute;left:var(--speed-position);top:-2px;bottom:-2px;width:2px;transform:translateX(-50%);background:#fff3e9;box-shadow:0 0 16px #ff7a3da6;transition:left .38s cubic-bezier(.2,.7,.2,1),opacity .2s}
.scale-needle::before{content:"";position:absolute;top:-5px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:#fff3e9;box-shadow:0 0 0 3px #ff7a3d26}
.scale-needle span{position:absolute;inset:-12px -14px;background:radial-gradient(ellipse,#ff7a3d25,transparent 70%);pointer-events:none}
.scale-labels{height:14px;position:relative;margin-top:10px;color:#a8a8a8;font:10px/1.4 ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}
.scale-labels span{position:absolute;width:0;display:flex;justify-content:center;white-space:nowrap}
.scale-labels span::before{content:"";position:absolute;top:-7px;height:4px;width:1px;background:#555}
.scale-labels span:first-child{justify-content:flex-start}.scale-labels span:last-child{justify-content:flex-end}
.speed-scale[data-state=idle] .scale-needle{opacity:.35;box-shadow:none}
.speed-scale[data-state=complete] .scale-caption>span:first-child{color:var(--orange)}
.test-actions{grid-column:1 / -1;grid-row:4;display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:14px}
.primary-button,.secondary-button{border:1px solid transparent;border-radius:10px;padding:10px 18px;font-size:13px;font-weight:600}
.primary-button{background:var(--orange);color:#211008}.primary-button:hover{background:#ff945e}.primary-button:disabled{opacity:.5;cursor:default}
.secondary-button{background:transparent;border-color:var(--line);color:var(--ink)}.secondary-button:hover{background:#ffffff08}
#test-meta{color:var(--muted);font-size:11px}.noscript{color:var(--orange)}.test-panel>noscript{grid-column:1 / -1}
.test-details{padding:14px 2px;color:var(--muted);font-size:12px}.test-details>summary{cursor:pointer;width:fit-content}.test-details>summary:hover{color:var(--ink)}
.connection-summary{margin-top:12px;padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:#202023}
.connection-summary h2{display:flex;align-items:center;gap:9px;font-size:16px;letter-spacing:-.2px}.connection-summary h2::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:#c7c7cc}.connection-summary[data-tone=good] h2::before{background:#79dfaf}.connection-summary[data-tone=limited] h2::before{background:var(--orange)}
.connection-summary p{font-size:12px;line-height:1.5;color:var(--muted);margin:5px 0 0}.connection-summary #summary-advice{color:#e7bd9c}
.test-explainer{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:16px}.test-explainer h2{font-size:15px}.test-explainer p,.privacy-note{font-size:12px}.test-explainer p{margin:7px 0 0}.privacy-note{border-top:1px solid var(--line);padding-top:12px;margin:14px 0 0}
.install-panel{margin-top:18px;display:grid;grid-template-columns:94px minmax(0,1fr) auto;gap:5px 16px;align-items:center;padding:14px 18px;border:1px solid var(--line);border-radius:16px;background:#1c1c1f}
.install-copy{grid-column:2;grid-row:1;min-width:0}.install-copy h2{font-size:16px}.install-copy p{font-size:12px;color:var(--muted);margin:3px 0 0}
.app-preview{grid-column:1;grid-row:1 / span 2;margin:0;text-align:center;padding:7px 6px 5px;border:1px solid #ffffff0a;border-radius:12px;background:#262629}
.app-preview img{display:block;width:48px;height:48px;margin:auto;border-radius:9%;background:#000;box-shadow:0 4px 10px #0007}
.app-preview figcaption{color:#ededed;font-size:9px;line-height:1.3;margin-top:5px}
.install-panel>#install-app{grid-column:3;grid-row:1 / span 2}
.install-panel>#install-help{grid-column:2;grid-row:2;font-size:11px;color:var(--muted)}.install-panel summary{cursor:pointer;color:#c3c6c8;width:fit-content}.install-panel details p{margin:8px 0 3px;font-size:12px}
#install-status{grid-column:2 / -1;font-size:12px;color:var(--muted);margin:3px 0 0}#install-status:empty{display:none}
.speed-main+footer{margin-top:24px;padding:18px 0 22px}
@media(max-width:600px){
 .speed-intro{padding:20px 0 14px;gap:11px}.speed-intro .tool-logo{width:40px;height:40px}.speed-intro h1{font-size:24px;letter-spacing:-.7px}.speed-intro .lead{font-size:11px;margin-top:3px}
 .test-panel{padding:16px;gap:12px;border-radius:16px}.test-heading{font-size:10px;gap:8px}.readout{grid-column:1 / -1;text-align:center}.readout>div{justify-content:center}#live-value{font-size:58px}#test-message{font-size:11px;min-height:30px;margin-top:3px}
 .speed-scale{padding:0 2px 3px}.scale-caption{font-size:10px;margin-bottom:10px}.scale-segments{background:repeating-linear-gradient(90deg,transparent 0,transparent calc(4% - 2px),#1c1c1f calc(4% - 2px),#1c1c1f 4%)}
 .metrics{grid-column:1 / -1;grid-row:4}.metric p{flex-direction:row;gap:4px;align-items:baseline}.metric output{font-size:23px}
 .test-actions{grid-row:5;justify-content:center;padding-top:12px;gap:8px}#test-meta{width:100%;text-align:center;font-size:10px}
 .test-explainer{grid-template-columns:1fr;gap:14px}.install-panel{grid-template-columns:82px minmax(0,1fr);padding:12px;gap:5px 12px}.app-preview{padding:6px 4px}.app-preview img{width:44px;height:44px}.install-copy h2{font-size:15px}.install-copy p{font-size:11px}.install-panel>#install-app{grid-column:2;grid-row:auto;justify-self:start;margin-top:6px}.install-panel>#install-help{grid-column:2;grid-row:2}#install-status{grid-column:1 / -1}
 .speed-main+footer{margin-top:18px;padding-top:14px}
}
@media(prefers-reduced-motion:reduce){.scale-fill,.scale-needle{transition:none}}

.scale-labels span:nth-child(1){left:0}.scale-labels span:nth-child(2){left:25%}.scale-labels span:nth-child(3){left:50%;color:var(--orange)}.scale-labels span:nth-child(4){left:72.222222%}.scale-labels span:nth-child(5){left:100%}.scale-labels span:nth-child(3)::before{height:7px;top:-10px;background:var(--orange)}