@font-face {
  font-family: "DM Sans Variable";
  src: url("./assets/dm-sans-latin-wght-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("./assets/jetbrains-mono-latin-400-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("./assets/jetbrains-mono-latin-500-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("./assets/jetbrains-mono-latin-600-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --docs-topbar-height: 64px;
  --docs-sidebar-width: 252px;
  --docs-toc-width: 216px;
  --docs-content-width: 780px;
  --docs-gutter: clamp(20px, 3vw, 44px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  overscroll-behavior-y: none;
}

html,
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  background: var(--color-ink-950);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { padding-top: var(--docs-topbar-height); }
a { color: inherit; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  transform: translateY(-160%);
  border: 1px solid var(--color-line);
  background: var(--color-ink-850);
  padding: 10px 14px;
  color: var(--color-text);
}

.skip-link:focus { transform: translateY(0); }

.topbar {
  position: fixed;
  z-index: 50;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--docs-topbar-height);
  gap: 16px;
  border-bottom: 1px solid var(--color-line);
  background: color-mix(in srgb, var(--color-ink-950) 94%, transparent);
  padding: 0 24px;
  backdrop-filter: blur(12px);
}

.brand {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand__mark {
  display: block;
  width: 34px;
  height: 34px;
  flex: none;
  object-fit: contain;
}

.brand__name { font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.brand__section { color: var(--color-muted); font-size: 14px; }
.brand__section::before { content: "/"; margin-right: 10px; color: var(--color-faint); }

.topbar__actions { display: flex; align-items: center; gap: 10px; }
.topbar__link, .topbar__github {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0 12px;
  color: var(--color-muted);
  font-size: 14px;
  text-decoration: none;
}

.topbar__link:hover, .topbar__github:hover { color: var(--color-text); }
.topbar__github { border: 1px solid var(--color-line); border-radius: var(--radius); }

.search-trigger {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 26px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-ink-900);
  padding: 0 10px 0 12px;
  color: var(--color-muted);
  cursor: pointer;
}

.search-trigger:hover { border-color: var(--color-accent-line); color: var(--color-text); }
kbd {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  color: var(--color-faint);
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
}

.docs-layout {
  display: grid;
  grid-template-columns: var(--docs-sidebar-width) minmax(0, 1fr) var(--docs-toc-width);
  min-height: calc(100vh - var(--docs-topbar-height));
}

.sidebar {
  position: sticky;
  top: var(--docs-topbar-height);
  display: flex;
  height: calc(100vh - var(--docs-topbar-height));
  flex-direction: column;
  overflow-y: auto;
  border-right: 1px solid var(--color-line-soft);
  background: var(--color-ink-950);
  padding: 24px 14px 16px 18px;
}

.sidebar__footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  border-top: 1px solid var(--color-line-soft);
  padding: 14px 8px 0;
  color: var(--color-faint);
  font-size: 12px;
}

.sidebar__footer a { color: var(--color-muted); text-decoration: none; }
.sidebar__footer a:hover { color: var(--color-text); }

.doc-main { min-width: 0; padding: 30px var(--docs-gutter) 48px; }
.doc-main__inner { width: min(100%, var(--docs-content-width)); margin: 0 auto; }
.doc-main.doc-main--home { position: relative; z-index: 2; padding: 0 0 48px; }
.doc-main--home .doc-main__inner { width: min(100%, 868px); padding: 32px var(--docs-gutter) 0; }

.docs-home-hero {
  display: flex;
  width: calc(100% + var(--docs-toc-width));
  height: clamp(420px, 46vw, 620px);
  align-items: flex-start;
  overflow: clip;
  background-color: var(--color-ink-950);
  background-image:
    linear-gradient(to bottom, var(--color-ink-950) 0%, color-mix(in srgb, var(--color-ink-950) 64%, transparent) 17%, transparent 40%, color-mix(in srgb, var(--color-ink-950) 38%, transparent) 63%, var(--color-ink-950) 100%),
    url("./assets/nachthimmel-baum.webp");
  background-repeat: no-repeat;
  background-position: center, 72% center;
  background-size: 100% 100%, cover;
  animation: docs-hero-appear 720ms ease-out both;
}

.docs-home-hero[hidden] { display: none; }
.docs-home-hero__inner { display: flex; width: 100%; height: 100%; align-items: flex-end; }
.docs-home-hero__content {
  width: min(100%, 868px);
  margin-left: max(0px, calc((100% - var(--docs-toc-width) - 868px) / 2));
  padding: clamp(24px, 6vw, 72px) var(--docs-gutter) 0;
}

.docs-home-hero__content .breadcrumbs { margin-bottom: 18px; }
.docs-home-hero__copy { max-width: 780px; }
.docs-home-hero__copy.prose .lead { margin-bottom: 0; }
@keyframes docs-hero-appear { from { opacity: 0; } to { opacity: 1; } }

.breadcrumbs { display: flex; min-height: 24px; align-items: center; gap: 8px; margin: 0 0 24px; color: var(--color-faint); font-size: 13px; }
.breadcrumbs a { color: var(--color-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-text); }
.breadcrumbs__divider { color: var(--color-faint); }

.toc {
  position: sticky;
  top: calc(var(--docs-topbar-height) + 28px);
  align-self: start;
  max-height: calc(100vh - var(--docs-topbar-height) - 48px);
  overflow-y: auto;
  padding: 34px 20px 26px 8px;
}

.toc__title { margin: 0 0 12px; color: var(--color-text); font-size: 13px; font-weight: 600; }
.mobile-bar { display: none; }
.page-turn { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 44px; }
.doc-footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 48px; border-top: 1px solid var(--color-line-soft); padding-top: 18px; color: var(--color-faint); font-size: 12px; }
.doc-footer div { display: flex; flex-wrap: wrap; gap: 18px; }
.doc-footer a { color: var(--color-muted); text-decoration: none; }
.doc-footer a:hover { color: var(--color-text); }

.search-dialog, .navigation-dialog {
  width: min(100% - 32px, 640px);
  max-height: min(80vh, 720px);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-ink-900);
  padding: 0;
  color: var(--color-text);
  box-shadow: var(--shadow-overlay);
}

