/* Clatter Labs Docs, public site layer (Oct 29 2026 redesign, per founder: "make it look like docs.x.ai").
   Loaded after docs.css on public pages and in the admin's live preview only (the admin UI itself keeps docs.css
   + admin.css). Same layout and design language as docs.x.ai, recreated in our own code: transparent top bar with
   the section tabs centred, search pill and Console pill on the right; plain grouped sidebar; 672px content column;
   "On this page" rail; borderless tables; 12px code cards; quiet cards; wide search dialog.
   Background shades measured from docs.x.ai's rendered pages: light #ffffff, dark #0a0a0a; cards #f9f8f6 / #1a1a1a;
   code blocks #ffffff / #121212. Differences on purpose: Clatter Labs logo, Clatter green (main-site accent) where
   docs.x.ai uses orange (the "New" badge, inline code, highlights). Fonts: our Geist / Geist Mono. */
:root {
  --bg: #ffffff;
  --bg-soft: #f9f8f6;
  --bg-muted: #f3f3f3;
  --card: #f9f8f6;
  --card-hover: #f3f1ee;
  --fg: #0a0a0a;
  --fg-2: #0a0a0a;
  --fg-3: rgba(10, 10, 10, 0.6);
  --fg-4: rgba(10, 10, 10, 0.4);
  --line: rgba(213, 217, 226, 0.55);
  --line-2: rgba(213, 217, 226, 0.9);
  --pill-line: rgba(10, 10, 10, 0.15);
  --code-bg: #ffffff;
  --code-tab-on: rgba(10, 10, 10, 0.05);
  --side-active: #ffffff;
  --accent: #16a34a;
  --accent-fg: #15803d;
  --accent-soft: rgba(22, 163, 74, 0.1);
  --accent-line: rgba(22, 163, 74, 0.3);
  --badge-line: rgba(22, 163, 74, 0.25);
  --mark-bg: rgba(22, 163, 74, 0.18);
  --overlay: rgba(10, 10, 10, 0.35);
  --top-h: 80px;
  --tabs-h: 0px;
  --header-h: 80px;
  --sidebar-w: 288px;
  --toc-w: 244px;
  --content-w: 672px;
  --radius: 16px;
  --radius-sm: 12px;
}
[data-theme="dark"] {
  --bg: #0a0a0a;
  --bg-soft: #121212;
  --bg-muted: #1a1a1a;
  --card: #1a1a1a;
  --card-hover: #202020;
  --fg: #ffffff;
  --fg-2: #d5d9e2;
  --fg-3: rgba(255, 255, 255, 0.6);
  --fg-4: rgba(255, 255, 255, 0.38);
  --line: rgba(31, 34, 40, 0.6);
  --line-2: rgba(48, 52, 60, 0.9);
  --pill-line: rgba(255, 255, 255, 0.15);
  --code-bg: #121212;
  --code-tab-on: rgba(255, 255, 255, 0.08);
  --side-active: #212121;
  --accent: #4ade80;
  --accent-fg: #4ade80;
  --accent-soft: rgba(74, 222, 128, 0.1);
  --accent-line: rgba(74, 222, 128, 0.3);
  --badge-line: rgba(74, 222, 128, 0.25);
  --mark-bg: rgba(74, 222, 128, 0.2);
  --overlay: rgba(110, 110, 110, 0.5);
  --inline-code: transparent;
}

html { scroll-padding-top: 104px; background: var(--bg); }
body.site { font-size: 14px; line-height: 24px; background: var(--bg); color: var(--fg-2); }
body.site ::selection { background: var(--mark-bg); }

