:root {
  --bg:#FBFBF9;
  --bg-panel:#FFFFFF;
  --bg-panel-2:#F3F3F0;
  --line:#E6E5E0;
  --line-strong:#D9D8D2;
  --accent:#EE9B10;
  --accent-dark:#C97A06;
  --text:#191815;
  --text-muted:#6B6A64;
  --text-faint:#6B6A64;
  --success:#2F9E5B;
  --warn:#B7791F;
  --error:#D2463B;
  --ink:#161512;
  --on-dark:#FBFBF9;
  --on-accent:#191815;
  --clear:transparent;
  --dot-close:#E9695F;
  --dot-min:#E8B54A;
  --dot-max:#5BB872;
  --accent-grad:linear-gradient(180deg,var(--accent) 0%,var(--accent-dark) 100%);
  --accent-grad-x:linear-gradient(90deg,var(--accent) 0%,var(--accent-dark) 100%);
  --accent-ring:rgba(238,155,16,.18);
  --glow-amber:rgba(238,155,16,.09);
  --spot:rgba(255,255,255,.96);
  --spot-fade:rgba(255,255,255,0);
  --hl-row:rgba(25,24,21,.035);
  --veil:rgba(25,24,21,.30);
  --success-ring:rgba(47,158,91,.15);
  --shadow-xs:0 1px 2px rgba(25,24,21,.06);
  --shadow-sm:0 1px 2px rgba(25,24,21,.05),0 6px 16px rgba(25,24,21,.05);
  --shadow-pop:0 2px 6px rgba(25,24,21,.06),0 18px 40px rgba(25,24,21,.12);
  --shadow-btn:inset 0 1px 0 rgba(255,255,255,.32),0 1px 2px rgba(201,122,6,.30),0 10px 26px rgba(201,122,6,.22);
  --shadow-btn-hover:inset 0 1px 0 rgba(255,255,255,.32),0 2px 4px rgba(201,122,6,.30),0 14px 32px rgba(201,122,6,.28);
  --shadow-win:0 2px 6px rgba(25,24,21,.06),0 40px 90px rgba(25,24,21,.13);
  --shadow-knob:0 1px 3px rgba(25,24,21,.22),0 0 0 .5px rgba(25,24,21,.06);
  --track-inset:inset 0 1px 2px rgba(25,24,21,.10);
  --dot-inset:inset 0 0 0 .5px rgba(25,24,21,.12);
  --edge-light:inset 0 1px 0 rgba(255,255,255,.9);
  --font-display:"Inter","Noto Sans SC",-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  --font-body:"Inter","Noto Sans SC",-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --fs-11:11px;
  --fs-115:11.5px;
  --fs-12:12px;
  --fs-125:12.5px;
  --fs-13:13px;
  --fs-135:13.5px;
  --fs-14:14px;
  --fs-145:14.5px;
  --fs-15:15px;
  --fs-155:15.5px;
  --fs-16:16px;
  --fs-17:17px;
  --fs-18:18px;
  --fs-20:20px;
  --fs-22:22px;
  --fs-26:26px;
  --fs-30:30px;
  --fs-h1:clamp(34px,3.35vw,48px);
  --fs-h1-mobile:clamp(24px,4.7vw,30px);
  --r-xs:6px;
  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --r-xl:28px;
  --r-pill:999px;
  --r-circle:50%;
  --wrap:1200px;
  --reading:780px;
  --header-wrap:1280px;
  --gutter:32px;
  --header-height:68px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --fast:180ms;
  --reveal-time:600ms;
}
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:24px; }
html.nav-open { overflow:hidden; }
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-16);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body,main,section,article,aside,nav,header,footer,div { min-width:0; }
img,svg,video { max-width:100%; }
img { height:auto; }
svg { display:block; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
button,a,input,select,textarea { -webkit-tap-highlight-color:var(--accent-ring); }
button { border:0; }
[hidden] { display:none !important; }
:focus-visible { outline:2px solid var(--accent-dark); outline-offset:3px; border-radius:var(--r-xs); }
::selection { background:var(--accent-ring); color:var(--text); }
h1,h2,h3,h4 { font-family:var(--font-display); text-wrap:balance; }
h1 { font-size:var(--fs-h1); line-height:1.2; font-weight:900; letter-spacing:-.02em; }
h2,.h2 { margin:0; font-size:var(--fs-30); line-height:1.25; font-weight:800; letter-spacing:-.02em; }
h3 { font-size:var(--fs-20); line-height:1.4; letter-spacing:-.01em; }
p { margin:0 0 1.2em; }
strong { font-weight:650; }
code,kbd,pre { font-family:var(--font-mono); }
code { overflow-wrap:anywhere; }
pre {
  max-width:100%;
  overflow-x:auto;
  padding:20px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--bg-panel-2);
  color:var(--text);
  font-size:var(--fs-13);
  line-height:1.8;
  tab-size:2;
}
pre code { overflow-wrap:normal; word-break:normal; white-space:pre; }
hr { border:0; border-top:1px solid var(--line); margin:32px 0; }
.shell,.wrap {
  width:100%;
  max-width:calc(var(--wrap) + var(--gutter)*2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.reading { max-width:calc(var(--reading) + var(--gutter)*2); }
.section { padding-top:80px; padding-bottom:80px; }
.stack > * + * { margin-top:24px; }
.grid { display:grid; gap:24px; }
.grid > *,.flex > * { min-width:0; }
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.flex { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.nowrap { white-space:nowrap; }
.muted { color:var(--text-muted); }
.small { font-size:var(--fs-13); }
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
.icon { width:20px; height:20px; flex-shrink:0; }
.skip-link {
  position:fixed;
  top:8px;
  left:16px;
  z-index:100;
  padding:10px 16px;
  transform:translateY(-150%);
  background:var(--bg-panel);
  color:var(--text);
  border-radius:var(--r-sm);
}
.skip-link:focus { transform:none; }
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:50px;
  padding:12px 26px;
  border:1px solid var(--clear);
  border-radius:var(--r-pill);
  font-family:var(--font-body);
  font-size:var(--fs-16);
  line-height:1.35;
  font-weight:700;
  letter-spacing:-.005em;
  text-align:center;
  transition:transform var(--fast) ease,box-shadow var(--fast) ease,background-color var(--fast) ease;
}
.btn svg { width:17px; height:17px; flex-shrink:0; }
.btn-main { background:var(--accent-grad); color:var(--on-accent); box-shadow:var(--shadow-btn); }
.btn-main:hover,.btn-main.is-hover { transform:translateY(-1px); box-shadow:var(--shadow-btn-hover); }
.btn-main:active,.btn-main.is-pressed { transform:translateY(1px); box-shadow:var(--shadow-xs); }
.btn-ghost { background:var(--bg-panel); color:var(--text); border-color:var(--line-strong); box-shadow:var(--shadow-xs); font-weight:600; }
.btn-ghost:hover { background:var(--bg-panel-2); color:var(--text); }
.btn-ghost svg { color:var(--text-muted); }
.btn-small { min-height:40px; padding:8px 18px; font-size:var(--fs-14); }
.btn:disabled,.btn[aria-disabled="true"] { cursor:not-allowed; background:var(--bg-panel-2); color:var(--text-muted); box-shadow:none; transform:none; border-color:var(--line); }
.text-link { text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:4px; }
.text-link:hover { text-decoration-color:var(--text); }
.card,.panel { padding:28px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg-panel); color:var(--text); box-shadow:var(--shadow-sm); }
.panel { padding:48px; border-radius:var(--r-xl); }
.panel-soft { background:var(--bg-panel-2); color:var(--text); box-shadow:none; }
.card h3 { margin:0 0 10px; }
.card p:last-child { margin-bottom:0; }
.dark-band { background:var(--ink); color:var(--on-dark); padding-top:80px; padding-bottom:80px; }
.dark-band p { color:var(--on-dark); max-width:760px; }
.dark-band a { text-decoration:underline; text-underline-offset:4px; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; margin:0 0 12px; font-family:var(--font-mono); font-size:var(--fs-12); color:var(--text-muted); }
.eyebrow::before { content:""; width:16px; height:2px; flex-shrink:0; border-radius:var(--r-xs); background:var(--accent-grad-x); }
.dark-band .eyebrow { color:var(--on-dark); }
.prose,.article-body { overflow-wrap:break-word; }
.prose h2,.article-body h2 { margin-top:2.4em; margin-bottom:.8em; scroll-margin-top:28px; }
.prose h3,.article-body h3 { margin-top:1.8em; margin-bottom:.7em; scroll-margin-top:28px; }
.prose p,.article-body p { line-height:1.9; }
.prose li,.article-body li { margin-block:.5em; }
.prose a,.article-body a { text-decoration:underline; text-underline-offset:3px; }
.prose :not(pre) > code,.article-body :not(pre) > code { padding:2px 5px; border-radius:var(--r-xs); background:var(--bg-panel-2); color:var(--text); font-size:.9em; }
.reveal { opacity:1; }
.reveal-ready .reveal { opacity:0; transform:translateY(16px); transition:opacity var(--reveal-time) var(--ease),transform var(--reveal-time) var(--ease); }
.reveal-ready .reveal.shown { opacity:1; transform:none; }

/* 独立的宽页头版心，不复用阅读版心。 */
#site-header,.topbar { position:relative; z-index:50; }
.topbar-in {
  width:100%;
  max-width:min(100%,calc(var(--header-wrap) + var(--gutter)*2));
  height:var(--header-height);
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand { display:inline-flex; align-items:center; gap:10px; flex-shrink:0; font-weight:700; font-size:var(--fs-17); letter-spacing:-.01em; }
.brand img { width:32px; height:32px; flex-shrink:0; }
.navset { min-width:0; }
.navset > ul { display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0; }
.navlink,.more-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:36px;
  padding:8px 14px;
  border-radius:var(--r-pill);
  font-family:var(--font-body);
  font-size:var(--fs-15);
  line-height:1.3;
  font-weight:500;
  color:var(--text);
  background:var(--clear);
  white-space:nowrap;
}
.navlink:hover,.more-btn:hover { background:var(--bg-panel-2); color:var(--text); }
.navlink[aria-current="page"],.more-btn.is-current { font-weight:700; }
.navlink[aria-current="page"]::after,.more-btn.is-current::after { content:""; width:5px; height:5px; flex-shrink:0; border-radius:var(--r-circle); background:var(--accent-grad); }
.nav-more,.language-picker { position:relative; }
.more-btn svg { width:12px; height:12px; flex-shrink:0; color:var(--text-muted); }
.more-menu,.language-menu {
  position:absolute;
  top:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%);
  width:260px;
  padding:8px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--bg-panel);
  color:var(--text);
  box-shadow:var(--shadow-pop);
  z-index:4;
}
.more-label { display:block; padding:8px 12px 4px; font-size:var(--fs-11); letter-spacing:.08em; color:var(--text-muted); font-weight:600; }
.more-item { display:block; padding:10px 12px; border-radius:var(--r-md); }
.more-item:hover,.language-menu a:hover { background:var(--bg-panel-2); color:var(--text); }
.more-item b { display:block; font-size:var(--fs-145); font-weight:600; line-height:1.3; }
.more-item small { display:block; font-size:var(--fs-125); color:var(--text-muted); line-height:1.4; margin-top:2px; }
.more-item[aria-current="page"] { box-shadow:inset 3px 0 0 var(--accent); }
.nav-side { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.lang-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:36px;
  padding:8px 14px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:var(--bg-panel);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-14);
  line-height:1.2;
  font-weight:500;
  box-shadow:var(--shadow-xs);
  white-space:nowrap;
}
.lang-btn svg { width:15px; height:15px; flex-shrink:0; color:var(--text-muted); }
.caret { color:var(--text-muted); font-size:var(--fs-11); }
.language-menu { left:auto; right:0; transform:none; width:180px; }
.language-menu a { display:flex; align-items:center; min-height:44px; padding:10px 12px; border-radius:var(--r-sm); }
.language-menu a[aria-current="true"] { font-weight:700; box-shadow:inset 3px 0 0 var(--accent); }
.menu-toggle { display:none; align-items:center; justify-content:center; min-width:44px; min-height:44px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg-panel); color:var(--text); }
.menu-toggle svg { width:20px; height:20px; }
.mobile-drawer,.nav-veil { display:none; }
.static-disclosure > summary { list-style:none; cursor:pointer; }
.static-disclosure > summary::-webkit-details-marker { display:none; }
.static-mobile { display:none; }

