/* The matching sheet is editorial rule material, not a simulated application. */
.board-wrap { position:relative; z-index:2; margin-top:72px; margin-bottom:-120px; }
.board-wrap::before { content:""; position:absolute; z-index:-1; left:0; right:0; bottom:-110px; height:240px; background:radial-gradient(50% 50% at 50% 50%,var(--fog) 0%,var(--fog-edge) 72%); pointer-events:none; }
.board { border:1px solid var(--border-soft); border-radius:var(--r-board); background:var(--panel); color:var(--text); box-shadow:var(--shadow-lg); overflow:hidden; }
.board__bar { position:relative; min-height:40px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 22px; border-bottom:1px solid var(--border-soft); }
.lights { display:inline-flex; gap:7px; flex-shrink:0; }
.lights i { width:10px; height:10px; border-radius:var(--r-circle); opacity:.62; }
.lights i:nth-child(1) { background:var(--error); }
.lights i:nth-child(2) { background:var(--warn); }
.lights i:nth-child(3) { background:var(--success); }
.board__title { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-family:var(--f-mono); font-size:12px; color:var(--muted); white-space:nowrap; }
.board__title b { font-weight:var(--weight-medium); }
.board__meta { font-family:var(--f-mono); font-size:11.5px; color:var(--muted); }
.board__meta b { font-weight:var(--weight-medium); color:var(--accent); }
.board__body { display:grid; grid-template-columns:minmax(0,38fr) minmax(0,62fr); gap:40px; padding:24px 28px 26px; }
.panel-head { display:flex; align-items:center; flex-wrap:wrap; gap:10px; min-height:28px; margin-bottom:14px; }
.ask__title { font-family:var(--f-display); font-size:18px; font-weight:var(--weight-medium); letter-spacing:-.015em; }
.ask__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.cell { position:relative; min-height:78px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:9px 8px; border:1px solid var(--border); border-radius:var(--r-cell); background:var(--panel); color:var(--text); font-size:13.5px; text-align:center; transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease); }
.cell:hover { border-color:var(--border-strong); box-shadow:var(--shadow-note); }
.cell__icon { width:28px; height:28px; display:grid; place-items:center; border-radius:var(--r-icon); background:var(--accent-wash); color:var(--accent); }
.cell__icon svg { width:16px; height:16px; }
.cell__check { position:absolute; top:10px; right:10px; width:14px; height:14px; border:1.5px solid var(--border-strong); border-radius:var(--r-check); background:var(--panel); color:var(--text); }
.flow__tag { display:inline-flex; align-items:center; min-height:24px; padding:2px 9px; border-radius:var(--r-pill); background:var(--accent-wash); color:var(--accent-dark); font-family:var(--f-mono); font-size:12px; font-weight:var(--weight-medium); }
.flow__hint { font-size:13px; color:var(--muted); }
.ribbon { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:var(--lane-gap); list-style:none; padding:0; margin:0 0 20px; }
.ribbon li { min-height:38px; display:flex; align-items:center; justify-content:center; font-family:var(--f-mono); font-size:12.5px; font-weight:var(--weight-medium); letter-spacing:.01em; clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%,16px 50%); }
.ribbon li:first-child { clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%); border-radius:var(--r-icon) 0 0 var(--r-icon); }
.ribbon li:not(:last-child) { margin-right:-34px; }
.ribbon li:not(:first-child) { margin-left:-6px; }
.ribbon__a { background:var(--accent-wash); color:var(--accent-dark); }
.ribbon__b { background:var(--success-wash); color:var(--success-ink); }
.ribbon__c { background:var(--neutral-wash); color:var(--muted); }
.lanes { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:var(--lane-gap); align-items:start; }
.lane { display:flex; flex-direction:column; gap:var(--note-gap); }
.note { position:relative; min-height:var(--note-h); display:flex; align-items:center; gap:10px; padding:8px 12px; border:1px solid var(--border); border-radius:var(--r-note); background:var(--note-bg); color:var(--text); box-shadow:var(--shadow-note); }
.note + .note::before { content:""; position:absolute; left:50%; top:calc(-1 * var(--note-gap) + 2px); width:1px; height:calc(var(--note-gap) - 5px); background:var(--line); }
.note + .note::after { content:""; position:absolute; left:calc(50% - 2.5px); top:-8px; width:5px; height:5px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transform:rotate(45deg); }
.dot { flex-shrink:0; width:8px; height:8px; border-radius:var(--r-circle); }
.dot--proxy { background:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); }
.dot--direct { background:var(--success); box-shadow:0 0 0 3px var(--success-wash); }
.dot--reject { background:var(--error); box-shadow:0 0 0 3px var(--error-wash); }
.rule { font-family:var(--f-mono); font-size:11.5px; line-height:1.45; color:var(--text); }
.pol { font-weight:var(--weight-bold); }
.pol--proxy { color:var(--accent); }
.pol--direct { color:var(--success-ink); }
.pol--reject { color:var(--error-ink); }
.lane__comment { padding-left:13px; margin-top:-4px; font-family:var(--f-mono); font-size:11.5px; color:var(--muted); }
.caret { display:inline-block; width:7px; height:14px; margin-left:4px; background:var(--accent); opacity:.55; vertical-align:middle; }
.link { position:absolute; width:var(--lane-gap); top:calc(var(--note-h)/2); pointer-events:none; }
.link::before { content:""; position:absolute; left:0; top:8px; bottom:0; width:50%; border-right:1px solid var(--line); border-bottom:1px solid var(--line); border-bottom-right-radius:var(--r-icon); }
.link::after { content:""; position:absolute; left:calc(50% - 1px); right:5px; top:0; height:9px; border-left:1px solid var(--line); border-top:1px solid var(--line); border-top-left-radius:var(--r-icon); }
.link svg { position:absolute; right:0; top:-4px; width:6px; height:8px; color:var(--line); }
.link--ab { left:calc((100% - 2 * var(--lane-gap))/3); height:calc(2 * (var(--note-h) + var(--note-gap))); }
.link--bc { left:calc((100% - 2 * var(--lane-gap))/3 * 2 + var(--lane-gap)); height:calc(var(--note-h) + var(--note-gap)); }

