.qindex { position:relative; max-width:var(--w-panel); margin:30px auto 0; padding:18px 22px 22px; background:var(--c-panel); color:var(--c-text); border-radius:var(--r-panel); }
.qindex__bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-bottom:14px; }
.qindex__label { display:inline-flex; align-items:center; gap:9px; margin:0; font-size:12px; font-weight:var(--weight-medium); letter-spacing:.12em; color:var(--c-muted); text-transform:uppercase; }
.qindex__label::before,.square-mark::before { content:""; display:inline-block; width:8px; height:8px; flex-shrink:0; border-radius:var(--r-square); background:var(--c-accent); }
.qindex__all { font-size:13px; color:var(--c-muted); }
.qindex__all:hover { color:var(--c-accent); }
.qindex__all b { font-family:var(--f-mono); font-weight:var(--weight-regular); color:var(--c-text); }
.qindex__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:0; padding:0; list-style:none; }
.qcard { display:flex; flex-direction:column; min-width:0; padding:16px 18px 14px; background:var(--c-card); color:var(--c-text); border:var(--stroke) solid var(--c-border); border-radius:var(--r-card); box-shadow:var(--sh-card); }
.qcard__head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.qcard__num { font-family:var(--f-mono); font-size:12.5px; letter-spacing:.04em; color:var(--c-accent); flex-shrink:0; }
.qcard__cat { font-size:11.5px; color:var(--c-muted); }
.qcard__title { margin:6px 0 12px; font-size:18px; line-height:1.35; }
.qcard__body { min-width:0; margin-bottom:2px; }
.qcard__hint { margin:8px 0 0; font-size:12.5px; color:var(--c-muted); }
.qcard__hint code { font-size:12px; color:var(--c-text); }
.qcard__more { display:inline-flex; align-items:center; gap:6px; align-self:flex-start; margin-top:auto; padding-top:12px; font-size:13.5px; color:var(--c-accent); }
.qcard__more:hover { color:var(--c-accent-dark); }
.qcard__more span { font-family:var(--f-mono); }
.glist { margin:0; padding:0; list-style:none; border:var(--stroke) solid var(--c-border-soft); border-radius:var(--r-strip); background:var(--c-card); color:var(--c-text); }
.glist__row { position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:34px; padding:6px 12px; font-size:13px; }
.glist__row + .glist__row::before { content:""; position:absolute; left:12px; right:0; top:0; height:1px; background:var(--c-border-soft); }
.glist__key { color:var(--c-muted); flex-shrink:0; }
.glist__name { color:var(--c-text); }
.glist__val { display:inline-flex; align-items:center; gap:6px; min-width:0; color:var(--c-text); text-align:right; overflow-wrap:break-word; }
.glist__val--mono { font-family:var(--f-mono); font-size:12.5px; }
.glist__val--muted { color:var(--c-muted); }
.glist__chev { width:7px; height:12px; color:var(--c-muted); flex-shrink:0; }
.strip { margin:8px 0 0; padding:8px 12px; max-width:100%; overflow-x:auto; background:var(--c-strip); color:var(--c-text); border:var(--stroke) solid var(--c-border-soft); border-radius:var(--r-strip); font-family:var(--f-mono); font-size:12.5px; line-height:1.7; white-space:pre; overscroll-behavior-inline:contain; }
.strip--first { margin-top:0; }
.strip__dim,.strip__sec { color:var(--c-muted); }
.square-mark { display:block; margin-bottom:20px; }

