@layer tokens, base, layout, components, utilities;

@layer tokens {
  :root {
    --t-prose:    450 0.9375rem/1.7  var(--font);
    --t-code:     450 0.8125rem/1.65 var(--font-mono);
    --t-code-sm:  500 0.75rem/1.5    var(--font-mono);

    --doc-max: 830px;
    --nav-w: 264px;
    --bar-h: 56px;
  }

  :root,
  :root[data-theme="dark"] {
    --code-bg: #0c0d11;
    --code-bar: #101218;
    --code-line: rgba(255, 255, 255, .07);
    --tok-comment: #6f7683;
    --tok-string:  #7ee2a8;
    --tok-number:  #ffbe5c;
    --tok-keyword: #7fa9ff;
    --tok-key:     #b39dff;
    --tok-var:     #ff9e80;
    --tok-punc:    #8a919e;
  }

  :root[data-theme="light"] {
    --code-bg: #fbfcfe;
    --code-bar: #f3f5f8;
    --code-line: rgba(9, 9, 11, .08);
    --tok-comment: #77808f;
    --tok-string:  #0a7a41;
    --tok-number:  #9a5700;
    --tok-keyword: #1d4ed8;
    --tok-key:     #6d28d9;
    --tok-var:     #b0432c;
    --tok-punc:    #6b7280;
  }
}

@layer base {
  * { box-sizing: border-box; }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--bar-h) + var(--s5));
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: var(--t-prose);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-wrap: break-word;
  }

  a {
    color: var(--accent-text);
    text-decoration: none;
    text-underline-offset: 2px;
  }
  a:hover { text-decoration: underline; }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-xs);
  }

  ::selection { background: var(--accent-soft); }

  h1, h2, h3, h4 { margin: 0; letter-spacing: var(--track-title); }

  p { margin: 0 0 var(--s4); }
  p:last-child { margin-bottom: 0; }

  ul, ol { margin: 0 0 var(--s4); padding-left: var(--s5); }
  li { margin-bottom: var(--s2); }
  li:last-child { margin-bottom: 0; }

  strong { font-weight: 650; color: var(--text); }

  code, kbd, samp, pre { font-family: var(--font-mono); }

  hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: var(--s9) 0;
  }

  * { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: var(--r-full);
    border: 3px solid transparent;
    background-clip: content-box;
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: content-box; }
}

@layer layout {
  .skip-link {
    position: fixed;
    top: var(--s3);
    left: var(--s3);
    z-index: var(--z-toast);
    padding: var(--s2) var(--s4);
    background: var(--accent);
    color: var(--on-accent);
    border-radius: var(--r-md);
    font: var(--t-subhead);
    transform: translateY(-200%);
    transition: transform var(--fast) var(--ease);
  }
  .skip-link:focus { transform: none; text-decoration: none; }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 48;
    height: var(--bar-h);
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: 0 var(--s5);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line);
  }

  .shell {
    display: grid;
    grid-template-columns: var(--nav-w) minmax(0, 1fr);
    gap: var(--s8);
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--s5);
  }

  .sidebar {
    position: sticky;
    top: var(--bar-h);
    align-self: start;
    max-height: calc(100dvh - var(--bar-h));
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding: var(--s6) var(--s2) var(--s6) var(--s1);
  }

  .content {
    max-width: var(--doc-max);
    padding: var(--s7) 0 var(--s10);
    min-width: 0;
  }

  .scrim {
    position: fixed;
    inset: 0;
    z-index: 45;
    background: var(--scrim);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--base) var(--ease), visibility var(--base) var(--ease);
  }

  @media (max-width: 900px) {
    .shell {
      grid-template-columns: minmax(0, 1fr);
      gap: 0;
      padding: 0 var(--s5);
    }

    .sidebar {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 46;
      width: min(300px, 86vw);
      height: 100dvh;
      max-height: none;
      scrollbar-gutter: auto;
      padding: calc(var(--bar-h) + var(--s4)) var(--s5) var(--s8);
      background: var(--surface);
      border-right: 1px solid var(--line);
      box-shadow: var(--shadow-overlay);
      transform: translateX(-102%);
      transition: transform var(--base) var(--ease), visibility var(--base);
      visibility: hidden;
    }

    body.nav-open .sidebar { transform: none; visibility: visible; }
    body.nav-open .scrim { opacity: 1; visibility: visible; pointer-events: auto; }
    body.nav-open { overflow: hidden; }

    .content { padding-top: var(--s6); }
  }

  @media (min-width: 901px) {
    .nav-toggle { display: none; }
  }
}

