/* 首屏为静态分屏画布；设备屏内只有抽象光带。 */
.stage { padding:12px 24px 0; overflow-x:clip; }
.panel { position:relative; isolation:isolate; height:clamp(600px,calc(100vh - 140px),820px); display:grid; grid-template-columns:minmax(0,660px) minmax(0,1fr); column-gap:16px; padding-left:var(--pad); background:var(--c-ink); color:var(--c-on-ink); border-radius:var(--r-panel); overflow:hidden; }
.panel::before { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(110% 90% at 0% 0%,var(--a-ink-lift),var(--c-clear) 60%); }
.copy { position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center; padding-top:44px; padding-bottom:44px; color:var(--c-on-ink-soft); }
.badge { align-self:flex-start; display:inline-flex; align-items:center; gap:10px; min-height:32px; padding:5px 15px 5px 12px; border:1px solid var(--c-border-soft); border-radius:var(--r-pill); background:var(--c-bg); color:var(--c-text); font-size:var(--size-caption); font-weight:var(--weight-medium); max-width:100%; overflow-wrap:anywhere; }
.panel .badge { border-color:var(--a-line-ink); background:var(--a-fill-ink); color:var(--c-on-ink); }
.badge__dot { width:8px; height:8px; flex-shrink:0; border-radius:var(--r-round); background:var(--c-lime-deep); color:var(--c-bg); }
.panel .badge__dot { background:var(--c-lime); color:var(--c-text); }
.hero-title { margin:26px 0 0; font-size:clamp(32px,2.2vw + 16px,48px); line-height:1.14; letter-spacing:var(--tracking-title); color:var(--c-on-ink); }
.hero-title__key { display:block; margin-top:4px; color:var(--c-lime); }
.hero-lede { margin:22px 0 0; max-width:34em; font-size:16.5px; line-height:1.75; color:var(--c-on-ink-soft); }
.hero-lede strong { color:var(--c-on-ink); font-weight:var(--weight-semibold); }
.actions,.get-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:32px; min-width:0; }
.get-actions>.btn { flex:0 1 auto; }
.get-note { margin:14px 0 0; font-size:var(--size-caption); color:var(--c-muted); }
.panel .get-note { color:var(--c-on-ink-soft); }
.get-note [data-pkg-ver] { font-family:var(--f-mono); font-size:12.5px; }
.plats { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; list-style:none; margin:28px 0 0; padding:20px 0 0; border-top:1px solid var(--a-line-ink); }
.plat { display:inline-flex; align-items:center; gap:7px; font-size:var(--size-caption); font-weight:var(--weight-medium); color:var(--c-on-ink-soft); }
.plat svg { width:16px; height:16px; }
.plat:hover { color:var(--c-on-ink); }
.price-pill { margin-left:auto; display:inline-flex; flex-wrap:wrap; align-items:center; min-height:28px; padding:3px 12px; border:1px solid var(--a-line-ink-strong); border-radius:var(--r-pill); font-size:12px; color:var(--c-on-ink-soft); max-width:100%; }
.price-pill b { margin:0 3px; color:var(--c-on-ink); font-weight:var(--weight-semibold); }
.rig { position:relative; margin:0; height:100%; min-width:0; }
.rig__glow { position:absolute; top:-16%; right:-20%; width:82%; aspect-ratio:1; border-radius:var(--r-round); background:radial-gradient(closest-side,var(--a-lime-glow-1),var(--a-lime-glow-2) 55%,var(--c-clear)); pointer-events:none; }
.phone { position:absolute; left:10%; top:8%; height:84%; aspect-ratio:.48; border-radius:var(--r-phone); background:linear-gradient(140deg,var(--c-metal-hi),var(--c-metal) 14%,var(--c-metal-lo) 46%,var(--c-metal) 80%,var(--c-metal-hi)); color:var(--c-on-ink); transform:rotate(-15deg); box-shadow:var(--sh-phone); }
.phone::after { content:""; position:absolute; inset:1px; border-radius:calc(var(--r-phone) - 1px); border:1px solid var(--a-rim); pointer-events:none; }
.phone__key { position:absolute; width:4px; border-radius:var(--r-key); background:linear-gradient(90deg,var(--c-metal-lo),var(--c-metal-hi)); }
.phone__key--action { left:-3px; top:16%; height:4.5%; }
.phone__key--volup { left:-3px; top:23.5%; height:8%; }
.phone__key--voldn { left:-3px; top:33.5%; height:8%; }
.phone__key--power { right:-3px; top:27%; height:12%; background:linear-gradient(90deg,var(--c-metal-hi),var(--c-metal-lo)); }
.phone__bezel { position:absolute; inset:5px; padding:10px; border-radius:calc(var(--r-phone) - 5px); background:var(--c-bezel); color:var(--c-on-ink); }
.phone__screen { position:relative; height:100%; overflow:hidden; border-radius:calc(var(--r-phone) - 15px); background:linear-gradient(180deg,var(--c-screen-top),var(--c-ink) 46%,var(--c-screen-bottom)); color:var(--c-on-ink); }
.phone__screen::after { content:""; position:absolute; inset:0; background:linear-gradient(118deg,var(--a-sheen),var(--c-clear) 36%); }
.phone__band { position:absolute; left:-45%; top:24%; width:190%; height:20%; transform:rotate(-34deg); background:linear-gradient(180deg,var(--c-clear),var(--a-lime-band) 50%,var(--c-clear)); filter:blur(16px); }
.phone__island { position:absolute; top:14px; left:50%; width:32%; height:26px; transform:translateX(-50%); border-radius:var(--r-pill); background:var(--c-bezel); box-shadow:0 0 0 1px var(--a-island-ring); }
.stack { position:absolute; inset:0; }
.qcard,.rulecard { position:absolute; border-radius:var(--r-card); box-shadow:var(--sh-card); }
.qcard { padding:16px 18px 18px; background:var(--c-bg); border:1px solid var(--c-border-soft); color:var(--c-text); }
.qcard--ask { top:25%; right:5%; width:clamp(220px,42%,280px); }
.qcard--manual { top:41%; right:12%; width:clamp(250px,50%,330px); }
.qcard__head { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:var(--weight-semibold); color:var(--c-muted); }
.stamp,.glyph { display:grid; place-items:center; width:24px; height:24px; flex-shrink:0; border-radius:var(--r-round); font-size:12px; font-weight:var(--weight-bold); }
.stamp { background:var(--c-ink); color:var(--c-lime); }
.glyph { background:var(--c-lime); color:var(--c-text); }
.glyph svg { width:14px; height:14px; }
.qcard__body { margin:10px 0 0; font-size:15px; line-height:1.6; }
.key { display:inline-block; min-width:20px; padding:0 5px; border:1px solid var(--c-border-soft); border-radius:var(--r-key); font-family:var(--f-mono); font-size:13px; line-height:20px; text-align:center; }
.rulecard { top:57%; right:3%; width:clamp(260px,48%,312px); padding:13px 18px 15px; transform:rotate(-2.5deg); background:var(--c-ink-raise); border:1px solid var(--a-lime-edge); box-shadow:0 0 0 5px var(--a-lime-ring),var(--sh-card); color:var(--c-on-ink-soft); }
.rulecard__sect { margin:0 0 6px; padding-bottom:6px; border-bottom:1px solid var(--a-line-ink); font-family:var(--f-mono); font-size:11.5px; letter-spacing:.03em; }
.rulecard__code { margin:0; padding:0; background:var(--c-clear); color:var(--c-on-ink-soft); border-radius:0; font-family:var(--f-mono); font-size:13px; line-height:1.8; white-space:pre; }
.rulecard .kw { color:var(--c-lime); }
.rulecard .pol { color:var(--c-on-ink); }

