/* 首页：拍板的直角 Bento 构图；装置保持静态。 */
.hero { padding-top:24px }
.bento {
  display:grid;
  grid-template-columns:26fr 26fr 24fr 24fr;
  grid-template-rows:minmax(470px,auto) 112px 104px;
  grid-template-areas:"main main dev dev" "plat plat dev dev" "ka kb kc kd";
  gap:1px;
  background:var(--line);
  color:var(--ink);
  border-top:1px solid var(--line);
}
.cell { position:relative; min-width:0 }
.cell-main {
  grid-area:main;
  background:var(--panel);
  color:var(--ink);
  padding:44px 52px 40px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.eyebrow { display:inline-flex; align-items:center; gap:11px; margin:0; font:var(--weight-label) 12px/1 var(--font-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--accent) }
.eyebrow-dot { width:7px; height:7px; flex-shrink:0; border-radius:var(--radius-round); background:var(--accent); color:var(--on-accent); box-shadow:0 0 0 4px var(--accent-tint),0 0 0 5px var(--accent-ring) }
.hero-title { margin:22px 0 18px; font-size:var(--display-size); line-height:1.1; letter-spacing:-.02em }
.hero-lead { margin:0; max-width:520px; font-size:16px; line-height:1.75; color:var(--muted) }
.hero-lead strong,.hero-lead code { color:var(--ink) }
.hero-lead code { font-size:.86em }
.get-actions,.cta-row { display:flex; align-items:stretch; flex-wrap:wrap; gap:24px; margin-top:28px }
.get-actions > *,.cta-row > * { min-width:0; flex-shrink:1 }
.get-note { margin:18px 0 0; font:var(--weight-body) var(--small-size)/1.5 var(--font-mono); color:var(--muted) }
.get-note [data-pkg-ver] { color:var(--ink); font-weight:var(--weight-label) }
.cell-plat { grid-area:plat; background:var(--panel-2); color:var(--ink); padding:18px 52px; display:flex; flex-direction:column; justify-content:center; gap:13px }
.plat-head { display:flex; align-items:center; justify-content:space-between; gap:16px; min-width:0 }
.plat-k { margin:0; font:11px/1.5 var(--font-mono); letter-spacing:.14em; color:var(--muted) }
.price-pill,.badge,.fact-pill {
  display:inline-flex;
  align-items:center;
  gap:8px;
  max-width:100%;
  padding:5px 11px;
  border-radius:var(--radius);
  background:var(--panel);
  color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line);
  font-size:var(--small-size);
  font-weight:var(--weight-strong);
  line-height:1.5;
  overflow-wrap:anywhere;
}
.price-pill::before { content:""; width:5px; height:5px; flex-shrink:0; background:var(--accent); color:var(--on-accent) }
.price-pill b { color:var(--accent) }
.fact-row,.badge-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-block:20px }
.badge-accent { background:var(--accent-tint); color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent-ring) }
.plat-list { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 26px }
.plat-list a { display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:var(--weight-label); color:var(--ink); text-decoration:none }
.plat-list svg { width:17px; height:17px; color:var(--muted) }
.plat-list a:hover,.plat-list a:hover svg { color:var(--accent) }
.cell-dev { grid-area:dev; background:var(--bg); color:var(--ink); padding:20px 22px; display:grid; place-items:center; overflow:hidden }
.dv { width:100%; height:100%; max-height:540px; display:block }
.dv-body { fill:var(--panel); stroke:var(--ink); stroke-width:1.5 }
.dv-frame { fill:none; stroke:var(--ink); stroke-width:1.5 }
.dv-screen { fill:var(--panel) }
.dv-gridfill { fill:var(--line) }
.dv-orbit { fill:none; stroke:var(--accent); stroke-width:1 }
.dv-inner { fill:none; stroke:var(--accent); stroke-opacity:.42; stroke-width:1; stroke-dasharray:2 5 }
.dv-halo { fill:url(#dv-halo) }
.dv-core { fill:var(--accent) }
.dv-ring { fill:none; stroke:var(--accent); stroke-width:1 }
.dv-lbl { fill:var(--muted); font-family:var(--font-mono); font-size:11px; letter-spacing:.02em }
.dv-scatter { fill:var(--muted); opacity:.3 }
.hs0 { stop-color:var(--accent); stop-opacity:.5 }
.hs1 { stop-color:var(--accent); stop-opacity:.16 }
.hs2 { stop-color:var(--accent); stop-opacity:0 }
.o-hi { opacity:1 }
.o-md { opacity:.74 }
.o-lo { opacity:.46 }
.mini { position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:10px; padding:18px 24px; text-decoration:none; color:var(--ink); min-width:0; transition:transform .25s var(--ease),box-shadow .25s var(--ease) }
.mini:hover { transform:translateY(-3px); box-shadow:var(--shadow-lift); z-index:2 }
.mini-a { grid-area:ka; background:var(--bg); color:var(--ink) }
.mini-b { grid-area:kb; background:var(--panel); color:var(--ink) }
.mini-c { grid-area:kc; background:var(--panel-2); color:var(--ink) }
.mini-d { grid-area:kd; background:var(--panel); color:var(--ink) }
.mini-k { display:flex; align-items:center; gap:8px; margin:0; font:11px/1.4 var(--font-mono); letter-spacing:.12em; color:var(--muted) }
.mini-k::before { content:""; width:5px; height:5px; flex-shrink:0; background:var(--accent); color:var(--on-accent) }
.mini-go { margin-left:auto; color:var(--muted) }
.mini-v { margin:0; font-size:14px; font-weight:var(--weight-strong); line-height:1.5 }
.mini-code { margin:0; font:12.5px/1.6 var(--font-mono); overflow-wrap:anywhere }
.statusbar { border-block:1px solid var(--line) }
.sb-in { min-height:48px; display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding-block:8px; padding-inline:var(--inset); background-image:radial-gradient(circle,var(--line) 1px,var(--clear) 1.3px); background-size:7px 7px; background-position:3px 3px; font:11.5px/1.5 var(--font-mono) }
.sb-seg { display:inline-flex; align-items:center; gap:8px; padding:5px 10px; background:var(--bg); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line) }
.sb-k { color:var(--muted); letter-spacing:.12em }
.sb-mark { width:6px; height:6px; flex-shrink:0; background:var(--accent); color:var(--on-accent) }
.sb-fill { flex:1 }
.feat-k { margin:0 0 14px; font:12px/1.5 var(--font-mono); letter-spacing:.16em; color:var(--muted) }
.feat-h { margin:0 0 32px; font-size:30px }
.feat-tabs,[role="tablist"] { display:flex; flex-wrap:wrap; gap:12px 30px; margin-bottom:28px; min-width:0 }
.feat-tab,[role="tab"] { appearance:none; border:0; border-radius:var(--radius); background:var(--clear); color:var(--muted); padding:8px 0; min-height:44px; font:13.5px/1.6 var(--font-mono); letter-spacing:.04em; box-shadow:inset 0 -1px 0 var(--line); overflow-wrap:anywhere }
[role="tab"][aria-selected="true"] { color:var(--accent); box-shadow:inset 0 -2px 0 var(--accent) }
.rule-window { min-width:0; border:1px solid var(--line); background:var(--panel); color:var(--ink) }
.rule-columns { display:grid; grid-template-columns:1fr 1fr; min-width:0 }
.rule-columns > * { min-width:0; padding:32px }
.rule-copy { border-left:1px solid var(--line); position:relative; padding-top:64px }
.rule-copy pre { background:var(--panel); color:var(--ink); border:0; padding:0; margin:0 }
.copy-btn { position:absolute; top:16px; right:16px; border:1px solid var(--line); border-radius:var(--radius); padding:8px 14px; min-height:44px; background:var(--panel); color:var(--accent); font:13px/1.5 var(--font-mono) }
.rule-foot { margin:0; border-top:1px solid var(--line); padding:16px 32px; color:var(--muted); font-size:var(--small-size) }
.toc { display:flex; flex-wrap:wrap; gap:8px 24px; padding:16px 20px; border-block:1px solid var(--line); background:var(--panel); color:var(--ink); min-width:0 }
.toc a { min-height:44px; display:inline-flex; align-items:center; color:var(--muted); text-decoration:none }
.toc a:hover,.toc a[aria-current] { color:var(--accent) }
.toc-sticky { position:sticky; top:0; z-index:10 }
.faq-item { border-bottom:1px solid var(--line); background:var(--panel); color:var(--ink); padding-inline:24px }
.faq-item:first-child { border-top:1px solid var(--line) }
.faq-item summary { padding-block:22px; padding-right:32px; min-height:44px; position:relative; list-style:none; cursor:pointer; font-weight:var(--weight-strong) }
.faq-item summary::-webkit-details-marker { display:none }
.faq-item summary::after { content:"+"; position:absolute; right:0; top:20px; font-family:var(--font-mono); color:var(--accent) }
.faq-item[open] summary::after { content:"−" }
.faq-answer { padding-bottom:24px; color:var(--muted) }
.faq-answer p:last-child { margin:0 }
.term-card { padding:28px; border-bottom:1px solid var(--line); background:var(--panel); color:var(--ink); min-width:0 }
.term-card h3 { color:var(--accent); font:var(--weight-strong) 19px/1.5 var(--font-mono); margin:0 0 12px; overflow-wrap:anywhere }
.term-category { display:block; color:var(--muted); font-size:var(--small-size); margin-bottom:12px }
.term-card p { margin:0 }
.appstore-btn { display:inline-flex; justify-content:center; align-items:center; gap:12px; min-height:56px; padding:10px 22px; max-width:100%; border:1px solid var(--accent); border-radius:var(--radius); background:var(--accent); color:var(--on-accent); text-decoration:none; transition:background-color var(--speed) var(--ease) }
.appstore-btn:hover { background:var(--accent-dark); color:var(--on-accent) }
.appstore-btn svg { width:27px; height:30px; fill:currentColor }
.appstore-label { display:flex; flex-direction:column; line-height:1.4; min-width:0 }
.appstore-label small { font-size:11px; font-weight:var(--weight-label) }
.appstore-label strong { font-size:16px; font-weight:var(--weight-strong) }
.plat-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); color:var(--ink); border:1px solid var(--line) }
.plat-card { position:relative; padding:32px; min-width:0; background:var(--panel); color:var(--ink); border-radius:var(--radius) }
.plat-card h3 { margin:0 0 12px; display:block }
.plat-card h3 svg { width:24px; height:24px; vertical-align:middle; margin-right:8px }
.plat-card p { color:var(--muted) }
.plat-card::before { content:attr(data-mine); display:none; width:fit-content; margin-bottom:16px; padding:4px 10px; background:var(--accent); color:var(--on-accent); font-size:12px }
.plat-actions { display:flex; flex-wrap:wrap; gap:20px; margin-top:24px; min-width:0 }
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; left:16px; right:16px; bottom:24px; margin-inline:auto; width:fit-content; max-width:560px; z-index:70; border:1px solid var(--accent); padding:20px 24px; background:var(--panel); color:var(--ink); box-shadow:var(--shadow-lift) }
.official-shot { width:100%; max-width:280px; min-width:0; flex-shrink:0; margin:0; }
.official-shot img { display:block; width:100%; height:auto; border-radius:var(--radius-shot) }
.official-shot { outline:1px solid var(--line); outline-offset:0; border-radius:var(--radius-shot) }
.official-shot figcaption { margin:0; padding-block:12px; color:var(--muted); font-size:var(--small-size); line-height:1.6 }
.shot-row { display:flex; justify-content:center; flex-wrap:wrap; align-items:flex-start; gap:32px }
.device-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); color:var(--ink); border:1px solid var(--line) }
.device-entry { display:flex; gap:24px; align-items:center; padding:28px; min-width:0; background:var(--panel); color:var(--ink); text-decoration:none }
.device-entry > svg { width:42px; height:56px; color:var(--accent); flex-shrink:0 }
.device-entry > span { min-width:0 }
.device-entry strong { display:block; font-size:18px; margin-bottom:6px }
.device-entry small { display:block; color:var(--muted); line-height:1.7 }
.device-entry:hover { background:var(--panel-2); color:var(--accent) }
.article-card { display:flex; flex-direction:column; padding:28px; min-width:0; background:var(--panel); color:var(--ink); border-bottom:1px solid var(--line) }
.article-card h3 { margin:16px 0; font-size:21px }
.article-card h3 a { color:var(--ink); text-decoration:none }
.article-card h3 a:hover { color:var(--accent) }
.article-card p { color:var(--muted) }
.article-meta { display:flex; flex-wrap:wrap; gap:12px; color:var(--muted); font:12px/1.6 var(--font-mono) }
.article-card > a { margin-top:auto }
.callout { margin:28px 0; padding:24px 28px; border:1px solid var(--accent-ring); border-left:3px solid var(--accent); background:var(--accent-tint); color:var(--ink) }
.callout p:last-child { margin:0 }
.callout strong { color:var(--accent) }
.store-guide { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:32px; padding:32px; border:1px solid var(--line); background:var(--panel-2); color:var(--ink) }
.store-guide-copy { flex:1 1 280px; min-width:0 }
.store-guide h2,.store-guide h3 { margin-top:0 }
.store-guide-copy p:last-child { margin:0 }
.table-scroll { overflow-x:auto; max-width:100%; min-width:0; -webkit-overflow-scrolling:touch }
.data-table { border-collapse:collapse; width:100%; background:var(--panel); color:var(--ink) }
.data-table th,.data-table td,.prose table th,.prose table td,.article-body table th,.article-body table td {
  min-width:7em;
  padding:16px 20px;
  border:1px solid var(--line);
  text-align:left;
  vertical-align:top;
  overflow-wrap:normal;
  word-break:normal;
}
.data-table th,.prose table th,.article-body table th { background:var(--panel-2); color:var(--ink); font-weight:var(--weight-strong) }
.prose table,.article-body table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; min-width:0; border-collapse:collapse; background:var(--panel); color:var(--ink) }
#install table code { word-break:normal; overflow-wrap:normal; white-space:pre-wrap }
.dl-fab { position:fixed; z-index:15; right:24px; bottom:24px; display:flex; align-items:center; gap:12px; min-height:52px; padding:14px 20px; border:1px solid var(--accent); border-radius:var(--radius); background:var(--accent); color:var(--on-accent); text-decoration:none; box-shadow:var(--shadow-lift) }
.dl-fab svg { width:22px; height:22px }
.dl-fab:hover { background:var(--accent-dark); color:var(--on-accent) }
/* 无脚本设计预览家具 */
.preview-section h2 { margin-top:0; margin-bottom:32px }
.preview-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px }
.preview-grid > * { min-width:0 }
.swatch-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px }
.swatch { border:1px solid var(--line); min-width:0; background:var(--panel); color:var(--ink); padding:12px; font:12px/1.6 var(--font-mono) }
.swatch-fill { display:block; height:64px; margin-bottom:12px; border:1px solid var(--line) }
.swatch-bg { background:var(--bg); color:var(--ink) }
.swatch-panel { background:var(--panel); color:var(--ink) }
.swatch-panel2 { background:var(--panel-2); color:var(--ink) }
.swatch-line { background:var(--line); color:var(--ink) }
.swatch-accent { background:var(--accent); color:var(--on-accent) }
.swatch-dark { background:var(--accent-dark); color:var(--on-accent) }
.swatch-ink { background:var(--ink); color:var(--panel) }
.swatch-muted { background:var(--muted); color:var(--panel) }
.swatch-success { background:var(--success); color:var(--ink) }
.swatch-warn { background:var(--warn); color:var(--ink) }
.swatch-error { background:var(--error); color:var(--panel) }
.swatch-tint { background:var(--accent-tint); color:var(--ink) }
.swatch-ring { background:var(--accent-ring); color:var(--ink) }
.swatch-soft { background:var(--on-accent-soft); color:var(--ink) }
.swatch-veil { background:var(--veil); color:var(--ink) }
.shot-placeholder { aspect-ratio:750 / 1334; width:100%; display:grid; place-items:center; border-radius:var(--radius-shot); border:1px solid var(--line); background:var(--panel-2); color:var(--muted); font:12px/1.8 var(--font-mono); text-align:center }
.type-display { font:var(--weight-heavy) var(--display-size)/1.1 var(--font-display); letter-spacing:-.02em }
.preview-buttons { display:flex; flex-wrap:wrap; align-items:center; gap:28px; padding-block:12px }
@media (max-width:1100px) {
  .bento { grid-template-columns:1fr 1fr; grid-template-rows:auto; grid-template-areas:"main main" "dev dev" "plat plat" "ka kb" "kc kd" }
  .cell-dev { height:460px }
}
@media (max-width:900px) {
  .preview-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .swatch-grid { grid-template-columns:repeat(3,minmax(0,1fr)) }
}
@media (max-width:768px) {
  .hero-title { font-size:clamp(24px,5vw,30px) }
  .rule-columns { grid-template-columns:minmax(0,1fr) }
  .rule-copy { border-left:0; border-top:1px solid var(--line) }
}
@media (max-width:640px) {
  .cell-main { padding:36px 22px }
  .cell-plat { padding:20px 22px }
  .plat-head { flex-direction:column; align-items:flex-start }
  .bento { grid-template-columns:minmax(0,1fr); grid-template-areas:"main" "dev" "plat" "ka" "kb" "kc" "kd" }
  .cell-dev { height:340px; padding:12px }
  .get-actions,.cta-row { gap:22px; margin-top:26px }
  .hero-lead { font-size:15px }
  .price-pill { font-size:11px }
  .plat-list { gap:10px 20px }
  .fact-row,.badge-row { flex-direction:row; flex-wrap:wrap; justify-content:center; gap:6px }
  .fact-pill,.badge { font-size:11px; padding:4px 8px }
  .plat-grid,.device-grid,.preview-grid { grid-template-columns:minmax(0,1fr) }
  .plat-card { padding:24px }
  .plat-actions { gap:20px }
  .rule-columns > * { padding-inline:22px }
  .rule-copy { padding-top:72px }
  .rule-foot { padding-inline:22px }
  .feat-tabs,[role="tablist"] { gap:10px 18px }
  .shot-row { flex-direction:column; align-items:center }
  .official-shot { margin-inline:auto }
  .device-entry { padding:22px; gap:20px }
  .swatch-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .callout { padding:20px }
  .store-guide { padding:24px }
  #install table,#install tbody,#install tr,#install td { display:block; width:100%; min-width:0 }
  #install thead { display:none }
  #install td { border-bottom:0; overflow-x:auto }
  #install tr { margin-bottom:20px; border-bottom:1px solid var(--line) }
  #install table code { word-break:normal; overflow-wrap:normal; white-space:pre }
  .dl-fab { width:52px; height:52px; min-height:52px; padding:0; justify-content:center; border-radius:var(--radius-round); right:16px; bottom:16px }
  .dl-fab span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
  body:has(.dl-fab) { padding-bottom:84px }
}