@font-face{
	font-family:"Manrope";
	src:url("../fonts/manrope-var.woff2") format("woff2"),
		url("../fonts/manrope-var.woff") format("woff");
	font-weight:200 800;
	font-style:normal;
	font-display:swap;
}
:root{
	--ink:#0A2A1D;
	--ink-soft:#5A7A6B;
	--paper:rgba(255,255,255,0.74);
	--paper-solid:#FFFFFF;
	--edge:rgba(255,255,255,0.85);
	--line:rgba(11,90,58,0.10);
	--brand:#12A05C;
	--brand-deep:#0B6B41;
	--lime:#BFD93F;
	--dl:#12A473;
	--ul:#12A473;
	--shadow:0 30px 70px -40px rgba(6,58,38,0.55);
	--radius:26px;
	--btn-shine:rgba(255,255,255,0.2);
	--chip-edge:rgba(18,164,115,0.28);
	--action-edge:rgba(18,164,115,0.45);
	--action-tint:rgba(18,164,115,0.12);
}
*{box-sizing:border-box;}
html{
	color-scheme:light;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	-webkit-text-size-adjust:100%;
}
html,body{
	border:0;padding:0;margin:0;
	min-height:100%;
}
body{
	font-family:"Manrope","Segoe UI",Roboto,system-ui,-apple-system,sans-serif;
	color:var(--ink);
	text-align:center;
	font-size:16px;
	line-height:1.45;
	-webkit-font-smoothing:antialiased;
	background:
		radial-gradient(60em 40em at 12% -10%, rgba(255,247,178,0.85) 0%, rgba(255,247,178,0) 60%),
		radial-gradient(55em 45em at 95% 15%, rgba(150,226,190,0.75) 0%, rgba(150,226,190,0) 62%),
		linear-gradient(135deg,#FBF7CE 0%,#E6F4C6 30%,#C6EDD5 65%,#ACE3D6 100%);
	background-attachment:fixed;
	padding:2.5em 1em 4em;
}

h1{
	font-size:2.2em;
	font-weight:800;
	letter-spacing:-0.025em;
	line-height:1.08;
	margin:0.4em 0 0.35em;
	color:var(--ink);
}
.lede{
	margin:0 auto 2em;
	max-width:30em;
	color:var(--ink-soft);
	font-size:1.02em;
}

#loading{color:var(--ink-soft);}
span.loadCircle{
	display:inline-block;
	width:1.15em;height:1.15em;
	vertical-align:-0.2em;
	margin-right:0.6em;
	border:2px solid rgba(11,90,58,0.15);
	border-top-color:var(--brand);
	border-radius:50%;
	animation:spin 0.7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

#startStopBtn{
	position:absolute;
	left:50%;top:50%;
	transform:translate(-50%,-50%);
	width:16em;height:3.5em;line-height:3.5em;
	border-radius:999px;
	overflow:hidden;
	font-weight:700;font-size:1.02em;letter-spacing:0.02em;
	color:#fff;
	background:linear-gradient(135deg,#2CC177 0%,#0E8A55 100%);
	box-shadow:0 16px 34px -18px rgba(11,107,65,0.9),inset 0 1px 0 rgba(255,255,255,0.25);
	cursor:pointer;
	user-select:none;
	-webkit-user-select:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	-webkit-touch-callout:none;
	touch-action:manipulation;
	-webkit-appearance:none;
	appearance:none;
	transition:transform .18s ease,box-shadow .25s ease,background .3s ease,opacity .26s ease .16s;
}
@media (hover:hover){
	#startStopBtn:hover{transform:translate(-50%,calc(-50% - 2px));box-shadow:0 22px 40px -18px rgba(11,107,65,0.95),inset 0 1px 0 rgba(255,255,255,0.3);}
}
#startStopBtn:active{transform:translate(-50%,-50%) scale(0.97);box-shadow:0 10px 22px -16px rgba(11,107,65,0.9),inset 0 1px 0 rgba(255,255,255,0.2);}
#startStopBtn:focus-visible{outline:3px solid var(--brand-deep);outline-offset:3px;}
#startStopBtn:before{content:"Начать тест";position:relative;z-index:1;}
#startStopBtn.done:before{content:"Пройти ещё раз";}
#startStopBtn:after{
	content:"";
	position:absolute;top:0;left:0;
	width:100%;height:100%;
	background-image:linear-gradient(105deg,rgba(255,255,255,0) 18%,var(--btn-shine) 50%,rgba(255,255,255,0) 82%);
	transform:translateX(-115%);
	animation:btnShine 4.5s cubic-bezier(.42,0,.3,1) infinite;
	pointer-events:none;
}
@keyframes btnShine{
	0%{transform:translateX(-115%);}
	40%,100%{transform:translateX(115%);}
}
.stage--live #startStopBtn,.stage--live #startStopBtn:after{animation-play-state:paused;}

.abortBtn{
	flex:none;
	width:2.1em;height:2.1em;
	display:none;align-items:center;justify-content:center;
	border:0;border-radius:50%;
	background:rgba(214,71,60,0.12);
	color:#C4392E;
	cursor:pointer;
	-webkit-appearance:none;appearance:none;
	transition:background .2s ease,transform .18s ease;
}
.abortBtn svg{width:1.05em;height:1.05em;display:block;}
@media (hover:hover){.abortBtn:hover{background:rgba(214,71,60,0.22);transform:rotate(90deg);}}
.abortBtn:focus-visible{outline:3px solid #C4392E;outline-offset:2px;}
#test.running .abortBtn{display:flex;animation:fadeIn .3s;}

.phaseRow{
	display:flex;align-items:center;justify-content:center;
	gap:0.45em;
	margin-bottom:1.4em;
}
.phase{
	display:inline-flex;align-items:center;gap:0.55em;
	padding:0.4em 1em;
	border-radius:999px;
	background:none;
	border:1px solid var(--chip-edge);
	color:var(--ink-soft);
	font-size:0.85em;font-weight:600;letter-spacing:0.01em;
}
@media all and (max-width:26em){
	#startStopBtn{width:calc(100% - 1em);max-width:20em;}
}
.phase .dot{
	width:0.5em;height:0.5em;border-radius:50%;
	background:var(--ink-soft);opacity:.45;
}
.phase--live{color:var(--brand-deep);}
.phase--live .dot{background:var(--brand);opacity:1;animation:pulse 1.4s ease-in-out infinite;}
@keyframes pulse{
	0%,100%{box-shadow:0 0 0 0 rgba(18,160,92,0.45);}
	50%{box-shadow:0 0 0 0.45em rgba(18,160,92,0);}
}
.phase .check{display:none;width:0.9em;height:0.9em;}
.phase--done{
	color:var(--brand-deep);
	background:rgba(18,164,115,0.12);
	border-color:rgba(18,164,115,0.28);
	box-shadow:none;
	animation:doneIn .45s cubic-bezier(.2,.9,.3,1.2);
}
.phase--done .dot{display:none;}
.phase--done .check{display:block;}
@keyframes doneIn{
	0%{opacity:0;transform:scale(0.85);}
	100%{opacity:1;transform:scale(1);}
}

#serverArea{margin-top:1.2em;color:var(--ink-soft);font-size:0.9em;}
#server{
	font:inherit;
	margin-left:0.4em;
	padding:0.45em 0.9em;
	border-radius:999px;
	border:1px solid var(--line);
	background:rgba(255,255,255,0.85);
	color:var(--ink);
}

#test{
	position:relative;
	margin:1.4em auto 0;
	max-width:44em;
	padding:2em 1.6em;
	background:var(--paper);
	border:1px solid var(--edge);
	border-radius:var(--radius);
	box-shadow:var(--shadow);
	backdrop-filter:blur(18px);
	-webkit-backdrop-filter:blur(18px);
}
.testGroup{display:flex;justify-content:center;flex-wrap:wrap;gap:0.5em;}
#test.done{
	border-color:rgba(18,164,115,0.35);
	box-shadow:var(--shadow),0 0 0 3px rgba(18,164,115,0.12);
}
#test.done .readout .meterText{animation:resultIn .5s cubic-bezier(.2,.9,.3,1.2);}
@keyframes resultIn{
	0%{opacity:0;transform:scale(0.9);}
	100%{opacity:1;transform:scale(1);}
}

