[hidden]{display:none!important}

:root{
  --ink:#101418;
  --ink-soft:#4b5563;
  --paper:#faf7f2;
  --card:#ffffff;
  --accent:#2f6df6;
  --accent-ink:#1e4fd1;
  --lime:#c7f04c;
  --amber:#f5b942;
  --red:#e5484d;
  --green:#2fbf71;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --radius:14px;
  --shadow:0 10px 30px rgba(16,20,24,.08);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
code{font-family:var(--mono);font-size:.92em}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:32px;
  height:68px;padding:0 clamp(20px,4vw,48px);
  background:rgba(250,247,242,.82);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(16,20,24,.07);
}
.brand{
  display:flex;align-items:center;gap:10px;
  font-family:'Fraunces',serif;font-weight:700;font-size:1.25rem;
  color:var(--ink);text-decoration:none;letter-spacing:-.02em;
}
.brand-dot{width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(47,109,246,.18)}
.brand-accent{color:var(--accent)}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{color:var(--ink-soft);text-decoration:none;font-size:.92rem;font-weight:500;transition:color .15s}
.nav a:hover{color:var(--ink)}
.cta{
  background:var(--ink);color:#fff;text-decoration:none;
  font-size:.88rem;font-weight:600;padding:10px 20px;border-radius:999px;
  transition:transform .15s,background .15s;
}
.cta:hover{background:var(--accent);transform:translateY(-1px)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:clamp(56px,9vw,110px) clamp(20px,4vw,48px) 90px}
.hero-blob{position:absolute;z-index:0;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none}
.blob-a{width:520px;height:520px;background:#dbe7ff;top:-180px;right:-120px}
.blob-b{width:420px;height:420px;background:#eef7cf;bottom:-200px;left:-140px}
.hero-inner{
  position:relative;z-index:2;
  max-width:1120px;margin:0 auto;
  display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start;
}
.eyebrow{
  display:inline-block;font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent-ink);
  background:rgba(47,109,246,.1);padding:5px 12px;border-radius:999px;margin-bottom:18px;
}
h1{
  font-family:'Fraunces',serif;font-weight:700;
  font-size:clamp(2.3rem,4.6vw,3.6rem);line-height:1.06;letter-spacing:-.025em;
}
h1 em{font-style:italic;color:var(--accent)}
.lede{margin:18px 0 30px;color:var(--ink-soft);font-size:1.05rem;max-width:46ch}
.lede code{background:#fff;border:1px solid rgba(16,20,24,.1);padding:2px 6px;border-radius:6px;font-size:.85em}

/* search */
.search-shell{max-width:560px}
.search-row{display:flex;gap:10px}
.search-box{
  position:relative;flex:1;display:flex;align-items:center;
  background:var(--card);border:2px solid rgba(16,20,24,.12);border-radius:var(--radius);
  transition:border-color .15s,box-shadow .15s;
}
.search-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(47,109,246,.14)}
.search-icon{width:20px;height:20px;margin-left:16px;color:var(--ink-soft);flex-shrink:0}
#query-input{
  flex:1;border:0;outline:0;background:transparent;
  font:inherit;font-size:1.02rem;padding:15px 14px;color:var(--ink);min-width:0;
}
#lang-select{
  font:inherit;font-size:.95rem;padding:0 14px;border-radius:var(--radius);
  border:2px solid rgba(16,20,24,.12);background:var(--card);cursor:pointer;color:var(--ink);
  transition:border-color .15s;
}
#lang-select:focus{outline:none;border-color:var(--accent)}
.spinner{
  width:18px;height:18px;margin-right:16px;border-radius:50%;flex-shrink:0;
  border:2.5px solid rgba(47,109,246,.2);border-top-color:var(--accent);
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.error-banner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:12px;padding:11px 16px;border-radius:10px;
  background:#fdecec;border:1px solid rgba(229,72,77,.35);color:#a52226;font-size:.9rem;
}
.error-banner button{
  border:0;background:none;color:inherit;font-size:1.25rem;line-height:1;cursor:pointer;padding:0 2px;
}

.results{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:8px}
.results li{
  background:var(--card);border:1px solid rgba(16,20,24,.08);border-radius:11px;
  padding:12px 16px;font-size:.98rem;display:flex;align-items:center;gap:12px;
  box-shadow:0 2px 6px rgba(16,20,24,.04);
  animation:pop .22s ease both;
  transition:transform .12s,border-color .12s;
  cursor:default;
}
.results li:hover{transform:translateX(4px);border-color:rgba(47,109,246,.4)}
.results li .idx{
  font-family:var(--mono);font-size:.72rem;color:#fff;background:var(--accent);
  width:22px;height:22px;border-radius:7px;display:grid;place-items:center;flex-shrink:0;
}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.results-empty{margin-top:14px;color:var(--ink-soft);font-size:.93rem;font-style:italic}

