/* Compact location tabs use the Time Tape tokens in light and dark themes. */
.ping-test{scroll-margin-top:6rem;padding-block:clamp(2rem,4vw,3rem)}
.ping-test__anchor{position:absolute;top:0;left:0;width:0;height:0;scroll-margin-top:6rem}
.ping-test__card{max-width:100%;overflow:hidden;border:1px solid var(--rule);border-top:4px solid var(--tape);border-radius:6px;background:var(--surface)}
.ping-test__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem 1.5rem;border-bottom:1px solid var(--rule)}
.ping-test__head h2{font-size:clamp(1.25rem,2vw,1.75rem);line-height:1.2}
.ping-test__head p{margin-top:.375rem;color:var(--muted);font-size:.875rem}
.ping-test__tabs{display:flex;gap:.25rem;max-width:100%;padding:.25rem;border:1px solid var(--rule);border-radius:6px;background:var(--surface-2)}
.ping-test__tab{appearance:none;min-height:44px;padding:.5rem .875rem;border:0;border-radius:var(--r);background:transparent;color:var(--muted);font:600 .8125rem/1.4 var(--mono);cursor:pointer}
.ping-test__tab[aria-selected=true]{background:var(--tape);color:var(--on-tape)}
.ping-test__tab:hover{color:var(--ink)}
.ping-test__tab[aria-selected=true]:hover{color:var(--on-tape)}
.ping-test__tab:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ping-test__panel{max-width:100%;background:#fff}
.ping-test__panel[hidden]{display:none}
.ping-test__panel:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.ping-test__frame{display:block;width:100%;max-width:100%;height:420px;border:0;background:#fff;color-scheme:light}
@media(max-width:719px){.ping-test__head{padding:1rem}.ping-test__tabs{width:100%}.ping-test__tab{flex:1}}
@media print{.ping-test__tabs,.ping-test__panel{display:none}}