/* ═══════════════════════════════════════════════════════
   lllm.dev — pure-black dark, clean light, shared structure
   ═══════════════════════════════════════════════════════ */

/* ── Dark palette ──────────────────────────────────── */
[data-md-color-scheme="slate"] {
  --md-default-bg-color:             #000;
  --md-default-bg-color--light:      #0a0a0a;
  --md-default-bg-color--lighter:    #141414;
  --md-default-bg-color--lightest:   #1a1a1a;
  --md-default-fg-color:             #b0b0b0;
  --md-default-fg-color--light:      #808080;
  --md-default-fg-color--lighter:    #555;
  --md-default-fg-color--lightest:   #2a2a2a;
  --md-primary-fg-color:             #818cf8;
  --md-primary-fg-color--light:      #a5b4fc;
  --md-primary-fg-color--dark:       #6366f1;
  --md-primary-bg-color:             #fff;
  --md-primary-bg-color--light:      #fff;
  --md-accent-fg-color:              #818cf8;
  --md-code-bg-color:                #111;
  --md-code-fg-color:                #d4d4d4;
  --md-typeset-color:                #b0b0b0;
  --md-typeset-a-color:              #a5b4fc;
  --md-admonition-bg-color:          #111;
  --md-footer-bg-color:              #000;
  --md-footer-bg-color--dark:        #000;
}

/* ── Light palette ─────────────────────────────────── */
[data-md-color-scheme="default"] {
  --md-default-bg-color:             #fff;
  --md-default-bg-color--light:      #f9f9fb;
  --md-default-bg-color--lighter:    #f3f4f6;
  --md-default-bg-color--lightest:   #e5e7eb;
  --md-default-fg-color:             #1f2937;
  --md-default-fg-color--light:      #6b7280;
  --md-default-fg-color--lighter:    #9ca3af;
  --md-default-fg-color--lightest:   #e5e7eb;
  --md-primary-fg-color:             #4f46e5;
  --md-primary-fg-color--light:      #6366f1;
  --md-primary-fg-color--dark:       #4338ca;
  --md-primary-bg-color:             #fff;
  --md-primary-bg-color--light:      #fff;
  --md-accent-fg-color:              #4f46e5;
  --md-code-bg-color:                #f3f4f6;
  --md-code-fg-color:                #1f2937;
  --md-typeset-color:                #1f2937;
  --md-typeset-a-color:              #4f46e5;
  --md-admonition-bg-color:          #f9f9fb;
  --md-footer-bg-color:              #f9f9fb;
  --md-footer-bg-color--dark:        #f3f4f6;
  --md-footer-fg-color:              #4b5563;
  --md-footer-fg-color--light:       #6b7280;
}

/* ── Typography ─────────────────────────────────── */
html {
  font-size: 16px;
}

body {
  font-size: 0.625rem;
}

.md-typeset {
  font-size: .9375rem;
  line-height: 1.7;
}

.md-typeset h1 {
  font-size: 2rem;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin-bottom: .5rem;
}

.md-typeset h2 {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.3;
  margin-top: 3rem;
  margin-bottom: 1rem;
  border-bottom: none;
}

.md-typeset h3 {
  font-size: 1rem;
  font-weight: 500;
  margin-top: 1.5rem;
}

/* ═══════════════════════════════════════════════════════
   Layout
   ═══════════════════════════════════════════════════════ */

.md-header,
.md-tabs {
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  box-shadow: none;
}



.md-tabs__link {
  font-size: .875rem;
}

.md-main__inner {
  margin-top: 0;
  padding-top: 2rem;
}

.md-footer {
  border-top: 1px solid var(--md-default-fg-color--lightest);
}

.md-content a:not(.md-button):not(.md-logo):not(.md-nav__link):not(.md-tabs__link) {
  color: var(--md-accent-fg-color);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, color .25s ease;
}

.md-content a:not(.md-button):not(.md-logo):not(.md-nav__link):not(.md-tabs__link):hover {
  color: var(--md-accent-fg-color);
  border-bottom-color: var(--md-accent-fg-color);
}

/* ═══════════════════════════════════════════════════════
   Sidebar
   ═══════════════════════════════════════════════════════ */

.md-nav {
  font-size: .8125rem;
}

.md-nav__link {
  border-radius: 4px;
}

.md-nav__link:hover {
  background: var(--md-default-fg-color--lightest);
}

.md-nav__title {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--md-default-fg-color--light);
}

/* ═══════════════════════════════════════════════════════
   Hero
   ═══════════════════════════════════════════════════════ */

.hero-subtitle {
  font-size: 1.05rem;
  max-width: 600px;
  line-height: 1.6;
  color: var(--md-default-fg-color--light);
  margin-bottom: .5rem;
}

.hero-actions {
  margin: 2rem 0 0;
}

.hero-actions .md-button {
  margin: 0 .5rem .5rem 0;
}

/* ═══════════════════════════════════════════════════════
   Impact stats
   ═══════════════════════════════════════════════════════ */

.impact {
  width: fit-content;
  margin: 0 auto 3rem;
  display: flex;
}

.impact-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 44px;
}

.impact-item:first-child {
  padding-left: 0;
}

.impact-item + .impact-item {
  border-left: 1px solid var(--md-default-fg-color--lightest);
}

