/* Acquisition components */
.get-actions { display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px }
.get-actions > * { min-width:0;max-width:100% }
.get-note { margin-top:14px;font-size:13px;color:var(--text-muted) }
.get-note [data-pkg-ver] { font-family:var(--font-mono);font-size:12.5px }
.hero .get-note { color:var(--hero-text-soft) }
.hero .get-note [data-pkg-ver] { color:var(--hero-text-strong) }
.appstore-button { min-height:54px;text-align:left;gap:12px }
.appstore-button > svg { width:25px;height:28px;fill:currentColor;flex-shrink:0 }
.appstore-button__text { display:block;min-width:0 }
.appstore-button small { display:block;font-size:11px;line-height:1.4;font-weight:400 }
.appstore-button strong { display:block;font-size:16px;line-height:1.4;font-weight:500 }
.plat-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px }
.plat-card { position:relative;min-width:0;padding:32px;border:1px solid var(--border);border-radius:var(--r-xl);background:var(--bg-panel);color:var(--text);box-shadow:var(--shadow-soft);scroll-margin-top:28px }
.plat-card h3 { margin-bottom:16px }
.plat-card p { margin-top:12px;color:var(--text-muted) }
.plat-actions { display:flex;flex-wrap:wrap;gap:12px;margin-top:24px }
.plat-actions > * { min-width:0;max-width:100% }
.plat-card::before { display:none;content:attr(data-mine);margin-bottom:16px;padding:4px 10px;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent-dark);font-size:12px }
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:inline-flex }
.wx-open-tip { position:fixed;z-index:90;bottom:24px;left:50%;transform:translateX(-50%);width:calc(100% - var(--gutter) * 2);max-width:520px;padding:20px 24px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg-panel);color:var(--text);box-shadow:var(--shadow-float);font-size:14px }
.wx-open-tip button { min-height:44px;margin-top:12px;padding:8px 14px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent-dark) }
.facts { display:flex;flex-wrap:wrap;align-items:center;gap:10px;list-style:none;padding:0 }
.fact,.chip,.badge { display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:5px 12px;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--bg-panel);color:var(--text-muted);font-size:12px;line-height:1.5;overflow-wrap:anywhere }
.fact strong { font-weight:500;color:var(--text) }
.chip { min-height:24px;padding:3px 10px;border:0;background:var(--accent-soft);color:var(--accent-dark) }
.badge::before { content:"";width:6px;height:6px;flex-shrink:0;border-radius:var(--r-round);background:var(--accent) }
.badge--success::before { background:var(--success) }
.badge--warn::before { background:var(--warn) }
.badge--error::before { background:var(--error) }
.hero .facts { margin-top:18px }
.hero .fact { border-color:var(--hero-line-strong);background:var(--hero-ink);color:var(--hero-text-soft) }
.hero .fact strong { color:var(--hero-text-strong) }

