/* SpeedMyInternet V12 — typography, stable live values, and UI polish */
:root{
  --display-font:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,sans-serif;
  --body-font:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
  --number-font:"Cascadia Mono","SFMono-Regular",Consolas,ui-monospace,monospace;
}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body,button,input,select,textarea{font-family:var(--body-font)!important}
body{font-weight:450!important;letter-spacing:-.012em!important}
.brand,.brand-name,.hero-copy h1,.section-intro h2,.tools-copy h2,.speed-guide h2,.dialog-head h2,
.explain-grid h3,summary,.start-label,.header .brand,.hero h1,.section h2,.section h3,.side-card h3,.fact strong{
  font-family:var(--display-font)!important;
}
.hero-copy h1,.hero h1{font-weight:700!important;letter-spacing:-.055em!important}
.section-intro h2,.tools-copy h2,.speed-guide h2,.section h2{font-weight:680!important;letter-spacing:-.04em!important}
.desktop-nav,.header-actions,.metric-title,.phase,.sequence-steps,.network-profile small,.network-state small{letter-spacing:.045em!important}
p,li,.metric-card p,.hero-copy>p,.hero-points span{font-weight:450!important}

/* Stable tabular readouts: fixed width, lighter weight, no jump or shake. */
.speed-readout b,.metric-card strong,.score-card strong,.fact strong,.history-item b{
  font-family:var(--number-font)!important;
  font-variant-numeric:tabular-nums lining-nums!important;
  font-feature-settings:"tnum" 1,"lnum" 1,"zero" 0!important;
  font-weight:500!important;
  text-rendering:geometricPrecision;
}
.speed-readout{width:100%!important;max-width:192px!important;gap:4px!important;will-change:auto!important}
.speed-readout b{
  width:7.1ch!important;max-width:100%!important;text-align:center!important;
  font-size:42px!important;line-height:1!important;letter-spacing:-.065em!important;
  transform:none!important;animation:none!important;transition:opacity .16s ease,color .2s ease!important;
}
.speed-readout em{font-family:var(--body-font)!important;font-weight:600!important;letter-spacing:.08em!important}
.test-core.testing:not(.has-reading) .speed-readout{display:none!important}
.test-core.testing.has-reading .speed-readout{display:flex!important}
.test-core.testing .speed-readout{bottom:-2px!important}
.test-core.testing .speed-readout b{font-size:18px!important;width:8ch!important;font-weight:500!important;letter-spacing:-.045em!important}
.test-core.testing .speed-readout em{font-size:7.5px!important}

.metric-card>div:nth-child(2){
  display:grid!important;grid-template-columns:minmax(7.25ch,7.25ch) auto!important;
  align-items:baseline!important;justify-content:start!important;column-gap:7px!important;
}
.metric-card strong{
  width:7.25ch!important;min-width:7.25ch!important;max-width:7.25ch!important;text-align:right!important;
  font-size:clamp(26px,1.9vw,33px)!important;line-height:1!important;letter-spacing:-.055em!important;
  overflow:visible!important;transform:none!important;animation:none!important;transition:color .18s ease,opacity .18s ease!important;
}
.metric-card small{font-family:var(--body-font)!important;font-weight:550!important;margin-bottom:2px!important}
.metric-card .value-updated,.value-updated{animation:valueSettle .28s ease-out!important}
@keyframes valueSettle{0%{opacity:.72;color:var(--cyan)}100%{opacity:1;color:inherit}}

/* A calmer, premium progress animation. */
.rocket-scene{width:132px!important;height:132px!important;filter:drop-shadow(0 9px 18px rgba(25,105,225,.22))}
.rocket-orbit{animation:rocketOrbitV12 4.8s linear infinite!important;border-color:rgba(214,242,255,.22)!important}
.rocket-orbit::before{border-style:solid!important;border-color:rgba(191,223,255,.10)!important}
.rocket-craft{animation:rocketFloatV12 1.7s ease-in-out infinite!important;box-shadow:0 0 20px rgba(172,231,255,.62)!important}
.rocket-craft::after{animation:rocketFlameV12 .72s ease-in-out infinite alternate!important}
.rocket-star{animation:starPulseV12 2.2s ease-in-out infinite!important}
@keyframes rocketOrbitV12{to{transform:rotate(360deg)}}
@keyframes rocketFloatV12{0%,100%{margin-top:0;filter:brightness(1)}50%{margin-top:-2px;filter:brightness(1.07)}}
@keyframes rocketFlameV12{from{transform:scaleY(.82);opacity:.72}to{transform:scaleY(1.08);opacity:.96}}
@keyframes starPulseV12{0%,100%{transform:scale(.72);opacity:.3}50%{transform:scale(1.08);opacity:.9}}
.test-core.testing::after{animation:coreGlowV12 3s ease-in-out infinite!important}
@keyframes coreGlowV12{0%,100%{opacity:.62}50%{opacity:.95}}

