.feature-tabs {
  display:grid;
  grid-template-columns:34fr 66fr;
  min-width:0;
  border-radius:var(--r-feature);
  background:var(--c-panel);
  color:var(--c-text);
  margin-bottom:28px;
}
.feature-tabs > * { min-width:0 }
.feature-tabs [role="tablist"] {
  display:flex;
  flex-direction:column;
  padding:24px;
  border-right:var(--border-thin) solid var(--c-border);
}
.feature-tabs [role="tab"] {
  position:relative;
  display:block;
  text-align:left;
  width:100%;
  min-height:76px;
  padding:18px 20px;
  border:0;
  border-radius:var(--r-btn);
  background:var(--c-clear);
  color:var(--c-text);
}
.tab-name { display:block; font-family:var(--font-display); font-size:23px; font-weight:var(--weight-bold); line-height:1.25 }
.tab-note { display:block; margin-top:6px; font-size:var(--size-small); font-weight:var(--weight-regular); color:var(--c-muted) }
.feature-tabs [role="tab"][aria-selected="true"]::before {
  content:"";
  position:absolute;
  left:0;
  top:16px;
  bottom:16px;
  width:4px;
  border-radius:var(--r-pill);
  background:var(--c-accent);
}
.feature-tabs [role="tab"][aria-selected="true"] .tab-name::before {
  content:"";
  display:inline-block;
  width:14px;
  height:14px;
  margin-right:10px;
  border-radius:var(--r-circle);
  background:var(--c-accent);
}
.feature-tabs [role="tab"]:hover { background:var(--c-bg); color:var(--c-text) }
.feature-tabs__body { padding:40px 0 0 32px }
.feature-tabs [role="tabpanel"] {
  position:relative;
  margin-bottom:-28px;
  margin-right:-12px;
  padding:42px;
  min-height:420px;
  border:var(--border-thin) solid var(--c-border);
  border-radius:var(--r-feature);
  background:var(--c-bg);
  color:var(--c-text);
}
.feature-tabs [role="tabpanel"] h3 { font-size:var(--size-h2); font-weight:var(--weight-heavy); margin:0 0 20px }
.feature-tabs [role="tabpanel"] p { line-height:1.85 }
.setting-chips,.fact-row,.badge-row { display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:20px 0; padding:0 }
.setting-chips span,.badge,.tag,.fact-row li {
  display:inline-flex;
  align-items:center;
  gap:8px;
  max-width:100%;
  padding:6px 12px;
  border:var(--border-thin) solid var(--c-border);
  border-radius:var(--r-pill);
  background:var(--c-bg);
  color:var(--c-text);
  font-size:var(--size-caption);
  line-height:1.5;
  overflow-wrap:anywhere;
}
.setting-chips span { font-family:var(--font-mono) }
.badge--accent,.tag--accent { background:var(--c-accent); color:var(--c-text); border-color:var(--c-accent) }
.badge__dot,.fact-row li::before { width:6px; height:6px; border-radius:var(--r-circle); background:var(--c-accent-dark); flex-shrink:0 }
.fact-row li::before { content:"" }
.fact-row--dark li { border-color:var(--c-line-dark); background:var(--c-stage); color:var(--c-on-dark-soft) }
.fact-row--dark li::before { background:var(--c-accent) }
.toc {
  position:sticky;
  top:16px;
  z-index:9;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  overflow-x:visible;
  max-width:100%;
  padding:10px;
  border:var(--border-thin) solid var(--c-border);
  border-radius:var(--r-pill);
  background:var(--c-bg);
  color:var(--c-text);
  overscroll-behavior-inline:contain;
}
.toc a { flex-shrink:0; padding:9px 16px; border-radius:var(--r-pill); text-decoration:none; font-size:var(--size-small) }
.toc a:hover,.toc a[aria-current="location"] { background:var(--c-accent); color:var(--c-text) }
.toc--flow { position:static }
.faq-group { border:var(--border-thin) solid var(--c-border); border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text) }
.faq-item { padding:0 24px }
.faq-item + .faq-item { border-top:var(--border-thin) solid var(--c-border) }
.faq-item summary {
  position:relative;
  list-style:none;
  padding:22px 30px 22px 0;
  min-height:64px;
  font-weight:var(--weight-semibold);
  cursor:pointer;
}
.faq-item summary::-webkit-details-marker { display:none }
.faq-item summary::after { content:"+"; position:absolute; right:0; top:20px; font-size:var(--size-h3); font-weight:var(--weight-regular); color:var(--c-accent-dark) }
.faq-item[open] summary::after { content:"−" }
.faq-item__answer { padding-bottom:22px; color:var(--c-muted) }
.faq-item__answer > :first-child { margin-top:0 }
.faq-item__answer > :last-child { margin-bottom:0 }
.term-card { padding:28px; border:var(--border-thin) solid var(--c-border); border-radius:var(--r-card); background:var(--c-panel); color:var(--c-text); min-width:0 }
.term-card h3 { margin:12px 0; font-family:var(--font-mono); overflow-wrap:anywhere }
.term-card p { color:var(--c-muted); margin-bottom:0 }
.app-store {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:54px;
  max-width:100%;
  padding:14px 26px;
  border:var(--border-thin) solid var(--c-clear);
  border-radius:var(--r-btn);
  background:var(--c-accent);
  color:var(--c-text);
  font:var(--weight-semibold) var(--size-body)/1.25 var(--font-body);
  text-decoration:none;
  transition:background-color var(--motion-fast);
}
.app-store:hover { background:var(--c-accent-hover); color:var(--c-text) }
.app-store svg { width:18px; height:18px; flex:none }
.app-store--ink { background:var(--c-text); color:var(--c-on-dark) }
.app-store--ink:hover { background:var(--c-frame); color:var(--c-on-dark) }
.app-store__text { display:block }
.app-store__small { display:block; font-size:11px; font-weight:var(--weight-medium); line-height:1.2 }
.app-store__large { display:block; margin-top:3px; font-size:var(--size-body); line-height:1.2 }
.app-store--primary { min-height:64px; padding:18px 32px; font-size:18px }

