:root {
  color-scheme: light;
  --iu-navy: #071f31;
  --iu-blue: #087aa5;
  --iu-electric: #56d8ff;
  --iu-ice: #edfaff;
  --iu-white: #ffffff;
}

body {
  background:
    radial-gradient(circle at 12% 15%, rgba(86, 216, 255, 0.13), transparent 30rem),
    var(--iu-ice) !important;
  color: var(--iu-navy);
}

.iu-brand-bar {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  min-height: 68px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 10px clamp(16px, 4vw, 48px);
  color: var(--iu-white);
  background:
    linear-gradient(90deg, rgba(7, 31, 49, 0.99), rgba(8, 71, 99, 0.97)),
    var(--iu-navy);
  border-bottom: 2px solid rgba(86, 216, 255, 0.8);
  box-shadow: 0 8px 24px rgba(7, 31, 49, 0.15);
  font-family: Roboto, Arial, sans-serif;
}

/* The upstream UI becomes an inline full-viewport SVG after it loads. Reserve
   real space for the IU masthead and credits, then size its inner desktop and
   mobile canvases to that bounded area. This keeps every control visible at
   browser zoom levels and on shorter laptop screens. */
body > svg#OpenSpeedtest {
  position: fixed;
  z-index: 1;
  top: 94px;
  right: 0;
  bottom: 28px;
  left: 0;
  width: 100%;
  height: calc(100vh - 122px);
  height: calc(100dvh - 122px);
}

body > svg#OpenSpeedtest > a#resultsData > svg.Desktop,
body > svg#OpenSpeedtest > a#resultsData > svg.Mobile {
  width: 100%;
  height: 100%;
}

.Startsettings {
  opacity: 0.5 !important;
  pointer-events: bounding-box !important;
}

.Startsettings:hover {
  opacity: 1 !important;
}

.darkmode {
  pointer-events: bounding-box !important;
}

.iu-brand-bar a {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.iu-brand-bar img {
  display: block;
  width: clamp(166px, 17vw, 236px);
  height: auto;
}

.iu-brand-bar > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 22px;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.iu-brand-bar strong {
  letter-spacing: 0.02em;
  font-size: 0.88rem;
}

.iu-brand-bar span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.72rem;
}

.iu-credits {
  position: fixed;
  z-index: 1000;
  right: 16px;
  bottom: 12px;
  left: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px 18px;
  color: #4d6575;
  font-family: Roboto, Arial, sans-serif;
  font-size: 11px;
  pointer-events: none;
}

.iu-credits strong {
  color: var(--iu-navy);
}

.iu-credits a {
  color: var(--iu-blue);
  pointer-events: auto;
}

.main-GaugeBlue,
.intro-Progress,
.progressElmstart,
.deskStart {
  stroke: var(--iu-electric) !important;
}

.Symbol,
#upSymbolDesk,
#downSymbolDesk,
#upSymbolMob,
#downSymbolMob {
  fill: var(--iu-electric) !important;
}

#logo [style*="#3da6ff"] {
  fill: var(--iu-electric) !important;
}

#logo [style*="#4d4d4d"] {
  fill: var(--iu-navy) !important;
}

#gradient stop:first-child,
#RadialGradient1 stop:first-child {
  stop-color: var(--iu-electric) !important;
}

#gradient stop:last-child,
#RadialGradient1 stop:last-child {
  stop-color: var(--iu-blue) !important;
}

.Cards {
  fill: rgba(255, 255, 255, 0.86) !important;
}

.uiBg {
  fill: #cdeaf5 !important;
}

.oDoLive-Speed,
.rtextnum,
.rtextmbms,
.rtext {
  fill: var(--iu-navy) !important;
}

@media (prefers-color-scheme: dark) {
  body {
    background: var(--iu-ice) !important;
  }
}

@media (max-width: 720px) {
  .iu-brand-bar {
    min-height: 58px;
    gap: 12px;
    padding: 8px 12px;
  }

  body > svg#OpenSpeedtest {
    top: 62px;
    bottom: 34px;
    height: calc(100vh - 96px);
    height: calc(100dvh - 96px);
  }

  .iu-brand-bar img {
    width: 142px;
  }

  .iu-brand-bar > div {
    gap: 0;
    padding-left: 12px;
  }

  .iu-brand-bar strong {
    font-size: 0.72rem;
  }

  .iu-brand-bar span {
    font-size: 0.62rem;
  }

  .iu-credits {
    bottom: 7px;
    flex-direction: column;
    gap: 2px;
    font-size: 9px;
  }
}

@media (max-width: 410px) {
  .iu-brand-bar > div span {
    display: none;
  }

  .iu-brand-bar img {
    width: 132px;
  }

  .iu-credits span:last-child {
    display: none;
  }
}