.tabs { min-width:0; }
.tablist,[role="tablist"] { display:flex; align-items:center; gap:16px; margin-bottom:32px; min-width:0; }
[role="tab"] { appearance:none; border:0; background:var(--clear); color:var(--text-muted); font:inherit; min-height:44px; padding:10px 0; text-align:left; }
[role="tab"][aria-selected="true"] { color:var(--text); }
.story-tabs [role="tab"] { display:flex; flex:1; align-items:center; gap:24px; font-family:var(--font-display); font-size:clamp(18px,2.2vw,28px); font-weight:var(--weight-normal); }
.story-tabs [role="tab"]::after { content:""; flex:1; min-width:20px; height:1px; background:var(--border); }
.story-tabs [role="tab"][aria-selected="true"]::after { background:linear-gradient(to right,var(--accent) 0 30%,var(--border) 30% 100%); }
.platform-tabs { flex-wrap:wrap; gap:8px; }
.platform-tabs [role="tab"] { border:1px solid var(--border); border-radius:var(--r-ctl); padding:10px 18px; background:var(--bg); color:var(--text-muted); }
.platform-tabs [role="tab"][aria-selected="true"] { background:var(--bg-panel); color:var(--text); border-bottom-color:var(--accent); }
.tab-panel { min-width:0; scroll-margin-top:32px; }
.tab-panel.is-entering { animation:panel-opacity .25s var(--ease); }
@keyframes panel-opacity { from { opacity:0; } to { opacity:1; } }
.feature-panel { display:grid; grid-template-columns:40fr 60fr; gap:0; padding:16px; border:1px solid var(--border); border-radius:var(--r-card); background:var(--bg); color:var(--text); }
.feature-copy { padding:32px 32px 32px 16px; }
.feature-copy p { color:var(--text-muted); }
.feature-copy ul { margin-bottom:0; }
.media-frame { position:relative; min-width:0; overflow-x:clip; padding:32px; border:1px solid var(--frame-line); border-radius:var(--r-card); background:var(--frame-bg); color:var(--headlight); }
.media-frame pre { padding:0; border:0; margin:0; border-radius:var(--r-ctl); background:var(--frame-bg); color:var(--headlight); }
.media-caption { margin:0 0 24px; color:var(--on-dark-soft); font-family:var(--font-mono); font-size:12px; }
.trust-frame { padding:56px; }
.trust-frame p { max-width:55em; color:var(--on-dark-soft); }
.trust-frame .protocols { margin-top:28px; }
.toc { position:sticky; top:0; z-index:10; display:flex; flex-wrap:wrap; gap:8px 20px; padding:16px; border:1px solid var(--border); border-radius:var(--r-card); background:var(--bg); color:var(--text); margin-bottom:40px; }
.toc a { display:inline-flex; align-items:center; min-height:44px; color:var(--text-muted); font-size:14px; }
.toc a:hover,.toc a[aria-current] { color:var(--accent); }
.faq-item { border-bottom:1px solid var(--border); background:var(--bg); color:var(--text); }
.faq-item summary { position:relative; padding:22px 36px 22px 0; cursor:pointer; list-style:none; font-size:17px; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; position:absolute; top:20px; right:6px; font-family:var(--font-mono); color:var(--text-muted); }
.faq-item[open] summary::after { content:"−"; }
.faq-answer { max-width:70em; padding-right:24px; padding-bottom:24px; color:var(--text-muted); }
.faq-answer p:last-child { margin-bottom:0; }
.term-card { padding:28px; border-top:1px solid var(--border); background:var(--bg); color:var(--text); min-width:0; }
.term-card h3 { font-size:25px; margin-bottom:8px; }
.term-card .term-kind { font-family:var(--font-mono); font-size:12px; color:var(--text-muted); }
.term-card p { margin-top:20px; }
.client-card { display:flex; flex-direction:column; gap:24px; padding:32px; border:1px solid var(--border); border-radius:var(--r-card); background:var(--bg); color:var(--text); min-width:0; }
.client-head { display:flex; align-items:center; flex-wrap:wrap; gap:16px; }
.client-head img { width:56px; height:56px; flex-shrink:0; }
.client-head h3 { margin:0; }
.client-card .actions { margin-top:auto; }
.client-meta { color:var(--text-muted); font-size:13px; }
.badges { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.badge { display:inline-flex; align-items:center; gap:7px; max-width:100%; padding:4px 10px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--bg-panel); color:var(--text-muted); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.badge--first { border-color:var(--accent); background:var(--bg); color:var(--accent-dark); }
.badge--recommended { background:var(--bg-panel); color:var(--text); }
.badge--retired { background:var(--bg-panel-2); color:var(--text-muted); }
.badge--first::before { content:""; width:5px; height:5px; border-radius:var(--r-round); background:var(--accent); color:var(--on-dark); flex-shrink:0; }
.article-card { display:flex; flex-direction:column; min-width:0; padding-top:24px; border-top:1px solid var(--border); background:var(--bg); color:var(--text); }
.article-meta { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:20px; color:var(--text-muted); font-size:12px; }
.article-card h3 { font-size:22px; line-height:1.5; }
.article-card h3 a { color:var(--text); }
.article-card h3 a:hover { color:var(--accent); }
.article-card p { color:var(--text-muted); font-size:14px; }
.article-card > a { margin-top:auto; }
.callout { margin:28px 0; padding:24px 28px; border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:var(--r-ctl); background:var(--bg-panel); color:var(--text); }
.callout p:last-child { margin-bottom:0; }
.callout-title { margin-bottom:10px; font-weight:var(--weight-medium); }
.table-scroll { max-width:100%; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border); border-radius:var(--r-card); }
.data-table { width:100%; border-collapse:collapse; background:var(--bg); color:var(--text); text-align:left; font-size:14px; }
.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 20px; border-bottom:1px solid var(--border);
  overflow-wrap:normal; word-break:normal; vertical-align:top;
}
.data-table th,.prose table th,.article-body table th { background:var(--bg-panel); color:var(--text); font-weight:var(--weight-medium); }
.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(--bg); color:var(--text); }
.prose table code,.article-body table code,.data-table code { overflow-wrap:anywhere; }
.article-body { min-width:0; max-width:100%; }
.article-body :where(div,section) { min-width:0; max-width:100%; }
.download-endcard { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:48px; padding:32px; border:1px solid var(--border); border-radius:var(--r-card); background:var(--bg-panel); color:var(--text); }
.download-endcard > * { min-width:0; }
.download-endcard h2 { font-size:26px; margin-bottom:10px; }
.download-endcard p { color:var(--text-muted); margin:0; }
.download-endcard .btn { flex-shrink:0; }
.dl-fab { position:fixed; z-index:20; right:24px; bottom:24px; display:flex; align-items:center; gap:12px; max-width:calc(100vw - 32px); padding:13px 18px; border:1px solid var(--border); border-radius:var(--r-ctl); background:var(--bg); color:var(--text); font-size:13px; }
.dl-fab:hover { border-color:var(--accent); color:var(--text); }
.dl-fab svg { width:22px; height:22px; flex-shrink:0; }
.dl-fab small { display:block; color:var(--text-muted); font-size:11px; }
.preview-page .masthead { max-width:none; }
.preview-page .preview-header-nav { display:flex; align-items:center; gap:30px; margin-left:auto; }
.preview-page .preview-header-nav ul { display:flex; align-items:center; list-style:none; margin:0; padding:0; gap:30px; }
.preview-page .preview-header-nav a { font-size:14.5px; color:var(--text-muted); }
.preview-page .preview-header-nav a[aria-current] { color:var(--text); font-weight:var(--weight-medium); }
.preview-block { padding-top:72px; padding-bottom:72px; border-top:1px solid var(--border); }
.preview-label { font-family:var(--font-mono); font-size:12px; color:var(--text-muted); margin-bottom:20px; }
.palette-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.swatch { min-width:0; padding:12px; border:1px solid var(--border); border-radius:var(--r-ctl); background:var(--bg); color:var(--text); }
.swatch i { display:block; height:52px; border:1px solid var(--border); border-radius:var(--r-ctl); margin-bottom:10px; background:var(--swatch); color:var(--text); }
.swatch code { font-size:11px; }
.sw-bg { --swatch:var(--bg); }
.sw-panel { --swatch:var(--bg-panel); }
.sw-panel2 { --swatch:var(--bg-panel-2); }
.sw-border { --swatch:var(--border); }
.sw-accent { --swatch:var(--accent); }
.sw-accent-dark { --swatch:var(--accent-dark); }
.sw-glow { --swatch:var(--accent-glow); }
.sw-text { --swatch:var(--text); }
.sw-muted { --swatch:var(--text-muted); }
.sw-success { --swatch:var(--success); }
.sw-warn { --swatch:var(--warn); }
.sw-error { --swatch:var(--error); }
.sw-frame { --swatch:var(--frame-bg); }
.sw-frame-line { --swatch:var(--frame-line); }
.sw-sky-top { --swatch:var(--sky-top); }
.sw-sky-horizon { --swatch:var(--sky-horizon); }
.sw-far { --swatch:var(--ridge-far); }
.sw-near { --swatch:var(--ridge-near); }
.sw-ground-top { --swatch:var(--ground-top); }
.sw-ground { --swatch:var(--ground); }
.sw-headlight { --swatch:var(--headlight); }
.sw-on-dark { --swatch:var(--on-dark); }
.sw-soft { --swatch:var(--on-dark-soft); }
.sw-faint { --swatch:var(--on-dark-faint); }
.sw-line { --swatch:var(--on-dark-line); }
.sw-line-strong { --swatch:var(--on-dark-line-strong); }
.sw-wash { --swatch:var(--on-dark-wash); }
.sw-letterbox { --swatch:var(--letterbox); }
.sw-edge { --swatch:var(--letterbox-edge); }
.sw-clear { --swatch:var(--clear); }
.swatch-dark { background:var(--frame-bg); color:var(--headlight); border-color:var(--frame-line); }
.swatch-dark i { border-color:var(--frame-line); color:var(--headlight); }
.type-sample { padding-bottom:24px; border-bottom:1px solid var(--border); margin-bottom:24px; }
.type-sample .display-sample { margin:0 0 16px; font-family:var(--font-display); font-size:clamp(24px,3.3vw,48px); font-weight:var(--weight-normal); line-height:1.12; }
.button-samples { display:flex; align-items:center; flex-wrap:wrap; gap:16px; }
.preview-toc { position:static; }
@media (max-width:1180px) {
  .preview-page .preview-header-nav ul { gap:16px; }
}
@media (max-width:1000px) {
  .preview-page .preview-header-nav { display:none; }
}
@media (max-width:768px) {
  .feature-panel { grid-template-columns:minmax(0,1fr); }
  .feature-copy { padding:16px 8px 24px; }
  .story-tabs [role="tab"] { gap:10px; font-size:17px; }
  .tablist { gap:12px; }
  .media-frame { padding:24px; }
  .trust-frame { padding:32px 24px; }
  .palette-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:640px) {
  .story-tabs [role="tab"] { flex-direction:column; align-items:flex-start; gap:12px; font-size:16px; }
  .story-tabs [role="tab"]::after { flex:none; width:100%; }
  .client-card { padding:24px; }
  .download-endcard { flex-direction:column; align-items:flex-start; padding:24px; }
  .palette-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dl-fab { right:16px; bottom:16px; }
  .callout { padding:20px; }
}