/* One stylesheet for the whole site: the landing page and the documentation pages
   share the same shell (top bar, hero, sections, footer) so a reader never lands
   on a page that looks like a different product. */

:root {
  --ground: #FAFAFB;
  --surface: #FFFFFF;
  --surface-2: #F2F3F7;
  --line: #E2E4E9;
  --ink: #15171C;
  --muted: #5C6371;
  --brand: #F42727;
  --brand-deep: #B71D1D;
  --brand-ink: #FFFFFF;
  --brand-link: #B71D1D;
  --brand-tint: rgba(244,39,39,.08);
  --grid: rgba(21,23,28,.055);
  --shadow-sm: 0 1px 2px rgba(21,23,28,.05);
  --shadow: 0 1px 2px rgba(21,23,28,.06), 0 12px 32px -18px rgba(21,23,28,.30);
  --shadow-lg: 0 4px 8px rgba(21,23,28,.05), 0 32px 64px -28px rgba(21,23,28,.40);
  --bar: rgba(250,250,251,.82);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0F1115;
    --surface: #171A20;
    --surface-2: #1C2027;
    --line: #272B33;
    --ink: #E9EBEF;
    --muted: #949CAA;
    --brand: #FF3B3B;
    --brand-deep: #C92020;
    --brand-link: #FF8A8A;
    --brand-tint: rgba(255,59,59,.12);
    --grid: rgba(255,255,255,.05);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow: 0 1px 2px rgba(0,0,0,.5), 0 12px 32px -18px rgba(0,0,0,.9);
    --shadow-lg: 0 4px 8px rgba(0,0,0,.5), 0 32px 64px -28px rgba(0,0,0,1);
    --bar: rgba(15,17,21,.82);
  }
}

* { box-sizing: border-box; }

html { overflow-x: hidden; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Horizontal margins only: a .wrap is often also a section that sets its own
   vertical rhythm, and the margin shorthand would reset it. */
.wrap { max-width: 1080px; margin-left: auto; margin-right: auto; padding: 0 28px; }
.wrap.narrow { max-width: 820px; }
@media (max-width: 480px) {
  .wrap { padding: 0 20px; }
}

/* Visible only when focused, so a keyboard reader can skip the sticky bar. */
.skip {
  position: absolute;
  left: 16px;
  top: 12px;
  z-index: 40;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 620;
  font-size: 14px;
  text-decoration: none;
  box-shadow: var(--shadow);
  transform: translateY(-160%);
}
.skip:focus { transform: none; outline: 3px solid var(--brand); outline-offset: 2px; }

code, kbd, pre {
  font-family: "Cascadia Mono", "Segoe UI Mono", ui-monospace, Consolas, monospace;
}
code { font-size: .9em; }

/* Third-party marks: the VS Code logo keeps its own blue, the GitHub mark is
   monochrome by design and follows the text color. */
.ico-inline { width: 15px; height: 15px; flex: none; }
/* Outside the flex nav, the mark needs its own spacing and baseline nudge. */
.features .ico-inline,
article .ico-inline,
footer .ico-inline { vertical-align: -2px; margin-right: 5px; }
.nowrap { white-space: nowrap; }
.brandicon { width: 19px; height: 19px; vertical-align: -3px; margin-right: 9px; }

/* ---------------------------------------------------------------- top bar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bar);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar .wrap { display: flex; align-items: center; gap: 18px; height: 60px; }

.brandmark {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 650;
  font-size: 15px;
  letter-spacing: -.01em;
  text-decoration: none;
  flex: none;
}
.brandmark svg { width: 27px; height: 27px; }

.topnav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  font-size: 14.5px;
  overflow-x: auto;
  scrollbar-width: none;
}
.topnav::-webkit-scrollbar { display: none; }
.topnav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  text-decoration: none;
  padding: 7px 12px;
  border-radius: 8px;
  white-space: nowrap;
  transition: color .12s ease, background .12s ease;
}
.topnav a:hover { color: var(--ink); background: var(--surface-2); }
.topnav a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.topnav a[aria-current="page"] { color: var(--ink); font-weight: 620; background: var(--surface-2); }
.topnav .cta { color: var(--brand-link); font-weight: 620; background: var(--brand-tint); }
.topnav .cta:hover { color: var(--brand-link); background: var(--brand-tint); }

@media (max-width: 720px) {
  .brandmark span { display: none; }
  .topbar .wrap { gap: 8px; }
  .topnav {
    margin-left: 0;
    flex: 1;
    justify-content: flex-end;
    min-width: 0;
    gap: 0;
  }
  .topnav a { padding: 6px 8px; font-size: 13.5px; }
}

/* ------------------------------------------------------------------- hero */

.hero {
  position: relative;
  padding: 64px 0 72px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, var(--grid) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px) 0 0 / 34px 34px;
  mask-image: radial-gradient(72% 70% at 28% 40%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(72% 70% at 28% 40%, #000 30%, transparent 100%);
  pointer-events: none;
}
.hero .wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "copy art"
    "teaser teaser";
  gap: 40px 52px;
  align-items: center;
}
.hero-copy { grid-area: copy; min-width: 0; }
.hero-art { grid-area: art; margin: 0; min-width: 0; }
.teaser { grid-area: teaser; max-width: 860px; width: 100%; justify-self: center; min-width: 0; }
@media (max-width: 940px) {
  .hero { padding: 36px 0 40px; }
  .hero .wrap {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "copy"
      "art"
      "teaser";
    gap: 28px;
  }
  .hero-copy,
  .hero-art,
  .teaser { width: 100%; max-width: 100%; }
  .hero-art .launch {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: min(420px, 55vh);
    object-fit: contain;
    margin-inline: auto;
    display: block;
  }
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 13px 5px 9px;
  box-shadow: var(--shadow-sm);
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); flex: none; }