/* ------------------------------------------------------------- top bar */
.site .topbar { height: var(--top-h); background: linear-gradient(var(--bg) 0%, color-mix(in srgb, var(--bg) 75%, transparent) 55%, transparent 100%); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; }
.site .topbar::before { content: ""; position: absolute; inset: 0; z-index: -1; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); -webkit-mask-image: linear-gradient(#000 45%, transparent); mask-image: linear-gradient(#000 45%, transparent); pointer-events: none; }
.site .topbar-row { position: relative; height: 100%; max-width: none; padding: 0 24px; display: grid; grid-template-columns: 1fr auto minmax(max-content, 1fr); align-items: center; gap: 16px; }
.site .brand { gap: 10px; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg); justify-self: start; }
.site .brand img { width: 26px; height: 26px; }
.site .top-tabs { display: flex; align-items: center; gap: 28px; }
.site .top-tab { display: inline-flex; align-items: center; height: 36px; font-size: 14px; font-weight: 500; color: var(--fg-3); border: 0; white-space: nowrap; transition: color .15s; }
.site .top-tab:hover, .site .top-tab.active { color: var(--fg); }
.site .topbar-right { justify-self: end; margin: 0; display: flex; align-items: center; gap: 8px; }
.site .icon-btn { width: 36px; height: 36px; border-radius: 999px; color: var(--fg-3); }
.site .icon-btn:hover { background: transparent; color: var(--fg); }
.site .theme-btn { margin-right: 4px; }
.site .search-trigger { flex: none; width: 208px; height: 36px; gap: 8px; padding: 0 12px 0 14px; border-radius: 999px; border: 1px solid var(--pill-line); background: transparent; color: var(--fg-3); font-size: 14px; }
.site .search-trigger:hover { border-color: var(--fg-4); color: var(--fg); }
.site .search-trigger .kbd { border: 0; background: none; padding: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--fg-3); }
.site .btn-primary { height: 36px; margin: 0; padding: 0 12px 0 16px; gap: 6px; border-radius: 999px; background: var(--fg); color: var(--bg); font-size: 14px; font-weight: 500; }
.site .btn-primary .icon { opacity: .7; }
.site .tabbar { display: none; }

