/* Components share the foundation tokens; no per-page color literals. */
.get-actions > .btn-primary { flex:0 1 auto; }
.app-store { min-height:56px; gap:12px; border-radius:var(--r-pop); }
.app-store svg { width:26px; height:28px; }
.store-copy { display:block; text-align:left; line-height:1.25; }
.store-copy small { display:block; font-size:11px; font-weight:var(--weight-medium); }
.store-copy strong { display:block; margin-top:3px; font-size:16px; font-weight:var(--weight-strong); }

.facts,.badge-row { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:0; list-style:none; margin:24px 0 0; }
.fact,.badge { display:inline-flex; align-items:center; gap:8px; max-width:100%; padding:7px 12px; border:1px solid var(--c-border); border-radius:var(--r-pill); background:var(--c-bg); color:var(--c-muted); font-size:12.5px; line-height:1.5; overflow-wrap:anywhere; }
.fact b { color:var(--c-text); font-weight:var(--weight-strong); }
.badge-accent { background:var(--c-panel-2); color:var(--c-accent-dark); }
.badge-success { background:var(--c-panel); color:var(--c-success-ink); }
.badge-warn { background:var(--c-panel); color:var(--c-warn-ink); }
.badge-error { background:var(--c-panel); color:var(--c-error-ink); }
.status-dot { width:7px; height:7px; flex-shrink:0; border-radius:var(--r-pill); background:var(--c-success); 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; align-items:flex-start; 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); box-shadow:var(--shadow-card); scroll-margin-top:24px; }
.plat-card h3,.plat-card p { margin:0; }
.plat-card p { color:var(--c-muted); }
.plat-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:auto; padding-top:8px; max-width:100%; }
.plat-card::before { content:attr(data-mine); display:none; position:absolute; top:18px; right:18px; max-width:calc(100% - 36px); padding:4px 9px; border-radius:var(--r-pill); background:var(--c-panel-2); color:var(--c-accent-dark); font-size:12px; font-weight:var(--weight-strong); }
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-symbol { display:flex; align-items:center; gap:10px; min-height:32px; color:var(--c-accent-dark); }
.plat-symbol svg { width:24px; height:24px; }
.wx-open-tip { position:fixed; z-index:90; bottom:max(20px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); width:calc(100% - var(--gutter) * 2); max-width:500px; padding:20px 24px; border:1px solid var(--c-border); border-radius:var(--r-pop); background:var(--c-bg); color:var(--c-text); box-shadow:var(--shadow-pop); font-size:14px; }

.tabs [role="tablist"] { display:flex; flex-wrap:wrap; gap:10px; }
.tabs [role="tab"] { border:1px solid var(--c-border); border-radius:var(--r-pill); min-height:44px; padding:10px 18px; background:var(--c-bg); color:var(--c-muted); font-weight:var(--weight-medium); text-align:left; }
.tabs [role="tab"]:hover { background:var(--c-panel-2); color:var(--c-text); }
.tabs [role="tab"][aria-selected="true"] { border-color:var(--c-accent); background:var(--c-bg); color:var(--c-accent-dark); box-shadow:var(--shadow-card); }
.tabs [role="tabpanel"] { margin-top:24px; }
.feature-section { background:var(--c-panel); color:var(--c-text); }
.feature-top { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:80px; }
.feature-detail { max-width:38em; color:var(--c-muted); font-size:17px; line-height:1.85; }
.feature-detail h2 { color:var(--c-text); }
.board-stage { display:flex; align-items:center; justify-content:center; min-height:330px; perspective:1000px; padding:32px 20px 56px; }
.isometric-board { width:100%; max-width:440px; padding:32px; border:1px solid var(--c-border); border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text); box-shadow:var(--shadow-board); transform:rotateX(28deg) rotateZ(-14deg); }
.board-title { margin:0 0 24px; font:var(--weight-strong) 14px/1.5 var(--font-mono); color:var(--c-accent-dark); }
.board-code { margin:0; padding:0; border:0; border-radius:0; background:var(--c-bg); color:var(--c-text); font-size:12px; }
.feature-tabs[role="tablist"] { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 64px; margin-top:72px; }
.tabs .feature-tab[role="tab"] { display:flex; align-items:center; gap:22px; min-width:0; min-height:116px; padding:18px; border:1px solid var(--c-clear); border-radius:var(--r-card); background:var(--c-clear); color:var(--c-text); box-shadow:none; }
.tabs .feature-tab[role="tab"]:hover { border-color:var(--c-border); background:var(--c-bg); color:var(--c-text); }
.tabs .feature-tab[role="tab"][aria-selected="true"] { border-color:var(--c-border); background:var(--c-bg); color:var(--c-text); box-shadow:var(--shadow-card); }
.feature-tab strong { display:block; font-size:18px; font-weight:var(--weight-strong); }
.feature-tab small { display:block; margin-top:7px; color:var(--c-muted); font-size:14px; line-height:1.7; }
.gloss-icon { position:relative; display:flex; align-items:center; justify-content:center; flex:none; width:68px; height:68px; border-radius:var(--r-pop); background:var(--grad-gloss); color:var(--c-on-accent); box-shadow:var(--shadow-gloss); font:var(--weight-strong) 23px/1 var(--font-mono); }
.gloss-icon::before { content:""; position:absolute; inset:7px; border:1px solid color-mix(in srgb,var(--c-bg) 45%,var(--c-clear)); border-radius:var(--r-item); box-shadow:var(--shadow-icon-inset); }
.gloss-icon::after { content:""; position:absolute; inset:3px 11px 48%; border-radius:var(--r-pop); background:linear-gradient(var(--c-bg),var(--c-clear)); color:var(--c-text); opacity:.3; }

