/* ============================================================
 * CUQ.IN /api — vanilla CSS
 * Order: reset → tokens → base → utilities → components →
 *        responsive → reduced-motion.
 * All BEM-ish classes are `api-*`. State classes are `is-*`.
 * ============================================================ */

/* ---- Reset (minimal) ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; margin: 0; }
img, svg { max-width: 100%; display: block; }

/* ---- Tokens (light) ---- */
:root {
  /* Semantic palette */
  --bg:            #ffffff;
  --surface:       #ffffff;
  --surface-2:     #f7f8fa;
  --ink:           #0d0d0f;
  --muted:         #66666e;
  --line:          #ececef;
  --accent:        #0d0d0f;
  --accent-ink:    #ffffff;
  --accent-weak:   #f2f2f4;
  --sig:           #c4360f;
  --ok:            #157a48;
  --danger:        #d63a44;

  /* Console (always-dark terminal) */
  --con-bg:        #0c0f16;
  --con-bg-2:      #0a0d13;
  --con-line:      #1b2130;
  --con-line-2:    #17223a;
  --con-line-3:    #26324a;
  --con-surface:   #141b2a;
  --con-ink:       #c8cfdd;
  --con-muted:     #8a94a8;
  --con-dim:       #7a8496;
  --con-accent:    #6a93ff;
  --con-accent-ink:#eaf1ff;
  --con-ok:        #47c98d;
  --con-err:       #ff6f78;

  /* Type */
  --sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;

  /* Spacing */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* Radius */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 16px; --r-pill: 999px;

  /* Shadow */
  --shadow-sm:  0 1px 2px rgba(11,13,18,.06);
  --shadow-md:  0 8px 24px rgba(11,13,18,.08);
  --shadow-pop: 0 20px 54px rgba(6,9,16,.28);
  --shadow-con: 0 30px 70px -44px rgba(6,9,16,.9);

  /* Motion */
  --tr-fast: 120ms ease;
  --tr-base: 180ms ease;

  /* Layout */
  --page-max: 1080px;
  --page-pad: 48px;
  --toc-h:    58px;
}

/* ---- Tokens (dark, explicit) ---- */
:root[data-theme="dark"] {
  --bg:          #0e1117;
  --surface:     #171d27;
  --surface-2:   #12151d;
  --ink:         #eceff6;
  --muted:       #99a3b5;
  --line:        #262d3a;
  --accent:      #6a93ff;
  --accent-ink:  #0b1017;
  --accent-weak: #17223a;
  --sig:         #ff6a3d;
  --ok:          #47c98d;
  --danger:      #ff6f78;
  --shadow-sm:  0 1px 2px rgba(0,0,0,.4);
  --shadow-md:  0 8px 24px rgba(0,0,0,.35);
  --shadow-pop: 0 20px 54px rgba(0,0,0,.55);
  --shadow-con: 0 30px 70px -44px rgba(0,0,0,.85);
}

/* prefers-color-scheme fallback — applies only when user hasn't picked. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #0e1117;
    --surface:     #171d27;
    --surface-2:   #12151d;
    --ink:         #eceff6;
    --muted:       #99a3b5;
    --line:        #262d3a;
    --accent:      #6a93ff;
    --accent-ink:  #0b1017;
    --accent-weak: #17223a;
    --sig:         #ff6a3d;
    --ok:          #47c98d;
    --danger:      #ff6f78;
    --shadow-sm:  0 1px 2px rgba(0,0,0,.4);
    --shadow-md:  0 8px 24px rgba(0,0,0,.35);
    --shadow-pop: 0 20px 54px rgba(0,0,0,.55);
    --shadow-con: 0 30px 70px -44px rgba(0,0,0,.85);
  }
}

/* ---- Base ---- */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
code, pre, kbd, samp { font-family: var(--mono); }
button { cursor: pointer; }
button:disabled { opacity: .55; cursor: not-allowed; }

/* Focus ring — theme-aware, high contrast. */
:focus-visible {
  outline: 2px solid var(--sig);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--sig);
  outline-offset: 1px;
}

