/* vlx brand theme for mkdocs-material.
 *
 * Palette: violet #8B5CF6 (brand), cyan #22D3EE, green #30D475 (READ),
 * amber #F5B83D (WRITE), red #F2545B (DANGER), ink #0F1117.
 */
:root {
  --vlx-violet: #8b5cf6;
  --vlx-violet-soft: #a78bfa;
  --vlx-violet-deep: #6d28d9;
  --vlx-cyan: #22d3ee;
  --vlx-green: #30d475;
  --vlx-amber: #f5b83d;
  --vlx-red: #f2545b;
  --vlx-dark: #1a1622;
  --vlx-ink: #0f1117;
  --vlx-wire: linear-gradient(90deg, #c4b5fd, #8b5cf6 55%, #22d3ee);
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color: #1a1622;
  --md-primary-fg-color--light: #2b2437;
  --md-primary-fg-color--dark: #120f18;
  --md-primary-bg-color: #f4f1f7;
  --md-accent-fg-color: #6d28d9;
  --md-accent-fg-color--transparent: #8b5cf61a;
  --md-typeset-a-color: #6d28d9;
  --md-code-bg-color: #f6f4f9;
  --md-code-hl-color: #8b5cf633;
  --vlx-card-bg: #ffffff;
  --vlx-card-border: #e6e1ec;
  --vlx-surface: #f8f6fb;
}

[data-md-color-scheme="slate"] {
  --md-hue: 265;
  --md-primary-fg-color: #1a1622;
  --md-primary-fg-color--light: #2b2437;
  --md-primary-fg-color--dark: #120f18;
  --md-primary-bg-color: #f4f1f7;
  --md-accent-fg-color: #a78bfa;
  --md-accent-fg-color--transparent: #a78bfa1f;
  --md-default-bg-color: #0f1117;
  --md-default-fg-color--light: #b9b4c4;
  --md-typeset-color: #e3dfe9;
  --md-typeset-a-color: #a78bfa;
  --md-code-bg-color: #171a23;
  --md-code-fg-color: #e3dfe9;
  --md-code-hl-color: #8b5cf629;
  --md-footer-bg-color: #0b0c11;
  --md-footer-bg-color--dark: #08090d;
  --vlx-card-bg: #151821;
  --vlx-card-border: #262a36;
  --vlx-surface: #13161e;
}

/* Header with a gradient wire underneath */
.md-header { background-color: var(--vlx-dark); box-shadow: none; }
.md-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--vlx-wire); opacity: .9;
}
.md-tabs { background-color: var(--vlx-dark); }
.md-tabs__link--active, .md-tabs__link:hover { color: var(--vlx-violet-soft); opacity: 1; }
.md-header__button.md-logo img, .md-nav__button.md-logo img {
  filter: invert(96%) sepia(4%) saturate(400%) hue-rotate(220deg) brightness(102%);
  height: 1.6rem; width: auto;
}
.md-header__topic:first-child { font-family: var(--md-code-font-family); font-weight: 700; }

