:root{--bg:#101214;--panel:#161a1d;--text:#f5f6f7;--muted:#8d969e;--line:#30363c;--accent:#defa65;--upload:#defa65;color-scheme:dark;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);line-height:1.5}button,input,select{font:inherit}button,select{cursor:pointer}button:disabled{cursor:default;opacity:.55}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:4px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.muted{color:var(--muted)}
body[data-mode=single]{--accent:#ffad5c;--upload:#ffad5c}body[data-mode=multi]{--accent:#defa65;--upload:#defa65}
.wrap{max-width:1000px;margin:auto;padding:0 32px 32px}.top{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:96px;border-bottom:1px solid var(--line);margin-bottom:24px}.brand{display:inline-flex;align-items:center;gap:12px;font-size:27px;font-weight:750;letter-spacing:-.9px;white-space:nowrap}.brand-mark{width:36px;height:24px;fill:var(--accent);stroke:var(--accent);stroke-width:1.7}.brand .brand-name{color:var(--text);margin:0}.brand .brand-suffix{color:var(--accent);margin:0}.top-note{font-size:14px;color:var(--muted)}
.settings{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}.node-control{position:relative;display:flex;align-items:center;border:1px solid var(--line);border-radius:14px;background:var(--panel)}.node-control svg{width:23px;height:23px;position:absolute;left:20px;stroke:var(--text);fill:none;stroke-width:1.6;pointer-events:none}.node-control select{appearance:none;-webkit-appearance:none;width:100%;height:56px;padding:0 48px 0 58px;border:0;border-radius:14px;background:transparent;color:var(--text);font-size:16px;min-width:0}.node-control option{background:var(--panel)}
.mode{display:flex;border:1px solid var(--line);border-radius:14px;padding:4px;background:var(--panel);margin:0;min-width:0}.mode label{flex:1;text-align:center;position:relative}.mode input{position:absolute;pointer-events:none;opacity:0;inset:0;width:100%;height:100%;margin:0}.mode span{display:block;padding:9px 12px;border:1px solid transparent;border-radius:10px;font-size:14px;color:var(--muted)}.mode span:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#ffad5c;margin-right:8px}.mode label:last-child span:before{background:#defa65}.mode input:checked+span{color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent);border-color:var(--accent);font-weight:600}.mode input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.track{padding:28px 30px 24px;background:linear-gradient(130deg,#181e20,#111517);border:1px solid var(--line);border-radius:18px;margin-bottom:18px}.speed-heading{display:flex;gap:10px;align-items:center;font-size:14px;color:#c4ccd1}.speed-heading i{width:8px;height:8px;border-radius:50%;background:var(--accent)}.speed-number{display:flex;align-items:baseline;gap:12px;margin-top:9px;min-width:0}.speed-number #speed{font-size:clamp(64px,8vw,100px);letter-spacing:-4px;line-height:1.12;font-weight:750;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;min-width:0}.speed-unit{color:var(--muted);font-size:23px}.speed-readout #phase{font-size:13px;color:var(--muted);margin:7px 0 25px;min-height:20px}.chart-panel{padding:0;margin:0}.chart-head,.chart-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted)}.chart-head{margin-bottom:8px}.chart-head>span:first-child{font-size:13px;color:#c3cbd1}.chart-head #chart-mode{color:var(--accent)}#chart{display:block;width:100%;height:210px}.chart-foot{font-size:11px;margin:8px 0 20px}.start{display:block;width:100%;padding:12px 20px;min-height:48px;border:0;border-radius:12px;color:#171b10;background:var(--accent);font-size:16px;font-weight:650}.start.running:before{content:"";display:inline-block;width:11px;height:11px;background:currentColor;border-radius:2px;margin-right:10px}.start:hover:not(:disabled){filter:brightness(1.06)}
.connection-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--line);border-radius:14px;padding:16px 22px;background:var(--panel);gap:20px}.station{display:flex;align-items:center;gap:12px;min-width:0}.station>div{min-width:0}.station svg{width:28px;height:28px;stroke:#8b9aa4;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.station span{display:block;font-size:12px;color:#a3aeb5}.station small{display:block;font-size:13px;color:#d1d8dd;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.6}.station #client-ip,.station #destination-name{font-size:11px;color:#85939d}
.test-feedback{display:flex;align-items:baseline;gap:10px;margin:12px 2px 18px;font-size:12px;line-height:1.6}.badge{color:var(--accent);flex-shrink:0}.message{margin:0;color:var(--muted)}.message.error{color:#ffa7a7}.track[data-stage=error] #phase{color:#ffa7a7}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px}h2{font-size:18px;margin:0 0 6px}.offer{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.offer-intro{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.server-icon{display:none}.offer-label{font-size:11px;color:var(--muted);margin:0 0 4px}.offer h2{font-size:17px;margin:0;overflow-wrap:anywhere}#offer-region{font-size:12px;color:var(--muted);margin:3px 0 0}#offer-region:empty{display:none}.offer dl{display:flex;gap:24px;margin:0;flex:1;min-width:0}.offer dl:empty{display:none}.offer dl>div{min-width:0}.offer dt{font-size:11px;color:var(--muted)}.offer dd{margin:3px 0 0;font-size:13px;overflow-wrap:anywhere}.offer-action:has(.buy[hidden]){display:none}.buy{display:inline-block;padding:10px 18px;border:1px solid #879399;border-radius:10px;font-size:13px;white-space:nowrap}.buy:after{content:" ↗"}.buy:hover{border-color:var(--accent);color:var(--accent)}.offer-note{flex-basis:100%;border-top:1px solid var(--line);padding-top:12px;margin:0;color:var(--muted);font-size:12px}
.admin-wrap{max-width:1120px;margin:auto;padding:0 24px}.admin-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:24px}.admin-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.admin h1{font-size:26px;margin:0 0 22px}.admin .panel{padding:26px}.admin form label{display:block;font-size:14px;color:var(--muted);margin-bottom:15px}.admin input:not([type=radio]):not([type=checkbox]){display:block;width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;color:var(--text);padding:11px 12px;margin-top:6px;min-width:0}.admin .check{display:flex;gap:8px;align-items:center}.admin .panel>form{max-width:580px}.node-admin{border-top:1px solid var(--line);padding:18px 0}.node-admin p{font-size:14px;color:var(--muted);margin:5px 0 10px}.node-admin form{display:inline;margin-left:15px}.node-admin .danger{color:#ffaca7;padding:5px 12px}.alert{color:#ffaca7;padding:14px;border:1px solid #714341;border-radius:10px}.primary{display:inline-block;border:0;border-radius:10px;padding:12px 20px;background:var(--accent);color:#172008;font-weight:700;text-align:center}

@media(min-width:850px){.settings{flex-direction:row}.node-control{flex:1}.mode{width:300px;align-items:center}.track{padding:32px 40px 25px}#chart{height:230px}}
@media(max-width:700px){.wrap{padding:0 16px 24px}.top{min-height:78px;margin-bottom:18px;gap:8px}.brand{font-size:20px;gap:8px;letter-spacing:-.5px}.brand-mark{width:28px}.top-note{font-size:11px}.settings{gap:10px;margin-bottom:14px}.node-control select{font-size:14px;height:49px;padding-left:46px}.node-control svg{left:15px;width:20px}.mode span{padding:8px 10px;font-size:13px}.track{padding:20px 16px 17px;border-radius:15px;margin-bottom:14px}.speed-heading{font-size:13px}.speed-number{gap:9px}.speed-number #speed{font-size:64px;letter-spacing:-2.5px}.speed-unit{font-size:19px}.speed-readout #phase{font-size:12px;margin-bottom:22px}#chart{height:175px}.chart-foot{margin-bottom:15px;font-size:10px}.start{font-size:15px;min-height:45px}.connection-details{padding:14px 12px;gap:14px}.station{gap:8px}.station svg{width:24px;height:24px}.station span{font-size:11px}.station small{font-size:12px}.station #client-ip,.station #destination-name{font-size:10px}.test-feedback{font-size:11px;margin-bottom:14px;gap:8px}.offer{padding:16px;gap:13px}.offer h2{font-size:15px}.offer dl{flex-basis:100%;order:3;border-top:1px solid var(--line);padding-top:12px;gap:20px}.offer dl>div{flex:1}.offer-action{flex-shrink:0}.buy{padding:9px 12px;font-size:12px}.offer-note{order:4}.admin-grid{grid-template-columns:1fr}.admin-wrap{padding:0 18px}.admin .brand{font-size:20px}}
@media(max-width:360px){.wrap{padding-inline:12px}.brand{font-size:18px}.top-note{font-size:10px}.speed-number #speed{font-size:54px}.station{gap:6px}.station svg{width:20px}.connection-details{gap:10px;padding-inline:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}


/* Minimal testing stage: one result strip and one node card. */
.wrap{max-width:900px}.top{min-height:84px;margin-bottom:10px}.settings{flex-direction:column;gap:14px;margin-bottom:0}.node-control{border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}.node-control select{height:56px;border-radius:0;padding-left:46px}.node-control svg{left:10px}.node-control:after{content:"";position:absolute;right:12px;top:50%;width:8px;height:8px;border-right:1.5px solid #9aa6ae;border-bottom:1.5px solid #9aa6ae;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.mode{border:0;background:transparent;border-radius:0;padding:0;width:fit-content;margin:0 auto;gap:12px;align-items:center}.mode label{min-width:110px}.mode span{padding:9px 16px;font-size:14px}.mode input:checked+span{background:color-mix(in srgb,var(--accent) 9%,transparent);border-color:color-mix(in srgb,var(--accent) 15%,transparent)}
.track{padding:0;border:0;border-radius:0;background:transparent;margin:22px 0 0}.readout-top{display:flex;justify-content:center}.test-steps{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);list-style:none;margin:0;padding:0}.speed-heading{justify-content:center;font-size:14px;color:#abb5bd}.speed-heading i{display:none}.speed-number{flex-direction:column;align-items:center;gap:0;margin:10px 0 0;text-align:center}.speed-number #speed{font-size:94px;letter-spacing:-4px;max-width:100%;line-height:1.08}.speed-unit{font-size:21px;line-height:1.4;color:#a8b1b9}.speed-readout #phase{text-align:center;font-size:12px;margin:12px 0 0;min-height:20px}.start{width:64%;min-width:200px;max-width:340px;min-height:46px;margin:20px auto 26px;border-radius:9px;font-size:15px}
.chart-panel{padding:0;margin:0 0 17px}.chart-head{margin-bottom:10px}.chart-head>span:first-child{font-size:13px;font-weight:550}.chart-head #usage{font-size:11px;color:var(--muted)}#chart{height:155px}.chart-body{position:relative}
.connection-details{display:flex;align-items:center;justify-content:space-between;gap:14px;background:transparent;border:0;border-radius:0;padding:14px 3px}.station{gap:9px;min-width:0}.station>div{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.station span{font-size:12px;color:#b0bbc3}.station small{font-size:12px;color:#b0bbc3;max-width:250px}.station small:before{content:"· ";color:#71808a}.station svg{width:22px;height:22px}.connection-details #client-ip{font-size:11px;color:#82909a;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;text-align:right}
.test-feedback{margin:0 3px 12px;font-size:11px}.test-feedback .message{line-height:1.6}.test-feedback:has(.message:not(.error)){color:var(--muted)}.offer{padding:18px 20px;gap:9px 16px;border-radius:12px;background:#161b1e;display:grid;grid-template-columns:minmax(0,1fr) auto}.offer-intro{grid-column:1;min-width:0}.offer-label{font-size:11px}.offer h2{font-size:17px}.offer-action{grid-column:2;grid-row:1 / 3;align-self:center}.offer dl{grid-column:1;order:0;display:flex;gap:12px;border:0;padding:0;flex-wrap:wrap}.offer dl>div{flex:none;max-width:100%}.offer dt{display:none}.offer dd{font-size:12px;color:#909fa9;margin:0}.offer-note{grid-column:1 / -1;order:0}.buy{font-size:12px;padding:9px 14px;border-color:#61717d}.offer #offer-region{margin:3px 0 0;font-size:12px;color:#929faa}
@media(max-width:700px){.wrap{padding-inline:16px}.top{min-height:67px;border-bottom:1px solid #262e34;margin-bottom:0}.brand{font-size:20px}.top-note{font-size:11px}.settings{gap:12px;margin-bottom:0}.node-control select{height:52px;font-size:14px;padding-left:36px}.node-control svg{left:3px;width:20px}.mode{width:fit-content;height:auto;padding:0;gap:10px}.mode label{min-width:108px}.mode span{padding:8px 13px;font-size:13px;border-radius:10px}.track{margin:18px 0 0}.speed-heading{font-size:13px}.speed-number{margin-top:10px}.speed-number #speed{font-size:72px;letter-spacing:-3px}.speed-unit{font-size:19px}.speed-readout #phase{font-size:11px;margin-top:11px}.start{width:64%;min-width:195px;min-height:44px;padding:10px 16px;font-size:14px;margin:17px auto 23px}.chart-panel{margin-bottom:13px}#chart{height:125px}.chart-head{margin-bottom:4px}.chart-head>span:first-child{font-size:12px}.chart-head #usage{font-size:10px}.connection-details{padding:12px 2px;gap:10px}.station svg{width:20px;height:20px}.station span,.station small{font-size:11px}.station small{max-width:160px}.connection-details #client-ip{font-size:10px;max-width:105px}.test-feedback{font-size:10px;margin-bottom:11px}.offer{padding:14px 15px;gap:7px 12px}.offer h2{font-size:15px}.offer-label{font-size:10px}.offer #offer-region{font-size:11px}.offer dl{gap:8px}.offer dd{font-size:11px}.buy{padding:8px 11px;font-size:11px}}
@media(max-width:360px){.wrap{padding-inline:12px}.brand{font-size:18px}.top-note{font-size:10px}.speed-number #speed{font-size:62px}.station{gap:6px}.station small{max-width:110px}.offer h2{font-size:14px}.offer{padding:12px}.buy{padding:8px 9px}}

/* Completion is a result summary, with both measured directions labelled. */
.result-summary{text-align:center;margin:6px 0 0}.result-heading{display:flex;align-items:center;justify-content:center;gap:8px}.result-heading h2{font-size:15px;font-weight:550;margin:0;color:#c2cbd1}.result-check{color:var(--accent);font-size:15px}.result-mode{font-size:11px;color:#748590;margin:5px 0 22px}.result-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:590px;margin:auto;gap:24px}.result-pair>div{min-width:0;display:flex;flex-direction:column;align-items:center}.result-pair>div+div{border-left:1px solid #283238;padding-left:24px}.result-label{font-size:13px;color:#97a7b2;margin-bottom:8px}.result-pair strong{font-size:54px;line-height:1.2;letter-spacing:-1.6px;font-variant-numeric:tabular-nums;font-weight:650;max-width:100%;overflow-wrap:anywhere}.result-pair small{font-size:12px;color:#8798a4;margin-top:5px}
.track[data-stage=complete] .restart-controls{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px;margin:22px 0 25px}.track[data-stage=complete] .start{width:auto;min-width:0;max-width:none;margin:0;border:1px solid #3c4b55;background:transparent;color:#c7d1d8;padding:9px 20px;min-height:37px;font-size:12px;font-weight:500}.track[data-stage=complete] .start:disabled{opacity:.7}.track[data-stage=complete] #cooldown-note{font-size:11px;color:#82929d;font-variant-numeric:tabular-nums}
.chart-switch{display:flex;gap:5px;margin:0 0 7px}.chart-switch button{padding:4px 13px;border:1px solid transparent;border-radius:6px;background:transparent;color:#7e919e;font-size:11px}.chart-switch button[aria-pressed=true]{color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);border-color:color-mix(in srgb,var(--accent) 20%,transparent)}
@media(max-width:700px){.result-mode{font-size:10px;margin-bottom:18px}.result-heading h2{font-size:13px}.result-pair{gap:14px}.result-pair>div+div{padding-left:14px}.result-pair strong{font-size:38px;letter-spacing:-1px}.result-label{font-size:12px;margin-bottom:6px}.result-pair small{font-size:11px}.track[data-stage=complete] .restart-controls{margin:18px 0 21px;gap:10px}.track[data-stage=complete] .start{font-size:11px;padding:8px 17px}.track[data-stage=complete] #cooldown-note{font-size:10px}}
@media(max-width:360px){.result-pair strong{font-size:33px}.result-pair{gap:10px}.result-pair>div+div{padding-left:10px}}
/* Contain margins so animated and natural heights use the same geometry. */
.test-content{display:flow-root}

/* The chart stays in place; connection quality belongs to the final result. */
.result-quality{display:flex;align-items:baseline;justify-content:center;gap:28px;margin:19px auto 0;padding-top:13px;border-top:1px solid #263139;max-width:590px;color:#81939f;font-size:12px}.result-quality>span{display:flex;align-items:baseline;gap:6px}.result-quality strong{color:#c2cdd5;font-size:17px;font-weight:500;font-variant-numeric:tabular-nums}.result-quality small{font-size:10px;color:#728793}.chart-panel{margin-bottom:9px}.connection-details{border-top:1px solid #263139}
@media(max-width:700px){.result-quality{font-size:11px;gap:25px;margin-top:16px;padding-top:12px}.result-quality strong{font-size:16px}.result-quality>span{gap:5px}}
@media(max-width:360px){.result-quality{gap:18px}.result-quality strong{font-size:15px}}