/* Sticky anchor offset — accounts for sticky TOC height. */
#get-key, #playground, #examples, #reference {
  scroll-margin-top: calc(var(--toc-h) + var(--sp-4));
}

/* ---- Utilities ---- */
.api-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.api-skip {
  position: fixed; inset-inline-start: 12px; top: 12px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--accent); color: var(--accent-ink);
  border-radius: var(--r-md);
  transform: translateY(-140%);
  transition: transform var(--tr-base);
  z-index: 100;
  font: 600 13px/1 var(--sans);
}
.api-skip:focus-visible { transform: translateY(0); }

/* ---- Header ---- */
.api-header {
  max-width: var(--page-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  padding: var(--sp-6) var(--page-pad);
  border-bottom: 1px solid var(--line);
}
.api-header__brand {
  font: 700 18px/1 var(--sans);
  letter-spacing: -.03em;
  color: var(--ink);
}
.api-header__brand-slash { color: var(--muted); font-weight: 500; }

.api-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.api-nav__link {
  font: 500 13.5px/1 var(--sans);
  color: var(--muted);
  transition: color var(--tr-fast);
}
.api-nav__link:hover, .api-nav__link:focus-visible { color: var(--ink); }
.api-nav__link--current { color: var(--ink); font-weight: 600; }

/* ---- Language switcher ---- */
.api-lang { position: relative; }
.api-lang__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px 12px 8px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--ink);
  font: 600 12.5px/1 var(--sans);
  transition: border-color var(--tr-fast);
}
.api-lang__trigger:hover { border-color: var(--ink); }
.api-lang__globe { display: block; }
.api-lang__native { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.api-lang__chev {
  transition: transform var(--tr-fast);
  color: var(--muted);
}
.api-lang__trigger[aria-expanded="true"] .api-lang__chev { transform: rotate(180deg); }

.api-lang__backdrop {
  position: fixed; inset: 0;
  background: transparent;
  z-index: 40;
}
.api-lang__panel {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  z-index: 41;
  width: min(266px, calc(100vw - var(--sp-6)));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  animation: revealRise .16s ease both;
}
[dir="rtl"] .api-lang__panel { inset-inline-end: auto; inset-inline-start: 0; }

.api-lang__searchwrap {
  padding: 10px;
  border-bottom: 1px solid var(--line);
}
.api-lang__search {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg);
  color: var(--ink);
  font: 500 13px/1 var(--sans);
  outline: none;
}
.api-lang__search:focus { border-color: var(--ink); }

.api-lang__list {
  max-height: 300px;
  overflow-y: auto;
  padding: 6px;
}
.api-lang__list [role="option"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 9px;
  color: var(--ink);
  font: 600 13.5px/1.2 var(--sans);
  cursor: pointer;
  user-select: none;
}
.api-lang__list [role="option"]:hover,
.api-lang__list [role="option"].is-active {
  background: var(--accent-weak);
}
.api-lang__list [role="option"][aria-selected="true"] {
  background: var(--accent-weak);
}
.api-lang__opt-left { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.api-lang__opt-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sig);
  opacity: 0;
  flex: 0 0 auto;
}
.api-lang__list [role="option"][aria-selected="true"] .api-lang__opt-dot { opacity: 1; }
.api-lang__opt-native { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.api-lang__opt-name {
  color: var(--muted);
  font: 500 11px/1 var(--mono);
  flex: 0 0 auto;
}
.api-lang__empty {
  margin: 0;
  padding: 16px 11px;
  color: var(--muted);
  font: 500 13px/1.4 var(--sans);
}

/* ---- Hero ---- */
.api-hero {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--sp-16) var(--page-pad) var(--sp-5);
}
.api-hero__eyebrow {
  margin: 0;
  font: 600 12px/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sig);
}
.api-hero__title {
  margin: 14px 0 0;
  max-width: 18ch;
  font: 700 clamp(32px, 4.4vw, 52px)/1.04 var(--sans);
  letter-spacing: -.035em;
  color: var(--ink);
}
.api-hero__sub {
  margin: 18px 0 0;
  max-width: 60ch;
  font: 400 18px/1.55 var(--sans);
  color: var(--muted);
}
.api-endpoint-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  font: 600 14px/1 var(--mono);
  flex-wrap: wrap;
}
.api-endpoint-chip__method {
  color: var(--accent);
  background: var(--accent-weak);
  padding: 4px 9px;
  border-radius: var(--r-sm);
}
.api-endpoint-chip__url { color: var(--ink); }

