:root {
  --bg: #0a0a0f;
  --bg-elevated: #131319;
  --bg-elevated-2: #1c1c26;
  --border: #26262f;
  --text: #e9e9f2;
  --text-dim: #9898ab;
  --text-dimmer: #6d6d80;
  --accent: #a78bfa;
  --accent-light: #c4b5fd;
  --accent-dim: rgba(167, 139, 250, 0.14);
  --radius: 10px;
  --max-width: 1120px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: #3a3a4a;
  border-radius: 8px;
  border: 2px solid var(--bg);
}

::-webkit-scrollbar-thumb:hover {
  background: #4a4a5a;
}

::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Nav ---------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 10, 15, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.site-nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

/* Wordmark IS the logo - no separate icon box next to it, "traube" solid + ".dev" in the
   accent gradient (via .accent-text, same treatment the hero heading's highlighted word uses)
   is what carries the brand, not an interchangeable pictogram. */
.brand {
  display: flex;
  align-items: center;
  font-weight: 800;
  font-size: 23px;
  text-decoration: none;
  letter-spacing: -0.03em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-link {
  padding: 8px 14px;
  border-radius: 7px;
  text-decoration: none;
  color: var(--text-dim);
  font-size: 14.5px;
  font-weight: 500;
  transition: color 0.15s, background 0.15s;
}

.nav-link:hover {
  color: var(--text);
  background: var(--bg-elevated-2);
}

.nav-link.active {
  color: var(--text);
  background: var(--bg-elevated-2);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon-link {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}

.icon-link:hover {
  color: var(--text);
  background: var(--bg-elevated-2);
}

.icon-link svg {
  width: 18px;
  height: 18px;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 8px;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.12s, background 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  /* Its own deeper purple pair, deliberately NOT --accent/--accent-light - those went pastel/light for the
     wordmark, which is exactly what made white text unreadable here. Buttons need a fill dark enough for
     white text to stay legible, so they get their own darker stops instead of fighting over one set of
     variables that has to look right in two very different contexts (text-as-gradient vs. solid fill). */
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: #fff;
}

.btn-primary:hover {
  filter: brightness(1.08);
}

.btn-secondary {
  background: var(--bg-elevated-2);
  border-color: var(--border);
  color: var(--text);
}

.btn-secondary:hover {
  border-color: #3a3a48;
}

/* Discord's own solid blurple as a big filled block clashed against the site's own pastel-purple palette -
   different hue family, same visual weight as the primary CTA, fighting for attention. Kept as an outline
   instead: same dark surface as every other secondary control, Discord's blurple only shows up as the
   icon/text color (a recognizable accent, not a competing block of color). */
.btn-discord {
  background: var(--bg-elevated-2);
  border-color: var(--border);
  color: #7983f5;
}

.btn-discord:hover {
  border-color: #7983f5;
  color: #97a0ff;
}

.btn-block {
  width: 100%;
  justify-content: center;
}

/* ---------- Hero ---------- */

.hero {
  padding: 88px 0 96px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}

.hero-copy h1 {
  font-size: clamp(34px, 4.2vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}

/* padding-left/margin-left cancel out visually - the padding just gives the gradient's clip
   box a sliver of extra room on the left so glyphs with overshoot there (like "j"'s hook)
   don't get their edge cut off by background-clip: text. */
.accent-text {
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding-left: 0.04em;
  margin-left: -0.04em;
}

/* One continuous gradient across the whole word - starts near-white, eases into the pastel accent by the end,
   instead of a hard two-color split between a plain-colored first part and a gradient-colored second part. */
.wordmark {
  background: linear-gradient(90deg, var(--accent-light), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-copy p {
  max-width: 480px;
  margin: 0 0 32px;
  color: var(--text-dim);
  font-size: 17px;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-visual {
  display: flex;
  justify-content: center;
}

.hero-visual svg {
  width: 100%;
  max-width: 440px;
  height: auto;
  display: block;
}

/* ---------- Sections ---------- */

section {
  padding: 64px 0;
}

.section-head {
  margin-bottom: 28px;
}

.section-head h2 {
  font-size: 30px;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}

.section-head p {
  color: var(--text-dim);
  margin: 0;
  font-size: 15.5px;
}

/* ---------- About / FAQ (home) ---------- */

.about-text p {
  max-width: 760px;
  color: var(--text-dim);
  font-size: 16px;
  margin: 0 0 16px;
}

.about-text p:last-child {
  margin-bottom: 0;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px 40px;
}

.faq-grid h3 {
  font-size: 16px;
  margin: 0 0 8px;
}

.faq-grid p {
  color: var(--text-dim);
  font-size: 14.5px;
  margin: 0;
}

/* ---------- Cards / Grid ---------- */

.mods-status {
  color: var(--text-dim);
  font-size: 15px;
}

@keyframes ratelimitBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ratelimitBannerIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.ratelimit-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: ratelimitBackdropIn 0.2s ease-out;
}

.ratelimit-banner {
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 100%;
  width: 480px;
  padding: 28px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(167, 139, 250, 0.15);
  animation: ratelimitBannerIn 0.25s ease-out;
}

.ratelimit-banner-text {
  font-size: 14.5px;
  color: var(--text-dim);
}

.ratelimit-banner-text strong {
  display: block;
  color: var(--text);
  font-size: 17.5px;
  margin-bottom: 6px;
}

.ratelimit-banner-note {
  display: block;
  margin-top: 10px;
  color: var(--text-dimmer);
  font-size: 12.5px;
}

.ratelimit-banner-actions {
  display: flex;
  gap: 10px;
  width: 100%;
}

.ratelimit-banner-actions .btn {
  flex: 1;
  justify-content: center;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 380px));
  gap: 20px;
}

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.card:hover {
  border-color: #3a3a4a;
}

a.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.mod-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}

.mod-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.mod-card-top-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.mod-view-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 9px;
  border-radius: 8px;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: filter 0.15s;
}

.mod-card:hover .mod-view-badge {
  filter: brightness(1.08);
}

.mod-view-badge svg {
  width: 17px;
  height: 17px;
}

/* Gradient + dark monogram - same treatment as favicon.svg, so mod icons read as
   part of one icon system instead of a generic placeholder glyph. */
.mod-icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  color: #1c1030;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 800;
  flex-shrink: 0;
}