/* terminal panel */
.hero-panel{position:relative;margin-top:44px}
.terminal{
  background:#14181f;border-radius:16px;box-shadow:var(--shadow);
  overflow:hidden;border:1px solid rgba(255,255,255,.06);
  transform:rotate(1.2deg);
}
.terminal-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:#1b202a}
.tdot{width:11px;height:11px;border-radius:50%}
.tdot.red{background:#ff5f57}.tdot.yellow{background:#febc2e}.tdot.green{background:#28c840}
.terminal-title{margin-left:auto;font-family:var(--mono);font-size:.72rem;color:#6b7485}
.terminal-body{
  padding:20px 22px;color:#c7f04c;font-family:var(--mono);font-size:.83rem;line-height:1.65;
  min-height:260px;max-height:380px;overflow:auto;white-space:pre-wrap;word-break:break-word;
}
.latency-badge{
  position:absolute;top:-14px;right:-8px;z-index:3;
  background:var(--lime);color:#2a3608;font-family:var(--mono);font-size:.78rem;font-weight:500;
  padding:7px 14px;border-radius:999px;box-shadow:0 6px 16px rgba(16,20,24,.15);
  transform:rotate(-3deg);
}

/* ---------- docs ---------- */
.docs{position:relative;background:#fff;border-top:1px solid rgba(16,20,24,.07);padding:clamp(60px,8vw,100px) clamp(20px,4vw,48px)}
.docs-inner{max-width:920px;margin:0 auto}
.docs h2{
  font-family:'Fraunces',serif;font-weight:700;font-size:clamp(1.7rem,3.2vw,2.4rem);
  letter-spacing:-.02em;margin-bottom:32px;
}
.endpoint-card{
  background:var(--paper);border:1px solid rgba(16,20,24,.09);border-radius:var(--radius);
  padding:22px 24px;box-shadow:var(--shadow);
}
.endpoint-line{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.method{
  background:var(--green);color:#fff;font-family:var(--mono);font-weight:500;
  font-size:.78rem;padding:5px 12px;border-radius:8px;letter-spacing:.05em;
}
.path{font-size:.95rem;color:var(--ink)}
.copy-btn{
  margin-left:auto;font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;
  border:1.5px solid rgba(16,20,24,.15);background:#fff;border-radius:999px;padding:7px 16px;
  transition:background .15s,border-color .15s;
}
.copy-btn:hover{border-color:var(--accent);color:var(--accent-ink)}
.params{width:100%;margin-top:20px;border-collapse:collapse;font-size:.92rem}
.params th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft);padding:8px 10px;border-bottom:1px solid rgba(16,20,24,.1)}
.params td{padding:12px 10px;border-bottom:1px solid rgba(16,20,24,.06);vertical-align:top}
.pill{font-family:var(--mono);font-size:.7rem;padding:3px 10px;border-radius:999px}
.pill.req{background:rgba(229,72,77,.12);color:#b3282c}
.pill.opt{background:rgba(47,191,113,.14);color:#1b7a49}

.response-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:36px}
.resp-card{
  background:var(--paper);border:1px solid rgba(16,20,24,.09);border-radius:var(--radius);
  overflow:hidden;transition:transform .15s,box-shadow .15s;
}
.resp-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.resp-head{display:flex;align-items:center;gap:10px;padding:14px 18px;font-weight:600;font-size:.9rem;border-bottom:1px solid rgba(16,20,24,.07)}
.status{font-family:var(--mono);font-size:.75rem;padding:3px 10px;border-radius:7px;color:#fff}
.s200{background:var(--green)}.s400{background:var(--red)}
.resp-card pre{padding:16px 18px;overflow:auto}
.resp-card pre code{font-size:.78rem;line-height:1.6;color:var(--ink)}

.usage-card{
  margin-top:36px;background:#14181f;color:#e6e9ef;border-radius:var(--radius);
  padding:28px 30px;box-shadow:var(--shadow);
}
.usage-card h3{font-family:'Fraunces',serif;font-size:1.25rem;margin-bottom:8px}
.usage-card p{color:#9aa3b2;font-size:.93rem;margin-bottom:16px}
.usage-card p code{color:var(--lime)}
.usage-card pre{background:rgba(255,255,255,.05);border-radius:10px;padding:16px 18px;overflow:auto}
.usage-card pre code{color:#c7f04c;font-size:.82rem;line-height:1.65}

/* ---------- export blocks ---------- */
.export-panel{margin-top:18px;display:flex;flex-direction:column;gap:14px}
.export-block{background:var(--card);border:1px solid rgba(16,20,24,.09);border-radius:var(--radius);box-shadow:0 2px 6px rgba(16,20,24,.04);overflow:hidden}
.export-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1px solid rgba(16,20,24,.07);font-size:.78rem;font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em}
.export-body{margin:0;padding:14px 16px;font-family:var(--mono);font-size:.83rem;line-height:1.6;white-space:pre-wrap;word-break:break-word;max-height:220px;overflow:auto;color:var(--ink)}

/* ---------- footer ---------- */
.site-footer{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding:28px clamp(20px,4vw,48px);color:var(--ink-soft);font-size:.85rem;
  border-top:1px solid rgba(16,20,24,.07);
}
.site-footer span:first-child{font-family:'Fraunces',serif;font-weight:700;color:var(--ink)}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .hero-inner{grid-template-columns:1fr;gap:44px}
  .hero-panel{margin-top:0}
  .terminal{transform:none}
  .nav{display:none}
}
@media (max-width:520px){
  .search-row{flex-direction:column}
  #lang-select{padding:13px 14px}
  .copy-btn{margin-left:0}
}