/* 中性石墨底，状态色：橙 = 待审批，绿 = 完成 / 在线，蓝 = 运行中。
   品牌琥珀色取自 BotBus 图标挡风玻璃里的眼睛，界面上只做少量点缀：文字链接、章节编号、选中文字；
   不用紫色、渐变、光晕或发光。 */

/* 字体：Geist（拉丁字母与数字）、Geist Mono（标签与元数据）、Geist Pixel Circle（像公交车 LED 线路牌的点阵字，只用在编号和页脚字标）。
   都是 SIL OFL 1.1，随站点自托管在 /fonts/（许可证见 fonts/OFL.txt）；中日韩文字回落到系统字体。 */
@font-face { font-family: 'Geist'; src: url('/fonts/Geist-Variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/fonts/GeistMono-Variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Pixel'; src: url('/fonts/GeistPixel-Circle.woff2') format('woff2'); font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #0f0f10;
  --bg-band: #131315;
  --ground: #141416;
  --surface: #18181b;
  --surface-raised: #202024;
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .14);
  --text: #ededee;
  --text-soft: #c8c8cc;
  --muted: #a1a1a8;
  --faint: #8a8a92;
  --wait: #f08a3c;
  --ok: #4cc38a;
  --run: #7eb0ff;
  --accent: #f5b942;
  --accent-strong: #fcd57f;
  /* 所有卡片统一：不透明石墨面（盖住页面点阵）+ 顶部一层很淡的由亮到暗 + 细描边 + 顶边高光，圆角 24px。 */
  --card-bg: linear-gradient(rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 45%), var(--surface);
  --card-edge: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 48px -32px rgba(0, 0, 0, .8);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --font: 'Geist', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  --pixel: 'Geist Pixel', 'Geist Mono', ui-monospace, monospace;
  font-family: var(--font);
  background: var(--bg);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 多语言页面（scripts/i18n.mjs 生成）：日文、韩文、繁体换成对应字形的字体，其余语言沿用系统字体。 */
:root:lang(ja) { --font: 'Geist', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif; }
:root:lang(ko) { --font: 'Geist', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; }
:root:lang(zh-TW) { --font: 'Geist', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'PingFang TC', 'Microsoft JhengHei', sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 88px; }
body { position: relative; isolation: isolate; margin: 0; min-width: 320px; color: var(--text); background: var(--bg); overflow-x: clip; }
/* 整页底纹：清楚但不抢眼的点阵（呼应 LED 线路牌）叠一层细颗粒，不带颜色；卡片是不透明的面，盖住点阵。 */
body::before { content: ''; position: fixed; z-index: -1; inset: 0; pointer-events: none; background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 160px 160px,
  radial-gradient(rgba(255, 255, 255, .055) 1.1px, transparent 1.5px) 0 0 / 28px 28px; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
code { font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--run); outline-offset: 3px; border-radius: 10px; }
::selection { background: rgba(245, 185, 66, .3); color: #fff; }
h1, h2, h3, p { overflow-wrap: break-word; }
p { text-wrap: pretty; }
h1, h2, h3 { letter-spacing: -.035em; }

.shell { width: min(1000px, calc(100% - 72px)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 50; top: 12px; left: 12px; padding: 12px 18px; background: var(--text); color: var(--bg); border-radius: 12px; font-weight: 600; text-decoration: none; transform: translateY(-180%); transition: transform .3s var(--ease-out); }
.skip-link:focus { transform: translateY(0); }

.icon-arrow-down, .to-top svg, .ctx-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease-out); }

/* ---------- Header ---------- */

.site-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid transparent; transition: background-color .4s ease, border-color .4s ease, backdrop-filter .4s ease; }
.site-header.is-scrolled { background: rgba(15, 15, 16, .8); border-bottom-color: var(--line); -webkit-backdrop-filter: saturate(140%) blur(20px); backdrop-filter: saturate(140%) blur(20px); }
.header-inner { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; font-weight: 700; letter-spacing: -.03em; font-size: 16px; white-space: nowrap; }
.brand-mark { width: 26px; height: 26px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); transition: transform .5s var(--ease-spring); }
.brand:hover .brand-mark { transform: rotate(-8deg) scale(1.06); }
.site-nav { position: relative; display: flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; }
.site-nav a { position: relative; z-index: 1; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding-inline: 14px; border-radius: 999px; color: var(--muted); text-decoration: none; white-space: nowrap; transition: color .25s ease; }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--text); }
.nav-indicator { position: absolute; z-index: 0; top: 50%; left: 0; width: var(--w, 0); height: 34px; border-radius: 999px; background: rgba(255, 255, 255, .08); transform: translate(var(--x, 0), -50%); opacity: 0; pointer-events: none; transition: transform .5s var(--ease-out), width .5s var(--ease-out), opacity .3s ease; }
.site-nav.has-indicator .nav-indicator { opacity: 1; }
.site-nav .nav-download { margin-left: 10px; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); transition: color .25s ease, background-color .25s ease, box-shadow .25s ease; }
.site-nav .nav-download:hover, .site-nav .nav-download[aria-current] { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26); }
.site-nav .nav-download:hover .icon-arrow-down { transform: translateY(2px); }
.header-inner > .brand { margin-right: auto; }
.header-actions { flex: none; display: flex; align-items: center; }
.github-link { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: var(--muted); transition: color .25s ease; }
.github-link:hover { color: var(--text); }
.icon-github { width: 16px; height: 16px; fill: currentColor; }
.lang-link { flex: none; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding-inline: 12px; border-radius: 999px; color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: color .25s ease; }
.lang-link:hover { color: var(--text); }
.icon-globe { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.scroll-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: rgba(237, 237, 238, .55); transform: scaleX(var(--progress, 0)); transform-origin: left; opacity: 0; transition: opacity .4s ease; }
.site-header.is-scrolled .scroll-progress { opacity: 1; }

/* ---------- Buttons ---------- */

