.tabs { min-width:0; }
[role="tablist"] { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; min-width:0; }
[role="tab"] { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:10px 18px; border:1px solid var(--c-border); border-radius:var(--r-pill); background:var(--c-panel); color:var(--c-text); font-weight:600; }
[role="tab"]:hover { border-color:var(--c-accent); }
[role="tab"][aria-selected="true"] { background:var(--c-accent); color:var(--c-ink); border-color:var(--c-accent); }
[role="tabpanel"] { min-width:0; scroll-margin-top:24px; }
.feature-proof { display:grid; grid-template-columns:minmax(220px,.8fr) minmax(0,1.4fr); gap:64px; align-items:start; }
.feature-proof>* { min-width:0; }
.feature-index h2 { margin-bottom:32px; }
.feature-index [role="tablist"] { display:flex; flex-direction:column; gap:0; }
.feature-index [role="tab"] { justify-content:flex-start; border:0; border-left:3px solid var(--c-clear); border-radius:0; background:var(--c-clear); color:var(--c-text-muted); padding:16px 20px; text-align:left; }
.feature-index [role="tab"][aria-selected="true"] { border-left-color:var(--c-accent); color:var(--c-text); background:var(--c-clear); }
.proof-window { position:relative; border:1px solid var(--c-line-2); border-radius:var(--r-xl); background:var(--c-paper); color:var(--c-ink); box-shadow:var(--sh-win); min-width:0; }
.proof-chrome { display:flex; align-items:center; gap:8px; min-height:48px; padding:12px 22px; border-radius:var(--r-xl) var(--r-xl) 0 0; background:var(--c-chrome); color:var(--c-ink-2); border-bottom:1px solid var(--c-line-2); font-size:13px; }
.proof-chrome b { margin-left:12px; font-weight:600; }
.proof-content { padding:40px 36px; }
.proof-content p { color:var(--c-ink-2); line-height:1.9; }
.client-stamp { position:absolute; right:18px; top:-22px; max-width:calc(100% - 36px); padding:10px 16px; border-radius:var(--r-md); background:var(--c-glass); color:var(--c-ink); border:1px solid var(--c-glass-edge); backdrop-filter:blur(14px); box-shadow:var(--sh-glass); font-size:12px; font-family:var(--f-mono); overflow-wrap:anywhere; }
.proof-margin { color:var(--c-accent); font-family:var(--f-hand); font-size:22px; padding-top:20px; text-align:right; }
.toc { position:sticky; top:16px; z-index:10; display:flex; flex-wrap:wrap; gap:8px; padding:16px; margin-bottom:32px; border:1px solid var(--c-border); border-radius:var(--r-lg); background:var(--c-bg); color:var(--c-text); }
.toc a { display:inline-flex; align-items:center; min-height:44px; padding:8px 14px; border-radius:var(--r-sm); font-size:14px; }
.toc a:hover,.toc a[aria-current="location"] { background:var(--c-panel); color:var(--c-accent); }
.toc.is-static { position:static; }
.faq-list { border-top:1px solid var(--c-border); }
.faq-item { border-bottom:1px solid var(--c-border); min-width:0; }
.faq-item summary { position:relative; list-style:none; padding:24px 40px 24px 0; font-weight:700; cursor:pointer; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; position:absolute; right:4px; top:22px; color:var(--c-accent); font-size:24px; line-height:1; }
.faq-item[open] summary::after { content:"−"; }
.faq-answer { padding-bottom:24px; max-width:70em; color:var(--c-text-muted); }
.faq-answer p:last-child { margin-bottom:0; }
.paper .faq-list,.paper .faq-item { border-color:var(--c-line-2); }
.paper .faq-answer { color:var(--c-ink-2); }
.paper .faq-item summary::after { color:var(--c-ink); }
.term-card { padding:28px 32px; border-left:3px solid var(--c-accent); border-radius:0 var(--r-lg) var(--r-lg) 0; background:var(--c-panel); color:var(--c-text); min-width:0; }
.term-card h3 { margin-bottom:8px; }
.term-en { font-family:var(--f-mono); font-size:12px; color:var(--c-text-muted); overflow-wrap:anywhere; }
.term-card p { margin-top:16px; margin-bottom:0; color:var(--c-text-muted); }
.client-card { padding:36px; border-radius:var(--r-xl); background:var(--c-paper); color:var(--c-ink); box-shadow:var(--sh-win); border:1px solid var(--c-line-2); min-width:0; }
.client-heading { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.client-heading h3 { margin:0; }
.app-icon { width:56px; height:56px; flex-shrink:0; }
.client-heading-text { min-width:0; }
.client-card p { color:var(--c-ink-2); }
.client-version { font-family:var(--f-mono); font-size:13px; color:var(--c-ink-2); }
.client-version:empty { display:none; }
.client-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.client-secondary { display:flex; flex-wrap:wrap; gap:12px 20px; margin-top:18px; font-size:13px; color:var(--c-ink-2); }
.client-secondary a { text-decoration:underline; text-underline-offset:4px; }
.badges { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.badge,.tag { display:inline-block; max-width:100%; padding:5px 10px; border-radius:var(--r-pill); font-size:12px; line-height:1.5; overflow-wrap:anywhere; background:var(--c-chrome); color:var(--c-ink-2); border:1px solid var(--c-line-2); }
.badge-featured { background:var(--c-accent); color:var(--c-ink); border-color:var(--c-accent); font-weight:700; }
.badge-recommended { background:var(--c-clear); color:var(--c-accent); border-color:var(--c-accent); }
.paper-panel .badge-recommended,.client-card .badge-recommended { color:var(--c-ink); border-color:var(--c-accent-dark); }
.badge-retired { background:var(--c-warn); color:var(--c-ink); border-color:var(--c-warn); }
.badge-success { background:var(--c-success); color:var(--c-ink); border-color:var(--c-success); }
.badge-error { background:var(--c-error); color:var(--c-bezel); border-color:var(--c-error); }
.article-card { display:grid; grid-template-columns:180px minmax(0,1fr); gap:32px; padding-top:32px; padding-bottom:32px; border-top:1px solid var(--c-border); }
.article-card>* { min-width:0; }
.article-meta { display:flex; align-items:flex-start; flex-wrap:wrap; gap:12px; color:var(--c-text-muted); font-size:13px; }
.article-meta time { font-family:var(--f-mono); }
.article-card h3 { font-size:24px; margin-bottom:12px; }
.article-card h3 a:hover { text-decoration:underline; text-decoration-color:var(--c-accent); text-underline-offset:6px; }
.article-card p { color:var(--c-text-muted); margin-bottom:0; }
.article-more { display:inline-block; margin-top:18px; color:var(--c-accent); font-size:14px; }
.callout { margin:28px 0; padding:24px 28px; border-left:3px solid var(--c-accent); border-radius:0 var(--r-lg) var(--r-lg) 0; background:var(--c-panel); color:var(--c-text); }
.callout p { color:var(--c-text); }
.callout p:last-child { margin-bottom:0; }
.callout-title { display:block; margin-bottom:8px; font-weight:700; color:var(--c-accent); }
.callout-warning { border-color:var(--c-warn); }
.callout-warning .callout-title { color:var(--c-warn); }
.paper .callout,.paper-panel .callout { background:var(--c-chrome); color:var(--c-ink); }
.paper .callout p,.paper-panel .callout p,.paper .callout-title,.paper-panel .callout-title { color:var(--c-ink); }
.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-md); margin-block:24px; }
.data-table { border-collapse:collapse; width:100%; font-size:14px; text-align:left; background:var(--c-panel); color:var(--c-text); }
.data-table th,.data-table td,.prose table th,.prose table td { min-width:7em; padding:16px 20px; border-bottom:1px solid var(--c-border); overflow-wrap:normal; word-break:normal; vertical-align:top; }
.data-table th { background:var(--c-chrome); color:var(--c-ink); font-weight:700; }
.data-table tr:last-child td { border-bottom:0; }
.prose table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; min-width:0; border-collapse:collapse; margin-block:24px; }
.prose table th { background:var(--c-chrome); color:var(--c-ink); }
.prose table td { background:var(--c-panel); color:var(--c-text); }
.paper .prose table td,.paper-panel .prose table td { background:var(--c-paper-hi); color:var(--c-ink); }
.data-table code,.prose table code { overflow-wrap:anywhere; }
.download-endnote { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; padding:28px 32px; margin-top:48px; border-radius:var(--r-xl); background:var(--c-panel); color:var(--c-text); border:1px solid var(--c-border); }
.download-endnote h2 { font-size:24px; margin-bottom:8px; }
.download-endnote p { color:var(--c-text-muted); margin:0; }
.download-endnote-copy { flex:1 1 240px; min-width:0; }
.dl-fab { position:fixed; right:24px; bottom:calc(24px + env(safe-area-inset-bottom,0px)); z-index:30; display:flex; align-items:center; gap:14px; max-width:calc(100% - 40px); min-height:64px; padding:14px 20px; background:var(--c-accent); color:var(--c-ink); border:1px solid var(--c-accent-dark); border-radius:var(--r-lg); box-shadow:var(--sh-fab); }
.dl-fab svg { width:24px; height:24px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.dl-fab strong { display:block; font-size:15px; }
.dl-fab small { display:block; font-size:12px; }
.dl-fab:hover { background:var(--c-paper); color:var(--c-ink); }
.has-dl-fab .site-footer { padding-bottom:112px; }

.preview-section-title { margin-bottom:40px; }
.preview-row { display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.preview-row+.preview-row { margin-top:24px; }
.palette { display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:16px; }
.swatch { border:1px solid var(--c-border); border-radius:var(--r-md); overflow:hidden; background:var(--c-panel); color:var(--c-text); }
.swatch-sample { height:72px; border-bottom:1px solid var(--c-border); }
.swatch code { display:block; padding:12px; font-size:11px; }
.sw-bg { background:var(--c-bg); }
.sw-panel { background:var(--c-panel); }
.sw-paper { background:var(--c-paper); }
.sw-border { background:var(--c-border); }
.sw-accent { background:var(--c-accent); }
.sw-accent-dark { background:var(--c-accent-dark); }
.sw-text { background:var(--c-text); }
.sw-muted { background:var(--c-text-muted); }
.sw-success { background:var(--c-success); }
.sw-warn { background:var(--c-warn); }
.sw-error { background:var(--c-error); }
.sw-ink { background:var(--c-ink); }
.sw-ink-2 { background:var(--c-ink-2); }
.sw-ink-3 { background:var(--c-ink-3); }
.sw-white { background:var(--c-white); }
.sw-paper-hi { background:var(--c-paper-hi); }
.sw-line { background:var(--c-line); }
.sw-line-2 { background:var(--c-line-2); }
.sw-chrome { background:var(--c-chrome); }
.sw-chrome-2 { background:var(--c-chrome-2); }
.sw-cell { background:var(--c-cell); }
.sw-dot-1 { background:var(--c-dot-1); }
.sw-dot-2 { background:var(--c-dot-2); }
.sw-dot-3 { background:var(--c-dot-3); }
.sw-bezel { background:var(--c-bezel); }
.sw-bezel-edge { background:var(--c-bezel-edge); }
.sw-fab { background:var(--c-fab); }
.sw-glass { background:var(--c-glass); }
.sw-glass-edge { background:var(--c-glass-edge); }
.sw-accent-wash { background:var(--c-accent-wash); }
.sw-clear { background:var(--c-clear); }
.sw-veil { background:var(--c-veil); }
.type-specimen { border-bottom:1px solid var(--c-border); padding-block:24px; }
.type-specimen .type-display { font-family:var(--f-display); font-weight:900; font-size:clamp(34px,3.35vw,48px); line-height:1.15; }
.type-specimen code { color:var(--c-text-muted); }
.fab-specimen { position:static; max-width:100%; width:fit-content; }
@media (max-width:960px) {
  .feature-proof { gap:32px; grid-template-columns:minmax(190px,.7fr) minmax(0,1fr); }
  .proof-content { padding:32px 24px; }
}
@media (max-width:640px) {
  .feature-proof { grid-template-columns:minmax(0,1fr); gap:44px; }
  .feature-index h2 { margin-bottom:24px; }
  .feature-index [role="tab"] { padding:12px 16px; }
  .proof-content { padding:28px 22px; }
  .client-card { padding:24px; }
  .article-card { grid-template-columns:minmax(0,1fr); gap:16px; }
  .article-card h3 { font-size:21px; }
  .callout { padding:22px; }
  .toc { position:static; padding:12px; }
  .download-endnote { padding:24px; }
  .dl-fab { right:20px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); padding:12px 16px; }
  .badges { flex-direction:row; flex-wrap:wrap; }
  [role="tablist"] { gap:6px; }
  [role="tab"] { padding:10px 14px; font-size:14px; }
}