:root {
  color-scheme: dark;
  --page: #080a0e;
  --panel: #0d1118;
  --line: #202938;
  --text: #edf2f8;
  --muted: #7f8da0;
  --blue: #4f8cff;
  --green: #37d39a;
  --scalar-custom-header-height: 64px;
  --scalar-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --scalar-font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

* { box-sizing: border-box; }
html { background: var(--page); }
body { min-width: 320px; margin: 0; color: var(--text); background: var(--page); font-family: var(--scalar-font); }
a { color: inherit; }

.docs-header {
  position: sticky;
  z-index: 100;
  top: 0;
  height: 64px;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto minmax(260px, 1fr);
  align-items: center;
  gap: 28px;
  padding: 0 24px;
  border-bottom: 1px solid #243249;
  background: rgba(8, 10, 14, .96);
  backdrop-filter: blur(18px);
}

.docs-brand { display: inline-flex; align-items: center; gap: 10px; width: max-content; text-decoration: none; font-size: 17px; font-weight: 660; letter-spacing: -.04em; }
.docs-brand > span:nth-child(2) > span { color: var(--blue); }
.docs-brand b { margin-left: 9px; padding-left: 18px; border-left: 1px solid #2a3548; color: #6f7e93; font: 650 7px ui-monospace, monospace; letter-spacing: .14em; }
.docs-mark { position: relative; width: 25px; height: 25px; display: inline-block; }
.docs-mark i { position: absolute; width: 9px; height: 18px; top: 3px; border: 2px solid var(--blue); transform: skewY(-24deg); }
.docs-mark i:first-child { left: 2px; border-right: 0; }
.docs-mark i:last-child { right: 2px; border-left: 0; }

.docs-meta { display: flex; align-items: center; gap: 18px; color: #66768c; font: 600 7px ui-monospace, monospace; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.docs-meta span:first-child { color: #91a1b7; }
.docs-meta i { display: inline-block; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 7px var(--green); }

.docs-header nav { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.docs-header nav a { color: #7f8da0; font: 600 8px ui-monospace, monospace; text-decoration: none; }
.docs-header nav a:hover { color: #d8e1ed; }
.docs-header nav .docs-back { padding: 9px 12px; border: 1px solid #2a3850; border-radius: 5px; color: #b7c4d6; background: #0e131c; }
.docs-back span { margin-left: 6px; color: var(--blue); }

#app { min-height: calc(100vh - 64px); }
.docs-loading { min-height: calc(100vh - 64px); display: grid; place-content: center; justify-items: center; gap: 16px; color: #64748b; font: 9px ui-monospace, monospace; text-transform: uppercase; letter-spacing: .1em; }
.docs-loading span { width: 22px; height: 22px; border: 1px solid #29364a; border-top-color: var(--blue); border-radius: 50%; animation: docs-spin .8s linear infinite; }
.docs-error { margin: 40px; color: #ffb86b; font: 12px ui-monospace, monospace; }

.dark-mode {
  --scalar-color-1: #dce5f0;
  --scalar-color-2: #91a0b4;
  --scalar-color-3: #637187;
  --scalar-color-accent: #6ba0ff;
  --scalar-background-1: #080a0e;
  --scalar-background-2: #0d1118;
  --scalar-background-3: #141a24;
  --scalar-background-accent: rgba(79, 140, 255, .12);
  --scalar-border-color: #202938;
  --scalar-sidebar-background-1: #090c11;
  --scalar-sidebar-item-hover-background: #101722;
  --scalar-sidebar-item-active-background: rgba(79, 140, 255, .11);
  --scalar-sidebar-border-color: #202938;
  --scalar-sidebar-color-1: #c7d1df;
  --scalar-sidebar-color-2: #748398;
  --scalar-sidebar-color-active: #84aff8;
  --scalar-sidebar-search-background: #0d121a;
  --scalar-sidebar-search-border-color: #273347;
  --scalar-sidebar-search-color: #7f8da0;
}

@keyframes docs-spin { to { transform: rotate(360deg); } }

@media (max-width: 980px) {
  .docs-header { grid-template-columns: 1fr auto; }
  .docs-meta { display: none; }
  .docs-header nav > a:not(.docs-back) { display: none; }
}

@media (max-width: 620px) {
  .docs-header { padding-inline: 15px; gap: 12px; }
  .docs-brand b { display: none; }
  .docs-header nav .docs-back { padding: 8px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .docs-loading span { animation: none; }
}