/* ------------------------------------------------------------- shell + sidebar */
.site .shell { max-width: none; padding-top: 0; display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w); }
.site.is-api .shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr) minmax(380px, 460px); }
.site .sidebar { top: 64px; height: calc(100vh - 64px); margin-top: 64px; scrollbar-width: none; }
.site .sidebar::-webkit-scrollbar { display: none; }
.site .sidebar-inner { padding: 30px 16px 56px 16px; }
.site .drawer-top { display: none; }
.site .nav-group + .nav-group { margin-top: 20px; }
.site .nav-group-title { margin: 0 0 6px; padding: 0 8px; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--fg); letter-spacing: 0; }
.site .nav-group ul { display: flex; flex-direction: column; gap: 2px; }
.site .nav-link { gap: 8px; min-height: 32px; padding: 6px 8px; border-radius: 10px; font-size: 13px; line-height: 18.5px; font-weight: 500; color: var(--fg-3); }
.site .nav-link .nav-text { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site .nav-link:hover { color: var(--fg); background: transparent; }
.site .nav-link.active { color: var(--fg); background: var(--side-active); font-weight: 500; }
.site .nav-link .nav-method { margin-left: auto; }
/* Badge: docs.x.ai's outlined pill, in Clatter green instead of orange. */
.site .nav-tag, .site .badge-green { flex: none; display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 999px; border: 1px solid var(--badge-line); background: transparent; color: var(--accent-fg); font-size: 10px; line-height: 10px; font-weight: 500; }

/* ------------------------------------------------------------- content column */
.site .main { padding: 96px 48px 0; }
.site .page { max-width: var(--content-w); }
.site.is-api .page { max-width: 720px; }
.site.is-wide .page { max-width: 880px; }
.site .page-head { margin-bottom: 28px; }
.site .eyebrow { margin: 0 0 8px; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--fg); letter-spacing: 0; }
.site .page-title { margin: 0; font-size: 48px; line-height: 1.1; font-weight: 450; letter-spacing: -0.01em; color: var(--fg); text-wrap: balance; }
.site .page-actions { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.site .page-act { display: inline-flex; align-items: center; gap: 6px; height: 20px; font-size: 12px; font-weight: 600; color: var(--fg-3); transition: color .15s; }
.site .page-act:hover, .site .page-act.done { color: var(--fg); }
.site .page-act-sep { width: 1px; height: 16px; background: var(--line-2); }
.site .page-desc { margin: 22px 0 0; font-size: 16px; line-height: 26px; color: var(--fg-2); letter-spacing: 0; }

/* prose */
.site .prose { color: var(--fg-2); font-size: 14px; line-height: 24px; }
.site .prose p { margin: 16px 0; }
.site .prose > p:first-child { margin-top: 0; }
.site .prose strong { color: var(--fg); font-weight: 500; }
.site .prose a:not(.card):not(.anchor):not(.model-card):not(.price-link) { color: var(--fg); font-weight: 500; text-decoration: underline dotted; text-decoration-color: var(--fg-3); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.site .prose a:not(.card):not(.anchor):not(.model-card):not(.price-link):hover { text-decoration-style: solid; text-decoration-color: var(--fg); }
.site .prose h2, .site .prose h3, .site .prose h4 { color: var(--fg); scroll-margin-top: 104px; }
.site .prose h2 { font-size: 30px; line-height: 37.5px; font-weight: 500; letter-spacing: -0.01em; margin: 40px 0 16px; padding-top: 48px; border-top: 1px solid var(--line); }
.site .prose > h2:first-child { border-top: 0; padding-top: 0; }
.site .prose h3 { font-size: 24px; line-height: 33px; font-weight: 500; letter-spacing: -0.01em; margin: 40px 0 12px; }
.site .prose h4 { font-size: 18px; line-height: 26px; font-weight: 500; margin: 28px 0 8px; }
.site .prose .api-h { font-size: 20px; line-height: 28px; border-top: 0; padding-top: 0; }
.site .anchor { left: -28px; color: var(--fg-3); }
.site .prose ul, .site .prose ol { margin: 16px 0; padding-left: 24px; }
.site .prose li { margin: 4px 0; padding-left: 6px; }
.site .prose li::marker { color: var(--fg-4); }
.site .prose hr { border-top-color: var(--line); margin: 40px 0; }
.site .prose blockquote { border-left-color: var(--line-2); color: var(--fg-3); }
/* inline code: mono text in the accent colour, no chip (docs.x.ai style; green instead of orange) */
.site .prose :not(pre) > code { font-family: var(--mono); font-size: .95em; padding: 0; border: 0; border-radius: 0; background: none; color: var(--accent-fg); }
.site .prose a code { color: inherit; }
/* tables: no frame, hairline rows, first column emphasised */
.site .table-wrap { margin: 24px 0; border: 0; border-radius: 0; overflow-x: auto; }
.site .prose table { font-size: 14px; line-height: 21px; }
.site .prose th { background: none; color: var(--fg-2); font-weight: 500; padding: 8px 12px 16px 0; border-bottom: 1px solid var(--line); line-height: 20px; }
.site .prose td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line); color: var(--fg-2); }
.site .prose td:first-child { color: var(--fg); font-weight: 500; }
.site .prose tr:last-child td { border-bottom: 1px solid var(--line); }

/* ------------------------------------------------------------- code */
.site .code-block { margin: 24px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--code-bg); }
.site .code-head { height: 48px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--line); }
.site .code-title { font-size: 12px; font-weight: 500; color: var(--fg); }
.site .code-tabs { gap: 4px; align-items: center; margin-left: -8px; }
.site .code-tab { height: 26px; padding: 4px 8px; border-radius: 12px; font-size: 12px; line-height: 18px; color: var(--fg-3); }
.site .code-tab.active { color: var(--fg); background: var(--code-tab-on); }
.site .code-tab.active::after { display: none; }
.site .copy-btn { color: var(--fg-3); }
.site .copy-btn:hover { background: transparent; color: var(--fg); }
.site .code-body pre { padding: 12px 20px; font-size: 13px; line-height: 20px; }