.button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 42px; padding: 10px 19px; border-radius: 999px; font-size: 13.5px; font-weight: 600; line-height: 1.4; text-decoration: none; transition: transform .3s var(--ease-out), background-color .25s ease, box-shadow .3s ease, color .25s ease; }
a.button:active { transform: scale(.97); }
.button-primary { color: var(--bg); background: var(--text); }
.button-primary:hover { background: #fff; }
.button-secondary { color: var(--text); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--line-strong); }
.button-secondary:hover { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); }
.button-secondary:hover .icon-arrow-down { transform: translateY(3px); }
.button-unavailable { color: #b4b4ba; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); cursor: not-allowed; }
.button-unavailable::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }

/* ---------- 设备外框：里面是模拟器里拍的实机截图（website/scripts/make-shots.sh） ---------- */

.device-phone { --dw: 300px; position: relative; display: block; width: var(--dw); margin: 0; padding: calc(var(--dw) * .032); border-radius: calc(var(--dw) * .16); background: #0a0a0b; box-shadow: inset 0 0 0 1.5px #3b3b41, inset 0 0 0 5px #151517, 0 0 0 1px rgba(255, 255, 255, .05), 0 50px 90px -40px rgba(0, 0, 0, .9); }
.device-phone img { width: 100%; height: auto; border-radius: calc(var(--dw) * .125); }
.device-phone::after { content: ''; position: absolute; left: calc(var(--dw) * .367); top: calc(var(--dw) * .062); width: calc(var(--dw) * .267); height: calc(var(--dw) * .069); border-radius: 999px; background: #000; }
/* 手表：表壳用截图自身的 box-shadow 画（外扩一圈 = 表壳），表带是垫在下面的 ::before，表冠是 ::after。 */
.device-watch { --dw: 190px; --case: calc(var(--dw) * .07); position: relative; isolation: isolate; display: block; width: var(--dw); margin: 0; padding: var(--case); }
.device-watch img { position: relative; width: 100%; height: auto; border-radius: calc(var(--dw) * .19); box-shadow: 0 0 0 1px #000, 0 0 0 calc(var(--case) - 2px) #1b1b1e, 0 0 0 calc(var(--case) - .5px) #45454c, 0 0 0 var(--case) #0c0c0d, 0 30px 60px -20px rgba(0, 0, 0, .9); }
/* 表带（上下各露一截）与表冠 */
.device-watch::before { content: ''; position: absolute; z-index: -1; left: 18%; right: 18%; top: -22%; bottom: -22%; border-radius: calc(var(--dw) * .1); background: #151517; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.device-watch::after { content: ''; position: absolute; z-index: -1; right: -3.5%; top: 27%; width: 6%; height: 17%; border-radius: calc(var(--dw) * .02); background: #2c2c31; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }

/* ---------- Hero ---------- */

.hero { position: relative; isolation: isolate; padding-top: clamp(16px, 3vw, 40px); overflow: hidden; }
.hero::before { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(rgba(255, 255, 255, .1) 1.1px, transparent 1.5px) 0 0 / 26px 26px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 45%, #000, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 70% 45%, #000, transparent 75%); }
.hero-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(32px, 5vw, 72px); min-height: min(540px, calc(100svh - 210px)); }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
/* 首屏角色：带耳朵（后视镜）的小巴士，SVG 由 scripts/make-icon.py 内联进 index.html。
   发车入场只靠 CSS：头灯闪两下亮起、耳朵展开、眼睛弹开；没有脚本时停在睁眼的最终态。
   入场结束后 motion.js 加 .is-ready，之后的眨眼、张望、抖耳朵、跟随鼠标、点一下回弹都由它按类名触发。 */
/* 首屏角色入场（纯 CSS）：从后仰的角度立起来落定 → 一道高光斜着扫过车身 → 大灯点亮 → 睁眼、展开后视镜。
   入场动画只挂在 :not(.is-ready) 上（motion.js 约 2.4s 后加 is-ready），之后点击回弹等交互动画不会把入场重放一遍；
   “减少动态效果”下直接落到终态。 */
.hero-bot { position: relative; display: block; width: 76px; aspect-ratio: 1; margin-left: -8px; perspective: 400px; animation: icon-float 7s 2.6s ease-in-out infinite; -webkit-tap-highlight-color: transparent; }
.bb-mascot { display: block; width: 100%; height: 100%; overflow: visible; }
.bb-eye-look, .bb-eye-open, .bb-eye-happy, .bb-lamp { transform-box: fill-box; transform-origin: center; }
.bb-eye-look { transform: translate(var(--lx, 0px), var(--ly, 0px)); transition: transform .35s cubic-bezier(.3, .7, .3, 1); }
.bb-ear { transform-box: view-box; transition: transform .45s var(--ease-spring); }
.bb-ear-l { transform-origin: 112px 182px; }
.bb-ear-r { transform-origin: 400px 182px; }
.hero-bot:not(.is-ready) .bb-mascot { transform-origin: 50% 100%; animation: bot-rise 1.2s cubic-bezier(.2, .9, .25, 1.15) both; }
.hero-bot:not(.is-ready)::after { content: ''; position: absolute; inset: 8% 10% 6%; border-radius: 22%; pointer-events: none; mix-blend-mode: overlay;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .95) 48%, transparent 60%) -120% 0 / 250% 100% no-repeat; animation: bot-sheen 1s .9s ease-in-out both; }
.hero-bot .bb-lamp { animation: bb-lamp-on 1.2s .7s linear both; }
.hero-bot .bb-eye-open { animation: bb-eye-open 1.4s .8s var(--ease-spring) both; }
.hero-bot .bb-ear { animation: bb-unfold 1.4s .8s var(--ease-spring) both; }
.hero-bot.is-ready .bb-lamp, .hero-bot.is-ready .bb-eye-open, .hero-bot.is-ready .bb-ear { animation: none; }
.hero-bot.is-ready.is-blink .bb-eye-open { animation: bb-blink .22s ease-in-out; }
.hero-bot.is-ready.is-twitch .bb-ear-l { animation: bb-twitch-l .5s ease-in-out; }
.hero-bot.is-ready.is-twitch .bb-ear-r { animation: bb-twitch-r .5s .06s ease-in-out; }
.hero-bot.is-press .bb-mascot { animation: bb-press .5s var(--ease-spring); }
.hero-bot.is-happy .bb-eye-open { opacity: 0; }
.hero-bot.is-happy .bb-eye-happy { opacity: 1; }
.hero-bot.is-happy .bb-ear-l { animation: bb-wag-l 1s ease-in-out; }
.hero-bot.is-happy .bb-ear-r { animation: bb-wag-r 1s ease-in-out; }
@media (hover: hover) and (pointer: fine) { .hero-bot { cursor: pointer; } }
h1 { margin: 18px 0 0; font-size: clamp(32px, 3.2vw, 44px); line-height: 1.12; font-weight: 700; letter-spacing: -.045em; }
.h1-line { display: block; overflow: hidden; padding-block: .02em .1em; }
.h1-line > * { display: inline-block; animation: rise 1.1s .2s var(--ease-out) both; }
.h1-line + .h1-line > * { animation-delay: .3s; }
h1 em { font-style: normal; color: #85858d; }
/* 拉丁、西里尔字母的标题词更长，字号小一档，保证两行放得下。 */
:root:not(:lang(zh-CN)):not(:lang(zh-TW)):not(:lang(ja)):not(:lang(ko)) h1 { font-size: clamp(30px, 2.8vw, 40px); letter-spacing: -.035em; }
:root:not(:lang(zh-CN)):not(:lang(zh-TW)):not(:lang(ja)):not(:lang(ko)) .hero-lede br { display: none; }
.hero-lede { max-width: 480px; margin: 20px 0 0; color: var(--muted); font-size: clamp(15px, 1.2vw, 16.5px); line-height: 1.8; animation: fade-up .9s .42s var(--ease-out) both; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 28px; animation: fade-up .9s .52s var(--ease-out) both; }

/* 首屏截图按屏幕高度缩放：矮屏笔记本也能在首屏露出下面的「支持」一栏。宽度跟着高度走，手机截图的高度由宽度决定。 */
.hero-devices { --hero-h: clamp(360px, min(42vw, 100svh - 250px), 540px); position: relative; height: var(--hero-h); width: 100%; max-width: min(480px, calc(var(--hero-h) * .9)); justify-self: center; container-type: inline-size; translate: 0 calc(var(--scroll-y, 0) * -40px); }
.hero-devices > * { position: absolute; }
.hero-phone-front { z-index: 2; --dw: 49cqw; left: 32%; top: 0; animation: device-in 1.2s .35s var(--ease-out) both; }
.hero-phone-back { z-index: 1; --dw: 42cqw; left: 0; top: 11%; filter: brightness(.72) saturate(.85); animation: device-in 1.2s .5s var(--ease-out) both; }
.hero-watch { z-index: 3; --dw: 32cqw; right: 0; bottom: 12%; animation: device-in 1.2s .7s var(--ease-out) both; }
.hero-chip { z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 11px; border-radius: 12px; background: rgba(28, 28, 31, .92); box-shadow: inset 0 0 0 1px var(--line-strong), 0 20px 40px -20px rgba(0, 0, 0, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-size: 12px; font-weight: 600; white-space: nowrap; animation: chip-in .8s var(--ease-spring) both, chip-float 6s ease-in-out infinite; }
.hero-chip i { width: 8px; height: 8px; border-radius: 50%; }
.chip-wait { left: 4%; top: 64%; animation-delay: 1.3s, 2.1s; }
.chip-wait i { background: var(--wait); animation: warn-dot 2.4s ease-out infinite; }
.chip-ok { right: 2%; bottom: 3%; animation-delay: 1.6s, 3.2s; }
.chip-ok i { background: var(--ok); }

.agents-strip { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 24px; margin-top: clamp(16px, 2.4vw, 28px); padding-block: 18px; border-top: 1px solid var(--line); }
.agents-label { color: var(--faint); font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.agents-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 0; padding: 0; list-style: none; }
.agents-list a { display: inline-flex; align-items: center; gap: 9px; min-height: 36px; padding-inline: 4px; border-radius: 8px; text-decoration: none; transition: color .25s ease; }
.agents-list a:hover { color: var(--text); }
.agents-list a:hover img { opacity: 1; }
.agents-list li { display: inline-flex; align-items: center; color: var(--text-soft); font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }
.agents-list img { width: 17px; height: 17px; filter: invert(1); opacity: .75; transition: opacity .25s ease; }
.agents-more { display: inline-flex; align-items: center; min-height: 36px; padding-inline: 4px; border-radius: 8px; color: var(--accent); font-size: 13px; text-decoration: none; transition: color .25s ease; }
.agents-more:hover { color: var(--accent-strong); }

/* ---------- Sections ---------- */

.section { position: relative; padding-block: clamp(44px, 4.6vw, 64px); }
/* 相邻两节之间一条内容宽度的细线，代替大段空白分隔。 */
.route-wrap > .section + .section > .shell { position: relative; }
.route-wrap > .section + .section > .shell::before { content: ''; position: absolute; top: calc(clamp(44px, 4.6vw, 64px) * -1); left: 0; right: 0; border-top: 1px solid var(--line); }
.tour-section { padding-top: clamp(44px, 4.5vw, 64px); }
.section-band { background: var(--bg-band); border-block: 1px solid var(--line); }
.section-heading { margin-bottom: clamp(30px, 3.6vw, 44px); }
.section-heading-center { text-align: center; }
.section-heading-split { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.section-heading-split > p:not(.section-kicker) { max-width: 320px; margin: 0 0 4px; font-size: 14px; line-height: 1.75; }
.section-kicker { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 16px; color: var(--muted); font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.kicker-num { padding: 3px 7px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(245, 185, 66, .35); font-size: 11.5px; letter-spacing: 0; color: var(--accent); }
h2 { margin: 0; font-size: clamp(26px, 2.9vw, 38px); line-height: 1.2; font-weight: 700; letter-spacing: -.04em; }
.section-heading > p:not(.section-kicker) { max-width: 480px; margin: 14px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.8; }
.section-heading-center > p:not(.section-kicker) { margin-inline: auto; }

/* 滚动进入：JS 只给首屏以下的元素加 reveal-pending，禁用脚本时内容照常可见。 */
.reveal-pending { opacity: 0; }
.reveal-in { animation: reveal .95s var(--ease-out) both; animation-delay: calc(var(--reveal-i, 0) * 90ms); }
[data-offscreen], [data-offscreen] * { animation-play-state: paused !important; }

/* 线路（左边距要放得下线路和站点，所以只在 ≥1200px 时显示）：宽屏时左侧留白里画一条公交线路，每节标题是一站；小巴士 sticky 在视口中间，随滚动沿线路走，到头停住。纯 CSS。 */
.route-wrap { position: relative; }
.route { display: none; }
@media (min-width: 1200px) {
  .route { position: absolute; z-index: 1; display: block; top: 0; bottom: 0; left: calc(50% - 556px); width: 2px; margin-left: -1px; background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .13) 0 8px, transparent 8px 16px); pointer-events: none; }
  /* 起点对准第一站的圆心：第一节（.tour-section）的上内边距 + 站点圆心约 11px - 小巴士半高 17px。 */
  .route-bus { position: sticky; top: calc(50vh - 17px); width: 34px; max-width: none; height: 34px; margin: calc(clamp(44px, 4.5vw, 64px) - 6px) 0 120px -16px; border-radius: 9px; box-shadow: 0 0 0 5px var(--bg), 0 0 0 6px var(--line-strong); animation: bus-bob 1.6s ease-in-out infinite; }
  .route-wrap .section-heading { position: relative; }
  .route-wrap .section-heading::before { content: ''; position: absolute; z-index: 2; top: 2px; left: -63px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 3px var(--text-soft), 0 0 0 5px var(--bg); }
}

/* 功能导览：宽屏左列文字、右列手机，motion.js 轮播 .is-active；窄屏和禁用脚本时是横向滑动的卡片。 */
.tour { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr repeat(6, auto) 1fr; column-gap: clamp(40px, 6vw, 96px); align-items: start; }
.tour::before { content: ''; grid-column: 2; grid-row: 1 / -1; align-self: stretch; margin-block: 36px; border-radius: 24px; background: var(--card-bg); box-shadow: var(--card-edge); }
.tour-item { display: contents; }
.tour-item:nth-child(1) { --row: 2; }
.tour-item:nth-child(2) { --row: 3; }
.tour-item:nth-child(3) { --row: 4; }
.tour-item:nth-child(4) { --row: 5; }
.tour-item:nth-child(5) { --row: 6; }
.tour-item:nth-child(6) { --row: 7; }
.tour-text { position: relative; grid-column: 1; grid-row: var(--row); display: grid; grid-template-columns: 50px minmax(0, 1fr); column-gap: 14px; margin: 0; padding: 14px 20px 16px; border-radius: 18px; opacity: .5; cursor: pointer; transition: opacity .4s ease, background-color .4s ease, box-shadow .4s ease; }
.tour-text:hover { opacity: .8; }
.tour-text:focus-visible { outline-offset: -2px; }
.is-active > .tour-text { opacity: 1; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.tour-num { grid-row: span 2; font-family: var(--pixel); font-size: 28px; line-height: 1; color: var(--faint); transition: color .4s ease; }
.is-active .tour-num { color: var(--text); }
.tour-text h3 { margin: 0; font-size: clamp(17px, 1.45vw, 19px); line-height: 1.35; }
.tour-text p { margin: 4px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.tour-text::after { content: ''; position: absolute; left: 20px; right: 20px; bottom: 0; height: 2px; border-radius: 2px; background: var(--text-soft); transform: scaleX(0); transform-origin: left; opacity: 0; }
.tour.is-auto .is-active > .tour-text::after { opacity: .7; animation: tour-progress var(--tour-ms, 6000ms) linear forwards; }
.tour.is-auto:hover .is-active > .tour-text::after, .tour.is-held .is-active > .tour-text::after { animation-play-state: paused; }
/* 截图宽度随屏幕高度收缩，整个导览在矮屏笔记本上也能一屏看全。 */
.tour-shot { --dw: clamp(210px, calc((100svh - 190px) * .46), 264px); z-index: 1; grid-column: 2; grid-row: 1 / -1; justify-self: center; opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .6s ease, transform .8s var(--ease-out); pointer-events: none; }
.is-active > .tour-shot { opacity: 1; transform: none; }
/* 第一项两张截图叠成一摞（设备列表在前、单台电脑的任务页在后露出一角）：有鼠标时悬停换位，
   触屏上点一下换位（motion.js 的 initTourStack 切 .is-flipped；悬停规则只给有鼠标的设备，免得点过后粘住）。 */
.tour-stack { --stack-dw: var(--dw); display: grid; width: var(--dw); margin: 0; }
.tour-stack > .device-phone { --dw: var(--stack-dw); grid-area: 1 / 1; transition: transform .6s var(--ease-out), filter .6s ease, z-index 0s .15s; }
.tour-stack > :first-child { z-index: 2; }
.tour-stack > :last-child { z-index: 1; transform: translateX(18%) rotate(4deg) scale(.9); filter: brightness(.55); }
.is-active > .tour-stack { pointer-events: auto; cursor: pointer; }
.tour-stack.is-flipped > :first-child { z-index: 1; transform: translateX(-18%) rotate(-4deg) scale(.9); filter: brightness(.55); }
.tour-stack.is-flipped > :last-child { z-index: 2; transform: none; filter: none; }
@media (hover: hover) and (pointer: fine) {
  .tour-stack:hover > :first-child { z-index: 1; transform: translateX(-18%) rotate(-4deg) scale(.9); filter: brightness(.55); }
  .tour-stack:hover > :last-child { z-index: 2; transform: none; filter: none; }
}
/* 没配截图的其余能力：一行小标签。 */
.tour-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.tour-more li { padding: 5px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--text-soft); font-size: 12.5px; }
.tour-more .tour-more-label { padding-inline: 0 4px; box-shadow: none; color: var(--faint); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; }
.tour-note { margin: 20px 0 0; color: var(--faint); font-size: 12.5px; line-height: 1.7; }

/* Apple Watch */
.watch-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 72px 28px 44px; list-style: none; border-radius: 24px; background: var(--card-bg); box-shadow: var(--card-edge); overflow: hidden; }
.watch-row li { container-type: inline-size; display: flex; flex-direction: column; align-items: center; gap: 60px; }
.watch-row .device-watch { --dw: min(160px, 100cqw); transition: transform .6s var(--ease-out); }
.watch-row li:nth-child(even) .device-watch { translate: 0 28px; }
.watch-row li:hover .device-watch { transform: translateY(-8px); }
/* 表带（.device-watch::before）会溢出表身上下各 22%，标签要留在它上面，免得被盖住。 */
.watch-row span { position: relative; z-index: 1; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-soft); font-size: 12.5px; font-weight: 600; }
.watch-row li:nth-child(even) span { translate: 0 28px; }

/* 数据与配对 */
/* 数据与安全：两张卡，每张上面一幅示意图（纯 HTML / SVG，aria-hidden，直接画在卡片上，不再套内框），下面标题加一句话。示意图只用中性色，
   绿点只表示“在线”。 */
.security-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/* 每张卡窄于约 330px 时示意图放不下，改成上下排。 */
@media (max-width: 820px) { .security-grid { grid-template-columns: 1fr; } }
.security-item { display: flex; flex-direction: column; padding: 18px 24px 24px; border-radius: 24px; background: var(--card-bg); box-shadow: var(--card-edge); transition: box-shadow .35s ease, background-color .35s ease; }
.security-item:hover { box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 1px 0 rgba(255, 255, 255, .08); }
.security-item h3 { margin: 10px 0 6px; font-size: 16px; line-height: 1.4; }
.security-item p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.7; }
.security-visual { display: flex; align-items: center; justify-content: center; gap: 14px; height: 150px; margin: 0; padding: 0; }
.security-visual svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sv-node, .sv-server, .sv-qr { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--text-soft); }
.sv-wire { position: relative; flex: 1; min-width: 24px; max-width: 110px; height: 1px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 4px, transparent 4px 8px); }
.sv-badge { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--text); translate: -50% -50%; transition: transform .5s var(--ease-spring); }
.sv-badge svg { width: 16px; height: 16px; }
.security-item:hover .sv-badge { transform: rotate(-8deg) scale(1.08); }
/* 1 服务器只见密文：明文标签 → 锁 → 服务器 → 手机，服务器到手机的线上走着密文块 */
.sv-chips { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sv-chips li { padding: 3px 10px; border-radius: 999px; background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--text-soft); font-size: 12px; white-space: nowrap; }
.sv-server { position: relative; width: 54px; height: 54px; color: var(--text); }
.sv-server small { position: absolute; top: calc(100% + 8px); left: 50%; color: var(--faint); font-family: var(--mono); font-size: 10.5px; white-space: nowrap; translate: -50% 0; }
.sv-flow { overflow: hidden; height: 10px; background: linear-gradient(var(--line-strong), var(--line-strong)) center / 100% 1px no-repeat; }
.sv-flow i { position: absolute; top: 2px; left: -12px; width: 10px; height: 6px; border-radius: 2px; background: var(--faint); opacity: .8; animation: sv-packet 2.8s linear infinite; }
.sv-flow i:nth-child(2) { animation-delay: -.93s; }
.sv-flow i:nth-child(3) { animation-delay: -1.86s; }
@keyframes sv-packet { to { left: 100%; } }
/* 2 密钥只在你的设备上：二维码 → 钥匙 → 设备列表（最后一台已移除） */
.sv-qr { width: 64px; height: 64px; padding: 9px; background: var(--text); }
.sv-pair .sv-wire { max-width: 64px; }
.sv-qr svg { width: 100%; height: 100%; fill: var(--bg); stroke: none; }
.sv-devices { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; max-width: 230px; margin: 0; padding: 0; list-style: none; }
.sv-devices li { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 10px; background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-soft); font-size: 12.5px; }
.sv-devices svg { width: 16px; height: 16px; }
.sv-devices span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-devices em { display: inline-flex; align-items: center; gap: 6px; color: var(--faint); font-size: 11.5px; font-style: normal; white-space: nowrap; }
.sv-devices em.is-online::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.sv-devices .is-removed { background: none; box-shadow: inset 0 0 0 1px var(--line); color: var(--faint); }
.sv-devices .is-removed span { text-decoration: line-through; }
.security-note { margin: 18px 0 0; max-width: 720px; color: var(--faint); font-size: 12px; line-height: 1.75; }
.security-more { margin: 10px 0 0; }
.security-more a { display: inline-flex; align-items: center; min-height: 36px; color: var(--accent); font-size: 13px; text-decoration: none; transition: color .25s ease; }
.security-more a:hover { color: var(--accent-strong); }

