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

:root {
  --jr-radius: 16px;
}

[data-md-color-scheme="default"] {
  --jr-surface: #f7f8fa;
  --jr-border: #d9dee7;
  --jr-card-bg: #ffffff;

  --jr-primary: #22314f;
  --jr-primary-soft: #edf3ff;
  --jr-accent: #00a3a3;
  --jr-accent-soft: #e6f7f7;

  --jr-card-hover: #f0f7ff;
}

[data-md-color-scheme="slate"] {
  --jr-surface: #171b22;
  --jr-border: #343c4a;
  --jr-card-bg: #202631;

  --jr-primary: #1f2a3d;
  --jr-primary-soft: #273247;
  --jr-accent: #30c7c7;
  --jr-accent-soft: #243b42;

  --jr-card-hover: #283142;
}

.md-main__inner {
  max-width: 76rem;
}

.md-header {
  background: var(--jr-primary);
}

.md-header__title,
.md-header__topic,
.md-header__button.md-logo {
  color: #ffffff;
}

.jr-hero {
  padding: 1.4rem 1.2rem;
  border-radius: var(--jr-radius);
  border: 1px solid var(--jr-border);
  background: var(--jr-surface);
  border-left: 5px solid var(--jr-accent);
}

.jr-hero h2 {
  margin: 0 0 0.5rem;
}

.jr-hero p {
  margin: 0;
  max-width: 68ch;
}

.jr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.9rem;
  margin-top: 0.8rem;
}

.jr-card {
  display: block;
  border: 1px solid var(--jr-border);
  border-radius: var(--jr-radius);
  padding: 0.9rem;
  text-decoration: none;
  color: inherit;
  background: var(--jr-card-bg);
  transition: transform 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}

.jr-card:hover {
  transform: translateY(-2px);
  border-color: var(--jr-accent);
  background: var(--jr-card-hover);
}

.jr-card strong {
  display: block;
  margin-bottom: 0.25rem;
}

.jr-card span {
  font-size: 0.82rem;
  opacity: 0.88;
}

.md-typeset table:not([class]) {
  border: 1px solid var(--jr-border);
  border-radius: var(--jr-radius);
  overflow: hidden;
}

.md-typeset table:not([class]) th {
  background: var(--jr-primary-soft);
}

.md-typeset pre > code {
  border-radius: 12px;
}

.md-typeset .mermaid {
  border: 1px solid var(--jr-border);
  border-radius: 14px;
  padding: 0.8rem;
  background: var(--jr-card-bg);
  overflow-x: auto;
}

.md-typeset .admonition,
.md-typeset details {
  border-radius: 12px;
}