.official-shot { width:100%; max-width:280px; margin:0 auto; padding:0; flex-shrink:0 }
.official-shot img { display:block; width:100%; height:auto; border-radius:var(--r-shot) }
.official-shot img,.shot-placeholder { outline:var(--border-thin) solid var(--c-border); outline-offset:-1px }
.official-shot figcaption { margin-top:12px; font-size:var(--size-caption); line-height:1.7; color:var(--c-muted); text-align:center }
.shot-placeholder {
  width:100%;
  aspect-ratio:750/1334;
  border-radius:var(--r-shot);
  display:grid;
  place-content:center;
  padding:24px;
  text-align:center;
  background:var(--c-panel);
  color:var(--c-muted);
}
.shot-placeholder strong { display:block; font-family:var(--font-mono); color:var(--c-text); margin-bottom:10px }
.shot-pair { display:flex; justify-content:center; align-items:flex-start; flex-wrap:wrap; gap:32px }
.device-card {
  display:block;
  min-width:0;
  padding:36px;
  border:var(--border-thin) solid var(--c-border);
  border-radius:var(--r-card);
  background:var(--c-bg);
  color:var(--c-text);
  text-decoration:none;
}
.device-card__icon { display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:var(--r-card); background:var(--c-accent); color:var(--c-text) }
.device-card__icon svg { width:32px; height:32px }
.device-card h3 { margin:22px 0 12px }
.device-card p { color:var(--c-muted) }
.device-card__link { display:flex; justify-content:space-between; gap:16px; margin-top:28px; padding-top:16px; border-top:var(--border-thin) solid var(--c-border); font-weight:var(--weight-semibold) }
.device-card:hover { border-color:var(--c-accent-dark) }
.article-card { display:flex; flex-direction:column; min-width:0; padding:28px; border:var(--border-thin) solid var(--c-border); border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text) }
.article-card h3 { margin:20px 0 14px; font-size:var(--size-h3) }
.article-card h3 a { text-decoration:none }
.article-card h3 a:hover { text-decoration:underline }
.article-card p { color:var(--c-muted) }
.article-card__meta { display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:var(--size-caption); color:var(--c-muted) }
.article-card__link { display:block; margin-top:auto; padding-top:24px; font-weight:var(--weight-semibold); text-decoration:none }
.callout {
  margin:24px 0;
  padding:24px 28px;
  border:var(--border-thin) solid var(--c-border);
  border-left:4px solid var(--c-accent);
  border-radius:var(--r-btn);
  background:var(--c-panel);
  color:var(--c-text);
}
.callout p:first-child { margin-top:0 }
.callout p:last-child { margin-bottom:0 }
.callout--dark { background:var(--c-stage); color:var(--c-on-dark-soft); border-color:var(--c-line-dark); border-left-color:var(--c-accent) }
.grouped-list { padding:0; list-style:none; border:var(--border-thin) solid var(--c-border); border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text) }
.grouped-list li + li { border-top:var(--border-thin) solid var(--c-border) }
.grouped-list a { display:flex; justify-content:space-between; gap:16px; padding:18px 24px; min-height:56px; text-decoration:none }
.grouped-list a::after { content:"›"; color:var(--c-muted); flex-shrink:0 }
.dl-fab {
  position:fixed;
  z-index:var(--z-fab);
  right:max(20px,env(safe-area-inset-right));
  bottom:max(20px,env(safe-area-inset-bottom));
  display:inline-flex;
  align-items:center;
  gap:12px;
  max-width:calc(100% - 40px);
  min-height:56px;
  padding:14px 20px;
  border:var(--border-thin) solid var(--c-text);
  border-radius:var(--r-pill);
  background:var(--c-accent);
  color:var(--c-text);
  text-decoration:none;
  font-weight:var(--weight-semibold);
}
.dl-fab svg { width:22px; height:22px; flex:none }
.dl-fab:hover { background:var(--c-accent-hover); color:var(--c-text) }
.article-store-card { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; margin-top:48px; padding:32px; border-radius:var(--r-card); background:var(--c-panel); color:var(--c-text) }
.article-store-card__copy { flex:1 1 260px; min-width:0 }
.article-store-card h2 { margin:0 0 12px; font-size:var(--size-h3) }
.article-store-card p { margin:0; color:var(--c-muted) }
.table-scroll { max-width:100%; min-width:0; overflow-x:auto; overscroll-behavior-inline:contain; -webkit-overflow-scrolling:touch }
.data-table { border-collapse:collapse; width:100%; color:var(--c-text); background:var(--c-bg) }
.data-table th,.data-table td,.prose table th,.prose table td,.manual-content table th,.manual-content table td {
  min-width:7em;
  padding:16px 20px;
  text-align:left;
  vertical-align:top;
  border-bottom:var(--border-thin) solid var(--c-border);
  overflow-wrap:normal;
  word-break:normal;
}
.data-table th,.prose table th,.manual-content table th { background:var(--c-panel); color:var(--c-text); font-weight:var(--weight-semibold) }
.prose table,.manual-content table {
  display:block;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
  min-width:0;
  border-collapse:collapse;
  background:var(--c-bg);
  color:var(--c-text);
  overscroll-behavior-inline:contain;
}
.data-table code,.prose table code,.manual-content table code { overflow-wrap:anywhere; white-space:normal }
.demo-section { padding-top:72px; padding-bottom:16px }
.demo-section > h2 { margin:0 0 30px }
.demo-actions { display:flex; align-items:center; flex-wrap:wrap; gap:14px }
.demo-dark { padding:28px; border-radius:var(--r-card); background:var(--c-stage); color:var(--c-on-dark) }
.demo-fab { position:static; max-width:100% }
.swatches { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px }
.swatch { border:var(--border-thin) solid var(--c-border); border-radius:var(--r-btn); background:var(--c-bg); color:var(--c-text); min-width:0; overflow:hidden }
.swatch__paint { display:block; height:66px }
.swatch code { display:block; padding:10px 12px; font-size:12px }
.paint-bg { background:var(--c-bg); color:var(--c-text) }
.paint-panel { background:var(--c-panel); color:var(--c-text) }
.paint-stage { background:var(--c-stage); color:var(--c-on-dark) }
.paint-lift { background:var(--c-stage-lift); color:var(--c-on-dark) }
.paint-border { background:var(--c-border); color:var(--c-text) }
.paint-accent { background:var(--c-accent); color:var(--c-text) }
.paint-hover { background:var(--c-accent-hover); color:var(--c-text) }
.paint-dark { background:var(--c-accent-dark); color:var(--c-on-dark) }
.paint-text { background:var(--c-text); color:var(--c-on-dark) }
.paint-muted { background:var(--c-muted); color:var(--c-on-dark) }
.paint-success { background:var(--c-success); color:var(--c-text) }
.paint-warn { background:var(--c-warn); color:var(--c-text) }
.paint-error { background:var(--c-error); color:var(--c-text) }
.paint-white { background:var(--c-on-dark); color:var(--c-text) }
.paint-soft { background:var(--c-on-dark-soft); color:var(--c-text) }
.paint-dim { background:var(--c-on-dark-dim); color:var(--c-text) }
.paint-frame { background:var(--c-frame); color:var(--c-on-dark) }
.paint-metal-a { background:var(--c-metal-a); color:var(--c-on-dark) }
.paint-metal-b { background:var(--c-metal-b); color:var(--c-on-dark) }
.paint-screen-top { background:var(--c-screen-top); color:var(--c-on-dark) }
.paint-screen-bottom { background:var(--c-screen-bottom); color:var(--c-on-dark) }
.paint-island { background:var(--c-island); color:var(--c-on-dark) }
.paint-glow { background:var(--c-accent-glow); color:var(--c-text) }
.paint-halo { background:var(--c-accent-halo); color:var(--c-text) }
.paint-accent-soft { background:var(--c-accent-soft); color:var(--c-text) }
.paint-accent-line { background:var(--c-accent-line); color:var(--c-text) }
.paint-wash { background:var(--c-on-dark-wash); color:var(--c-text) }
.paint-line-dark { background:var(--c-line-dark); color:var(--c-text) }
.paint-line-strong { background:var(--c-line-dark-strong); color:var(--c-text) }
.paint-frame-hi { background:var(--c-frame-hi); color:var(--c-text) }
.paint-clear { background:var(--c-clear); color:var(--c-text) }
@media (max-width:960px) {
  .feature-tabs { grid-template-columns:1fr }
  .feature-tabs [role="tablist"] { flex-direction:row; overflow-x:auto; border-right:0; border-bottom:var(--border-thin) solid var(--c-border); padding:16px; gap:8px }
  .feature-tabs [role="tab"] { width:auto; min-height:48px; flex-shrink:0; padding:12px 18px; border-radius:var(--r-pill) }
  .tab-name { font-size:var(--size-body) }
  .tab-note { display:none }
  .feature-tabs [role="tab"][aria-selected="true"] { background:var(--c-accent); color:var(--c-text) }
  .feature-tabs [role="tab"][aria-selected="true"]::before,.feature-tabs [role="tab"][aria-selected="true"] .tab-name::before { display:none }
  .feature-tabs__body { padding:20px }
  .feature-tabs [role="tabpanel"] { margin:0; min-height:0; padding:28px }
  .swatches { grid-template-columns:repeat(3,minmax(0,1fr)) }
}
@media (max-width:640px) {
  .feature-tabs [role="tabpanel"] { padding:22px }
  .feature-tabs__body { padding:12px }
  .setting-chips,.fact-row,.badge-row { flex-direction:row; flex-wrap:wrap; gap:6px }
  .fact-row li { padding:5px 10px; font-size:12px }
  .shot-pair { flex-direction:column; align-items:center }
  .device-card,.term-card,.article-card { padding:24px }
  .callout { padding:20px }
  .faq-item { padding-inline:20px }
  .swatches { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .article-store-card { padding:24px }
  .demo-section { padding-top:48px }
}