/* 开始使用：两步与下面两块同一套列宽、间距，1 / 2 各对齐一块。 */
.steps { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; margin: 0 0 28px; padding: 0; list-style: none; counter-reset: none; }
.steps li { position: relative; display: flex; align-items: flex-start; gap: 16px; }
.step-num { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--text); color: var(--bg); font-size: 14px; font-weight: 700; }
.steps h3 { position: relative; display: inline-block; margin: 5px 0 6px; font-size: 15.5px; line-height: 1.4; }
.steps p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }

/* 下载区左右两块：电脑客户端（macOS / Linux / Windows）与手机 App（iOS / Android）。每个平台是一个面板，
   motion.js 的 initPlatformTabs 在块里加一排 tab、面板叠在同一格里轮流显示（高度按最高的面板，切换不跳）；
   没有脚本时面板上下排开，内容全部可见。Linux 面板两种状态的内容见 scripts/linux-html.mjs。 */
.download-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.download-module { container-type: inline-size; position: relative; display: flex; flex-direction: column; padding: 24px 26px 24px; border-radius: 24px; background: var(--card-bg); box-shadow: var(--card-edge); }
.download-module-head { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; }
.download-module-head h3 { margin: 0 0 4px; font-size: clamp(21px, 1.9vw, 25px); line-height: 1.3; }
.download-module-head p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.7; }
.download-app-icon { flex: none; width: 52px; height: 52px; border-radius: 22.5%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 14px 28px -14px rgba(0, 0, 0, .8); }
.platform-tabs { display: flex; gap: 2px; align-self: flex-start; max-width: 100%; margin: 0 0 18px; padding: 4px; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); overflow-x: auto; scrollbar-width: none; }
.platform-tabs::-webkit-scrollbar { display: none; }
.platform-tab { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.platform-tab::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); opacity: .7; }
.platform-tab[data-available]::before { background: var(--ok); opacity: 1; }
.platform-tab:hover { color: var(--text-soft); }
.platform-tab[aria-selected="true"] { background: var(--surface-raised); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.platform-tab:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.download-card { position: relative; z-index: 1; padding-top: 22px; border-top: 1px solid var(--line); }
.download-card:first-child { padding-top: 0; border-top: 0; }
.download-card + .download-card { margin-top: 24px; }
.has-tabs .platform-panels { display: grid; }
.has-tabs .download-card { grid-area: 1 / 1; margin: 0; padding: 0; border: 0; transition: opacity .25s ease; }
.has-tabs .download-card[data-inactive] { visibility: hidden; opacity: 0; }
.download-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; }
.platform-name { font-size: 16px; font-weight: 650; color: var(--text); }
/* 有 tab 时平台名已在 tab 上，面板里只留给读屏。 */
.has-tabs .platform-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.status-tag { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--text-soft); font-size: 12px; font-weight: 600; white-space: nowrap; }
.status-tag::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.download-card-mac .status-tag::before { background: var(--wait); animation: warn-dot 2.4s ease-out infinite; }
.download-card-mac:has([data-release-action] a) .status-tag::before { background: var(--ok); animation-name: live-dot; }
.download-card-phone .status-tag:not(.status-tag-muted)::before,
.download-card-linux .status-tag:not(.status-tag-muted)::before,
.download-card-windows .status-tag:not(.status-tag-muted)::before,
.download-card-android .status-tag:not(.status-tag-muted)::before { background: var(--ok); animation: live-dot 2.4s ease-out infinite; }
/* 有 tab 时绿点已在 tab 上，「正式版可下载」「已上架」这类可用标签是重复信息，只留给读屏；
   「开发中」「内部测试中」与 Mac 尚未开放下载时的标签照常显示。 */