.readouts{
	display:flex;align-items:stretch;justify-content:center;
	gap:0.4em;
	margin-bottom:1.4em;
}
.readout{
	flex:1 1 0;max-width:14em;
	padding:0.75em 0.6em;
	border-radius:18px;
	transition:background .3s ease,box-shadow .3s ease;
}
.readout--active{
	background:rgba(255,255,255,0.7);
	box-shadow:0 18px 40px -32px rgba(6,58,38,0.75);
}
.readout__label{
	display:flex;align-items:center;justify-content:center;gap:0.4em;
	font-size:0.72em;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;
	color:var(--ink-soft);
}
.readout__label svg{width:1.05em;height:1.05em;display:block;}
#dlCard .readout__label svg{color:var(--dl);}
#ulCard .readout__label svg{color:var(--ul);}
.readout__row{
	display:flex;align-items:baseline;justify-content:center;gap:0.3em;
	margin-top:0.3em;
}
.readout .meterText{font-size:2.1em;}
.readout .unit{font-size:0.66em;letter-spacing:0.08em;}
.readoutSep{width:1px;background:var(--line);margin:0.9em 0;flex:none;}

.stage{
	position:relative;
	width:100%;max-width:24em;
	height:3.6em;
	margin:0 auto;
	transition:height .42s cubic-bezier(.22,.9,.3,1);
}
.stage--live{height:11.2em;}
.stage__clip{
	position:absolute;
	left:0;right:0;top:0;bottom:0;
	overflow:hidden;
	pointer-events:none;
}
.stage canvas{
	position:absolute;left:0;bottom:0;width:100%;height:13em;
	opacity:0;transform:scale(.96);
	transform-origin:50% 80%;
	pointer-events:none;
	transition:opacity .18s ease,transform .42s cubic-bezier(.22,.9,.3,1);
}
.stage--live canvas{
	opacity:1;transform:none;
	transition:opacity .3s ease .08s,transform .42s cubic-bezier(.22,.9,.3,1);
}
.stage--live #startStopBtn{
	opacity:0;
	transform:translate(-50%,-50%) scale(.9);
	pointer-events:none;
	transition:transform .18s ease,box-shadow .25s ease,background .3s ease,opacity .16s ease;
}
.dial__cap{
	height:0;margin-top:0;
	overflow:hidden;
	font-size:0.75em;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
	color:var(--ink-soft);
	transition:color .3s ease,height .35s ease,margin-top .35s ease;
}
.stage--live~.dial__cap{height:1.4em;margin-top:0.6em;}
.dial__cap--dl{color:var(--dl);}
.dial__cap--ul{color:var(--ul);}

