.tabs { min-width:0 }
.tabs [role="tablist"] {
  display:flex; gap:24px; align-items:center; overflow-x:auto;
  padding-bottom:24px; max-width:100%;
}
.tabs [role="tab"] {
  flex-shrink:0; padding:10px 0; min-height:44px;
  border:0; border-bottom:1px dashed var(--text-muted);
  border-radius:var(--r-0); background:var(--bg-panel); color:var(--text-muted);
  font-family:var(--font-mono); font-size:var(--size-sm);
}
.tabs [role="tab"][aria-selected="true"] { color:var(--accent); border-bottom:2px solid var(--accent) }
.tabs [role="tabpanel"] { animation:panel-arrive .22s var(--ease) }
@keyframes panel-arrive { from { opacity:.3 } to { opacity:1 } }
.compare-panel {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  border:1px solid var(--border); background:var(--bg-panel); color:var(--text);
}
.compare-panel > * { min-width:0; padding:40px }
.compare-panel > * + * { border-left:1px solid var(--border) }
.compare-panel p { color:var(--text-muted); line-height:1.85; margin-bottom:0 }
.config-window { font-family:var(--font-mono) }
.config-title { font-size:var(--size-xs); color:var(--text-muted); padding-bottom:16px; border-bottom:1px solid var(--border); margin-bottom:20px }
.code-lines { margin:0; padding-left:3em; overflow-x:auto; font-size:var(--size-sm); line-height:2.2 }
.code-lines li { padding-left:10px; white-space:pre; min-width:max-content }
.code-lines li::marker { color:var(--text-muted) }
.code-lines code { overflow-wrap:normal }
.protocols { display:flex; flex-wrap:wrap; gap:10px }
.chip,.badge {
  display:inline-flex; align-items:center; gap:6px;
  min-height:26px; padding:3px 10px; max-width:100%;
  border:1px solid var(--accent-faint); border-radius:var(--r-0);
  background:var(--accent-tint); color:var(--accent);
  font-family:var(--font-mono); font-size:11.5px;
  font-weight:var(--weight-medium); letter-spacing:.04em;
  overflow-wrap:anywhere;
}
.chip svg { width:12px; height:12px }
.badge-neutral { border-color:var(--border); background:var(--bg-panel-2); color:var(--text-muted) }
.badge-dot::before { content:""; width:6px; height:6px; flex-shrink:0; background:var(--accent); border-radius:var(--r-round) }
.facts-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:24px }
.facts-row .fact { border:1px solid var(--border); background:var(--bg-panel); color:var(--text); min-height:30px; max-width:100% }
.toc {
  position:sticky; top:0; z-index:10; display:flex; flex-wrap:wrap; gap:8px;
  margin-bottom:40px; padding:16px;
  border:1px solid var(--border); background:var(--bg-panel); color:var(--text);
}
.toc a { display:flex; align-items:center; min-height:44px; padding:8px 12px; border:1px solid var(--border); color:var(--text-muted); font-size:var(--size-sm) }
.toc a:hover,.toc a[aria-current] { color:var(--accent); border-color:var(--accent); text-decoration:none }
.toc-flow { position:static }
.faq-list { border-top:1px solid var(--border) }
.faq-item { border-bottom:1px solid var(--border); background:var(--bg-panel); color:var(--text) }
.faq-item summary {
  list-style:none; display:block; position:relative;
  padding:24px 52px 24px 24px; font-weight:var(--weight-strong); min-height:64px;
}
.faq-item summary::-webkit-details-marker { display:none }
.faq-item summary::after { content:"+"; position:absolute; top:22px; right:24px; font-family:var(--font-mono); color:var(--accent) }
.faq-item[open] summary::after { content:"−" }
.faq-answer { padding:0 24px 24px; color:var(--text-muted) }
.faq-answer p:last-child { margin-bottom:0 }
.term-card { border:1px solid var(--border); padding:32px; background:var(--bg-panel); color:var(--text) }
.term-card dt { font-family:var(--font-mono); font-size:var(--size-h3); font-weight:var(--weight-brand); color:var(--accent); margin-bottom:16px; overflow-wrap:anywhere }
.term-card dd { margin:0; color:var(--text-muted); line-height:1.85 }
.appstore-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:14px;
  min-height:60px; max-width:100%; padding:12px 24px;
  border:1px solid var(--accent); border-radius:var(--r-0);
  background:var(--accent); color:var(--on-accent);
  transition:background-color var(--speed) var(--ease);
}
.appstore-btn:hover { background:var(--accent-dark); color:var(--on-accent); text-decoration:none }
.appstore-btn svg { width:26px; height:30px; flex-shrink:0; fill:currentColor }
.appstore-btn span { display:block }
.appstore-btn small { display:block; font-size:var(--size-xs); line-height:1.5 }
.appstore-btn strong { display:block; font-size:var(--size-body); line-height:1.5 }
.shots-row { display:flex; align-items:flex-start; justify-content:center; flex-wrap:wrap; gap:32px }
.official-shot { width:100%; max-width:280px; flex-shrink:0; margin-inline:auto; padding:0; min-width:0 }
.official-shot img { display:block; width:100%; height:auto; border-radius:10px }
.official-shot figcaption { padding-top:16px; font-size:var(--size-xs); line-height:1.7; color:var(--text-muted) }
.shot-placeholder {
  aspect-ratio:750 / 1334; display:grid; place-content:center; text-align:center;
  border:1px solid var(--border); border-radius:var(--r-0);
  background:var(--bg-panel-2); color:var(--text-muted);
  font-family:var(--font-mono); font-size:var(--size-sm);
}
.device-card { display:grid; grid-template-columns:64px minmax(0,1fr); gap:24px; padding:32px; border:1px solid var(--border); background:var(--bg-panel); color:var(--text) }
.device-card > svg { width:56px; height:72px; fill:none; stroke:currentColor; stroke-width:1.4; color:var(--text-muted) }
.device-card p { color:var(--text-muted) }
.device-card a { display:inline-flex; align-items:center; min-height:44px; font-weight:var(--weight-strong) }
.article-card { display:flex; flex-direction:column; gap:16px; padding:32px; border:1px solid var(--border); background:var(--bg-panel); color:var(--text); min-width:0 }
.article-card h3 { font-size:var(--size-h3); margin:0 }
.article-card h3 a { color:var(--text) }
.article-card h3 a:hover { color:var(--accent) }
.article-card p { color:var(--text-muted); margin:0 }
.article-meta { display:flex; align-items:center; flex-wrap:wrap; gap:12px; font-family:var(--font-mono); font-size:var(--size-xs); color:var(--text-muted) }
.article-card .article-more { margin-top:auto; min-height:44px; display:inline-flex; align-items:center; align-self:flex-start }
.callout { margin:32px 0; padding:24px; border:1px solid var(--border); border-left:3px solid var(--accent); background:var(--bg-panel); color:var(--text) }
.callout p:last-child { margin-bottom:0 }
.callout-title { display:block; font-weight:var(--weight-strong); margin-bottom:8px; color:var(--accent) }
.table-scroll { overflow-x:auto; max-width:100%; min-width:0; -webkit-overflow-scrolling:touch }
.data-table { width:100%; border-collapse:collapse; background:var(--bg-panel); color:var(--text); font-size:var(--size-sm) }
.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; border: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(--bg-panel-2); color:var(--text); font-weight:var(--weight-strong) }
.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) }
.data-table code,.prose table code,.article-body table code { overflow-wrap:anywhere }
.dl-fab {
  position:fixed; right:24px; bottom:24px; z-index:15;
  display:flex; align-items:center; gap:12px;
  min-height:56px; max-width:calc(100% - 32px); padding:12px 20px;
  border:1px solid var(--accent); border-radius:var(--r-0);
  background:var(--accent); color:var(--on-accent);
  font-size:var(--size-sm); font-weight:var(--weight-strong);
}
.dl-fab:hover { background:var(--accent-dark); color:var(--on-accent); text-decoration:none }
.dl-fab svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5 }
.article-store-card { margin-top:64px; padding:32px; border:1px solid var(--border); background:var(--bg-panel); color:var(--text) }
.article-store-card p { color:var(--text-muted) }
.article-store-card .appstore-btn { margin-top:8px }
.has-dl-fab { padding-bottom:100px }
.swatch-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px }
.swatch { min-width:0; border:1px solid var(--border); padding:12px; background:var(--bg-panel); color:var(--text) }
.swatch code { display:block; margin-top:12px; font-size:var(--size-xs) }
.swatch-color { display:block; height:64px; border:1px solid var(--border) }
.sw-bg { background:var(--bg) }
.sw-panel { background:var(--bg-panel) }
.sw-panel2 { background:var(--bg-panel-2) }
.sw-border { background:var(--border) }
.sw-accent { background:var(--accent) }
.sw-accent-dark { background:var(--accent-dark) }
.sw-text { background:var(--text) }
.sw-muted { background:var(--text-muted) }
.sw-success { background:var(--success) }
.sw-warn { background:var(--warn) }
.sw-error { background:var(--error) }
.sw-on { background:var(--on-accent) }
.sw-dot { background:var(--dot-deep) }
.sw-ring { background:var(--accent-ring) }
.sw-faint { background:var(--accent-faint) }
.sw-glow { background:var(--accent-glow) }
.sw-wash { background:var(--accent-wash) }
.sw-tint { background:var(--accent-tint) }
.sw-accent-clear { background:var(--accent-clear) }
.sw-clear { background:var(--clear) }
.sw-mask-solid { background:var(--mask-solid) }
.sw-mask-clear { background:var(--mask-clear) }
.sw-veil { background:var(--veil) }
.preview-stack { display:grid; gap:32px }
.preview-type { display:block; font-family:var(--font-display); font-size:var(--size-h1); line-height:1.14; font-weight:var(--weight-display) }
.preview-mobile { display:none; position:relative }
.preview-mobile > summary { list-style:none }
.preview-mobile nav { position:absolute; top:100%; right:0; width:min(280px,calc(100vw - 32px)); max-height:70dvh; overflow:auto; padding:16px; background:var(--bg-panel); color:var(--text); border:1px solid var(--border); z-index:5 }
.preview-mobile nav a { display:flex; align-items:center; gap:10px; min-height:44px; padding:10px; color:var(--text) }
.preview-mobile nav svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6 }
@media (max-width:1280px) { .preview-mobile { display:block } }
@media (max-width:768px) {
  .compare-panel { grid-template-columns:minmax(0,1fr) }
  .compare-panel > * { padding:24px }
  .compare-panel > * + * { border-left:0; border-top:1px solid var(--border) }
  .swatch-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:640px) {
  .tabs [role="tablist"] { gap:20px }
  .facts-row { justify-content:center; flex-direction:row }
  .facts-row .fact { font-size:11px; padding:4px 8px }
  .shots-row { flex-direction:column; align-items:center }
  .device-card { grid-template-columns:40px minmax(0,1fr); gap:16px; padding:24px }
  .device-card > svg { width:36px; height:52px }
  .article-card,.term-card,.article-store-card { padding:24px }
  .faq-item summary { padding-left:16px }
  .faq-answer { padding-left:16px; padding-right:16px }
  .toc { position:static; padding:8px; gap:6px }
  .toc a { padding:8px; font-size:var(--size-xs) }
  .dl-fab { right:16px; bottom:16px; padding:12px 16px }
}