.toc { position:sticky; top:16px; z-index:5; display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px; margin-bottom:40px; border:1px solid var(--c-border); border-radius:var(--r-pop); background:var(--c-bg); color:var(--c-text); box-shadow:var(--shadow-hair); }
.toc a { min-height:44px; display:inline-flex; align-items:center; padding:9px 14px; border-radius:var(--r-pill); color:var(--c-muted); text-decoration:none; font-size:14px; }
.toc a:hover,.toc a[aria-current] { background:var(--c-panel); color:var(--c-accent-dark); }
.toc.is-static { position:static; }

.faq-list { border:1px solid var(--c-border); border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text); box-shadow:var(--shadow-card); }
.faq-item + .faq-item { border-top:1px solid var(--c-border); }
.faq-item summary { position:relative; display:block; list-style:none; padding:24px 60px 24px 26px; cursor:pointer; font-weight:var(--weight-strong); }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; position:absolute; right:26px; top:24px; color:var(--c-accent-dark); font-family:var(--font-mono); }
.faq-item[open] summary::after { content:"−"; }
.faq-answer { padding:0 26px 26px; color:var(--c-muted); }
.faq-answer p:last-child { margin-bottom:0; }

.term-card { padding:28px; border:1px solid var(--c-border); border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text); box-shadow:var(--shadow-card); }
.term-card dt { font:var(--weight-strong) 18px/1.5 var(--font-mono); overflow-wrap:anywhere; color:var(--c-accent-dark); }
.term-card dd { margin:14px 0 0; color:var(--c-muted); }
.term-card .badge { margin-top:20px; }
.article-card { display:flex; flex-direction:column; gap:14px; padding:30px; border:1px solid var(--c-border); border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text); box-shadow:var(--shadow-card); }
.article-card h3 { margin:0; font-size:21px; }
.article-card h3 a { text-decoration:none; }
.article-card h3 a:hover { color:var(--c-accent-dark); }
.article-card p { margin:0; color:var(--c-muted); }
.article-meta { display:flex; flex-wrap:wrap; gap:10px; align-items:center; color:var(--c-muted); font-size:12px; }
.article-card .btn-text { align-self:flex-start; margin-top:auto; font-size:14px; }

.callout { margin:28px 0; padding:24px 28px; border:1px solid var(--c-border); border-left:3px solid var(--c-accent); border-radius:var(--r-item); background:var(--c-panel); color:var(--c-text); }
.callout p:last-child { margin-bottom:0; }
.callout-warn { border-left-color:var(--c-warn); }
.callout-title { display:block; margin-bottom:8px; font-weight:var(--weight-strong); color:var(--c-accent-dark); }
.store-guide { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; padding:32px; border:1px solid var(--c-border); border-radius:var(--r-card); background:var(--c-panel); color:var(--c-text); }
.store-guide-copy { flex:1 1 260px; }
.store-guide h2,.store-guide h3 { margin:0 0 12px; font-size:24px; }
.store-guide p { margin:0; color:var(--c-muted); }

.shot-row { display:flex; align-items:flex-start; justify-content:center; flex-wrap:wrap; gap:32px; }
.official-shot { width:min(100%,280px); max-width:280px; flex-shrink:0; margin:0; }
.official-shot img { display:block; width:100%; height:auto; border-radius:var(--r-shot); }
.official-shot img { border:1px solid var(--c-border); }
.official-shot figcaption { margin-top:14px; color:var(--c-muted); font-size:13px; line-height:1.7; text-align:center; }
.shot-placeholder { display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:750 / 1334; border:1px solid var(--c-border); border-radius:var(--r-shot); background:var(--c-panel-2); color:var(--c-muted); font-family:var(--font-mono); font-size:14px; }
.device-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.device-entry { display:flex; gap:22px; align-items:center; padding:28px; border:1px solid var(--c-border); border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text); box-shadow:var(--shadow-card); text-decoration:none; }
.device-entry > svg { width:48px; height:64px; color:var(--c-accent-dark); }
.device-entry strong { display:block; font-size:20px; }
.device-entry small { display:block; font-size:14px; color:var(--c-muted); margin-top:8px; line-height:1.7; }
.device-entry:hover { box-shadow:var(--shadow-card-lift); }

