.badge { display:inline-flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; max-width:100%; min-height:30px; padding:4px 14px 4px 12px; border-radius:var(--r-pill); background:var(--c-panel); color:var(--c-muted); border:1px solid var(--c-border); font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
.hero .badge { margin-top:24px; background:var(--c-on-dark-08); color:var(--c-on-dark-88); border-color:var(--c-on-dark-16); }
.badge__dot { width:7px; height:7px; border-radius:var(--r-circle); background:var(--c-accent); color:var(--c-white); box-shadow:0 0 0 4px var(--c-accent-soft); }
.hero .badge__dot { background:var(--c-white); color:var(--c-text); box-shadow:0 0 0 4px var(--c-on-dark-16); }
.fact-row { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px 12px; padding:0; margin:0; list-style:none; }
.fact-row li { min-width:0; max-width:100%; }
.fact-chip { display:inline-flex; align-items:center; gap:8px; min-height:34px; max-width:100%; padding:6px 14px; border:1px solid var(--c-border); border-radius:var(--r-pill); background:var(--c-panel); color:var(--c-muted); font-size:var(--text-xs); overflow-wrap:anywhere; }
.fact-chip strong { color:var(--c-text); font-weight:var(--weight-title); }
.store-button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:56px; max-width:100%; padding:10px 22px; border:1px solid var(--c-accent); border-radius:var(--r-btn); background:var(--c-accent); color:var(--c-white); text-decoration:none; font-weight:var(--weight-title); box-shadow:var(--sh-btn); transition:background var(--time-fast) var(--ease),transform var(--time-fast) var(--ease); }
.store-button:hover { background:var(--c-accent-dark); color:var(--c-white); border-color:var(--c-accent-dark); transform:translateY(-1px); }
.store-button svg { width:26px; height:28px; flex-shrink:0; }
.store-button__text { display:flex; flex-direction:column; min-width:0; line-height:1.35; }
.store-button__eyebrow { font-size:var(--text-xs); }
.store-button__name { font-size:var(--text-body); }
.tabs-set { min-width:0; }
.tabs-set [role="tablist"] { display:flex; align-items:center; gap:10px; overflow-x:auto; max-width:100%; padding:4px 4px 12px; scrollbar-width:thin; }
.tabs-set [role="tab"] { flex-shrink:0; min-height:44px; padding:10px 20px; border:1px solid var(--c-border); border-radius:var(--r-pill); background:var(--c-bg); color:var(--c-muted); font-weight:var(--weight-title); white-space:nowrap; }
.tabs-set [role="tab"]:hover { color:var(--c-accent); }
.tabs-set [role="tab"][aria-selected="true"] { background:var(--c-accent); color:var(--c-white); border-color:var(--c-accent); }
.tabs-set [role="tabpanel"] { margin-top:20px; min-width:0; }
.feature-canvas { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:center; gap:48px; padding:48px; border-radius:var(--r-panel); background:var(--grad-feature); color:var(--c-white); overflow-x:clip; }
.feature-canvas > * { min-width:0; }
.feature-copy p { margin-top:20px; line-height:1.9; color:var(--c-on-dark-88); }
.feature-copy h3 { font-size:var(--text-h3); }
.feature-copy a { color:var(--c-white); }
.feature-material { min-width:0; padding:28px; border:1px solid var(--c-border); border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text); }
.feature-material pre { background:var(--c-bg); color:var(--c-text); border:0; margin:0; padding:0; }
.toc { position:sticky; top:var(--nav-h); z-index:30; padding-block:12px; border-bottom:1px solid var(--c-border); background:var(--c-bg); color:var(--c-text); }
.toc__list { display:flex; align-items:center; gap:8px; list-style:none; padding:0; margin:0; overflow-x:auto; }
.toc a { display:inline-flex; align-items:center; min-height:44px; padding:10px 16px; border-radius:var(--r-pill); color:var(--c-muted); text-decoration:none; white-space:nowrap; }
.toc a:hover,.toc a[aria-current="location"] { background:var(--c-panel); color:var(--c-accent); }
.toc--flow { position:static; }
.faq-list { display:grid; gap:12px; }
.faq-item { border:1px solid var(--c-border); border-radius:var(--r-group); background:var(--c-bg); color:var(--c-text); min-width:0; }
.faq-item summary { display:block; position:relative; padding:20px 52px 20px 24px; min-height:64px; font-weight:var(--weight-title); cursor:pointer; list-style:none; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; position:absolute; right:24px; top:20px; color:var(--c-accent); }
.faq-item[open] summary::after { content:"−"; }
.faq-item__body { padding:0 24px 24px; color:var(--c-muted); }
.faq-item__body p + p { margin-top:12px; }
.term-card { border:1px solid var(--c-border); border-radius:var(--r-card); padding:28px; background:var(--c-panel); color:var(--c-text); min-width:0; }
.term-card__category { display:block; margin-bottom:12px; color:var(--c-muted); font-size:var(--text-xs); }
.term-card h3 { font-family:var(--font-mono); font-size:var(--text-lead); overflow-wrap:anywhere; }
.term-card p { margin-top:16px; color:var(--c-muted); }
.shot-layout { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:48px; align-items:start; }
.shot-layout > * { min-width:0; }
.official-shot { width:100%; max-width:280px; min-width:0; margin-inline:auto; flex-shrink:0; }
.official-shot img { display:block; width:100%; height:auto; border-radius:var(--r-shot); }
.official-shot img { outline:1px solid var(--c-border); outline-offset:-1px; }
.official-shot figcaption { margin-top:12px; color:var(--c-muted); font-size:var(--text-xs); line-height:1.7; text-align:center; }
.device-card { display:flex; align-items:flex-start; gap:24px; min-width:0; padding:32px; border-radius:var(--r-card); border:1px solid var(--c-border); background:var(--c-bg); color:var(--c-text); }
.device-card__icon { width:48px; height:58px; color:var(--c-accent); flex-shrink:0; }
.device-card__body { min-width:0; }
.device-card p { margin-top:12px; color:var(--c-muted); }
.device-card a { display:inline-flex; align-items:center; min-height:44px; margin-top:12px; font-size:var(--text-sm); }
.article-card { display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding:28px; min-width:0; border:1px solid var(--c-border); border-radius:var(--r-card); background:var(--c-bg); color:var(--c-text); }
.article-card__meta { display:flex; flex-wrap:wrap; align-items:center; gap:12px; font-size:var(--text-xs); color:var(--c-muted); }
.article-card h3 { font-size:var(--text-lead); }
.article-card h3 a { color:var(--c-text); text-decoration:none; }
.article-card h3 a:hover { color:var(--c-accent); }
.article-card p { color:var(--c-muted); }
.article-card__link { margin-top:auto; display:inline-flex; align-items:center; min-height:44px; font-size:var(--text-sm); }
.callout { margin:0; padding:24px 28px; border:1px solid var(--c-border); border-left:3px solid var(--c-accent); border-radius:var(--r-group); background:var(--c-panel); color:var(--c-text); }
.callout p + p { margin-top:12px; }
.callout__title { display:block; margin-bottom:8px; font-weight:var(--weight-title); }
.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-group); }
.data-table { width:100%; border-collapse:collapse; text-align:left; font-size:var(--text-sm); background:var(--c-bg); color:var(--c-text); }
.data-table th,.data-table td,.prose th,.prose td,.article-body th,.article-body 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 th,.article-body th { background:var(--c-panel); color:var(--c-text); font-weight:var(--weight-title); }
.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; background:var(--c-bg); color:var(--c-text); }
.prose td code,.prose th code,.article-body td code,.article-body th code,.data-table code { overflow-wrap:anywhere; }
.dl-fab { position:fixed; right:24px; bottom:calc(24px + env(safe-area-inset-bottom)); z-index:50; display:flex; align-items:center; gap:12px; max-width:calc(100% - 40px); min-height:56px; padding:12px 20px; border:1px solid var(--c-accent); border-radius:var(--r-pill); background:var(--c-accent); color:var(--c-white); font-size:var(--text-sm); font-weight:var(--weight-title); text-decoration:none; box-shadow:var(--sh-card); }
.dl-fab:hover { background:var(--c-accent-dark); color:var(--c-white); }
.dl-fab svg { width:22px; height:22px; }
.article-store-card { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px; margin-top:64px; padding:32px; border:1px solid var(--c-border); 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 p { margin-top:12px; color:var(--c-muted); }
.preview-placeholder { background:var(--c-bg); color:var(--c-muted); border:1px solid var(--c-border); }
.preview-mark { border-radius:var(--r-mark); }
.preview-shot { display:grid; place-items:center; width:100%; aspect-ratio:750 / 1334; border:1px solid var(--c-border); border-radius:var(--r-shot); background:var(--c-panel); color:var(--c-muted); font-size:var(--text-sm); text-align:center; padding:20px; }
.preview-swatch-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.preview-swatch { min-width:0; }
.preview-swatch__paint { display:block; height:72px; margin-bottom:10px; border:1px solid var(--c-border); border-radius:var(--r-group); }
.swatch-bg { background:var(--c-bg); color:var(--c-text); }
.swatch-panel { background:var(--c-panel); color:var(--c-text); }
.swatch-navy { background:var(--c-navy); color:var(--c-white); }
.swatch-cobalt { background:var(--c-cobalt); color:var(--c-white); }
.swatch-lavender { background:var(--c-lavender); color:var(--c-text); }
.swatch-border { background:var(--c-border); color:var(--c-text); }
.swatch-accent { background:var(--c-accent); color:var(--c-white); }
.swatch-accent-dark { background:var(--c-accent-dark); color:var(--c-white); }
.swatch-text { background:var(--c-text); color:var(--c-white); }
.swatch-muted { background:var(--c-muted); color:var(--c-white); }
.swatch-success { background:var(--c-success); color:var(--c-text); }
.swatch-warn { background:var(--c-warn); color:var(--c-text); }
.swatch-error { background:var(--c-error); color:var(--c-white); }
.swatch-kw-a { background:var(--c-kw-a); color:var(--c-white); }
.swatch-kw-b { background:var(--c-kw-b); color:var(--c-text); }
.swatch-gradient { background:var(--grad-canvas); color:var(--c-text); }
.preview-type { display:grid; gap:24px; }
.preview-h1 { font-size:var(--text-h1); line-height:1.14; font-weight:var(--weight-title); letter-spacing:var(--track-title); }
.preview-tools { margin-left:auto; }
.preview-language { position:relative; }
.preview-language > summary { list-style:none; cursor:pointer; }
.preview-language > summary::-webkit-details-marker { display:none; }
.preview-language .lang-menu { z-index:4; }
.preview-header { position:absolute; }
.preview-footer-space { margin-top:var(--section-gap); }
.preview-section-note { margin-top:20px; color:var(--c-muted); font-size:var(--text-sm); }
.preview-fact-row { margin-top:32px; }
@media (max-width:1100px) {
  .preview-header .tabs { display:block; order:3; flex:1 0 100%; overflow-x:auto; }
  .preview-header .masthead__bar { height:auto; flex-wrap:wrap; row-gap:0; padding-top:14px; }
  .preview-header .tabs__link { height:48px; }
  .preview-header .tabs__link::after { bottom:6px; }
  .preview-header + main .hero { padding-top:142px; }
}
@media (max-width:900px) {
  .feature-canvas { grid-template-columns:minmax(0,1fr); padding:32px; gap:32px; }
}
@media (max-width:640px) {
  .feature-canvas { padding:28px 20px; }
  .feature-material { padding:24px 20px; }
  .shot-layout { grid-template-columns:minmax(0,1fr); gap:32px; }
  .official-shot { justify-self:center; }
  .device-card { padding:24px 20px; gap:16px; }
  .device-card__icon { width:36px; height:48px; }
  .term-card,.article-card { padding:24px 20px; }
  .preview-swatch-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .fact-row { flex-direction:row; flex-wrap:wrap; justify-content:center; gap:8px; }
  .fact-chip { font-size:11px; padding:6px 10px; }
  .dl-fab { right:20px; bottom:calc(20px + env(safe-area-inset-bottom)); }
  .article-store-card { padding:24px 20px; }
}
@media (prefers-reduced-motion:reduce) {
  .store-button { transition:none; }
}