/* Question rail and expandable answer furniture. */
.question-tabs { min-width:0; }
.tab-rail { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; margin-bottom:28px; padding:4px; }
[role="tab"] { display:inline-flex; align-items:center; gap:8px; min-height:44px; max-width:100%; padding:10px 16px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--panel); color:var(--muted); font-size:13px; text-align:left; }
.tab-number { font-family:var(--f-mono); color:var(--accent-dark); }
[role="tab"][aria-selected="true"] { border-color:var(--accent); background:var(--accent); color:var(--on-accent); box-shadow:inset 0 1px 0 var(--btn-hl),var(--shadow-sm); }
[role="tab"][aria-selected="true"] .tab-number { color:var(--on-accent); }
[role="tabpanel"] { scroll-margin-top:24px; }
.answer-card { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; padding:48px; border:1px solid var(--border-soft); border-radius:var(--r-board); background:var(--panel); color:var(--text); box-shadow:var(--shadow-lg); }
.answer-copy p { margin-top:18px; color:var(--muted); }
.answer-copy strong { color:var(--text); }
.answer-copy details { margin-top:20px; }
.answer-copy summary { cursor:pointer; color:var(--accent-dark); padding-block:10px; }
.grouped-list { align-self:start; list-style:none; margin:0; padding:0; border:1px solid var(--border); border-radius:var(--r-cell); background:var(--panel); color:var(--text); box-shadow:var(--shadow-note); overflow:hidden; }
.grouped-list li + li { border-top:1px solid var(--border-soft); }
.grouped-list a,.grouped-list .setting-row { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:56px; padding:14px 18px; }
.grouped-list a::after,.grouped-list .setting-row::after { content:"›"; flex-shrink:0; color:var(--muted); font-size:20px; }
.grouped-list code { font-size:12px; }
.toc { display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; margin-block:32px; padding:18px 20px; border:1px solid var(--border); border-radius:var(--r-float); background:var(--panel); color:var(--muted); }
.toc a { display:inline-flex; align-items:center; min-height:44px; color:var(--accent-dark); font-size:14px; }
.toc--sticky { position:sticky; top:12px; z-index:10; }
.faq-list { border:1px solid var(--border); border-radius:var(--r-float); background:var(--panel); color:var(--text); overflow:hidden; }
.faq-item + .faq-item { border-top:1px solid var(--border); }
.faq-item summary { position:relative; list-style:none; padding:24px 56px 24px 24px; cursor:pointer; font-weight:var(--weight-medium); }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; position:absolute; top:22px; right:24px; color:var(--accent); font-family:var(--f-mono); font-size:22px; }
.faq-item[open] summary::after { content:"−"; }
.faq-answer { padding:0 24px 24px; color:var(--muted); }
.faq-answer > * + * { margin-top:14px; }
.term-card { padding:28px; border:1px solid var(--border); border-radius:var(--r-float); background:var(--panel); color:var(--text); box-shadow:var(--shadow-sm); }
.term-card dt { font-family:var(--f-mono); font-size:18px; margin-bottom:12px; overflow-wrap:anywhere; }
.term-card dd { margin:0; color:var(--muted); }
.term-card .badge { margin-top:20px; }