.hero h1 {
  font-size: clamp(38px, 5vw, 56px);
  line-height: 1.04;
  letter-spacing: -.035em;
  font-weight: 700;
  margin: 20px 0 16px;
}
@media (max-width: 940px) {
  .hero h1 { font-size: clamp(30px, 8vw, 40px); }
}
.hero h1 .accent {
  background: linear-gradient(120deg, var(--brand), var(--brand-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tagline { font-size: 18.5px; color: var(--muted); margin: 0; max-width: 46ch; }

.actions {
  margin: 32px 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
@media (max-width: 560px) {
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .download,
  .cta-row .ghost { justify-content: center; width: 100%; }
  .alternates { display: flex; flex-direction: column; gap: 6px; }
  .alternates .sep { display: none; }
}

.download {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(140deg, var(--brand), var(--brand-deep));
  color: var(--brand-ink);
  text-decoration: none;
  font-size: 16.5px;
  font-weight: 620;
  padding: 14px 28px;
  border-radius: 12px;
  box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease;
}
.download:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.download:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.download svg { width: 18px; height: 18px; flex: none; }

.ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 22px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: border-color .12s ease, transform .12s ease;
}
.ghost:hover { border-color: var(--brand); transform: translateY(-1px); }
.ghost:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.ghost .arrow { color: var(--brand); }

.meta { font-size: 13.5px; color: var(--muted); min-height: 1.2em; margin: 0; }
.meta strong { color: var(--ink); font-weight: 600; }

.alternates { font-size: 14px; color: var(--muted); margin: 0; }
.alternates a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.alternates a:hover { color: var(--ink); }
.sep { opacity: .45; padding: 0 8px; }

.notice {
  margin: 28px 0 0;
  max-width: 620px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: 12px;
  padding: 16px 20px;
  font-size: 14.5px;
  color: var(--muted);
  box-shadow: var(--shadow-sm);
}
.notice strong { color: var(--ink); font-weight: 600; }

/* The launch artwork. Replace the file, not the markup: the frame adapts to any
   aspect ratio and the caption below carries the claim. */
.launch {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  background: #F7F6F2;
}

.teaser-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  background: #F7F6F2;
}
.teaser-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.launch-caption {
  margin: 14px 2px 0;
  font-size: 13.5px;
  color: var(--muted);
  text-align: center;
}
.launch-caption a { color: var(--muted); text-underline-offset: 3px; }
.launch-caption a:hover { color: var(--ink); }

/* --------------------------------------------------------------- sections */

/* Margin, not padding: a section is usually also a .wrap, whose padding rule wins. */
main section { margin-top: 76px; }

.eyebrow {
  display: block;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 650;
  color: var(--brand);
  margin: 0 0 10px;
}

h2 {
  font-size: 26px;
  letter-spacing: -.024em;
  font-weight: 670;
  margin: 0 0 8px;
  scroll-margin-top: 132px;
}
h3 {
  font-size: 17px;
  font-weight: 640;
  letter-spacing: -.012em;
  margin: 1.8em 0 .4em;
  scroll-margin-top: 132px;
}
.section-lede { color: var(--muted); margin: 0 0 28px; font-size: 16px; max-width: 62ch; }

.features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px 28px;
}
.features li { font-size: 15px; color: var(--muted); }
.features .ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--brand-tint);
  color: var(--brand);
  margin-bottom: 12px;
}
.features .ico svg { width: 18px; height: 18px; }
.features b {
  display: block;
  color: var(--ink);
  font-weight: 620;
  font-size: 16px;
  letter-spacing: -.01em;
  margin-bottom: 3px;
}
.features a { color: var(--brand-link); text-underline-offset: 3px; }

