@font-face { font-family: "Geist"; src: url("./assets/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("./assets/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #08060c;
  --surface: rgba(18, 16, 26, 0.58);
  --ink: #f7f5fa;
  --muted: #a8a1b4;
  --line: rgba(255, 255, 255, 0.08);
  --rose: #ff3d6e;
  --magenta: #ff2d9b;
  --violet: #a855f7;
  --gold: #d99a32;
  --blue: #4388ff;
  --red: #f87171;
  --code-bg: rgba(5, 4, 9, 0.72);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 18px 46px -20px rgba(0, 0, 0, 0.9);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font-family: "Geist", ui-sans-serif, system-ui, sans-serif; line-height: 1.55; }
body::before { position: fixed; inset: 0; z-index: -2; background: linear-gradient(150deg, #08060c 0%, #100812 47%, #08060c 100%); content: ""; }
.app-ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(54rem 38rem at 5% -5%, rgba(196,20,63,.32), transparent 64%), radial-gradient(44rem 36rem at 102% 10%, rgba(168,85,247,.18), transparent 62%), radial-gradient(42rem 30rem at 70% 104%, rgba(255,45,155,.13), transparent 62%); }
a { color: inherit; }

.sidebar, .hero, .patterns, .toolbar, .endpoint, .section-heading, .quick-grid article, .pattern-grid article {
  background-color: var(--surface);
  background-image: linear-gradient(150deg, rgba(255,255,255,.065), rgba(255,255,255,.012) 55%);
  border: 1px solid var(--line);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(20px) saturate(145%);
  -webkit-backdrop-filter: blur(20px) saturate(145%);
}

.sidebar { position: fixed; inset: 14px auto 14px 14px; z-index: 10; width: 278px; padding: 20px 16px; overflow-y: auto; border-color: rgba(255,61,110,.16); border-radius: 8px; }
.brand { display: flex; gap: 12px; align-items: center; margin-bottom: 24px; text-decoration: none; }
.brand-mark { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; object-fit: cover; box-shadow: 0 0 24px rgba(255,45,155,.23); }
.brand strong, .brand small { display: block; }
.brand strong { font-size: .96rem; }
.brand small { color: var(--muted); }
.search-label { display: block; margin-bottom: 8px; color: #d8d3df; font-size: .78rem; font-weight: 700; }
.search, select { width: 100%; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: rgba(8,6,12,.58); color: var(--ink); padding: 11px 12px; font: inherit; outline: none; transition: border-color 180ms ease, box-shadow 180ms ease; }
.search:focus, select:focus { border-color: rgba(255,61,110,.6); box-shadow: 0 0 0 3px rgba(255,61,110,.14); }
.search::placeholder { color: #777181; }
.nav { margin-top: 20px; }
.nav a { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 7px; color: #d7d1dd; text-decoration: none; font-size: .88rem; transition: background 180ms ease, color 180ms ease; }
.nav a:hover { background: rgba(255,61,110,.1); color: #fff; }
.nav span:last-child { color: #8d8593; font-family: "Geist Mono", monospace; }

.content { margin-left: 306px; padding: 28px 30px 60px; }
.hero { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 350px; gap: 32px; align-items: end; min-height: 360px; padding: 44px; overflow: hidden; border-color: rgba(255,61,110,.26); border-radius: 8px; background-color: rgba(26,10,20,.55); background-image: linear-gradient(135deg, rgba(236,44,99,.18), rgba(168,85,247,.07) 55%, rgba(255,255,255,.02)); }
.hero::after { position: absolute; right: -5rem; top: -7rem; width: 24rem; height: 24rem; border-radius: 50%; background: rgba(255,45,155,.12); filter: blur(70px); content: ""; pointer-events: none; }
.hero > * { position: relative; z-index: 1; }
.hero-logo { width: 58px; height: 58px; margin-bottom: 24px; border-radius: 8px; object-fit: cover; box-shadow: 0 0 34px rgba(255,45,155,.26); }
.eyebrow { margin: 0 0 12px; color: #ff84a7; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0; }
h1, h2, h3 { margin: 0; line-height: 1.15; }
h1 { max-width: 820px; font-size: clamp(2.5rem,5vw,4.8rem); letter-spacing: 0; }
.hero p { max-width: 760px; margin: 18px 0 0; color: #d5cfda; font-size: 1.02rem; }
.hero-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 0; }
.hero-stats div { min-width: 0; padding: 16px; border: 1px solid rgba(255,255,255,.09); border-radius: 8px; background: rgba(8,6,12,.38); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.hero-stats dt { overflow-wrap: anywhere; font-size: 1.45rem; font-weight: 850; }
.hero-stats dd { margin: 3px 0 0; color: #a69eac; font-size: .75rem; }

.quick-grid, .pattern-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-top: 20px; perspective: 1000px; }
.patterns, .toolbar, .endpoint, .section-heading, .quick-grid article, .pattern-grid article { border-radius: 8px; }
.quick-grid article, .patterns { padding: 22px; }
.quick-grid article, .pattern-grid article { transform-style: preserve-3d; will-change: transform; }
.quick-grid h2, .patterns h2, .toolbar h2 { font-size: 1.04rem; }
.quick-grid p, .toolbar p { margin: 10px 0 0; color: var(--muted); }
code { font-family: "Geist Mono", monospace; font-size: .88em; }
.quick-grid code, .inline-code { display: inline-block; margin-top: 12px; padding: 5px 8px; border: 1px solid rgba(255,61,110,.16); border-radius: 6px; background: rgba(255,61,110,.09); color: #ff91af; font-weight: 700; }
.patterns { margin-top: 20px; }
.pattern-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.pattern-grid article { padding: 18px; background-color: rgba(14,11,20,.63); }
pre { overflow-x: auto; margin: 14px 0 0; padding: 16px; border: 1px solid rgba(255,255,255,.06); border-radius: 8px; background: var(--code-bg); color: #eee8f2; white-space: pre; }

.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 20px; padding: 20px 22px; }
.toolbar select { max-width: 230px; }
.section-heading { margin-top: 20px; padding: 20px 22px; border-color: rgba(168,85,247,.16); }
.section-heading p { max-width: 820px; margin: 8px 0 0; color: var(--muted); }
.endpoint { margin-top: 12px; overflow: hidden; transform-style: preserve-3d; transform-origin: center; will-change: transform; transition: border-color 180ms ease, box-shadow 180ms ease; }
.endpoint:hover { border-color: rgba(255,61,110,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 20px 50px -18px rgba(0,0,0,.95), 0 0 30px rgba(255,45,155,.06); }
.endpoint summary { display: grid; grid-template-columns: 96px minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 18px 22px; cursor: pointer; list-style: none; }
.endpoint summary::-webkit-details-marker { display: none; }
.method { display: inline-grid; place-items: center; min-width: 78px; border-radius: 6px; padding: 5px 8px; color: #fff; font-size: .78rem; font-weight: 850; box-shadow: inset 0 1px 0 rgba(255,255,255,.16); }
.GET { background: var(--blue); }
.POST { background: linear-gradient(135deg,#ec2c63,#c4143f); }
.PATCH { background: var(--gold); }
.DELETE { background: var(--red); }
.route { min-width: 0; }
.route code { display: block; overflow-wrap: anywhere; color: var(--ink); font-size: .98rem; font-weight: 750; }
.route span { display: block; margin-top: 4px; color: var(--muted); font-size: .9rem; }
.auth-pill { border: 1px solid rgba(168,85,247,.18); border-radius: 999px; padding: 6px 10px; background: rgba(168,85,247,.1); color: #d7b7fb; font-size: .78rem; font-weight: 750; }
.endpoint-body { display: grid; grid-template-columns: minmax(260px,.85fr) minmax(320px,1.15fr); gap: 20px; padding: 0 22px 22px; border-top: 1px solid var(--line); }
.endpoint-body h4 { margin: 18px 0 8px; color: #ff91af; font-size: .78rem; text-transform: uppercase; letter-spacing: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip { border: 1px solid rgba(255,255,255,.07); border-radius: 999px; padding: 5px 9px; background: rgba(255,255,255,.045); color: #c9c2cf; font-size: .76rem; font-weight: 700; }
.empty { margin-top: 22px; padding: 30px; border: 1px dashed rgba(255,61,110,.28); border-radius: 8px; color: var(--muted); background: var(--surface); }

* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 999px; }

@media (max-width: 1060px) {
  .sidebar { position: relative; inset: auto; width: auto; margin: 14px; max-height: none; }
  .content { margin-left: 0; padding: 10px 20px 44px; }
  .hero { grid-template-columns: 1fr; }
  .quick-grid, .pattern-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .content { padding: 4px 14px 36px; }
  .hero { min-height: auto; padding: 28px 22px; }
  h1 { font-size: 2.4rem; }
  .hero-stats { grid-template-columns: 1fr; }
  .toolbar, .endpoint summary, .endpoint-body { display: block; }
  .method, .auth-pill { margin-bottom: 10px; }
  .toolbar select { max-width: none; margin-top: 12px; }
  .endpoint { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}