/* ------------------------------------------------------------- callouts, cards, steps, tabs */
.site .callout { gap: 10px; margin: 24px 0; padding: 14px 16px; border: 0; border-radius: 16px; background: var(--card); font-size: 13px; line-height: 20px; }
.site .callout-icon { margin-top: 2px; }
.site .callout-note, .site .callout-tip, .site .callout-check, .site .callout-warning, .site .callout-danger { background: var(--card); }
.site .card-group { gap: 16px; margin: 24px 0; }
.site .card { padding: 24px; border: 0; border-radius: 16px; background: var(--card); }
.site a.card:hover { background: var(--card-hover); box-shadow: none; }
.site .card-icon { width: auto; height: auto; margin-bottom: 14px; border: 0; background: none; border-radius: 0; color: var(--fg); }
.site .card-icon:has(.mark) { background: none; }
.site .card-title { font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: -0.01em; }
.site .card-text { font-size: 14px; line-height: 22px; color: var(--fg-3); }
.site .step-num { background: var(--card); border-color: var(--line); font-weight: 500; }
.site .step-title { font-weight: 500; font-size: 16px; }
.site .tab-list { border-bottom-color: var(--line); gap: 4px; }
.site .tab { padding: 4px 10px; margin-bottom: 8px; border-radius: 12px; font-size: 13px; }
.site .tab.active { background: var(--code-tab-on); }
.site .tab.active::after { display: none; }
.site .accordion, .site .accordion-group { border-color: var(--line); border-radius: 12px; }
.site .accordion summary:hover { background: var(--card); }
.site .expandable { border-color: var(--line); }
.site .field { border-bottom-color: var(--line); }
.site .f-name, .site .prose .f-name { color: var(--fg); }
.site .f-type { background: var(--card); }
.site .endpoint-bar { border-color: var(--line); background: var(--card); border-radius: 12px; }
.site .update + .update { border-top-color: var(--line); }
.site .update-label { color: var(--fg); background: var(--card); border-color: transparent; font-weight: 500; }

/* Models pages: no product logos; cards in the quiet card style */
.site .mc-mark, .site .mh-mark, .site .price-mark { display: none !important; }
.site .model-card, .site .price, .site .model-hero { border: 0; background: var(--card); box-shadow: none; }
.site .model-card::before, .site .model-hero::before, .site .model-hero::after { display: none; }
.site a.model-card:hover { background: var(--card-hover); box-shadow: none; transform: none; }
.site .price:hover { transform: none; box-shadow: none; }
.site .price.featured { background: var(--card); box-shadow: inset 0 0 0 1px var(--accent-line); }
.site .price-nums { background: var(--bg); border-color: var(--line); }
[data-theme="dark"] .site .price-nums, [data-theme="dark"] .site .price-n { background: var(--bg); }
.site .mh-stats { border-color: var(--line); background: var(--line); }
.site .mh-stat { background: var(--card); }
.site .mh-depth { background: var(--bg); }
.site .mc-chip { background: var(--bg); border-color: var(--line); }
.site .prose .mh-title { font-weight: 500; }

/* ------------------------------------------------------------- feedback, prev/next, footer */
.site .feedback { margin-top: 56px; font-size: 13px; }
.site .feedback button { height: 28px; border-color: var(--pill-line); font-size: 12px; }
.site .prev-next { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); gap: 16px; }
.site .pn { padding: 0; border: 0; border-radius: 0; gap: 4px; }
.site .pn-label { font-size: 12px; color: var(--fg-3); }
.site .pn-title { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; color: var(--fg); }
.site .pn:hover .pn-title { text-decoration: underline dotted; text-underline-offset: 4px; }
.site .site-footer { margin-top: 48px; padding: 24px 0 48px; border-top-color: var(--line); font-size: 13px; color: var(--fg-3); }
.site .footer-brand { font-weight: 500; }

