:root{--paper:#f2f3ff;--ink:#202647;--accent:#4356d8;--muted:#616b88;--line:#d9def3;--white:#fff;--green:#227d65}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}.page{max-width:1240px;margin:auto;padding:0 56px}header{height:124px;display:flex;align-items:center;justify-content:space-between}.wordmark{font-family:"Arial Black","Segoe UI",sans-serif;font-weight:900;letter-spacing:-2.7px;font-size:36px;color:var(--ink);text-decoration:none}.wordmark span{color:var(--accent);margin-left:6px}.tag{font-size:13px;letter-spacing:2px;color:var(--muted)}main{display:grid;grid-template-columns:1.2fr 1fr;column-gap:88px;padding-top:54px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:2.2px;margin:0 0 28px;display:flex;align-items:center;gap:10px}.dot{height:7px;width:7px;background:var(--green);border-radius:50%}h1{font-size:clamp(36px,4.5vw,62px);letter-spacing:-2px;line-height:1.22;margin:0;font-weight:800}.period{color:var(--accent)}.description{font-size:16px;line-height:1.95;color:var(--muted);margin:28px 0 30px}.actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px}button{border:0;border-radius:9px;padding:16px 22px;background:var(--accent);color:var(--white);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;min-width:150px;display:flex;justify-content:space-between;gap:25px;transition:background .15s,transform .15s}button:hover{background:#3043c0;transform:translateY(-1px)}button:disabled{opacity:.7;cursor:wait;transform:none}:focus-visible{outline:3px solid var(--green);outline-offset:5px}#feedback{font-size:12px;color:var(--muted);max-width:240px;line-height:1.6}.connection{background:var(--white);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 16px 55px #20264706;transform:rotate(1deg);align-self:center}.panel-top{padding:22px 26px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.panel-top h2{font-size:14px;font-weight:600;margin:0}.live{font:11px Consolas,monospace;color:var(--green);letter-spacing:1.5px;display:flex;align-items:center;gap:7px}.live:before{content:"";width:5px;height:5px;background:var(--green);border-radius:50%}.route{padding:25px 26px}.route-item{display:flex;align-items:center;gap:15px}.node{height:48px;width:48px;flex-shrink:0;border-radius:13px;display:grid;place-items:center;background:var(--paper);font-size:27px;color:var(--accent);font-family:"Arial Black",sans-serif;font-weight:800}.proxy{background:#e8f3ef;color:var(--green);font-size:23px}.destination{background:var(--accent);color:var(--white);letter-spacing:-2px}.route-item strong{display:block;font-size:15px;margin-bottom:5px}.route-item div>span{color:var(--muted);font-size:12px}.route-item em{font:10px Consolas,monospace;letter-spacing:1px;margin-left:auto;color:var(--muted)}.route-line{height:47px;margin:5px 0 5px 23px;border-left:1px dashed #b8c0df;display:flex;align-items:center;padding-left:39px;font:11px "Segoe UI",sans-serif;color:var(--muted)}.panel-bottom{padding:16px 26px;background:#f9faff;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}.panel-bottom strong{color:var(--ink);font-family:Consolas,monospace}.details{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 1fr 1fr;margin-top:76px;padding:27px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);gap:20px}.details h2{font-size:11px;font-weight:400;color:var(--muted);margin:0 0 11px}.details p{font:13px Consolas,"Microsoft YaHei",monospace;margin:0;overflow-wrap:anywhere}footer{display:flex;justify-content:space-between;gap:20px;padding:26px 0 34px;font-size:11px;color:var(--muted)}
@media(min-width:1400px){main{padding-top:80px}.details{margin-top:100px}}
@media(max-width:900px){.page{padding:0 30px}main{column-gap:35px}h1{font-size:43px}.route{padding:22px 20px}.route-item{gap:11px}.route-item em{display:none}.tag{letter-spacing:0}}
@media(max-width:650px){.page{padding:0 24px}header{height:90px}.wordmark{font-size:31px}.tag{font-size:11px}main{grid-template-columns:1fr;padding-top:30px;gap:40px}h1{font-size:48px}.description{font-size:14px}.connection{transform:none;max-width:480px;width:100%}.details{grid-template-columns:1fr;margin-top:0;padding:24px 0;gap:24px}.details>div{display:flex;justify-content:space-between;gap:20px;align-items:baseline}.details h2{margin:0;flex-shrink:0}.details p{text-align:right;font-size:12px}footer{font-size:10px;line-height:1.7}.route-item em{display:block}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}