:root {
  color-scheme: dark;
  --bg: #080313;
  --panel: rgba(15, 6, 34, .84);
  --panel-soft: rgba(31, 11, 55, .82);
  --line: rgba(218, 113, 255, .24);
  --line-strong: rgba(241, 105, 255, .62);
  --text: #fff8ff;
  --muted: #c4b1d2;
  --pink: #ff58dc;
  --purple: #9a79ff;
  --green: #55e6b4;
  --red: #ff719e;
  --shadow: 0 24px 70px rgba(1, 0, 12, .48);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; background: var(--bg); }
body { min-height: 100vh; margin: 0; color: var(--text); background: linear-gradient(180deg, rgba(5, 1, 16, .68), rgba(8, 3, 19, .94)), url("/assets/cosmic-tunnel.webp") center top / cover fixed no-repeat, var(--bg); }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 78% 8%, rgba(255, 74, 218, .18), transparent 25%), radial-gradient(circle at 12% 42%, rgba(104, 83, 255, .18), transparent 24%); }
a { color: inherit; }
button { font: inherit; }
.topbar { position: sticky; top: 0; z-index: 20; height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 26px; border-bottom: 1px solid var(--line); background: rgba(8, 3, 19, .82); backdrop-filter: blur(20px); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; letter-spacing: .08em; }
.brand > span { width: 11px; height: 11px; border-radius: 3px 50% 50%; transform: rotate(45deg); background: linear-gradient(135deg, var(--purple), var(--pink)); box-shadow: 0 0 15px rgba(239, 82, 255, .8); }
.brand b { font-size: 13px; }
.brand em { padding: 4px 7px; border: 1px solid var(--line); border-radius: 7px; color: #f2c7ff; background: rgba(209, 77, 245, .12); font-size: 10px; font-style: normal; }
.top-actions { display: flex; align-items: center; gap: 15px; }
.docs-language { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.docs-language select { height: 34px; min-width: 116px; padding: 0 28px 0 10px; border: 1px solid var(--line); border-radius: 10px; outline: 0; color: var(--text); background: rgba(26, 9, 46, .78); font: inherit; }
.docs-language select:focus { border-color: var(--line-strong); box-shadow: 0 0 0 3px rgba(229, 91, 255, .12); }
.docs-language option { color: var(--text); background: #150824; }
.top-actions > a { padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; color: #ead4f5; background: rgba(26, 9, 46, .72); font-size: 12px; text-decoration: none; }
.api-status { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.api-status i { width: 8px; height: 8px; border-radius: 50%; background: #9c8ca7; box-shadow: 0 0 0 5px rgba(156, 140, 167, .1); }
.api-status.online i { background: var(--green); box-shadow: 0 0 13px rgba(85, 230, 180, .62), 0 0 0 5px rgba(85, 230, 180, .1); }
.api-status.offline i { background: var(--red); }
.layout { width: min(1480px, calc(100% - 40px)); display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 36px; margin: 0 auto; }
.sidebar { position: sticky; top: 92px; align-self: start; max-height: calc(100vh - 115px); padding: 9px 0 25px; overflow-y: auto; }
.sidebar small { display: block; margin: 18px 11px 7px; color: #917ca1; font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.sidebar nav { display: grid; gap: 3px; }
.sidebar a { padding: 8px 11px; border-radius: 9px; color: var(--muted); font-size: 12px; text-decoration: none; transition: color .16s, background .16s; }
.sidebar a:hover { color: #fff; background: rgba(117, 58, 147, .28); }
.content { min-width: 0; padding: 48px 0 35px; }
.anchor { scroll-margin-top: 88px; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: center; gap: 42px; min-height: 330px; padding: 42px; border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(120deg, rgba(18, 7, 42, .9), rgba(36, 9, 53, .72)); box-shadow: var(--shadow); overflow: hidden; }
.kicker, .section header small { color: #e684ff; font-size: 11px; font-weight: 900; letter-spacing: .17em; }
.hero h1 { margin: 11px 0 13px; background: linear-gradient(105deg, #fff, #d4c0ff 45%, #ff76df); background-clip: text; color: transparent; font-size: clamp(43px, 6vw, 74px); line-height: 1; letter-spacing: -.05em; }
.hero > div > p { max-width: 720px; margin: 0; color: var(--muted); line-height: 1.75; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.hero-badges span { padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; color: #e9d4f5; background: rgba(40, 14, 68, .66); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.base-card { position: relative; padding: 22px; border: 1px solid rgba(229, 124, 255, .32); border-radius: 20px; background: rgba(8, 3, 23, .74); box-shadow: 0 20px 50px rgba(0, 0, 8, .35); }
.base-card small { display: block; color: #9c86aa; font-size: 10px; letter-spacing: .14em; }
.base-card > code { display: block; margin: 9px 0 15px; overflow-wrap: anywhere; color: #fff; font-size: 13px; }
.base-card button, .code-head button { border: 1px solid var(--line); border-radius: 9px; cursor: pointer; color: #f2d9fb; background: rgba(76, 27, 102, .56); }
.base-card button { width: 100%; min-height: 38px; }
.base-card p { margin: 14px 0 0; color: var(--muted); font-size: 11px; }
.base-card p i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px rgba(85, 230, 180, .55); }
.section, .endpoint { margin-top: 22px; padding: 30px; border: 1px solid var(--line); border-radius: 24px; background: var(--panel); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.section > header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
.section > header > span { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border: 1px solid var(--line); border-radius: 14px; color: #f1caff; background: rgba(98, 38, 128, .35); font-weight: 800; }
.section h2, .endpoint h2 { margin: 4px 0 7px; font-size: 25px; }
.section header p, .endpoint > p, .section > p { margin: 0; color: var(--muted); line-height: 1.7; }
.steps, .info-grid, .limit-grid { display: grid; gap: 12px; }
.steps { grid-template-columns: repeat(3, 1fr); }
.steps article, .info-grid article { padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel-soft); }
.steps b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: #fff; background: linear-gradient(135deg, #755eff, #ef55d9); }
.steps h3, .info-grid h3 { margin: 12px 0 7px; font-size: 15px; }
.steps code { color: #d9b8e6; font-size: 11px; }
.info-grid { grid-template-columns: 1fr 1fr; }
.info-grid strong { display: inline-grid; place-items: center; min-width: 46px; height: 34px; padding: 0 9px; border-radius: 10px; color: #f7d9ff; background: linear-gradient(135deg, #6f55ef, #d34cd7); font-size: 10px; letter-spacing: .08em; }
.info-grid strong.token { background: linear-gradient(135deg, #267b71, #4ed3b0); }
.info-grid p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.code-card { margin-top: 16px; border: 1px solid rgba(202, 118, 238, .2); border-radius: 16px; background: rgba(5, 2, 15, .84); overflow: hidden; }
.code-head { min-height: 43px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 12px; border-bottom: 1px solid rgba(202, 118, 238, .17); color: #bfa8cc; font-size: 11px; }
.code-head span { display: flex; align-items: center; gap: 9px; }
.code-head button { min-height: 28px; padding: 0 10px; font-size: 10px; }
pre { margin: 0; padding: 17px; overflow-x: auto; color: #eadcf1; font: 11px/1.75 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size: 2; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.method { display: inline-grid; place-items: center; min-width: 42px; height: 23px; padding: 0 7px; border-radius: 7px; color: #fff; font-size: 9px; font-style: normal; font-weight: 900; letter-spacing: .04em; }
.method.get { background: #267d7e; }
.method.post { background: linear-gradient(135deg, #7657f4, #d84edb); }
.callout { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 14px 16px; border: 1px solid rgba(255, 190, 102, .24); border-radius: 14px; color: #ffe1b6; background: rgba(112, 67, 18, .16); }
.callout span { color: #d4bead; font-size: 11px; line-height: 1.6; }
.endpoint-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.endpoint-head > div { display: flex; align-items: center; gap: 10px; }
.endpoint-head > div > code { color: #fff; font-size: 13px; }
.endpoint-head > span { padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; color: #d9c3e5; background: rgba(67, 24, 91, .42); font-size: 10px; }
.schema { display: grid; margin-top: 18px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; font-size: 11px; }
.schema > div { display: grid; grid-template-columns: 1.1fr .8fr .55fr 2.3fr; gap: 12px; padding: 11px 13px; border-top: 1px solid rgba(215, 117, 246, .14); }
.schema > div:first-child { border-top: 0; color: #a38eb1; background: rgba(59, 20, 82, .43); }
.schema strong { color: #ff9fdd; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 17px; }
.split .code-card { height: calc(100% - 24px); margin-top: 7px; }
.label { color: #a78fb7; font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.label.ok { color: var(--green); }
.status-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 18px 0; }
.status-flow span { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: #d9c4e4; background: rgba(64, 23, 87, .45); font: 11px ui-monospace, monospace; }
.status-flow span.success { color: #87f1cf; border-color: rgba(85, 230, 180, .3); }
.status-flow span.failed { color: #ff9cbb; border-color: rgba(255, 113, 158, .3); }
.status-flow i { width: 26px; height: 1px; background: linear-gradient(90deg, #8067ea, #e351de); }
.status-flow em { color: #8f7b9c; font-size: 10px; font-style: normal; }
.error-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.error-grid article { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 4px 10px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-soft); }
.error-grid b { grid-row: 1 / 3; color: #ff86ad; font-size: 17px; }
.error-grid code { color: #f1d8fa; font-size: 11px; }
.error-grid p { margin: 0; color: var(--muted); font-size: 11px; }
.limit-grid { grid-template-columns: repeat(4, 1fr); }
.limit-grid article { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-soft); }
.limit-grid b, .limit-grid span { display: block; }
.limit-grid b { color: #f3b9ff; font-size: 20px; }
.limit-grid span { margin-top: 4px; color: var(--muted); font-size: 10px; }
.rules { margin: 18px 0 0; padding-left: 21px; color: var(--muted); font-size: 12px; line-height: 1.8; }
footer { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 28px 3px 0; color: #9381a0; font-size: 10px; }
footer span { color: #e8c9f4; font-weight: 900; letter-spacing: .14em; }
footer p { margin: 0; }
@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .hero { grid-template-columns: 1fr; }
  .content { padding-top: 28px; }
}
@media (max-width: 680px) {
  .topbar { height: auto; min-height: 62px; padding: 11px 13px; }
  .api-status, .docs-language > span { display: none; }
  .docs-language select { min-width: 104px; }
  .layout { width: min(100% - 20px, 1480px); }
  .content { padding-top: 18px; }
  .hero, .section, .endpoint { padding: 19px; border-radius: 20px; }
  .hero { min-height: 0; gap: 24px; }
  .hero h1 { font-size: 43px; }
  .steps, .info-grid, .split, .error-grid, .limit-grid { grid-template-columns: 1fr; }
  .endpoint-head { align-items: flex-start; flex-direction: column; }
  .schema { overflow-x: auto; }
  .schema > div { min-width: 620px; }
  .callout { align-items: flex-start; flex-direction: column; }
  footer { align-items: flex-start; flex-direction: column; }
}