/* ---- TOC (sticky) ---- */
.api-toc {
  position: sticky;
  top: 0;
  z-index: 30;
  margin-top: 10px;
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  min-height: var(--toc-h);
}
.api-toc__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  overflow-x: auto;
  min-height: var(--toc-h);
  scrollbar-width: thin;
}
.api-toc__label {
  margin: 0;
  font: 700 10.5px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  flex: 0 0 auto;
}
.api-toc__list {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex: 1 1 auto;
}
.api-toc__list li { display: inline-block; }
.api-toc__link {
  font: 600 13px/1 var(--sans);
  color: var(--muted);
  white-space: nowrap;
  padding: 6px 0;
  transition: color var(--tr-fast);
}
.api-toc__link:hover, .api-toc__link:focus-visible { color: var(--ink); text-decoration: none; }
.api-toc__link--active,
.api-toc__link[aria-current="location"] {
  color: var(--sig);
  border-bottom: 2px solid var(--sig);
  padding-bottom: 4px;
}

/* ---- Sections ---- */
.api-section {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--sp-10) var(--page-pad);
  outline: none;
}
.api-section__title {
  margin: 0 0 8px;
  font: 700 clamp(22px, 2.6vw, 30px)/1.1 var(--sans);
  letter-spacing: -.02em;
  color: var(--ink);
}
.api-section__sub {
  margin: 0 0 22px;
  max-width: 62ch;
  font: 400 15px/1.55 var(--sans);
  color: var(--muted);
}

/* ---- Buttons ---- */
.api-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 14px 22px;
  min-height: 48px;
  border-radius: var(--r-md);
  font: 700 14px/1 var(--sans);
  letter-spacing: .01em;
  transition: filter var(--tr-fast), transform var(--tr-fast), border-color var(--tr-fast), background var(--tr-fast), color var(--tr-fast);
}
.api-btn:hover:not(:disabled) { filter: brightness(1.06); }
.api-btn:active:not(:disabled) { transform: translateY(1px); }
.api-btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
}
.api-btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.api-btn--ghost:hover:not(:disabled) { border-color: var(--ink); filter: none; }
.api-btn--block { width: 100%; }

/* ---- Get-key card ---- */
.api-getkey__card {
  max-width: 620px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface-2);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}
.api-getkey__step {
  display: grid;
  gap: var(--sp-3);
  animation: revealRise .3s ease both;
}
/* [hidden] attribute'u display:grid'i override etmez → 3 step üst üste görünürdü.
   Spesifiklik: [data-step] varyantlarını da geçebilmesi için önce genel [hidden]. */
.api-getkey__step[hidden] { display: none; }

/* Email step (data-step="email"): demo pattern — label üstte, input + button yan yana.
   Diğer step'ler tek sütun default grid'i kullanır. */
.api-getkey__step[data-step="email"] {
  grid-template-columns: 1fr auto;
  align-items: end;
}
.api-getkey__step[data-step="email"] > .api-getkey__label,
.api-getkey__step[data-step="email"] > .api-getkey__err {
  grid-column: 1 / -1;
}
.api-getkey__label {
  display: block;
  font: 700 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.api-getkey__input {
  width: 100%;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--ink);
  font: 500 15px/1.3 var(--mono);
  outline: none;
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.api-getkey__input:focus {
  border-color: var(--sig);
  box-shadow: 0 0 0 3px var(--accent-weak);
}
.api-getkey__input[aria-invalid="true"] { border-color: var(--danger); }
.api-getkey__input--otp {
  font-weight: 600;
  font-size: 18px;
  letter-spacing: .42em;
  text-align: center;
}
.api-getkey__err {
  margin: 4px 0 0;
  font: 500 13px/1.4 var(--sans);
  color: var(--danger);
}
.api-getkey__row {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  align-items: center;
}
.api-getkey__sent {
  margin: 0;
  font: 400 14px/1.5 var(--sans);
  color: var(--muted);
}
.api-getkey__sent-email { color: var(--ink); font-weight: 600; }
.api-getkey__eyebrow {
  display: block;
  margin: 0 0 8px;
  font: 700 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ok);
}
.api-getkey__sent-msg {
  margin: 0 0 var(--sp-4);
  font: 500 15px/1.5 var(--sans);
  color: var(--ink);
}
.api-getkey__keep {
  margin: var(--sp-4) 0 0;
  font: 400 13px/1.5 var(--sans);
  color: var(--muted);
}