.impact-number {
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--md-default-fg-color);
}

.impact-label {
  font-size: .75rem;
  letter-spacing: .1em;
  color: var(--md-default-fg-color--light);
  text-transform: lowercase;
}

.impact-label::before { content: "( "; }
.impact-label::after  { content: " )"; }

@media (max-width: 768px) {
  .impact-item { padding: 4px 24px; }
  .impact-number { font-size: 1.75rem; }
  .impact-label  { font-size: .65rem; }
}

/* ═══════════════════════════════════════════════════════
   Cards
   ═══════════════════════════════════════════════════════ */

.grid.cards {
  gap: .75rem;
}

.grid.cards ul {
  display: contents;
  list-style: none;
  margin: 0;
  padding: 0;
}

.md-typeset .grid.cards > ul > li {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 12px;
  padding: 1.35rem 1.5rem;
  background: var(--md-default-bg-color--light);
  transition: border-color .3s, background .3s;
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--md-default-fg-color--lighter);
}

.grid.cards strong {
  font-weight: 500;
}

.grid.cards p {
  color: var(--md-default-fg-color--light);
  font-size: .85rem;
  line-height: 1.6;
  margin: .35rem 0;
}

.grid.cards a {
  color: var(--md-accent-fg-color);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, color .25s ease;
  font-size: .8125rem;
}

.grid.cards a:hover {
  color: var(--md-accent-fg-color);
  border-bottom-color: var(--md-accent-fg-color);
}

/* ═══════════════════════════════════════════════════════
   Tags
   ═══════════════════════════════════════════════════════ */

.tag {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  height: 24px;
  padding: 0 12px;
  margin-right: .5rem;
  background: transparent;
  border: 1px solid var(--md-default-fg-color);
  border-radius: 12px;
  font-size: .6875rem;
  letter-spacing: .04em;
  color: var(--md-default-fg-color);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════
   Buttons
   ═══════════════════════════════════════════════════════ */

.md-typeset .md-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 22px;
  font-size: .875rem;
  letter-spacing: .04em;
  padding: 9px 20px;
  border: 1px solid transparent;
  transition: background .3s, border-color .3s, color .3s;
}

/* Primary: filled → outline on hover */
.md-typeset .md-button--primary {
  background: var(--md-primary-fg-color);
  border-color: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color) !important;
}

.md-typeset .md-button--primary:hover {
  background: transparent;
  color: var(--md-primary-fg-color) !important;
}

/* Outline: outlined → filled on hover */
.md-typeset .md-button:not(.md-button--primary) {
  background: transparent;
  border-color: var(--md-primary-fg-color);
  color: var(--md-primary-fg-color) !important;
}

.md-typeset .md-button:not(.md-button--primary):hover {
  background: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color) !important;
}

/* ═══════════════════════════════════════════════════════
   Code
   ═══════════════════════════════════════════════════════ */

.md-typeset code {
  font-size: .85em;
  border-radius: 3px;
  padding: .1em .3em;
}

.md-typeset pre > code {
  border-radius: 6px;
  font-size: .8125rem;
  line-height: 1.65;
}

.md-typeset code,
.md-typeset pre > code {
  border: 1px solid var(--md-default-fg-color--lightest);
}

/* ═══════════════════════════════════════════════════════
   Tables
   ═══════════════════════════════════════════════════════ */

.md-typeset__table {
  display: block !important;
  width: 100%;
}

.md-typeset table {
  border-radius: 6px;
  overflow: hidden;
  font-size: .8125rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  display: table !important;
  width: 100% !important;
}

.md-typeset table th {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .6rem .9rem;
  background: var(--md-default-bg-color--light);
  color: var(--md-default-fg-color--light);
}

.md-typeset table td {
  padding: .5rem .9rem;
  border-top: 1px solid var(--md-default-fg-color--lightest);
}

/* ═══════════════════════════════════════════════════════
   Admonitions
   ═══════════════════════════════════════════════════════ */

.md-typeset .admonition {
  border-radius: 6px;
  border: 1px solid var(--md-default-fg-color--lightest);
  font-size: .85rem;
}

.md-typeset .admonition.note    { border-left: 2px solid var(--md-primary-fg-color); }
.md-typeset .admonition.tip,
.md-typeset .admonition.success { border-left: 2px solid #22c55e; }
.md-typeset .admonition.warning { border-left: 2px solid #f59e0b; }

/* ═══════════════════════════════════════════════════════
   Search
   ═══════════════════════════════════════════════════════ */

.md-search__input {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 9999px !important;
  font-size: .8125rem;
}

.md-search__input::placeholder {
  color: var(--md-default-fg-color--lighter) !important;
}

/* ═══════════════════════════════════════════════════════
   Misc
   ═══════════════════════════════════════════════════════ */

.md-typeset hr {
  height: 1px;
  border: none;
  background: var(--md-default-fg-color--lightest);
  margin: 3rem 0;
}

.md-header__title {
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .md-typeset h1 { font-size: 1.75rem; }
  .hero-subtitle  { font-size: .9rem; }
}

/* ═══════════════════════════════════════════════════════
   Reveal animations
   ═══════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
  html.js .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .7s ease, transform .7s ease !important;
    transition-delay: var(--reveal-delay, 0s);
  }

  html.js .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}