/* Capability rows and coordinated demonstration */
.caps { padding-top:140px;padding-bottom:140px;padding-inline:var(--gutter);background:var(--bg);color:var(--text) }
.caps__head { max-width:1328px;margin:0 auto 40px }
.caps__title { margin-top:12px;font-size:32px;line-height:1.25;letter-spacing:-.01em }
.caps__list { max-width:1328px;margin-inline:auto;border-top:1px solid var(--border) }
.cap { position:relative;display:grid;grid-template-columns:28px 220px minmax(0,1fr);align-items:center;gap:0;width:100%;padding:20px 24px;text-align:left;background:var(--clear);color:var(--text);border:0;border-bottom:1px solid var(--border);cursor:pointer;transition:background-color var(--duration-fast) ease }
.cap > * { min-width:0 }
.cap svg { width:20px;height:20px;fill:none;stroke:var(--text-muted);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round }
.cap__name { font-size:15.5px;font-weight:500;color:var(--text) }
.cap__desc { font-size:15px;color:var(--text-muted) }
.cap:hover,.cap[aria-selected="true"] { background:var(--bg-panel);color:var(--text) }
.cap[aria-selected="true"]::before { content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent) }
.cap[aria-selected="true"] svg { stroke:var(--accent) }
.tab-panel { min-width:0;scroll-margin-top:28px }
.demo { display:grid;grid-template-columns:40fr 60fr;min-height:380px;max-width:1328px;margin-inline:auto;margin-top:140px;overflow:hidden;border-radius:var(--r-xl);background:var(--bg-panel2);color:var(--hero-text-strong) }
.demo__copy { min-width:0;padding:48px 40px;align-self:center }
.demo__copy h3 { margin-bottom:20px }
.demo__copy p { font-size:15px;line-height:1.85;color:var(--hero-text-soft) }
.demo__scene { min-width:0;display:flex;align-items:center;justify-content:center;padding:48px;background:var(--demo-surface);color:var(--screen-ink) }
.demo__window { width:100%;max-width:560px;min-width:0;padding:28px;border-radius:var(--r-lg);background:var(--bg-panel);color:var(--text);box-shadow:var(--shadow-float) }
.demo__window pre { border:0;padding:0;border-radius:0;background:var(--bg-panel);color:var(--text) }
.rule-mark { text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:5px }
.tablist { display:flex;flex-wrap:wrap;gap:8px;border-bottom:1px solid var(--border);padding-bottom:12px }
.tablist [role="tab"] { min-height:44px;padding:10px 18px;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--bg-panel);color:var(--text-muted) }
.tablist [role="tab"][aria-selected="true"] { background:var(--accent-soft);color:var(--accent-dark);border-color:var(--accent) }
.tablist + .tab-panel { margin-top:24px }

/* Long-form navigation and reference content */
.toc { display:flex;flex-wrap:wrap;gap:8px;padding:16px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg-panel);color:var(--text);margin-bottom:40px }
.toc a { display:flex;align-items:center;min-height:44px;padding:8px 14px;border-radius:var(--r-sm);font-size:14px;color:var(--text-muted) }
.toc a:hover,.toc a[aria-current] { background:var(--accent-soft);color:var(--accent-dark) }
.toc--sticky { position:sticky;top:16px;z-index:10 }
.faq-group { border:1px solid var(--border);border-radius:var(--r-xl);background:var(--bg-panel);color:var(--text);overflow:hidden }
.faq-item + .faq-item { border-top:1px solid var(--border) }
.faq-item summary { position:relative;min-height:64px;padding:20px 56px 20px 24px;cursor:pointer;list-style:none;font-size:16px }
.faq-item summary::-webkit-details-marker { display:none }
.faq-item summary::after { content:"+";position:absolute;right:24px;top:19px;font-size:20px;color:var(--accent) }
.faq-item[open] summary::after { content:"−" }
.faq-item__body { padding:0 24px 24px;color:var(--text-muted);line-height:1.85 }
.faq-item__body a { color:var(--accent);text-decoration:underline;text-underline-offset:4px }
.term-card { min-width:0;padding:28px;border-radius:var(--r-lg);background:var(--bg-panel);color:var(--text);box-shadow:var(--shadow-soft);border-top:2px solid var(--accent) }
.term-card dt,.term-card h3 { font-family:var(--font-mono);font-size:17px;overflow-wrap:anywhere }
.term-card dd,.term-card p { margin-top:16px;color:var(--text-muted);line-height:1.85 }
.term-card .chip { margin-top:20px }
.callout { padding:24px 28px;border-left:2px solid var(--accent);border-radius:0 var(--r-lg) var(--r-lg) 0;background:var(--accent-soft);color:var(--accent-dark);line-height:1.85 }
.callout p + p { margin-top:12px }
.callout strong { font-weight:500 }
.official-shot { width:100%;max-width:280px;min-width:0;flex-shrink:0;margin-inline:auto }
.official-shot img { display:block;width:100%;height:auto;border-radius:10px }
.official-shot { border:1px solid var(--border);border-radius:var(--r-shot);background:var(--bg-panel);color:var(--text-muted) }
.official-shot figcaption { padding:12px 14px;font-size:12px;line-height:1.6 }
.shot-layout { display:grid;grid-template-columns:minmax(0,1fr) 280px;align-items:start;gap:48px }
.shot-layout > * { min-width:0 }
.device-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px }
.device-entry { display:grid;grid-template-columns:48px minmax(0,1fr) 16px;align-items:center;gap:20px;min-width:0;padding:28px;border:1px solid var(--border);border-radius:var(--r-xl);background:var(--bg-panel);color:var(--text);box-shadow:var(--shadow-soft) }
.device-entry > svg { width:44px;height:52px;fill:none;stroke:var(--text-muted);stroke-width:1.4 }
.device-entry h3 { font-size:20px }
.device-entry p { margin-top:8px;font-size:14px;color:var(--text-muted) }
.device-entry__arrow { color:var(--accent) }
.device-entry:hover { border-color:var(--accent) }
.article-card { display:flex;flex-direction:column;min-width:0;padding:32px;border-radius:var(--r-xl);background:var(--bg-panel);color:var(--text);box-shadow:var(--shadow-soft) }
.article-card__meta { display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:24px;color:var(--text-muted);font-size:12px }
.article-card h3 { font-size:22px;line-height:1.45 }
.article-card h3 a:hover { color:var(--accent) }
.article-card p { margin-top:16px;color:var(--text-muted);font-size:14px;line-height:1.85 }
.article-card__link { align-self:flex-start;margin-top:24px;color:var(--accent);font-size:14px }
.article-get-card { display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding:32px;border:1px solid var(--border);border-radius:var(--r-xl);background:var(--bg-panel);color:var(--text);box-shadow:var(--shadow-soft) }
.article-get-card__copy { flex:1 1 260px;min-width:0 }
.article-get-card__copy h2 { font-size:24px }
.article-get-card__copy p { margin-top:12px;color:var(--text-muted);font-size:14px }
.dl-fab { position:fixed;right:24px;bottom:24px;z-index:30;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:12px 20px;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-btn);font-size:14px }
.dl-fab svg { width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round }
.dl-fab:hover { background:var(--accent-dark);color:var(--on-accent) }
.table-scroll { max-width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:var(--r-md) }
.data-table { width:100%;border-collapse:collapse;background:var(--bg-panel);color:var(--text);font-size:14px }
.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-bottom:1px solid var(--border);text-align:left;vertical-align:top;overflow-wrap:normal;word-break:normal }
.data-table th,.prose table th,.article-body table th { background:var(--screen);color:var(--text);font-weight:500 }
.data-table tr:last-child td { border-bottom:0 }
.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(--bg-panel);color:var(--text);font-size:14px }
.prose table code,.article-body table code { overflow-wrap:anywhere }
#install code { overflow-wrap:normal;word-break:normal;white-space:pre-wrap }
#install td { max-width:38em }
#install td code { display:block;max-width:100%;overflow-x:auto }

