.tabs { min-width:0; }
.tab-list,[role="tablist"] { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; margin:0 0 32px; padding:0; }
[role="tab"] { min-height:44px; max-width:100%; padding:10px 22px; border:0; border-radius:var(--r-pill); background:var(--c-panel-2); color:var(--c-text); font-weight:var(--weight-semibold); }
[role="tab"][aria-selected="true"] { background:var(--c-accent); color:var(--c-on-accent); }
.tab-panel { padding:48px; border:1px solid var(--c-border); border-radius:var(--r-board); background:var(--c-bg); color:var(--c-text); box-shadow:var(--shadow-board); }
.feature-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:center; }
.feature-split>*,.plat-grid>*,.card-grid>* { min-width:0; }
.feature-split pre { margin:0; }
.toc { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:16px; margin-bottom:40px; border-radius:var(--r-card); background:var(--c-panel); color:var(--c-text); }
.toc a { display:block; padding:10px 16px; min-height:44px; border-radius:var(--r-pill); color:var(--c-text); text-decoration:none; font-size:var(--size-small); }
.toc a:hover { background:var(--c-bg); color:var(--c-text); }
.toc--sticky { position:sticky; top:16px; z-index:5; }
.faq-list { border:1px solid var(--c-border); border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text); }
.faq-item { padding:0 28px; }
.faq-item+.faq-item { border-top:1px solid var(--c-border); }
.faq-item summary { position:relative; padding:22px 32px 22px 0; min-height:64px; cursor:pointer; list-style:none; font-weight:var(--weight-semibold); }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; position:absolute; right:0; top:20px; color:var(--c-muted); font-size:22px; }
.faq-item[open] summary::after { content:"−"; }
.faq-item p { color:var(--c-muted); }
.term-card { padding:28px; border-radius:var(--r-card); border:1px solid var(--c-border); background:var(--c-panel); color:var(--c-text); }
.term-card dt { margin-bottom:12px; font-family:var(--font-mono); font-size:20px; font-weight:var(--weight-bold); overflow-wrap:anywhere; }
.term-card dd { margin:0; color:var(--c-muted); }
.store-btn { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:56px; padding:10px 24px; border:0; border-radius:var(--r-pill); background:var(--c-accent); color:var(--c-on-accent); text-decoration:none; box-shadow:var(--shadow-btn); transition:background-color var(--t-fast) var(--ease); }
.store-btn:hover { background:var(--c-accent-dark); color:var(--c-on-accent); }
.store-btn svg { width:26px; height:30px; flex-shrink:0; }
.store-btn-copy { display:block; text-align:left; line-height:1.3; }
.store-btn-copy small { display:block; font-size:12px; }
.store-btn-copy strong { display:block; font-size:16px; font-weight:var(--weight-semibold); }
.get-actions { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:30px; }
.get-actions .pill-btn { max-width:100%; }
.get-note { margin:14px 0 0; font-size:13px; line-height:20px; color:var(--c-muted); }
.get-note [data-pkg-ver] { font-family:var(--font-mono); font-size:12.5px; color:var(--c-text); }
.plat-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.plat-card { position:relative; display:flex; flex-direction:column; min-width:0; padding:32px; border:1px solid var(--c-border); border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text); }
.plat-card h3 { margin-bottom:12px; }
.plat-card p { color:var(--c-muted); }
.plat-card::before { content:attr(data-mine); display:none; align-self:flex-start; margin-bottom:18px; padding:5px 12px; border-radius:var(--r-pill); background:var(--c-panel-2); color:var(--c-text); font-size:12px; font-weight:var(--weight-semibold); }
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; }
.plat-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:auto; padding-top:16px; }
.wx-open-tip { position:fixed; z-index:90; inset:auto 16px 24px; width:calc(100% - 32px); max-width:560px; margin-inline:auto; padding:20px 24px; border:1px solid var(--c-border); border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text); box-shadow:var(--shadow-fab); font-size:var(--size-small); }
.wx-open-tip button { min-height:44px; border:0; padding:8px 16px; border-radius:var(--r-pill); background:var(--c-panel-2); color:var(--c-text); }
.fact-row { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; }
.fact-pill,.badge { display:inline-flex; align-items:center; justify-content:center; gap:8px; max-width:100%; padding:6px 14px; border:1px solid var(--c-border); border-radius:var(--r-pill); background:var(--c-bg); color:var(--c-muted); font-size:13px; line-height:1.6; text-align:center; overflow-wrap:anywhere; }
.badge--soft { border-color:var(--c-clear); background:var(--c-panel-2); color:var(--c-text); }
.fact-pill svg,.badge svg { flex-shrink:0; width:16px; height:16px; }
.shot-row { display:flex; justify-content:center; align-items:flex-start; flex-wrap:wrap; gap:32px; }
.official-shot { width:100%; max-width:280px; margin:0; flex-shrink:0; }
.official-shot img { display:block; width:100%; height:auto; border-radius:var(--r-shot); }
.official-shot img { outline:1px solid var(--c-border); }
.official-shot figcaption { margin-top:14px; color:var(--c-muted); font-size:13px; text-align:center; }
.device-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.device-entry { display:flex; align-items:center; gap:24px; padding:28px; border:1px solid var(--c-border); border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text); text-decoration:none; }
.device-entry svg { width:48px; height:56px; flex-shrink:0; color:var(--c-muted); }
.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); }
.device-entry:hover { border-color:var(--c-accent); }
.article-card { display:flex; flex-direction:column; gap:16px; min-width:0; padding:32px; border:1px solid var(--c-border); border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text); }
.article-card .badge { align-self:flex-start; }
.article-card h3 { margin:0; }
.article-card h3 a { color:var(--c-text); text-decoration:none; }
.article-card p { margin:0; color:var(--c-muted); }
.article-card .article-link { margin-top:auto; padding-top:8px; }
.article-meta { display:flex; flex-wrap:wrap; align-items:center; gap:12px; color:var(--c-muted); font-size:13px; }
.callout { margin:28px 0; padding:24px 28px; border-left:3px solid var(--c-accent); border-radius:var(--r-line); background:var(--c-panel-2); color:var(--c-text); }
.callout p:last-child { margin-bottom:0; }
.group-list { list-style:none; padding:0; margin:0; border:1px solid var(--c-border); border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text); }
.group-list li+li { border-top:1px solid var(--c-border); }
.group-list a { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; min-height:64px; color:var(--c-text); text-decoration:none; }
.group-list a::after { content:"›"; flex-shrink:0; color:var(--c-muted); }
.store-guide { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px; padding:32px; border-radius:var(--r-section); background:var(--c-panel); color:var(--c-text); }
.store-guide-copy { flex:1 1 280px; }
.store-guide p { margin-bottom:0; color:var(--c-muted); }
.dl-fab { position:fixed; right:20px; bottom:24px; z-index:50; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:11px 20px 11px 16px; border-radius:var(--r-pill); background:var(--c-accent); color:var(--c-on-accent); font-size:var(--size-small); font-weight:var(--weight-semibold); text-decoration:none; box-shadow:var(--shadow-fab); transition:background-color var(--t-fast) var(--ease); }
.dl-fab:hover { background:var(--c-accent-dark); color:var(--c-on-accent); }
.dl-fab svg { display:block; width:20px; height:20px; flex-shrink:0; }
.table-scroll { max-width:100%; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.data-table { width:100%; border-collapse:collapse; font-size:var(--size-small); }
.data-table th,.data-table td,.prose table th,.prose table td { min-width:7em; padding:16px 20px; text-align:left; vertical-align:top; border-bottom:1px solid var(--c-border); 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); }
.data-table td,.prose table td { background:var(--c-bg); color:var(--c-text); }
.prose table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; min-width:0; border-collapse:collapse; }
#install table code { overflow-wrap:normal; word-break:normal; white-space:pre; }
.preview-section { margin-top:var(--section-gap); }
.preview-section>h2 { margin-bottom:40px; }
.preview-stack { display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.preview-shot { display:grid; place-items:center; width:100%; aspect-ratio:750/1334; border:1px solid var(--c-border); border-radius:var(--r-shot); background:var(--c-panel); color:var(--c-muted); font-family:var(--font-mono); }
.swatch-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.swatch { margin:0; padding:16px; border:1px solid var(--c-border); border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text); }
.swatch::before { content:""; display:block; height:64px; margin-bottom:12px; border:1px solid var(--c-border); border-radius:var(--r-line); background:var(--swatch-color); }
.swatch code { font-size:12px; }
.swatch--bg { --swatch-color:var(--c-bg); }
.swatch--veil { --swatch-color:var(--c-bg-veil); }
.swatch--panel { --swatch-color:var(--c-panel); }
.swatch--panel2 { --swatch-color:var(--c-panel-2); }
.swatch--hover { --swatch-color:var(--c-panel-2-hover); }
.swatch--border { --swatch-color:var(--c-border); }
.swatch--accent { --swatch-color:var(--c-accent); }
.swatch--dark { --swatch-color:var(--c-accent-dark); }
.swatch--text { --swatch-color:var(--c-text); }
.swatch--muted { --swatch-color:var(--c-muted); }
.swatch--faint { --swatch-color:var(--c-faint); }
.swatch--grid { --swatch-color:var(--c-grid); }
.swatch--success { --swatch-color:var(--c-success); }
.swatch--ring { --swatch-color:var(--c-success-ring); }
.swatch--warn { --swatch-color:var(--c-warn); }
.swatch--error { --swatch-color:var(--c-error); }
.swatch--on { --swatch-color:var(--c-on-accent); }
.swatch--focus { --swatch-color:var(--c-focus); }
.swatch--mask { --swatch-color:var(--c-mask); }
.swatch--clear { --swatch-color:var(--c-clear); }
.swatch--navveil { --swatch-color:var(--c-veil); }
@media (max-width:900px) {
  .feature-split { grid-template-columns:minmax(0,1fr); gap:24px; }
  .tab-panel { padding:32px; }
}
@media (max-width:640px) {
  .plat-grid,.device-grid { grid-template-columns:minmax(0,1fr); }
  .plat-card,.article-card,.term-card,.tab-panel { padding:24px; }
  .tab-list,[role="tablist"] { gap:8px; }
  [role="tab"] { padding:10px 16px; font-size:var(--size-small); }
  .shot-row { flex-direction:column; align-items:center; }
  .fact-row { flex-direction:row; flex-wrap:wrap; }
  .fact-pill { font-size:12px; padding:5px 10px; }
  .faq-item { padding-inline:20px; }
  .dl-fab { right:14px; bottom:max(14px,env(safe-area-inset-bottom)); width:52px; height:52px; min-height:52px; padding:0; border-radius:var(--r-circle); }
  .dl-fab .dl-fab-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .swatch-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #install table,#install tbody,#install tr,#install td { display:block; width:100%; }
  #install thead { display:none; }
  #install tr { margin-bottom:20px; border:1px solid var(--c-border); border-radius:var(--r-line); }
  #install td { min-width:0; }
  #install td code { display:block; max-width:100%; overflow-x:auto; overflow-wrap:normal; word-break:normal; white-space:pre; }
}