:root { color-scheme: dark; --bg: #081725; --cyan: #9ccfeb; --text: #d9e8f2; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100vh;
  overflow: hidden;
  color: var(--text);
  font-family: Inter, system-ui, sans-serif;
  background:
    radial-gradient(circle at 18% 35%, rgba(111,167,204,.13), transparent 30%),
    radial-gradient(circle at 82% 68%, rgba(168,147,205,.1), transparent 28%),
    linear-gradient(rgba(156,207,235,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(156,207,235,.025) 1px, transparent 1px),
    var(--bg);
  background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px, auto;
}
.ambient { position: fixed; width: 310px; height: 310px; border-radius: 42% 58% 64% 36%; pointer-events: none; opacity: .13; filter: blur(1px); animation: drift 13s ease-in-out infinite alternate; }
.ambient-left { left: -170px; top: 22%; background: #78afcf; transform: rotate(20deg); }
.ambient-right { right: -190px; bottom: 10%; background: #a18cbd; animation-delay: -5s; }
@keyframes drift { to { transform: translate3d(25px, -20px, 0) rotate(35deg); } }
.scanline { position: fixed; z-index: 5; top: -120px; width: 100%; height: 120px; pointer-events: none; opacity: .16; background: linear-gradient(transparent, rgba(156,207,235,.045), transparent); animation: scan 9s linear infinite; }
@keyframes scan { to { transform: translateY(calc(100vh + 140px)); } }
header { position: fixed; z-index: 10; top: 0; width: 100%; height: 88px; display: grid; place-items: center; }
.logo { color: var(--cyan); text-decoration: none; font: 800 29px/1 JetBrains Mono, monospace; letter-spacing: -.07em; }
main { min-height: 100vh; padding: 104px 24px 115px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.headline { position: relative; z-index: 3; margin-bottom: 22px; text-align: center; }
.headline h1 { margin: 0 0 13px; font-size: clamp(34px, 4.4vw, 64px); line-height: .98; font-weight: 900; letter-spacing: -.055em; background: linear-gradient(110deg, #d6edf8 12%, #9ccfeb 57%, #c6b6dd 100%); background-clip: text; -webkit-background-clip: text; color: transparent; }
.headline p { margin: 0; color: rgba(156,207,235,.48); font: 700 clamp(8px, .8vw, 11px)/1 JetBrains Mono, monospace; letter-spacing: .5em; }
.mobile-break { display: none; }
.reactor-wrap { position: relative; z-index: 2; }
.reactor { position: relative; width: min(43vh, 430px); height: min(43vh, 430px); min-width: 320px; min-height: 320px; display: grid; place-items: center; animation: breathe 5s ease-in-out infinite; }
@keyframes breathe { 50% { transform: translateY(-5px); } }
.orbit { position: absolute; border-radius: 50%; pointer-events: none; }
.orbit-one { inset: 0; padding: 1px; background: conic-gradient(from 30deg, transparent 0 14%, rgba(156,207,235,.55) 14% 25%, transparent 25% 58%, rgba(198,182,221,.45) 58% 72%, transparent 72%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 24s linear infinite; }
.orbit-two { inset: 28px; border: 2px dashed rgba(156,207,235,.15); animation: spin 18s linear infinite reverse; }
.orbit-three { inset: 60px; padding: 1px; background: conic-gradient(transparent 0 22%, rgba(156,207,235,.35) 22% 48%, transparent 48% 72%, rgba(198,182,221,.35) 72% 86%, transparent 86%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 14s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.marker { position: absolute; z-index: 2; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); opacity: .65; }
.marker-top { top: -2px; left: 50%; }.marker-right { right: -2px; top: 50%; }.marker-bottom { bottom: -2px; left: 50%; }.marker-left { left: -2px; top: 50%; }
.data-tag { position: absolute; z-index: 4; padding: 6px 9px; border: 1px solid rgba(156,207,235,.14); border-radius: 5px; color: rgba(185,217,234,.5); background: rgba(9,25,39,.78); font: 700 7px/1 JetBrains Mono, monospace; letter-spacing: .12em; animation: tagFloat 4s ease-in-out infinite; }
.tag-left { left: -54px; top: 34%; }.tag-right { right: -61px; top: 42%; animation-delay: -1.5s; }.tag-bottom { bottom: 11px; left: 50%; transform: translateX(-50%); animation-delay: -2.5s; }
@keyframes tagFloat { 50% { margin-top: -4px; border-color: rgba(156,207,235,.32); color: rgba(214,237,248,.76); } }
.go-button { position: relative; z-index: 3; width: 73%; height: 73%; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: visible; border: 2px solid #d7edf7; border-radius: 50%; color: #092033; text-decoration: none; cursor: pointer; background: linear-gradient(145deg, #d7edf7, #96cae6 62%, #b9abd2); transition: transform .55s cubic-bezier(.22,1,.36,1), background .55s, border-color .55s; animation: buttonBreathe 2.8s ease-in-out infinite; }
.go-button::before { content: ""; position: absolute; inset: -13px; border: 1px solid rgba(156,207,235,.6); border-radius: 50%; animation: callToAction 2.2s ease-out infinite; pointer-events: none; }
.go-button:hover { transform: scale(1.07); background: linear-gradient(145deg, #e9f6fb, #add9ee 58%, #cbbce0); border-color: #fff; animation: none; }
.go-button:active { transform: scale(.97); animation: none; }
@keyframes buttonBreathe { 50% { transform: scale(1.025); } }
@keyframes callToAction { 0% { transform: scale(.96); opacity: .85; } 75%, 100% { transform: scale(1.09); opacity: 0; } }
.go-button > span { font: 800 clamp(54px, 6vw, 80px)/1 JetBrains Mono, monospace; letter-spacing: -.08em; }
.go-button small { margin-top: 13px; color: rgba(9,32,51,.62); font: 800 9px/1 JetBrains Mono, monospace; letter-spacing: .19em; }
.inner-ring { position: absolute; inset: 15px; border: 1px solid rgba(9,32,51,.15); border-radius: 50%; }
.core-disc { position: absolute; z-index: -1; width: 46%; height: 46%; border: 1px solid rgba(9,32,51,.08); border-radius: 50%; background: rgba(255,255,255,.07); animation: corePulse 3.6s ease-in-out infinite; }
@keyframes corePulse { 50% { transform: scale(1.08); background: rgba(198,182,221,.065); } }
.node-panel { position: fixed; z-index: 5; bottom: 71px; left: 50%; transform: translateX(-50%); min-width: 490px; padding: 13px 27px; display: flex; align-items: center; justify-content: center; gap: 24px; border: 1px solid rgba(156,207,235,.22); border-radius: 999px; background: linear-gradient(100deg, rgba(18,42,59,.96), rgba(33,29,48,.94)); }
.node-panel > div { display: flex; flex-direction: column; gap: 4px; }
.node-panel small { color: rgba(156,207,235,.44); font: 700 8px/1 JetBrains Mono, monospace; letter-spacing: .14em; }
.node-panel strong { color: rgba(219,252,255,.86); font: 700 10px/1 JetBrains Mono, monospace; letter-spacing: .1em; }
.node-panel .node-status { flex-direction: row; align-items: center; gap: 11px; }
.node-status > div { display: flex; flex-direction: column; gap: 4px; }
.node-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.node-panel .divider { width: 1px; height: 25px; background: rgba(156,207,235,.18); }
footer { position: fixed; z-index: 6; bottom: 0; width: 100%; padding: 25px 28px; display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.13); font: 700 8px/1 JetBrains Mono, monospace; letter-spacing: .1em; }
footer nav { display: flex; gap: 34px; }
footer a { color: inherit; text-decoration: none; transition: color .2s; }
footer a:hover { color: var(--cyan); }
@media (max-height: 760px) and (min-width: 650px) { .headline { margin-bottom: 5px; } .headline h1 { font-size: 42px; } .reactor { width: 330px; height: 330px; min-width: 0; min-height: 0; } }
@media (max-width: 640px) { body { overflow-y: auto; } header { height: 70px; } .logo { font-size: 23px; } main { padding: 85px 16px 165px; } .headline { margin-bottom: 18px; } .headline h1 { font-size: 37px; } .headline p { line-height: 1.7; letter-spacing: .25em; } .mobile-break { display: block; } .reactor { width: 310px; height: 310px; min-width: 0; min-height: 0; } .data-tag { display: none; } .node-panel { bottom: 66px; min-width: 0; width: calc(100% - 28px); padding-inline: 18px; gap: 14px; } .node-panel strong { font-size: 8px; } footer { padding: 20px 16px; justify-content: center; } footer > span { display: none; } footer nav { gap: 25px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Reference-matched landing treatment */
:root { --bg: #051424; --cyan: #00dbe9; --text: #d4e4fa; }
body {
  background:
    radial-gradient(circle at 50% 51%, rgba(0,219,233,.055), transparent 62%),
    linear-gradient(rgba(0,240,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,240,255,.03) 1px, transparent 1px),
    #051424;
  background-size: 100% 100%, 40px 40px, 40px 40px, auto;
}
.ambient { width: 600px; height: 600px; border-radius: 50%; opacity: .07; filter: blur(80px); background: #00dbe9; animation-duration: 20s; }
.ambient-left { display: none; }
.ambient-right { right: 12%; bottom: 8%; }
.logo { font-size: 30px; color: #72e8f3; background: none; -webkit-text-fill-color: currentColor; }
.headline { margin-bottom: 36px; }
.headline h1 { margin-bottom: 16px; font-size: clamp(36px, 4.5vw, 64px); line-height: 1.05; }
.headline p { color: rgba(166,225,235,.76); font-size: clamp(11px, 1vw, 14px); line-height: 1.5; letter-spacing: .38em; }
.reactor { width: min(53vh, 520px); height: min(53vh, 520px); min-width: 390px; min-height: 390px; animation: none; }
.orbit { padding: 0; background: none; -webkit-mask: none; mask: none; }
.orbit-one { inset: 0; border: 1px dashed rgba(0,240,255,.15); animation: spin 40s linear infinite; }
.orbit-two { inset: 40px; border: 1px dashed rgba(0,240,255,.11); animation: spin 30s linear infinite reverse; }
.orbit-three { inset: 80px; border: 1px solid rgba(0,240,255,.09); animation: spin 20s linear infinite; }
.marker, .data-tag { display: none; }
.go-button {
  width: 55%;
  height: 55%;
  overflow: hidden;
  border: 2px solid rgba(0,219,233,.35);
  color: #00dbe9;
  background: radial-gradient(circle, #0d1c2d, #051424 78%);
  box-shadow: 0 0 40px rgba(0,219,233,.14), inset 0 0 20px rgba(0,219,233,.05);
  animation: none;
  transition: transform .4s cubic-bezier(.4,0,.2,1), border-color .4s, box-shadow .4s;
}
.go-button::before { display: none; }
.go-button:hover {
  transform: scale(1.035);
  border-color: rgba(0,219,233,.82);
  background: radial-gradient(circle, #10263a, #051424 78%);
  box-shadow: 0 0 60px rgba(0,219,233,.28), inset 0 0 30px rgba(0,219,233,.1);
}
.go-button > span { color: #00dbe9; font-size: clamp(58px, 6vw, 75px); }
.go-button small { color: rgba(0,219,233,.42); letter-spacing: .3em; }
.inner-ring { inset: 10px; border-color: rgba(0,219,233,.1); }
.core-disc { display: none; }
.cta-gauge { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); transform: rotate(-90deg); pointer-events: none; }
.cta-gauge circle { fill: none; stroke: rgba(0,219,233,.16); stroke-width: .8; stroke-dasharray: 18 12; }
.node-panel {
  bottom: 62px;
  padding: 16px 34px;
  border-color: rgba(0,219,233,.15);
  background: linear-gradient(135deg, rgba(13,28,45,.9), rgba(5,20,36,.94));
  box-shadow: 0 8px 32px rgba(0,0,0,.32);
}
.node-panel small { color: rgba(0,219,233,.38); }
.node-status i { background: #00dbe9; }
.node-panel .divider { background: rgba(0,219,233,.12); }

@media (max-height: 780px) and (min-width: 641px) {
  .headline { margin-bottom: 14px; }
  .headline h1 { font-size: 44px; }
  .reactor { width: 360px; height: 360px; min-width: 0; min-height: 0; }
}
@media (max-width: 640px) {
  .headline h1 { font-size: 36px; }
  .headline p { max-width: 330px; margin-inline: auto; font-size: 10px; line-height: 1.75; letter-spacing: .22em; }
  .reactor { width: 330px; height: 330px; min-width: 0; min-height: 0; }
  .orbit-two { inset: 30px; }
  .orbit-three { inset: 60px; }
  .go-button { width: 58%; height: 58%; }
}

/* Screenshot alignment */
header { height: 94px; }
.logo { font-size: 34px; font-weight: 800; text-shadow: 0 2px 0 #00131d; }
main { justify-content: flex-start; padding-top: 118px; padding-bottom: 155px; }
.headline { margin-bottom: clamp(55px, 7vh, 100px); }
.headline h1 { background: none; color: inherit; -webkit-text-fill-color: initial; font-size: clamp(46px, 5vw, 76px); line-height: 1.1; letter-spacing: -.045em; }
.headline h1 span { display: block; color: #9eeaf2; text-shadow: 0 3px 0 #001620; }
.headline h1 span:last-child { color: #25d5e5; }
.headline p { margin-top: 22px; font-size: clamp(12px, 1vw, 15px); color: rgba(0,219,233,.72); letter-spacing: .46em; }
.reactor { width: min(51vw, 51vh, 650px); height: min(51vw, 51vh, 650px); min-width: 470px; min-height: 470px; }
.orbit-one { inset: 0; }
.orbit-two { inset: 48px; }
.orbit-three { inset: 98px; }
.go-button { width: 62%; height: 62%; }
.go-button > span { font-size: clamp(64px, 6vw, 86px); text-shadow: 0 3px 0 #00141e; }
.go-button small { margin-top: 12px; font-size: 10px; color: rgba(0,219,233,.55); }
.data-tag { display: block; padding: 8px 15px; border-color: rgba(0,219,233,.34); color: rgba(0,240,255,.78); background: rgba(1,15,31,.86); font-size: 10px; letter-spacing: .09em; animation: float 6s ease-in-out infinite; white-space: nowrap; }
.tag-left { left: 20%; top: 10%; }
.tag-right { right: 3%; top: 51%; animation-delay: -2s; }
.tag-bottom { left: auto; right: 9%; bottom: 13%; transform: none; animation-delay: -4s; }
@keyframes float { 50% { transform: translateY(-7px); } }
.node-panel { bottom: 79px; min-width: 642px; padding: 20px 48px; gap: 46px; border-color: rgba(0,219,233,.28); }
.node-panel small { font-size: 9px; letter-spacing: .18em; }
.node-panel strong { font-size: 12px; letter-spacing: .12em; }
.node-panel .divider { height: 40px; }
footer { padding: 27px 48px; }

@media (max-height: 900px) and (min-width: 641px) {
  main { padding-top: 95px; }
  .headline { margin-bottom: 24px; }
  .headline h1 { font-size: 49px; }
  .headline p { margin-top: 14px; }
  .reactor { width: 440px; height: 440px; min-width: 0; min-height: 0; }
  .orbit-two { inset: 37px; }
  .orbit-three { inset: 75px; }
  .node-panel { bottom: 60px; }
}
@media (max-width: 640px) {
  main { padding-top: 88px; }
  .headline { margin-bottom: 35px; }
  .headline h1 { font-size: 38px; }
  .headline p { margin-top: 17px; font-size: 11px; letter-spacing: .18em; }
  .reactor { width: 340px; height: 340px; min-width: 0; min-height: 0; }
  .orbit-two { inset: 30px; }
  .orbit-three { inset: 60px; }
  .go-button { width: 64%; height: 64%; }
  .data-tag { display: none; }
  .node-panel { min-width: 0; width: calc(100% - 28px); padding: 15px 18px; gap: 14px; bottom: 62px; }
}

/* In-place speed test states */
.reactor { transition: transform .75s cubic-bezier(.22,1,.36,1); }
.reactor.is-testing { transform: translateY(-12px) scale(1.12); }
.reactor.is-complete { transform: translateY(-22px) scale(.82); }
.go-button:disabled { cursor: wait; }
.reactor.is-testing .go-button,
.reactor.is-complete .go-button { animation: none; }
.reactor.is-testing .go-button > span { font-size: clamp(46px, 4.5vw, 64px); font-variant-numeric: tabular-nums; }
.reactor.is-complete .go-button > span { font-size: clamp(38px, 4vw, 58px); }
.cta-gauge { overflow: visible; }
.cta-gauge circle { fill: none; transform-origin: 50% 50%; }
.cta-gauge .cta-track { stroke: rgba(0,219,233,.14); stroke-width: .8; stroke-dasharray: none; }
.cta-gauge .cta-progress { stroke: #36e6a2; stroke-width: 2.8; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; transition: stroke .35s ease, opacity .2s ease; filter: none; }
.reactor.is-testing .cta-progress,
.reactor.is-complete .cta-progress { opacity: 1; filter: drop-shadow(0 0 3px currentColor); }
.home-results {
  position: fixed;
  z-index: 7;
  left: 50%;
  bottom: 69px;
  min-width: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 0;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 18px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1);
}
.home-results article { width: 0; min-width: 0; padding: 14px 0; display: flex; align-items: center; gap: 13px; overflow: hidden; border: 1px solid transparent; border-radius: 11px; background: rgba(5,20,36,.94); opacity: 0; transform: translateY(16px) scale(.96); transition: width .55s cubic-bezier(.22,1,.36,1), min-width .55s cubic-bezier(.22,1,.36,1), padding .55s cubic-bezier(.22,1,.36,1), opacity .45s ease, transform .55s cubic-bezier(.22,1,.36,1), border-color .35s; }
.home-results article.revealed { width: 205px; min-width: 205px; padding: 14px 19px; border-color: rgba(0,219,233,.2); opacity: 1; transform: translateY(0) scale(1); }
.home-results article.revealed:hover { border-color: rgba(0,219,233,.45); }
.home-results article > div { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 7px; }
.home-results small { grid-column: 1 / -1; margin-bottom: 5px; color: rgba(185,202,203,.62); font: 700 9px/1 JetBrains Mono, monospace; letter-spacing: .16em; }
.home-results strong { color: #d4e4fa; font: 700 23px/1 JetBrains Mono, monospace; }
.home-results em { color: rgba(185,202,203,.58); font: normal 500 9px/1 JetBrains Mono, monospace; }
.result-arrow { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font: 700 18px/1 JetBrains Mono, monospace; }
.download-arrow { color: #36e6a2; }
.upload-arrow { color: #9b70ff; }
.ping-arrow { color: #ffbd5a; }
.results-divider { display: none; }
.share-results {
  position: absolute;
  left: 50%;
  top: -65px;
  width: 142px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid rgba(0,219,233,.19);
  border-radius: 12px;
  color: rgba(39,207,210,.64);
  background: rgba(5,20,36,.94);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(8px);
  transition: transform .35s ease, border-color .25s, background .25s, opacity .35s;
}
.test-complete .share-results { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.share-results:hover { transform: translateX(-50%) translateY(-2px); border-color: rgba(0,219,233,.7); background: #0d1c2d; }
.share-results > svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.share-results > small { font: 700 13px/1 JetBrains Mono, monospace; letter-spacing: .12em; }
.node-panel { transition: opacity .45s ease, transform .45s ease; }
.test-running .node-panel,
.test-complete .node-panel { opacity: 0; pointer-events: none; transform: translate(-50%, 15px); }
.home-results.has-results,
.test-complete .home-results { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }

@media (max-width: 640px) {
  .reactor.is-testing { transform: translateY(-8px) scale(1.06); }
  .reactor.is-complete { transform: translateY(-14px) scale(.88); }
  .home-results { bottom: 57px; min-width: 0; width: calc(100% - 16px); padding: 0; gap: 6px; }
  .home-results article { width: 0; min-width: 0; padding: 9px 0; flex: 0; flex-direction: column; text-align: center; gap: 5px; }
  .home-results article.revealed { width: auto; min-width: 0; padding: 9px 5px; flex: 1; }
  .home-results article > div { justify-content: center; }
  .home-results strong { font-size: 15px; }
  .result-arrow { width: 25px; height: 25px; font-size: 13px; }
  .share-results { top: -57px; left: 50%; right: auto; width: 124px; height: 44px; gap: 10px; border-radius: 11px; }
  .share-results > svg { width: 19px; height: 19px; }
  .share-results > small { font-size: 11px; }
}

/* Mbps / Kbps selector */
.headline { margin-bottom: 21px; }
.unit-switch {
  position: relative;
  z-index: 8;
  margin-bottom: clamp(25px, 4vh, 48px);
  width: 194px;
  height: 44px;
  padding: 4px;
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(0,219,233,.18);
  border-radius: 999px;
  background: rgba(1,15,31,.78);
  overflow: hidden;
  transition: opacity .35s ease, transform .35s ease;
}
.test-running .unit-switch { opacity: 0; pointer-events: none; transform: translateY(-7px); }
.unit-switch button {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  color: rgba(185,202,203,.55);
  background: transparent;
  font: 700 10px/1 JetBrains Mono, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s, background .2s;
}
.unit-switch button:hover { color: #d4e4fa; }
.unit-switch button.active { color: #00363a; background: #27cfd2; box-shadow: 0 0 14px rgba(39,207,210,.18); }
@media (max-width: 640px) {
  .headline { margin-bottom: 17px; }
  .unit-switch { margin-bottom: 25px; }
  .unit-switch { width: 180px; height: 42px; }
  .unit-switch button { padding: 0 11px; }
}

/* Laptop-height composition: prevent the server/results panel overlapping the gauge */
@media (max-height: 1000px) and (min-width: 641px) {
  main { padding-top: 76px; padding-bottom: 120px; }
  header { height: 76px; }
  .logo { font-size: 28px; }
  .headline { margin-bottom: 15px; }
  .headline h1 { font-size: clamp(48px, 4.7vw, 60px); line-height: 1.04; }
  .headline p { margin-top: 15px; font-size: 11px; }
  .unit-switch { margin-bottom: 18px; }
  .reactor { width: 420px; height: 420px; min-width: 0; min-height: 0; }
  .node-panel { bottom: 46px; }
  .home-results { bottom: 46px; }
}

@media (max-width: 640px) {
  body { min-height: 100svh; }
  main { min-height: 100svh; padding-inline: 12px; padding-bottom: calc(165px + env(safe-area-inset-bottom)); }
  header { height: 66px; }
  .logo { font-size: clamp(21px, 6.5vw, 27px); }
  .headline { width: 100%; }
  .headline h1 { font-size: clamp(30px, 9.7vw, 38px); line-height: 1.07; }
  .headline p { width: min(340px, 94vw); }
  .reactor { width: min(86vw, 340px); height: min(86vw, 340px); }
  .node-panel { width: calc(100% - 16px); bottom: calc(55px + env(safe-area-inset-bottom)); padding-inline: 12px; }
  .node-panel > div { min-width: 0; }
  .node-panel strong { font-size: clamp(7px, 2.15vw, 8px); white-space: nowrap; }
  .home-results { width: calc(100% - 8px); bottom: calc(55px + env(safe-area-inset-bottom)); }
  .home-results article { overflow: hidden; }
  .home-results article > div { min-width: 0; max-width: 100%; }
  .home-results strong { max-width: 100%; font-size: clamp(12px, 4vw, 15px); overflow: hidden; text-overflow: ellipsis; }
  .home-results em { font-size: 7px; }
  footer { bottom: env(safe-area-inset-bottom); padding-inline: 12px; }
  footer nav { gap: 20px; }
  footer a { font-size: 7px; }
}

@media (max-width: 350px) {
  .headline h1 { font-size: 29px; }
  .headline p { font-size: 8px; }
  .unit-switch { width: 168px; height: 40px; }
  .reactor { width: 290px; height: 290px; }
  .node-panel { gap: 8px; }
  .node-panel .divider { height: 30px; }
  .node-panel strong { font-size: 6.7px; }
}

/* Natural document flow for phones and compact tablets */
@media (max-width: 640px) {
  html, body { min-height: 100%; }
  body { overflow-y: auto; }
  main { min-height: 0; padding-bottom: 28px; overflow: visible; }
  .reactor-wrap { flex: 0 0 auto; }

  .home-results {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    transform: translateY(12px);
    transition: max-height .5s ease, margin-top .5s ease, opacity .4s ease, transform .5s cubic-bezier(.22,1,.36,1);
  }
  .home-results.has-results,
  .test-complete .home-results {
    max-height: 150px;
    margin-top: 24px;
    opacity: 1;
    transform: translateY(0);
  }
  .test-complete .home-results { margin-top: 78px; }

  .node-panel {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    margin-top: 28px;
    opacity: 1;
    transform: none;
  }
  .test-running .node-panel,
  .test-complete .node-panel { display: none; }

  .share-results { top: -58px; }
  footer {
    position: relative;
    bottom: auto;
    min-height: 58px;
    margin-top: 0;
    padding-block: 18px;
  }
}

@media (max-width: 640px) and (max-height: 760px) {
  body { overflow: hidden; }
  header { height: 58px; }
  main { padding-top: 61px; padding-bottom: 18px; }
  .headline { margin-bottom: 11px; }
  .headline h1 { font-size: clamp(29px, 7vw, 35px); }
  .headline p { margin-top: 11px; font-size: 8px; line-height: 1.55; }
  .unit-switch { width: 176px; height: 40px; margin-bottom: 13px; }
  .reactor { width: 290px; height: 290px; }
  .node-panel {
    position: fixed;
    z-index: 20;
    left: 8px;
    right: 8px;
    bottom: 38px;
    width: auto;
    margin: 0;
    padding-block: 11px;
  }
  footer { position: fixed; bottom: 0; width: 100%; min-height: 34px; padding: 8px 14px; }

  .test-running footer,
  .test-complete footer { display: none; }
  .test-running .home-results.has-results,
  .test-complete .home-results {
    position: fixed;
    z-index: 20;
    left: 4px;
    right: 4px;
    bottom: 10px;
    width: auto;
    max-height: 110px;
    margin: 0;
    transform: none;
  }
  .test-complete .home-results { margin: 0; }
  .test-complete .share-results { top: -57px; }
}

@media (min-width: 641px) and (max-width: 900px) and (max-height: 760px) {
  .node-panel { bottom: 42px; }
  .test-running footer,
  .test-complete footer { display: none; }
  .test-running .home-results.has-results,
  .test-complete .home-results {
    position: fixed;
    z-index: 20;
    left: 12px;
    right: 12px;
    bottom: 10px;
    width: auto;
    max-height: 110px;
    margin: 0;
    transform: none;
  }
}

@media (min-width: 901px) and (max-height: 900px) {
  .reactor-wrap { transform: translateY(-22px); }
}

/* Compact result cards on phones and small tablets */
@media (max-width: 640px) {
  .home-results { justify-content: center; }
  .home-results article.revealed {
    width: clamp(98px, 30vw, 160px);
    min-width: clamp(98px, 30vw, 160px);
    flex: 0 0 clamp(98px, 30vw, 160px);
  }
}

/* Desktop hierarchy: keep the test and its results in one compact visual flow */
@media (min-width: 901px) {
  main {
    justify-content: flex-start;
    padding-top: 92px;
    padding-bottom: 86px;
  }

  .headline {
    margin-bottom: 14px;
  }

  .headline h1 {
    font-size: clamp(32px, 3vw, 43px);
    line-height: 1.03;
  }

  .headline p {
    margin-top: 12px;
    font-size: clamp(9px, .75vw, 11px);
  }

  .unit-switch {
    margin-bottom: 0;
  }

  .reactor-wrap {
    margin-top: -35px;
    transform: none;
  }

  .home-results {
    position: relative;
    left: auto;
    bottom: auto;
    margin-top: -40px;
    transform: translateY(18px);
  }

  .home-results.has-results,
  .test-complete .home-results {
    transform: translateY(0);
  }

  .share-results {
    top: calc(100% + 12px);
  }
}

/* Keep the speed test itself as the primary visual focus */
.go-button {
  border-color: rgba(0,219,233,.45);
  box-shadow: 0 0 52px rgba(0,219,233,.2), inset 0 0 22px rgba(0,219,233,.07);
}

.reactor.is-complete .go-button small {
  display: none;
}

@media (min-width: 901px) {
  .go-button { width: 64%; height: 64%; }
}

@media (min-width: 641px) and (max-width: 900px) {
  .headline h1 { font-size: clamp(34px, 4vw, 42px); }
}

@media (max-width: 640px) {
  .headline h1 { font-size: clamp(26px, 8.25vw, 32px); }
}

/* Keep the central widget visually continuous from idle through results */
.reactor.is-complete {
  transform: none;
}

@media (max-width: 640px) and (min-height: 761px) {
  .test-running .home-results.has-results,
  .test-complete .home-results {
    margin-top: -25px;
  }

  .test-complete .home-results {
    margin-bottom: 60px;
  }

  .test-complete .share-results {
    top: calc(100% + 10px);
  }
}

/* Unified results bar: the completed state mirrors the start-screen node panel */
.home-results {
  width: 642px;
  min-height: 82px;
  padding: 10px 20px;
  gap: 0;
  border: 1px solid rgba(0,219,233,.28);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(13,28,45,.9), rgba(5,20,36,.94));
  box-shadow: 0 8px 32px rgba(0,0,0,.32);
}

.home-results article,
.home-results article.revealed {
  width: auto;
  min-width: 0;
  padding: 10px 20px;
  flex: 1 1 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.home-results article.revealed:hover {
  border-color: transparent;
}

.results-divider {
  width: 1px;
  height: 40px;
  display: block;
  flex: 0 0 1px;
  background: rgba(0,219,233,.12);
}

@media (max-width: 640px) {
  .home-results {
    width: 100%;
    min-height: 76px;
    padding: 8px 5px;
  }

  .home-results article,
  .home-results article.revealed {
    width: auto;
    min-width: 0;
    padding: 8px 3px;
    flex: 1 1 0;
  }

  .results-divider { height: 42px; }
}

@media (min-width: 901px) and (max-height: 1000px) {
  .node-panel { bottom: 72px; }
}