@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap');

/* ── TOKENS ───────────────────────────────────────────────── */
:root {
  --bg:#fafaf9; --panel:#f2f1ee; --panel-2:#eae8e4;
  --text:#1c1917; --muted:#78716c; --dim:#a8a29e;
  --line:#e7e5e4; --line-2:#d6d3d1;
  --accent:#ea580c; --accent-hi:#f97316;
  --accent-bg:rgba(234,88,12,.08); --accent-glow:rgba(234,88,12,.18);
  --code-bg:#ece9e5;
  --tok-kw:#b91c1c; --tok-type:#6d28d9; --tok-str:#1e4d8c; --tok-num:#c2410c;
  --sh-a:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --sh-b:0 4px 20px rgba(0,0,0,.09),0 1px 4px rgba(0,0,0,.05);
  --sh-c:0 14px 48px rgba(0,0,0,.12),0 4px 14px rgba(0,0,0,.06);
  --r:10px; --r-sm:6px; --r-lg:16px;
}
[data-theme=dark] {
  --bg:#0c0e14; --panel:#12151d; --panel-2:#181c26;
  --text:#eceae6; --muted:#8a8d96; --dim:#555968;
  --line:#1c2030; --line-2:#242840;
  --accent:#f97316; --accent-hi:#fb923c;
  --accent-bg:rgba(249,115,22,.1); --accent-glow:rgba(249,115,22,.22);
  --code-bg:#0d0f16;
  --tok-kw:#fca5a5; --tok-type:#c4b5fd; --tok-str:#93c5fd; --tok-num:#fb923c;
  --sh-a:0 1px 3px rgba(0,0,0,.3);
  --sh-b:0 4px 20px rgba(0,0,0,.4),0 1px 4px rgba(0,0,0,.25);
  --sh-c:0 14px 48px rgba(0,0,0,.55),0 4px 14px rgba(0,0,0,.35);
}

/* ── RESET / BASE ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-padding-top:80px;scroll-behavior:smooth;}
body{
  margin:0;
  font:15px/1.65 'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-feature-settings:'cv02','cv03','cv04','cv11';
  background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  transition:background .25s,color .25s;
}

/* ── HEADER ───────────────────────────────────────────────── */
header{
  display:flex;justify-content:space-between;align-items:center;
  height:64px;padding:0 28px;gap:16px;
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:100;
  background:rgba(250,250,249,.85);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
[data-theme=dark] header{background:rgba(12,14,20,.85);}

.logo{
  font-weight:800;font-size:15px;letter-spacing:-.04em;
  color:var(--text);text-decoration:none;flex-shrink:0;
  display:inline-flex;align-items:center;gap:7px;
  transition:color .15s;
}
.logo::before{
  content:'';display:inline-block;width:9px;height:9px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 10px var(--accent-glow);
  flex-shrink:0;
}
.logo:hover{color:var(--accent);text-decoration:none;}

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

nav{display:flex;gap:2px;align-items:center;flex-shrink:0;}
nav a{
  font-size:13px;font-weight:500;letter-spacing:-.01em;
  color:var(--muted);padding:6px 12px;border-radius:var(--r-sm);
  text-decoration:none;transition:color .15s,background .15s;
  position:relative;
}
nav a::after{
  content:'';position:absolute;bottom:3px;left:12px;right:12px;
  height:1.5px;background:var(--accent);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .22s cubic-bezier(.25,.46,.45,.94);
}
nav a:hover{color:var(--text);background:var(--accent-bg);text-decoration:none;}
nav a:hover::after{transform:scaleX(1);}

#theme-toggle{
  background:none;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:7px 10px;cursor:pointer;color:var(--muted);
  display:flex;align-items:center;
  transition:border-color .15s,color .15s,background .15s,box-shadow .15s;
  margin-left:6px;
}
#theme-toggle:hover{
  border-color:var(--accent);color:var(--accent);
  background:var(--accent-bg);box-shadow:0 0 0 3px var(--accent-bg);
}
.icon-sun{display:none;}.icon-moon{display:block;}
[data-theme=dark] .icon-sun{display:block;}[data-theme=dark] .icon-moon{display:none;}

/* ── SEARCH ───────────────────────────────────────────────── */
.search-wrap{flex:1;max-width:380px;}
#search{
  width:100%;padding:8px 14px 8px 36px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  font:13.5px 'Inter',sans-serif;font-feature-settings:'cv02','cv03','cv04';
  color:var(--text);
  background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2.2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") 11px center/15px no-repeat;
  outline:none;transition:border-color .15s,box-shadow .15s;
}
#search::placeholder{color:var(--dim);}
#search:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);}

/* ── LAYOUT ───────────────────────────────────────────────── */
.docs-shell{display:grid;grid-template-columns:272px minmax(0,1fr);max-width:1400px;margin:0 auto;}

.sidebar{
  border-right:1px solid var(--line);
  padding:28px 14px 100px;height:calc(100vh - 64px);
  position:sticky;top:64px;overflow-y:auto;
  background:var(--panel);
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.sidebar::-webkit-scrollbar{width:3px;}
.sidebar::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px;}

