@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Schibsted+Grotesk:wght@400;500;600;700&display=swap");

:root {
  --mdb-font-sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mdb-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --mdb-text-xs: 11.5px;
  --mdb-text-sm: 13px;
  --mdb-text-md: 15px;
  --mdb-text-lg: 18px;
  --mdb-text-xl: 24px;
  --mdb-text-2xl: clamp(28px, 4.5vw, 38px);
  --mdb-space-1: 4px;
  --mdb-space-2: 8px;
  --mdb-space-3: 12px;
  --mdb-space-4: 16px;
  --mdb-space-5: 24px;
  --mdb-space-6: 32px;
  --mdb-space-7: 48px;
  --mdb-radius: 8px;
  --mdb-radius-sm: 5px;
  --mdb-page-max: 1180px;
  --mdb-read-max: 880px;
  --mdb-gutter: max(16px, env(safe-area-inset-left, 0px));
  --mdb-nav-h: 56px;

  --mdb-bg: #f3f5f3;
  --mdb-surface: #ffffff;
  --mdb-surface-2: #e9eeeb;
  --mdb-line: #d7ded9;
  --mdb-line-strong: #b7c2bb;
  --mdb-ink: #13201a;
  --mdb-ink-2: #34443c;
  --mdb-muted: #5b6b63;
  --mdb-accent: #12684f;
  --mdb-accent-ink: #ffffff;
  --mdb-accent-soft: #dcefe6;
  --mdb-focus: #12684f;
  --mdb-ok: #1d7a4b;
  --mdb-ok-soft: #dff0e6;
  --mdb-warn: #95600a;
  --mdb-warn-soft: #f8eed8;
  --mdb-crit: #b03a2a;
  --mdb-crit-soft: #f8e4e0;
  --mdb-info: #2c5c9c;
  --mdb-info-soft: #e2eaf6;
  --mdb-nav-bg: rgb(243 245 243 / 80%);
  --mdb-shadow: 0 1px 2px rgb(19 32 26 / 6%), 0 8px 24px rgb(19 32 26 / 8%);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mdb-bg: #0e1513;
    --mdb-surface: #141d1a;
    --mdb-surface-2: #1a2622;
    --mdb-line: #24322d;
    --mdb-line-strong: #34463f;
    --mdb-ink: #e1e9e5;
    --mdb-ink-2: #b9c6c0;
    --mdb-muted: #8a9a93;
    --mdb-accent: #62cfa3;
    --mdb-accent-ink: #062018;
    --mdb-accent-soft: #15322a;
    --mdb-focus: #62cfa3;
    --mdb-ok: #62cfa3;
    --mdb-ok-soft: #15322a;
    --mdb-warn: #e3b25a;
    --mdb-warn-soft: #33291a;
    --mdb-crit: #ef8a78;
    --mdb-crit-soft: #3a1f1a;
    --mdb-info: #8db4ea;
    --mdb-info-soft: #1c2738;
    --mdb-nav-bg: rgb(14 21 19 / 74%);
    --mdb-shadow: 0 8px 24px rgb(0 0 0 / 40%);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --mdb-bg: #0e1513;
  --mdb-surface: #141d1a;
  --mdb-surface-2: #1a2622;
  --mdb-line: #24322d;
  --mdb-line-strong: #34463f;
  --mdb-ink: #e1e9e5;
  --mdb-ink-2: #b9c6c0;
  --mdb-muted: #8a9a93;
  --mdb-accent: #62cfa3;
  --mdb-accent-ink: #062018;
  --mdb-accent-soft: #15322a;
  --mdb-focus: #62cfa3;
  --mdb-ok: #62cfa3;
  --mdb-ok-soft: #15322a;
  --mdb-warn: #e3b25a;
  --mdb-warn-soft: #33291a;
  --mdb-crit: #ef8a78;
  --mdb-crit-soft: #3a1f1a;
  --mdb-info: #8db4ea;
  --mdb-info-soft: #1c2738;
  --mdb-nav-bg: rgb(14 21 19 / 74%);
  --mdb-shadow: 0 8px 24px rgb(0 0 0 / 40%);
  color-scheme: dark;
}

html {
  padding-top: var(--mdb-nav-h);
  scroll-padding-top: calc(var(--mdb-nav-h) + 12px);
  background: var(--mdb-bg);
}

.mdb-nav,
.mdb-nav * {
  box-sizing: border-box;
}

.mdb-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  display: block;
  height: var(--mdb-nav-h);
  margin: 0;
  padding: 0;
  font: 500 14px/1 var(--mdb-font-sans);
  color: var(--mdb-ink);
  background: var(--mdb-nav-bg);
  border-bottom: 1px solid var(--mdb-line);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  backdrop-filter: saturate(150%) blur(12px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mdb-nav {
    background: var(--mdb-bg);
  }
}

.mdb-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--mdb-space-5);
  height: 100%;
  max-width: var(--mdb-page-max);
  margin: 0 auto;
  padding: 0 var(--mdb-gutter);
}

.mdb-nav a.mdb-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  color: var(--mdb-ink);
  font: 600 15px/1 var(--mdb-font-mono);
  letter-spacing: -0.02em;
  text-decoration: none;
  border-radius: var(--mdb-radius-sm);
}

.mdb-nav__brand b {
  color: var(--mdb-accent);
  font-weight: 600;
}

