:root{color-scheme:dark;--bg:#0b0d12;--panel:#171b25;--panel-hi:#242a36;--line:#2b3449;--blue:#087bff;--blue2:#20a9ff;--green:#2ac96b;--text:#f5f7fb;--muted:#919bad;--subtle:#647086;--purple:#bb63ed;--shadow:0 16px 48px #0005}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 50% -12%,#17243a 0,transparent 38%),var(--bg);color:var(--text);font-family:'DM Sans',Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;min-height:100vh}button{font:inherit;color:inherit;cursor:pointer}.app-shell{max-width:1180px;margin:auto;padding:24px 40px 124px}.topbar,.brand,.top-actions,.page-heading,.connection-top,.connection-bottom,.panel-heading,.metric-label,.graph-stats,.setting-row{display:flex;align-items:center;justify-content:space-between}.topbar{height:70px;margin-bottom:46px}.brand{justify-content:flex-start;gap:14px;text-decoration:none;color:var(--text)}.brand-mark{display:grid;place-items:center;width:48px;height:48px;border:3px solid var(--blue);border-right-color:transparent;border-radius:50%;color:var(--blue);font-size:28px}.brand small,.eyebrow{display:block;color:var(--blue);letter-spacing:.16em;font-size:11px;font-weight:800}.brand strong{display:block;font-size:21px;letter-spacing:-.04em}.top-actions{gap:16px}.live-pill,.network-badge{border-radius:999px;padding:10px 16px;background:#0e213b;color:var(--green);font-size:12px;font-weight:800;letter-spacing:.04em}.live-pill i,.status i,.graph-live i{display:inline-block;width:7px;height:7px;background:var(--green);border-radius:50%;margin-right:6px;box-shadow:0 0 12px #2ac96b99}.icon-btn{border:1px solid var(--line);background:var(--panel);color:var(--blue);width:42px;height:42px;border-radius:14px;font-size:24px}.danger{color:#ff514e}.view{display:none;animation:show .24s ease}.view.active{display:block}@keyframes show{from{opacity:.5;transform:translateY(5px)}to{opacity:1;transform:none}}.page-heading{margin-bottom:23px}.page-heading h1{font-size:clamp(28px,4vw,42px);line-height:1.05;margin:5px 0 0;letter-spacing:-.045em}.eyebrow{color:var(--muted);margin:0;font-size:10px}.status{display:flex;align-items:center;color:var(--green);font-weight:700;font-size:14px}.panel{border:1px solid #343b4b;border-radius:24px;background:linear-gradient(145deg,#252a34 0%,#171b25 66%);box-shadow:var(--shadow)}.connection-panel{padding:22px 26px;margin-bottom:17px}.connection-top{margin-bottom:22px}.connection-top .eyebrow,.muted-label{color:var(--muted);font-size:11px;letter-spacing:.055em;font-weight:700}.network-badge{padding:8px 13px;color:#5aa0ff;background:#112749}.connection-bottom{align-items:flex-end}.connection-bottom div{display:grid;gap:5px}.connection-bottom strong{font-size:18px}.ip-block{text-align:right}.ip-block strong{font-size:18px}.gauge-panel{padding:14px 22px 18px;margin-bottom:17px;overflow:hidden}.gauge-wrap{position:relative;width:min(100%,600px);margin:auto}.gauge{display:block;width:100%;height:auto;max-height:255px;overflow:visible}.gauge-track,.gauge-fill{fill:none;stroke-width:16;stroke-linecap:round}.gauge-track{stroke:#1d2534}.gauge-fill{stroke:var(--blue);stroke-dasharray:0 455;transition:stroke-dasharray .35s ease}.needle{stroke:#dceaff;stroke-width:4;stroke-linecap:round;transform-origin:180px 180px;transform:rotate(-90deg);transition:transform .4s ease;filter:drop-shadow(0 0 6px #168aff99)}.needle-dot{fill:var(--blue);stroke:#dceaff;stroke-width:3}.meter-value{position:absolute;left:50%;top:58%;transform:translate(-50%,-10%);display:grid;justify-items:center;line-height:1}.meter-value strong{font-size:clamp(48px,8vw,76px);letter-spacing:-.055em;font-variant-numeric:tabular-nums}.meter-value span{color:var(--purple);font-weight:800;margin-top:8px}.meter-caption{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12px}.meter-unit-toggle,.unit-toggle{display:flex;padding:4px;background:#111722;border-radius:10px}.unit{background:transparent;border:0;color:var(--muted);padding:7px 10px;border-radius:7px;font-size:12px;font-weight:800}.unit.active{background:var(--blue);color:white;box-shadow:0 4px 12px #087bff55}.primary-btn{width:100%;height:58px;margin-bottom:8px;border:none;border-radius:999px;background:linear-gradient(100deg,#16a2ff,var(--blue) 60%,#168cff);box-shadow:0 9px 24px #087bff33;color:white;font-size:15px;font-weight:800;letter-spacing:.045em;transition:filter .2s,transform .2s}.primary-btn:hover{filter:brightness(1.12);transform:translateY(-1px)}.primary-btn:disabled{cursor:progress;opacity:.8}.play-icon{margin-right:10px;font-size:13px}.meter-hint{text-align:center;color:var(--subtle);font-size:11px;margin:0 0 20px}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.metric-card{border:1px solid var(--line);background:#171b25;border-radius:20px;padding:17px 18px;min-width:0}.metric-label{justify-content:flex-start;gap:10px;color:var(--muted);font-weight:800;font-size:11px;letter-spacing:.04em;margin-bottom:12px}.metric-icon{width:31px;height:31px;border-radius:10px;display:grid;place-items:center;font-size:18px;background:#112e3d;color:#33b8ee}.down-icon{background:#133529;color:var(--green)}.up-icon{background:#2e2140;color:var(--purple)}.jitter-icon{background:#393319;color:#f0c22d}.metric-card>strong{display:block;font-size:23px;font-variant-numeric:tabular-nums;white-space:nowrap}.metric-card small{font-size:12px;color:var(--muted);font-weight:600}.graph-panel,.path-panel{padding:19px 22px;margin-bottom:16px}.panel-heading{margin-bottom:13px}.panel-heading h2,.detail-panel h2{margin:0;color:var(--muted);font-size:11px;letter-spacing:.09em}.graph-live{color:var(--green);font-size:11px;font-weight:700}.graph-area{height:112px}.graph-area svg{width:100%;height:100%;overflow:visible}#graph-line{fill:none;stroke:var(--green);stroke-width:3;vector-effect:non-scaling-stroke}#graph-area{fill:url(#graph-fill)}.graph-stats{align-items:flex-start}.graph-stats div{display:grid;gap:4px}.graph-stats span{color:var(--muted);font-size:10px;font-weight:700}.graph-stats strong{font-size:13px}.graph-stats div:first-child strong{color:var(--green)}.path-flow{display:flex;align-items:center;justify-content:space-between;gap:9px}.path-flow span{display:grid;justify-items:center;gap:5px;color:var(--muted);font-size:11px}.path-flow b{font-size:20px;color:var(--blue)}.path-flow>i{height:1px;flex:1;background:repeating-linear-gradient(90deg,#35415a 0 4px,transparent 4px 8px)}.seo-copy{max-width:720px;padding:8px 2px;color:var(--subtle);font-size:12px;line-height:1.6}.seo-copy h2{color:var(--muted);font-size:14px;margin:0 0 4px}.seo-copy p{margin:0}.segmented{display:grid;grid-template-columns:1fr 1fr;background:#10141c;padding:4px;border:1px solid var(--line);border-radius:999px;margin:0 0 16px}.segmented button{border:0;background:transparent;border-radius:999px;padding:12px;color:var(--muted);font-size:13px;font-weight:700}.segmented button.selected{background:linear-gradient(100deg,#1da7ff,var(--blue));color:white}.segmented button:disabled{cursor:default}.history-list{display:grid;gap:12px}.history-card{padding:18px 20px}.history-card-top,.history-values{display:flex;justify-content:space-between;align-items:center;gap:12px}.history-card-top{margin-bottom:16px}.history-network{display:flex;align-items:center;gap:10px;min-width:0}.history-network .network-badge{font-size:10px;padding:6px 10px}.history-network strong{font-size:15px;overflow:hidden;text-overflow:ellipsis}.history-date{color:var(--muted);font-size:11px}.delete-result{background:none;border:0;color:var(--muted);font-size:18px}.history-values{justify-content:flex-start}.history-value{display:grid;gap:4px;min-width:25%}.history-value span{color:var(--muted);font-size:9px;font-weight:700}.history-value strong{font-size:15px}.history-value:first-child strong{color:var(--green)}.empty-state{color:var(--muted);text-align:center;padding:42px 12px}.detail-panel,.setting-panel{padding:22px 24px;margin-bottom:16px}.detail-panel h2{margin-bottom:20px}.detail-panel dl,.setting-panel dl{margin:0;display:grid;gap:15px}.detail-panel dl div,.setting-panel dl div{display:flex;justify-content:space-between;gap:14px}.detail-panel dt,.setting-panel dt{color:var(--muted)}.detail-panel dd,.setting-panel dd{margin:0;text-align:right;font-weight:600;max-width:58%;overflow-wrap:anywhere}.green{color:var(--green)}.privacy-note,.setting-help{color:var(--subtle);font-size:12px;line-height:1.55}.setting-row{gap:12px}.setting-row strong{font-size:14px}.setting-row p{margin:4px 0;color:var(--muted);font-size:12px}.clear-setting{border:0;background:none;color:#ff5b57;padding:0;font-weight:700}.setting-help{margin:7px 0 0}.bottom-nav{position:fixed;z-index:5;left:50%;bottom:18px;transform:translateX(-50%);width:min(calc(100% - 32px),780px);display:grid;grid-template-columns:repeat(5,1fr);padding:9px;border:1px solid #4c4d55;border-radius:999px;background:linear-gradient(145deg,#3b3b40ee,#17181dee);box-shadow:0 12px 44px #0009;backdrop-filter:blur(18px)}.nav-item{border:0;background:transparent;display:grid;justify-items:center;gap:2px;padding:7px 3px;border-radius:999px;color:#aab2c2;font-size:10px;font-weight:700}.nav-item span{font-size:21px;line-height:1.1}.nav-item.active{color:var(--blue);background:#181b24}.toast{position:fixed;left:50%;bottom:100px;z-index:10;transform:translate(-50%,12px);background:#252c38;border:1px solid var(--line);border-radius:12px;padding:11px 16px;color:var(--text);font-size:13px;opacity:0;pointer-events:none;transition:.2s;box-shadow:var(--shadow)}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:900px){.app-shell{padding-top:26px}.topbar{margin-bottom:55px}.view.active#home-view{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;align-items:start}.view.active#home-view>.page-heading,.view.active#home-view>.connection-panel,.view.active#home-view>.primary-btn,.view.active#home-view>.meter-hint,.view.active#home-view>.metric-grid,.view.active#home-view>.graph-panel,.view.active#home-view>.path-panel,.view.active#home-view>.seo-copy{grid-column:1/-1}.view.active#home-view>.gauge-panel{grid-column:1;grid-row:3/5;align-self:stretch;display:flex;flex-direction:column;justify-content:center}.view.active#home-view>.primary-btn{grid-row:5;margin-top:0}.view.active#home-view>.meter-hint{grid-row:6}.view.active#home-view>.metric-grid{grid-row:7}.view.active#home-view>.graph-panel{grid-row:8}.view.active#home-view>.path-panel{grid-row:9}.view.active#home-view>.seo-copy{grid-row:10}.metric-card{padding:20px 24px}.gauge-panel .gauge{max-height:300px}}
@media(max-width:640px){.app-shell{padding:16px 16px 112px}.topbar{height:50px;margin-bottom:30px}.brand-mark{width:39px;height:39px;font-size:22px}.brand{gap:10px}.brand strong{font-size:18px}.brand small{font-size:9px}.live-pill{padding:8px 10px;font-size:9px}.top-actions{gap:8px}.top-actions .icon-btn{display:none}.page-heading{margin-bottom:16px}.page-heading h1{font-size:30px}.connection-panel{padding:17px 18px;border-radius:20px}.connection-bottom strong{font-size:15px}.connection-bottom .muted-label{font-size:9px}.gauge-panel{padding:8px 15px 13px;border-radius:20px}.gauge{max-height:210px}.meter-value strong{font-size:60px}.metric-grid{grid-template-columns:repeat(2,1fr);gap:9px}.metric-card{padding:13px 14px;border-radius:17px}.metric-card>strong{font-size:21px}.graph-panel,.path-panel{padding:16px;border-radius:20px}.graph-area{height:90px}.bottom-nav{bottom:10px;width:calc(100% - 20px);padding:7px}.nav-item{font-size:9px}.nav-item span{font-size:20px}.detail-panel,.setting-panel{padding:19px;border-radius:20px}.history-card{padding:16px}.history-card-top{align-items:flex-start}.history-date{max-width:92px;text-align:right}.history-values{gap:8px}.history-value{min-width:0;flex:1}.history-value strong{font-size:13px}.history-value span{font-size:8px}.path-flow{gap:5px}.path-flow span{font-size:9px}.path-flow b{font-size:18px}.view.active#home-view{display:block}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.ad-slot{position:relative;width:min(100%,970px);min-height:104px;margin:-24px auto 30px;padding:17px 22px 12px;border:1px dashed #3a4962;border-radius:18px;background:linear-gradient(105deg,#111722,#171d29 52%,#111722);display:grid;grid-template-columns:1fr;gap:7px;overflow:hidden}.ad-label{position:absolute;top:7px;left:12px;color:#758198;font-size:8px;letter-spacing:.14em;font-weight:800}.ad-demo{min-height:68px;display:flex;align-items:center;gap:14px;padding:11px 18px;border:1px solid #2a3549;border-radius:12px;background:linear-gradient(100deg,#141c2a,#1c2637 52%,#141c2a)}.ad-demo-mark{width:40px;height:40px;display:grid;place-items:center;flex:none;border-radius:12px;background:#0d2f5a;color:#3995ff;font-size:22px;font-weight:800}.ad-demo-copy{display:grid;gap:3px;min-width:0}.ad-demo-copy strong{font-size:14px}.ad-demo-copy span{color:var(--muted);font-size:11px}.ad-demo-tag{margin-left:auto;padding:6px 9px;border-radius:999px;border:1px solid #345077;color:#7eabeb;font-size:9px;font-weight:800;letter-spacing:.07em;white-space:nowrap}.ad-ready{position:absolute;right:12px;top:7px;color:#63728a;font-size:8px;font-weight:700;letter-spacing:.05em}.ad-ready::before{content:"";display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:#6cc695;vertical-align:1px}@media(max-width:640px){.ad-slot{min-height:96px;margin:-12px auto 23px;padding:18px 10px 9px;border-radius:15px}.ad-demo{min-height:62px;gap:9px;padding:9px 11px}.ad-demo-mark{width:34px;height:34px;font-size:19px}.ad-demo-copy strong{font-size:12px}.ad-demo-copy span{font-size:9px}.ad-demo-tag{font-size:8px;padding:5px 7px}}
@media(min-width:900px){body{padding-inline:182px}.side-ad{position:fixed;z-index:4;top:50%;transform:translateY(-50%);width:160px;height:600px;box-sizing:border-box;padding:29px 12px 13px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;overflow:hidden;border:1px dashed #3a4962;border-radius:18px;background:radial-gradient(ellipse at 50% 43%,#1b2a42 0,transparent 62%),linear-gradient(160deg,#151b26,#0f131b);color:var(--text);text-align:center;box-shadow:0 14px 38px #0005}.side-ad-left{left:max(10px,calc((100vw - 1180px)/2 - 182px))}.side-ad-right{right:max(10px,calc((100vw - 1180px)/2 - 182px))}.side-ad-label{position:absolute;left:8px;top:8px;color:#748198;font-size:7px;font-weight:800;letter-spacing:.11em}.side-ad-brand{display:flex;align-items:center;gap:6px;color:#cbd5e6}.side-ad-brand span{width:23px;height:23px;display:grid;place-items:center;border-radius:7px;background:#103563;color:#52a0ff;font-size:14px;font-weight:800}.side-ad-brand strong{font-size:11px}.side-ad-message{display:grid;gap:11px;margin-top:13px}.side-ad-message b{font-size:21px;line-height:1.18;letter-spacing:-.04em}.side-ad-message span{color:var(--muted);font-size:11px;line-height:1.5}.side-ad-art{width:112px;height:135px;position:relative;display:flex;align-items:flex-end;justify-content:center;gap:8px;padding:16px;border-radius:18px;background:linear-gradient(150deg,#13233a,#0f1724);overflow:hidden}.side-ad-art::before,.side-ad-art::after{content:"";position:absolute;border-radius:50%;filter:blur(1px)}.side-ad-art::before{width:90px;height:90px;top:-34px;right:-23px;background:#087bff55}.side-ad-art::after{width:70px;height:70px;bottom:-29px;left:-20px;background:#2ac96b40}.side-ad-art i{z-index:1;width:14px;height:var(--bar-height,45px);border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,#36a0ff,#1269df)}.side-ad-art i:nth-child(2){--bar-height:76px;background:linear-gradient(180deg,#47d58a,#20a65e)}.side-ad-art i:nth-child(3){--bar-height:59px}.side-ad-art i:nth-child(4){--bar-height:91px;background:linear-gradient(180deg,#8f7bff,#5e53ce)}.side-ad-art-alt{background:linear-gradient(150deg,#2b1e34,#171524)}.side-ad-art-alt::before{background:#9b5cff4d}.side-ad-art-alt i{background:linear-gradient(180deg,#d27cff,#8946cd)}.side-ad-art-alt i:nth-child(2){background:linear-gradient(180deg,#ffa56d,#e56a4b)}.side-ad-art-alt i:nth-child(3){background:linear-gradient(180deg,#5bd2df,#2d9ead)}.side-ad-art-alt i:nth-child(4){background:linear-gradient(180deg,#e2c66a,#b29328)}.side-ad-demo{padding:7px 10px;border:1px solid #355075;border-radius:999px;background:#12243a;color:#8dbbfb;font-size:8px;font-weight:800;letter-spacing:.09em}.side-ad-size{color:#738098;font-size:8px;font-weight:700;letter-spacing:.03em}}
@media(max-width:1199px){.side-ad{display:none}}
:root{--muted:#b8c4d7;--subtle:#8f9eb4;--line:#46556c;--panel:#202a39;--panel-hi:#344157}
body{background:radial-gradient(ellipse at 50% -12%,#263b59 0,transparent 42%),radial-gradient(ellipse at 50% 52%,#111c2b 0,transparent 65%),#0d1119}
.panel{border-color:rgba(187,207,239,.2);background:linear-gradient(145deg,rgba(60,73,93,.9),rgba(33,43,59,.92) 66%);backdrop-filter:blur(24px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 18px 46px rgba(0,0,0,.28)}
.metric-card{border-color:rgba(177,199,235,.19);background:linear-gradient(145deg,rgba(50,63,82,.92),rgba(31,41,56,.94));box-shadow:inset 0 1px 0 rgba(255,255,255,.075),0 10px 24px rgba(0,0,0,.2)}
.detail-panel dt,.setting-panel dt,.connection-panel .muted-label,.connection-top .eyebrow,.panel-heading h2,.metric-label,.graph-stats span{color:#b2bfd2}
@media(min-width:900px){body{--side-ad-width:clamp(100px,11vw,160px);padding-inline:calc(var(--side-ad-width) + 22px)}.side-ad{position:fixed;z-index:4;top:50%;transform:translateY(-50%);display:flex;width:var(--side-ad-width);height:min(600px,calc(100vh - 32px));padding-inline:clamp(8px,.8vw,12px)}.side-ad-left{left:max(10px,calc((100vw - 1180px)/2 - var(--side-ad-width) - 22px))}.side-ad-right{right:max(10px,calc((100vw - 1180px)/2 - var(--side-ad-width) - 22px))}.side-ad-art{width:min(112px,calc(100% - 8px));height:clamp(96px,14vh,135px)}.side-ad-message b{font-size:clamp(15px,1.45vw,21px)}.view.active#home-view{grid-template-columns:1fr 1fr}}
@media(min-width:900px) and (max-width:1199px){.view.active#home-view{display:block}}
@media(max-width:899px){body{padding-inline:0}.side-ad{display:none}}