:root{color-scheme:light;--blue:#2a42ee;--ink:#202026;--muted:#72727c;--line:#dfdff0;--faint:#f3f4ff;--logo-size:min(clamp(76px,24vw,240px),24svh);font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;background:#f4f4f4;color:var(--ink);min-height:100svh;display:grid;place-items:center;padding:64px 24px calc(var(--logo-size)*.9 + 32px);-webkit-font-smoothing:antialiased}
main{width:min(100%,560px);text-align:center}
.logo{position:fixed;inset:auto 0 0;display:flex;justify-content:center;align-items:flex-start;height:calc(var(--logo-size)*.9);overflow:hidden;pointer-events:none}
h1{flex:none;display:inline-flex;align-items:baseline;gap:.025em;font-size:var(--logo-size);font-weight:800;font-style:italic;line-height:1;margin:0;color:var(--blue);letter-spacing:-.083em;white-space:nowrap}
.logo-suffix{align-self:flex-start;margin-top:.6em;font-size:.3em;font-weight:400;letter-spacing:-.055em;color:#a9aaae}
.terminal-line,.bottom-line{display:flex;justify-content:space-between;gap:12px;font-size:11px;text-align:left}
.terminal-line{border-top:1px dashed var(--blue);padding-top:17px;color:#a9aaae}
.connection{display:flex;align-items:center;gap:7px;color:var(--muted)}
.connection i{display:block;width:5px;height:5px;background:var(--blue)}
.connection i[data-state="error"]{background:var(--muted)}
.reading{display:flex;align-items:baseline;justify-content:center;gap:13px;margin:41px 0 5px;min-height:105px;font-variant-numeric:tabular-nums}
#latency{font-size:96px;font-weight:400;letter-spacing:-8px;line-height:1.1}
.unit{color:var(--muted);font-size:22px;letter-spacing:-1px}
.history{margin-top:50px}
#history{list-style:none;display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:4px;padding:0;margin:0}
.sample{min-width:0;font-size:9px;display:flex;flex-direction:column;align-items:center;font-variant-numeric:tabular-nums}
.plot{width:100%;height:72px;display:flex;align-items:flex-end;justify-content:center;background:repeating-linear-gradient(to top,transparent 0,transparent 23px,var(--faint) 23px,var(--faint) 24px);border-bottom:1px solid var(--line)}
.bar{width:12px;max-width:70%;background:repeating-linear-gradient(to top,var(--bar-color,var(--blue)) 0,var(--bar-color,var(--blue)) 3px,transparent 3px,transparent 5px);height:0}
.slow .bar{--bar-color:#605eed}
.sample-value{margin-top:12px;color:var(--blue);height:14px}
.empty .sample-value{color:#aaaab5}
.failed .bar{width:5px;height:2px!important;background:var(--muted)}
.failed .sample-value{color:var(--muted)}
.bottom-line{justify-content:flex-end;border-bottom:1px dashed var(--blue);padding:27px 0 16px;margin-top:0;font-size:10px;color:var(--muted)}
#activity{color:var(--blue);white-space:pre}
noscript{display:block;margin-top:20px;font-size:12px}
@media(max-width:480px){body{padding-top:40px}.reading{margin-top:35px}#latency{font-size:82px;letter-spacing:-6px}.history{margin-top:39px}#history{grid-template-columns:repeat(10,minmax(0,1fr));gap:4px}.sample:nth-child(-n+10){display:none}.terminal-line{font-size:10px}.sample{font-size:10px}}
@media(max-height:730px) and (min-width:481px){body{padding-top:30px}.history{margin-top:35px}}
@media(max-height:500px){body{padding-top:24px}.reading{margin-top:20px;min-height:80px}#latency{font-size:72px}.history{margin-top:20px}.plot{height:48px}.bottom-line{padding:16px 0 10px}}
@media(max-height:360px){body{padding-top:16px}.reading{margin-top:16px;min-height:64px}#latency{font-size:56px}.history{margin-top:16px}.plot{height:32px}.bottom-line{padding:12px 0 8px}}