.mdb-nav svg.mdb-nav__mark {
  display: block;
  width: 18px;
  height: 18px;
  flex: none;
  overflow: visible;
}

.mdb-nav__mark rect {
  fill: var(--mdb-accent);
}

.mdb-nav__mark rect:nth-child(2) {
  opacity: 0.66;
}

.mdb-nav__mark rect:nth-child(3) {
  opacity: 0.36;
}

.mdb-nav__panel {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--mdb-space-4);
  min-width: 0;
  height: 100%;
}

.mdb-nav__panel > nav {
  height: 100%;
}

.mdb-nav__links {
  display: flex;
  align-items: stretch;
  gap: 2px;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mdb-nav__links li {
  display: flex;
  margin: 0;
}

.mdb-nav a.mdb-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: var(--mdb-muted);
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--mdb-radius-sm);
  transition: color 120ms ease;
}

.mdb-nav a.mdb-nav__link:hover {
  color: var(--mdb-ink);
  text-decoration: none;
}

.mdb-nav a.mdb-nav__link[aria-current="page"] {
  color: var(--mdb-ink);
}

.mdb-nav a.mdb-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: -1px;
  left: 10px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--mdb-accent);
}

.mdb-nav__end {
  display: flex;
  align-items: center;
  gap: var(--mdb-space-3);
  min-width: 0;
  margin-left: auto;
}

.mdb-nav__user {
  overflow: hidden;
  max-width: 26ch;
  color: var(--mdb-muted);
  font: 400 12.5px/1.2 var(--mdb-font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mdb-nav__user:empty {
  display: none;
}

.mdb-nav button.mdb-nav__btn,
.mdb-nav a.mdb-nav__out {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  margin: 0;
  padding: 0 10px;
  color: var(--mdb-ink-2);
  font: 500 13px/1 var(--mdb-font-sans);
  white-space: nowrap;
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--mdb-line);
  border-radius: var(--mdb-radius-sm);
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background-color 120ms ease;
}

.mdb-nav button.mdb-nav__btn:hover,
.mdb-nav a.mdb-nav__out:hover {
  color: var(--mdb-ink);
  text-decoration: none;
  background: var(--mdb-surface);
  border-color: var(--mdb-line-strong);
}

.mdb-nav__theme-dot {
  width: 10px;
  height: 10px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}

.mdb-nav__theme[data-theme-choice="light"] .mdb-nav__theme-dot {
  background: transparent;
}

.mdb-nav__theme[data-theme-choice="dark"] .mdb-nav__theme-dot {
  background: currentColor;
}

.mdb-nav button.mdb-nav__menu {
  display: none;
  margin-left: auto;
}

.mdb-nav__menu-bars {
  position: relative;
  width: 14px;
  height: 10px;
  border-top: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
}

.mdb-nav__menu-bars::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  border-top: 1.5px solid currentColor;
  transform: translateY(-50%);
}

.mdb-nav a:focus-visible,
.mdb-nav button:focus-visible {
  outline: 2px solid var(--mdb-focus);
  outline-offset: 2px;
}

.mdb-nav a.mdb-nav__link:focus-visible {
  outline-offset: -6px;
}

.mdb-nav a.mdb-nav__skip {
  position: absolute;
  top: 10px;
  left: var(--mdb-gutter);
  z-index: 1;
  padding: 8px 12px;
  color: var(--mdb-accent-ink);
  font-weight: 600;
  text-decoration: none;
  background: var(--mdb-accent);
  border-radius: var(--mdb-radius-sm);
  transform: translateY(-200%);
}

.mdb-nav a.mdb-nav__skip:focus {
  transform: none;
}

.mdb-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 860px) {
  .mdb-nav__user {
    display: none;
  }
}

@media (max-width: 720px) {
  .mdb-nav button.mdb-nav__menu {
    display: inline-flex;
  }

  .mdb-nav__panel {
    position: absolute;
    top: var(--mdb-nav-h);
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    height: auto;
    max-height: calc(100dvh - var(--mdb-nav-h));
    overflow-y: auto;
    padding: var(--mdb-space-2) var(--mdb-gutter) var(--mdb-space-4);
    background: var(--mdb-bg);
    border-bottom: 1px solid var(--mdb-line);
    box-shadow: var(--mdb-shadow);
  }

  .mdb-nav[data-open] .mdb-nav__panel {
    display: flex;
  }

  .mdb-nav__panel > nav {
    height: auto;
  }

  .mdb-nav__links {
    flex-direction: column;
    height: auto;
  }

  .mdb-nav a.mdb-nav__link {
    flex: 1;
    min-height: 44px;
    padding: 0 var(--mdb-space-2);
    font-size: 16px;
    border-bottom: 1px solid var(--mdb-line);
    border-radius: 0;
  }

  .mdb-nav a.mdb-nav__link[aria-current="page"]::after {
    top: 12px;
    right: auto;
    bottom: 12px;
    left: -10px;
    width: 3px;
    height: auto;
    border-radius: 0 2px 2px 0;
  }

  .mdb-nav__end {
    flex-wrap: wrap;
    margin: var(--mdb-space-3) 0 0;
  }

  .mdb-nav__user:not(:empty) {
    display: block;
    flex-basis: 100%;
    max-width: none;
    padding: var(--mdb-space-1) var(--mdb-space-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mdb-nav * {
    transition: none !important;
  }
}