:root {
  --bg: #14151f;
  --bg-soft: #1b1d2a;
  --ink: #e7e9f5;
  --ink-soft: #9599b3;
  --card: #1b1d2a;
  --card-alt: #20222f;
  --code-bg: #10111a;
  --stroke: #33364a;
  --stroke-soft: #2a2c3c;
  --accent: #7ee787;
  --accent-ink: #0d1a10;
  --accent-2: #8be9fd;
  --accent-3: #bd93f9;
  --gold-stroke: #caa15c;
  --gold-ink: #e8c98a;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.35);
  --topbar-h: 82px;
}

/* This is a plain multi-page site (every nav is a full document load, no
   client-side router), so without this the topbar/logo and sidebar - which
   look identical from one page to the next - visibly flash on every click:
   the browser tears the whole page down and repaints it from scratch, even
   though nothing about that chrome actually changed. Opting in to (same-
   origin) cross-document view transitions, and giving the topbar/sidebar a
   stable view-transition-name below, tells supporting browsers those are
   the same element across the navigation, so they stay put instead of
   flashing while the rest of the page transitions underneath them.
   Unsupported browsers just ignore this and behave as before. */
@view-transition {
  navigation: auto;
}

.topbar {
  view-transition-name: site-topbar;
}

.docs-sidebar {
  view-transition-name: site-sidebar;
}

::view-transition-group(site-topbar),
::view-transition-group(site-sidebar) {
  animation: none;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: "JetBrains Mono", "SFMono-Regular", "Menlo", "Consolas", monospace;
  background: var(--bg);
  min-height: 100vh;
}

a, a:hover, a:visited, .panel a {
  color: var(--accent);
  text-decoration: none;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: radial-gradient(rgba(255, 255, 255, 0.5) 0.5px, transparent 0.5px);
  background-size: 4px 4px;
}

.layout {
  width: min(1400px, calc(100% - 2rem));
  margin: calc(var(--topbar-h) + 1.2rem) auto 2rem;
  position: relative;
}

.panel {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.docs-sidebar {
  position: fixed;
  top: calc(var(--topbar-h) + 1rem);
  left: max(1rem, calc(50% - 700px));
  width: 250px;
  height: calc(100vh - var(--topbar-h) - 2rem);
  overflow: auto;
  padding: 1rem;
  z-index: 10;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.docs-title {
  margin: 0 0 0.8rem;
  font-family: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 700;
}

.docs-sidebar > a,
.docs-sidebar > a:hover,
.docs-sidebar > a:visited {
  color: var(--accent);
}

.docs-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.docs-list a {
  display: block;
  text-decoration: none;
  color: var(--ink);
  background: var(--card-alt);
  border: 1px solid var(--stroke);
  border-radius: 8px;
  padding: 0.4rem 0.7rem;
  font-weight: 500;
  font-size: 0.85rem;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.docs-list a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.docs-list a.is-active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-ink) !important;
  font-weight: 700;
}

.docs-parent {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.docs-parent a {
  flex: 1;
  min-width: 0;
}

.docs-toggle {
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--card-alt);
  color: var(--ink-soft);
  border: 1px solid var(--stroke);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.72rem;
  line-height: 1;
  padding: 0;
  transition: transform 150ms ease, background 150ms ease, color 150ms ease;
}

.docs-toggle:hover {
  background: var(--stroke-soft);
  color: var(--accent-2);
}

.has-children.is-open > .docs-parent .docs-toggle {
  transform: rotate(90deg);
  color: var(--accent-2);
}

.docs-sublist {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0 0 0 1.5rem;
  display: grid;
  gap: 0.4rem;
  border-left: 1px dashed var(--stroke);
}

.docs-sublist a {
  font-size: 0.78rem;
  padding: 0.32rem 0.6rem;
  background: var(--bg-soft);
}

.docs-sublist a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.docs-sublist a.is-active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-ink) !important;
}

.container {
  margin-left: 266px;
}

.container.full-width {
  margin-left: 0;
}

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 30;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem max(1rem, calc(50% - 700px));
  background: #000;
  border-bottom: 1px solid var(--stroke);
  box-sizing: border-box;
}

.topbar-nav {
  /* Absolutely centered on the topbar's own box (which spans the full
     viewport width), not just "the middle grid column" - the brand-lockup
     and lang-switch columns are different widths on every page (and
     brand-lockup is sometimes empty, e.g. the homepage), so centering the
     nav via grid/flex alongside them drifts off true screen-center by
     however much those two columns differ. */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.2rem;
}

