.tabs {min-width:0}
.tabs [role="tablist"] {display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.tabs [role="tab"] {
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  border:1px solid var(--border);border-radius:var(--radius-pill);padding:10px 20px;
  background:var(--bg);color:var(--text-muted);font-size:var(--text-nav);
}
.tabs [role="tab"]:hover {color:var(--text);border-color:var(--border-hi)}
.tabs [role="tab"][aria-selected="true"] {background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.tabs [role="tabpanel"] {min-width:0;scroll-margin-top:96px}
.spectrum {display:grid;grid-template-columns:minmax(180px,.65fr) minmax(0,1.7fr);column-gap:72px}
.spectrum [role="tablist"] {display:flex;flex-direction:column;gap:12px;margin:0}
.spectrum [role="tab"] {
  position:relative;justify-content:flex-start;text-align:left;min-height:64px;
  padding:18px 0 18px 24px;border:0;border-radius:0;
  background:var(--bg);color:var(--text-muted);font-size:var(--text-subtitle);
}
.spectrum [role="tab"][aria-selected="true"] {background:var(--bg);color:var(--text)}
.spectrum [role="tab"][aria-selected="true"]::before {
  content:"";position:absolute;left:0;top:20px;bottom:20px;width:2px;
  background:var(--accent);color:var(--on-accent);box-shadow:0 0 14px var(--accent-a70);
}
.spectrum [role="tab"]::after {
  content:"";position:absolute;left:24px;bottom:4px;right:0;height:1px;
  background:var(--accent);color:var(--on-accent);transform:scaleX(0);transform-origin:left;
}
.spectrum.is-running [role="tab"][aria-selected="true"]::after {animation:spectrum-time 10s linear forwards}
@keyframes spectrum-time {to{transform:scaleX(1)}}
.spectrum__panels {min-width:0}
.spectrum [role="tabpanel"] {
  position:relative;isolation:isolate;padding:36px;border:1px solid var(--border);
  border-radius:var(--radius-lg);background:var(--bg-panel);color:var(--text);
  box-shadow:var(--shadow-panel);
}
.spectrum [role="tabpanel"]::before {
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background-image:var(--grain);color:var(--text);opacity:.08;
}
.spectrum [role="tabpanel"]::after {
  content:"";position:absolute;inset-inline:12%;top:-1px;height:1px;
  background:linear-gradient(90deg,var(--clear),var(--accent),var(--clear));color:var(--text);
  box-shadow:0 -4px 24px var(--accent-a28);pointer-events:none;
}
.spectrum [role="tabpanel"] h3 {margin-top:0}
.spectrum [role="tabpanel"] p {color:var(--text-muted)}
.spectrum__toggle {display:none}
.spectrum-accordion {display:none}
.toc {
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;
  padding-block:18px;margin-block:24px 40px;border-block:1px solid var(--border);
  background:var(--bg);color:var(--text);
}
.toc a {display:inline-flex;align-items:center;min-height:44px;font-size:var(--text-nav);color:var(--text-muted);text-decoration:none}
.toc a:hover,.toc a[aria-current="location"] {color:var(--accent)}
.toc--sticky {position:sticky;top:0;z-index:10}
.faq-item {border-bottom:1px solid var(--border);padding-block:8px}
.faq-item summary {position:relative;list-style:none;cursor:pointer;padding:20px 36px 20px 0;font-size:var(--text-subtitle);color:var(--text)}
.faq-item summary::-webkit-details-marker {display:none}
.faq-item summary::after {content:"+";position:absolute;right:4px;top:20px;color:var(--accent);font-family:var(--font-mono)}
.faq-item[open] summary::after {content:"−"}
.faq-item__body {padding:0 32px 16px 0;max-width:760px;color:var(--text-muted)}
.faq-item__body p:last-child {margin-bottom:0}
.term-card {padding-block:28px;border-top:1px solid var(--border)}
.term-card h3 {margin:0 0 10px}
.term-card__alias {font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-muted);margin-bottom:16px}
.term-card p {max-width:680px;color:var(--text-muted)}
.term-card a {font-size:var(--text-sm)}
.client-card {position:relative;margin-bottom:24px}
.client-card--first {border-color:var(--border-hi);box-shadow:var(--shadow-panel)}
.client-card__head {display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.client-card__icon {width:56px;height:56px;flex-shrink:0}
.client-card__title {flex:1;min-width:130px}
.client-card__title h3 {margin:0 0 4px}
.client-card__meta {display:flex;flex-wrap:wrap;gap:8px 16px;color:var(--text-muted);font-size:var(--text-sm)}
.client-card__actions {display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.client-card__description {color:var(--text-muted)}
[data-version]:empty {display:none}
.tag,.status {
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  max-width:100%;min-height:26px;padding:4px 10px;border:1px solid var(--border);
  border-radius:var(--radius-pill);background:var(--bg-panel);color:var(--text-muted);
  font-size:var(--text-xs);line-height:1.5;white-space:normal;overflow-wrap:anywhere;
}
.status--first,.status--recommended {background:var(--accent-a08);color:var(--accent);border-color:var(--accent-a28)}
.status--archived {background:var(--bg-panel);color:var(--warn);border-color:var(--border-hi)}
.status--success {background:var(--bg-panel);color:var(--success)}
.status--error {background:var(--bg-panel);color:var(--error)}
.post-card {display:flex;flex-direction:column;align-items:flex-start;height:100%}
.post-card__meta {display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:24px;color:var(--text-muted);font-size:var(--text-xs);font-family:var(--font-mono)}
.post-card h3 {margin:0 0 16px}
.post-card h3 a {color:var(--text);text-decoration:none}
.post-card h3 a:hover {color:var(--accent)}
.post-card p {color:var(--text-muted);font-size:var(--text-nav)}
.post-card__more {margin-top:auto;padding-top:16px;font-size:var(--text-sm)}
.callout {
  margin:28px 0;padding:24px 28px;border:1px solid var(--border);border-left:2px solid var(--accent);
  border-radius:var(--radius-md);background:var(--bg-panel);color:var(--text);
}
.callout p:last-child {margin-bottom:0}
.callout__title {display:block;color:var(--accent);font-weight:var(--weight-medium);margin-bottom:8px}
.callout--warn {border-left-color:var(--warn)}
.callout--warn .callout__title {color:var(--warn)}
.table-scroll {max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;border:1px solid var(--border);border-radius:var(--radius-md)}
.data-table {width:100%;border-collapse:collapse;font-size:var(--text-nav)}
.data-table caption {text-align:left;padding:16px;color:var(--text-muted)}
.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;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--border);overflow-wrap:normal;word-break:normal;
}
.data-table th,.prose table th,.article-body table th {background:var(--bg-panel);color:var(--text);font-weight:var(--weight-medium)}
.data-table td,.prose table td,.article-body table td {background:var(--bg);color:var(--text-muted)}
.data-table tr:last-child td {border-bottom:0}
.prose table,.article-body table {
  display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
  width:100%;max-width:100%;min-width:0;overscroll-behavior-inline:contain;
  border-collapse:collapse;
}
.prose table code,.article-body table code {overflow-wrap:anywhere;white-space:normal}
.article-download {margin-top:64px;border-top:1px solid var(--border);padding-top:32px}
.article-download h2 {font-size:var(--text-h3);margin-top:0}
.article-download p {color:var(--text-muted)}
.dl-fab {
  position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));
  z-index:35;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:52px;max-width:calc(100vw - 40px);padding:12px 22px;border-radius:var(--radius-pill);
  background:var(--accent);color:var(--on-accent);text-decoration:none;
  font-size:var(--text-nav);font-weight:var(--weight-medium);box-shadow:var(--shadow-button);
}
.dl-fab svg {width:20px;height:20px;flex-shrink:0}
.dl-fab:hover {box-shadow:var(--shadow-button-hover)}
.preview-block {padding-top:80px;padding-bottom:80px}
.preview-row {display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-block:24px}
.swatches {display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px}
.swatch {margin:0;font-size:var(--text-xs);font-family:var(--font-mono);color:var(--text-muted)}
.swatch::before {content:"";display:block;min-height:80px;margin-bottom:10px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--swatch,var(--bg));color:var(--text)}
.swatch--bg {--swatch:var(--bg)}
.swatch--panel {--swatch:var(--bg-panel)}
.swatch--panel2 {--swatch:var(--bg-panel-2)}
.swatch--border {--swatch:var(--border)}
.swatch--borderhi {--swatch:var(--border-hi)}
.swatch--accent {--swatch:var(--accent)}
.swatch--accentdark {--swatch:var(--accent-dark)}
.swatch--text {--swatch:var(--text)}
.swatch--muted {--swatch:var(--text-muted)}
.swatch--dim {--swatch:var(--text-dim)}
.swatch--success {--swatch:var(--success)}
.swatch--warn {--swatch:var(--warn)}
.swatch--error {--swatch:var(--error)}
.swatch--onaccent {--swatch:var(--on-accent)}
.swatch--limehi {--swatch:var(--lime-hi)}
.swatch--limecore {--swatch:var(--lime-core)}
.swatch--flare {--swatch:var(--flare)}
.swatch--mid {--swatch:var(--green-mid)}
.swatch--deep {--swatch:var(--green-deep)}
.swatch--ink {--swatch:var(--green-ink)}
.swatch--shade {--swatch:var(--green-shade)}
.swatch--white {--swatch:var(--beam-white)}
.swatch--beamdim {--swatch:var(--beam-dim)}
.swatch--a08 {--swatch:var(--accent-a08)}
.swatch--a14 {--swatch:var(--accent-a14)}
.swatch--a28 {--swatch:var(--accent-a28)}
.swatch--a45 {--swatch:var(--accent-a45)}
.swatch--a70 {--swatch:var(--accent-a70)}
.swatch--f60 {--swatch:var(--flare-a60)}
.swatch--w85 {--swatch:var(--white-a85)}
.swatch--w30 {--swatch:var(--white-a30)}
.swatch--veil {--swatch:var(--veil)}
.swatch--clear {--swatch:var(--clear)}
@media(max-width:768px) {
  .spectrum {display:block}
  .spectrum > [role="tablist"] {display:none}
  .spectrum [role="tabpanel"] {padding:24px;margin-bottom:16px}
  .spectrum__toggle {display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:44px;border:0;padding:0;text-align:left;background:var(--bg-panel);color:var(--text);font-size:var(--text-subtitle)}
  .spectrum__toggle::after {content:"+";color:var(--accent)}
  .spectrum__toggle[aria-expanded="true"]::after {content:"−"}
  .spectrum__body {padding-top:20px}
  .spectrum--static {display:none}
  .spectrum-accordion {display:block}
  .spectrum-accordion .faq-item {border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-panel);color:var(--text);padding:4px 24px;margin-bottom:16px}
  .spectrum-accordion .faq-item__body {padding-right:0}
  .toc {gap:4px 16px}
}
@media(max-width:640px) {
  .dl-fab {right:16px;bottom:16px;max-width:calc(100vw - 32px);min-height:48px}
  .client-card__actions .btn {flex:1 1 150px}
  .callout {padding:20px}
  .swatches {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce) {
  .spectrum.is-running [role="tab"]::after {animation:none}
}