/* ------------------------------------------------- documentation link rows */

.doclist { border-top: 1px solid var(--line); }
.doclink {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 24px 16px 24px 4px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: background .16s ease, padding .16s ease;
}
.doclink:hover { background: var(--surface); padding-left: 16px; }
.doclink:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }
.doclink .title {
  display: block;
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -.024em;
  color: var(--ink);
  line-height: 1.25;
}
.doclink .desc { display: block; margin-top: 4px; color: var(--muted); font-size: 15.5px; }
.doclink .go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand);
  flex: none;
  transition: transform .16s ease;
}
.doclink:hover .go { transform: translateX(4px); }
.doclink .go svg { width: 18px; height: 18px; }
.tag {
  display: inline-block;
  margin-left: 10px;
  vertical-align: 3px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
}

/* ------------------------------------------------ documentation page shell */

.dochead { padding: 48px 0 0; }
.dochead h1 {
  font-size: clamp(32px, 4.4vw, 42px);
  line-height: 1.08;
  letter-spacing: -.03em;
  font-weight: 690;
  margin: 0 0 12px;
}
.dochead .lede { font-size: 17.5px; color: var(--muted); margin: 0; max-width: 62ch; }
.dochead .lede a { color: var(--brand-link); text-underline-offset: 3px; }

article { font-size: 16px; margin-top: 8px; overflow-x: auto; }
article h2 { margin-top: 2.2em; }
article p, article li { color: var(--ink); }
article p { margin: 0 0 1em; }
article ul, article ol { margin: 0 0 1em; padding-left: 1.3em; }
article li { margin: .3em 0; }
article a { color: var(--brand-link); text-underline-offset: 3px; }

article pre {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.5;
  box-shadow: var(--shadow-sm);
}
article pre code { font-size: inherit; }

.story {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px 6px;
  margin: 0 0 16px;
  box-shadow: var(--shadow-sm);
}
.story h3 { margin-top: 0; font-size: 17px; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  margin: 0 0 1.6em;
}
th, td {
  text-align: left;
  vertical-align: top;
  padding: .6em .7em .6em 0;
  border-bottom: 1px solid var(--line);
}
th {
  color: var(--ink);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Where a documentation page ends, the next one begins. */
.pagenav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 64px;
}
.pagenav a {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: border-color .14s ease, transform .14s ease;
}
.pagenav a:hover { border-color: var(--brand); transform: translateY(-2px); }
.pagenav .k {
  display: block;
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 650;
  color: var(--brand);
}
.pagenav .t { display: block; margin-top: 4px; font-size: 16.5px; font-weight: 640; color: var(--ink); letter-spacing: -.015em; }
.pagenav .d { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); }

/* ----------------------------------------------------- shortcuts reference */

/* The reference is read while the application is open, so the groups must be
   reachable without scrolling and a single command must be findable by name. */

.keybar {
  position: sticky;
  top: 60px;
  z-index: 15;
  background: var(--bar);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  margin-top: 28px;
}
.keybar .inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}
.chipnav {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
}
.chipnav::-webkit-scrollbar { display: none; }
.chipnav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  transition: color .12s ease, border-color .12s ease;
}
.chipnav a svg {
  display: block;
  width: 14px;
  height: 14px;
  flex: none;
  opacity: .68;
}
.chipnav a:hover { color: var(--ink); border-color: var(--brand); }
.chipnav a:hover svg { opacity: .9; }
.chipnav a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.keyfilter {
  flex: none;
  width: 210px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
}
.keyfilter::placeholder { color: var(--muted); }
.keyfilter:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
@media (max-width: 720px) {
  .keybar .inner { flex-direction: column; align-items: stretch; }
  .keyfilter { width: 100%; }
}

.quickgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin: 0 0 8px;
}
@media (max-width: 720px) {
  .quickgrid { grid-template-columns: 1fr; }
}
.quick {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
}
.quick .what { font-size: 14.5px; color: var(--ink); font-weight: 560; }

.keygroup { margin-top: 44px; padding-top: 0; }
.keygroup:first-of-type { margin-top: 28px; }
.keygroup h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  line-height: 1;
}
.keygroup[hidden] { display: none; }
.secico {
  display: flex;
  align-items: center;
  color: var(--muted);
  flex: none;
  height: 1em;
  transform: translateY(0.06em);
}
.secico svg { display: block; width: 1em; height: 1em; }

.keyrows {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.keyrow {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
  align-items: baseline;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.keyrow:last-child { border-bottom: 0; }
.keyrow:hover { background: var(--surface-2); }
.keyrow[hidden] { display: none; }
.keyrow .act { color: var(--muted); }
.keyrow .act code { color: var(--ink); }
@media (max-width: 700px) {
  .keyrow { grid-template-columns: 1fr; gap: 6px; }
}

/* A command in the application (or in GitHub / Azure, on Contribute):
   heavier than body text, not a keycap, not bold emphasis. */
.ui {
  font-weight: 600;
  letter-spacing: -.01em;
}

kbd {
  display: inline-block;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 7px;
  padding: 2px 8px;
  white-space: nowrap;
}
kbd.gesture {
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  color: var(--brand-link);
  background: var(--brand-tint);
  border-color: transparent;
  border-bottom-color: transparent;
}
.plus { color: var(--muted); font-size: 12.5px; padding: 0 2px; }

.empty {
  display: none;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: 15px;
}
.empty[data-visible="true"] { display: block; }

/* ----------------------------------------------------------------- footer */

footer { margin-top: 88px; border-top: 1px solid var(--line); }
footer .wrap {
  padding-top: 26px;
  padding-bottom: 46px;
  font-size: 13.5px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: space-between;
}
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--ink); text-decoration: underline; }
.footlinks { display: flex; flex-wrap: wrap; gap: 4px 0; align-items: center; justify-content: flex-end; }
.footlinks .sep { padding: 0 8px; }

.releases {
  list-style: none;
  margin: 0 0 1.6em;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.releases li { border-bottom: 1px solid var(--line); padding: 16px 18px 18px; }
.releases li:last-child { border-bottom: 0; }
.reltop {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: baseline;
  justify-content: space-between;
}
.releases .ver { font-weight: 640; color: var(--ink); text-decoration: none; }
.releases .ver:hover { text-decoration: underline; }
.releases .when { color: var(--muted); font-size: 14px; }
.relsum {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.releases details { margin: 10px 0 0 12px; }
.releases summary {
  cursor: pointer;
  color: var(--brand-link);
  font-size: 13.5px;
  font-weight: 600;
  list-style: none;
}
.releases summary::-webkit-details-marker { display: none; }
.releases summary::after { content: " +"; font-weight: 500; }
.releases details[open] summary::after { content: " \2212"; }
.relbody {
  margin: 8px 0 0;
  padding: 12px 16px;
  background: var(--surface-2);
  border-radius: 10px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}
.relbody > *:first-child { margin-top: 0; }
.relbody > *:last-child { margin-bottom: 0; }
.relbody h1, .relbody h2, .relbody h3 {
  font-size: 14.5px;
  font-weight: 650;
  color: var(--ink);
  margin: 1.05em 0 .35em;
}
.relbody p { margin: 0 0 .7em; }
.relbody ul, .relbody ol { margin: 0 0 .7em; padding-left: 1.25em; }
.relbody li { margin: .2em 0; }
.relbody a { color: var(--brand-link); text-underline-offset: 2px; }
.relbody hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: .9em 0;
}
.relbody pre {
  margin: 0 0 .7em;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
}

.compare { font-size: 14.5px; }
.compare th:nth-child(2),
.compare td:nth-child(2) { font-weight: 560; }

.sqlbi-mark { display: inline-block; line-height: 0; vertical-align: -4px; }
.sqlbi-mark svg { height: 17px; width: auto; display: block; }
.sqlbi-mark:hover { text-decoration: none; }

/* ------------------------------------------------------------ guide figures */

/* The Guide draws the application instead of describing it twice. Figures are
   inline SVG rather than <img>, because an external image cannot read these
   tokens and would be locked to one theme.

   Every figure's base state is the informative one. The animation only replays
   how it got there, so a reader who never scrolls that far, or who asks for
   reduced motion, still sees the whole idea. Keyframes therefore declare only
   a "from"; the implicit "to" is the element's own resting value. */

:root {
  --fig-ground: #FAFAFB;
  --fig-surface: #FFFFFF;
  --fig-surface-2: #F2F3F7;
  --fig-line: #E2E4E9;
  --fig-ink: #15171C;
  --fig-muted: #5C6371;
  --fig-grid: rgba(21, 23, 28, .055);
  --fig-danger: #C24141;
  --fig-accent: #2563EB;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fig-ground: #12151A;
    --fig-surface: #1C2027;
    --fig-surface-2: #232830;
    --fig-line: #343A45;
    --fig-ink: #E9EBEF;
    --fig-muted: #949CAA;
    --fig-grid: rgba(255, 255, 255, .05);
    --fig-danger: #E8776F;
    --fig-accent: #6EA0F5;
  }
}