/* ------------------------------------------------------------- right rail */
.site .toc { top: 64px; height: calc(100vh - 64px); margin-top: 64px; }
.site .toc-inner { padding: 36px 32px 40px 0; }
.site .toc-title { display: flex; align-items: center; justify-content: space-between; margin: 0 0 14px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--fg-2); }
.site .toc-title .icon { color: var(--fg-3); }
.site .toc-list { border-left: 0; display: flex; flex-direction: column; gap: 4px; }
.site .toc-list a { padding: 2px 0; margin: 0; border: 0; font-size: 12px; line-height: 18px; font-weight: 400; color: var(--fg-3); }
.site .toc-list .toc-d3 a { padding-left: 12px; font-size: 12px; }
.site .toc-list a:hover, .site .toc-list a.active { color: var(--fg); border: 0; font-weight: 400; }
.site .toc-extra { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.site .toc-list:empty + .toc-extra, .site .toc-inner > .toc-extra:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.site .toc-act { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; color: var(--fg-3); }
.site .toc-act:hover, .site .toc-act.done { color: var(--fg); }
.site .api-side { top: 64px; height: calc(100vh - 64px); margin-top: 64px; }
.site .api-side-inner { padding: 36px 24px 40px 8px; }

/* ------------------------------------------------------------- search dialog */
.site .search-modal { padding: 18vh 16px 16px; }
.site .search-backdrop { background: var(--overlay); backdrop-filter: none; -webkit-backdrop-filter: none; }
.site .search-panel { max-width: 1000px; display: flex; flex-direction: column; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35); }
.site .search-input-row { height: 48px; padding: 0 12px; gap: 10px; border-bottom: 1px solid var(--line); }
.site .search-input-row input { font-size: 16px; }
.site .search-input-row .kbd { border: 1px solid var(--line-2); background: var(--card); font-family: var(--mono); font-size: 11px; }
.site .search-filters { display: flex; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.site .search-filters:empty { display: none; }
.site .sf-chip { flex: none; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 12px; color: var(--fg-3); white-space: nowrap; }
.site .sf-chip span { color: var(--fg-4); }
.site .sf-chip:hover { color: var(--fg); }
.site .sf-chip.active { color: var(--fg); border-color: var(--fg); }
.site .sf-chip.active span { color: var(--fg-3); }
.site .search-results { max-height: min(56vh, 480px); padding: 6px 12px 10px; }
.site .search-group { padding: 12px 0 6px; font-size: 14px; font-weight: 400; color: var(--fg-3); }
.site .search-hit { padding: 10px 12px; border-radius: 10px; }
.site .search-hit.sel { background: var(--card); }
.site .search-hit.sel .icon { color: var(--fg); }
.site .sh-title { font-size: 14px; color: var(--fg); }
.site .sh-crumb { font-size: 12px; color: var(--fg-3); }
.site .sh-text { font-size: 12px; color: var(--fg-3); }
.site .search-hit mark { background: var(--mark-bg); color: var(--fg); font-weight: 500; border-radius: 2px; padding: 0 1px; }
.site .search-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 38px; padding: 0 12px; background: var(--card); border-top: 1px solid var(--line); font-size: 13px; color: var(--fg-3); }
.site .search-foot img { opacity: .8; }
.site .sf-keys { display: flex; gap: 16px; }
.site .sf-keys span { display: inline-flex; align-items: center; gap: 4px; }
.site .sf-keys kbd { font-family: var(--mono); font-size: 11px; padding: 1px 5px; border-radius: 5px; border: 1px solid var(--line-2); background: var(--bg); color: var(--fg-3); }