/* ---- Playground ---- */
.api-playground__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);  /* alt alta — form üstte, response altta; ikisi de full width */
  gap: 18px;
  align-items: start;
}
.api-playground__card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  padding: 22px;
}
.api-playground__eyebrow {
  display: block;
  margin: 0 0 9px;
  font: 700 10.5px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.api-playground__tablist {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.api-playground__tab {
  padding: 8px 14px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  font: 600 12.5px/1 var(--mono);
  transition: color var(--tr-fast), background var(--tr-fast), border-color var(--tr-fast);
}
.api-playground__tab:hover { color: var(--ink); border-color: var(--ink); }
.api-playground__tab[aria-selected="true"],
.api-playground__tab--active {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.api-playground__form { display: grid; gap: 14px; }
.api-playground__label {
  display: block;
  font: 700 10.5px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 9px;
}
.api-playground__input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg);
  color: var(--ink);
  font: 500 14px/1.35 var(--mono);
  outline: none;
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.api-playground__input:focus {
  border-color: var(--sig);
  box-shadow: 0 0 0 3px var(--accent-weak);
}
.api-playground__field { display: block; }
.api-playground__field[hidden] { display: none; }

/* URL label hint (update action için "— new long URL"). */
.api-playground__label-hint {
  color: var(--muted);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  margin-inline-start: 4px;
}
.api-playground__err {
  margin: 4px 0 0;
  font: 500 13px/1.4 var(--sans);
  color: var(--danger);
}

/* ---- Console (dark surface for playground response + examples) ---- */
.api-console {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--con-bg);
  color: var(--con-ink);
  border: 1px solid var(--con-line);
  box-shadow: var(--shadow-con);
}
.api-console__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: var(--con-bg-2);
  border-bottom: 1px solid var(--con-line);
}
.api-console__eyebrow {
  margin: 0;
  font: 700 10.5px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--con-muted);
}
.api-console__status {
  margin-left: auto;
  font: 600 11px/1 var(--mono);
  letter-spacing: .06em;
  color: var(--con-accent);
  text-transform: uppercase;
}
.api-console__status.is-ok  { color: var(--con-ok); }
.api-console__status.is-err { color: var(--con-err); }

.api-console__body {
  position: relative;
  padding: 16px 16px 18px;
  min-height: 220px;
}
.api-console__body--pad { padding: 18px; }
.api-console__loader {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 2px;
}
/* [hidden] display:flex/grid override edemiyor — idle+loader+response birden görünürdü. */
.api-console__loader[hidden],
.api-console__idle[hidden],
.api-console__pre[hidden],
.api-console__copy[hidden] { display: none; }
.api-console__bar {
  position: relative;
  flex: 1;
  height: 4px;
  border-radius: 3px;
  background: var(--con-line-2);
  overflow: hidden;
}
.api-console__bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 38%;
  border-radius: 3px;
  background: var(--con-accent);
  animation: barSlide 1s linear infinite;
}
.api-console__loader-label {
  font: 600 11px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--con-muted);
}
.api-console__idle {
  margin: 0;
  font: 500 13px/1.7 var(--mono);
  color: var(--con-dim);
}
.api-console__pre {
  margin: 0;
  padding: 0;
  overflow: auto;
  color: var(--con-accent-ink);
  font: 500 13px/1.7 var(--mono);
  white-space: pre-wrap;      /* uzun URL satırları wrap eder — horizontal scroll gitmesin */
  overflow-wrap: anywhere;    /* kelime-boşluğu olmayan URL'ler orta yerinden kırılabilir */
  animation: revealRise .3s ease both;
}
.api-console__copy {
  margin-top: 14px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--con-line-3);
  background: var(--con-surface);
  color: var(--con-ink);
  font: 700 12px/1 var(--mono);
  transition: border-color var(--tr-fast), color var(--tr-fast);
}
.api-console__copy:hover:not(:disabled) {
  border-color: var(--con-accent);
  color: var(--con-accent-ink);
  filter: none;
}
.api-console__copy.is-flash { color: var(--con-ok); border-color: var(--con-ok); }
.api-console__copy--example { margin-top: 12px; }