/* 已确认的首页首屏。 */
.hero { position:relative; isolation:isolate; padding-top:36px; text-align:center; overflow-x:clip; }
.hero::before {
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  top:-140px;
  width:1280px;
  height:760px;
  transform:translateX(-50%);
  background:radial-gradient(closest-side,var(--spot) 0%,var(--spot) 38%,var(--spot-fade) 100%);
  pointer-events:none;
}
.tag { display:inline-flex; align-items:center; gap:10px; min-height:32px; max-width:100%; padding:5px 14px 5px 12px; border:1px solid var(--line); border-radius:var(--r-pill); background:var(--bg-panel); color:var(--text-muted); box-shadow:var(--shadow-xs); font-size:var(--fs-135); font-weight:500; }
.tag-dot { width:8px; height:8px; flex-shrink:0; border-radius:var(--r-circle); background:var(--accent-grad); box-shadow:0 0 0 4px var(--accent-ring); }
.tag b { color:var(--text); font-weight:600; }
.tag-sep { color:var(--text-muted); }
.h1 { margin:20px auto 26px; font-family:var(--font-display); font-weight:900; font-size:var(--fs-h1); line-height:1.2; letter-spacing:-.02em; color:var(--text); }
.h1-line { display:block; }
.kw { position:relative; display:inline-block; white-space:nowrap; }
.kw-arc { position:absolute; left:-3%; bottom:-.2em; width:106%; height:.34em; overflow:visible; pointer-events:none; }
.arc-stop-a { stop-color:var(--accent); }
.arc-stop-b { stop-color:var(--accent-dark); }
.cta-row { display:flex; justify-content:center; align-items:center; gap:12px; flex-wrap:wrap; }
.lede { max-width:640px; margin:22px auto 20px; font-size:var(--fs-17); line-height:1.65; color:var(--text-muted); }
.lede strong { color:var(--text); font-weight:600; }
.plats { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.plat { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:36px; padding:7px 14px 7px 12px; border:1px solid var(--line); border-radius:var(--r-pill); background:var(--bg-panel); color:var(--text-muted); font-size:var(--fs-135); line-height:1.4; font-weight:500; }
.plat svg { width:15px; height:15px; flex-shrink:0; color:var(--text); }
.plat:hover { color:var(--text); border-color:var(--line-strong); box-shadow:var(--shadow-sm); }
.device { position:relative; margin:40px auto 0; max-width:1180px; }
.device::before { content:""; position:absolute; z-index:-1; left:6%; right:6%; top:-70px; height:300px; background:radial-gradient(50% 50% at 50% 60%,var(--glow-amber) 0%,var(--clear) 100%); pointer-events:none; }
.win { display:grid; grid-template-columns:216px minmax(0,1fr) 388px; min-height:560px; text-align:left; background:var(--bg-panel); color:var(--text); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow-win); overflow:hidden; }
.win > * { min-width:0; }
.side { background:var(--bg-panel-2); color:var(--text); border-right:1px solid var(--line); padding:18px 14px 16px; display:flex; flex-direction:column; }
.lights { display:flex; gap:8px; padding:0 6px; }
.lights i { width:12px; height:12px; flex-shrink:0; border-radius:var(--r-circle); box-shadow:var(--dot-inset); }
.lights .l-close { background:var(--dot-close); }
.lights .l-min { background:var(--dot-min); }
.lights .l-max { background:var(--dot-max); }
.side-app { margin:22px 8px 10px; font-size:var(--fs-115); font-weight:600; color:var(--text-muted); letter-spacing:.02em; }
.side-nav { list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.side-nav li { display:flex; align-items:center; gap:11px; min-height:36px; padding:6px 10px; border-radius:var(--r-sm); font-size:var(--fs-135); font-weight:500; color:var(--text-muted); }
.side-nav svg { width:16px; height:16px; flex-shrink:0; }
.side-nav .is-cur { background:var(--bg-panel); color:var(--text); font-weight:600; box-shadow:var(--shadow-xs),0 0 0 1px var(--line); }
.side-nav .is-cur svg { color:var(--accent-dark); }
.side-foot { margin-top:auto; padding:12px; border-radius:var(--r-md); background:var(--bg-panel); color:var(--text); border:1px solid var(--line); }
.core { display:flex; align-items:center; gap:8px; font-size:var(--fs-125); font-weight:600; }
.core-dot { width:7px; height:7px; flex-shrink:0; border-radius:var(--r-circle); background:var(--success); box-shadow:0 0 0 3px var(--success-ring); }
.core-addr { display:block; margin-top:4px; font-family:var(--font-mono); font-size:var(--fs-11); color:var(--text-muted); overflow-wrap:anywhere; }
.pane { padding:24px 30px 26px; }
.pane-top { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.pane-title { margin:0; font-size:var(--fs-26); font-weight:800; letter-spacing:-.02em; line-height:1.15; }
.pane-sub { margin:4px 0 0; font-size:var(--fs-125); color:var(--text-muted); }
.search { display:inline-flex; align-items:center; gap:7px; min-height:30px; padding:4px 12px; width:170px; border:1px solid var(--line); border-radius:var(--r-pill); background:var(--bg-panel-2); color:var(--text-muted); font-size:var(--fs-125); }
.search svg { width:13px; height:13px; flex-shrink:0; }
.grp-label { margin:0 0 7px 4px; font-size:var(--fs-115); font-weight:600; color:var(--text-muted); letter-spacing:.04em; }
.grp { border:1px solid var(--line); border-radius:var(--r-md); background:var(--bg-panel); color:var(--text); margin-bottom:16px; box-shadow:var(--shadow-xs); }
.row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 16px; min-height:52px; }
.row > * { min-width:0; }
.row + .row { border-top:1px solid var(--line); }
.row-name { display:block; font-size:var(--fs-135); font-weight:600; line-height:1.35; }
.row-desc { display:block; font-size:var(--fs-12); color:var(--text-muted); line-height:1.4; margin-top:1px; }
.tg { position:relative; flex-shrink:0; width:38px; height:22px; border-radius:var(--r-pill); background:var(--line-strong); box-shadow:var(--track-inset); }
.tg::after { content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:var(--r-circle); background:var(--bg-panel); box-shadow:var(--shadow-knob); }
.tg.is-on { background:var(--accent-grad); }
.tg.is-on::after { transform:translateX(16px); }
.port { display:inline-flex; align-items:center; gap:8px; min-height:30px; padding:4px 12px; flex-shrink:0; border-radius:var(--r-sm); border:1px solid var(--line-strong); background:var(--bg); color:var(--text); font-family:var(--font-mono); font-size:var(--fs-13); font-weight:500; }
.port small { font-size:var(--fs-11); color:var(--text-muted); }
.seg { display:inline-flex; flex-shrink:0; padding:3px; border-radius:var(--r-pill); background:var(--bg-panel-2); color:var(--text-muted); border:1px solid var(--line); }
.seg span { display:inline-flex; align-items:center; gap:5px; min-height:26px; padding:3px 13px; border-radius:var(--r-pill); font-size:var(--fs-125); font-weight:500; }
.seg .is-sel { background:var(--bg-panel); color:var(--text); font-weight:600; box-shadow:var(--shadow-xs),0 0 0 .5px var(--line); }
.seg .is-sel svg { width:12px; height:12px; flex-shrink:0; color:var(--accent-dark); }
.code-col { background:var(--bg); color:var(--text); border-left:1px solid var(--line); display:flex; flex-direction:column; overflow:auto; }
.code-head { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:8px 18px; border-bottom:1px solid var(--line); }
.file-tab { display:inline-flex; align-items:center; gap:8px; min-height:30px; padding:4px 12px; border-radius:var(--r-sm); background:var(--bg-panel); color:var(--text); border:1px solid var(--line); box-shadow:var(--shadow-xs); font-family:var(--font-mono); font-size:var(--fs-12); font-weight:500; }
.code-meta { font-family:var(--font-mono); font-size:var(--fs-11); color:var(--text-muted); }
.code { counter-reset:ln; list-style:none; margin:0; padding:14px 0 18px; font-family:var(--font-mono); font-size:var(--fs-125); line-height:22px; color:var(--text); overflow-x:auto; }
.code li { counter-increment:ln; white-space:pre; padding:0 18px 0 0; min-height:22px; }
.code li::before { content:counter(ln); display:inline-block; width:36px; margin-right:16px; text-align:right; color:var(--text-muted); }
.code li.is-hl { background:var(--hl-row); color:var(--text); }
.code .r { color:var(--accent-dark); font-weight:600; }
.code .v,.code .c { color:var(--text-muted); }
.code .c { font-style:italic; }
.slices { padding-top:88px; padding-bottom:104px; }
.slices-panel { background:var(--bg-panel-2); color:var(--text); border-radius:var(--r-xl); padding:56px 56px 52px; }
.slices-lede { margin:10px 0 32px; max-width:620px; color:var(--text-muted); font-size:var(--fs-16); }

.site-footer { padding-top:64px; padding-bottom:28px; border-top:1px solid var(--line); background:var(--bg-panel-2); color:var(--text); }
.footer-grid { display:grid; grid-template-columns:1.2fr .8fr 1.3fr .7fr; gap:36px; }
.footer-grid > * { min-width:0; }
.footer-intro { max-width:290px; margin:18px 0 0; color:var(--text-muted); font-size:var(--fs-14); }
.footer-title { margin:0 0 14px; font-size:var(--fs-14); font-weight:700; }
.footer-links { list-style:none; padding:0; margin:0; display:grid; gap:9px; font-size:var(--fs-14); color:var(--text-muted); }
.footer-links a { display:inline-block; padding-block:3px; overflow-wrap:anywhere; }
.footer-links a:hover { color:var(--text); text-decoration:underline; text-underline-offset:4px; }
.footer-links a[aria-current="true"] { color:var(--text); font-weight:700; }
.footer-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:40px; padding-top:22px; border-top:1px solid var(--line); color:var(--text-muted); font-size:var(--fs-13); }
.footer-bottom p { margin:0; }