/* 手册时间轴与同舱双页签。 */
.axis { padding:36px var(--gutter) 40px; }
.axis__intro { max-width:780px; margin:0 auto; text-align:center; }
.axis__title { margin:0; }
.axis__title em { font-style:normal; color:var(--c-lime-deep); }
.axis__lede { margin:16px auto 0; max-width:40em; line-height:1.75; color:var(--c-muted); }
.axis__intro .btn { margin-top:28px; }
.axis__stem { position:relative; display:flex; justify-content:center; height:150px; }
.axis__stem::before { content:""; position:absolute; top:0; bottom:0; left:50%; width:1px; background:var(--c-border-soft); }
.axis__node { position:relative; display:grid; place-items:center; width:48px; height:48px; margin-top:46px; border-radius:var(--r-round); background:var(--c-lime-deep); color:var(--c-bg); box-shadow:var(--sh-node); }
.axis__node svg { width:22px; height:22px; }
.cabin { position:relative; max-width:1240px; min-height:420px; margin:0 auto; padding:56px 64px; background:var(--c-panel); color:var(--c-text); border:1px solid var(--c-border-soft); border-radius:var(--r-cabin); }
.cabin__layout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px; }
.cabin__layout>* { min-width:0; }
.cabin__title { margin:0; font-size:26px; }
.cabin__text { margin:16px 0 0; max-width:30em; font-size:15.5px; line-height:1.85; color:var(--c-muted); }
.cabin__cards { position:relative; min-height:300px; }
.fcard { position:absolute; background:var(--c-bg); color:var(--c-text); border:1px solid var(--c-border-soft); border-radius:var(--r-card); box-shadow:var(--sh-card-light); min-width:0; }
.fcard--rule { top:0; right:4%; width:min(340px,92%); padding:16px 20px; }
.fcard--rule pre { margin:0; padding:0; background:var(--c-bg); color:var(--c-muted); font-size:13px; line-height:1.85; border-radius:0; }
.fcard--rule .kw { color:var(--c-lime-deep); font-weight:var(--weight-semibold); }
.fcard--list { top:46%; left:0; width:min(330px,90%); overflow:hidden; }
.setlist { list-style:none; margin:0; padding:0; }
.setlist li { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 16px 13px 18px; font-size:14.5px; font-weight:var(--weight-medium); }
.setlist li+li { border-top:1px solid var(--c-border-soft); }
.setlist__val { display:inline-flex; align-items:center; gap:6px; font-weight:var(--weight-normal); color:var(--c-muted); }
.setlist__val svg { width:14px; height:14px; }
[role="tablist"] { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
[role="tab"] { min-height:44px; padding:9px 20px; border:1px solid var(--c-border-soft); border-radius:var(--r-pill); background:var(--c-bg); color:var(--c-muted); font-size:var(--size-small); }
[role="tab"][aria-selected="true"] { border-color:var(--c-lime); background:var(--c-lime); color:var(--c-text); font-weight:var(--weight-semibold); }
[role="tabpanel"] { min-width:0; }
.toc { position:sticky; top:16px; z-index:10; display:flex; flex-wrap:wrap; gap:8px; padding:12px; border:1px solid var(--c-border-soft); border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text); box-shadow:var(--sh-card-light); margin-bottom:32px; }
.toc a { display:block; padding:10px 14px; min-height:44px; border-radius:var(--r-pill); font-size:var(--size-small); }
.toc a:hover { background:var(--c-panel); color:var(--c-text); }
.toc--flow { position:static; }
.faq-item { border-bottom:1px solid var(--c-border-soft); padding-top:4px; padding-bottom:4px; }
.faq-item summary { position:relative; padding:20px 36px 20px 0; font-weight:var(--weight-semibold); cursor:pointer; list-style:none; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; position:absolute; right:8px; top:18px; color:var(--c-lime-deep); font-size:22px; }
.faq-item[open] summary::after { content:"−"; }
.faq-item__body { padding-bottom:20px; color:var(--c-muted); }
.faq-item__body p:last-child { margin-bottom:0; }
.term-card { padding:28px; border:1px solid var(--c-border-soft); border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text); }
.term-card dt { font-family:var(--f-mono); font-weight:var(--weight-semibold); margin-bottom:12px; overflow-wrap:anywhere; }
.term-card dd { margin:0; color:var(--c-muted); font-size:15px; }
.store-btn { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:56px; max-width:100%; padding:10px 22px; border:1px solid var(--c-ink); border-radius:var(--r-pill); background:var(--c-ink); color:var(--c-on-ink); line-height:1.2; transition:background-color var(--duration-fast),transform var(--duration-fast); }
.store-btn:hover { background:var(--c-ink-raise); color:var(--c-on-ink); transform:translateY(-1px); }
.store-btn svg { width:26px; height:26px; }
.store-btn__text { display:flex; flex-direction:column; gap:4px; min-width:0; }
.store-btn__text small { font-size:11px; }
.store-btn__text strong { font-size:16px; font-weight:var(--weight-semibold); }
.plat-grid { display:flex; flex-wrap:wrap; gap:20px; }
.plat-card { position:relative; flex:1 1 300px; min-width:0; padding:32px; border:1px solid var(--c-border-soft); border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text); box-shadow:var(--sh-card-light); }
.plat-card h3 { font-size:24px; margin-bottom:12px; }
.plat-card p { color:var(--c-muted); }
.plat-card::before { display:none; content:attr(data-mine); position:absolute; right:16px; top:14px; padding:4px 10px; border-radius:var(--r-pill); background:var(--c-lime); color:var(--c-text); font-size:12px; }
.plat-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:24px; }
html[data-visitor-os="ios"] .plat-card[data-plat="ios"] { order:-1; }
html[data-visitor-os="mac"] .plat-card[data-plat="mac"] { order:-1; }
html[data-visitor-os="windows"] .plat-card[data-plat="windows"] { order:-1; }
html[data-visitor-os="android"] .plat-card[data-plat="android"] { order:-1; }
html[data-visitor-os="linux"] .plat-card[data-plat="linux"] { order:-1; }
html[data-visitor-os="ios"] .plat-card[data-plat="ios"]::before,
html[data-visitor-os="mac"] .plat-card[data-plat="mac"]::before,
html[data-visitor-os="windows"] .plat-card[data-plat="windows"]::before,
html[data-visitor-os="android"] .plat-card[data-plat="android"]::before,
html[data-visitor-os="linux"] .plat-card[data-plat="linux"]::before { display:block; }
.wx-open-tip { position:fixed; z-index:90; bottom:calc(20px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); width:min(440px,calc(100% - 32px)); padding:18px 22px; border:1px solid var(--c-border-soft); border-radius:var(--r-card); background:var(--c-ink); color:var(--c-on-ink); box-shadow:var(--sh-card); font-size:var(--size-small); }
.wx-open-tip button { min-height:44px; padding:8px 14px; border:1px solid var(--a-line-ink-strong); border-radius:var(--r-pill); background:var(--c-ink); color:var(--c-on-ink); }
.fact-row,.protocol-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:20px; }
.fact,.tag { display:inline-flex; align-items:center; gap:7px; max-width:100%; padding:6px 12px; border:1px solid var(--c-border-soft); border-radius:var(--r-pill); background:var(--c-bg); color:var(--c-muted); font-size:12px; overflow-wrap:anywhere; }
.panel .fact { border-color:var(--a-line-ink); background:var(--a-fill-ink); color:var(--c-on-ink-soft); }
.protocol-row .tag { font-family:var(--f-mono); }
.official-shot { width:100%; max-width:280px; flex-shrink:0; padding:0; margin:0 auto; }
.official-shot img { display:block; width:100%; height:auto; border-radius:var(--r-shot); }
.official-shot { border:1px solid var(--c-border-soft); border-radius:var(--r-shot); background:var(--c-bg); color:var(--c-text); }
.official-shot figcaption { padding:12px 0 0; color:var(--c-muted); font-size:var(--size-caption); text-align:center; }
.shot-row { display:flex; justify-content:center; align-items:flex-start; gap:28px; }
.device-entry { display:flex; align-items:center; gap:22px; padding:28px; border:1px solid var(--c-border-soft); border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text); box-shadow:var(--sh-card-light); }
.device-entry svg { width:44px; height:56px; color:var(--c-lime-deep); }
.device-entry strong { display:block; margin-bottom:6px; font-size:20px; }
.device-entry p { margin:0; color:var(--c-muted); font-size:var(--size-small); }
.article-card { display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding:30px; border:1px solid var(--c-border-soft); border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text); box-shadow:var(--sh-card-light); }
.article-card h3 { font-size:22px; margin:0; }
.article-card p { margin:0; color:var(--c-muted); font-size:var(--size-small); }
.article-card__link { margin-top:auto; color:var(--c-lime-deep); font-weight:var(--weight-semibold); font-size:var(--size-small); }
.callout { margin:28px 0; padding:22px 26px; border:1px solid var(--c-border-soft); border-left:4px solid var(--c-lime-deep); border-radius:var(--r-card); background:var(--c-panel); color:var(--c-text); }
.callout p:last-child { margin-bottom:0; }
.callout--warning { border-left-color:var(--c-warn); }
.store-guide { padding:28px; border:1px solid var(--c-border-soft); border-radius:var(--r-card); background:var(--c-panel); color:var(--c-text); }
.store-guide h2 { font-size:24px; }
.dl-fab { position:fixed; z-index:30; right:24px; bottom:calc(24px + env(safe-area-inset-bottom)); display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:12px 22px; border:1px solid var(--c-lime); border-radius:var(--r-pill); background:var(--c-lime); color:var(--c-text); box-shadow:var(--sh-card-light); font-size:var(--size-small); font-weight:var(--weight-semibold); }
.dl-fab svg { width:22px; height:22px; }
.table-scroll { max-width:100%; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.data-table { width:100%; border-collapse:collapse; text-align:left; }
.data-table th,.data-table td,.prose table th,.prose table td { min-width:7em; padding:16px; border-bottom:1px solid var(--c-border-soft); vertical-align:top; overflow-wrap:normal; word-break:normal; }
.data-table th,.prose table th { background:var(--c-panel); color:var(--c-text); font-weight:var(--weight-semibold); }
.prose table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; min-width:0; border-collapse:collapse; }
#install table code { word-break:normal; overflow-wrap:normal; white-space:pre; }