.topbar-nav a {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.topbar-nav a {
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: color 150ms ease;
}

.topbar-nav a:hover {
  color: var(--accent-2);
}

.topbar-nav a.is-active {
  color: var(--accent);
}

@media (max-width: 980px) {
  .topbar-nav {
    display: none;
  }

  .topbar {
    grid-template-columns: auto auto;
  }
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.brand-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: inherit;
  text-decoration: none;
}

.brand-logo {
  display: block;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  /* A background-image, not an <img>, on purpose: an <img> briefly renders
     its alt text in place of the picture on every full-page navigation
     (this is a plain multi-page site, so that happens on every click) -
     background images have no text fallback state to flash. */
  background-image: url('/assets/img/vtmate-logo-dark-150.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

@media (max-width: 620px) {
  .brand-logo {
    width: 42px;
    height: 42px;
  }
}

.brand-text {
  display: grid;
}

.brand-title {
  font-family: inherit;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  color: var(--accent);
}

.lang-switch {
  /* .topbar-nav is position:absolute (see its comment), so it no longer
     occupies a grid track - without this, auto-placement would slot
     lang-switch into the topbar's middle (1fr) column instead of its
     last one, right after brand-lockup (empty on pages that hide it). */
  grid-column: 3;
  display: flex;
  gap: 0.5rem;
}

.flag-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 38px;
  text-decoration: none;
  font-size: 1.35rem;
  background: var(--card-alt);
  border: 1px solid var(--stroke);
  border-radius: 8px;
  box-shadow: none;
  filter: grayscale(0.3);
  transition: border-color 150ms ease, filter 150ms ease;
}

.flag-link:hover {
  border-color: var(--accent-2);
  filter: grayscale(0);
}

.flag-link.is-active {
  background: var(--stroke-soft);
  border-color: var(--accent);
  filter: grayscale(0);
}

.page-panel,
section {
  padding: 1.8rem;
  animation: rise 500ms ease both;
}

.hero-banner {
  text-align: center;
  padding: 0;
  margin-bottom: 0.6rem;
  animation: rise 500ms ease both;
}

.hero-banner-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin-bottom: 1rem;
}

.hero-banner-logo {
  width: 84px;
  height: 84px;
  display: block;
}

.hero-banner-wordmark {
  color: var(--ink);
  font-size: clamp(2.2rem, 3vw + 1.4rem, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
}

.hero-banner-tagline {
  margin: 0 auto 1.5rem;
  color: var(--ink-soft);
  font-size: 2rem;
  line-height: 1.7;
}

.hero-banner-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  max-width: 955px;
  margin: 0 auto;
}

.hero-pill {
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--gold-stroke);
  border-radius: 999px;
  color: var(--gold-ink);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 620px) {
  .hero-pill {
    white-space: normal;
  }
}

.hero {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

.hero-intro,
.hero-actions {
  grid-column: 1 / -1;
}

.eyebrow {
  font-family: inherit;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-size: 0.78rem;
  font-weight: 700;
}

h1,
h2,
h3 {
  font-family: inherit;
  color: var(--ink);
}

h1,
h2 {
  margin: 0.35rem 0 0.8rem;
  line-height: 1.12;
  font-weight: 700;
}

h1 {
  font-size: clamp(1.8rem, 2.4vw + 0.8rem, 2.8rem);
}

h2 {
  font-size: clamp(1.3rem, 1vw + 1rem, 1.7rem);
}

.page-title {
  font-size: clamp(1.3rem, 1vw + 1rem, 1.7rem);
}

p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.65;
}

/* Baseline for every table on the site: a cell's content (e.g. a key badge
   next to a multi-line description) starts at the top of the row instead of
   centering, and every row gets a little vertical breathing room. Longhand
   padding-top/bottom on purpose - it only touches vertical spacing, so a
   page's own horizontal cell padding (or table-level width/spacing) is
   unaffected regardless of which one is declared first. */
table td,
table th {
  vertical-align: top;
  padding-top: 5px;
  padding-bottom: 5px;
}

pre {
  position: relative;
  line-height: 1.7;
}

.copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.25rem 0.65rem;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  background: var(--bg-soft);
  border: 1px solid var(--stroke);
  border-radius: 6px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 150ms ease, color 150ms ease, border-color 150ms ease;
}

pre:hover .copy-btn,
.copy-btn:focus-visible {
  opacity: 1;
}

.copy-btn:hover {
  color: var(--accent-2);
  border-color: var(--accent-2);
}

.copy-btn.is-copied {
  opacity: 1;
  color: var(--accent);
  border-color: var(--accent);
}

@media (max-width: 620px) {
  .copy-btn {
    opacity: 1;
  }
}