.meterText{
	font-size:2.2em;font-weight:800;letter-spacing:-0.035em;
	line-height:1;
	font-variant-numeric:tabular-nums;
	font-feature-settings:"tnum" 1;
}
.meterText:empty:before{content:"0.00";opacity:.28;}
.unit{
	font-size:0.75em;font-weight:600;letter-spacing:0.1em;
	text-transform:uppercase;
	white-space:nowrap;
	color:var(--ink-soft);
}

.stats{margin-top:1.9em;gap:0.7em;position:relative;z-index:1;}
.stat{
	flex:1 1 13em;max-width:17em;
	display:flex;align-items:center;gap:0.85em;
	padding:0.95em 1.1em;
	border-radius:18px;
	text-align:left;
	background:var(--paper-solid);
	border:1px solid var(--edge);
	box-shadow:0 14px 30px -26px rgba(6,58,38,0.65);
	transition:box-shadow .3s ease,transform .3s ease;
}
.stat--active{
	transform:translateY(-2px);
	box-shadow:0 20px 38px -26px rgba(6,58,38,0.85);
}
.stat__icon{
	flex:none;
	width:2.6em;height:2.6em;
	display:flex;align-items:center;justify-content:center;
	border-radius:14px;
	background:rgba(18,164,115,0.12);
	color:var(--brand-deep);
}
.stat__icon svg{width:1.3em;height:1.3em;display:block;}
.stat__body{flex:1 1 auto;min-width:0;}
.stat__name{
	font-size:0.72em;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;
	color:var(--ink-soft);
}
.stat__row{display:flex;align-items:baseline;gap:0.3em;margin-top:0.15em;}
.stat .meterText{font-size:1.9em;color:var(--ink);}
.stat .unit{font-size:0.68em;letter-spacing:0.08em;}
.stat__q{
	margin-left:auto;
	flex:none;
	align-self:center;
	font-size:0.74em;font-weight:700;
	letter-spacing:0.02em;
	padding:0.35em 0.75em;
	border-radius:999px;
	white-space:nowrap;
	background:rgba(18,164,115,0.12);
	color:var(--brand-deep);
	opacity:0;
	transition:opacity .3s ease;
}
.stat__q:not(:empty){opacity:1;}
.stat__q.q2{background:rgba(15,148,160,0.14);color:#0B7F8A;}
.stat__q.q3{background:rgba(200,150,40,0.16);color:#96701A;}
.stat__q.q4{background:rgba(214,90,70,0.14);color:#B4442F;}

.pageNav{margin:1.8em auto 0;}
.pageNav a{
	display:inline-flex;align-items:center;gap:0.5em;
	padding:0.45em 1.1em;
	border-radius:999px;
	background:rgba(255,255,255,0.6);
	border:1px solid var(--edge);
	color:var(--brand-deep);
	font-size:0.85em;font-weight:700;letter-spacing:0.01em;
	text-decoration:none;
	transition:transform .18s ease,box-shadow .25s ease;
}
.pageNav a svg{width:0.95em;height:0.95em;display:block;}
@media (hover:hover){
	.pageNav a:hover{transform:translateY(-2px);box-shadow:0 14px 28px -20px rgba(6,58,38,0.8);}
}
.pageNav a:focus-visible{outline:3px solid var(--brand-deep);outline-offset:3px;}

.footRow{
	display:flex;align-items:center;justify-content:center;
	margin-top:1.2em;padding-top:1.2em;
	border-top:1px solid var(--line);
}

.ipArea{
	display:none;
	align-items:center;gap:0.4em;
	max-width:100%;
	padding:0.28em 0.3em 0.28em 0.5em;
	border-radius:999px;
	background:none;
	border:1px solid var(--chip-edge);
}
.ipArea--visible{
	display:inline-flex;
	animation:ipIn .45s cubic-bezier(.2,.9,.3,1.15);
}
@keyframes ipIn{
	0%{opacity:0;transform:translateY(6px) scale(.96);}
	100%{opacity:1;transform:none;}
}
.ipArea__icon{
	flex:none;display:flex;
	width:1.35em;height:1.35em;
	align-items:center;justify-content:center;
	border-radius:50%;
	background:rgba(18,164,115,0.14);
	color:var(--brand-deep);
}
.ipArea__icon svg{width:0.9em;height:0.9em;display:block;}
.ipArea__label{
	flex:none;
	font-size:0.7em;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
	color:var(--ink-soft);
}
.ipArea__value{
	min-width:0;
	font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
	font-size:0.82em;font-weight:600;
	color:var(--ink);
	overflow-wrap:anywhere;
}
.ipArea__copy{
	flex:none;
	display:flex;align-items:center;justify-content:center;
	width:1.6em;height:1.6em;
	border:0;border-radius:50%;
	background:rgba(18,164,115,0.10);
	color:var(--brand-deep);
	cursor:pointer;
	-webkit-appearance:none;appearance:none;
	transition:background .2s ease;
}
.ipArea__copy svg{width:0.8em;height:0.8em;display:block;}
@media (hover:hover){.ipArea__copy:hover{background:rgba(18,164,115,0.22);}}
.ipArea__copy:focus-visible{outline:3px solid var(--brand-deep);outline-offset:2px;}

.share{display:none;}
.share--ready{display:block;animation:fadeIn .35s;}
.share__btn{
	display:inline-flex;align-items:center;justify-content:center;gap:0.4em;
	min-width:13em;
	padding:0.45em 1em;
	border:0;border-radius:999px;
	font:inherit;font-size:0.8em;font-weight:700;
	color:var(--brand-deep);
	background:none;
	box-shadow:inset 0 0 0 1.5px var(--action-edge);
	cursor:pointer;white-space:nowrap;
	-webkit-appearance:none;appearance:none;
	transition:background .25s ease,box-shadow .25s ease,transform .18s ease;
}
.share__btn svg{width:1em;height:1em;display:block;}
@media (hover:hover){.share__btn:hover{background:var(--action-tint);}}
.share__btn:active{transform:scale(0.97);}
.share__btn:focus-visible{outline:3px solid var(--brand-deep);outline-offset:2px;}
.share__btn.is-copied{background:var(--action-tint);box-shadow:inset 0 0 0 1.5px var(--brand);}
.share__btn .i-ok,.share__btn .t-ok,.ipArea__copy .i-ok{display:none;}
.share__btn.is-copied .i-copy,.share__btn.is-copied .t-copy,.ipArea__copy.is-copied .i-copy{display:none;}
.share__btn.is-copied .i-ok,.share__btn.is-copied .t-ok,.ipArea__copy.is-copied .i-ok{display:block;}
.t-mini{display:none;}

.legal{margin:1.6em 0 0;}
.legal__link{
	display:inline-flex;align-items:center;gap:0.4em;
	font:inherit;font-size:0.78em;
	color:var(--ink-soft);
	text-decoration:underline;text-underline-offset:0.25em;
	text-decoration-color:rgba(90,122,107,0.35);
}
.legal__link svg{width:1.05em;height:1.05em;display:block;text-decoration:none;}
@media (hover:hover){.legal__link:hover{color:var(--brand-deep);}}
.legal__link:focus-visible{outline:3px solid var(--brand-deep);outline-offset:3px;border-radius:4px;}

div.visible{animation:fadeIn .4s;display:block;}
div.hidden{display:none;}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

@media all and (max-width:44em){
	body{font-size:15px;padding-top:1.8em;}
	h1{font-size:1.8em;}
	#test{padding:1.4em 1em;}
	.stage--live{height:10em;}
	.stage canvas{height:11.5em;}
	#test{backdrop-filter:none;-webkit-backdrop-filter:none;}
	.readout{padding:0.6em 0.3em;}
	.readout .meterText{font-size:1.7em;}
	.stat{flex:1 1 100%;}
	.ipArea__label{display:none;}
	.phaseRow{flex-wrap:wrap;row-gap:0.45em;}
	.share__btn{min-width:11em;}
	.t-full{display:none;}
	.t-mini{display:inline;}
}
@media (prefers-reduced-motion:reduce){
	*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}