.fig {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 14px 12px;
  margin: 0 0 20px;
  box-shadow: var(--shadow-sm);
}
.figbox { overflow-x: auto; }
.fig svg { display: block; width: 100%; height: auto; }

/* Below the point where a figure would shrink its own labels into illegibility,
   the artwork keeps a readable size and the box pans instead. The caption stays
   at card width so the sentence never scrolls away from the picture. */
@media (max-width: 720px) {
  .figbox svg { min-width: 660px; }
}

.fig figcaption {
  margin-top: 10px;
  padding: 0 2px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}
.fig figcaption b { font-weight: 620; color: var(--ink); }

/* A caption that legends two marks, or states two separate rules, reads as a
   list rather than a paragraph. One <p> per point, tight enough to still be
   one caption. */
.fig figcaption p { margin: 0; }
.fig figcaption p + p { margin-top: 5px; }
.fig .swatch {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 9px;
  vertical-align: -1px;
  margin-right: 5px;
}

/* Inside a story card the figure is a recess, not a second card. */
.story .fig {
  background: var(--ground);
  box-shadow: none;
  margin: 2px 0 16px;
}

/* The tools are a list of tools, not a paragraph about them. */
.toolrows { margin: 0 0 1.4em; border-top: 1px solid var(--line); }
.toolrow {
  display: grid;
  grid-template-columns: 26px 138px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 11px 2px;
  border-bottom: 1px solid var(--line);
}
.toolrow .glyph {
  width: 20px;
  height: 20px;
  color: var(--muted);
  align-self: start;
  margin-top: -2px;
}
.toolrow .name { font-weight: 620; letter-spacing: -.01em; }
.toolrow .chip {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-left: 7px;
  vertical-align: -1px;
  border: 1px solid rgba(21, 23, 28, .2);
}
.toolrow .role { color: var(--muted); font-size: 14.5px; }

.navtable th:first-child,
.navtable td:first-child { width: 27%; }
.navtable th:last-child,
.navtable td:last-child { width: 31%; color: var(--muted); }

@media (max-width: 560px) {
  .toolrow { grid-template-columns: 22px 1fr; gap: 4px 10px; }
  .toolrow .role { grid-column: 2; }
}

/* Resting states. These are what the figure means, and what is shown whenever
   the loop below is not running: off screen, under reduced motion, or with no
   IntersectionObserver. Each one has to read on its own. */
.f1-carry { transform: translate(-24px, 56px); }
.f2-trail { stroke-dasharray: 640; stroke-dashoffset: 0; }
.f3-zoom { transform-origin: 350px 126px; transform: scale(1.85) translate(30px, 18px); }
.f3-tap { opacity: 0; }
/* Each of these paths declares pathLength="100", so the dash is a percentage
   of the stroke rather than a measurement of it. */
.f11-ink, .f11-hi, .f12-ink { stroke-dasharray: 100; stroke-dashoffset: 0; }
.f12-b { opacity: 0; }

