:root {
  --spock-width: 1232px;
  --spock-gutter: 56px;
  --spock-text: "IBM Plex Sans", Arial, sans-serif;
  scrollbar-gutter: stable;
}

:root[data-theme="dark"] {
  --paper: #141413;
  --ink: #f5f2e9;
  --ink-muted: #bdb8ae;
  --hairline: #393732;
}

body { margin: 0; min-height: 100vh; background: var(--paper, var(--page)); }
.wrap, .site-main, .api-shell {
  width: min(calc(100% - 2 * var(--spock-gutter)), var(--spock-width));
  margin-inline: auto;
}
.site-main, .api-shell { max-width: none; padding-inline: 0; }
.api-shell > .site-main { width: 100%; }

.spock-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 80px;
  margin: 0 auto;
  padding: 0;
  border-bottom: 1px solid var(--hairline, var(--line));
  color: var(--ink);
  font: 400 14px/1.4 var(--spock-text);
}
.spock-brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  font-size: 31px;
  font-weight: 600;
  letter-spacing: -.065em;
  text-decoration: none;
}
.spock-brand svg { width: 24px; height: 24px; flex: none; }
.spock-brand-period { color: var(--shu-text, var(--accent)); }
.spock-nav, .spock-controls, .spock-account { display: flex; align-items: center; }
.spock-nav { gap: 32px; }
.spock-nav a { color: var(--ink-muted, var(--muted)); font: inherit; white-space: nowrap; text-decoration: none; }
.spock-nav a:hover, .spock-brand:hover { color: var(--ink); }
.spock-controls { justify-self: end; gap: 8px; }
.spock-account { gap: 10px; }
.spock-sign-in, .spock-sign-out, .spock-theme-toggle {
  width: auto;
  min-height: 36px;
  margin: 0;
  padding: 7px 11px;
  border: 1px solid var(--hairline, var(--line));
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.spock-theme-toggle { width: 36px; padding: 0; font-size: 20px; line-height: 1; }
.spock-theme-toggle:hover, .spock-sign-out:hover, .spock-sign-in:hover {
  border-color: var(--shu-text, var(--accent));
  background: transparent;
  color: var(--ink);
}
.spock-header :focus-visible { outline: 2px solid var(--shu-text, var(--accent)); outline-offset: 3px; }
.theme-moon, :root[data-theme="light"] .theme-sun { display: none; }
:root[data-theme="light"] .theme-moon { display: inline; }
.spock-account .account-email {
  display: inline-block;
  max-width: 155px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-muted, var(--muted));
  font-size: 12px;
}


.api-shell .site-main > header h1 {
  font-size: calc(44px * var(--spock-type-scale, .75));
}
.api-shell .docs-content h1 { font-size: calc(46px * var(--spock-type-scale, .75)); }
.api-shell .docs-section h2 { font-size: calc(26px * var(--spock-type-scale, .75)); }

@media (max-width: 600px) {
  .api-shell .site-main > header h1 { font-size: calc(34px * var(--spock-type-scale, .75)); }
  .api-shell .docs-content h1 { font-size: calc(35px * var(--spock-type-scale, .75)); }
}

@media (max-width: 960px) {
  :root { --spock-gutter: 32px; }
  .spock-account .account-email { display: none; }
}

@media (max-width: 760px) {
  :root { --spock-gutter: 22px; }
  .spock-header { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; padding-block: 12px; }
  .spock-nav { grid-row: 2; grid-column: 1 / -1; gap: 22px; padding: 6px 0 2px; }
}