/* ------------------------------------------------------------- responsive */
.site .menu-btn, .site .search-mobile { display: none; }
@media (max-width: 1279px) {
  .site .shell, .site.is-api .shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .site .main { padding: 96px 40px 0; }
}
@media (max-width: 1100px) {
  .site .top-tabs { gap: 20px; }
  .site .search-trigger { width: 160px; }
}
@media (max-width: 1023px) {
  :root { --top-h: 64px; --header-h: 64px; }
  html { scroll-padding-top: 84px; }
  body.site { font-size: 15px; line-height: 25px; }
  .site .topbar-row { grid-template-columns: 1fr auto; padding: 0 16px 0 24px; }
  .site .top-tabs, .site .search-trigger, .site .topbar-right > .btn-primary, .site .topbar-right > .theme-btn { display: none; }
  .site .menu-btn, .site .search-mobile { display: inline-grid; color: var(--fg); }
  .site .topbar-right { gap: 4px; }
  .site .shell, .site.is-api .shell { grid-template-columns: minmax(0, 1fr); }
  .site .sidebar { position: fixed; z-index: 45; inset: 64px 0 0 0; top: 64px; margin: 0; width: 100%; height: auto; background: var(--bg); border: 0; transform: none; opacity: 0; visibility: hidden; transition: opacity .18s var(--ease), visibility .18s; overflow-y: auto; }
  .site.menu-open .sidebar { opacity: 1; visibility: visible; }
  .site.menu-open .sidebar-backdrop { display: none; }
  .site.menu-open { overflow: hidden; }
  .site .sidebar-inner { padding: 8px 16px 64px; }
  .site .drawer-top { display: block; padding: 0 8px 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
  .site .drawer-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
  .site .drawer-tab { height: 32px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; border: 1px solid var(--pill-line); font-size: 14px; font-weight: 500; color: var(--fg-3); }
  .site .drawer-tab.active { color: var(--bg); background: var(--fg); border-color: var(--fg); }
  .site .drawer-row { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
  .site .nav-link { font-size: 15px; min-height: 40px; padding: 10px 8px; }
  .site .nav-group-title { font-size: 14px; }
  .site .main { padding: 88px 24px 0; }
  .site .page-title { font-size: 36px; }
  .site .prose { font-size: 15px; line-height: 25px; }
  .site .prose h2 { font-size: 24px; line-height: 30px; }
  .site .prose h3 { font-size: 20px; line-height: 28px; }
  .site .search-modal { padding: 64px 0 0; align-items: stretch; }
  .site .search-panel { max-width: none; height: 100%; border-radius: 0; border: 0; border-top: 1px solid var(--line); }
  .site .search-results { max-height: none; flex: 1; }
  .site .sf-keys { display: none; }
}
@media (max-width: 640px) {
  .site .brand-name { display: inline; }
  .site .page-title { font-size: 36px; }
  .site .page-actions .page-act span { display: inline; }
  .site .main { padding: 88px 24px 0; }
}

/* ------------------------------------------------------------- icons (Clatter Labs 24px set, lib/cicons.mjs) */
.site svg.ci { flex: none; display: inline-block; vertical-align: middle; }
.site svg.logo { flex: none; display: block; }
.site .nav-link { gap: 10px; }
.site .nav-ci { color: var(--fg-3); opacity: .9; transition: color .15s; }
.site .nav-link:hover .nav-ci, .site .nav-link.active .nav-ci { color: var(--fg); opacity: 1; }
.site .nav-link.active .nav-ci { color: var(--accent-fg); }
.site .top-tab { gap: 7px; }
.site .tab-ci { opacity: .85; }
.site .top-tab.active .tab-ci { color: var(--accent-fg); opacity: 1; }
.site .drawer-tab { gap: 7px; }
.site .drawer-tab.active .tab-ci { color: var(--bg); }
.site .search-foot svg.logo { opacity: .9; }
.site .footer-brand { gap: 8px; }
.site .update-body h2 { font-size: 24px; line-height: 33px; margin: 0 0 12px; padding-top: 0; border-top: 0; }
.site .theme-btn svg.moon { display: none; }
[data-theme="dark"] .site .theme-btn svg.sun { display: none; }
[data-theme="dark"] .site .theme-btn svg.moon { display: inline-block; }