/* 预览专用陈列，不引入额外资源。 */
.preview-section { padding-top:64px; padding-bottom:64px; }
.preview-section:nth-of-type(even) { background:var(--c-panel); color:var(--c-text); }
.preview-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:20px; }
.preview-grid>* { min-width:0; }
.preview-title { font-size:24px; margin-bottom:28px; }
.preview-swatch { display:flex; align-items:center; gap:12px; margin:0; font-family:var(--f-mono); font-size:12px; overflow-wrap:anywhere; }
.preview-swatch::before { content:""; display:block; width:44px; height:44px; flex-shrink:0; border:1px solid var(--c-sep); border-radius:var(--r-mark); background:var(--swatch); }
.sw-bg { --swatch:var(--c-bg); }
.sw-panel { --swatch:var(--c-panel); }
.sw-ink { --swatch:var(--c-ink); }
.sw-raise { --swatch:var(--c-ink-raise); }
.sw-top { --swatch:var(--c-screen-top); }
.sw-bottom { --swatch:var(--c-screen-bottom); }
.sw-bezel { --swatch:var(--c-bezel); }
.sw-hi { --swatch:var(--c-metal-hi); }
.sw-metal { --swatch:var(--c-metal); }
.sw-lo { --swatch:var(--c-metal-lo); }
.sw-border { --swatch:var(--c-border-soft); }
.sw-sep { --swatch:var(--c-sep); }
.sw-lime { --swatch:var(--c-lime); }
.sw-hover { --swatch:var(--c-lime-hover); }
.sw-deep { --swatch:var(--c-lime-deep); }
.sw-text { --swatch:var(--c-text); }
.sw-muted { --swatch:var(--c-muted); }
.sw-on { --swatch:var(--c-on-ink); }
.sw-soft { --swatch:var(--c-on-ink-soft); }
.sw-faint { --swatch:var(--c-on-ink-faint); }
.sw-success { --swatch:var(--c-success); }
.sw-warn { --swatch:var(--c-warn); }
.sw-error { --swatch:var(--c-error); }
.preview-shot { display:grid; place-items:center; aspect-ratio:750/1334; border-radius:var(--r-shot); background:var(--c-panel); color:var(--c-muted); font-family:var(--f-mono); font-size:var(--size-small); }
.preview-dark { padding:28px; border-radius:var(--r-panel); background:var(--c-ink); color:var(--c-on-ink); }
.preview-header { border-bottom:1px solid var(--c-border-soft); }
.preview-header .mobile-nav { position:static; }
@media(max-width:1240px) {
  .panel { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .price-pill { margin-left:0; }
}
@media(max-width:960px) {
  .stage { padding-inline:12px; }
  .panel { height:auto; grid-template-columns:minmax(0,1fr); padding:32px var(--pad) 0; }
  .copy { padding:0; }
  .hero-title { font-size:clamp(24px,7vw,30px); }
  .hero-lede { font-size:15.5px; }
  .rig { height:470px; margin-top:30px; }
  .rig__glow { top:-8%; right:-30%; width:110%; }
  .phone { left:50%; top:26px; height:560px; transform:translateX(-50%); }
  .stack { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:12px; padding:0 6px 30px; }
  .qcard { position:relative; top:auto; right:auto; width:min(330px,100%); }
  .qcard--ask { align-self:flex-start; margin-left:0; }
  .qcard--manual { align-self:flex-end; margin-right:0; }
  .rulecard { display:none; }
  .axis { padding-top:44px; }
  .axis__stem { justify-content:flex-start; padding-left:4px; height:120px; }
  .axis__stem::before { left:28px; }
  .axis__intro { text-align:left; }
  .cabin { padding:32px 22px; }
  .cabin__layout { grid-template-columns:minmax(0,1fr); gap:28px; }
  .cabin__cards { display:flex; flex-direction:column; gap:14px; min-height:0; }
  .fcard { position:relative; top:auto; right:auto; left:auto; width:100%; }
}
@media(max-width:640px) {
  .fact-row,.protocol-row { justify-content:center; flex-direction:row; }
  .plats { gap:10px 14px; }
  .shot-row { flex-direction:column; align-items:center; }
  .plat-card { padding:36px 22px 24px; flex-basis:100%; }
  .device-entry { padding:22px; gap:16px; }
  .dl-fab { right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); width:52px; height:52px; padding:0; border-radius:var(--r-round); }
  .dl-fab__text { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  body.has-article-fab { padding-bottom:84px; }
  #install table,#install tbody,#install tr,#install td { display:block; width:100%; min-width:0; }
  #install thead { display:none; }
  #install tr { padding-top:12px; padding-bottom:12px; border-bottom:1px solid var(--c-border-soft); }
  #install td { border-bottom:0; padding:8px 0; }
  #install td code { display:block; max-width:100%; overflow-x:auto; white-space:pre; overflow-wrap:normal; word-break:normal; }
}