.table-scroll { max-width:100%; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--c-border); border-radius:var(--r-item); }
.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 20px; border-bottom:1px solid var(--c-border); 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-strong); }
.data-table td,.prose table td { background:var(--c-bg); color:var(--c-text); }
.data-table tr:last-child td { border-bottom:0; }
.prose table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; min-width:0; border-collapse:collapse; text-align:left; }
.prose table code { overflow-wrap:anywhere; }
#install table code { white-space:pre; overflow-wrap:normal; word-break:normal; display:block; max-width:100%; overflow-x:auto; }
.dl-fab { position:fixed; z-index:15; right:24px; bottom:max(24px,env(safe-area-inset-bottom)); display:inline-flex; align-items:center; gap:10px; min-height:52px; max-width:calc(100% - 48px); padding:14px 20px; border:1px solid var(--c-border); border-radius:var(--r-pill); background:var(--c-accent); color:var(--c-on-accent); box-shadow:var(--shadow-btn); text-decoration:none; font-weight:var(--weight-strong); font-size:14px; }
.dl-fab svg { width:22px; height:22px; flex-shrink:0; }
.dl-fab:hover { background:var(--c-accent-dark); color:var(--c-on-accent); }

/* The preview does not execute behavior scripts. */
.design-preview .grating-ink,.design-preview .rq { animation:none; }
.preview-title { margin:0 0 40px; }
.preview-group { margin-top:48px; }
.preview-buttons { display:flex; align-items:center; flex-wrap:wrap; gap:20px; }
.preview-color-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.swatch { border:1px solid var(--c-border); border-radius:var(--r-item); background:var(--c-bg); color:var(--c-text); overflow:hidden; }
.swatch-ink { display:block; height:76px; border-bottom:1px solid var(--c-border); }
.swatch code { display:block; padding:12px; font-size:12px; }
.sw-bg { background:var(--c-bg); color:var(--c-text); }
.sw-panel { background:var(--c-panel); color:var(--c-text); }
.sw-panel2 { background:var(--c-panel-2); color:var(--c-text); }
.sw-border { background:var(--c-border); color:var(--c-text); }
.sw-accent { background:var(--c-accent); color:var(--c-on-accent); }
.sw-dark { background:var(--c-accent-dark); color:var(--c-on-accent); }
.sw-sky { background:var(--c-sky); color:var(--c-text); }
.sw-text { background:var(--c-text); color:var(--c-bg); }
.sw-muted { background:var(--c-muted); color:var(--c-bg); }
.sw-faint { background:var(--c-faint); color:var(--c-text); }
.sw-success { background:var(--c-success); color:var(--c-text); }
.sw-success-ink { background:var(--c-success-ink); color:var(--c-bg); }
.sw-warn { background:var(--c-warn); color:var(--c-text); }
.sw-warn-ink { background:var(--c-warn-ink); color:var(--c-bg); }
.sw-error { background:var(--c-error); color:var(--c-text); }
.sw-error-ink { background:var(--c-error-ink); color:var(--c-bg); }
.sw-mask { background:var(--mask-ink); color:var(--c-bg); }
.sw-clear { background:var(--c-clear); color:var(--c-text); }
.preview-focus { outline:2px solid var(--c-accent); outline-offset:3px; }
.preview-display { margin:0; font:var(--weight-heading) clamp(34px,3.4vw,48px)/1.16 var(--font-display); }
.preview-nav-links { display:flex; flex-wrap:wrap; gap:12px 24px; }
.preview-nav-links a { font-size:14px; }

@media (max-width:960px) {
  .feature-top { grid-template-columns:minmax(0,1fr); gap:32px; }
  .board-stage { min-height:280px; }
  .feature-tabs[role="tablist"] { gap:16px; margin-top:48px; }
}
@media (max-width:640px) {
  .plat-grid,.device-grid { grid-template-columns:minmax(0,1fr); }
  .plat-card { padding:26px 24px; }
  .plat-card::before { position:static; align-self:flex-end; }
  .feature-tabs[role="tablist"] { grid-template-columns:minmax(0,1fr); }
  .tabs .feature-tab[role="tab"] { gap:18px; padding:14px; }
  .gloss-icon { width:56px; height:56px; font-size:20px; }
  .isometric-board { padding:24px; }
  .board-stage { padding:20px 0 40px; min-height:240px; }
  .facts,.badge-row { justify-content:center; gap:8px; }
  .fact,.badge { font-size:11px; padding:6px 9px; }
  .official-shot { margin-inline:auto; }
  .shot-row { flex-direction:column; align-items:center; }
  .device-entry { padding:24px; gap:18px; }
  .store-guide { padding:24px; }
  .toc { position:static; gap:4px; padding:8px; }
  .toc a { font-size:13px; padding-inline:10px; }
  .preview-color-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .dl-fab { width:52px; height:52px; min-height:52px; padding:0; justify-content:center; right:16px; bottom:max(16px,env(safe-area-inset-bottom)); }
  .dl-fab span { 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: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); }
  #install td { border:0; padding:10px 16px; }
  #install td::before { content:attr(data-label); display:block; margin-bottom:6px; color:var(--c-muted); font-size:12px; font-weight:var(--weight-strong); }
  #install code,#install table code { word-break:normal; overflow-wrap:normal; white-space:pre; max-width:100%; overflow-x:auto; }
}