body { height: auto; min-height: 100vh; overflow: auto; }
.visitor { position: relative; z-index: 5; isolation: isolate; max-width: 620px; margin: 32px 24px 64px; padding: 20px 24px; font: 12px/1.8 var(--font-mono); }
.visitor::before { content: ''; position: absolute; z-index: -1; inset: -6px -14px; border-radius: 36px; background: linear-gradient(90deg, rgba(2,8,4,.82), rgba(2,8,4,.72) 65%, rgba(2,8,4,.25) 92%, transparent); filter: blur(22px); pointer-events: none; }
.visitor h1 { margin: 0 0 18px; color: var(--green-bright); font: 500 14px/1.5 var(--font-display); letter-spacing: .04em; }
#visitor-status { color: #a8c0aa; margin: 0 0 12px; }
.visitor-list { margin: 0; }
.visitor-row { display: grid; grid-template-columns: 146px minmax(0,1fr); gap: 14px; break-inside: avoid; padding: 3px 0; }
.visitor-row dt { color: #a8c0aa; }
.visitor-row dd { margin: 0; color: var(--green-bright); overflow-wrap: anywhere; }
#test-speed { margin-top: 20px; padding: 6px 10px; background: transparent; border: 1px solid #35523b; color: var(--green-bright); font: inherit; cursor: pointer; }
#test-speed:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
#test-speed:disabled { opacity: .65; cursor: wait; }
[hidden] { display: none !important; }
@media (max-width: 800px) { .visitor { margin: 22px 18px 48px; padding: 18px; } }
@media (max-width: 420px) { .visitor { padding: 12px; } .visitor-row { grid-template-columns: 116px minmax(0,1fr); gap: 10px; } }