.search-dialog[open]:not(.is-closing), .navigation-dialog[open]:not(.is-closing) { animation: docs-dialog-in 190ms cubic-bezier(.16, 1, .3, 1) both; }
.search-dialog[open].is-closing, .navigation-dialog[open].is-closing { animation: docs-dialog-out 150ms ease-in both; }
.search-dialog[open]::backdrop, .navigation-dialog[open]::backdrop { animation: docs-backdrop-in 190ms ease-out both; }
.search-dialog[open].is-closing::backdrop, .navigation-dialog[open].is-closing::backdrop { animation: docs-backdrop-out 150ms ease-in both; }
@keyframes docs-dialog-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes docs-dialog-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(8px) scale(.985); } }
@keyframes docs-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes docs-backdrop-out { from { opacity: 1; } to { opacity: 0; } }

.search-dialog::backdrop, .navigation-dialog::backdrop { background: rgb(0 0 0 / .72); backdrop-filter: blur(4px); }
.search-dialog__frame, .navigation-dialog__frame { display: grid; gap: 14px; padding: 18px; }
.search-dialog__head, .navigation-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.search-dialog__head label, .navigation-dialog__head h2 { margin: 0; font-size: 16px; font-weight: 600; }
.dialog-close { min-height: 44px; border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-ink-800); padding: 0 12px; color: var(--color-muted); cursor: pointer; }
.dialog-close:hover { color: var(--color-text); }
.search-dialog input { width: 100%; min-height: 48px; border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-ink-950); padding: 0 14px; color: var(--color-text); }
.search-dialog__hint { margin: 0; color: var(--color-faint); font-size: 12px; }
.search-results { display: grid; max-height: min(52vh, 480px); gap: 4px; overflow-y: auto; }
.search-result { display: grid; gap: 2px; border-radius: var(--radius); padding: 10px 12px; color: var(--color-text); text-decoration: none; }
.search-result:hover, .search-result:focus-visible { background: var(--color-ink-800); }
.search-result__group { color: var(--color-accent); font-size: 11px; }
.search-result__excerpt { color: var(--color-muted); font-size: 13px; }
.search-empty { padding: 12px; color: var(--color-muted); }