/* Motion is opt-in: no animation is declared at all unless the reader allows
   it, which is why the reduce block below needs no figure rules.

   Each cycle demonstrates, then rests on the informative state for most of its
   length, then returns. A reader who looks up mid-loop sees the finished idea
   far more often than the transition. Every cycle starts and ends on the same
   frame so the repeat never jumps. The script only runs a figure while it is
   on screen, so nothing off screen is burning a compositor thread. */
@media (prefers-reduced-motion: no-preference) {
  .fig.is-visible .f1-carry { animation: fig-carry 7s cubic-bezier(.4, 0, .2, 1) infinite; }
  .fig.is-visible .f1-ghost { animation: fig-ghost 7s ease infinite; }

  .fig.is-visible .f2-trail { animation: fig-trail 6.5s ease-out infinite; }
  .fig.is-visible .f2-head { animation: fig-head 6.5s ease-out infinite; }

  .fig.is-visible .f3-zoom { animation: fig-frame 7.5s cubic-bezier(.4, 0, .2, 1) infinite; }
  .fig.is-visible .f3-tap { animation: fig-tap 7.5s ease-out infinite; }

  .fig.is-visible .f4-a { animation: fig-pop 6.5s ease infinite both; }
  .fig.is-visible .f4-b { animation: fig-pop 6.5s ease .3s infinite both; }
  .fig.is-visible .f4-c { animation: fig-pop 6.5s ease .6s infinite both; }

  .fig.is-visible .f5-cursor { animation: fig-point 7.5s cubic-bezier(.4, 0, .2, 1) infinite; }
  .fig.is-visible .f5-tab { animation: fig-tabon 7.5s ease infinite; }
  .fig.is-visible .f5-strip { animation: fig-strip 7.5s cubic-bezier(.2, .8, .3, 1) infinite; }

  .fig.is-visible .f6-1 { animation: fig-pop 6.5s ease infinite both; }
  .fig.is-visible .f6-2 { animation: fig-pop 6.5s ease .45s infinite both; }
  .fig.is-visible .f6-3 { animation: fig-pop 6.5s ease .9s infinite both; }
  .fig.is-visible .f6-4 { animation: fig-pop 6.5s ease 1.35s infinite both; }

  .fig.is-visible .f7-b { animation: fig-pop 6.5s ease .25s infinite both; }
  .fig.is-visible .f7-d { animation: fig-pop 6.5s ease .55s infinite both; }

  .fig.is-visible .f8-a { animation: fig-pop 6.5s ease infinite both; }
  .fig.is-visible .f8-b { animation: fig-pop 6.5s ease .3s infinite both; }
  .fig.is-visible .f8-c { animation: fig-pop 6.5s ease .6s infinite both; }

  .fig.is-visible .f9-walk { animation: fig-filewalk 8s cubic-bezier(.4, 0, .2, 1) infinite; }

  .fig.is-visible .f10-q { animation: fig-pop 6.5s ease infinite both; }
  .fig.is-visible .f10-a { animation: fig-pop 6.5s ease .3s infinite both; }
  .fig.is-visible .f10-b { animation: fig-pop 6.5s ease .5s infinite both; }
  .fig.is-visible .f10-c { animation: fig-pop 6.5s ease .7s infinite both; }

  .fig.is-visible .f11-ink { animation: fig-inkdraw 7s ease-out infinite; }
  .fig.is-visible .f11-hi { animation: fig-hidraw 7s ease-out infinite; }

  /* Half a cycle apart, so one column is always the one on screen. */
  .fig.is-visible .f12-a { animation: fig-swap 6s ease infinite; }
  .fig.is-visible .f12-b { animation: fig-swap 6s ease -3s infinite; }
  .fig.is-visible .f12-ink { animation: fig-inkdraw 7s ease-out .5s infinite; }
}

/* The container carries its ink out, holds, and is put back. */
@keyframes fig-carry {
  0%, 8% { transform: translate(0, 0); }
  30%, 82% { transform: translate(-24px, 56px); }
  96%, 100% { transform: translate(0, 0); }
}
@keyframes fig-ghost {
  0%, 10% { opacity: 0; }
  30%, 82% { opacity: 1; }
  94%, 100% { opacity: 0; }
}

/* The trail draws, holds, then fades the way the real laser does. It resets
   while the dash offset already hides it, so the loop has no visible snap. */
