@import url("../../network-basics/css/style.css");

.ExperimentControls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 24px 0 34px; }
.VpnChoice { width: 100%; min-width: 0; padding: 11px 13px; border: 1px solid rgba(117,214,210,.4); background: transparent; color: var(--academy-muted); font: inherit; cursor: pointer; }
.VpnChoice:hover,
.VpnChoice:focus-visible,
.VpnChoice.is-selected { border-color: var(--academy-lime); color: var(--academy-lime); }
.VpnChoice:focus-visible { outline: 2px solid var(--academy-coral); outline-offset: 3px; }
.VpnResult { display: grid; gap: 8px; margin-top: 18px; padding: 18px; border-left: 3px solid var(--academy-lime); background: rgba(9,20,22,.45); }
.VpnResult strong { color: var(--academy-paper); font-weight: 400; line-height: 1.5; }
.VpnResult p { margin: 0; color: var(--academy-muted); line-height: 1.6; }
.VpnLabel { color: var(--academy-cyan); font-family: 'Orbitron', sans-serif; font-size: .68rem; letter-spacing: .08em; }

@media (max-width: 560px) {
	.ExperimentControls { grid-template-columns: 1fr; }
}