/* 静态首屏：两行标题、分屏托盘与设备景深。 */
.backdrop { position:absolute; inset:0 0 auto; height:960px; overflow:hidden; pointer-events:none; z-index:0; }
.wave-left { position:absolute; top:-30px; left:-140px; width:1120px; height:540px; max-width:none; }
.wave-left path { fill:var(--c-wave); }
.hero { position:relative; z-index:1; height:clamp(680px,calc(100vh - var(--nav-h) - 36px),860px); overflow-x:clip; }
.hero-copy { position:relative; z-index:2; width:44%; height:100%; padding:0 40px 24px var(--gutter); display:flex; flex-direction:column; justify-content:center; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px; padding:0; list-style:none; }
.chips li { margin:0; }
.chip {
  display:inline-flex; align-items:center; min-height:26px; padding:3px 11px;
  border:1px solid var(--c-border); border-radius:var(--r-pill);
  background:var(--c-panel); color:var(--c-muted); box-shadow:var(--shadow-chip);
  font:var(--weight-medium) 12px/1.4 var(--f-mono); max-width:100%; overflow-wrap:anywhere;
}
.hero h1 { margin:0; font-size:clamp(30px,3.4vw,48px); font-weight:var(--weight-display); line-height:1.14; letter-spacing:var(--tracking-hero); }
.h1-line { display:block; white-space:nowrap; }
.hl {
  color:inherit; padding:0 .08em; margin:0 -.04em; border-radius:var(--r-small);
  background:linear-gradient(to top,var(--c-accent-wash) 0,var(--c-accent-wash) 36%,var(--c-clear) 36%);
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.lede { margin:28px 0 0; max-width:31em; font-size:17px; line-height:1.72; color:var(--c-muted); }
.lede strong { color:var(--c-text); font-weight:var(--weight-strong); }
.platforms { display:flex; flex-wrap:wrap; gap:12px 26px; margin:30px 0 0; padding:0; list-style:none; }
.platforms li { margin:0; }
.platform { display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:var(--weight-medium); line-height:1; color:var(--c-muted); text-decoration:none; }
.platform:hover { color:var(--c-accent-dark); }
.platform svg { width:15px; height:15px; flex-shrink:0; }
.platform .ic-linux { width:13px; height:15px; }
.hero-stage {
  position:absolute; z-index:1; top:4px; right:0; bottom:28px; width:56%;
  border-radius:var(--r-tray) 0 0 var(--r-tray);
  background:var(--c-panel-2); color:var(--c-text); box-shadow:inset 0 1px 0 var(--c-tray-hi);
  overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.wave-right { position:absolute; top:-50px; right:-60px; width:780px; height:440px; max-width:none; pointer-events:none; }
.wave-right path { fill:var(--c-wave-soft); }
.rig { position:relative; flex:none; margin:0; width:748px; height:410px; transform:scale(var(--rig-scale)); }
.rig svg { max-width:none; }
.laptop { position:absolute; left:108px; top:20px; width:640px; height:373px; }
.lid {
  position:absolute; left:40px; top:0; width:560px; height:360px; padding:10px;
  border-radius:var(--r-lid) var(--r-lid) var(--r-small) var(--r-small);
  background:linear-gradient(180deg,var(--c-alu-hi) 0,var(--c-alu) 62%,var(--c-alu-lo) 100%); color:var(--c-text);
  box-shadow:inset 0 0 0 1px var(--c-alu-edge),var(--shadow-screen);
}
.cam { position:absolute; top:4px; left:50%; width:4px; height:4px; margin-left:-2px; border-radius:var(--r-circle); background:var(--c-bezel-hi); color:var(--c-white); }
.screen { height:100%; padding:12px 14px; border-radius:var(--r-screen); overflow:hidden; background:linear-gradient(150deg,var(--c-wall-a),var(--c-wall-b)); color:var(--c-text); box-shadow:inset 0 0 0 1px var(--c-screen-edge); }
.deck { position:absolute; left:0; top:360px; width:640px; height:13px; border-radius:var(--r-deck); background:linear-gradient(180deg,var(--c-alu-hi) 0,var(--c-alu) 35%,var(--c-alu-lo) 100%); color:var(--c-text); box-shadow:var(--shadow-base-near),var(--shadow-base-far); }
.deck::before { content:""; position:absolute; top:0; left:50%; width:92px; height:5px; margin-left:-46px; border-radius:var(--r-notch); background:linear-gradient(180deg,var(--c-alu-lo),var(--c-alu)); }
.deck::after { content:""; position:absolute; left:3%; right:3%; bottom:-16px; height:18px; background:radial-gradient(ellipse at center,var(--c-floor) 0,var(--c-clear) 70%); }
.win { height:100%; display:flex; flex-direction:column; overflow:hidden; border-radius:var(--r-win); background:var(--c-panel); color:var(--c-text); box-shadow:var(--shadow-window); }
.win-title { position:relative; flex:none; height:26px; display:flex; align-items:center; padding:0 10px; background:linear-gradient(180deg,var(--c-panel),var(--c-chrome)); color:var(--c-text); border-bottom:1px solid var(--c-border); }
.lights { position:relative; z-index:1; display:flex; gap:6px; }
.lights i { display:block; width:9px; height:9px; border-radius:var(--r-circle); flex-shrink:0; }
.lights .l-close { background:var(--c-error); }
.lights .l-min { background:var(--c-dot-idle); }
.lights .l-max { background:var(--c-success); }
.win-name { position:absolute; inset-inline:0; text-align:center; font-size:11.5px; font-weight:var(--weight-strong); color:var(--c-text); letter-spacing:-.01em; }
.win-menu { flex:none; display:flex; align-items:center; gap:16px; height:24px; margin:0; padding:0 12px; list-style:none; background:var(--c-chrome); border-bottom:1px solid var(--c-border); font-size:11px; color:var(--c-text); }
.win-menu li { margin:0; }
.win-body { flex:1; display:flex; min-height:0; }
.win-side { flex:none; width:92px; padding:10px 8px; display:flex; flex-direction:column; gap:7px; background:var(--c-chrome-2); color:var(--c-text); border-right:1px solid var(--c-border); }
.side-label { padding-left:4px; font-size:9.5px; font-weight:var(--weight-medium); letter-spacing:.04em; color:var(--c-muted); }
.group-pill { display:block; padding:5px 10px; border-radius:var(--r-pill); background:var(--c-accent-tint); color:var(--c-accent-dark); box-shadow:inset 0 0 0 1px var(--c-accent-ring); font-size:11px; font-weight:var(--weight-strong); line-height:1.2; }
.win-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.cols,.skel-row { display:grid; grid-template-columns:44px 1.3fr 1.5fr 44px 64px 36px; gap:10px; align-items:center; padding:0 12px; }
.cols { flex:none; height:26px; border-bottom:1px solid var(--c-border); font-size:10px; font-weight:var(--weight-medium); color:var(--c-muted); white-space:nowrap; }
.skel-row { flex:none; height:24px; border-bottom:1px solid var(--c-skeleton-2); }
.skel-row i { display:block; height:5px; border-radius:var(--r-pill); background:var(--c-skeleton); }
.skel-row i:nth-child(1) { width:70%; }
.skel-row i:nth-child(2) { width:82%; }
.skel-row i:nth-child(3) { width:64%; }
.skel-row i:nth-child(4) { width:80%; }
.skel-row i:nth-child(5) { width:58%; }
.skel-row i:nth-child(6) { width:66%; }
.skel-row:nth-child(3) { opacity:.68; }
.skel-row:nth-child(3) i:nth-child(2) { width:60%; }
.skel-row:nth-child(3) i:nth-child(3) { width:76%; }
.skel-row:nth-child(4) { opacity:.4; border-bottom-color:var(--c-clear); }
.skel-row:nth-child(4) i:nth-child(2) { width:72%; }
.skel-row:nth-child(4) i:nth-child(3) { width:52%; }
.empty { flex:1; display:flex; align-items:center; justify-content:center; }
.import { display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 14px; border:1px solid var(--c-border-strong); border-radius:var(--r-pill); background:var(--c-panel); box-shadow:var(--shadow-chip); font-size:11px; font-weight:var(--weight-strong); color:var(--c-text); white-space:nowrap; }
.import svg { width:12px; height:12px; color:var(--c-muted); flex-shrink:0; }
.win-status { flex:none; height:32px; display:flex; align-items:center; gap:6px; padding:0 10px; background:var(--c-chrome); color:var(--c-text); border-top:1px solid var(--c-border); }
.drop { display:inline-flex; align-items:center; gap:5px; height:20px; padding:0 8px 0 9px; border:1px solid var(--c-border-strong); border-radius:var(--r-pill); background:var(--c-panel); white-space:nowrap; font:var(--weight-medium) 9.5px/1 var(--f-mono); color:var(--c-text); }
.drop b { font-weight:var(--weight-medium); color:var(--c-muted); }
.drop svg { width:8px; height:8px; color:var(--c-muted); }
.phone { position:absolute; z-index:2; left:0; top:48px; width:176px; height:352px; padding:6px; border-radius:var(--r-phone); background:var(--c-bezel); color:var(--c-white); box-shadow:inset 0 0 0 1px var(--c-bezel-hi),var(--shadow-phone); }
.phone::after { content:""; position:absolute; right:-2px; top:96px; width:3px; height:40px; border-radius:var(--r-phone-key); background:var(--c-bezel-hi); }
.phone-screen { position:relative; height:100%; overflow:hidden; border-radius:var(--r-phone-screen); background:var(--c-panel); color:var(--c-text); display:flex; flex-direction:column; }
.p-status { position:relative; flex:none; height:22px; display:flex; align-items:center; justify-content:flex-end; gap:4px; padding:0 14px; color:var(--c-text); }
.p-status svg { width:10px; height:8px; }
.p-status .ic-batt { width:14px; }
.p-cam { position:absolute; top:7px; left:50%; width:8px; height:8px; margin-left:-4px; border-radius:var(--r-circle); background:var(--c-bezel); box-shadow:inset 0 0 0 1.5px var(--c-bezel-hi); }
.p-bar { flex:none; height:40px; display:flex; align-items:center; gap:10px; padding:0 12px; border-bottom:1px solid var(--c-border); color:var(--c-muted); }
.p-bar svg { width:14px; height:14px; flex-shrink:0; }
.p-title { flex:1; font-size:14px; font-weight:var(--weight-bold); letter-spacing:-.01em; color:var(--c-text); }
.p-section { margin:0; padding:12px 12px 4px; font-size:9.5px; font-weight:var(--weight-strong); letter-spacing:.04em; color:var(--c-muted); }
.p-rows { margin:0; padding:0 12px; list-style:none; }
.p-rows li { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:42px; margin:0; border-bottom:1px solid var(--c-skeleton-2); font-size:10.5px; font-weight:var(--weight-medium); line-height:1.3; color:var(--c-text); }
.p-rows li:last-child { border-bottom:0; }
.tog { position:relative; flex-shrink:0; display:block; width:26px; height:14px; border-radius:var(--r-pill); background:var(--c-track-off); }
.tog::after { content:""; position:absolute; top:2px; left:2px; width:10px; height:10px; border-radius:var(--r-circle); background:var(--c-white); box-shadow:var(--shadow-knob); }
.tog.is-on { background:var(--c-accent); }
.tog.is-on::after { left:14px; }
.p-foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; padding:0 12px 18px; }
.p-state { display:inline-flex; align-items:center; gap:7px; font-size:10px; font-weight:var(--weight-medium); color:var(--c-muted); }
.dot-warn { display:block; width:7px; height:7px; flex-shrink:0; border-radius:var(--r-circle); background:var(--c-warn); box-shadow:0 0 0 3px var(--c-warn-ring); }
.fab { display:grid; place-items:center; width:44px; height:44px; border-radius:var(--r-circle); background:linear-gradient(145deg,var(--c-accent),var(--c-accent-dark)); box-shadow:var(--shadow-fab); color:var(--c-white); }
.fab svg { width:18px; height:18px; }
.p-home { position:absolute; bottom:6px; left:50%; width:48px; height:3px; margin-left:-24px; border-radius:var(--r-pill); background:var(--c-home); }
.protocols { position:relative; z-index:1; padding:72px var(--gutter) 128px; text-align:center; }
.protocols h2 { margin:0; font-size:var(--fs-h2); line-height:1.2; letter-spacing:var(--tracking-title); }
.marks { display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:28px 68px; margin:60px auto 0; padding:0; list-style:none; }
.marks li { margin:0; }
.marks+.marks { margin-top:34px; }
.wm { font-family:var(--f-display); font-size:34px; line-height:1; color:var(--c-text); }
.wm-vmess { font-weight:var(--weight-heavy); letter-spacing:-.03em; }
.wm-vless { font-weight:var(--weight-display); font-size:30px; letter-spacing:.08em; }
.wm-trojan { font-weight:var(--weight-strong); letter-spacing:-.01em; color:var(--c-muted); }
.wm-ss { font-weight:var(--weight-medium); letter-spacing:-.025em; }
.wm-reality { font-family:var(--f-mono); font-weight:var(--weight-bold); font-size:28px; letter-spacing:.12em; color:var(--c-muted); }
.wm-xray { font-weight:var(--weight-display); font-size:38px; letter-spacing:-.05em; }
.wm-v2fly { font-weight:var(--weight-heavy); letter-spacing:-.02em; }
.wm-v2fly span { color:var(--c-muted); }

/* Tab 的无脚本状态保留首个面板；JS 负责其余面板与键盘行为。 */
.tabs { min-width:0; }
.tab-list,[role="tablist"] { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.tab,[role="tab"] {
  position:relative; min-height:48px; padding:12px 24px; border:1px solid var(--c-border);
  border-radius:var(--r-pill); background:var(--c-panel); color:var(--c-muted);
  font-weight:var(--weight-medium); line-height:1.4; flex-shrink:0;
}
.tab[aria-selected="true"],[role="tab"][aria-selected="true"] { background:var(--c-accent-tint); color:var(--c-accent-dark); border-color:var(--c-accent-ring); font-weight:var(--weight-bold); }
.tab-panel,[role="tabpanel"] { min-width:0; }
.settings-tabs { display:grid; grid-template-columns:minmax(210px,.7fr) minmax(0,1.3fr); gap:56px; }
.settings-tabs [role="tablist"] { align-self:start; display:flex; flex-direction:column; align-items:stretch; gap:16px; margin:12px 0 0; }
.settings-tabs [role="tab"] { text-align:left; border:0; border-radius:var(--r-small); background:var(--c-clear); color:var(--c-muted); font-size:var(--fs-h3); padding:16px 24px; }
.settings-tabs [role="tab"][aria-selected="true"] { background:var(--c-clear); color:var(--c-text); }
.settings-tabs [role="tab"][aria-selected="true"]::before { content:""; position:absolute; left:0; top:25%; bottom:25%; width:4px; border-radius:var(--r-pill); background:var(--c-accent); }
.settings-tabs .tab-panel { margin-top:40px; padding:32px; border:1px solid var(--c-border); border-radius:var(--r-card); background:var(--c-panel); color:var(--c-text); box-shadow:var(--shadow-panel); }
.settings-mini { padding:20px; margin-bottom:28px; border:1px solid var(--c-border); border-radius:var(--r-win); background:var(--c-chrome-2); color:var(--c-text); }
.settings-mini-title { padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--c-border); font-weight:var(--weight-strong); }
.settings-line { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:12px; font-size:var(--fs-small); }
.settings-line>* { min-width:0; }
.setting-value { color:var(--c-accent-dark); font-weight:var(--weight-medium); }
.toc { display:flex; flex-wrap:wrap; gap:8px; padding:16px; margin-block:32px; border:1px solid var(--c-border); border-radius:var(--r-card); background:var(--c-panel); color:var(--c-text); }
.toc a { display:block; padding:10px 16px; border-radius:var(--r-pill); text-decoration:none; color:var(--c-muted); font-size:var(--fs-small); }
.toc a:hover,.toc a[aria-current="location"] { background:var(--c-accent-tint); color:var(--c-accent-dark); }
.toc-sticky { position:sticky; top:16px; z-index:5; }
.faq-item { padding:0 28px; border:1px solid var(--c-border); border-radius:var(--r-card); background:var(--c-panel); color:var(--c-text); }
.faq-item+.faq-item { margin-top:14px; }
.faq-item summary { position:relative; list-style:none; padding:24px 32px 24px 0; font-weight:var(--weight-strong); line-height:1.6; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; position:absolute; right:0; top:24px; color:var(--c-accent-dark); }
.faq-item[open] summary::after { content:"−"; }
.faq-answer { padding-bottom:24px; color:var(--c-muted); }
.faq-answer p:last-child { margin-bottom:0; }
.term-card { scroll-margin-top:24px; }
.term-card dt { font-family:var(--f-display); font-size:var(--fs-h3); font-weight:var(--weight-bold); }
.term-card dd { margin:16px 0 0; color:var(--c-muted); }
.term-meta { display:block; margin-top:6px; font:var(--weight-medium) var(--fs-caption)/1.5 var(--f-mono); color:var(--c-muted); }
.client-heading { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.client-heading h3 { margin:0; }
.client-card .button-row { margin-top:24px; }
.badges { display:flex; flex-wrap:wrap; gap:8px; }
.badge,.tag { display:inline-block; max-width:100%; padding:5px 12px; border:1px solid var(--c-border); border-radius:var(--r-pill); background:var(--c-panel-2); color:var(--c-muted); font-size:var(--fs-caption); font-weight:var(--weight-strong); line-height:1.5; overflow-wrap:anywhere; vertical-align:middle; }
.badge-first { background:var(--c-accent-tint); color:var(--c-accent-dark); border-color:var(--c-accent-ring); }
.badge-recommended { background:var(--c-panel-2); color:var(--c-text); }
.badge-retired { background:var(--c-chrome); color:var(--c-muted); border-style:dashed; }
.article-card { display:flex; flex-direction:column; gap:18px; }
.article-card h3 { margin:0; }
.article-card h3 a { color:var(--c-text); text-decoration:none; }
.article-card h3 a:hover { color:var(--c-accent-dark); }
.article-meta { display:flex; align-items:center; flex-wrap:wrap; gap:12px; color:var(--c-muted); font-size:var(--fs-caption); }
.article-card p { color:var(--c-muted); margin:0; }
.article-card .article-link { align-self:flex-start; margin-top:auto; font-size:var(--fs-small); }
.callout { margin:28px 0; padding:24px 28px; border:1px solid var(--c-border); border-left:4px solid var(--c-accent); border-radius:var(--r-win); background:var(--c-panel-2); color:var(--c-text); }
.callout p:last-child { margin-bottom:0; }
.callout-title { display:block; margin-bottom:8px; font-weight:var(--weight-bold); }
.table-scroll { width:100%; max-width:100%; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--c-border); border-radius:var(--r-win); }
.data-table { width:100%; border-collapse:collapse; text-align:left; background:var(--c-panel); color:var(--c-text); }
.data-table th,.data-table td,.prose table th,.prose table td {
  min-width:7em; padding:16px 20px; border-bottom:1px solid var(--c-border);
  overflow-wrap:normal; word-break:normal; vertical-align:top; font-size:var(--fs-small);
}
.data-table th,.prose table th { background:var(--c-panel-2); color:var(--c-text); font-weight:var(--weight-strong); }
.data-table tr:last-child td { border-bottom:0; }
.prose table { display:block; max-width:100%; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; border-collapse:collapse; background:var(--c-panel); color:var(--c-text); text-align:left; }
.data-table code,.prose table code { overflow-wrap:anywhere; }
.dl-fab {
  position:fixed; z-index:15; right:24px; bottom:24px;
  display:inline-flex; align-items:center; gap:12px; max-width:calc(100% - 40px);
  min-height:56px; padding:12px 24px; border-radius:var(--r-pill);
  background:var(--c-text); color:var(--c-white); box-shadow:var(--shadow-btn);
  text-decoration:none; font-size:var(--fs-small); font-weight:var(--weight-strong);
}
.dl-fab svg { width:20px; height:20px; flex-shrink:0; }
.dl-fab:hover { color:var(--c-white); box-shadow:var(--shadow-btn-hover); }
.article-download { margin-block:40px; padding:32px; border-radius:var(--r-card); background:var(--c-panel-2); color:var(--c-text); }
.article-download h2 { font-size:var(--fs-h3); margin:0 0 12px; }
.article-download .btn { margin-top:8px; }

/* 预览页的令牌与状态展台，正式页面无需复制。 */
.preview-section { padding-top:80px; padding-bottom:80px; }
.swatch-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.swatch { min-width:0; margin:0; border:1px solid var(--c-border); border-radius:var(--r-win); overflow:hidden; background:var(--c-panel); color:var(--c-text); }
.swatch-sample { height:72px; border-bottom:1px solid var(--c-border); }
.swatch figcaption { padding:12px; font:var(--weight-medium) 11px/1.7 var(--f-mono); overflow-wrap:anywhere; }
.sw-bg { background:var(--c-bg); }
.sw-panel { background:var(--c-panel); }
.sw-panel-2 { background:var(--c-panel-2); }
.sw-border { background:var(--c-border); }
.sw-border-strong { background:var(--c-border-strong); }
.sw-accent { background:var(--c-accent); }
.sw-accent-dark { background:var(--c-accent-dark); }
.sw-text { background:var(--c-text); }
.sw-muted { background:var(--c-muted); }
.sw-faint { background:var(--c-faint); }
.sw-success { background:var(--c-success); }
.sw-warn { background:var(--c-warn); }
.sw-error { background:var(--c-error); }
.sw-white { background:var(--c-white); }
.sw-clear { background:var(--c-clear); }
.sw-accent-tint { background:var(--c-accent-tint); }
.sw-accent-ring { background:var(--c-accent-ring); }
.sw-accent-wash { background:var(--c-accent-wash); }
.sw-warn-ring { background:var(--c-warn-ring); }
.sw-chrome { background:var(--c-chrome); }
.sw-chrome-2 { background:var(--c-chrome-2); }
.sw-skeleton { background:var(--c-skeleton); }
.sw-skeleton-2 { background:var(--c-skeleton-2); }
.sw-track-off { background:var(--c-track-off); }
.sw-dot-idle { background:var(--c-dot-idle); }
.sw-alu-hi { background:var(--c-alu-hi); }
.sw-alu { background:var(--c-alu); }
.sw-alu-lo { background:var(--c-alu-lo); }
.sw-alu-edge { background:var(--c-alu-edge); }
.sw-bezel { background:var(--c-bezel); }
.sw-bezel-hi { background:var(--c-bezel-hi); }
.sw-wall-a { background:var(--c-wall-a); }
.sw-wall-b { background:var(--c-wall-b); }
.sw-screen-edge { background:var(--c-screen-edge); }
.sw-home { background:var(--c-home); }
.sw-wave { background:var(--c-wave); }
.sw-wave-soft { background:var(--c-wave-soft); }
.sw-floor { background:var(--c-floor); }
.sw-tray-hi { background:var(--c-tray-hi); }
.sw-veil { background:var(--c-veil); }
.type-sample { padding-block:24px; border-bottom:1px solid var(--c-border); }
.type-display { font-size:var(--fs-h1); font-family:var(--f-display); font-weight:var(--weight-display); line-height:1.2; }
.preview-footer { margin-top:80px; }
.preview-language summary { list-style:none; }
.preview-language summary::-webkit-details-marker { display:none; }
.preview-menu { display:none; }
@media (max-width:1280px) {
  .preview-menu { display:block; }
  .preview-menu summary { list-style:none; }
  .preview-menu[open] .preview-drawer { display:block; }
  .preview-drawer { position:absolute; inset-inline:0; top:100%; padding:16px var(--gutter); max-height:calc(100dvh - var(--nav-h)); overflow:auto; background:var(--c-panel); color:var(--c-text); border-bottom:1px solid var(--c-border); box-shadow:var(--shadow-panel); }
  .preview-drawer a { display:block; min-height:48px; padding:12px 16px; text-decoration:none; color:var(--c-muted); }
}
@media (max-width:1100px) {
  :root { --rig-scale:.82; }
  .hero { height:auto; }
  .hero-copy { width:auto; height:auto; padding:56px var(--gutter) 48px; }
  .hero-stage { position:relative; top:auto; right:auto; bottom:auto; width:auto; height:420px; margin:0 24px; border-radius:var(--r-tray); }
}
@media (max-width:800px) {
  .settings-tabs { grid-template-columns:minmax(0,1fr); gap:16px; }
  .settings-tabs [role="tablist"] { flex-direction:row; overflow-x:auto; flex-wrap:nowrap; padding-bottom:10px; margin:0; }
  .settings-tabs [role="tab"] { font-size:var(--fs-body); border-radius:var(--r-pill); padding:12px 20px; }
  .settings-tabs [role="tab"][aria-selected="true"] { background:var(--c-accent-tint); color:var(--c-accent-dark); }
  .settings-tabs [role="tab"][aria-selected="true"]::before { display:none; }
  .settings-tabs .tab-panel { margin-top:0; padding:24px; }
  .swatch-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:768px) {
  .hero h1 { font-size:clamp(24px,4vw,30px); letter-spacing:var(--tracking-title); }
}
@media (max-width:720px) {
  :root { --rig-scale:.44; }
  .hero-copy { padding:36px var(--gutter); }
  .hero .cta { gap:10px; }
  .hero .btn { flex:1 1 100%; min-height:50px; }
  .lede { font-size:16px; }
  .hero-stage { height:260px; margin:0 12px; }
  .protocols { padding:64px var(--gutter) 96px; }
  .marks { gap:20px 32px; margin-top:40px; }
  .wm { font-size:24px; }
  .wm-vless { font-size:22px; }
  .wm-reality { font-size:20px; }
  .wm-xray { font-size:27px; }
}
@media (max-width:640px) {
  .platforms { gap:16px 20px; }
  .swatch-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .faq-item { padding-inline:20px; }
  .tab-list { flex-wrap:nowrap; overflow-x:auto; padding-bottom:8px; }
  .dl-fab { right:20px; bottom:20px; }
  .article-download { padding:24px; }
  .settings-mini { padding:14px; }
  .settings-line { flex-wrap:wrap; gap:8px; }
}
@media (max-width:360px) {
  :root { --rig-scale:.38; }
  .hero h1 { font-size:24px; }
  .hero-copy { padding-right:16px; }
}