/* Preview-only furniture, with no image or script dependency */
.preview-section { padding-top:140px;padding-bottom:0 }
.preview-section:last-child { padding-bottom:140px }
.preview-section > h2 { margin-bottom:40px }
.preview-row { display:flex;flex-wrap:wrap;align-items:center;gap:20px }
.preview-palette { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px }
.swatch { min-width:0;font-family:var(--font-mono);font-size:12px;overflow-wrap:anywhere }
.swatch::before { content:"";display:block;height:72px;margin-bottom:10px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--swatch,var(--bg));box-shadow:var(--shadow-soft) }
.sw-bg { --swatch:var(--bg) }
.sw-panel { --swatch:var(--bg-panel) }
.sw-panel2 { --swatch:var(--bg-panel2) }
.sw-border { --swatch:var(--border) }
.sw-accent { --swatch:var(--accent) }
.sw-accent-dark { --swatch:var(--accent-dark) }
.sw-accent-soft { --swatch:var(--accent-soft) }
.sw-accent-tint { --swatch:var(--accent-tint) }
.sw-on-accent { --swatch:var(--on-accent) }
.sw-text { --swatch:var(--text) }
.sw-muted { --swatch:var(--text-muted) }
.sw-success { --swatch:var(--success) }
.sw-warn { --swatch:var(--warn) }
.sw-error { --swatch:var(--error) }
.sw-hero { --swatch:var(--hero-ink) }
.sw-hero-line { --swatch:var(--hero-line) }
.sw-hero-line-strong { --swatch:var(--hero-line-strong) }
.sw-hero-strong { --swatch:var(--hero-text-strong) }
.sw-hero-mid { --swatch:var(--hero-text-mid) }
.sw-hero-soft { --swatch:var(--hero-text-soft) }
.sw-deep { --swatch:var(--field-deep) }
.sw-main { --swatch:var(--field-main) }
.sw-glow { --swatch:var(--field-glow) }
.sw-shade { --swatch:var(--field-shade) }
.sw-violet { --swatch:var(--field-violet) }
.sw-demo { --swatch:var(--demo-surface) }
.sw-frame { --swatch:var(--device-frame) }
.sw-edge { --swatch:var(--device-edge) }
.sw-cam { --swatch:var(--device-cam) }
.sw-screen { --swatch:var(--screen) }
.sw-fade { --swatch:var(--screen-fade) }
.sw-screen-ink { --swatch:var(--screen-ink) }
.sw-veil { --swatch:var(--veil) }
.sw-clear { --swatch:var(--clear) }
.shot-placeholder { display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:750 / 1334;border-radius:var(--r-shot);background:var(--screen);color:var(--text-muted);font-family:var(--font-mono);font-size:14px }
.preview-type > * + * { margin-top:24px }
.preview-display { font-family:var(--font-display);font-size:48px;font-weight:400;line-height:1.18 }
.preview-static-nav { display:none }