@keyframes fig-trail {
  0% { stroke-dashoffset: 640px; opacity: 1; }
  24% { stroke-dashoffset: 0px; opacity: 1; }
  64% { stroke-dashoffset: 0px; opacity: 1; }
  78% { stroke-dashoffset: 0px; opacity: 0; }
  79% { stroke-dashoffset: 640px; opacity: 0; }
  100% { stroke-dashoffset: 640px; opacity: 1; }
}

/* The head follows the same curve the trail draws, sampled at quarters. */
@keyframes fig-head {
  0% { transform: translate(-528px, 72px); opacity: 0; }
  3% { opacity: 1; }
  6% { transform: translate(-377px, -2px); }
  12% { transform: translate(-220px, 22px); }
  18% { transform: translate(-85px, 54px); }
  24%, 64% { transform: translate(0, 0); opacity: 1; }
  78% { transform: translate(0, 0); opacity: 0; }
  100% { transform: translate(-528px, 72px); opacity: 0; }
}

@keyframes fig-inkdraw {
  0% { stroke-dashoffset: 100px; opacity: 1; }
  24%, 84% { stroke-dashoffset: 0px; opacity: 1; }
  92% { stroke-dashoffset: 0px; opacity: 0; }
  93% { stroke-dashoffset: 100px; opacity: 0; }
  100% { stroke-dashoffset: 100px; opacity: 1; }
}
/* The band arrives after the loop, the way you would mark it up out loud. */
@keyframes fig-hidraw {
  0%, 30% { stroke-dashoffset: 100px; opacity: 1; }
  48%, 84% { stroke-dashoffset: 0px; opacity: 1; }
  92% { stroke-dashoffset: 0px; opacity: 0; }
  93% { stroke-dashoffset: 100px; opacity: 0; }
  100% { stroke-dashoffset: 100px; opacity: 1; }
}

/* The live column is replaced rather than cross-faded: a query result that
   dissolved into the next one would read as an animation, not as new numbers. */
@keyframes fig-swap {
  0%, 49.9% { opacity: 1; }
  50%, 99.9% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fig-frame {
  0%, 12% { transform: scale(1) translate(0, 0); }
  36%, 80% { transform: scale(1.85) translate(30px, 18px); }
  94%, 100% { transform: scale(1) translate(0, 0); }
}
@keyframes fig-tap {
  0%, 8% { opacity: 0; transform: scale(.5); }
  12% { opacity: 1; transform: scale(.8); }
  24% { opacity: 0; transform: scale(1.25); }
  25%, 100% { opacity: 0; transform: scale(.5); }
}

@keyframes fig-pop {
  0%, 4% { opacity: 0; transform: scale(.94); }
  14%, 76% { opacity: 1; transform: scale(1); }
  88%, 100% { opacity: 0; transform: scale(.94); }
}

/* The pointer goes to the tab, the row drops open, then the canvas closes it. */
@keyframes fig-point {
  0%, 8% { transform: translate(276px, 196px); }
  22%, 74% { transform: translate(0, 0); }
  88%, 100% { transform: translate(276px, 196px); }
}
@keyframes fig-tabon {
  0%, 20% { opacity: 0; }
  26%, 78% { opacity: 1; }
  86%, 100% { opacity: 0; }
}
@keyframes fig-filewalk {
  0%, 14% { transform: translate(0, 0); }
  24%, 38% { transform: translate(82px, 0); }
  48%, 62% { transform: translate(164px, 0); }
  72%, 90% { transform: translate(246px, 0); }
  100% { transform: translate(0, 0); }
}
@keyframes fig-strip {
  0%, 22% { opacity: 0; transform: translateY(-10px); }
  32%, 76% { opacity: 1; transform: translateY(0); }
  86%, 100% { opacity: 0; transform: translateY(-10px); }
}

.fig .f3-tap,
.fig .f4-a, .fig .f4-b, .fig .f4-c,
.fig .f6-1, .fig .f6-2, .fig .f6-3, .fig .f6-4,
.fig .f7-b, .fig .f7-d,
.fig .f8-a, .fig .f8-b, .fig .f8-c,
.fig .f10-q, .fig .f10-a, .fig .f10-b, .fig .f10-c {
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
  .download, .ghost, .doclink, .doclink .go, .pagenav a { transition: none; }
  .download:hover, .ghost:hover, .pagenav a:hover { transform: none; }
  .doclink:hover { padding-left: 4px; }
}