@media (max-width:1120px) {
  .win { grid-template-columns:200px minmax(0,1fr) 330px; }
  .code { font-size:var(--fs-115); }
  .topbar-in { gap:16px; }
}
@media (max-width:1080px) {
  .navset { display:none; }
  .nav-side { margin-left:auto; }
  .menu-toggle { display:inline-flex; }
  .mobile-drawer {
    position:absolute;
    top:var(--header-height);
    left:0;
    right:0;
    z-index:3;
    padding:16px var(--gutter) 28px;
    background:var(--bg-panel);
    color:var(--text);
    border-top:1px solid var(--line);
    box-shadow:var(--shadow-pop);
    max-height:calc(100dvh - var(--header-height));
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .mobile-drawer:not([hidden]) { display:block; }
  .mobile-drawer ul { list-style:none; margin:0; padding:0; }
  .mobile-drawer a,.static-mobile nav a { display:flex; align-items:center; width:100%; min-height:44px; padding:12px 16px; border-radius:var(--r-sm); }
  .mobile-drawer a:hover,.static-mobile nav a:hover { background:var(--bg-panel-2); color:var(--text); }
  .mobile-drawer a[aria-current="page"],.mobile-drawer a[aria-current="true"] { background:var(--bg-panel-2); color:var(--text); box-shadow:inset 3px 0 0 var(--accent); font-weight:700; }
  .drawer-label { margin:18px 16px 6px; color:var(--text-muted); font-size:var(--fs-12); }
  .nav-veil:not([hidden]) { display:block; position:fixed; inset:var(--header-height) 0 0; z-index:1; background:var(--veil); }
  .static-mobile { display:block; }
  .static-mobile nav { position:absolute; top:var(--header-height); left:0; right:0; padding:16px var(--gutter); background:var(--bg-panel); color:var(--text); box-shadow:var(--shadow-pop); max-height:calc(100dvh - var(--header-height)); overflow-y:auto; }
}
@media (max-width:960px) {
  .win { grid-template-columns:196px minmax(0,1fr); }
  .code-col { display:none; }
  .grid-3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:768px) {
  h1,.h1 { font-size:var(--fs-h1-mobile); }
}
@media (max-width:760px) {
  :root { --gutter:18px; }
  .hero { padding-top:20px; }
  .tag { font-size:var(--fs-125); }
  .tag-extra { display:none; }
  .lede { font-size:var(--fs-155); }
  .win { grid-template-columns:minmax(0,1fr); min-height:0; border-radius:var(--r-lg); }
  .side { display:none; }
  .pane { padding:20px 18px; }
  .search { display:none; }
  .row { padding:10px 14px; }
  .slices { padding-top:64px; padding-bottom:72px; }
  .slices-panel { padding:32px 22px; border-radius:var(--r-lg); }
  h2,.h2 { font-size:var(--fs-22); }
  .panel { padding:28px 22px; }
}
@media (max-width:640px) {
  .section,.dark-band { padding-top:56px; padding-bottom:56px; }
  .grid-2,.grid-3 { grid-template-columns:minmax(0,1fr); }
  .tilt,[data-tilt] { transform:none !important; }
  .topbar-in { gap:8px; }
  .lang-btn { padding-inline:10px; }
  .nav-side { gap:6px; margin-left:auto; }
  .brand { font-size:var(--fs-15); gap:7px; }
  .footer-grid { gap:28px 20px; }
  .footer-brand { grid-column:1 / -1; }
  .card { padding:22px; }
}
@media (max-width:420px) {
  .cta-row .btn { width:100%; }
  .seg span { padding-inline:9px; }
  .row-mode { flex-wrap:wrap; }
  .lang-btn { font-size:var(--fs-12); padding-inline:8px; }
  .lang-btn > svg { display:none; }
  .brand img { width:28px; height:28px; }
  .footer-grid { grid-template-columns:minmax(0,1fr); }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
  .reveal-ready .reveal { opacity:1; transform:none; }
}