/* Typography */
.md-typeset h1 { font-weight: 700; letter-spacing: -.02em; }
.md-typeset h2 { font-weight: 650; letter-spacing: -.01em; }
.md-typeset code { border-radius: .25rem; }
.md-typeset pre > code, .md-typeset .highlight { border-radius: .45rem; }
[data-md-color-scheme="slate"] .md-typeset pre > code { border: 1px solid #ffffff0d; }
.md-typeset table:not([class]) { border-radius: .45rem; border: 1px solid var(--vlx-card-border); font-size: .72rem; }
.md-typeset table:not([class]) th { background: var(--vlx-surface); font-weight: 650; }
.md-typeset kbd { font-size: .72em; }

/* Images: rounded, with depth */
.md-typeset img.vlx-shot { border-radius: .8rem; box-shadow: 0 18px 50px -24px #00000090; }
.md-typeset img.vlx-diagram { border-radius: .8rem; border: 1px solid #ffffff14; }

/* Buttons */
.md-typeset .md-button { border-radius: 999px; font-weight: 600; padding: .55em 1.5em; transition: transform 120ms ease, box-shadow 120ms ease; }
.md-typeset .md-button--primary { background: var(--vlx-violet); border-color: var(--vlx-violet); color: #fff; }
.md-typeset .md-button--primary:hover { background: var(--vlx-violet-soft); border-color: var(--vlx-violet-soft); color: #0f1117; transform: translateY(-1px); box-shadow: 0 6px 20px #8b5cf650; }

/* ---------------------------------------------------------------- Home */
/* The home page hides its title, edit button and the default h1 spacing. */
.md-content:has(.vlx-home) .md-content__button { display: none; }
.md-main:has(.vlx-home) { overflow-x: clip; } /* the hero glow bleeds past the grid */
.md-main:has(.vlx-home) .md-content__inner { margin-top: 0; padding-top: 0; }
.md-typeset .vlx-home .md-button:not(.md-button--primary) { color: var(--vlx-strong); border-color: var(--vlx-card-border); }
.md-typeset .vlx-home .md-button:not(.md-button--primary):hover { border-color: var(--md-accent-fg-color); color: var(--md-accent-fg-color); }

[data-md-color-scheme="default"] { --vlx-glow: #8b5cf626; --vlx-glow-2: #22d3ee1f; --vlx-muted: #5b5566; --vlx-strong: #16121d; }
[data-md-color-scheme="slate"]   { --vlx-glow: #8b5cf640; --vlx-glow-2: #22d3ee26; --vlx-muted: #a39db0; --vlx-strong: #ffffff; }

.vlx-home section { margin: 0 0 4.5rem; }
.md-typeset .vlx-eyebrow, .md-typeset .vlx-section__eyebrow {
  margin: 0 0 .6rem; font: 700 .62rem/1 var(--md-code-font-family);
  letter-spacing: .14em; text-transform: uppercase; color: var(--md-accent-fg-color);
}
.md-typeset .vlx-section__title { margin: 0 0 .7rem; font-size: 1.45rem; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; color: var(--vlx-strong); }
.md-typeset .vlx-section__lead { margin: 0 0 1.2rem; max-width: 38rem; font-size: .86rem; line-height: 1.65; color: var(--vlx-muted); }

/* Hero: text and a real screenshot, on a soft violet and cyan glow. */
.vlx-hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.2rem;
  align-items: center; padding: 3rem 0 1rem;
}
.vlx-hero::before {
  content: ""; position: absolute; inset: -2rem -40vw 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38rem 22rem at 78% 40%, var(--vlx-glow), transparent 70%),
    radial-gradient(28rem 18rem at 92% 85%, var(--vlx-glow-2), transparent 70%);
}
@media screen and (min-width: 60em) {
  .vlx-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2.6rem; padding-top: 3.6rem; }
}
.md-typeset .vlx-hero__title {
  margin: 0 0 1rem; font-size: 2.15rem; line-height: 1.08; font-weight: 800;
  letter-spacing: -.035em; color: var(--vlx-strong);
}
.md-typeset .vlx-hero__title span {
  background: linear-gradient(90deg, var(--vlx-violet), var(--vlx-cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media screen and (min-width: 76em) { .md-typeset .vlx-hero__title { font-size: 2.5rem; } }
.md-typeset .vlx-hero__lead { margin: 0 0 1.4rem; font-size: .9rem; line-height: 1.65; color: var(--vlx-muted); max-width: 32rem; }
.md-typeset .vlx-hero__lead strong { color: var(--vlx-strong); }
.md-typeset .vlx-hero__actions { display: flex; gap: .6rem; flex-wrap: wrap; margin: 0 0 1.4rem; }
.md-typeset .vlx-hero__note { margin: .7rem 0 0; font-size: .68rem; color: var(--vlx-muted); }
.md-typeset .vlx-hero__note code { font-size: .95em; }
.vlx-hero__shot img {
  display: block; width: 100%; height: auto; border-radius: .9rem;
  box-shadow: 0 30px 80px -30px #0b061acc, 0 0 0 1px #ffffff10;
}

/* The install commands, as a small terminal. */
.md-typeset .vlx-install {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem .6rem; max-width: 32rem;
  padding: .75rem 1rem; border-radius: .6rem; background: #0f1117; border: 1px solid #ffffff1a;
  font: .72rem/1.5 var(--md-code-font-family); color: #e3dfe9;
}
.md-typeset .vlx-install code { padding: 0; background: none; color: inherit; font-size: inherit; white-space: pre; overflow-x: auto; scrollbar-width: none; }
.md-typeset .vlx-install__prompt { color: var(--vlx-violet-soft); font-weight: 700; user-select: none; }

/* The annotated command line. */
.md-typeset .vlx-grammar {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem .7rem;
  padding: 1.2rem 1.4rem 1rem; margin: 0 0 1.4rem; border-radius: .8rem;
  background: #0f1117; border: 1px solid #ffffff14; box-shadow: 0 18px 50px -30px #000000a0;
  font-family: var(--md-code-font-family);
}
.md-typeset .vlx-grammar__prompt, .md-typeset .vlx-grammar__enter { padding-top: .1rem; font-size: 1rem; font-weight: 700; color: var(--vlx-violet-soft); }
.md-typeset .vlx-grammar__enter { margin-left: auto; color: #6b6577; }
.md-typeset .vlx-grammar__part { display: flex; flex-direction: column; gap: .35rem; }
.md-typeset .vlx-grammar__part code {
  padding: .1rem 0 .35rem; background: none; font-size: 1rem; font-weight: 600; color: #f4f1f7;
  border-bottom: 2px solid currentColor; border-radius: 0;
}
@media screen and (max-width: 44.9em) {
  .md-typeset .vlx-grammar { padding: 1rem 1.1rem .9rem; gap: .5rem .6rem; }
  .md-typeset .vlx-grammar__part code { font-size: .82rem; }
  .md-typeset .vlx-grammar__enter { display: none; }
}
.md-typeset .vlx-grammar__part small { font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: #8a8496; }
.md-typeset .vlx-grammar__part--svc code { color: #c4b5fd; }
.md-typeset .vlx-grammar__part--method code { color: #f4f1f7; }
.md-typeset .vlx-grammar__part--arg code { color: var(--vlx-cyan); }
.md-typeset .vlx-line ul.vlx-line__notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .8rem 1.6rem; margin: 0; padding: 0; list-style: none; }
.md-typeset .vlx-line ul.vlx-line__notes li { margin: 0; padding-left: .9rem; border-left: 2px solid var(--vlx-card-border); font-size: .76rem; line-height: 1.6; color: var(--vlx-muted); }
.md-typeset .vlx-line__notes strong { color: var(--vlx-strong); }

/* The tour: tabs of screenshots. */
.md-typeset .vlx-tour .tabbed-labels { justify-content: center; }
.md-typeset .vlx-tour .tabbed-labels > label { font-size: .78rem; padding: .9em 1.2em .7em; }
.md-typeset .vlx-tour .tabbed-block > p:last-child { max-width: 38rem; margin: 1rem auto 0; text-align: center; font-size: .78rem; color: var(--vlx-muted); }

/* Features: a 3 × 2 grid with hairlines between cells. */
.md-typeset .vlx-features {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1px;
  background: var(--vlx-card-border); border: 1px solid var(--vlx-card-border); border-radius: .9rem; overflow: hidden;
}
@media screen and (min-width: 60em) { .md-typeset .vlx-features { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.md-typeset .vlx-feature { padding: 1.4rem 1.4rem 1.5rem; background: var(--vlx-card-bg); }
.md-typeset .vlx-feature h3 { margin: .7rem 0 .4rem; font-size: .86rem; font-weight: 700; color: var(--vlx-strong); }
.md-typeset .vlx-feature p { margin: 0; font-size: .74rem; line-height: 1.6; color: var(--vlx-muted); }
.md-typeset .vlx-feature__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
  border-radius: .55rem; background: var(--md-accent-fg-color--transparent); color: var(--md-accent-fg-color);
}
.md-typeset .vlx-feature__icon svg { width: 1.1rem; height: 1.1rem; }

/* Safety: the three classes as tiles. */
.md-typeset .vlx-safety, .md-typeset .vlx-script { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem 2.8rem; align-items: center; }
@media screen and (min-width: 60em) {
  .md-typeset .vlx-safety { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .md-typeset .vlx-script { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
}
.md-typeset .vlx-safety__classes { display: grid; gap: .7rem; }
.md-typeset .vlx-class {
  display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: 1rem; align-items: center;
  padding: .9rem 1.1rem; border-radius: .7rem; background: var(--vlx-card-bg);
  border: 1px solid var(--vlx-card-border); border-left: 3px solid var(--vlx-c);
}
.md-typeset .vlx-class p { margin: 0; font-size: .74rem; line-height: 1.55; color: var(--vlx-muted); }
.md-typeset .vlx-class p strong { color: var(--vlx-strong); }
.md-typeset .vlx-class__tag { justify-self: start; padding: .15rem .5rem; border-radius: .3rem; font: 700 .68rem/1.4 var(--md-code-font-family); color: #0f1117; background: var(--vlx-c); }
.md-typeset .vlx-class--read { --vlx-c: var(--vlx-green); }
.md-typeset .vlx-class--write { --vlx-c: var(--vlx-amber); }
.md-typeset .vlx-class--danger { --vlx-c: var(--vlx-red); }

/* Script it: the code block sits on the terminal colours in both themes. */
.md-typeset .vlx-script__code .highlight { margin: 0; }
.md-typeset .vlx-script__code pre > code { font-size: .72rem; line-height: 1.7; padding: 1.1rem 1.3rem; }

.md-typeset .vlx-how .vlx-diagram { margin: .4rem 0 1.2rem; }
.md-typeset .vlx-how > p:last-child { max-width: 44rem; font-size: .78rem; color: var(--vlx-muted); }

/* Closing call to action. */
.md-typeset .vlx-cta {
  position: relative; overflow: hidden; padding: 2.6rem 2rem; text-align: center; border-radius: 1rem;
  background: radial-gradient(30rem 14rem at 50% 0%, #8b5cf640, transparent 75%), #0f1117; border: 1px solid #ffffff14;
}
.md-typeset .vlx-cta__title { margin: 0 0 .5rem; font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.md-typeset .vlx-cta__lead { margin: 0 auto 1.4rem; max-width: 30rem; font-size: .82rem; color: #b9b4c4; }
.md-typeset .vlx-cta .vlx-hero__actions { justify-content: center; margin: 0; }
.md-typeset .vlx-cta .md-button:not(.md-button--primary) { color: #f4f1f7; border-color: #ffffff40; }

/* Safety classes */
.vlx-read { color: var(--vlx-green); font-weight: 700; font-family: var(--md-code-font-family); }
.vlx-write { color: var(--vlx-amber); font-weight: 700; font-family: var(--md-code-font-family); }
.vlx-danger { color: var(--vlx-red); font-weight: 700; font-family: var(--md-code-font-family); }

/* Numbered steps in the QuickStart */
.md-typeset .vlx-step { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; margin-right: .5rem; border-radius: 50%; background: var(--vlx-violet); color: #fff; font-size: .8rem; font-weight: 700; vertical-align: .1rem; }
.md-typeset h1.vlx-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }