:root{
	--meter-gradient-1:#E74E98;
	--meter-gradient-2:#FB556A;
	--meter-gradient-3:#D6D63A;
	--meter-gradient-4:#32B627;
}

html,body{
	border:none;
	padding:0;
	margin:0;
	background:#2E2840;
	color:#FFFFFF;
	min-height:100%;
}

body{
	font-family:Arial,sans-serif;
	display:flex;
	justify-content:center;
	padding:16px 12px;
	box-sizing:border-box;
}

*{
	box-sizing:border-box;
}

#page{
	width:min(100%,585px);
	min-height:calc(100vh - 32px);
	background:#2E2840;
	padding:28px 12px 24px;
	display:flex;
	flex-direction:column;
	align-items:center;
	position:relative;
}

.brand{
	display:block;
	width:min(100%,416px);
	height:auto;
	margin-bottom:22px;
}

#page.animation-hidden .brand{
	margin-bottom:38px;
}

.network{
	position:relative;
	width:100%;
	max-width:100%;
	height:252px;
	margin-bottom:10px;
	display:flex;
	flex-direction:column;
	align-items:center;
}

.network img{
	position:relative;
	z-index:2;
	display:block;
	object-fit:contain;
}

.signalRings{
	position:absolute;
	left:50%;
	top:44%;
	width:190px;
	height:190px;
	transform:translate(-50%,-50%);
	pointer-events:none;
	opacity:0;
	transition:opacity 0.25s ease;
	z-index:0;
}

#page.test-running .signalRings{
	opacity:1;
}

.signalRing{
	position:absolute;
	left:50%;
	top:50%;
	border:2px solid rgba(255,255,255,0.22);
	border-radius:50%;
	transform:translate(-50%,-50%) scale(0.94);
	animation:ringPulse 2.2s ease-out infinite;
}

.signalRing.ring1{
	width:72px;
	height:72px;
}

.signalRing.ring2{
	width:112px;
	height:112px;
	animation-delay:0.35s;
}

.signalRing.ring3{
	width:154px;
	height:154px;
	animation-delay:0.7s;
}

.signalLines{
	position:absolute;
	inset:0;
	pointer-events:none;
	opacity:0;
	transition:opacity 0.25s ease;
	z-index:1;
}

#page.test-running .signalLines{
	opacity:1;
}

.signalLines line{
	stroke:rgba(255,255,255,0.26);
	stroke-width:2;
	stroke-linecap:round;
}

.signalPulse{
	fill:none;
	stroke:#FFFFFF;
	stroke-width:3;
	stroke-linecap:round;
	stroke-dasharray:44 300;
	animation:travel 1.8s linear infinite;
	filter:drop-shadow(0 0 7px rgba(255,255,255,0.98));
}

.signalPulse.delay1{ animation-delay:0.2s; }
.signalPulse.delay2{ animation-delay:0.45s; }
.signalPulse.delay3{ animation-delay:0.7s; }
.signalPulse.delay4{ animation-delay:0.95s; }

.network img.router{
	position:absolute;
	width:410px;
	height:auto;
	top:50%;
	left:50%;
	transform:translate(-50%,-82%);
	filter:drop-shadow(0 4px 8px rgba(0,0,0,0.35));
}

.deviceRow{
	position:absolute;
	left:12px;
	right:12px;
	bottom:0;
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	gap:10px;
	padding:0;
}

.device{
	width:clamp(38px, 9vw, 56px);
	height:clamp(38px, 9vw, 56px);
	filter:drop-shadow(0 4px 8px rgba(0,0,0,0.35));
}

@keyframes ringPulse{
	0%{
		opacity:0.1;
		transform:translate(-50%,-50%) scale(0.88);
	}
	50%{
		opacity:0.24;
		transform:translate(-50%,-50%) scale(1);
	}
	100%{
		opacity:0.06;
		transform:translate(-50%,-50%) scale(1.09);
	}
}

@keyframes travel{
	from{ stroke-dashoffset:320; }
	to{ stroke-dashoffset:0; }
}

.card{
	width:100%;
	background:#070708;
	border:1px solid rgba(255,255,255,0.38);
	border-radius:12px;
	padding:22px 12px 18px;
	margin-top:0;
	box-shadow:0 14px 30px rgba(0,0,0,0.28);
}

.card h1{
	margin:0;
	font-size:21px;
	line-height:1.12;
	text-align:center;
	font-weight:800;
}

.subtitle{
	margin:12px 10px 18px;
	font-size:11px;
	line-height:1.4;
	color:rgba(255,255,255,0.78);
	text-align:center;
}

.resultsLayout{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:18px;
	margin-bottom:18px;
}

#page.design-stacked .resultsLayout{
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
	gap:8px;
}

#page.design-stacked .meterColumn{
	flex:0 0 auto;
	width:100%;
	max-width:400px;
	display:flex;
	flex-direction:column;
	align-items:center;
}

#page.design-stacked .meterShell{
	margin:0 auto;
	width:min(100%,400px);
	flex-basis:auto;
	height:108px;
}

#page.design-stacked #dlMeter{
	height:108px;
}

#page.design-stacked .finalReading{
	margin-top:0;
	min-height:20px;
}

#page.design-stacked .metrics{
	width:100%;
	flex:0 0 auto;
	margin-top:0;
}

.meterShell{
	position:relative;
	flex:0 0 230px;
	width:230px;
	margin:0;
}

#dlMeter{
	display:block;
	width:100%;
	height:136px;
}

.meterCenter{
	position:absolute;
	left:50%;
	bottom:10px;
	transform:translateX(-50%);
	display:none;
}

#dlText{
	font-size:24px;
	font-weight:700;
	line-height:1;
}

.meterUnit{
	margin-top:4px;
	font-size:11px;
	color:rgba(255,255,255,0.72);
}

.meterScale{
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	font-size:10px;
	color:rgba(255,255,255,0.68);
	padding:0;
	pointer-events:none;
}

.meterScale span{
	display:inline-block;
	position:absolute;
}

.meterMid{
	position:absolute;
	left:0;
	font-size:10px;
	color:rgba(255,255,255,0.68);
	pointer-events:none;
}

#meterMin,
#meterMax{
	transform:none;
}

.meterColumn{
	flex:0 0 230px;
	width:230px;
}

.finalReading{
	min-height:28px;
	margin-top:2px;
	text-align:center;
	color:#F5F5F5;
	font-size:18px;
	font-weight:700;
	line-height:1.1;
}

.metrics{
	flex:1 1 0;
	display:flex;
	flex-direction:column;
	gap:8px;
	margin-bottom:0;
}

.metric{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:7px 12px;
	border-radius:999px;
	background:#39304E;
	font-size:12px;
}

.metricLabel{
	display:flex;
	align-items:center;
	gap:8px;
	color:rgba(255,255,255,0.86);
}

.metricDot{
	width:8px;
	height:8px;
	border-radius:50%;
}

.metric.download .metricDot{
	background:#A4E034;
}

.metric.upload .metricDot{
	background:#B6BF3A;
}

.metric.ping .metricDot{
	background:#FF5D91;
}

.metricValue{
	font-weight:700;
}

#startStopBtn{
	display:flex;
	align-items:center;
	justify-content:center;
	width:auto;
	min-height:35.962px;
	margin:0 auto;
	border:none;
	border-radius:28.412px;
	background:#00B67A;
	padding:8.775px 24.571px;
	gap:17.551px;
	color:#FFFFFF;
	font-size:12px;
	font-weight:700;
	letter-spacing:0.02em;
	cursor:pointer;
	transition:transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
	box-shadow:0 8px 20px rgba(0,182,122,0.28);
}

#startStopBtn:hover{
	transform:translateY(-1px);
}

#startStopBtn.running{
	background:#F3B43F;
	box-shadow:0 8px 20px rgba(243,180,63,0.28);
}

#startStopBtn.cta-ready{
	background:#00B67A;
}

.footerArea{
	width:100%;
	margin-top:15px;
	display:flex;
	flex-direction:column;
	align-items:center;
}

.footerDivider{
	width:100%;
	border-top:0.8px solid #F5F5F5;
	margin-bottom:15px;
	opacity:0.9;
}

.footer{
	color:#F5F5F5;
	font-family:"Open Sans",Arial,sans-serif;
	font-size:clamp(12px, 2.8vw, 20.663px);
	font-style:normal;
	font-weight:400;
	line-height:normal;
	white-space:nowrap;
}

.visually-hidden{
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
	border:0;
}

@media all and (min-width:561px){
	#page{
		width:min(100%,731px);
		padding:12px 18px 24px;
	}

	.brand{
		width:min(100%,240px);
		margin-bottom:8px;
	}

	.network{
		height:248px;
		margin-bottom:0;
	}

	.signalRings{
		width:220px;
		height:220px;
	}

	.network img.router{
		width:470px;
		top:42%;
		transform:translate(-50%,-92%);
	}

	.deviceRow{
		left:20px;
		right:20px;
		bottom:44px;
		gap:16px;
	}

	.device{
		width:72px;
		height:72px;
	}

	.card{
		padding:24px 20px 16px;
		min-height:386px;
		margin-top:0;
	}

	.card h1{
		font-size:28px;
	}

	.subtitle{
		margin:12px 24px 18px;
		font-size:13px;
	}

	.resultsLayout{
		gap:28px;
		margin-bottom:14px;
	}

	#page.design-stacked .resultsLayout{
		gap:8px;
	}

	#page.design-stacked .meterShell,
	#page.design-stacked .meterColumn{
		width:500px;
		max-width:100%;
		flex-basis:auto;
	}

	#page.design-stacked .meterShell{
		height:132px;
	}

	#page.design-stacked #dlMeter{
		height:132px;
	}

	#page.design-stacked .metrics{
		max-width:none;
		width:100%;
	}

	.meterShell,
	.meterColumn{
		flex-basis:280px;
		width:280px;
	}

	#dlMeter{
		height:164px;
	}

	.finalReading{
		font-size:22px;
		min-height:28px;
	}

	.metrics{
		gap:10px;
	}

	.metric{
		padding:10px 16px;
		font-size:14px;
	}

	.metricDot{
		width:10px;
		height:10px;
	}

	#startStopBtn{
		min-height:42px;
		padding:10px 28px;
		font-size:14px;
	}
}

@media all and (max-width:360px){
	body{
		padding:12px 8px;
	}

	#page{
		width:100%;
		min-height:auto;
	}
}

@media all and (max-width:560px){
	#page{
		width:100%;
	}

	.brand{
		width:min(100%,200px);
	}

	.network{
		max-width:100%;
		height:188px;
	}

	.signalRings{
		width:150px;
		height:150px;
		transform:translate(-50%,-50%);
	}

	.network img.router{
		width:310px;
		transform:translate(-50%,-82%);
	}

	.deviceRow{
		left:8px;
		right:8px;
		gap:8px;
	}

	.device{
		width:clamp(28px, 11vw, 40px);
		height:clamp(28px, 11vw, 40px);
	}

	.resultsLayout{
		flex-direction:row;
		align-items:center;
		gap:12px;
	}

	#page.design-stacked .meterShell,
	#page.design-stacked .meterColumn{
		width:min(100%,300px);
		flex-basis:auto;
	}

	#page.design-stacked .meterShell{
		height:110px;
	}

	#page.design-stacked #dlMeter{
		height:110px;
	}

	.meterShell{
		width:150px;
		max-width:none;
		flex:0 0 150px;
		margin:0;
	}

	#dlMeter{
		height:98px;
	}

	.meterColumn{
		width:150px;
		max-width:none;
		flex:0 0 150px;
	}

	.finalReading{
		font-size:15px;
		min-height:20px;
	}

	.metrics{
		width:auto;
		flex:1 1 0;
	}

	.metric{
		font-size:11px;
		padding:6px 10px;
	}

	.meterMid,
	.meterScale{
		font-size:9px;
	}

}