.download-grid {
  display: grid;
  gap: 0.85rem;
}

a.primary-dl {
  text-decoration: none;
  color: #000;
  border: 1px solid #ffd247;
  border-radius: 10px;
  margin: 25px 0;
  padding: 1rem 1.2rem;
  display: block;
  font-family: inherit;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  font-weight: 700;
  text-align: center;
  background: linear-gradient(180deg, #fff78e, #ffd247);
  box-shadow: 0 10px 26px rgba(255, 210, 71, 0.25);
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.primary-dl:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(255, 210, 71, 0.35);
  filter: saturate(1.1);
}

.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: stretch;
  margin-top: 1.2rem;
}

.hero-image {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

.hero-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.hero-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.hero-install-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  height: 100%;
  gap: 0.7rem;
  padding: 0;
  text-align: center;
}

.hero-install-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.hero-install-cta .primary-dl {
  color: #000;
}

.hero-install-cta .os-row {
  justify-content: center;
  margin: 0;
  gap: 1.2rem;
}

.hero-install-cta .os-row-label {
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 0.5rem;
}

.hero-install-cta .os-item:first-of-type {
  border-left: none;
  padding-left: 0;
}

.hero-install-card .primary-dl {
  display: inline-block;
  margin: 0;
  padding: 0.85rem 2.2rem;
  font-size: 1.15rem;
}

.tabs {
  margin: 0.9rem 0;
  border: 1px solid var(--stroke);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.tabs-nav {
  display: flex;
  background: var(--card-alt);
  border-bottom: 1px solid var(--stroke);
}

.tab-btn {
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.6rem 1.2rem;
  border: none;
  border-right: 1px solid var(--stroke);
  border-radius: 0;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.tab-btn:last-child {
  border-right: none;
}

.tab-btn:hover {
  color: var(--accent-2);
}

.tab-btn.is-active {
  background: var(--code-bg);
  color: var(--accent);
  box-shadow: inset 0 2px 0 0 var(--accent);
}

.tab-panel {
  background: var(--code-bg);
}

.tab-panel pre {
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.tab-panel-body {
  padding: 0.9rem 1rem;
}

.tab-panel-body p {
  margin: 0;
}

.tab-panel-body p + p {
  margin-top: 0.6rem;
}

.os-row-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.os-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 1.8rem;
  margin: 1.1rem 0 0.3rem;
  margin-bottom: 50px;
}

.os-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 1.8rem;
  transition: opacity 150ms ease, transform 150ms ease;
}

.os-item:first-child {
  padding-left: 0;
  border-left: none;
}

.os-item:not(:first-child) {
  border-left: 1px solid var(--stroke);
}

.os-item img {
  height: 28px;
  width: auto;
  display: block;
  opacity: 0.9;
}

.os-item span {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}

.os-item:hover {
  transform: translateY(-2px);
}

.os-item:hover img {
  opacity: 1;
}

.download-note {
  font-size: 0.88rem;
  color: var(--ink-soft);
  text-align: center;
}

.variant-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}

.card {
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 0.95rem 1rem;
  background: var(--card-alt);
  box-shadow: var(--shadow-sm);
}

.panel .card, .panel .doc-block {
  margin-bottom: 1rem;
}

.card-title {
  margin: 0 0 0.2rem;
  font-size: 1rem;
  color: var(--ink);
}

.card p {
  margin-top: 0.15rem;
}

.inline-code {
  background: var(--stroke-soft);
  color: var(--accent-2);
  font-family: inherit;
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  border: 1px solid var(--stroke);
}

code {
  color: var(--accent-2);
}

a code {
  color: inherit;
}

.install-code {
  display: block;
  margin: 0.75rem 0;
  padding: 0.8rem 0.95rem;
  background: var(--code-bg);
  color: var(--ink);
  border: 1px solid var(--stroke);
  border-radius: 10px;
  overflow: auto;
  box-shadow: var(--shadow-sm);
  font-family: inherit;
  font-size: 0.88rem;
}

.variant-link {
  text-decoration: none;
  color: var(--ink);
  background: var(--card-alt);
  border: 1px solid var(--stroke);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 500;
}

.variant-link:hover {
  border-color: var(--accent-2);
  color: var(--accent-2);
}

.doc-index {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 1rem;
  min-width: 0;
}

.doc-index-link,
.doc-index-link:hover,
.doc-index-link:visited {
  display: block;
  text-decoration: none;
  color: var(--ink);
  background: var(--card-alt);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  box-shadow: var(--shadow-sm);
  min-width: 0;
  transition: border-color 150ms ease, transform 150ms ease;
}