.has-tabs .download-card:not(.download-card-mac) .status-tag:not(.status-tag-muted),
.has-tabs .download-card-mac:has([data-release-action] a) .status-tag { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.has-tabs .download-card:not(.download-card-mac):not(:has(.status-tag-muted)) .download-card-top,
.has-tabs .download-card-mac:has([data-release-action] a) .download-card-top { margin-bottom: 0; }
.download-card > p { margin: 0 0 16px; color: var(--muted); font-size: 13.5px; line-height: 1.75; }
.download-card > p:last-child { margin-bottom: 0; }
/* 下载按钮旁的「版本信息」：版本、大小、日期、SHA-256 平时收起，悬停或键盘聚焦时浮出（内容一直在 HTML 里，
   set-release / set-linux-release 照常按标记改写，校验器照常核对）。
   弹层对齐下载行左边、宽度不超过整块内容区；只裁切装饰截图，避免裁掉版本信息。 */
.release-row { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.release-info { position: static; }
.release-info-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--faint); font-size: 12.5px; cursor: help; border-radius: 8px; transition: color .2s ease; }
.release-info-toggle::before { content: 'i'; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; box-shadow: inset 0 0 0 1.2px currentColor; font: 600 10px/1 var(--font); }
.release-info:hover .release-info-toggle, .release-info-toggle:focus-visible { color: var(--text-soft); }
.release-popover { position: absolute; z-index: 20; left: 0; bottom: calc(100% + 10px); width: min(360px, 100cqw); padding: 14px 16px; border-radius: 14px; background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--line-strong), 0 20px 40px -16px rgba(0, 0, 0, .9); opacity: 0; visibility: hidden; translate: 0 4px; transition: opacity .2s ease, translate .2s ease, visibility 0s .2s; }
.release-info:hover .release-popover, .release-info:focus-within .release-popover { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
.release-popover .download-status { margin: 0 0 10px; color: var(--text-soft); font-size: 12.5px; }
.release-popover .release-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 10px 0 0; border: 0; border-top: 1px solid var(--line); gap: 8px 24px; }
.release-popover .linux-meta { padding: 0; border: 0; }
.release-popover .release-meta > div { min-width: 0; }
.release-popover .release-meta [data-release-date] { white-space: normal; }
.text-link { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; color: var(--accent); font-size: 13px; text-decoration: none; transition: color .25s ease; }
.text-link::after { content: '→'; }
.text-link:hover { color: var(--accent-strong); }
.release-meta { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 12px 32px; margin: 0 0 20px; padding: 14px 0; border-block: 1px solid var(--line); font-size: 12.5px; }
.release-meta dt { color: var(--faint); }
.release-meta dd { margin: 4px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.release-meta [data-release-date] { white-space: nowrap; }
.release-meta .hash-row { grid-column: 1 / -1; }
.release-meta .hash-row dd { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--muted); }
.phone-availability { display: flex; align-items: flex-start; gap: 10px; margin: 0; color: var(--text-soft); font-size: 13.5px; line-height: 1.6; }
.availability-dot { flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--faint); }
.linux-body { display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0; }
.linux-meta { grid-template-columns: repeat(2, auto); margin: 0; padding: 0; border: 0; }
.linux-note { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.linux-note code { color: var(--text-soft); font-size: .95em; }
/* 手机 App 块底部露出一截实机截图，不随 tab 切换。 */
/* 手机 App 块：文字在左，实机截图贴在右下角、被卡片底边裁切，不压文字；窄屏挪到底部。 */
.download-module-mobile .download-card { max-width: 54%; }
.download-peek { position: absolute; inset: 0; margin: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.download-peek > span { transition: transform .7s var(--ease-out); }
.download-module-mobile:hover .download-peek > span { transform: translateY(-14px); }
.download-peek .device-phone { --dw: 150px; position: absolute; right: 7%; bottom: -150px; }
.download-peek .device-watch { --dw: 82px; position: absolute; right: calc(7% + 120px); bottom: 10px; }

.install-command { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; padding: 5px 5px 5px 16px; border-radius: 14px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-strong); }
.install-command pre { flex: 1; min-width: 0; margin: 0; padding: 9px 0; overflow-x: auto; scrollbar-width: none; }
.install-command pre::-webkit-scrollbar { display: none; }
/* 窄屏放不下时在空格处折行（复制的仍是一行）。 */
.install-command code { color: var(--text); font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.install-command code::before { content: '$ '; color: var(--faint); }
.copy-button { flex: none; min-height: 36px; padding: 6px 13px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--text-soft); font-size: 12px; font-weight: 600; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.copy-button:hover { background: rgba(255, 255, 255, .11); color: var(--text); }
.copy-button.is-copied { color: var(--ok); }

/* 常见问题 */
.faq-layout { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(40px, 7vw, 100px); align-items: start; }
.faq-intro { position: sticky; top: 112px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 62px; padding: 16px 4px; cursor: pointer; font-size: 15.5px; font-weight: 600; list-style: none; transition: color .25s ease; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ''; flex: none; width: 28px; height: 28px; border-radius: 50%; color: var(--text-soft); background: linear-gradient(currentColor, currentColor) center / 12px 1.6px no-repeat, linear-gradient(currentColor, currentColor) center / 1.6px 12px no-repeat; box-shadow: inset 0 0 0 1px var(--line-strong); transition: transform .5s var(--ease-out), background-size .4s var(--ease-out), background-color .3s ease, box-shadow .3s ease; }
.faq-list summary:hover { color: #fff; }
.faq-list summary:hover::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.faq-list details[open]:not(.is-closing) summary::after { transform: rotate(180deg); background-size: 12px 1.6px, 1.6px 0; background-color: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.faq-answer { overflow: hidden; }
.faq-answer p { margin: 0 56px 22px 4px; color: var(--muted); font-size: 14px; line-height: 1.85; }
.faq-answer a { color: var(--accent); text-underline-offset: 3px; text-decoration-color: rgba(245, 185, 66, .4); transition: color .25s ease; }
.faq-answer a:hover { color: var(--accent-strong); text-decoration-color: currentColor; }

/* ---------- Footer ---------- */

.site-footer { position: relative; overflow: hidden; padding-top: 56px; background: #0b0b0c; border-top: 1px solid var(--line); }
.footer-inner { display: flex; justify-content: space-between; gap: 32px; }
.footer-brand { color: var(--text); }
.footer-inner p { margin: 12px 0 0; color: var(--muted); font-size: 13.5px; }
.footer-side { text-align: right; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 22px; margin-top: 4px; }
.footer-links a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: var(--text-soft); font-size: 13.5px; text-decoration: none; transition: color .25s ease; }
.footer-links a:hover { color: var(--accent-strong); }
.footer-langs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 16px; max-width: 520px; margin: 0 0 0 auto; scroll-margin-top: 120px; }
.footer-langs a { min-height: 32px; display: inline-flex; align-items: center; color: var(--muted); font-size: 13px; text-decoration: none; transition: color .25s ease; }
.footer-langs a:hover, .footer-langs a[aria-current] { color: var(--text); }
.footer-langs a[aria-current] { font-weight: 600; }
.to-top:hover svg { transform: translateY(-3px); }
.footer-wordmark { margin: 32px 0 0; font-family: var(--pixel); font-size: clamp(64px, 16vw, 220px); font-weight: 400; line-height: .78; letter-spacing: 0; text-align: center; white-space: nowrap; color: #1d1d21; user-select: none; pointer-events: none; }

/* ---------- Keyframes ---------- */

@keyframes bot-rise { 0% { opacity: 0; transform: translateY(26px) rotateX(55deg) scale(.86); filter: blur(6px); } 55% { opacity: 1; filter: none; } 100% { transform: none; } }
@keyframes bot-sheen { from { background-position: -120% 0; } to { background-position: 220% 0; } }
@keyframes bb-lamp-on { 0%, 38% { opacity: .06; } 46% { opacity: 1; } 54% { opacity: .3; } 66%, 100% { opacity: 1; } }
@keyframes bb-eye-open { 0%, 50% { transform: scaleY(.06); opacity: .35; } 58% { opacity: 1; } 78% { transform: scaleY(1.08); } 100% { transform: none; } }
@keyframes bb-unfold { 0%, 45% { transform: scaleX(.3); } 75% { transform: scaleX(1.12); } 100% { transform: none; } }
@keyframes bb-blink { 50% { transform: scaleY(.08); } }
@keyframes bb-twitch-l { 40% { transform: rotate(9deg); } 70% { transform: rotate(-4deg); } }
@keyframes bb-twitch-r { 40% { transform: rotate(-9deg); } 70% { transform: rotate(4deg); } }
@keyframes bb-wag-l { 20% { transform: rotate(12deg); } 45% { transform: rotate(-8deg); } 70% { transform: rotate(10deg); } }
@keyframes bb-wag-r { 20% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 70% { transform: rotate(-10deg); } }
@keyframes bb-press { 25% { transform: scale(1.05, .9) translateY(4%); } 60% { transform: scale(.98, 1.03); } }
@keyframes icon-float { 50% { translate: 0 -6px; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes rise { from { transform: translateY(105%); } }
@keyframes device-in { from { opacity: 0; transform: translateY(60px); } }
@keyframes chip-in { from { opacity: 0; transform: translateY(10px) scale(.9); } }
@keyframes chip-float { 50% { translate: 0 -6px; } }
@keyframes reveal { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
@keyframes bus-bob { 50% { translate: 0 -3px; } }
@keyframes tour-progress { to { transform: scaleX(1); } }
@keyframes live-dot { 0% { box-shadow: 0 0 0 0 rgba(76, 195, 138, .5); } 70%, 100% { box-shadow: 0 0 0 7px rgba(76, 195, 138, 0); } }
@keyframes warn-dot { 0% { box-shadow: 0 0 0 0 rgba(240, 138, 60, .5); } 70%, 100% { box-shadow: 0 0 0 7px rgba(240, 138, 60, 0); } }

/* ---------- Responsive ---------- */

@media (max-width: 1060px) {
  .shell { width: min(100% - 48px, 1000px); }
  .site-nav a { padding-inline: 11px; }
}

@media (max-width: 900px) {
  .hero-layout { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { align-items: center; text-align: center; }
  .hero-bot { margin-left: 0; }
  .hero-actions { justify-content: center; }
  .hero-devices { height: clamp(420px, 92vw, 620px); max-width: 520px; translate: none; }
  /* 窄屏：功能导览改成横向滑动的卡片，每张都带自己的截图。 */
  .tour { display: flex; gap: 16px; margin-inline: -24px; padding: 4px 24px 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 24px; scrollbar-width: none; }
  .tour::-webkit-scrollbar { display: none; }
  .tour::before { display: none; }
  .tour-item { container-type: inline-size; display: flex; flex-direction: column; flex: 0 0 min(76vw, 320px); scroll-snap-align: start; padding: 22px 22px 0; border-radius: 24px; background: var(--card-bg); box-shadow: var(--card-edge); overflow: hidden; }
  .tour-text, .is-active > .tour-text { display: block; padding: 0; opacity: 1; background: none; box-shadow: none; cursor: auto; }
  .tour-text::after, .tour-num { display: none; }
  .tour-shot { --dw: 84cqw; margin: 22px auto -32%; opacity: 1; transform: none; }
  .tour-stack { pointer-events: auto; -webkit-tap-highlight-color: transparent; }
  .watch-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 88px; padding: 60px 16px 36px; }
  .watch-row li { gap: 56px; }
  .watch-row li:nth-child(even) .device-watch, .watch-row li:nth-child(even) span { translate: none; }
  .steps { grid-template-columns: 1fr; gap: 18px; }
  .download-grid { grid-template-columns: 1fr; }
  .download-module-mobile { padding-bottom: 230px; }
  .download-module-mobile .download-card { max-width: none; }
  .download-peek .device-phone { right: calc(50% - 90px); }
  .download-peek .device-watch { right: calc(50% + 30px); }
  .faq-layout { grid-template-columns: 1fr; gap: 32px; }
  .section-heading-split { display: block; }
  .section-heading-split > p:not(.section-kicker) { margin-top: 12px; }
  .faq-intro { position: static; }
}

/* 顶栏放不下较长的语言名时只留地球图标（链接自带 aria-label） */
@media (min-width: 721px) and (max-width: 940px), (max-width: 360px) {
  .lang-link { width: 44px; justify-content: center; padding-inline: 0; }
  .lang-link span { display: none; }
}
@media (min-width: 721px) and (max-width: 820px) {
  .header-inner { gap: 12px; }
  .site-nav a { padding-inline: 7px; }
}

@media (max-width: 720px) {
  .shell { width: min(100% - 36px, 600px); }
  html { scroll-padding-top: 116px; }
  .header-inner { position: relative; flex-direction: column; align-items: stretch; gap: 0; padding-block: 8px 4px; }
  .brand { align-self: flex-start; font-size: 17px; }
  .header-actions { position: absolute; top: 8px; right: -8px; }
  .site-nav { margin-inline: -18px; padding-inline: 12px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent); }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { flex: none; font-size: 13px; padding-inline: 12px; }
  .site-nav .nav-download { margin-left: auto; }
  .tour { margin-inline: -18px; padding-inline: 18px; scroll-padding-inline: 18px; }
  .download-module { padding: 22px 20px 22px; }
  .download-module-mobile { padding-bottom: 220px; }
  .release-meta { grid-template-columns: repeat(2, auto); }
  .footer-inner { display: block; }
  .footer-side { margin-top: 26px; text-align: left; }
  .footer-links { justify-content: flex-start; }
  .footer-langs { justify-content: flex-start; margin-left: 0; }
}

@media (max-width: 480px) {
  h1 { font-size: clamp(26px, 8.2vw, 38px); letter-spacing: -.04em; }
  h2 { font-size: 25px; }
  .hero-bot { width: 68px; }
  .hero-lede { font-size: 14.5px; line-height: 1.75; }
  .hero-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .hero-actions .button, .download-card .button { width: 100%; }
  .hero-chip { font-size: 12px; padding: 8px 12px 8px 11px; }
  .security-visual { gap: 10px; height: 136px; }
  .sv-qr { width: 54px; height: 54px; padding: 7px; }
  .sv-devices li { gap: 8px; padding: 6px 10px; }
  /* 只收窄列间距：行间距要留给下一行表带，写成 gap 会把上面的 row-gap 一起覆盖掉。 */
  .watch-row { column-gap: 16px; }
  .faq-answer p { margin-right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .hero-devices { translate: none; }
}

/* 超窄屏：设备行只留在线绿点，文字让给设备名（已移除靠删除线表示）。 */
@media (max-width: 360px) { .sv-devices em { font-size: 0; gap: 0; } }