.tabs { min-width:0; }
.tabs__list,[role="tablist"].segment-control { display:flex; flex-wrap:wrap; justify-content:center; gap:4px; width:fit-content; max-width:100%; margin:0 auto 28px; padding:5px; border-radius:var(--r-pill); background:var(--c-panel); color:var(--c-text); }
.tabs__tab { min-height:42px; padding:8px 18px; border:var(--stroke) solid var(--c-transparent); border-radius:var(--r-pill); background:var(--c-transparent); color:var(--c-muted); font-family:var(--f-mono); font-size:13px; }
.tabs__tab:hover { color:var(--c-text); }
.tabs__tab[aria-selected="true"] { border-color:var(--c-border); background:var(--c-card); color:var(--c-text); }
.tabs__panel { min-width:0; scroll-margin-top:24px; }
.feature-panel { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; padding:48px; border-radius:var(--r-panel); background:var(--c-panel); color:var(--c-text); }
.feature-panel h3 { margin-block:0 18px; font-size:28px; }
.feature-panel__question { color:var(--c-text); }
.feature-panel__copy { min-width:0; }
.feature-panel__copy > p:last-child { margin-bottom:0; color:var(--c-muted); line-height:1.85; }
.feature-panel__field { display:grid; align-content:center; min-width:0; min-height:280px; padding:28px; border-radius:var(--r-card); background:linear-gradient(135deg,var(--c-field-start),var(--c-field-end)); color:var(--c-text); }
.feature-panel__field .card { box-shadow:var(--sh-card); }
.toc { display:flex; flex-wrap:wrap; gap:8px; padding:12px; margin-block:24px 40px; border:var(--stroke) solid var(--c-border); border-radius:var(--r-card); background:var(--c-panel); color:var(--c-text); }
.toc a { display:flex; align-items:center; min-height:44px; padding:8px 14px; border-radius:var(--r-pill); color:var(--c-muted); font-size:14px; }
.toc a:hover,.toc a[aria-current="location"] { background:var(--c-card); color:var(--c-accent); }
.faq-item { margin-block:12px; border:var(--stroke) solid var(--c-border); border-radius:var(--r-card); background:var(--c-card); color:var(--c-text); }
.faq-item summary { position:relative; list-style:none; cursor:pointer; padding:20px 52px 20px 22px; font-weight:var(--weight-medium); }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; position:absolute; right:22px; top:20px; color:var(--c-accent); font-family:var(--f-mono); }
.faq-item[open] summary::after { content:"−"; }
.faq-item__answer { padding:0 22px 22px; color:var(--c-muted); }
.faq-item__answer p:last-child { margin-bottom:0; }
.term-card { padding:26px; border:var(--stroke) solid var(--c-border); border-radius:var(--r-card); background:var(--c-card); color:var(--c-text); }
.term-card__category { color:var(--c-accent); font-family:var(--f-mono); font-size:12px; }
.term-card h3 { margin-block:10px 12px; font-size:22px; }
.term-card p { margin-bottom:0; color:var(--c-muted); }
.store-button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:56px; max-width:100%; padding:10px 24px; border:var(--stroke) solid var(--c-accent-dark); border-radius:var(--r-btn); background:var(--c-accent); color:var(--c-on-accent); box-shadow:var(--sh-btn); text-align:left; transition:background-color var(--motion-fast); }
.store-button:hover,.store-button.is-hover { background:var(--c-accent-dark); color:var(--c-on-accent); }
.store-button svg { width:26px; height:30px; }
.store-button__copy { display:block; min-width:0; }
.store-button__eyebrow { display:block; font-size:11px; line-height:1.3; }
.store-button__title { display:block; font-size:16px; font-weight:var(--weight-medium); line-height:1.5; }
.store-button--primary { min-height:64px; padding:13px 30px; }
.store-button--primary .store-button__title { font-size:19px; }
.fact-pills { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; margin:20px 0; padding:0; list-style:none; }
.fact-pill,.badge { display:inline-flex; align-items:center; gap:7px; max-width:100%; min-height:28px; padding:4px 11px; border:var(--stroke) solid var(--c-border); border-radius:var(--r-pill); background:var(--c-card); color:var(--c-muted); font-size:12px; overflow-wrap:anywhere; }
.fact-pill strong { color:var(--c-text); }
.badge--accent { color:var(--c-accent); }
.badge__dot { width:6px; height:6px; flex-shrink:0; border-radius:var(--r-dot); background:var(--c-accent); }
.shot-row { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center; gap:32px; }
.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(--r-shot); }
.official-shot figcaption { margin-top:12px; font-size:12px; color:var(--c-muted); line-height:1.6; }
.official-shot__frame { border:var(--stroke) solid var(--c-border); border-radius:var(--r-shot); background:var(--c-card); color:var(--c-text); }
.shot-placeholder { display:grid; place-items:center; width:100%; aspect-ratio:750 / 1334; padding:24px; border:var(--stroke) solid var(--c-border); border-radius:var(--r-shot); background:var(--c-panel); color:var(--c-muted); text-align:center; font-size:13px; }
.device-card { display:flex; align-items:flex-start; gap:22px; min-width:0; padding:28px; border:var(--stroke) solid var(--c-border); border-radius:var(--r-card); background:var(--c-card); color:var(--c-text); }
.device-card__icon { width:44px; height:56px; color:var(--c-muted); flex-shrink:0; }
.device-card__copy { min-width:0; }
.device-card h3 { margin:0 0 10px; font-size:24px; }
.device-card p { color:var(--c-muted); }
.device-card:hover { border-color:var(--c-accent); }
.article-card { display:flex; flex-direction:column; align-items:flex-start; padding:26px; min-width:0; border:var(--stroke) solid var(--c-border); border-radius:var(--r-card); background:var(--c-card); color:var(--c-text); }
.article-card__meta { display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:12px; color:var(--c-muted); }
.article-card h3 { margin-block:20px 14px; font-size:21px; line-height:1.5; }
.article-card p { color:var(--c-muted); }
.article-card__link { margin-top:auto; padding-top:16px; color:var(--c-accent); font-size:14px; }
.callout { margin:24px 0; padding:22px 24px; border:var(--stroke) solid var(--c-border); border-left:3px solid var(--c-accent); border-radius:var(--r-btn); background:var(--c-panel); color:var(--c-text); }
.callout p:last-child { margin-bottom:0; }
.callout__title { font-weight:var(--weight-medium); }
.callout--warning { border-left-color:var(--c-warn); }
.table-scroll { max-width:100%; min-width:0; overflow-x:auto; overscroll-behavior-inline:contain; border:var(--stroke) solid var(--c-border); border-radius:var(--r-card); background:var(--c-card); color:var(--c-text); }
.data-table { width:100%; border-collapse:collapse; text-align:left; font-size:14px; }
.data-table :where(th,td),.prose table :where(th,td),.article-body table :where(th,td) { min-width:7em; padding:14px 18px; border-bottom:var(--stroke) solid var(--c-border); vertical-align:top; overflow-wrap:normal; word-break:normal; }
.data-table th,.prose table th,.article-body table th { background:var(--c-panel); color:var(--c-text); font-weight:var(--weight-medium); }
.data-table td,.prose table td,.article-body table td { background:var(--c-card); color:var(--c-text); }
.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; }
.dl-fab { position:fixed; right:24px; bottom:24px; z-index:30; display:flex; align-items:center; gap:12px; max-width:calc(100% - 32px); min-height:56px; padding:12px 18px; border:var(--stroke) solid var(--c-border); border-radius:var(--r-card); background:var(--c-card); color:var(--c-text); box-shadow:var(--sh-card); }
.dl-fab svg { width:22px; height:22px; color:var(--c-accent); }
.dl-fab__copy { min-width:0; }
.dl-fab strong { display:block; font-size:13px; }
.dl-fab small { display:block; font-size:11px; color:var(--c-muted); }
.dl-fab:hover { border-color:var(--c-accent); }
.article-store-card { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; margin-top:56px; padding:28px; border:var(--stroke) solid var(--c-border); border-radius:var(--r-panel); background:var(--c-panel); color:var(--c-text); }
.article-store-card__copy { flex:1 1 240px; min-width:0; }
.article-store-card h2 { font-size:24px; margin:0 0 12px; }
.article-store-card p { margin:0; color:var(--c-muted); }
.swatch-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; }
.swatch { min-width:0; margin:0; border:var(--stroke) solid var(--c-border); border-radius:var(--r-card); background:var(--c-card); color:var(--c-text); }
.swatch__paint { height:64px; border-bottom:var(--stroke) solid var(--c-border); border-radius:var(--r-card) var(--r-card) 0 0; }
.swatch figcaption { padding:12px; font-family:var(--f-mono); font-size:11px; overflow-wrap:anywhere; }
.swatch--bg { background:var(--c-bg); }
.swatch--panel { background:var(--c-panel); }
.swatch--card { background:var(--c-card); }
.swatch--strip { background:var(--c-strip); }
.swatch--border { background:var(--c-border); }
.swatch--border-soft { background:var(--c-border-soft); }
.swatch--accent { background:var(--c-accent); }
.swatch--accent-dark { background:var(--c-accent-dark); }
.swatch--ring { background:var(--c-accent-ring); }
.swatch--text { background:var(--c-text); }
.swatch--muted { background:var(--c-muted); }
.swatch--faint { background:var(--c-faint); }
.swatch--success { background:var(--c-success); }
.swatch--warn { background:var(--c-warn); }
.swatch--error { background:var(--c-error); }
.swatch--grid { background:var(--c-grid); }
.swatch--horizon { background:var(--c-horizon); }
.swatch--mask { background:var(--c-mask); }
.swatch--transparent { background:var(--c-transparent); }
.swatch--veil { background:var(--c-veil); }
.swatch--field-start { background:var(--c-field-start); }
.swatch--field-end { background:var(--c-field-end); }
.preview-section { padding-top:72px; padding-bottom:72px; }
.preview-section--panel { background:var(--c-panel); color:var(--c-text); }
.preview-section h2 { margin-top:0; }
.preview-note { font-size:13px; color:var(--c-muted); }
@media (max-width:900px) {
  .qindex__grid { grid-template-columns:minmax(0,1fr); }
  .feature-panel { gap:28px; padding:28px; }
}
@media (max-width:640px) {
  .qindex { padding:16px 14px; }
  .qcard { padding-inline:14px; }
  .feature-panel { grid-template-columns:minmax(0,1fr); padding:22px; }
  .feature-panel__field { min-height:220px; padding:18px; }
  .feature-panel__field .card { padding:14px; }
  .tabs__list { border-radius:var(--r-card); gap:3px; }
  .tabs__tab { padding-inline:12px; font-size:12px; }
  .fact-pills { flex-direction:row; gap:7px; }
  .shot-row { flex-direction:column; align-items:center; }
  .device-card { gap:16px; padding:20px; }
  .device-card__icon { width:32px; height:44px; }
  .dl-fab { right:16px; bottom:max(16px,env(safe-area-inset-bottom)); }
  .callout { padding:18px; }
  .article-store-card { padding:22px; }
}