:root{color-scheme:dark;--bg:#090e19;--panel:#101827;--panel2:#121c2c;--line:rgba(183,202,238,.12);--text:#eff5ff;--muted:#8190aa;--accent:#b6f55c;--purple:#a88cff;--cyan:#66dce8;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;background:var(--bg);color:var(--text);overflow-x:hidden}button{font:inherit}a{color:inherit;text-decoration:none}.ambient{position:absolute;pointer-events:none;filter:blur(95px);opacity:.14;z-index:0}.ambient-one{width:500px;height:500px;right:-150px;top:200px;background:#476df7}.ambient-two{width:460px;height:460px;left:-200px;top:650px;background:#a2e855}.shell{position:relative;z-index:1;max-width:1232px;padding:0 36px;margin:auto}.topbar{height:94px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:inline-flex;align-items:center;gap:14px;font-size:17px;font-weight:900;letter-spacing:.095em}.brand-light{font-weight:400;color:#9ca9be;margin-left:5px}.brand-mark{width:28px;height:29px;display:flex;align-items:flex-end;gap:4px}.brand-mark span{width:6px;background:var(--accent);border-radius:5px 5px 2px 2px;transform:skew(-16deg)}.brand-mark span:nth-child(1){height:11px;opacity:.5}.brand-mark span:nth-child(2){height:20px;opacity:.76}.brand-mark span:nth-child(3){height:28px}.topbar-right{display:flex;align-items:center;gap:10px;color:#b8c7d7;font-size:12px;font-weight:600}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}.topbar-divider{height:16px;width:1px;background:var(--line);margin:0 12px}.topbar-label{color:#78869f;font-size:10px;letter-spacing:.16em}.hero{padding:70px 0 54px;max-width:790px}.eyebrow{display:flex;align-items:center;gap:11px;color:var(--accent);font-size:11px;font-weight:800;letter-spacing:.18em}.eyebrow-line{width:22px;height:1px;background:var(--accent)}.hero h1{font-size:clamp(46px,6.4vw,86px);letter-spacing:-.065em;line-height:1.07;margin:24px 0 23px;font-weight:750}.hero h1 span{color:var(--accent)}.hero-copy{max-width:560px;line-height:1.65;font-size:15px;color:#99a7bc;margin:0}.dashboard{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(260px,1fr);gap:16px}.primary-panel,.metric-card,.detail,.history{background:linear-gradient(155deg,rgba(24,35,53,.92),rgba(12,20,33,.95));border:1px solid var(--line);border-radius:18px}.primary-panel{min-height:544px;padding:30px;position:relative;overflow:hidden}.primary-panel:after{content:"";position:absolute;width:250px;height:250px;background:#b6f55c;opacity:.045;filter:blur(50px);top:60px;left:50%;transform:translateX(-50%);pointer-events:none}.panel-topline{display:flex;justify-content:space-between;align-items:center}.panel-label,.metric-label,.detail>span{color:#94a4bd;font-size:10px;font-weight:800;letter-spacing:.16em}.state-pill{border:1px solid rgba(182,245,92,.27);color:var(--accent);background:rgba(182,245,92,.07);padding:8px 11px;border-radius:100px;font-size:9px;font-weight:850;letter-spacing:.12em}.meter-wrap{display:flex;align-items:center;justify-content:center;min-height:354px}.meter{width:min(330px,100%);aspect-ratio:1;border-radius:50%;background:conic-gradient(from 210deg,var(--accent) var(--fill),rgba(177,196,226,.1) 0 78%,transparent 0);padding:15px;transform:rotate(0deg);position:relative;box-shadow:0 0 70px rgba(182,245,92,.05)}.meter:before{content:"";position:absolute;inset:4px;border:1px solid rgba(182,245,92,.08);border-radius:50%}.meter-inner{height:100%;width:100%;border-radius:50%;background:radial-gradient(circle at 50% 30%,#17243a,#0e1727 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;text-align:center}.meter-label{color:#8495ae;font-size:10px;font-weight:800;letter-spacing:.15em}.meter-value{display:flex;align-items:baseline;justify-content:center;gap:8px;margin:12px 0 6px;font-variant-numeric:tabular-nums}.meter-value>span:first-child{font-weight:700;font-size:clamp(56px,6vw,79px);letter-spacing:-.075em}.meter-unit{color:var(--accent);font-size:15px;font-weight:750}.meter-subtitle{color:#7890aa;font-size:12px}.test-progress{height:3px;border-radius:2px;background:rgba(179,199,231,.12);overflow:hidden}.test-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--cyan),var(--accent));transition:width .3s}.primary-action{display:flex;justify-content:center;margin:24px 0 0}.start-button{min-width:220px;display:flex;justify-content:space-between;align-items:center;gap:28px;padding:15px 18px 15px 23px;border-radius:10px;border:0;cursor:pointer;background:var(--accent);color:#18210e;font-weight:800;font-size:13px;transition:transform .2s,box-shadow .2s}.start-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 38px rgba(182,245,92,.18)}.start-button:disabled{opacity:.62;cursor:wait}.button-arrow{font-size:20px;font-weight:400}.message{text-align:center;color:#8190aa;font-size:11px;line-height:1.5;margin:14px 0 0;min-height:17px}.side-stack{display:grid;grid-template-rows:repeat(3,1fr);gap:16px}.metric-card{padding:24px;position:relative;overflow:hidden}.metric-icon{width:29px;height:29px;display:grid;place-items:center;border:1px solid rgba(169,188,220,.18);border-radius:8px;color:var(--purple);font-size:19px;position:absolute;right:23px;top:21px}.latency-card .metric-icon{color:var(--cyan)}.jitter-card .metric-icon{color:var(--accent)}.metric-value{margin:22px 0 3px;display:flex;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums}.metric-value>span{font-size:42px;font-weight:720;letter-spacing:-.065em}.metric-value small{font-size:12px;color:#91a1b8;font-weight:650}.metric-card p{font-size:11px;color:#8190aa;margin:0}.metric-line{height:2px;width:35px;position:absolute;bottom:0;left:24px}.metric-line.purple{background:var(--purple)}.metric-line.cyan{background:var(--cyan)}.metric-line.green{background:var(--accent)}.details,.history-section{margin-top:76px}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:19px}.eyebrow.muted{color:#74849e}.section-heading h2{font-size:27px;letter-spacing:-.035em;margin:10px 0 0}.section-index{color:#61728d;font-size:11px;font-weight:700;letter-spacing:.13em}.details-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.detail{padding:24px;min-height:119px;display:flex;flex-direction:column;align-items:flex-start}.detail strong{font-size:16px;margin:13px 0 5px;overflow-wrap:anywhere}.detail small{color:#7a8aa4;font-size:11px}.history{min-height:92px;padding:19px 24px}.empty-history{color:#7e8da6;font-size:12px;margin:17px 0}.history-row{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:10px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line);font-size:13px}.history-row:last-child{border:0}.history-row time{color:#a5b4ca}.history-row strong{font-size:16px}.history-row span{color:#7f90aa;font-size:11px;margin-left:4px}footer{display:flex;justify-content:space-between;gap:30px;padding:58px 0 27px;color:#65758e;font-size:10px;letter-spacing:.04em;line-height:1.5}footer span:first-child{font-weight:800;letter-spacing:.15em;white-space:nowrap}@media(max-width:850px){.dashboard{grid-template-columns:1fr}.side-stack{grid-template-columns:repeat(3,1fr);grid-template-rows:auto}.metric-card{min-height:180px}.metric-value>span{font-size:35px}.details-grid{grid-template-columns:1fr 1fr}.topbar-label,.topbar-divider{display:none}}@media(max-width:600px){.shell{padding:0 18px}.topbar{height:75px}.brand{font-size:13px}.topbar-right{font-size:10px}.hero{padding:51px 0 38px}.hero h1{font-size:49px}.hero-copy{font-size:13px}.primary-panel{padding:19px;min-height:490px}.meter-wrap{min-height:318px}.meter{width:min(292px,100%)}.side-stack{grid-template-columns:1fr;gap:10px}.metric-card{min-height:142px;padding:20px}.metric-value{margin-top:15px}.details,.history-section{margin-top:58px}.details-grid{grid-template-columns:1fr;gap:10px}.detail{min-height:95px;padding:18px}.history-row{grid-template-columns:1fr 1fr;row-gap:5px}.history-row>div:nth-child(3),.history-row>div:nth-child(4){margin-top:5px}.section-heading h2{font-size:23px}footer{flex-direction:column;gap:8px;padding-top:48px}}