@layer components {

  .brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    color: var(--text);
    font: var(--t-headline);
    letter-spacing: var(--track-title);
  }
  .brand:hover { text-decoration: none; }

  .logo-icon {
    width: 30px;
    height: 30px;
    border-radius: var(--r-md);
    object-fit: contain;
    flex: 0 0 auto;
  }
  :root[data-theme="dark"] .logo-icon--light { display: none; }
  :root[data-theme="light"] .logo-icon--dark { display: none; }

  .brand-sep {
    color: var(--text-quaternary);
    font: var(--t-body);
    user-select: none;
  }

  .brand-sub {
    font: var(--t-subhead);
    color: var(--text-secondary);
  }

  .topbar-spacer { flex: 1; }

  .topbar-base {
    font: var(--t-code-sm);
    color: var(--text-tertiary);
    background: var(--ov-04);
    border: 1px solid var(--line);
    padding: 4px var(--s2);
    border-radius: var(--r-sm);
    white-space: nowrap;
  }
  @media (max-width: 700px) { .topbar-base { display: none; } }

  .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: none;
    padding: 0;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
  }
  .icon-btn:hover { background: var(--surface-hover); color: var(--text); border-color: var(--line-strong); }
  .icon-btn svg { width: 16px; height: 16px; }

  .icon-sun, .icon-moon, .icon-auto { display: none; }
  :root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
  :root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
  :root[data-theme-mode="system"] .theme-toggle .icon-moon,
  :root[data-theme-mode="system"] .theme-toggle .icon-sun { display: none; }
  :root[data-theme-mode="system"] .theme-toggle .icon-auto { display: block; }

  .user-area {
    position: relative;
    display: flex;
    align-items: center;
    flex: none;
  }
  .user-area:empty { display: none; }

  .user-skeleton {
    display: flex;
    align-items: center;
    gap: var(--s2);
    height: 32px;
    padding: 0 var(--s3) 0 3px;
    border: 1px solid var(--line-faint);
    border-radius: var(--r-full);
  }
  .user-skeleton span {
    display: block;
    background: var(--ov-08);
    background-image: linear-gradient(90deg, transparent 0%, var(--ov-12) 45%, transparent 90%);
    background-repeat: no-repeat;
    background-size: 220% 100%;
    animation: user-shimmer 1.25s var(--ease-soft) infinite;
  }
  .user-skeleton .sk-avatar { width: 24px; height: 24px; border-radius: var(--r-full); }
  .user-skeleton .sk-name { width: 72px; height: 9px; border-radius: var(--r-full); }

  @keyframes user-shimmer {
    from { background-position: 160% 0; }
    to   { background-position: -60% 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .user-skeleton span { animation: none; background-image: none; }
  }
  @media (max-width: 700px) {
    .user-skeleton .sk-name { display: none; }
    .user-skeleton { padding-right: 3px; }
  }

  .user-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    height: 32px;
    max-width: 210px;
    padding: 0 var(--s2) 0 3px;
    background: transparent;
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: var(--r-full);
    cursor: pointer;
    font: var(--t-subhead);
    transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
  }
  .user-pill:hover { background: var(--surface-hover); border-color: var(--line-strong); }
  .user-pill[aria-expanded="true"] { background: var(--surface-hover); border-color: var(--line-strong); }

  .user-avatar {
    width: 24px;
    height: 24px;
    border-radius: var(--r-full);
    object-fit: cover;
    background: var(--ov-08);
    flex: 0 0 auto;
  }

  .user-pill .user-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
  }
  .user-pill .user-caret { width: 12px; height: 12px; flex: none; color: var(--text-quaternary); }

  @media (max-width: 700px) {
    .user-pill .user-name { display: none; }
    .user-pill .user-caret { display: none; }
    .user-pill { padding-right: 3px; }
  }

  .signin-link {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 var(--s4);
    border-radius: var(--r-full);
    background: var(--accent);
    color: var(--on-accent);
    font: var(--t-subhead);
    font-weight: 600;
    white-space: nowrap;
  }
  .signin-link:hover { background: var(--accent-hover); text-decoration: none; }

  .user-menu {
    position: absolute;
    top: calc(100% + var(--s2));
    right: 0;
    z-index: 1;
    width: 258px;
    max-width: calc(100vw - var(--s6));
    padding: var(--s2);
    background: var(--overlay);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-popover);
  }
  .user-menu[hidden] { display: none; }

  .user-menu-head {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s2) var(--s3) var(--s3);
    border-bottom: 1px solid var(--line-faint);
    margin-bottom: var(--s2);
  }
  .user-menu-head .user-avatar { width: 36px; height: 36px; }
  .user-menu-who { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .user-menu-who b {
    font: var(--t-subhead);
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .user-menu-who .user-handle {
    font: var(--t-caption);
    letter-spacing: 0;
    color: var(--text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .user-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
  .user-badge {
    font: var(--t-caption);
    letter-spacing: var(--track-caption);
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: var(--r-full);
  }
  .badge-verified  { background: var(--accent-soft); color: var(--accent-text); }
  .badge-staff     { background: var(--amber-soft);  color: var(--amber-text); }
  .badge-developer { background: var(--green-soft);  color: var(--green-text); }

  .user-menu-item {
    display: flex;
    align-items: center;
    gap: var(--s3);
    width: 100%;
    padding: var(--s2) var(--s3);
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-secondary);
    font: var(--t-subhead);
    text-align: left;
    cursor: pointer;
  }
  .user-menu-item:hover { background: var(--ov-06); color: var(--text); text-decoration: none; }
  .user-menu-item svg { width: 15px; height: 15px; flex: none; color: var(--text-quaternary); }
  .user-menu-item .user-menu-value {
    margin-left: auto;
    font: var(--t-footnote);
    color: var(--text-tertiary);
    text-transform: capitalize;
  }

  .user-menu-sep {
    height: 1px;
    margin: var(--s2) var(--s3);
    background: var(--line-faint);
  }

  .nav-group + .nav-group { margin-top: var(--s5); }

  .nav-title {
    font: var(--t-caption);
    letter-spacing: var(--track-caption);
    text-transform: uppercase;
    color: var(--text-quaternary);
    padding: 0 var(--s3);
    margin-bottom: var(--s2);
  }

  .nav-list { list-style: none; margin: 0; padding: 0; }
  .nav-list li { margin: 0; }

  .nav-list a {
    display: block;
    padding: 6px var(--s3);
    border-radius: var(--r-sm);
    color: var(--text-secondary);
    font: var(--t-subhead);
    border-left: 2px solid transparent;
    transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
  }
  .nav-list a:hover { color: var(--text); background: var(--ov-04); text-decoration: none; }

  .nav-list .nav-sub a {
    padding-left: var(--s5);
    font: var(--t-footnote);
    color: var(--text-tertiary);
  }

  .nav-list a[aria-current="true"],
  .nav-list .nav-sub a[aria-current="true"] {
    color: var(--accent-text);
    background: var(--accent-soft);
    border-left-color: var(--accent);
    font-weight: 700;
  }
  .nav-list a[aria-current="true"]:hover {
    color: var(--accent-text);
    background: var(--accent-soft);
  }

  .nav-foot {
    margin-top: var(--s7);
    padding: var(--s4) var(--s3) 0;
    border-top: 1px solid var(--line-faint);
    font: var(--t-footnote);
    color: var(--text-quaternary);
  }
  .nav-foot a { display: block; margin-bottom: var(--s2); color: var(--text-tertiary); }

  .page-head { margin-bottom: var(--s8); }

  .eyebrow {
    font: var(--t-caption);
    letter-spacing: var(--track-caption);
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: var(--s3);
  }

  h1 {
    font: var(--t-display);
    letter-spacing: var(--track-display);
    margin-bottom: var(--s4);
  }

  .lede {
    font: 450 1.0625rem/1.65 var(--font);
    color: var(--text-secondary);
    max-width: 68ch;
  }

  .content,
  section,
  h1, h2, h3, h4,
  .endpoint {
    scroll-margin-top: calc(var(--bar-h) + var(--s5));
  }

  section + section { margin-top: var(--s10); }

  h2 {
    font: var(--t-title1);
    margin-bottom: var(--s4);
    padding-bottom: var(--s3);
    border-bottom: 1px solid var(--line);
  }

  h3 {
    font: var(--t-title2);
    margin: var(--s8) 0 var(--s3);
  }

  h4 {
    font: var(--t-headline);
    margin: var(--s6) 0 var(--s2);
    color: var(--text);
  }

  .anchor {
    margin-left: var(--s2);
    color: var(--text-quaternary);
    font-weight: 400;
    opacity: 0;
    transition: opacity var(--fast) var(--ease);
  }
  h2:hover .anchor, h3:hover .anchor, .anchor:focus-visible { opacity: 1; }

  .content p code,
  .content li code,
  .content td code,
  .content th code,
  .content dd code {
    font: var(--t-code-sm);
    background: var(--ov-06);
    border: 1px solid var(--line-faint);
    padding: 1px 5px;
    border-radius: var(--r-xs);
    white-space: nowrap;
  }

  .chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px var(--s2);
    border-radius: var(--r-full);
    font: var(--t-caption);
    letter-spacing: .02em;
    border: 1px solid transparent;
    white-space: nowrap;
  }
  .chip-get     { background: var(--accent-soft);  color: var(--accent-text); border-color: var(--accent-ring); font-family: var(--font-mono); }
  .chip-scope   { background: var(--ov-06);        color: var(--text-secondary); border-color: var(--line); font-family: var(--font-mono); }
  .chip-noscope { background: var(--ov-04);        color: var(--text-tertiary); border-color: var(--line-faint); }
  .chip-paid    { background: var(--amber-soft);   color: var(--amber-text); border-color: transparent; }
  .chip-open    { background: var(--green-soft);   color: var(--green-text); border-color: transparent; }

  .callout {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: var(--s3);
    padding: var(--s4) var(--s5);
    margin: var(--s5) 0;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: var(--surface);
    font-size: 0.875rem;
  }
  .callout svg { width: 18px; height: 18px; margin-top: 2px; }
  .callout-title {
    font: var(--t-headline);
    margin-bottom: var(--s2);
  }
  .callout > div > :last-child { margin-bottom: 0; }

  .callout-info   { border-color: var(--accent-ring); background: var(--accent-soft); }
  .callout-info svg, .callout-info .callout-title { color: var(--accent-text); }

  .callout-warn   { border-color: color-mix(in srgb, var(--amber) 40%, transparent); background: var(--amber-soft); }
  .callout-warn svg, .callout-warn .callout-title { color: var(--amber-text); }

  .callout-danger { border-color: color-mix(in srgb, var(--red) 45%, transparent); background: var(--red-soft); }
  .callout-danger svg, .callout-danger .callout-title { color: var(--red-text); }

  .callout-note svg, .callout-note .callout-title { color: var(--text-tertiary); }

  .table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    margin: var(--s5) 0;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
  }

  thead th {
    text-align: left;
    font: var(--t-caption);
    letter-spacing: var(--track-caption);
    text-transform: uppercase;
    color: var(--text-tertiary);
    padding: var(--s3) var(--s4);
    background: var(--ov-02);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
  }

  tbody td {
    padding: var(--s3) var(--s4);
    border-top: 1px solid var(--line-faint);
    color: var(--text-secondary);
    vertical-align: top;
  }
  tbody tr:first-child td { border-top: 0; }

  tbody tr { scroll-margin-top: calc(var(--bar-h) + var(--s6)); }
  tbody tr:target { background: var(--accent-soft); }
  tbody tr:target td { border-color: var(--accent-ring); }

  td.nowrap, th.nowrap { white-space: nowrap; }

  td .mono, .mono {
    font: var(--t-code-sm);
    color: var(--text);
  }

  .status {
    display: inline-block;
    min-width: 34px;
    text-align: center;
    padding: 2px 6px;
    border-radius: var(--r-sm);
    font: var(--t-code-sm);
    font-weight: 600;
  }
  .status-4 { background: var(--amber-soft); color: var(--amber-text); }
  .status-401 { background: var(--red-soft); color: var(--red-text); }
  .status-5 { background: var(--red-soft); color: var(--red-text); }

  .endpoint {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    margin: var(--s5) 0 var(--s7);
    overflow: hidden;
  }

  .endpoint-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s3);
    padding: var(--s4) var(--s5);
    background: var(--ov-02);
    border-bottom: 1px solid var(--line);
  }

  .endpoint-path {
    font: 550 0.875rem/1.4 var(--font-mono);
    color: var(--text);
    word-break: break-all;
  }
  .endpoint-path .param { color: var(--accent-text); }

  .endpoint-body { padding: var(--s5); }
  .endpoint-body > :first-child { margin-top: 0; }
  .endpoint-body > :last-child { margin-bottom: 0; }
  .endpoint-body h4:first-child { margin-top: 0; }

  dl.fields { margin: var(--s4) 0; }
  dl.fields dt {
    font: var(--t-code-sm);
    color: var(--text);
    margin-top: var(--s3);
  }
  dl.fields dt:first-child { margin-top: 0; }
  dl.fields dd {
    margin: 2px 0 0;
    padding-left: 0;
    color: var(--text-secondary);
    font-size: 0.8125rem;
  }
  dl.fields dd .type {
    font: var(--t-code-sm);
    color: var(--text-quaternary);
    margin-right: var(--s2);
  }

  .code {
    margin: var(--s4) 0;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--code-bg);
    overflow: hidden;
  }

  .code-head {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s2) var(--s2) var(--s2) var(--s4);
    background: var(--code-bar);
    border-bottom: 1px solid var(--code-line);
  }

  .code-lang {
    font: var(--t-caption);
    letter-spacing: var(--track-caption);
    text-transform: uppercase;
    color: var(--text-tertiary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .copy {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;
    padding: 4px var(--s2);
    background: transparent;
    color: var(--text-tertiary);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font: var(--t-footnote);
    cursor: pointer;
    transition: color var(--fast) var(--ease), background var(--fast) var(--ease), border-color var(--fast) var(--ease);
  }
  .copy:hover { color: var(--text); background: var(--ov-06); border-color: var(--line-strong); }
  .copy svg { width: 13px; height: 13px; }
  .copy[data-copied="true"] { color: var(--green-text); border-color: color-mix(in srgb, var(--green) 45%, transparent); }
  .copy .copy-idle,
  .copy .copy-done { display: inline-flex; align-items: center; gap: 5px; }
  .copy .copy-done { display: none; }
  .copy[data-copied="true"] .copy-idle { display: none; }
  .copy[data-copied="true"] .copy-done { display: inline-flex; }

  .code pre {
    margin: 0;
    padding: var(--s4);
    overflow-x: auto;
    tab-size: 4;
    -moz-tab-size: 4;
  }

  .code code {
    font: var(--t-code);
    color: var(--text);
    white-space: pre;
    display: block;
  }

  .tok-comment { color: var(--tok-comment); font-style: italic; }
  .tok-string  { color: var(--tok-string); }
  .tok-number  { color: var(--tok-number); }
  .tok-keyword { color: var(--tok-keyword); }
  .tok-key     { color: var(--tok-key); }
  .tok-var     { color: var(--tok-var); }
  .tok-punc    { color: var(--tok-punc); }
  .tok-bool    { color: var(--tok-keyword); }

  .tabs { margin: var(--s5) 0; }

  .tablist {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    padding-bottom: 1px;
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
  }
  .tablist::-webkit-scrollbar { display: none; }

  .tablist button {
    flex: none;
    padding: var(--s2) var(--s4);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--text-tertiary);
    font: var(--t-subhead);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
  }
  .tablist button:hover { color: var(--text); }
  .tablist button[aria-selected="true"] {
    color: var(--accent-text);
    border-bottom-color: var(--accent);
    font-weight: 650;
  }

  .tabpanel[hidden] { display: none; }
  .tabpanel .code { margin-top: var(--s4); }

  .anatomy {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    padding: var(--s5);
    margin: var(--s5) 0;
  }

  .anatomy-token {
    font: var(--t-code);
    font-size: 0.8125rem;
    line-height: 2.1;
    background: var(--code-bg);
    border: 1px solid var(--code-line);
    border-radius: var(--r-md);
    padding: var(--s4);
    overflow-x: auto;
    white-space: nowrap;
  }

  .anatomy-token .seg {
    padding: 4px 3px;
    border-radius: var(--r-xs);
    border-bottom: 2px solid currentColor;
  }
  .anatomy-token .sep { color: var(--text-quaternary); padding: 0 1px; }

  .seg-1 { color: var(--tok-keyword); background: color-mix(in srgb, var(--tok-keyword) 14%, transparent); }
  .seg-2 { color: var(--tok-number);  background: color-mix(in srgb, var(--tok-number) 14%, transparent); }
  .seg-3 { color: var(--tok-key);     background: color-mix(in srgb, var(--tok-key) 16%, transparent); }
  .seg-4 { color: var(--tok-string);  background: color-mix(in srgb, var(--tok-string) 14%, transparent); }

  .anatomy-legend {
    list-style: none;
    margin: var(--s5) 0 0;
    padding: 0;
    display: grid;
    gap: var(--s4);
  }
  .anatomy-legend li { margin: 0; display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: var(--s3); }

  .swatch {
    width: 10px;
    height: 10px;
    margin-top: 6px;
    border-radius: 3px;
    background: currentColor;
  }

  .anatomy-legend .leg-name {
    font: 600 0.8125rem/1.5 var(--font-mono);
    color: var(--text);
  }
  .anatomy-legend .leg-meta {
    font: var(--t-footnote);
    color: var(--text-quaternary);
    margin-left: var(--s2);
  }
  .anatomy-legend p {
    margin: 2px 0 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
  }

  .rules {
    list-style: none;
    margin: var(--s5) 0;
    padding: 0;
    display: grid;
    gap: var(--s3);
  }
  .rules li {
    margin: 0;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: var(--s3);
    padding: var(--s4) var(--s5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    font-size: 0.875rem;
    color: var(--text-secondary);
  }
  .rules li svg { width: 16px; height: 16px; margin-top: 3px; }
  .rules .rule-do svg { color: var(--green-text); }
  .rules .rule-dont svg { color: var(--red-text); }
  .rules b { display: block; color: var(--text); font-weight: 650; margin-bottom: 2px; }

  .stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--s3);
    margin: var(--s5) 0;
  }
  .stat {
    padding: var(--s4) var(--s5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
  }
  .stat-value {
    font: 700 1.375rem/1.2 var(--font);
    letter-spacing: var(--track-title);
    color: var(--text);
    display: block;
  }
  .stat-label {
    display: block;
    margin-top: 2px;
    font: var(--t-footnote);
    color: var(--text-tertiary);
  }

  .split {
    display: grid;
    gap: var(--s4);
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
  .split .code { margin: 0; }

  .footer {
    margin-top: var(--s10);
    padding-top: var(--s6);
    border-top: 1px solid var(--line);
    font: var(--t-footnote);
    color: var(--text-quaternary);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s4);
    align-items: center;
  }
  .footer .footer-spacer { flex: 1; }
}

@layer utilities {
  .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .muted { color: var(--text-tertiary); }
  .small { font-size: 0.8125rem; }
  .mt-0 { margin-top: 0; }
  .mb-0 { margin-bottom: 0; }
}

@media print {
  .topbar, .sidebar, .scrim, .copy, .skip-link, .user-area { display: none !important; }
  .shell { display: block; }
  .content { max-width: none; }
}