.mod-name {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
}

.mod-tagline {
  color: var(--text-dim);
  font-size: 13.5px;
  margin: 2px 0 0;
}

.mod-desc {
  color: var(--text-dim);
  font-size: 14.5px;
  margin: 0;
}

.mod-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-mono);
}

.mod-meta .badge:first-child {
  background: var(--accent-dim);
  border-color: rgba(167, 139, 250, 0.3);
  color: var(--accent-light);
}

.badge-link {
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}

.badge-link:hover {
  border-color: var(--accent);
  color: var(--accent-light);
}

.mod-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

/* ---------- Page header (Download/Docs) ---------- */

.page-header {
  padding: 40px 0 32px;
  border-bottom: 1px solid var(--border);
}

.page-header h1 {
  font-size: 28px;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.page-header p {
  color: var(--text-dim);
  max-width: 560px;
  margin: 0;
  font-size: 15.5px;
}

/* ---------- Mod page ---------- */

.mod-page-header {
  text-align: left;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 20px;
}

.back-link:hover {
  color: var(--text);
}

.back-link svg {
  width: 15px;
  height: 15px;
}

.mod-page-top {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}

.mod-icon-lg {
  width: 64px;
  height: 64px;
  font-size: 28px;
  border-radius: 14px;
}

.mod-page-header h1 {
  font-size: 30px;
  margin: 0 0 4px;
}

.mod-page-header p {
  max-width: none;
  margin: 0;
  text-align: left;
}

.mod-page-header .mod-meta {
  margin-bottom: 24px;
}

.mod-page-header .mod-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.mod-page-content {
  max-width: 720px;
  padding: 48px 24px 96px;
}

.mod-page-content h2 {
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 40px 0 14px;
}

.mod-page-content h2:first-child {
  margin-top: 0;
}

.mod-page-content p,
.mod-page-content ul {
  color: var(--text-dim);
  font-size: 15px;
  margin: 0 0 16px;
}

.mod-page-content ul {
  padding-left: 22px;
}

.mod-page-content li {
  margin-bottom: 8px;
}

.release-entry {
  border-top: 1px solid var(--border);
  padding: 20px 0;
}

.release-entry:first-child {
  border-top: none;
  padding-top: 0;
}

.release-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.release-tag {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--accent-light);
}

.release-date {
  color: var(--text-dimmer);
  font-size: 13px;
  margin-left: auto;
}

.release-entry h2,
.release-entry h3 {
  font-size: 16px;
  margin: 16px 0 8px;
}

/* ---------- Install walkthrough ---------- */

.walkthrough {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  overflow: hidden;
  margin: 0 0 20px;
}

.walkthrough-illustration {
  padding: 28px 24px 4px;
  display: flex;
  justify-content: center;
}