.doc-index-link:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.doc-index-link strong {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 0.15rem;
  color: var(--ink);
}

.doc-index-link > span {
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.doc-blocks {
  display: grid;
  gap: 1rem;
  margin-top: 1.2rem;
  min-width: 0;
}

.doc-block {
  background: var(--card-alt);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 1rem;
  box-shadow: var(--shadow-sm);
  min-width: 0;
  overflow: hidden;
}

.doc-block h3 {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  color: var(--ink);
}

.doc-block pre {
  max-width: 100%;
  padding: 0.9rem 1rem;
  background: var(--code-bg);
  color: var(--ink);
  border-radius: 10px;
  overflow: auto;
  box-shadow: none;
}

.doc-block code {
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--accent-2);
}

.doc-block a code {
  color: inherit;
}

.doc-block pre code {
  color: var(--ink);
}

.command-label {
  margin: 0.9rem 0 0.35rem;
  color: var(--ink-soft);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.doc-image {
  width: 100%;
  display: block;
  margin-top: 0.9rem;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: var(--card-alt);
  box-shadow: var(--shadow-sm);
}

/* Mode tags: the colored pill used both for the "Mode" column in the
   Showcase table and for the .page-title heading on each mode's own doc
   page - one color per mode, kept in sync between the two spots by hand. */
.tag-conversation {
  display: inline-block;
  background-color: rgb(0, 0, 205);
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  text-transform: uppercase;
}

.tag-debate {
  display: inline-block;
  background-color: #00cdcd;
  color: #000;
  padding: 5px;
  border-radius: 5px;
  text-transform: uppercase;
}

.tag-read {
  display: inline-block;
  background-color: #cdcdcd;
  color: #000;
  padding: 5px;
  border-radius: 5px;
  text-transform: uppercase;
}

.tag-background {
  display: inline-block;
  background-color: #000;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  text-transform: uppercase;
}

.tag-cli {
  display: inline-block;
  background-color: transparent;
  padding: 5px;
  border-radius: 5px;
  text-transform: uppercase;
}

.tag-ptt {
  display: inline-block;
  background-color: red;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  text-transform: uppercase;
}

.tag-live {
  display: inline-block;
  background-color: green;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  text-transform: uppercase;
}

.upcase {
  text-transform: uppercase;
}

.video-wrap {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  margin-top: 1rem;
  border: 1px solid var(--stroke);
}

.video-wrap iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
}

.features {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  gap: 0.75rem;
}

.features li {
  border: 1px solid var(--stroke);
  background: var(--card-alt);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  box-shadow: var(--shadow-sm);
}

.shots {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1rem;
}

figure {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--stroke);
  background: var(--card-alt);
  box-shadow: var(--shadow-sm);
}

figure img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

figcaption {
  padding: 0.8rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.demo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 1rem;
}

.demo-item {
  border: 1px solid var(--stroke);
  border-radius: 10px;
  background: var(--card-alt);
  box-shadow: var(--shadow-sm);
  padding: 0.5rem;
}

.demo-item-title {
  margin: 0 0 0.4rem;
  font-size: 0.9rem;
  line-height: 1.2;
  color: var(--ink);
}

.demo-thumb {
  width: 100%;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
  background: var(--card-alt);
  overflow: hidden;
}

.demo-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.modal,
.video-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal {
  background: rgba(6, 7, 12, 0.7);
  z-index: 40;
}

.video-modal {
  background: rgba(4, 5, 9, 0.92);
  z-index: 60;
}

.modal.open,
.video-modal.open {
  display: flex;
}

.modal-card {
  width: min(560px, 100%);
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 1.1rem;
}

.modal-head,
.video-modal-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
}

.video-modal-head {
  justify-content: flex-end;
  margin-bottom: 0.4rem;
}

.modal-title {
  margin: 0;
  font-size: 1.25rem;
  color: var(--ink);
}

.modal-subtitle {
  margin-top: 0.15rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.modal-close,
.video-modal-close {
  border: 1px solid var(--stroke);
  background: var(--card-alt);
  color: var(--ink);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.45rem 0.65rem;
  cursor: pointer;
}

.modal-close:hover,
.video-modal-close:hover {
  border-color: var(--accent-2);
  color: var(--accent-2);
}

.video-modal-close {
  border-color: rgba(255, 255, 255, 0.3);
  background: transparent;
  color: #fff;
}

.modal-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 1rem;
}

.modal-note {
  margin-top: 0.8rem;
  margin-bottom: 0.1rem;
  font-size: 0.88rem;
  color: var(--ink);
  font-weight: 700;
}