/* ---- Examples ---- */
.api-examples__tablist { display: flex; gap: 4px; }
.api-examples__tab {
  padding: 7px 12px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--con-muted);
  font: 700 12px/1 var(--mono);
  letter-spacing: .04em;
  transition: color var(--tr-fast), background var(--tr-fast), border-color var(--tr-fast);
}
.api-examples__tab:hover { color: var(--con-accent-ink); }
.api-examples__tab[aria-selected="true"],
.api-examples__tab--active {
  color: var(--con-accent-ink);
  background: var(--con-surface);
  border-color: var(--con-line-3);
}
.api-examples__meta {
  margin: 0 0 0 auto;
  font: 600 11px/1 var(--mono);
  letter-spacing: .06em;
  color: var(--con-dim);
}
.api-examples__meta code { color: var(--con-accent); margin-left: 4px; }

/* ---- Reference tables ---- */
.api-reference__h3 {
  margin: var(--sp-8) 0 10px;
  font: 700 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.api-reference__h3:first-of-type { margin-top: 4px; }
.api-reference__scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.api-reference__table {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
}
.api-reference__table th {
  text-align: start;
  padding: 11px 15px;
  font: 700 10px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.api-reference__table td {
  padding: 12px 15px;
  border-bottom: 1px solid var(--line);
  font: 400 13.5px/1.5 var(--sans);
  color: var(--muted);
  vertical-align: top;
}
.api-reference__table tbody tr:last-child td { border-bottom: 0; }
.api-reference__table td:first-child { white-space: nowrap; }
.api-reference__mono { color: var(--ink); font: 600 12px/1.5 var(--mono); }
.api-ref-chip {
  display: inline-block;
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--accent-weak);
  color: var(--sig);
  font: 600 12px/1 var(--mono);
}

/* ---- Footer ---- */
.api-footer {
  border-top: 1px solid var(--line);
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 28px var(--page-pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.api-footer__copy {
  margin: 0;
  font: 400 12.5px/1.6 var(--mono);
  color: var(--muted);
}
.api-footer__links {
  display: inline-flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.api-footer__link {
  font: 600 13px/1 var(--mono);
  color: var(--muted);
  transition: color var(--tr-fast);
}
.api-footer__link:hover, .api-footer__link:focus-visible { color: var(--sig); }
.api-footer__link--accent { color: var(--sig); }

/* ---- Keyframes ---- */
@keyframes barSlide {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}
@keyframes revealRise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  :root { --page-pad: 32px; }
}
@media (max-width: 768px) {
  .api-playground__grid { grid-template-columns: 1fr; }
  .api-header { padding-block: var(--sp-4); }
  .api-hero { padding-top: var(--sp-12); }
  .api-header__brand-slash { display: none; }
}
@media (max-width: 480px) {
  :root { --page-pad: 20px; }
  .api-hero { padding-block: var(--sp-10) var(--sp-4); }
  .api-section { padding-block: var(--sp-8); }
  .api-toc__inner { gap: var(--sp-4); }
  .api-toc__list { gap: var(--sp-4); }
  .api-lang__panel { width: calc(100vw - 24px); }
  .api-hero__title { max-width: none; }
  .api-endpoint-chip { font-size: 12.5px; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}