/* Page shell for the stand-alone speed test at speed.localtonet.com. The tool itself is styled by speed-test.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: #18233b; background: #fff; font-family: Nunito, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.5; }
.dark body { color: #e6edf8; background: #0f172a; }
img, svg { display: block; }
button { font: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }

/* Same palette the main site gives its tool pages. */
.resource-page { --resource-ink: #18233b; --resource-muted: #65718a; --resource-line: #e5e9f1; --resource-surface: #fff; --resource-soft: #f7f8fc; --resource-accent: #4f46e5; color: var(--resource-ink); background: var(--resource-surface); }
.dark .resource-page { --resource-ink: #e6edf8; --resource-muted: #a8b4c9; --resource-line: #2a3650; --resource-surface: #0f172a; --resource-soft: #182238; --resource-accent: #b0baff; }

.sx-bar { position: absolute; inset: 0 0 auto; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1168px; margin: 0 auto; padding: 14px 24px; }
/* Same size as the main site's header logo. */
.sx-logo { width: 80px; height: auto; }
.sx-logo-dark, .dark .sx-logo-light { display: none; }
.dark .sx-logo-dark { display: block; }
.sx-links { display: flex; align-items: center; gap: 6px; }
.sx-links a { padding: 8px 12px; border-radius: 10px; color: #4b5873; font-size: .86rem; font-weight: 750; text-decoration: none; }
.dark .sx-links a { color: #a8b4c9; }
.sx-links a:hover { color: #4f46e5; background: rgba(79, 70, 229, .08); }
.dark .sx-links a:hover { color: #c7d2fe; background: rgba(165, 180, 252, .1); }
.sx-theme { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #e5e9f1; border-radius: 50%; color: #4b5873; background: rgba(255, 255, 255, .7); cursor: pointer; }
.dark .sx-theme { border-color: #2a3650; color: #e6edf8; background: rgba(15, 23, 42, .6); }
.sx-theme svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sx-links a:focus-visible, .sx-theme:focus-visible, .sx-brand:focus-visible, .sx-footer a:focus-visible { outline: 3px solid #4f46e5; outline-offset: 3px; }

.st-stage.sx-stage { padding-top: 108px; }
.st-head.sx-head h1 { margin-top: 0; font-size: clamp(2.1rem, 5vw, 3.2rem); }
.sx-head + .st-device { margin-top: 26px; }

.sx-footer { max-width: 1168px; margin: 0 auto; padding: 40px 24px 56px; color: #65718a; font-size: .86rem; text-align: center; }
.dark .sx-footer { color: #a8b4c9; }
.sx-footer p { margin: 0; }
.sx-footer a { color: #4f46e5; font-weight: 750; text-decoration: none; }
.dark .sx-footer a { color: #b0baff; }
.sx-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sx-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 14px; }

@media (max-width: 599px) {
    .sx-bar { padding: 12px 16px; }
    .sx-links a:not(:first-child) { display: none; }
    .st-stage.sx-stage { padding-top: 100px; }
}