/* NWIMS Speed Test — dark "instrument panel" card that sits inside any light page. */
.nst {
	--st-bg: #0b1730;
	--st-bg2: #0f2340;
	--st-ink: #eaf2ff;
	--st-dim: #8ea3c2;
	--st-line: rgba(148, 178, 222, .16);
	--st-a: #22d3ee;
	--st-b: #3b82f6;
	--st-c: #a855f7;
	position: relative; isolation: isolate; overflow: hidden;
	margin: 1.5rem 0 2.5rem; padding: 40px 32px 28px; border-radius: 28px;
	background: radial-gradient(120% 90% at 50% 0%, #16315e 0%, var(--st-bg2) 45%, var(--st-bg) 100%);
	color: var(--st-ink); font-family: inherit;
	box-shadow: 0 30px 60px -20px rgba(8, 20, 45, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.nst *, .nst *::before, .nst *::after { box-sizing: border-box; }
.nst [hidden] { display: none !important; }
.nst ul.nst-metrics { padding: 0 !important; list-style: none !important; }
.nst .nst-metric { margin: 0 !important; }
.nst p { max-width: none; }
.nst-glow { position: absolute; inset: -40% -20% auto; height: 520px; z-index: -1; pointer-events: none;
	background: radial-gradient(closest-side, rgba(59, 130, 246, .35), transparent 70%); opacity: .55; transition: opacity .6s ease, transform 1.2s ease; }
.nst.is-running .nst-glow { opacity: 1; transform: scale(1.08); animation: nst-breathe 3.2s ease-in-out infinite; }
@keyframes nst-breathe { 50% { opacity: .7; } }

.nst-stage { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.nst-gauge { position: relative; width: min(340px, 78vw); aspect-ratio: 1; margin-bottom: -28px; }
.nst-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.nst-track { fill: none; stroke: rgba(148, 178, 222, .14); stroke-width: 18; stroke-linecap: round; }
.nst-arc, .nst-arc-glow { fill: none; stroke: url(#nst-grad); stroke-width: 18; stroke-linecap: round; transition: opacity .3s; }
.nst-arc-glow { stroke-width: 22; opacity: .55; }
.nst-ticks text { fill: var(--st-dim); font-size: 11px; font-weight: 600; text-anchor: middle; dominant-baseline: middle; font-family: inherit; }
.nst-ticks line { stroke: rgba(148, 178, 222, .3); stroke-width: 2; stroke-linecap: round; }
.nst-tip { fill: #fff; filter: drop-shadow(0 0 8px rgba(34, 211, 238, .95)) drop-shadow(0 0 3px #fff); transition: opacity .3s; }

.nst-readout { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 4%; pointer-events: none; }
.nst-phase { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--st-a); }
.nst-value { font-size: clamp(44px, 9vw, 64px); font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
	background: linear-gradient(180deg, #fff, #c7dcff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nst-unit { font-size: 14px; font-weight: 600; color: var(--st-dim); margin-top: 2px; }

.nst-controls { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.nst-go, .nst-again {
	position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 56px; padding: 0 38px; border: 0; border-radius: 999px; cursor: pointer;
	font: inherit; font-size: 17px; font-weight: 700; letter-spacing: .01em; color: #04122a;
	background: linear-gradient(135deg, var(--st-a), var(--st-b) 55%, var(--st-c));
	box-shadow: 0 10px 30px -8px rgba(59, 130, 246, .8), inset 0 1px 0 rgba(255, 255, 255, .35);
	transition: transform .15s ease, box-shadow .2s ease, filter .2s;
}
.nst-go { color: #fff; }
.nst-go:hover, .nst-again:hover { transform: translateY(-1px); box-shadow: 0 14px 34px -8px rgba(59, 130, 246, .95), inset 0 1px 0 rgba(255, 255, 255, .35); }
.nst-go:focus-visible, .nst-again:focus-visible, .nst-report:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.nst-go::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 2px solid rgba(34, 211, 238, .55); animation: nst-ping 2.4s ease-out infinite; pointer-events: none; }
@keyframes nst-ping { 0% { transform: scale(.92); opacity: .9; } 100% { transform: scale(1.18); opacity: 0; } }
.nst.is-running .nst-go { background: rgba(148, 178, 222, .14); color: var(--st-ink); box-shadow: inset 0 0 0 1px var(--st-line); }
.nst.is-running .nst-go::after { display: none; }
.nst-hint { margin: 0; max-width: 420px; font-size: 14px; color: var(--st-dim); }
.nst.is-running .nst-hint, .nst.is-done .nst-hint { visibility: hidden; }

.nst-metrics { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.nst-metric { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon label" "value value" "bar bar"; gap: 6px 10px; align-items: center;
	padding: 16px 16px 14px; border-radius: 18px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--st-line); transition: box-shadow .3s, background .3s; }
.nst-metric.is-active { background: rgba(59, 130, 246, .12); box-shadow: inset 0 0 0 1px rgba(59, 130, 246, .55), 0 0 24px -6px rgba(59, 130, 246, .6); }
.nst-m-icon { grid-area: icon; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: rgba(34, 211, 238, .12); }
.nst-m-icon svg { width: 18px; height: 18px; fill: none; stroke: var(--st-a); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nst-metric[data-k="ul"] .nst-m-icon { background: rgba(168, 85, 247, .14); } .nst-metric[data-k="ul"] .nst-m-icon svg { stroke: #c084fc; }
.nst-metric[data-k="ping"] .nst-m-icon, .nst-metric[data-k="jitter"] .nst-m-icon { background: rgba(59, 130, 246, .14); }
.nst-metric[data-k="ping"] .nst-m-icon svg, .nst-metric[data-k="jitter"] .nst-m-icon svg { stroke: #93c5fd; }
.nst-m-label { grid-area: label; font-size: 13px; font-weight: 700; color: var(--st-dim); text-transform: uppercase; letter-spacing: .08em; }
.nst-m-value { grid-area: value; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nst-m-value b { font-size: 26px; font-weight: 800; color: var(--st-ink); letter-spacing: -.02em; }
.nst-m-value small { font-size: 13px; color: var(--st-dim); font-weight: 600; }
.nst-m-bar { grid-area: bar; height: 4px; border-radius: 4px; background: rgba(148, 178, 222, .12); overflow: hidden; }
.nst-m-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--st-a), var(--st-b)); transition: width .25s linear; }
.nst-metric[data-k="ul"] .nst-m-bar i { background: linear-gradient(90deg, var(--st-b), var(--st-c)); }

.nst-summary { margin-top: 22px; padding: 20px 22px; border-radius: 18px; background: linear-gradient(135deg, rgba(34, 211, 238, .10), rgba(168, 85, 247, .10)); box-shadow: inset 0 0 0 1px var(--st-line);
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; animation: nst-rise .5s ease both; }
.nst-summary[hidden] { display: none; }
@keyframes nst-rise { from { opacity: 0; transform: translateY(8px); } }
.nst-verdict { margin: 0; font-size: 17px; font-weight: 600; color: var(--st-ink); flex: 1 1 320px; }
.nst-verdict strong { color: #67e8f9; }
.nst-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.nst-again { min-height: 46px; padding: 0 24px; font-size: 15px; }
.nst-report { color: #a5d8ff !important; font-weight: 600; font-size: 15px; text-decoration: none; }
.nst-report:hover { color: #fff !important; text-decoration: underline; }

.nst-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin: 20px 0 0; font-size: 13px; color: var(--st-dim); text-align: center; }
.nst-ip:empty { display: none; }
.nst-noscript { color: var(--st-ink); text-align: center; }
.nst-noscript a { color: #a5d8ff; }
.nst .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 760px) {
	.nst { padding: 30px 18px 22px; border-radius: 22px; }
	.nst-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nst-m-value b { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
	.nst *, .nst *::before, .nst *::after { animation: none !important; transition: none !important; }
}