.sidebar-title{margin:0 0 20px;font-size:10px;font-weight:700;color:var(--dim);text-transform:uppercase;letter-spacing:.12em;padding:0 8px;}
.sidebar-group{display:block;margin:24px 0 6px;color:var(--muted);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;text-decoration:none;padding:0 8px;transition:color .15s;}
.sidebar-group:hover{color:var(--accent);text-decoration:none;}
.sidebar ul{list-style:none;margin:0;padding:0;}
.sidebar li{margin:2px 0;}
.sidebar li a{color:var(--muted);font-size:13px;font-weight:450;letter-spacing:-.01em;padding:5px 10px;border-radius:var(--r-sm);display:block;text-decoration:none;transition:color .12s,background .12s;}
.sidebar li a:hover{background:var(--panel-2);color:var(--text);text-decoration:none;}

/* ── CONTENT ──────────────────────────────────────────────── */
.content{width:min(900px,calc(100% - 48px));margin:56px auto 120px;}
.standalone{width:min(1000px,calc(100% - 48px));}

/* ── TYPOGRAPHY ───────────────────────────────────────────── */
h1{
  font-size:clamp(28px,4vw,42px);line-height:1.1;
  margin:0 0 12px;font-weight:800;letter-spacing:-.045em;
  background:linear-gradient(140deg,var(--text) 30%,var(--muted) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
[data-theme=dark] h1{background:linear-gradient(140deg,#eceae6 30%,#6b7280 100%);-webkit-background-clip:text;background-clip:text;}
h2{margin:64px 0 20px;padding-bottom:12px;border-bottom:1px solid var(--line);font-size:20px;font-weight:700;letter-spacing:-.03em;color:var(--text);}
h3{margin:0 0 10px;font-size:15px;font-weight:650;letter-spacing:-.015em;}
.lead{font-size:16.5px;color:var(--muted);max-width:640px;line-height:1.78;margin:0 0 48px;font-weight:400;letter-spacing:-.01em;}

/* ── API ENTRIES ──────────────────────────────────────────── */
.module-section{margin-top:52px;}
.api-entry{padding:32px 0 36px;border-bottom:1px solid var(--line);}
.api-entry:last-child{border-bottom:none;}

.entry-kicker{
  display:inline-flex;align-items:center;
  font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  margin-bottom:12px;padding:3px 10px;border-radius:999px;color:#fff;
}
.entry-kicker.k-class{background:linear-gradient(135deg,#7c3aed,#5b21b6);}
.entry-kicker.k-method{background:linear-gradient(135deg,#2563eb,#1d4ed8);}
.entry-kicker.k-function{background:linear-gradient(135deg,#059669,#047857);}

/* ── SIGNATURE ────────────────────────────────────────────── */
.signature{
  margin:12px 0 18px;padding:14px 20px;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--code-bg);overflow-x:auto;
  position:relative;
}
.signature::before{
  content:'';position:absolute;inset:0;border-radius:var(--r);
  background:linear-gradient(90deg,var(--accent-bg) 0%,transparent 55%);
  pointer-events:none;
}
code{font:13px/1.5 ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;color:var(--text);}

/* ── SYNTAX TOKENS ────────────────────────────────────────── */
.tok-kw{color:var(--tok-kw);font-weight:600;}
.tok-type{color:var(--tok-type);}
.tok-str{color:var(--tok-str);}
.tok-num{color:var(--tok-num);}
.tok-arrow{color:var(--tok-kw);font-weight:600;}

/* ── CODE BLOCKS (always dark) ────────────────────────────── */
pre.code-block{
  margin:20px 0;padding:0;
  background:#0d0f14;border-radius:var(--r-lg);
  overflow:hidden;border:1px solid #1a1f2e;
  box-shadow:var(--sh-b),inset 0 1px 0 rgba(255,255,255,.03);
}
pre.code-block::before{
  content:'';display:block;height:2px;
  background:linear-gradient(90deg,#ea580c 0%,#f97316 45%,#fbbf24 100%);
}
pre.code-block code{
  display:block;padding:20px 24px;
  font:13px/1.72 ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  color:#c9d1d9;overflow-x:auto;white-space:pre;
}
pre.code-block .tok-kw{color:#ff7b72;font-weight:600;}
pre.code-block .tok-type{color:#d2a8ff;}
pre.code-block .tok-str{color:#a5d6ff;}
pre.code-block .tok-num{color:#ffa657;}
pre.code-block .tok-comment{color:#6e7681;font-style:italic;}
pre.code-block .tok-arrow{color:#ff7b72;font-weight:600;}

/* ── FIELD LIST ───────────────────────────────────────────── */
.field-list{
  display:grid;grid-template-columns:100px minmax(0,1fr);gap:12px 24px;
  margin:20px 0 0;padding:18px 20px;
  background:var(--panel);border-radius:var(--r);border:1px solid var(--line);
}
.field-list dt{font-size:10px;font-weight:700;color:var(--dim);text-transform:uppercase;letter-spacing:.1em;padding-top:3px;}
.field-list dd{margin:0;color:var(--text);font-size:13.5px;line-height:1.6;}
.field-list dd code{background:var(--panel-2);padding:1px 5px;border-radius:4px;font-size:12px;}

/* ── LINK LIST ────────────────────────────────────────────── */
.link-list{margin:36px 0;padding:0;list-style:none;}
.link-list li{
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px 28px;margin-bottom:14px;
  background:var(--panel);position:relative;overflow:hidden;
  transition:border-color .2s,box-shadow .2s,transform .2s;
}
.link-list li::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,var(--accent-bg) 0%,transparent 60%);
  opacity:0;transition:opacity .2s;
}
.link-list li:hover{border-color:var(--accent);box-shadow:var(--sh-c);transform:translateY(-2px);}
.link-list li:hover::before{opacity:1;}
.link-list a{text-decoration:none;display:block;position:relative;}
.link-list a:hover{text-decoration:none;}
.link-list h2{margin:0 0 6px;padding:0;border:0;font-size:17px;font-weight:700;letter-spacing:-.025em;color:var(--text);}
.link-list p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.6;}

/* ── EXAMPLES PAGE ────────────────────────────────────────── */
.tier-nav{display:flex;gap:8px;margin:0 0 52px;flex-wrap:wrap;}
.tier-nav a{
  padding:8px 20px;border:1.5px solid var(--line);border-radius:999px;
  font-size:13px;font-weight:600;letter-spacing:-.01em;
  text-decoration:none;color:var(--muted);
  transition:border-color .15s,color .15s,background .15s,box-shadow .15s;
}
.tier-nav a:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg);box-shadow:0 0 0 3px var(--accent-bg);text-decoration:none;}

.example-section{margin:0 0 80px;}
.example-section>h2{display:flex;align-items:center;gap:14px;}

.tier-label{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:3px 10px;border-radius:999px;color:#fff;}
.tag-beginner{background:linear-gradient(135deg,#059669,#10b981);}
.tag-advanced{background:linear-gradient(135deg,#dc2626,#b91c1c);}
.tag-ai{background:linear-gradient(135deg,#2563eb,#4f46e5);}

.section-desc{color:var(--muted);font-size:14.5px;line-height:1.72;margin:-10px 0 32px;max-width:640px;}

.example-card{
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px 32px;margin-bottom:20px;
  background:var(--panel);position:relative;overflow:hidden;
  transition:border-color .2s,box-shadow .2s,transform .2s;
}
.example-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,var(--accent-bg) 0%,transparent 55%);
  opacity:0;transition:opacity .2s;
}
.example-card:hover{border-color:var(--accent);box-shadow:var(--sh-c);transform:translateY(-2px);}
.example-card:hover::before{opacity:1;}
.example-meta{display:flex;gap:10px;align-items:center;margin-bottom:12px;position:relative;}
.example-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;padding:3px 9px;border-radius:999px;color:#fff;}
.example-concepts{font-size:11.5px;color:var(--muted);font-family:ui-monospace,monospace;background:var(--panel-2);border:1px solid var(--line);padding:2px 9px;border-radius:999px;}
.example-card h3{margin:0 0 8px;font-size:17px;font-weight:700;letter-spacing:-.025em;position:relative;}
.example-desc{color:var(--muted);margin:0 0 22px;font-size:14px;line-height:1.72;position:relative;}
.example-run{margin:16px 0 0;font-size:12.5px;color:var(--dim);position:relative;}
.example-run code{background:var(--panel-2);padding:2px 8px;border-radius:4px;font-size:12px;color:var(--muted);}

/* ── AI BOX ───────────────────────────────────────────────── */
.ai-box{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:24px 28px;margin:20px 0 32px;
  position:relative;overflow:hidden;
}
.ai-box::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,#2563eb,#7c3aed,#db2777);
}
.ai-box h4{margin:0 0 14px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);}
.ai-box ol,.ai-box ul{margin:0;padding-left:18px;line-height:2;color:var(--text);}
.ai-box code{background:var(--panel-2);padding:1px 5px;border-radius:4px;font-size:12px;}
.ai-box p{margin:0 0 10px;color:var(--text);}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media(max-width:960px){
  .docs-shell{display:block;}
  .sidebar{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line);}
  .content{width:min(100% - 28px,900px);}
  .field-list{grid-template-columns:1fr;gap:6px;}
  .search-wrap{max-width:none;}
  header{padding:0 16px;height:56px;}
}

/* ── FADE-UP ENTRIES ──────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.api-entry{animation:fadeUp .28s ease both;}
.api-entry:nth-child(1){animation-delay:.04s;}
.api-entry:nth-child(2){animation-delay:.08s;}
.api-entry:nth-child(3){animation-delay:.12s;}
.api-entry:nth-child(4){animation-delay:.16s;}
.api-entry:nth-child(5){animation-delay:.20s;}