@import url('/style.css');
/* VPN uses its proven responsive layout, with a new neutral presentation. */
:root{color-scheme:light;font-family:Arial,Helvetica,sans-serif;background:#fff;color:#171717}
body{background:#fff;color:#171717;font-family:Arial,Helvetica,sans-serif;line-height:1.5}
aside{background:#fafafa;color:#171717;border-right:1px solid #e5e5e5}
.brand{color:#171717;font-weight:500;font-size:20px}.logo{background:#171717;color:#fff;border-radius:50%;width:30px;height:30px;font-size:15px}.brand-sub{display:none}
nav a{color:#666;border-radius:999px}nav a:first-child,nav a:hover{background:#eee;color:#171717}
.avatar{background:#eaeaea;color:#171717}.aside-bottom small{color:#666}
header{border-color:#e5e5e5}.eyebrow,.domain,.hero p,.hero-state>span:not(.dot),.section-heading>span,.note,.platform,ol,.actions p,footer{color:#666}
.eyebrow{font-size:12px;letter-spacing:0;font-weight:400}.hero{padding:64px 0 48px}.hero>div:first-child{min-width:0}
h1{font:400 clamp(36px,4.4vw,64px)/1.1 Arial,Helvetica,sans-serif;letter-spacing:-.055em;overflow-wrap:anywhere;margin:0 0 24px}.accent{color:inherit}
.hero-state{border-color:#e5e5e5;min-width:210px}.hero-state strong{font-weight:500;color:#171717}.dot{background:#20754b;box-shadow:none}.dot.bad{background:#a3660a;box-shadow:none}
h2{font-weight:500;font-size:23px;letter-spacing:-.03em}.routes{gap:14px}.route{background:#f7f7f7;border:1px solid #f0f0f0;border-radius:16px;padding:24px 20px}.route-number{color:#737373}.route h3{font-weight:500;color:#171717;margin:28px 0 8px}.route p{color:#666;font-size:12px;line-height:1.6;min-height:38px}.route-bottom{border-color:#e2e2e2;color:#555}.tag,.tag.gray{background:#e9e9e9;color:#444}.state.up{color:#20754b}.state.down{color:#a3660a}.note{font-size:12px;margin:16px 0 32px}
.panel{border:1px solid #e5e5e5;border-radius:18px;padding:32px;margin-top:24px;background:#fff;box-shadow:none}.connect{background:#f7f7f7}.connect h2{font-size:28px}.connect p,.sub-state small{color:#666;font-size:13px}.sub-state{border-color:#ddd}.sub-state p{font-size:12px}.link-row{margin-top:24px}.link-row input{background:#fff;color:#171717;border:1px solid #ddd;border-radius:12px;font-size:12px;padding:13px}
button{background:#171717;color:#fff;border:1px solid #171717;border-radius:999px;font-family:inherit;font-size:13px;font-weight:500;padding:11px 18px}button:hover{background:#333;filter:none}.ghost{background:transparent;color:#666;border:0;font-size:12px}.ghost:hover{background:transparent;color:#171717;text-decoration:underline}.secondary{background:#fff;color:#171717;border:1px solid #d9d9d9}.secondary:hover{background:#f4f4f4}.tabs{background:#f1f1f1;border-radius:999px}.tabs button{color:#666;border:0}.tabs .selected{background:#171717;color:#fff;box-shadow:none}.actions>div+div{border-color:#e5e5e5}.actions h3{font-weight:500;font-size:16px}.actions p{font-size:13px}.actions button{margin-top:12px}ol{font-size:14px;line-height:1.8}footer{font-size:11px;margin-top:36px}#toast{background:#171717;color:#fff;box-shadow:none;border-radius:14px}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #171717;outline-offset:4px}
.login-page{min-height:100vh;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;background:#fff}
.login-header{padding:28px 40px;border:0}.login-main{width:min(420px,calc(100% - 40px));max-width:420px;margin:0 auto;padding:50px 0;align-self:center}
.login-main h1{font-size:40px;letter-spacing:-.045em;margin:0 0 14px}.login-main p{color:#666;font-size:15px;margin:0 0 34px;line-height:1.6}.login-main .field{display:block;font-size:14px;margin:20px 0 9px}.login-main input{width:100%;height:52px;border:1px solid #d5d5d5;border-radius:12px;padding:0 16px;font:inherit;background:#fff;color:#171717}.login-main button{width:100%;height:50px;margin-top:28px;font-size:14px}.login-main .error{background:#fff3f1;color:#a1261b;border-radius:10px;padding:12px 14px;font-size:13px;margin-top:18px}.login-footer{display:block;text-align:center;color:#737373;padding:24px;margin:0;font-size:12px}.login-footer a{color:inherit;text-underline-offset:4px}
@media(max-width:1200px){.hero{align-items:flex-start;flex-direction:column}.hero-state{padding-left:0;border:0}.routes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){aside{border-right:0;border-bottom:1px solid #e5e5e5}.hero{padding:40px 0;gap:24px}h1{font-size:clamp(32px,8vw,52px)}.route{padding:20px 14px}.route h3{font-size:18px}.route p{font-size:11px}.panel{padding:24px 18px}h2{font-size:20px}.login-header{padding:24px}.login-main{padding:36px 0;margin:0 auto;width:min(420px,calc(100% - 40px))}.login-main h1{font-size:36px}}