.walkthrough-illustration img {
  width: 100%;
  max-width: 460px;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
  display: block;
}

.walkthrough-illustration[hidden] {
  display: none;
}

.walkthrough-body {
  padding: 8px 28px 28px;
  text-align: center;
}

.walkthrough-step-label {
  color: var(--text-dimmer);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 8px;
}

.walkthrough-instruction {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 20px;
}

.walkthrough-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.walkthrough-dots {
  display: flex;
  gap: 6px;
}

.walkthrough-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}

.walkthrough-dot.active {
  background: var(--accent);
  transform: scale(1.3);
}

.walkthrough-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-elevated-2);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, opacity 0.15s;
}

.walkthrough-btn:hover {
  border-color: #3a3a4a;
}

.walkthrough-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.walkthrough-btn svg {
  width: 15px;
  height: 15px;
}

/* ---------- Docs layout ---------- */

.docs-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  padding: 48px 0 96px;
  align-items: start;
}

.docs-nav {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.docs-nav-label {
  color: var(--text-dimmer);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 18px 0 8px;
}

.docs-nav-label:first-child {
  margin-top: 0;
}

.docs-nav a {
  position: relative;
  padding: 7px 10px 7px 14px;
  border-radius: 7px;
  text-decoration: none;
  color: var(--text-dim);
  font-size: 14px;
  transition: color 0.15s, background 0.15s;
}

.docs-nav a:hover {
  color: var(--text);
  background: var(--bg-elevated);
}

.docs-nav a.active {
  color: var(--text);
  background: var(--bg-elevated);
  font-weight: 600;
}

.docs-nav a.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.docs-content h1 {
  font-size: 29px;
  letter-spacing: -0.01em;
  margin: 56px 0 20px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  scroll-margin-top: 84px;
}

.docs-content h1:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.docs-content h2 {
  font-size: 24px;
  letter-spacing: -0.01em;
  margin: 48px 0 16px;
  padding-top: 8px;
  scroll-margin-top: 84px;
}

.docs-content h2:first-child {
  margin-top: 0;
}

.docs-content h3 {
  font-size: 17px;
  margin: 28px 0 10px;
  scroll-margin-top: 84px;
}

.docs-content p {
  color: var(--text-dim);
  font-size: 15px;
  margin: 0 0 16px;
}

.docs-content ol,
.docs-content ul {
  color: var(--text-dim);
  font-size: 15px;
  padding-left: 22px;
  margin: 0 0 16px;
}

.docs-content li {
  margin-bottom: 8px;
}

.docs-content li strong {
  color: var(--text);
}

.docs-content a,
.page-header p a,
.callout a,
.about-text a,
.faq-grid a {
  color: var(--accent-light);
  text-decoration: underline;
  text-decoration-color: rgba(168, 85, 247, 0.35);
  text-underline-offset: 2px;
}

code {
  font-family: var(--font-mono);
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 13px;
  color: #e0b3ff;
}

pre {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  overflow-x: auto;
  margin: 0 0 20px;
}

pre code {
  background: none;
  border: none;
  padding: 0;
  color: var(--text);
  font-size: 13.5px;
}

.callout {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: var(--bg-elevated);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 14px 18px;
  margin: 0 0 20px;
  font-size: 14.5px;
  color: var(--text-dim);
}

.callout strong {
  color: var(--text);
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 32px 0 20px;
  margin-top: 28px;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 20px;
}

.footer-brand p {
  color: var(--text-dim);
  font-size: 14px;
  max-width: 280px;
  margin: 8px 0 0;
}

.footer-cols {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.footer-col h4 {
  font-size: 13px;
  margin: 0 0 8px;
  color: var(--text-dimmer);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer-col a {
  display: block;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 14px;
  padding: 3px 0;
}

.footer-col a:hover {
  color: var(--text);
}

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--text-dimmer);
  font-size: 13px;
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-copy h1,
  .hero-copy p {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-actions {
    justify-content: center;
  }
  .hero-visual {
    order: -1;
  }
  .hero-visual svg {
    max-width: 320px;
  }
  .docs-layout {
    grid-template-columns: 1fr;
  }
  .docs-nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
  }
  .docs-nav-label {
    display: none;
  }
}

@media (max-width: 720px) {
  .nav-links {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: stretch;
    padding: 10px;
    gap: 2px;
    display: none;
  }
  .nav-links.open {
    display: flex;
  }
  .nav-link {
    padding: 12px 14px;
  }
  .nav-toggle {
    display: block;
  }
  .hero {
    padding: 64px 0 48px;
  }
  .footer-top {
    flex-direction: column;
  }
}