/* Fine typography on article pages. */
.article-shell,.section,.article-body,.hero-card,.side-card{font-family:var(--body-font)!important}
.article-body p,.article-body li,.section p,.section li{font-size:clamp(15px,1.05vw,17px)!important;line-height:1.78!important}
.article-body h2,.article-body h3,.section h2,.section h3{font-family:var(--display-font)!important;font-weight:680!important;letter-spacing:-.035em!important}

/* More legible, clean light mode without gray cast. */
body.light{
  --bg:#fbfdff!important;--bg-soft:#f0f8ff!important;--surface:#ffffff!important;--surface-2:#f6fbff!important;
  --surface-3:#eaf6ff!important;--text:#102a4f!important;--muted:#56739a!important;--subtle:#7892b3!important;
  --line:rgba(16,112,204,.10)!important;--line-strong:rgba(16,112,204,.18)!important;
}
body.light::before{
  background:radial-gradient(ellipse 56% 40% at 5% -4%,rgba(35,171,255,.22),transparent 68%),
  radial-gradient(ellipse 45% 38% at 96% 2%,rgba(121,91,246,.15),transparent 70%),
  radial-gradient(ellipse 40% 30% at 55% 82%,rgba(21,211,225,.10),transparent 72%),
  linear-gradient(180deg,#ffffff 0%,#f9fcff 42%,#eff9ff 100%)!important;
}
body.light .test-console{background:radial-gradient(circle at 8% 12%,rgba(20,169,255,.10),transparent 34%),radial-gradient(circle at 94% 9%,rgba(124,89,246,.07),transparent 31%),linear-gradient(145deg,#fff,#f4faff)!important}
body.light .core-zone{background:radial-gradient(circle at 50% 44%,rgba(44,154,255,.17),transparent 47%),linear-gradient(150deg,#edf9ff,#fbf9ff)!important}
body.light .metric-card{background:linear-gradient(145deg,#fff,#f0f9ff)!important}

@media(max-width:650px){
  .speed-readout b{font-size:38px!important;width:7ch!important}
  .metric-card>div:nth-child(2){grid-template-columns:minmax(6.7ch,6.7ch) auto!important;column-gap:4px!important}
  .metric-card strong{width:6.7ch!important;min-width:6.7ch!important;max-width:6.7ch!important;font-size:clamp(23px,6.8vw,29px)!important}
}
@media(max-width:390px){
  .metric-card>div:nth-child(2){grid-template-columns:minmax(6.4ch,6.4ch) auto!important}
  .metric-card strong{width:6.4ch!important;min-width:6.4ch!important;max-width:6.4ch!important;font-size:23px!important}
}
@media(prefers-reduced-motion:reduce){.rocket-orbit,.rocket-craft,.rocket-craft::after,.rocket-star,.test-core.testing::after,.value-updated{animation:none!important}}

/* Compact metric line: fixed numeric field and unit immediately beside it. */
.metric-card>div:nth-child(2){
  display:flex!important;
  width:max-content!important;
  max-width:100%!important;
  align-items:baseline!important;
  justify-content:flex-start!important;
  gap:7px!important;
}
.metric-card strong{
  flex:0 0 clamp(112px,8vw,145px)!important;
  width:clamp(112px,8vw,145px)!important;
  min-width:clamp(112px,8vw,145px)!important;
  max-width:clamp(112px,8vw,145px)!important;
  font-weight:450!important;
}
.speed-readout b{font-weight:450!important}
@media(max-width:650px){
  .metric-card strong{flex-basis:104px!important;width:104px!important;min-width:104px!important;max-width:104px!important}
}
@media(max-width:390px){
  .metric-card strong{flex-basis:96px!important;width:96px!important;min-width:96px!important;max-width:96px!important}
}