@media (max-width:960px) {
  .cap { grid-template-columns:28px minmax(0,1fr);row-gap:4px }
  .cap__desc { grid-column:2 }
  .demo { grid-template-columns:minmax(0,1fr) }
  .demo__scene { padding:36px }
  .shot-layout { grid-template-columns:minmax(0,1fr) }
}
@media (max-width:640px) {
  .plat-grid,.device-grid { grid-template-columns:minmax(0,1fr) }
  .plat-card { padding:24px }
  .caps { padding-top:96px;padding-bottom:96px }
  .caps__title { font-size:24px }
  .cap { padding:18px 16px }
  .cap__name { font-size:15px }
  .cap__desc { font-size:14px }
  .demo { margin-top:96px }
  .demo__copy { padding:32px 24px }
  .demo__scene { padding:28px 20px }
  .demo__window { padding:20px }
  .facts { flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px }
  .hero .facts { justify-content:flex-start }
  .fact { font-size:11px;padding:4px 9px }
  .official-shot { margin-inline:auto }
  .callout { padding:20px }
  .article-card,.article-get-card { padding:24px }
  .device-entry { padding:24px;gap:14px }
  .dl-fab { width:52px;height:52px;min-height:52px;padding:0;justify-content:center;right:16px;bottom:16px;border-radius:var(--r-round) }
  .dl-fab__text { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap }
  body.has-article-fab { padding-bottom:76px }
  .preview-palette { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .preview-section { padding-top:96px }
  .preview-section:last-child { padding-bottom:96px }
  .preview-display { font-size:30px }
  .preview-static-nav { display:block }
  .preview-static-nav summary { display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:1px solid var(--border);border-radius:var(--r-md);cursor:pointer;list-style:none }
  .preview-static-nav nav { position:absolute;top:var(--nav-h);left:0;right:0;padding:16px var(--gutter);max-height:calc(100dvh - var(--nav-h));overflow:auto;background:var(--bg-panel);color:var(--text);border-bottom:1px solid var(--border) }
  .preview-static-nav nav a { display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 16px }
  #install table,#install tbody,#install tr,#install td { display:block;width:100%;min-width:0;max-width:100% }
  #install thead { display:none }
  #install tr { padding:16px;border-bottom:1px solid var(--border) }
  #install td { padding:8px 0;border:0 }
  #install td::before { content:attr(data-label);display:block;margin-bottom:6px;color:var(--text-muted);font-size:12px }
  #install td code { word-break:normal;overflow-wrap:normal;white-space:pre;overflow-x:auto }
}
@media (min-width:641px) and (max-width:1100px) {
  .preview-static-nav { display:block }
  .preview-static-nav summary { cursor:pointer;padding:10px;border:1px solid var(--border);border-radius:var(--r-sm) }
  .preview-static-nav nav { position:absolute;top:var(--nav-h);right:var(--gutter);width:280px;padding:16px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-panel);color:var(--text);box-shadow:var(--shadow-soft) }
  .preview-static-nav nav a { display:flex;min-height:44px;padding:10px 16px }
}