:root { color-scheme: light dark; font: 16px/1.6 system-ui, sans-serif; background: #111820; color: #e7eef5; }
body { margin: 0; }
main { max-width: 850px; margin: 0 auto; padding: 64px 24px; }
h1 { font-size: clamp(2.1rem, 5vw, 3.1rem); line-height: 1.15; letter-spacing: -.04em; margin: 12px 0 24px; }
h2 { font-size: 1.15rem; margin: 0; }
.eyebrow { font-size: .75rem; letter-spacing: .13em; color: #80d2bd; }
.intro { font-size: 1.1rem; max-width: 720px; }
.note { font-size: .88rem; color: #a6b6c5; }
section { margin: 30px 0 20px; border-left: 3px solid #80d2bd; padding: 4px 20px; }
section p { margin: 6px 0; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0; }
button { border: 1px solid #527a73; background: #203b37; color: #e7eef5; border-radius: 7px; padding: 12px 18px; font: inherit; cursor: pointer; }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible, summary:focus-visible { outline: 3px solid #e9c174; outline-offset: 4px; }
table { width: 100%; border-collapse: collapse; margin: 28px 0; text-align: left; }
caption { text-align: left; font-size: 1.1rem; font-weight: 650; padding-bottom: 12px; }
td, th { padding: 10px 8px; border-bottom: 1px solid #30404e; }
th { color: #a6b6c5; font-size: .85rem; }
td[data-status="ok"] { color: #80d2bd; }
td[data-status="error"], td[data-status="timeout"] { color: #f0bc84; }
details { border: 1px solid #30404e; padding: 14px; border-radius: 7px; }
summary { cursor: pointer; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .8rem; max-height: 420px; overflow: auto; }
.measurement-frame { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; border: 0; transform: translateX(-200vw); pointer-events: none; }