:root {
  --ink: #1b2940;
  --muted: #8390a3;
  --blue: #3979ef;
  --blue-dark: #2463d5;
  --line: #e9eef5;
  --soft: #f6f9fd;
  --green: #37a994;
  --font: "Bahnschrift", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "Cascadia Code", "Consolas", monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; }
h1,h2,h3,p { margin: 0; }
a { color: inherit; text-decoration: none; }
button,input,select { font: inherit; }
button { cursor: pointer; color: inherit; border: 0; }
button,a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
img { display: block; max-width: 100%; height: auto; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex="0"]:focus-visible { outline: 3px solid #57a3ed; outline-offset: 4px; }
[hidden] { display: none !important; }
.container { width: calc(100% - 96px); max-width: 1160px; margin: 0 auto; }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.svg-library { width: 0; height: 0; position: absolute; overflow: hidden; }
.skip-link { position: fixed; top: -80px; left: 15px; z-index: 100; background: #fff; padding: 15px; }
.skip-link:focus { top: 12px; }
.site-header { position: sticky; top: 0; z-index: 20; background: #ffffffef; backdrop-filter: blur(16px); border-bottom: 1px solid #edf1f780; }
.header-inner { display: flex; align-items: center; height: 78px; gap: 48px; }
.brand { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.brand img { width: 32px; height: 32px; }
.brand strong { font-size: 18px; letter-spacing: -.4px; font-weight: 600; }
.brand strong>span { font-size: 10px; font-weight: 500; color: #688ac3; background: #edf4ff; border-radius: 4px; padding: 3px 5px; margin-left: 3px; vertical-align: 2px; }
.navigation { display: flex; gap: 27px; font-size: 12px; align-items: center; }
.navigation a { display: flex; gap: 5px; align-items: center; white-space: nowrap; color: #737f92; }
.navigation a:hover { color: var(--blue); }
.navigation .icon { width: 12px; height: 12px; }
.header-actions { display: flex; margin-left: auto; gap: 24px; align-items: center; }
.github-link { color: #526078; display: flex; }
.github-link .icon { width: 21px; height: 21px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 0 25px; min-height: 52px; border-radius: 9px; font-size: 13px; font-weight: 500; color: white; background: var(--blue); transition: transform .2s,background .2s,box-shadow .2s; line-height: 1.5; }
.button:hover { background: var(--blue-dark); transform: translateY(-2px); box-shadow: 0 8px 22px #3979ef20; }
.button .icon { width: 17px; height: 17px; }
.button-small { min-height: 37px; padding: 0 18px; font-size: 11px; border-radius: 6px; }
.button-outline { background: #fff; border: 1px solid #e0e7f0; color: #53617a; }
.button-outline:hover { background: #f5f8fc; box-shadow: none; }
.button-white { background: #fff; color: #254374; }
.button-white:hover { background: #edf5ff; box-shadow: none; }
.menu-toggle { display: none; }
.hero { position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 80%,#e7f0ff 0%,transparent 55%),linear-gradient(#fff 0%,#f4f8fe 100%); padding-top: 59px; }
.hero-inner { position: relative; z-index: 1; text-align: center; }
.hero-orbit { position: absolute; border: 1px solid #e4edf9; border-radius: 50%; width: 1100px; height: 540px; pointer-events: none; }
.orbit-one { top: 175px; left: calc(50% - 550px); transform: rotate(-16deg); }
.orbit-two { top: 205px; left: calc(50% - 550px); transform: rotate(16deg); }
.release-pill { display: inline-flex; gap: 9px; align-items: center; background: #fff; border: 1px solid #e6edf7; padding: 8px 13px; font-size: 10px; color: #7c8fab; border-radius: 30px; }
.live-dot { display: inline-block; width: 5px; height: 5px; background: #48b399; border-radius: 100%; flex-shrink: 0; }
.pill-arrow { margin-left: 5px; color: #678abe; }
.hero h1 { margin: 26px 0 20px; font-size: 62px; letter-spacing: -2.5px; line-height: 1.3; font-weight: 650; }
.hero h1>span { color: var(--blue); background: linear-gradient(110deg,#276de5,#6a9bf3); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero-description { font-size: 14px; color: #8794a8; line-height: 1.9; letter-spacing: .3px; }
.hero-actions { display: flex; gap: 13px; justify-content: center; margin-top: 26px; }
.hero-platforms { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 20px; color: #9aa6b7; font-size: 9px; }
.hero-platforms .icon { width: 12px; height: 12px; stroke-width: 1.5; }
.hero-platforms .icon:first-child { fill: currentColor; stroke: none; }
.hero-platforms i { height: 9px; width: 1px; background: #dce4ef; margin: 0 2px; }
.preview-wrap { max-width: 976px; margin: 41px auto 0; position: relative; text-align: left; }
.preview-topline { display: flex; justify-content: space-between; align-items: center; margin: 0 5px 13px; }
.preview-topline>span { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 8px; letter-spacing: 1.4px; color: #99aac2; }
.preview-topline .live-dot { background: #7da3e5; width: 4px; height: 4px; }
.theme-controls { display: flex; gap: 3px; padding: 3px; border: 1px solid #e3eaf4; background: #eff4fc; border-radius: 7px; }
.theme-controls button { padding: 5px 8px; background: transparent; border-radius: 4px; color: #93a2b7; display: flex; }
.theme-controls button[aria-pressed="true"] { background: #fff; color: #477fc8; box-shadow: 0 1px 4px #233b5510; }
.theme-controls .icon { height: 13px; width: 13px; }
.app-window { --app-bg: #fff; --app-main: #f8fafd; --app-border: #e7edf5; --app-text: #41516a; --app-muted: #a1afc2; --app-selected: #edf4ff; background: var(--app-bg); color: var(--app-text); border: 1px solid #dae5f3; border-radius: 13px; box-shadow: 0 24px 65px #395c941c,0 4px 14px #2f57920a; overflow: hidden; }
.app-window[data-theme="dark"] { --app-bg: #1a2435; --app-main: #152031; --app-border: #2d394c; --app-text: #d1dcec; --app-muted: #7e90ab; --app-selected: #263c5b; border-color: #304763; }
.app-titlebar { height: 36px; background: var(--app-bg); border-bottom: 1px solid var(--app-border); display: flex; align-items: center; padding: 0 16px; color: var(--app-muted); font-size: 9px; justify-content: space-between; }
.traffic-lights { display: flex; gap: 5px; width: 73px; }
.traffic-lights i { width: 8px; height: 8px; background: #f08785; border-radius: 50%; }
.traffic-lights i:nth-child(2) { background: #e9c26b; }
.traffic-lights i:nth-child(3) { background: #8bc89e; }
.preview-badge { font-size: 8px; padding: 3px 6px; border: 1px solid var(--app-border); border-radius: 4px; }
.app-layout { display: grid; grid-template-columns: 170px minmax(0,1fr); min-height: 390px; }
.app-sidebar { display: flex; flex-direction: column; background: var(--app-bg); border-right: 1px solid var(--app-border); padding: 22px 16px 15px; }
.app-brand { display: flex; gap: 8px; align-items: center; margin-bottom: 24px; }
.app-brand strong { font-size: 13px; font-weight: 600; }
.app-brand img { height: 23px; width: 23px; }
.app-tabs { display: flex; flex-direction: column; gap: 7px; }
.app-tabs button { background: transparent; padding: 10px 13px; border-radius: 7px; display: flex; align-items: center; gap: 13px; color: var(--app-muted); text-align: left; font-size: 11px; }
.app-tabs .icon { height: 16px; width: 16px; }
.app-tabs button[aria-selected="true"] { background: var(--app-selected); color: #6b99e9; }
.sidebar-chart { margin-top: auto; padding-top: 25px; }
.sidebar-chart svg { display: block; width: 100%; height: 33px; stroke: #719beb; stroke-width: 1.4; fill: none; }
.sidebar-chart>div { display: flex; justify-content: space-between; gap: 5px; margin-top: 8px; font-size: 5px; color: var(--app-muted); }
.sidebar-chart b { font-size: 8px; font-weight: 500; color: #86a9e6; }
.sidebar-chart small { font-size: 5px; color: var(--app-muted); display: block; margin-top: 9px; }
.sidebar-footer { display: flex; align-items: center; gap: 6px; margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--app-border); font-size: 8px; color: var(--app-muted); }
.sidebar-footer .live-dot { height: 4px; width: 4px; }
.app-main { background: var(--app-main); padding: 25px 27px 16px; min-width: 0; display: flex; flex-direction: column; }
.app-main-header { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 22px; }
.app-main-header h2 { font-size: 18px; font-weight: 600; }
.app-main-header p { font-size: 8px; color: var(--app-muted); margin-top: 6px; }
.mode-selector { display: flex; padding: 3px; border: 1px solid var(--app-border); background: var(--app-bg); border-radius: 6px; }
.mode-selector button { background: transparent; color: var(--app-muted); padding: 6px 13px; font-size: 8px; border-radius: 4px; }
.mode-selector button[aria-pressed="true"] { color: #fff; background: #6391e6; }
.demo-panel { flex: 1; min-width: 0; }
.proxy-group-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 14px; }
.proxy-group-heading>div { display: flex; align-items: center; gap: 8px; }
.group-icon { display: flex; align-items: center; justify-content: center; background: var(--app-selected,#edf4ff); color: #6a9beb; width: 27px; height: 27px; border-radius: 7px; flex-shrink: 0; }
.group-icon .icon { width: 15px; height: 15px; }
.proxy-group-heading strong { font-size: 11px; font-weight: 500; }
.tag { font-family: var(--mono); font-size: 5px; padding: 3px 5px; color: #8babdf; border: 1px solid #a1beee65; border-radius: 3px; }
.proxy-group-heading>span { font-size: 7px; color: var(--app-muted); }
.node-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.node-card { display: flex; align-items: center; gap: 11px; background: var(--app-bg); border: 1px solid var(--app-border); border-radius: 7px; padding: 14px 12px; text-align: left; position: relative; color: var(--app-text); transition: border-color .2s,background .2s; }
.node-card.selected { border-color: #7cacef; background: var(--app-selected); }
.region-badge { display: flex; justify-content: center; align-items: center; width: 29px; height: 29px; flex-shrink: 0; font-family: var(--mono); font-size: 9px; border-radius: 50%; }
.region-hk { color: #a27468; background: #f0e2de; }
.region-jp { color: #a57c8f; background: #f6e6ed; }
.region-sg { color: #639683; background: #e2f0e9; }
.region-us { color: #6e89ad; background: #e5edf7; }
.node-card strong { display: block; font-size: 9px; font-weight: 500; }
.node-card div>small { display: block; font-size: 6px; color: var(--app-muted); margin-top: 7px; }
.latency { margin-left: auto; font-family: var(--mono); font-size: 11px; color: #6da997; white-space: nowrap; padding-right: 6px; }
.latency small { font-size: 6px; }
.latency-warm { color: #b4a17c; }
.node-check { position: absolute; bottom: 4px; right: 4px; width: 8px; height: 8px; stroke-width: 2; color: #719ff0; display: none; }
.node-card.selected .node-check { display: block; }
.auto-group { display: flex; align-items: center; gap: 13px; padding: 15px 14px; border: 1px solid var(--app-border); background: var(--app-bg); border-radius: 7px; margin-top: 17px; }
.auto-symbol { font-size: 23px; color: #a7bada; font-family: var(--mono); }
.auto-group strong { font-size: 9px; font-weight: 500; }
.auto-group p { font-size: 5px; font-family: var(--mono); color: #8bace3; margin-top: 7px; }
.auto-group p>span { color: var(--app-muted); margin-left: 8px; font-family: var(--font); }
.auto-badge { margin-left: auto; font: 7px var(--mono); color: #98aac3; }
.demo-status { display: flex; align-items: center; gap: 6px; margin-top: 19px; font-size: 6px; color: var(--app-muted); min-height: 10px; }
.demo-status .live-dot { height: 4px; width: 4px; }
.status-local { margin-left: auto; font-family: var(--mono); font-size: 5px; letter-spacing: .7px; }
.preview-caption { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 5px 36px; color: #9daec5; font-size: 9px; }
.preview-caption button { display: inline-flex; align-items: center; gap: 7px; background: transparent; font-size: 9px; color: #839cbe; padding: 0; }
.preview-caption .icon { width: 11px; height: 11px; }
.overview-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.overview-stats>div { padding: 17px; background: var(--app-bg); border: 1px solid var(--app-border); border-radius: 7px; }
.overview-stats span { font-size: 8px; color: var(--app-muted); }
.overview-stats strong { display: block; margin-top: 10px; font-size: 21px; color: #81a7e9; font-weight: 500; }
.overview-stats small { font-size: 6px; color: var(--app-muted); }
.demo-chart { margin-top: 14px; padding: 13px 16px 0; border: 1px solid var(--app-border); border-radius: 7px; background: var(--app-bg); }
.demo-chart>span { font-size: 7px; color: var(--app-muted); }
.demo-chart svg { display: block; width: 100%; height: 65px; margin-top: 12px; }
.chart-area { fill: url(#graph-fill); }
.chart-line { fill: none; stroke: #769de4; stroke-width: 1.5; }
.demo-switches { display: flex; gap: 14px; margin-top: 15px; }
.demo-switches button { background: transparent; padding: 0; display: flex; align-items: center; gap: 20px; flex: 1; text-align: left; color: var(--app-text); font-size: 8px; }
.demo-switches small { display: block; margin-top: 5px; font-size: 5px; color: var(--app-muted); }
.demo-switches i,.decorative-switch { width: 24px; height: 14px; background: #cdd8e6; border-radius: 10px; position: relative; display: inline-block; flex-shrink: 0; }
.demo-switches i:before,.decorative-switch:before { content: ""; position: absolute; left: 2px; top: 2px; width: 10px; height: 10px; background: #fff; border-radius: 100%; }
.demo-switches button[aria-pressed="true"] i,.decorative-switch { background: #81a8eb; }
.demo-switches button[aria-pressed="true"] i:before,.decorative-switch:before { left: 12px; }
.profile-intro { display: flex; align-items: center; gap: 11px; margin: 5px 0 22px; }
.profile-intro strong { font-size: 11px; font-weight: 500; }
.profile-intro p { font-size: 7px; color: var(--app-muted); margin-top: 8px; }
.profile-card { display: flex; align-items: center; width: 100%; gap: 14px; padding: 20px 17px; border: 1px solid var(--app-border); background: var(--app-bg); border-radius: 7px; margin-top: 12px; text-align: left; color: var(--app-text); }
.profile-card.selected { background: var(--app-selected); border-color: #82abeb; }
.profile-icon { width: 28px; height: 31px; display: flex; align-items: center; justify-content: center; background: #e2eefc; color: #78a2d8; font: 14px var(--mono); border-radius: 4px; }
.profile-alt { background: #e4f0ed; color: #78a99c; }
.profile-card strong { font-size: 11px; font-weight: 500; }
.profile-card p { font-size: 7px; color: var(--app-muted); margin-top: 7px; }
.profile-card p>span { margin-left: 6px; }
.profile-state { margin-left: auto; font-size: 7px; color: #8cace4; }
.profile-doc-link { display: flex; align-items: center; gap: 8px; color: #8dace0; margin-top: 19px; font-size: 8px; }
.profile-doc-link .icon { width: 10px; height: 10px; }
.rule-search { display: flex; align-items: center; gap: 8px; background: var(--app-bg); border: 1px solid var(--app-border); border-radius: 7px; padding: 9px 12px; }
.rule-search .icon { height: 14px; width: 14px; color: var(--app-muted); }
.rule-search input { width: 100%; background: transparent; border: 0; font-size: 8px; color: var(--app-text); min-width: 0; }
.rule-search input::placeholder { color: var(--app-muted); }
.rule-table { margin-top: 16px; }
.rule-table>div { display: grid; grid-template-columns: 1fr 1.3fr .6fr; gap: 12px; border-bottom: 1px solid var(--app-border); font-size: 7px; padding: 15px 5px; align-items: center; }
.rule-table>div>span { color: var(--app-muted); font-family: var(--mono); font-size: 7px; }
.rule-table-heading { padding-top: 0 !important; color: var(--app-muted); }
.rule-table code { font-size: 7px; overflow-wrap: anywhere; font-family: var(--mono); }
.rule-table b { font: 6px var(--mono); color: #82a7e4; background: var(--app-selected); padding: 4px 5px; border-radius: 3px; justify-self: start; }
.rule-table b.direct-tag { color: #72ad9b; background: #74b19f15; }
.rule-note,#rule-empty { font-size: 7px; color: var(--app-muted); margin-top: 16px; line-height: 1.8; }
.tech-strip { border-bottom: 1px solid var(--line); background: #fff; }
.tech-strip>.container { display: flex; align-items: center; justify-content: space-between; min-height: 112px; gap: 25px; }
.tech-strip>.container>span { color: #aab4c3; font-size: 11px; padding-right: 42px; border-right: 1px solid var(--line); }
.tech-strip strong { font-size: 19px; font-weight: 500; color: #8391a7; letter-spacing: -.4px; }
.tech-strip small { font-family: var(--font); font-size: 9px; font-weight: 400; margin-left: 8px; color: #b1bac8; letter-spacing: 0; }
.section { padding-top: 105px; padding-bottom: 105px; }
.section-heading { text-align: center; margin-bottom: 48px; }
.eyebrow { font-family: var(--mono); font-size: 9px; color: #8da1bd; letter-spacing: 1.7px; display: block; line-height: 1.8; }
h2 { font-size: 39px; font-weight: 600; line-height: 1.5; letter-spacing: -1.2px; }
.section-heading h2 { margin: 16px 0 17px; }
.section-heading p { font-size: 13px; color: var(--muted); line-height: 1.8; }
.feature-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 21px; }
.feature-card { background: #f7f9fc; border: 1px solid #edf1f7; border-radius: 15px; padding: 30px; min-width: 0; position: relative; overflow: hidden; }
.feature-routing { grid-column: span 2; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 18px; align-items: center; background: linear-gradient(110deg,#f6f9fe,#f0f5fc); }
.feature-icon { color: #77a0db; width: 33px; height: 33px; background: #e9f0fb; border-radius: 9px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
.feature-icon .icon { width: 18px; height: 18px; }
.feature-card h3 { font-size: 19px; line-height: 1.7; font-weight: 600; margin-bottom: 13px; }
.feature-card p { font-size: 11px; color: #929fb2; line-height: 1.9; }
.text-link { display: inline-flex; gap: 11px; align-items: center; font-size: 11px; color: #698abe; }
.text-link .icon { width: 13px; height: 13px; }
.text-link:hover { color: var(--blue); }
.feature-card .text-link { margin-top: 23px; }
.route-visual { position: relative; display: flex; align-items: center; padding-bottom: 28px; min-width: 0; }
.route-source { position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 7px; background: #fff; border: 1px solid #e6edf8; height: 66px; width: 65px; border-radius: 13px; flex-shrink: 0; box-shadow: 0 3px 10px #3b6fad05; z-index: 1; }
.route-source .icon { height: 23px; width: 23px; color: #7fa5da; }
.route-source>span { font-size: 7px; color: #93a5bf; }
.route-lines { width: 28px; height: 92px; flex-shrink: 0; position: relative; border-left: 1px solid #cbdaf0; margin-left: 11px; }
.route-lines:before { content: ""; position: absolute; top: 45px; left: -12px; width: 12px; height: 1px; background: #cbdaf0; }
.route-lines i { height: 1px; width: 100%; background: #cbdaf0; position: absolute; left: 0; top: 0; }
.route-lines i:nth-child(2) { top: 45px; }
.route-lines i:nth-child(3) { top: 91px; }
.route-targets { display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1; }
.route-targets>span { display: flex; align-items: center; gap: 7px; font-size: 8px; color: #91a1b9; background: #fff; padding: 13px 10px; white-space: nowrap; border: 1px solid #e8eef7; border-radius: 7px; }
.route-targets b { font: 5px var(--mono); color: #b0bed2; margin-left: auto; }
.route-dot { width: 5px; height: 5px; background: #8eb1e4; border-radius: 100%; flex-shrink: 0; }
.route-dot.green { background: #91bbad; }
.route-dot.orange { background: #d7b894; }
.route-footnote { position: absolute; bottom: 0; right: 17px; font-size: 6px; color: #b0bdd0; }
.mini-profiles { margin-top: 20px; display: flex; flex-direction: column; gap: 9px; }
.mini-profiles>span { display: flex; align-items: center; gap: 9px; padding: 10px; background: #fff; font-size: 8px; border: 1px solid #e8edf5; border-radius: 5px; color: #94a1b6; }
.mini-profiles i { font: 8px var(--mono); font-style: normal; display: flex; justify-content: center; align-items: center; height: 21px; width: 18px; border-radius: 3px; background: #ebf1fc; color: #90afdc; }
.mini-profiles b { margin-left: auto; font-size: 6px; font-weight: 400; color: #94a7c6; }
.feature-simple,.feature-theme,.feature-sync { min-height: 284px; }
.feature-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #e7edf7; padding: 14px 0; margin-top: 15px; color: #a5afbf; font-size: 9px; }
.theme-samples { display: flex; gap: 10px; margin-top: 24px; margin-bottom: 10px; }
.theme-samples i { width: 26px; height: 26px; border-radius: 100%; border: 4px solid #fff; background: #79a7e9; box-shadow: 0 0 0 1px #e4eaf3; }
.theme-samples i:nth-child(2) { background: #8cbbae; }.theme-samples i:nth-child(3) { background: #b0a6cf; }.theme-samples i:nth-child(4) { background: #d0ae95; }
.sync-visual { display: flex; align-items: center; gap: 18px; margin-top: 20px; margin-bottom: 10px; color: #a0b4ce; }
.sync-visual .icon { width: 26px; height: 26px; background: white; box-sizing: content-box; padding: 8px; border: 1px solid var(--line); border-radius: 7px; }
.sync-visual>span { font: 12px var(--mono); color: #becde0; }
.downloads-section { background: #f7f9fd; border-top: 1px solid #f0f3f8; border-bottom: 1px solid #f0f3f8; }
.download-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.download-card { background: #fff; border: 1px solid #e6edf7; border-radius: 14px; text-align: center; padding: 35px 29px 24px; min-width: 0; }
.platform-icon { height: 33px; width: 33px; fill: none; stroke: #5a759f; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 22px; }
.download-card:first-child .platform-icon { fill: #5a759f; stroke: none; }
.platform-apple { fill: #5a759f; stroke: none; }
.download-card h3 { font-size: 23px; font-weight: 500; }
.download-card>p { font-size: 10px; color: #9ba6b8; margin-top: 12px; margin-bottom: 27px; }
.download-card label,.dialog-configuration label { display: flex; flex-direction: column; gap: 8px; font-size: 9px; color: #9aa7bc; text-align: left; }
select { appearance: auto; color: #6a7c98; background: #fafbfd; border: 1px solid #e5ebf4; padding: 10px 9px; border-radius: 6px; font-size: 10px; width: 100%; height: 37px; cursor: pointer; }
.linux-selects { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.download-package { display: flex; width: 100%; margin-top: 16px; min-height: 46px; font-size: 12px; }
.package-hint { display: block; margin-top: 14px; font: 8px var(--mono); color: #b3bfd0; }
.platform-help { display: inline-block; color: #9aabc4; margin-top: 24px; font-size: 9px; }
.platform-help:hover { color: var(--blue); }
.release-note { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 25px; color: #a1adc0; font-size: 9px; }
.release-note>div { display: flex; align-items: center; gap: 13px; }
.release-version { color: #7a95bc; padding: 5px 8px; border: 1px solid #dbe6f5; border-radius: 4px; font-family: var(--mono); font-size: 8px; white-space: nowrap; }
.release-note>a { display: flex; align-items: center; gap: 6px; color: #88a0c0; white-space: nowrap; }
.release-note .icon { width: 10px; height: 10px; }
.download-notice { border-top: 1px solid #e5edf8; padding-top: 22px; margin-top: 25px; display: flex; align-items: start; gap: 9px; color: #abb8cd; }
.download-notice .icon { height: 15px; width: 15px; margin-top: 1px; }
.download-notice p { font-size: 9px; line-height: 1.8; }
.download-notice strong { font-weight: 500; color: #8099bd; }
.mobile-break { display: none; }
.guide-section { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 96px; align-items: center; }
.guide-heading h2 { font-size: 33px; margin: 19px 0 17px; }
.guide-heading>p { font-size: 12px; color: var(--muted); line-height: 1.8; }
.guide-heading .text-link { margin-top: 27px; }
.guide-step { display: flex; gap: 22px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--line); }
.guide-step:first-child { padding-top: 0; }.guide-step:last-child { border-bottom: 0; padding-bottom: 0; }
.step-number { font: 19px var(--mono); color: #c5d4e8; }
.guide-step h3 { font-size: 15px; font-weight: 500; }
.guide-step p { font-size: 10px; color: #a1aec0; margin-top: 11px; line-height: 1.8; }
.guide-step>.icon { height: 14px; width: 14px; color: #a1b4d1; margin-left: auto; }
.guide-step:hover h3 { color: var(--blue); }
.open-source-section { background: #1d2d47; color: #fff; padding: 77px 0; position: relative; overflow: hidden; }
.open-source-section:before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(#9eb4dc12 1px,transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(90deg,transparent,#000); }
.open-source-inner { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.04fr); gap: 70px; align-items: center; position: relative; }
.open-source-copy .eyebrow { color: #809cbe; }
.open-source-copy h2 { font-size: 38px; margin: 19px 0; }
.open-source-copy p { font-size: 12px; line-height: 2; color: #95a9c6; }
.open-source-copy .button { margin-top: 28px; font-size: 12px; min-height: 48px; }
.source-terminal { background: #19263c; border: 1px solid #344665; border-radius: 12px; box-shadow: 0 15px 40px #101c3520; overflow: hidden; transform: rotate(-2deg); }
.terminal-top { height: 36px; display: flex; align-items: center; padding: 0 16px; background: #23344e; font: 7px var(--mono); color: #8fa2bf; }
.terminal-top .traffic-lights i { height: 6px; width: 6px; opacity: .75; }
.terminal-content { font: 12px/2 var(--mono); padding: 25px 30px; color: #b7c5dc; }
.terminal-comment { color: #627b9f; font-size: 9px; margin-bottom: 16px; display: block; }
.terminal-content p>span { color: #7fa4d8; }.terminal-content p>b { color: #a0c7bc; font-weight: 400; }.terminal-content .indent { padding-left: 23px; }
.terminal-bottom { margin-top: 18px; padding-top: 17px; border-top: 1px solid #30415d; color: #6785ae; font-size: 7px; display: flex; gap: 8px; align-items: center; }
.terminal-bottom .live-dot { width: 4px; height: 4px; }
.faq-section { padding-bottom: 72px; }
.faq-section .section-heading h2 { font-size: 31px; }
.faq-list { max-width: 800px; margin: auto; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 23px 3px; cursor: pointer; list-style: none; font-size: 12px; color: #5f708a; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary>span { font-size: 19px; color: #afbbce; font-weight: 300; }
.faq-list details[open] summary>span { transform: rotate(45deg); }
.faq-list p { font-size: 11px; color: #97a5ba; line-height: 2; padding: 0 28px 22px 3px; }
.faq-list a { color: #7194ce; }
.closing-section { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 35px 0 74px; }
.closing-section h2 { font-size: 29px; margin-top: 13px; }
.closing-section .button { font-size: 12px; }
.closing-section .eyebrow { font-size: 8px; }
.site-footer { background: #f7f9fc; border-top: 1px solid #edf1f8; padding: 55px 0 24px; }
.footer-main { display: flex; justify-content: space-between; gap: 50px; padding-bottom: 39px; }
.footer-brand .brand strong { font-size: 16px; }.footer-brand .brand img { width: 28px; height: 28px; }
.footer-brand p { margin-top: 21px; color: #a0adc1; font-size: 11px; line-height: 1.9; }
.footer-links { display: grid; grid-template-columns: repeat(3,1fr); gap: 80px; }
.footer-links h3 { font-size: 11px; font-weight: 500; color: #72829a; margin-bottom: 19px; }
.footer-links a { font-size: 10px; color: #a1aec2; display: block; margin-top: 13px; white-space: nowrap; }
.footer-links a:hover { color: var(--blue); }
.footer-bottom { border-top: 1px solid #e7ecf5; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 20px; color: #b2bdce; font-size: 8px; }
.footer-bottom p { line-height: 1.8; }.footer-bottom>a { white-space: nowrap; }
dialog { color: var(--ink); width: 510px; max-width: calc(100% - 32px); max-height: calc(100dvh - 32px); border: 1px solid #e3ebf7; border-radius: 17px; padding: 34px; box-shadow: 0 25px 100px #13223a40; overflow-y: auto; }
dialog::backdrop { background: #14223c70; backdrop-filter: blur(7px); }
body:has(dialog[open]) { overflow: hidden; }
.dialog-close { position: absolute; top: 13px; right: 13px; width: 28px; height: 28px; background: #f2f5fa; color: #8595ad; border-radius: 50%; font-size: 21px; display: flex; justify-content: center; align-items: center; }
.dialog-brand { display: flex; gap: 12px; align-items: center; font: 9px var(--mono); color: #8a9cba; letter-spacing: 1px; }
dialog h2 { font-size: 22px; margin-top: 25px; margin-bottom: 12px; letter-spacing: -.5px; }
dialog>p { color: #9aa8bb; font-size: 11px; line-height: 1.9; }
.dialog-platforms { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 23px 0; }
.dialog-platforms button { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; background: #f7f9fd; border: 1px solid #e6edf7; border-radius: 8px; padding: 16px 8px; font-size: 10px; color: #94a5c0; }
.dialog-platforms .icon { height: 23px; width: 23px; }
.dialog-platforms button:first-child .icon { fill: currentColor; stroke: none; }
.dialog-platforms button[aria-pressed="true"] { border-color: #a4c2f4; background: #eff5ff; color: #578cdb; }
.dialog-configuration { display: flex; gap: 10px; }
.dialog-configuration label { flex: 1; min-width: 0; }
.dialog-file { padding: 19px 14px; background: #f7f9fc; border: 1px solid #edf1f8; border-radius: 7px; margin-top: 18px; }
.dialog-file>span { display: block; color: #98aac6; font-size: 8px; }
.dialog-file>strong { font: 9px/1.8 var(--mono); color: #6d8cb9; overflow-wrap: anywhere; display: block; margin-top: 8px; }
.dialog-file>small { color: #afbbcd; font-size: 8px; display: block; margin-top: 9px; }
#dialog-package-link { display: flex; width: 100%; min-height: 48px; margin-top: 20px; }
.dialog-latest { display: block; text-align: center; font-size: 10px; color: #86a0c6; margin-top: 17px; }
dialog>.dialog-note { font-size: 8px; color: #b2bfd3; text-align: center; margin-top: 18px; }
.screenshot-dialog { width: 840px; padding: 30px; }
.screenshot-dialog h2 { margin-top: 3px; font-size: 21px; }
#official-screenshot { display: block; height: auto; max-height: 68dvh; width: 100%; object-fit: contain; margin: 20px auto 0; border-radius: 8px; }
.reveal { transition: opacity .7s ease,transform .7s ease; }
.js-reveal .reveal:not(.visible) { opacity: 0; transform: translateY(20px); }
.feature-card:nth-child(2),.download-card:nth-child(2) { transition-delay: .06s; }.feature-card:nth-child(3),.download-card:nth-child(3) { transition-delay: .12s; }
.hero h1,.hero-description,.hero-actions { animation: enter .8s both; }.hero-description { animation-delay: .1s; }.hero-actions { animation-delay: .2s; }.preview-wrap { animation: enter 1s .25s both; }
@keyframes enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@media(max-width:1100px) {
  .container { width: calc(100% - 64px); }.header-inner { gap: 30px; }.navigation { gap: 20px; }.header-actions { gap: 20px; }
  .brand strong { font-size: 17px; }.feature-card { padding: 25px; }.feature-routing { gap: 12px; }.route-source { width: 52px; height: 57px; }.route-lines { width: 20px; margin-left: 7px; }.route-lines:before { left: -8px; width: 8px; }
  .route-targets>span { padding: 13px 8px; font-size: 7px; gap: 5px; }.route-targets b { font-size: 4px; }.feature-card h3 { font-size: 17px; }.feature-card p { font-size: 10px; }.download-card { padding: 33px 23px 24px; }
  .guide-section { gap: 50px; }.guide-heading h2 { font-size: 30px; }.footer-links { gap: 55px; }.open-source-inner { gap: 50px; }.terminal-content { font-size: 11px; }
}
@media(max-width:900px) {
  .navigation { gap: 15px; font-size: 11px; }.header-inner { gap: 23px; }.header-actions { gap: 14px; }.brand strong { font-size: 15px; }.brand img { width: 29px; height: 29px; }.brand { gap: 8px; }.brand strong>span { font-size: 8px; }.github-link { display: none; }
  .app-layout { grid-template-columns: 145px minmax(0,1fr); }.app-sidebar { padding: 22px 12px 15px; }.app-brand { gap: 7px; }.app-brand strong { font-size: 11px; }.app-brand img { width: 20px; height: 20px; }
  .app-main { padding: 23px 20px 16px; }.node-card { padding: 14px 10px; gap: 8px; }.region-badge { width: 25px; height: 25px; font-size: 8px; }.node-card strong { font-size: 8px; }.latency { font-size: 9px; }.node-card div>small { font-size: 5px; }
  .feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }.feature-routing { grid-column: span 2; gap: 40px; }.feature-routing h3 { font-size: 21px; }.route-source { width: 64px; height: 65px; }.route-targets>span { font-size: 8px; padding: 13px 11px; }.route-targets b { font-size: 5px; }
  .feature-profiles { grid-row: span 2; display: flex; flex-direction: column; justify-content: center; }.feature-card h3 { font-size: 20px; }.feature-card p { font-size: 12px; }.feature-sync { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; min-height: 180px; align-items: center; }.feature-sync .feature-icon { grid-row: span 2; margin: 0; }.feature-sync h3 { grid-column: 1; grid-row: 1; margin-left: 50px; font-size: 18px; }.feature-sync p { grid-column: 1; grid-row: 2; font-size: 10px; }.feature-sync .sync-visual { grid-column: 2; grid-row: 1 / span 2; justify-content: center; margin: 0; }.feature-sync .text-link { grid-column: 1; grid-row: 3; margin-top: 15px; }
  .tech-strip>.container>span { font-size: 9px; padding-right: 22px; }.tech-strip strong { font-size: 16px; }.tech-strip small { display: block; margin-left: 0; margin-top: 6px; font-size: 8px; }
  .download-grid { gap: 15px; }.download-card { padding: 28px 16px 22px; }.download-card h3 { font-size: 20px; }.download-card>p { font-size: 8px; }.download-package { font-size: 10px; gap: 8px; padding: 0 12px; }.download-package .icon { width: 14px; height: 14px; }select { font-size: 9px; padding: 9px 7px; }
  .guide-section { gap: 40px; }.guide-heading h2 { font-size: 26px; }.guide-step { gap: 17px; }.guide-step p { font-size: 9px; }.guide-step h3 { font-size: 13px; }.step-number { font-size: 16px; }
  .open-source-inner { gap: 35px; }.open-source-copy h2 { font-size: 33px; }.open-source-copy p { font-size: 11px; }.terminal-content { font-size: 10px; padding: 23px; }.terminal-top { font-size: 6px; }.terminal-top .traffic-lights { width: 55px; }.terminal-comment { font-size: 8px; }
  .footer-links { gap: 36px; }.footer-main { gap: 25px; }.footer-brand .brand strong { font-size: 14px; }
}
@media(max-width:760px) {
  .container { width: calc(100% - 40px); }.header-inner { height: 68px; gap: 15px; }.brand strong { font-size: 16px; }.brand img { width: 29px; height: 29px; }.header-actions { gap: 13px; }.button-small { font-size: 10px; min-height: 32px; padding: 0 13px; }
  .menu-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 25px; height: 30px; background: transparent; padding: 0; }.menu-toggle span { width: 17px; height: 1.5px; background: #7b8aa4; }.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
  .navigation { position: absolute; top: 68px; left: 0; right: 0; background: #fff; padding: 10px 22px 22px; border-bottom: 1px solid var(--line); box-shadow: 0 15px 25px #29487808; display: none; }.navigation.open { display: flex; flex-direction: column; align-items: stretch; gap: 0; }.navigation a { padding: 13px 0; font-size: 13px; }
  .hero { padding-top: 48px; }.hero h1 { font-size: 44px; letter-spacing: -1.8px; margin: 25px 0 17px; }.hero-description { font-size: 12px; line-height: 1.9; }.hero-actions { margin-top: 25px; }.hero-actions .button { min-height: 47px; padding: 0 20px; font-size: 12px; gap: 10px; }.hero-actions .icon { height: 15px; width: 15px; }
  .hero-platforms { font-size: 8px; gap: 10px; margin-top: 18px; }.hero-platforms .icon { height: 11px; width: 11px; }.release-pill { font-size: 8px; padding: 7px 12px; }.preview-wrap { margin-top: 34px; }.preview-topline>span { font-size: 6px; letter-spacing: 1px; }.preview-topline { margin-bottom: 10px; }
  .app-layout { grid-template-columns: 114px minmax(0,1fr); min-height: 370px; }.app-sidebar { padding: 18px 9px 14px; }.app-brand strong { font-size: 9px; }.app-brand img { width: 16px; height: 16px; }.app-brand { gap: 5px; margin-bottom: 21px; }.app-tabs button { font-size: 9px; gap: 9px; padding: 10px; }.app-tabs .icon { width: 14px; height: 14px; }
  .app-main { padding: 19px 16px 14px; }.app-main-header { margin-bottom: 18px; }.app-main-header h2 { font-size: 16px; }.app-main-header p { font-size: 6px; }.mode-selector button { font-size: 7px; padding: 5px 9px; }.node-grid { gap: 8px; }.node-card { padding: 13px 9px; gap: 8px; }.region-badge { height: 23px; width: 23px; font-size: 7px; }.node-card strong { font-size: 7px; }.node-card div>small { font-size: 5px; margin-top: 5px; }.latency { font-size: 8px; padding-right: 3px; }.latency small { font-size: 5px; }
  .proxy-group-heading { gap: 10px; }.proxy-group-heading strong { font-size: 9px; }.proxy-group-heading>span { font-size: 6px; }.tag { font-size: 4px; padding: 3px; }.group-icon { height: 24px; width: 24px; }.group-icon .icon { height: 13px; width: 13px; }.auto-group { margin-top: 14px; padding: 14px 11px; gap: 9px; }.auto-group strong { font-size: 8px; }.auto-group p { font-size: 4px; }.auto-symbol { font-size: 20px; }.auto-badge { font-size: 6px; }
  .preview-caption { font-size: 7px; padding: 18px 0 25px; gap: 14px; }.preview-caption button { font-size: 7px; white-space: nowrap; }.preview-caption .icon { height: 9px; width: 9px; }.demo-status { font-size: 5px; }.status-local { display: none; }
  .overview-stats>div { padding: 12px; }.overview-stats strong { font-size: 18px; }.overview-stats span { font-size: 6px; }.demo-switches { gap: 10px; }.demo-switches button { gap: 12px; font-size: 7px; }.profile-card { padding: 18px 14px; gap: 10px; }.profile-card p { font-size: 6px; }.profile-card strong { font-size: 9px; }.profile-state { font-size: 6px; }
  .tech-strip>.container { gap: 15px; flex-wrap: wrap; justify-content: space-between; padding: 24px 0; min-height: 118px; }.tech-strip>.container>span { flex-basis: 100%; border: 0; padding: 0; text-align: center; font-size: 8px; }.tech-strip strong { font-size: 16px; }.tech-strip small { font-size: 7px; }
  .section { padding-top: 70px; padding-bottom: 70px; }.section-heading { margin-bottom: 32px; }h2 { font-size: 31px; letter-spacing: -.8px; }.section-heading h2 { margin: 15px 0; }.section-heading p { font-size: 11px; }.eyebrow { font-size: 8px; letter-spacing: 1.1px; }
  .feature-grid { gap: 16px; }.feature-card { padding: 24px; border-radius: 12px; }.feature-routing { gap: 25px; }.feature-routing h3 { font-size: 21px; }.feature-card h3 { font-size: 18px; }.feature-card p { font-size: 10px; }.feature-profiles { grid-row: auto; }.feature-simple,.feature-theme { min-height: 270px; }.feature-sync { grid-column: auto; display: block; min-height: 270px; }.feature-sync .feature-icon { margin-bottom: 22px; }.feature-sync h3 { font-size: 18px; margin-left: 0; }.feature-sync .sync-visual { margin-top: 19px; justify-content: start; }.feature-sync .text-link { margin-top: 20px; }.route-source { width: 52px; height: 58px; }.route-targets>span { font-size: 7px; padding: 13px 9px; }.route-targets b { font-size: 4px; }.feature-card .text-link { font-size: 10px; }
  .download-grid { gap: 13px; }.download-card { padding: 28px 14px 22px; }.download-card>p { font-size: 7px; }.download-card h3 { font-size: 19px; }.download-card label { font-size: 8px; }.download-package { font-size: 9px; padding: 0 10px; gap: 6px; }.download-package .icon { height: 12px; width: 12px; }.platform-help { font-size: 8px; }.package-hint { font-size: 7px; }.release-note { font-size: 8px; }.release-note>div { gap: 10px; }.release-version { font-size: 7px; }.download-notice p { font-size: 8px; }
  .guide-section { grid-template-columns: 1fr; gap: 37px; }.guide-heading h2 { font-size: 30px; }.guide-heading>p { font-size: 11px; }.guide-heading .text-link { margin-top: 20px; }.guide-step { padding: 24px 0; }.guide-step h3 { font-size: 14px; }.guide-step p { font-size: 10px; }.step-number { font-size: 18px; }
  .open-source-section { padding: 60px 0; }.open-source-inner { grid-template-columns: 1fr; gap: 40px; }.open-source-copy h2 { font-size: 34px; }.open-source-copy p { font-size: 12px; }.source-terminal { max-width: 510px; width: 100%; margin: auto; }.terminal-content { font-size: 12px; padding: 25px 27px; }.terminal-top { font-size: 7px; }.terminal-comment { font-size: 9px; }.terminal-bottom { font-size: 7px; }
  .faq-section .section-heading h2 { font-size: 27px; }.faq-list summary { font-size: 11px; line-height: 1.7; padding: 21px 0; }.faq-list p { font-size: 10px; padding-left: 0; }.closing-section { padding: 0 0 65px; flex-direction: column; text-align: center; gap: 25px; }.closing-section h2 { font-size: 28px; }.closing-section .button { font-size: 12px; min-height: 49px; }
  .site-footer { padding: 40px 0 20px; }.footer-main { flex-direction: column; gap: 30px; padding-bottom: 32px; }.footer-brand p { font-size: 10px; margin-top: 15px; }.footer-links { gap: 20px; }.footer-links h3 { font-size: 10px; }.footer-links a { font-size: 9px; }.footer-bottom { font-size: 7px; align-items: start; }
}
@media(max-width:580px) {
  .hero h1 { font-size: 40px; }.app-layout { grid-template-columns: 64px minmax(0,1fr); min-height: 426px; }.app-sidebar { padding: 18px 9px 13px; }.app-brand { justify-content: center; }.app-brand strong { display: none; }.app-brand img { width: 25px; height: 25px; }.app-tabs { gap: 8px; }.app-tabs button { padding: 9px 4px; flex-direction: column; gap: 6px; font-size: 7px; }.app-tabs .icon { width: 15px; height: 15px; }.sidebar-chart { display: none; }.sidebar-footer { margin-top: auto; font-size: 0; justify-content: center; border: 0; }.sidebar-footer .live-dot { width: 6px; height: 6px; }
  .app-main { padding: 17px 13px 14px; }.app-main-header { flex-wrap: wrap; gap: 13px; margin-bottom: 17px; }.app-main-header p { font-size: 6px; }.app-main-header h2 { font-size: 15px; }.mode-selector button { padding: 5px 12px; }.node-grid { grid-template-columns: 1fr; gap: 8px; }.node-card { padding: 10px 12px; gap: 12px; }.node-card strong { font-size: 8px; }.region-badge { width: 24px; height: 24px; }.latency { font-size: 10px; }.node-card div>small { font-size: 6px; }.proxy-group-heading>span { font-size: 5px; }.proxy-group-heading strong { font-size: 8px; }.proxy-group-heading>div { gap: 6px; }.tag { display: none; }.auto-group { padding: 12px; }.auto-group p>span { display: none; }.app-titlebar { height: 31px; padding: 0 11px; font-size: 7px; }.traffic-lights { width: 51px; gap: 4px; }.traffic-lights i { height: 6px; width: 6px; }.preview-badge { font-size: 6px; padding: 3px 4px; }
  .preview-caption { flex-direction: column; gap: 12px; text-align: center; }.preview-caption>span { font-size: 8px; }.preview-caption button { font-size: 8px; }.preview-topline>span { font-size: 5px; }.theme-controls .icon { width: 12px; height: 12px; }.theme-controls button { padding: 4px 6px; }
  .overview-stats { grid-template-columns: 1fr; gap: 8px; }.overview-stats>div { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px; }.overview-stats strong { margin-top: 0; font-size: 18px; }.overview-stats span { font-size: 8px; }.overview-stats small { font-size: 7px; }.demo-chart svg { height: 72px; }.demo-switches { flex-direction: column; gap: 15px; }.demo-switches button { justify-content: space-between; }.demo-switches small { font-size: 6px; }.profile-intro { gap: 8px; margin-bottom: 18px; }.profile-intro strong { font-size: 9px; }.profile-intro p { font-size: 6px; line-height: 1.8; }.profile-card { padding: 18px 11px; gap: 8px; }.profile-card p>span { display: none; }.profile-icon { height: 29px; width: 24px; font-size: 12px; }.profile-state { font-size: 5px; }.rule-table>div { gap: 7px; grid-template-columns: 1fr 1fr .6fr; padding: 18px 3px; }.rule-table>div>span { font-size: 5px; overflow-wrap: anywhere; }.rule-table code { font-size: 6px; }.rule-table b { font-size: 5px; padding: 4px; }.rule-note { font-size: 6px; }
  .feature-grid { gap: 14px; }.feature-routing { grid-template-columns: 1fr; gap: 27px; padding: 25px; }.feature-routing .feature-copy>h3 { font-size: 24px; }.feature-routing p { font-size: 11px; }.feature-routing .text-link { margin-top: 19px; }.route-visual { max-width: 350px; width: 100%; margin: auto; padding-bottom: 24px; }.route-source { width: 70px; height: 68px; }.route-lines { width: 39px; margin-left: 15px; }.route-lines:before { left: -16px; width: 16px; }.route-targets>span { font-size: 8px; padding: 13px 12px; }.route-targets b { font-size: 5px; }.route-footnote { font-size: 6px; }
  .feature-card:not(.feature-routing) { padding: 22px 19px; }.feature-card:not(.feature-routing) h3 { font-size: 16px; }.feature-card p { font-size: 9px; }.feature-profiles p { font-size: 9px; }.feature-card .feature-icon { margin-bottom: 18px; height: 31px; width: 31px; }.feature-card .text-link { font-size: 9px; gap: 7px; }.feature-card .text-link .icon { width: 11px; height: 11px; }.mini-profiles>span { font-size: 6px; padding: 9px 7px; gap: 6px; }.mini-profiles b { font-size: 5px; }.mini-profiles i { font-size: 7px; width: 14px; height: 18px; }.feature-sync p { font-size: 9px; }.sync-visual { gap: 10px; }.sync-visual .icon { width: 20px; height: 20px; padding: 6px; }.sync-visual>span { font-size: 9px; }.theme-samples { gap: 7px; }.theme-samples i { width: 23px; height: 23px; }.feature-simple,.feature-theme,.feature-sync { min-height: 260px; }
  .download-grid { grid-template-columns: 1fr; gap: 18px; }.download-card { padding: 27px 24px 23px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); text-align: left; gap: 0 17px; }.platform-icon { height: 27px; width: 27px; grid-column: 1; margin-bottom: 15px; }.download-card h3 { grid-column: 1; font-size: 21px; }.download-card>p { grid-column: 1/-1; font-size: 10px; margin: 13px 0 22px; }.download-card>label,.linux-selects { grid-column: 1/-1; }.download-package { grid-column: 1/-1; font-size: 12px; min-height: 46px; }.download-card label { font-size: 9px; }select { font-size: 11px; height: 39px; }.download-package .icon { height: 15px; width: 15px; }.package-hint { grid-column: 1; margin-top: 17px; font-size: 8px; }.platform-help { grid-column: 2; font-size: 8px; margin-top: 17px; text-align: right; }.release-note { align-items: start; flex-direction: column; gap: 13px; font-size: 8px; }.release-note>div { align-items: start; }.release-note>div>span:last-child { line-height: 1.9; }.release-version { margin-top: 1px; }.release-note>a { margin-left: auto; }.download-notice { gap: 8px; }.download-notice p { font-size: 8px; }.downloads-section .section-heading h2 { font-size: 29px; }.mobile-break { display: block; }
  .guide-heading h2 { font-size: 29px; }.guide-step { gap: 18px; }.guide-step p { font-size: 9px; }.guide-step h3 { font-size: 13px; }.open-source-copy h2 { font-size: 31px; }.open-source-copy p { font-size: 11px; }.terminal-content { font-size: 11px; padding: 23px; }.terminal-top { font-size: 6px; }.terminal-comment { font-size: 8px; }
  dialog { padding: 30px 24px; border-radius: 14px; }dialog h2 { font-size: 20px; }.dialog-platforms button { font-size: 9px; padding: 15px 7px; }.dialog-platforms .icon { height: 21px; width: 21px; }.dialog-file>strong { font-size: 8px; }.dialog-brand { font-size: 8px; }.dialog-brand img { height: 34px; width: 34px; }.screenshot-dialog { padding: 28px 20px; }.screenshot-dialog h2 { font-size: 18px; }#official-screenshot { max-height: 65dvh; }
}
@media(max-width:390px) {
  .container { width: calc(100% - 36px); }.brand strong { font-size: 14px; }.brand img { width: 27px; height: 27px; }.brand strong>span { font-size: 7px; padding: 3px 4px; margin-left: 1px; }.header-actions { gap: 10px; }.button-small { padding: 0 11px; font-size: 9px; }
  .hero h1 { font-size: 35px; letter-spacing: -1.3px; }.hero-description { font-size: 11px; }.hero-actions { gap: 9px; }.hero-actions .button { font-size: 11px; padding: 0 16px; gap: 8px; }.hero-platforms { font-size: 7px; gap: 8px; }.hero-platforms .icon { height: 10px; width: 10px; }
  .app-main { padding: 16px 11px 13px; }.app-main-header h2 { font-size: 14px; }.mode-selector button { font-size: 6px; padding: 5px 10px; }.app-main-header p { font-size: 5px; }.node-card { gap: 9px; padding: 10px; }.node-card strong { font-size: 7px; }.node-card div>small { font-size: 5px; }.latency { font-size: 9px; }.region-badge { height: 22px; width: 22px; }.proxy-group-heading>span { font-size: 4px; }.proxy-group-heading>div { gap: 5px; }.group-icon { height: 21px; width: 21px; }.demo-status { font-size: 4px; }.preview-topline>span { font-size: 5px; letter-spacing: .5px; }.preview-caption>span { font-size: 7px; }
  .section-heading h2 { font-size: 29px; }.eyebrow { font-size: 7px; }.tech-strip strong { font-size: 14px; }.tech-strip>.container { gap: 15px 13px; }.tech-strip small { font-size: 6px; }
  .feature-card:not(.feature-routing) { padding: 20px 16px; }.feature-card:not(.feature-routing) h3 { font-size: 14px; }.feature-card p,.feature-profiles p,.feature-sync p { font-size: 8px; }.feature-card .text-link { font-size: 8px; }.theme-samples { gap: 6px; }.theme-samples i { width: 21px; height: 21px; }.feature-simple,.feature-theme,.feature-sync { min-height: 247px; }.mini-profiles>span { gap: 5px; font-size: 5px; }.mini-profiles b { font-size: 4px; }.sync-visual { gap: 8px; }.sync-visual .icon { height: 17px; width: 17px; }
  .route-source { width: 60px; height: 62px; }.route-lines { width: 27px; }.route-targets>span { font-size: 7px; padding: 13px 10px; }.route-targets b { font-size: 4px; }.feature-routing .feature-copy>h3 { font-size: 22px; }.downloads-section .section-heading p { font-size: 10px; }.downloads-section .section-heading h2 { font-size: 27px; }.terminal-content { font-size: 10px; }.terminal-comment { font-size: 7px; }.terminal-top { font-size: 5px; }.faq-section .section-heading h2 { font-size: 25px; }.faq-list summary { font-size: 10px; }.faq-list p { font-size: 9px; }.closing-section h2 { font-size: 27px; }.footer-links { gap: 18px; }.footer-links a { font-size: 8px; }.footer-bottom { flex-direction: column; gap: 12px; }.footer-bottom>a { margin-left: auto; }
}
@media(max-width:350px) {
  .header-inner { gap: 10px; }.brand { gap: 6px; }.brand strong { font-size: 12px; }.brand img { height: 25px; width: 25px; }.button-small { padding: 0 10px; }.header-actions { gap: 8px; }.hero h1 { font-size: 30px; }.hero-description { font-size: 10px; }.hero-actions .button { font-size: 10px; padding: 0 13px; gap: 7px; }.hero-actions .icon { height: 13px; width: 13px; }.hero-platforms { gap: 7px; font-size: 6px; }
  .app-layout { grid-template-columns: 54px minmax(0,1fr); }.app-sidebar { padding: 18px 7px 13px; }.app-brand img { height: 22px; width: 22px; }.app-tabs button { font-size: 6px; }.app-main { padding: 15px 9px 12px; }.region-badge { width: 20px; height: 20px; font-size: 6px; }.node-card { padding: 10px 8px; gap: 7px; }.node-card strong { font-size: 6px; }.latency { font-size: 8px; }.node-card div>small { font-size: 4px; }.proxy-group-heading>span { font-size: 4px; }.proxy-group-heading strong { font-size: 7px; }.app-main-header p { font-size: 4px; }.preview-topline>span { font-size: 4px; }.profile-card { padding: 17px 9px; gap: 7px; }.profile-card strong { font-size: 8px; }.profile-state { font-size: 4px; }.profile-card p { font-size: 5px; }.profile-intro strong { font-size: 8px; }.profile-intro p { font-size: 5px; }.rule-table>div { gap: 5px; }.rule-table>div>span,.rule-table code { font-size: 5px; }.rule-table b { font-size: 4px; }.rule-note { font-size: 5px; }
  .feature-grid { gap: 12px; }.feature-card:not(.feature-routing) { padding: 19px 13px; }.feature-card:not(.feature-routing) h3 { font-size: 12px; }.feature-card p,.feature-profiles p,.feature-sync p { font-size: 7px; }.feature-card .text-link { font-size: 7px; gap: 5px; }.theme-samples { gap: 5px; }.theme-samples i { width: 19px; height: 19px; border-width: 3px; }.mini-profiles>span { padding: 8px 5px; font-size: 4px; gap: 4px; }.mini-profiles b { font-size: 3px; }.mini-profiles i { font-size: 5px; height: 15px; width: 11px; }.route-targets>span { gap: 5px; font-size: 6px; padding: 13px 8px; }.route-source { height: 57px; width: 53px; }.route-lines { width: 19px; margin-left: 10px; }.route-lines:before { width: 11px; left: -11px; }.sync-visual { gap: 6px; }.sync-visual .icon { height: 15px; width: 15px; padding: 5px; }.sync-visual>span { font-size: 7px; }.feature-routing { padding: 23px; }.tech-strip strong { font-size: 12px; }.eyebrow { font-size: 6px; }.guide-heading h2 { font-size: 26px; }.guide-step h3 { font-size: 12px; }.guide-step p { font-size: 8px; }.terminal-content { font-size: 9px; padding: 22px 20px; }.terminal-bottom { font-size: 6px; }.download-card { padding: 26px 22px 22px; }dialog { padding: 30px 20px; }dialog h2 { font-size: 18px; }.dialog-platforms button { font-size: 8px; }.dialog-file>strong { font-size: 7px; }
}
.hero-description,.section-heading p,.guide-heading>p { color: #6a7c96; }
.feature-card p,.guide-step p { color: #74849b; }
.download-card>p,.download-card label,.dialog-configuration label { color: #72829b; }
.release-note,.download-notice p { color: #7c8da8; }
.faq-list p,.footer-brand p { color: #7d8da5; }
.faq-list summary { color: #52647f; }
.footer-links a { color: #7d8da6; }
@media(min-width:761px) and (max-width:900px) {
  .feature-sync .feature-icon { grid-column: 1; grid-row: 1; }
  .feature-sync .sync-visual { grid-column: 2; grid-row: 1 / span 3; }
}
@media(max-width:420px) {
  .feature-grid { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .feature-routing { grid-column: 1; }
  .feature-card:not(.feature-routing) { padding: 25px; min-height: 0; }
  .feature-card:not(.feature-routing) h3 { font-size: 19px; }
  .feature-card p,.feature-profiles p,.feature-sync p { font-size: 11px; line-height: 1.9; }
  .feature-card .text-link { font-size: 11px; gap: 10px; }
  .feature-card .text-link .icon { width: 13px; height: 13px; }
  .mini-profiles { margin-top: 22px; gap: 10px; }
  .mini-profiles>span { font-size: 9px; padding: 12px; gap: 10px; }
  .mini-profiles b { font-size: 7px; }
  .mini-profiles i { font-size: 9px; width: 18px; height: 22px; }
  .feature-toggle-row { font-size: 11px; padding: 18px 0; }
  .theme-samples { gap: 12px; }
  .theme-samples i { width: 28px; height: 28px; border-width: 4px; }
  .sync-visual { gap: 17px; margin-top: 22px; }
  .sync-visual .icon { width: 24px; height: 24px; padding: 9px; }
  .sync-visual>span { font-size: 11px; }
  .feature-sync .text-link { margin-top: 24px; }
  .feature-routing .feature-copy>h3 { font-size: 25px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }*,*:before,*:after { animation: none !important; transition: none !important; }.js-reveal .reveal:not(.visible) { opacity: 1; transform: none; }
}