/* Acquisition components. */
.get-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; margin-bottom:12px; }
.get-actions > .btn { flex:0 1 auto; }
.get-note { font-size:13px; color:var(--muted); margin-bottom:18px; text-align:center; }
.get-note [data-pkg-ver] { font-family:var(--f-mono); font-size:12.5px; color:var(--muted); }
.appstore-button { display:inline-flex; justify-content:center; align-items:center; gap:12px; min-height:56px; max-width:100%; padding:10px 20px; border:1px solid var(--accent); border-radius:var(--r-btn); background:var(--accent); color:var(--on-accent); box-shadow:inset 0 1px 0 var(--btn-hl),var(--shadow-btn); text-align:left; transition:background-color var(--fast) var(--ease); }
.appstore-button:hover { background:var(--accent-dark); color:var(--on-accent); border-color:var(--accent-dark); }
.appstore-button svg { width:25px; height:28px; }
.appstore-button__copy { display:flex; flex-direction:column; line-height:1.35; }
.appstore-button__copy small { font-size:11px; }
.appstore-button__copy strong { font-size:16px; font-weight:var(--weight-medium); }
.fact-row { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; list-style:none; margin:0; padding:0; }
.fact-pill { display:inline-flex; align-items:center; flex-wrap:wrap; gap:5px; max-width:100%; padding:6px 12px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--panel); color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
.fact-pill strong { color:var(--text); font-weight:var(--weight-medium); }
.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(--border-soft); border-radius:var(--r-float); background:var(--panel); color:var(--text); box-shadow:var(--shadow-sm); }
.plat-card > svg { width:30px; height:30px; color:var(--muted); }
.plat-card p { color:var(--muted); }
.plat-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:auto; width:100%; }
.plat-actions .btn { flex:1 1 180px; }
.plat-card::before { content:attr(data-mine); display:none; align-self:flex-end; padding:3px 9px; border-radius:var(--r-pill); background:var(--accent-wash); 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; left:50%; bottom:max(24px,env(safe-area-inset-bottom)); transform:translateX(-50%); width:min(480px,calc(100% - var(--gutter)*2)); padding:20px 24px; border:1px solid var(--border); border-radius:var(--r-float); background:var(--panel); color:var(--text); box-shadow:var(--shadow-lg); font-size:14px; }
.wx-open-tip button { min-height:44px; margin-top:10px; padding:8px 14px; border-radius:var(--r-btn); background:var(--accent); color:var(--on-accent); }
.shot-row { display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:32px; }
.official-shot { width:min(100%,280px); flex-shrink:0; margin:0; padding:0; }
.official-shot img { display:block; width:100%; height:auto; border-radius:var(--r-shot); }
.official-shot { filter:drop-shadow(0 2px 0 var(--border)); }
.official-shot figcaption { margin-top:14px; color:var(--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(--border); border-radius:var(--r-float); background:var(--panel); color:var(--text); box-shadow:var(--shadow-sm); }
.device-entry > svg { width:44px; height:64px; color:var(--accent); }
.device-entry h3 { font-size:20px; }
.device-entry p { margin-top:8px; color:var(--muted); font-size:14px; }
.article-card { display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding:28px; border:1px solid var(--border-soft); border-radius:var(--r-float); background:var(--panel); color:var(--text); box-shadow:var(--shadow-sm); }
.article-card h3 { font-size:21px; }
.article-card h3 a:hover { color:var(--accent-dark); }
.article-card p { color:var(--muted); font-size:14px; }
.article-card .text-link { margin-top:auto; font-size:14px; }
.callout { margin:24px 0; padding:24px; border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:var(--r-cell); background:var(--accent-wash-2); color:var(--text); }
.callout p + p { margin-top:12px; }
.callout--warn { border-left-color:var(--warn); background:var(--note-bg); color:var(--text); }
.store-guide-card { padding:32px; border:1px solid var(--border); border-radius:var(--r-float); background:var(--panel-2); color:var(--text); }
.store-guide-card p { margin-block:16px; color:var(--muted); }
.dl-fab { position:fixed; right:24px; bottom:max(24px,env(safe-area-inset-bottom)); z-index:25; display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:12px 20px; border:1px solid var(--accent); border-radius:var(--r-pill); background:var(--accent); color:var(--on-accent); box-shadow:var(--shadow-btn); font-size:14px; font-weight:var(--weight-medium); }
.dl-fab svg { width:22px; height:22px; }
.has-article-fab { padding-bottom:90px; }

/* Wide tables scroll instead of compressing their contents. */
.table-scroll { max-width:100%; min-width:0; overflow-x:auto; overscroll-behavior-inline:contain; border:1px solid var(--border); border-radius:var(--r-cell); }
.data-table { width:100%; border-collapse:collapse; background:var(--panel); color:var(--text); text-align:left; font-size:14px; }
.data-table th,.data-table td,.prose table th,.prose table td { min-width:7em; padding:16px 20px; vertical-align:top; border-bottom:1px solid var(--border); overflow-wrap:normal; word-break:normal; }
.data-table th,.prose table th { background:var(--panel-2); color:var(--text); font-weight:var(--weight-medium); }
.data-table tr:last-child td { border-bottom:0; }
.prose table { display:block; max-width:100%; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; border-collapse:collapse; background:var(--panel); color:var(--text); }
#install table code { white-space:pre; overflow-wrap:normal; word-break:normal; }
#install td { max-width:100%; overflow-x:auto; }
#install pre { margin:0; }

/* Preview-only furniture: no image stand-ins are used by production pages. */
.preview-section > .wrap > * + * { margin-top:32px; }
.preview-colors { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.color-chip { border:1px solid var(--border); border-radius:var(--r-note); background:var(--panel); color:var(--text); overflow:hidden; }
.color-chip i { display:block; height:64px; }
.color-chip code { display:block; padding:10px; color:var(--muted); font-size:11px; }
.sw-bg { background:var(--bg); }
.sw-top { background:var(--bg-top); }
.sw-panel { background:var(--panel); }
.sw-panel2 { background:var(--panel-2); }
.sw-border { background:var(--border); }
.sw-border-soft { background:var(--border-soft); }
.sw-border-strong { background:var(--border-strong); }
.sw-line { background:var(--line); }
.sw-accent { background:var(--accent); }
.sw-accent-dark { background:var(--accent-dark); }
.sw-text { background:var(--text); }
.sw-muted { background:var(--muted); }
.sw-faint { background:var(--faint); }
.sw-success { background:var(--success); }
.sw-warn { background:var(--warn); }
.sw-error { background:var(--error); }
.sw-success-ink { background:var(--success-ink); }
.sw-warn-ink { background:var(--warn-ink); }
.sw-error-ink { background:var(--error-ink); }
.sw-on { background:var(--on-accent); }
.sw-accent-wash { background:var(--accent-wash); }
.sw-accent-wash2 { background:var(--accent-wash-2); }
.sw-success-wash { background:var(--success-wash); }
.sw-error-wash { background:var(--error-wash); }
.sw-neutral { background:var(--neutral-wash); }
.sw-note { background:var(--note-bg); }
.sw-grad-a { background:var(--grad-a); }
.sw-grad-b { background:var(--grad-b); }
.sw-fog { background:var(--fog); }
.sw-fog-edge { background:var(--fog-edge); }
.sw-hl { background:var(--btn-hl); }
.sw-veil { background:var(--veil); }
.sw-clear { background:var(--clear); }
.shot-placeholder { display:grid; place-items:center; width:100%; aspect-ratio:750/1334; border:1px solid var(--border); border-radius:var(--r-shot); background:var(--panel-2); color:var(--muted); font-family:var(--f-mono); font-size:13px; text-align:center; }
.preview-symbols { position:absolute; width:0; height:0; overflow:hidden; }
.preview-mobile-nav { display:none; }
.preview-mobile-nav summary { display:flex; align-items:center; min-height:44px; padding-inline:10px; cursor:pointer; }
.preview-mobile-nav nav { position:absolute; left:0; right:0; top:64px; padding:18px var(--gutter); border:1px solid var(--border); border-radius:var(--r-cell); background:var(--panel); color:var(--text); box-shadow:var(--shadow-lg); }
.preview-mobile-nav nav a { display:flex; min-height:44px; align-items:center; padding:8px 12px; }
@media (max-width:1280px) {
  .preview-mobile-nav { display:block; }
}
@media (max-width:960px) {
  .board__body { grid-template-columns:minmax(0,1fr); gap:28px; }
  .board__title { display:none; }
  .answer-card { gap:28px; padding:32px; }
}
@media (max-width:768px) {
  .answer-card { grid-template-columns:minmax(0,1fr); }
  .tab-rail { flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; max-width:100%; padding-bottom:12px; overscroll-behavior-inline:contain; }
  .tab-rail [role="tab"] { flex-shrink:0; }
  .device-grid { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:640px) {
  .board-wrap { margin-top:48px; margin-bottom:-80px; }
  .board { border-radius:var(--r-float); }
  .board__body { padding:20px 16px 22px; }
  .board__meta { font-size:10px; }
  .flow { overflow-x:auto; max-width:100%; padding-bottom:8px; overscroll-behavior-inline:contain; }
  .ribbon,.lanes { min-width:640px; }
  .answer-card { padding:24px; border-radius:var(--r-float); }
  .get-actions { width:100%; }
  .get-actions > .btn { flex:1 1 100%; }
  .plat-grid { grid-template-columns:minmax(0,1fr); }
  .plat-card { padding:24px; }
  .plat-actions .btn { flex-basis:100%; }
  .fact-row { flex-direction:row; flex-wrap:wrap; }
  .fact-pill { padding:5px 9px; font-size:11px; }
  .device-entry { gap:18px; padding:24px; }
  .shot-row { flex-direction:column; align-items:center; }
  .dl-fab { right:16px; bottom:max(16px,env(safe-area-inset-bottom)); width:52px; height:52px; min-height:52px; padding:0; justify-content:center; border-radius:var(--r-circle); }
  .dl-fab__label { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .preview-colors { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #install table { display:block; width:100%; }
  #install thead { display:none; }
  #install tbody,#install tr,#install td { display:block; width:100%; min-width:0; }
  #install tr { border-bottom:1px solid var(--border); }
  #install tr:last-child { border-bottom:0; }
  #install td { border-bottom:0; padding:12px 16px; }
  #install td:first-child { background:var(--panel-2); color:var(--text); font-weight:var(--weight-medium); }
  #install td[data-label]::before { content:attr(data-label); display:block; margin-bottom:8px; color:var(--muted); font-size:12px; }
  #install td code { white-space:pre; overflow-wrap:normal; word-break:normal; }
}