.tabs { min-width:0; }
[role="tablist"] { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; }
[role="tab"] { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; max-width:100%; padding:12px 20px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--bg); color:var(--text-muted); font-weight:600; line-height:1.4; text-align:center; }
[role="tab"]:hover { background:var(--bg-panel); color:var(--text); }
[role="tab"][aria-selected="true"] { background:var(--bg-panel-2); color:var(--on-dark); border-color:var(--bg-panel-2); }
[role="tabpanel"] { min-width:0; scroll-margin-top:24px; }
.feature-desk { display:grid; grid-template-columns:minmax(0,36fr) minmax(0,64fr); overflow:hidden; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--bg-panel); color:var(--text); }
.feature-desk>* { min-width:0; }
.feature-desk [role="tablist"] { display:flex; flex-direction:column; flex-wrap:nowrap; gap:4px; margin:0; padding:32px 24px; border-right:1px solid var(--border); }
.feature-desk [role="tab"] { position:relative; display:block; min-height:80px; width:100%; padding:16px 20px; border:0; border-radius:var(--r-sm); background:var(--clear); color:var(--text); text-align:left; font-size:18px; font-weight:500; }
.feature-desk [role="tab"] b { display:block; font-weight:inherit; }
.feature-desk [role="tab"] span { display:block; margin-top:6px; color:var(--text-muted); font-size:13px; font-weight:400; }
.feature-desk [role="tab"][aria-selected="true"] { background:var(--clear); color:var(--text); font-weight:800; }
.feature-desk [role="tab"][aria-selected="true"]::before { content:""; position:absolute; left:0; top:16px; bottom:16px; width:4px; border-radius:var(--r-pill); background:var(--accent); }
.feature-panels { padding:40px 0 0 32px; }
.feature-card { min-height:480px; padding:36px; border:1px solid var(--border); border-right:0; border-bottom:0; border-radius:var(--r-lg) 0 0 0; background:var(--bg); color:var(--text); }
.feature-card h3 { margin-top:0; font-size:24px; }
.feature-card p { color:var(--text-muted); }
.platform-belt { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding:20px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--bg-panel); color:var(--text); }
.platform-belt a { display:inline-flex; flex:1 1 150px; align-items:center; justify-content:center; gap:10px; min-height:56px; padding:12px 20px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--bg); color:var(--text); text-decoration:none; font-weight:700; }
.platform-belt svg { width:22px; height:22px; }
.platform-belt a:hover { text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:3px; }
.toc { position:sticky; top:16px; z-index:5; display:flex; flex-wrap:wrap; gap:8px; padding:12px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg); color:var(--text); margin-bottom:32px; }
.toc a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 16px; border-radius:var(--r-pill); color:var(--text-muted); text-decoration:none; font-size:14px; }
.toc a:hover,.toc a[aria-current="location"] { background:var(--bg-panel); color:var(--text); text-decoration:underline; text-decoration-color:var(--accent); }
.faq-item { border-bottom:1px solid var(--border); }
.faq-item summary { position:relative; min-height:64px; padding:20px 40px 20px 0; font-weight:700; line-height:1.5; list-style:none; cursor:pointer; }
.faq-item summary::after { content:"+"; position:absolute; right:8px; top:18px; font-family:var(--font-mono); font-size:22px; color:var(--text-muted); }
.faq-item[open] summary::after { content:"−"; }
.faq-answer { padding:0 32px 24px 0; color:var(--text-muted); }
.faq-answer p:last-child { margin-bottom:0; }
.term-card { padding:28px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg); color:var(--text); min-width:0; }
.term-card h3 { margin:12px 0; }
.term-card .term-en { color:var(--text-muted); font-family:var(--font-mono); font-size:12px; overflow-wrap:anywhere; }
.term-card p { margin-bottom:0; color:var(--text-muted); font-size:15px; }
.badge,.tag { display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:5px 10px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--bg-panel); color:var(--text-muted); font-size:12px; font-weight:600; line-height:1.5; overflow-wrap:anywhere; }
.badge--first { background:var(--bg-panel-2); color:var(--on-dark); border-color:var(--bg-panel-2); }
.badge--recommended { background:var(--bg-panel); color:var(--text); }
.badge--archived { background:var(--bg-panel); color:var(--text-muted); border-style:dashed; }
.status-dot { display:inline-block; flex-shrink:0; width:7px; height:7px; border-radius:var(--r-circle); background:var(--success); color:var(--text); }
.status-dot--warn { background:var(--warn); color:var(--text); }
.status-dot--error { background:var(--error); color:var(--text); }
.client-card { min-width:0; padding:32px; border:1px solid var(--border); border-radius:var(--r-card); background:var(--bg); color:var(--text); }
.client-card--first { border-width:2px; border-color:var(--text); }
.client-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; }
.client-head h3 { margin:0; font-size:24px; }
.client-card p { color:var(--text-muted); }
.client-meta { display:flex; flex-wrap:wrap; gap:12px; margin:16px 0; color:var(--text-muted); font-size:13px; }
.client-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
[data-rev]:empty { display:none; }
.post-card { display:flex; flex-direction:column; align-items:flex-start; min-width:0; padding:28px; border:1px solid var(--border); border-radius:var(--r-card); background:var(--bg); color:var(--text); }
.post-card h3 { margin:20px 0 12px; font-size:21px; line-height:1.4; }
.post-card h3 a { text-decoration:none; }
.post-card h3 a:hover { text-decoration:underline; text-decoration-color:var(--accent); }
.post-card p { color:var(--text-muted); font-size:15px; }
.post-meta { margin-top:auto; padding-top:12px; color:var(--text-muted); font-family:var(--font-mono); font-size:12px; }
.callout { margin:24px 0; padding:24px 28px; border:1px solid var(--border); border-left:4px solid var(--text); border-radius:0 var(--r-md) var(--r-md) 0; background:var(--bg-panel); color:var(--text); }
.callout p:last-child { margin-bottom:0; }
.callout--warn { border-left-color:var(--warn); }
.callout--error { border-left-color:var(--error); }
.table-wrap { max-width:100%; overflow-x:auto; overscroll-behavior-inline:contain; border:1px solid var(--border); border-radius:var(--r-md); }
.data-table { width:100%; border-collapse:collapse; text-align:left; font-size:14px; background:var(--bg); color:var(--text); }
.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:700; }
.data-table tr:last-child td { border-bottom:0; }
.prose table,.article-body table { display:block; width:100%; max-width:100%; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; border-collapse:collapse; overscroll-behavior-inline:contain; }
.prose table code,.article-body table code,.data-table code { overflow-wrap:anywhere; }
.article-download { display:flex; flex-wrap:wrap; 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); }
.article-download>div { flex:1 1 240px; min-width:0; }
.article-download h2 { margin:0 0 10px; font-size:24px; }
.article-download p { margin:0; color:var(--text-muted); font-size:15px; }
.dl-fab { position:fixed; right:24px; bottom:24px; z-index:20; display:inline-flex; align-items:center; justify-content:center; gap:12px; max-width:calc(100% - 40px); min-height:56px; padding:14px 22px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--bg-panel-2); color:var(--on-dark); font-size:14px; font-weight:700; text-decoration:none; box-shadow:0 12px 32px -16px var(--shadow-deep); }
.dl-fab svg { width:20px; height:20px; flex-shrink:0; }
.dl-fab:hover { text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:2px; }
.swatch-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.swatch { min-width:0; padding:12px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--bg); color:var(--text); }
.swatch::before { content:""; display:block; height:64px; margin-bottom:12px; border:1px solid var(--border); border-radius:var(--r-xs); background:var(--swatch-color); }
.swatch code { font-size:11px; }
.swatch--bg { --swatch-color:var(--bg); }
.swatch--panel { --swatch-color:var(--bg-panel); }
.swatch--dark { --swatch-color:var(--bg-panel-2); }
.swatch--border { --swatch-color:var(--border); }
.swatch--accent { --swatch-color:var(--accent); }
.swatch--hover { --swatch-color:var(--accent-hover); }
.swatch--accent-dark { --swatch-color:var(--accent-dark); }
.swatch--text { --swatch-color:var(--text); }
.swatch--muted { --swatch-color:var(--text-muted); }
.swatch--success { --swatch-color:var(--success); }
.swatch--warn { --swatch-color:var(--warn); }
.swatch--error { --swatch-color:var(--error); }
.swatch--on-dark { --swatch-color:var(--on-dark); }
.swatch--on-muted { --swatch-color:var(--on-dark-muted); }
.swatch--on-faint { --swatch-color:var(--on-dark-faint); }
.swatch--spot { --swatch-color:var(--g-spot); }
.swatch--titlebar { --swatch-color:var(--g-titlebar); }
.swatch--side { --swatch-color:var(--g-side); }
.swatch--main { --swatch-color:var(--g-main); }
.swatch--card { --swatch-color:var(--g-card); }
.swatch--field { --swatch-color:var(--g-field); }
.swatch--track { --swatch-color:var(--g-track); }
.swatch--knob { --swatch-color:var(--g-knob); }
.swatch--dot { --swatch-color:var(--g-dot); }
.swatch--line { --swatch-color:var(--line-dark); }
.swatch--line-2 { --swatch-color:var(--line-dark-2); }
.swatch--line-btn { --swatch-color:var(--line-btn); }
.swatch--glow { --swatch-color:var(--accent-glow); }
.swatch--glow-0 { --swatch-color:var(--accent-glow-0); }
.swatch--shadow { --swatch-color:var(--shadow-deep); }
.swatch--shadow-soft { --swatch-color:var(--shadow-soft); }
.swatch--reflect { --swatch-color:var(--reflect-a); }
.swatch--reflect-0 { --swatch-color:var(--reflect-b); }
.swatch--clear { --swatch-color:var(--clear); }
.type-display { font-family:var(--font-display); font-size:48px; font-weight:900; line-height:1.12; }
.type-mono { font-family:var(--font-mono); }
.preview-label { margin-bottom:24px; color:var(--text-muted); font-family:var(--font-mono); font-size:12px; }
.preview-fab { position:static; margin-top:24px; }
@media (max-width:960px) {
  .feature-desk { grid-template-columns:minmax(0,1fr); }
  .feature-desk [role="tablist"] { flex-direction:row; flex-wrap:wrap; padding:20px; border-right:0; border-bottom:1px solid var(--border); }
  .feature-desk [role="tab"] { width:auto; flex:1 1 180px; }
  .feature-panels { padding:24px 0 0 24px; }
  .swatch-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:640px) {
  .feature-panels { padding:20px 0 0 20px; }
  .feature-card { min-height:0; padding:24px; }
  .feature-desk [role="tab"] { flex-basis:120px; min-height:64px; padding:12px; font-size:15px; }
  .feature-desk [role="tab"] span { font-size:12px; }
  .feature-desk [role="tablist"] { padding:16px; }
  .platform-belt { border-radius:var(--r-lg); padding:12px; }
  .platform-belt a { flex-basis:120px; padding:12px; }
  .client-card,.term-card,.post-card { padding:24px; }
  .toc { position:static; }
  .swatch-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .type-display { font-size:30px; }
  .dl-fab { right:20px; bottom:20px; }
  .article-download { padding:24px; }
}