.modal-option {
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--stroke);
  border-radius: 10px;
  padding: 0.65rem 0.4rem;
  background: var(--card-alt);
  box-shadow: none;
  transition: border-color 150ms ease;
}

.modal-option:hover {
  border-color: var(--accent-2);
}

.modal-option-label,
.modal-option-hint {
  display: block;
  text-align: center;
}

.modal-option-label {
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent-2);
}

.modal-option-hint {
  margin-top: 0.1rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.video-modal-card {
  width: min(1200px, 96vw);
  max-height: 96vh;
}

.video-modal-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  display: block;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 980px) {
  .docs-sidebar {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
  }

  .docs-list {
    grid-template-columns: 1fr 1fr;
  }

  .container {
    margin-left: 0;
    margin-top: 1rem;
  }

  .hero {
    grid-template-columns: 1fr;
  }

  .hero-split {
    grid-template-columns: 1fr;
  }

  .doc-index,
  .shots,
  .demo-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .layout {
    width: min(1400px, calc(100% - 1rem));
    margin: calc(var(--topbar-h) + 1rem) auto 1.2rem;
  }

  .topbar {
    padding: 0.7rem 1rem;
  }

  .docs-sidebar,
  .page-panel,
  section {
    padding: 1.2rem;
    border-radius: 14px;
  }

  .docs-list,
  .modal-options {
    grid-template-columns: 1fr;
  }

  .lang-switch {
    gap: 0.35rem;
  }

  .flag-link {
    width: 44px;
  }
}

.site-footer {
  width: 100%;
  padding: 1.4rem 1rem 2rem;
  text-align: center;
}

.site-footer p {
  max-width: 900px;
  margin: 0 auto;
  color: #fff;
  font-size: 0.78rem;
  line-height: 1.5;
}

.fallback-notice {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--accent-3);
  border-radius: 10px;
  background: var(--card-alt);
  color: var(--ink-soft);
  font-size: 0.85rem;
}

/* Docs-to-PDF export (see scripts/build-docs-pdf.sh): a desktop-wide @page
   width keeps container-query components (like the language table) in their
   desktop layout instead of collapsing to the narrow mobile view a real
   Letter/A4 page width would trigger. The page HEIGHT is a normal document
   page (not one giant page) so multi-page docs paginate properly; the
   break-inside rules below keep a card/table-row from being sliced across
   that page break. The sidebar is dropped since the export is a document,
   not a page you navigate away from. Everything is flipped to a light,
   ink-on-paper theme - the site's light-on-dark colors are unreadable once
   the page background is no longer dark. */
@media print {
  @page {
    size: 1400px 1980px;
    margin: 48px;
  }

  .docs-sidebar {
    display: none !important;
  }

  .container {
    margin-left: 0 !important;
  }

  .topbar {
    position: absolute;
  }

  .copy-btn {
    display: none !important;
  }

  .lang-switch {
    display: none !important;
  }

  body {
    min-height: 0;
    background: #fff;
  }

  /* --accent/--accent-2 text (links, inline code, keyboard shortcuts, ...)
     use lighter shades tuned for the dark theme - darken them here so they
     stay legible on the print export's white background. Only text color is
     affected: components that reuse the same token for a background/border
     (buttons, active nav states, ...) are all hidden or moot in a printed
     document anyway. */
  :root {
    --accent: #1d8026;
    --accent-2: #1d6473;
  }

  .inline-code {
    background: #c5c5c5;
    border-color: #c5c5c5;
    color: #000;
  }

  .grain {
    display: none !important;
  }

  .doc-image {
    box-shadow: none;
  }

  .eyebrow,
  .page-title {
    color: #14151f;
  }

  p,
  li,
  td,
  th,
  .command-label {
    color: #000;
  }

  .doc-block,
  .doc-index-link {
    background: #fff;
    border-color: #ddd;
    box-shadow: none;
  }

  .doc-block h3,
  .doc-index-link strong {
    color: #000;
  }

  .doc-index-link > span {
    color: #333;
  }

  /* Avoid slicing a card, table row or code block across a page break -
     the whole unit moves to the next page instead. A unit taller than one
     full page still has to break somewhere; that's an unavoidable exception. */
  .doc-block,
  .card,
  .mode-hero,
  pre,
  table tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* This page's image+steps grid relies on `position: sticky` and a
     max-width media query for the screen layout - neither makes sense for
     a paginated export, and print collapses it to one column without an
     explicit override. */
  .how-it-works-columns {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  .how-it-works-columns .doc-image {
    position: static !important;
  }
}