/* ==========================================================================
   binder — project site
   No framework, no build step for the CSS. Custom properties for theming;
   code blocks stay dark in both themes because that is what an editor looks
   like.

   The visual language follows mklaunchd.sh and namecheapcli.com: an off-white
   page, hairline rules instead of heavy borders, one gradient
   (sky → purple → pink → gold) used sparingly for emphasis, and pill buttons.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
/* uRadical brand: navy #0C1A50 and the four-stop gradient that runs through
   the parent site. Code blocks are the same deep navy in both themes — that
   is the design, not an oversight. */

:root {
  --navy:   #0C1A50;
  --sky:    #5DB1FF;
  --purple: #9F72E1;
  --pink:   #F659A8;
  --gold:   #E1C631;

  --bg:            #FBFBFD;
  --bg-alt:        #F2EEE6;
  --surface:       #FFFFFF;
  --surface-2:     #F5F3ED;
  --ink:           var(--navy);
  --ink-soft:      rgba(12, 26, 80, .72);
  --muted:         rgba(12, 26, 80, .48);
  --border:        rgba(12, 26, 80, .09);
  --border-strong: rgba(12, 26, 80, .16);

  /* #5DB1FF is the brand blue but too light for text; this violet is the
     reference site's link colour and carries the contrast on off-white. */
  --accent:        #4A22B8;
  --chart-bar:      #79819F;   /* the other libraries — identity comes from the label */
  --chart-bar-self: #4A22B8;   /* binder, the one the reader came for */
  --accent-ink:    #ffffff;
  --accent-soft:   rgba(159, 114, 225, .10);
  --accent-line:   rgba(159, 114, 225, .30);

  --brand-grad:   linear-gradient(135deg, var(--sky), var(--purple));
  --brand-grad-4: linear-gradient(92deg, var(--sky) 0%, var(--purple) 35%, var(--pink) 70%, var(--gold) 100%);

  /* Code palette — identical in both themes. */
  --code-bg:   #0A1240;
  --code-ink:  #E5EAFF;
  --code-dim:  rgba(245, 247, 255, .40);
  --code-kw:   #A7A0FF;   /* keywords: func, type, if, return */
  --code-str:  #86E1B0;   /* string literals */
  --code-tag:  #E1C631;   /* struct tags — the whole API, so they stand out */
  --code-typ:  #5DB1FF;   /* type and package names */
  --code-com:  rgba(245, 247, 255, .38);
  --code-ok:   #4ADE80;
  --code-bad:  #FF8095;

  --radius:    18px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --shadow:    0 1px 2px rgb(12 26 80 / .05), 0 18px 44px -18px rgb(12 26 80 / .22);

  --sans:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --display: "Sen", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
  --mono:    ui-monospace, "SF Mono", Menlo, Monaco, "JetBrains Mono", Consolas, monospace;

  --wrap: 1080px;
}

/* Dark mode is the same palette with the navy brought forward as the page. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #080E2B;
    --bg-alt:        #0C1440;
    --surface:       #101A47;
    --surface-2:     #0D1539;
    --ink:           #EEF1FF;
    --ink-soft:      rgba(238, 241, 255, .74);
    --muted:         rgba(238, 241, 255, .50);
    --border:        rgba(255, 255, 255, .10);
    --border-strong: rgba(255, 255, 255, .18);

    --accent:        #A7A0FF;
  --chart-bar:      #747B9A;
  --chart-bar-self: #A7A0FF;
    --accent-ink:    #0A1240;
    --accent-soft:   rgba(159, 114, 225, .18);
    --accent-line:   rgba(159, 114, 225, .40);

    --shadow: 0 1px 2px rgb(0 0 0 / .5), 0 18px 44px -18px rgb(0 0 0 / .8);
  }
}

:root[data-theme="dark"] {
  --bg:            #080E2B;
  --bg-alt:        #0C1440;
  --surface:       #101A47;
  --surface-2:     #0D1539;
  --ink:           #EEF1FF;
  --ink-soft:      rgba(238, 241, 255, .74);
  --muted:         rgba(238, 241, 255, .50);
  --border:        rgba(255, 255, 255, .10);
  --border-strong: rgba(255, 255, 255, .18);

  --accent:        #A7A0FF;
  --chart-bar:      #747B9A;
  --chart-bar-self: #A7A0FF;
  --accent-ink:    #0A1240;
  --accent-soft:   rgba(159, 114, 225, .18);
  --accent-line:   rgba(159, 114, 225, .40);

  --shadow: 0 1px 2px rgb(0 0 0 / .5), 0 18px 44px -18px rgb(0 0 0 / .8);
}

/* ----------------------------------------------------------------- base -- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The header is sticky, so an anchored section would land underneath it. */
section[id] { scroll-margin-top: 76px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -.005em;
}

h1, h2, h3 {
  font-family: var(--display);
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 0 0 .5em;
}
h1 { font-size: clamp(44px, 7vw, 76px); font-weight: 800; line-height: 1.02; letter-spacing: -.035em; }
h2 { font-size: clamp(30px, 4.2vw, 46px); font-weight: 800; }
h3 { font-size: 20px; font-weight: 700; letter-spacing: -.015em; }

p { margin: 0 0 1rem; }
p strong { color: var(--ink); font-weight: 600; }
em { font-style: italic; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: opacity .15s ease, color .15s ease;
}
a:hover { opacity: .75; }

::selection { background: var(--purple); color: #fff; }

:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 3px;
  border-radius: 3px;
}

code, kbd, pre { font-family: var(--mono); }

:not(pre) > code {
  font-size: .875em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: .1em .34em;
  word-break: break-word;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 28px);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-ink);
  padding: .6rem 1rem;
  z-index: 100;
  border-radius: 0 0 var(--radius-xs) 0;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------- header -- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 60px;
  padding-block: 14px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  white-space: nowrap;
}
.wordmark:hover { opacity: .8; }
.wordmark .mark { height: 24px; width: auto; flex: none; display: block; }

.nav {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: var(--ink-soft);
}
.header-inner > nav { margin-left: auto; }
.nav a { color: inherit; }
.nav a:hover { color: var(--ink); opacity: 1; }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* The GitHub mark and the theme toggle read as one pair of round controls at
   the end of the bar, so they keep their own tighter gap. */
.header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.icon-link {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  transition: color .15s, border-color .15s;
}
.icon-link:hover { color: var(--ink); border-color: var(--border-strong); opacity: 1; }
.icon-link svg { display: block; }

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

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

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 8vw, 88px) clamp(3rem, 7vw, 88px);
  border-bottom: 1px solid var(--border);
}

/* The wash behind the hero: the full brand gradient, blurred into a haze. */
.hero::before {
  content: "";
  position: absolute;
  inset: -10% -20% auto -20%;
  height: 640px;
  background: radial-gradient(
    ellipse at 50% 12%,
    color-mix(in srgb, var(--sky) 45%, transparent) 0%,
    color-mix(in srgb, var(--purple) 30%, transparent) 24%,
    color-mix(in srgb, var(--pink) 22%, transparent) 42%,
    color-mix(in srgb, var(--gold) 12%, transparent) 58%,
    transparent 78%
  );
  filter: blur(50px);
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}
:root[data-theme="dark"] .hero::before { opacity: .40; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero::before { opacity: .40; }
}

.hero-inner { position: relative; z-index: 1; text-align: center; }

.hero-logo {
  display: block;
  height: 116px;
  width: auto;
  margin: 0 auto 32px;
  filter: drop-shadow(0 16px 36px rgb(12 26 80 / .18));
}

@media (max-width: 720px) {
  .hero-logo { height: 84px; margin-bottom: 24px; }
}

.hero h1 {
  margin: 0 0 20px;
  background: var(--brand-grad-4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}
.hero-inner .eyebrow { display: block; }
.eyebrow-sub { margin-top: -8px; opacity: .8; }

.lede {
  font-size: clamp(18px, 2vw, 22px);
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0 0 32px;
  letter-spacing: -.01em;
}
.hero-inner .lede { margin-inline: auto; }

.hero-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 28px;
}
.hero-inner .hero-links { justify-content: center; }

.hero-install {
  max-width: 420px;
  margin: 0 auto 56px;
  text-align: left;
}

.hero-demo { max-width: 900px; margin-inline: auto; text-align: left; }

/* -------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); opacity: 1; background: var(--surface-2); }

.btn-primary {
  color: #fff;
  border: 0;
  background: var(--brand-grad-4);
  background-size: 190% 100%;
  background-position: 28% 0;
  box-shadow: 0 8px 32px -8px color-mix(in srgb, var(--purple) 60%, transparent);
}
.btn-primary:hover {
  background-position: 100% 0;
  box-shadow: 0 12px 40px -8px color-mix(in srgb, var(--pink) 60%, transparent);
}

/* ------------------------------------------------------------ code slab -- */
/* An editor window rather than a terminal: this is a library, so what the
   reader needs to see is source, not a session transcript. */

.slab {
  position: relative;
  background: var(--code-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: left;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .04),
    0 30px 80px -20px rgb(0 0 0 / .45);
}

.slab-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgb(255 255 255 / .06), rgb(255 255 255 / .02));
  border-bottom: 1px solid rgb(255 255 255 / .06);
}
.slab-bar span {
  width: 12px; height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .15);
  background: #28C840;
}
.slab-bar span:nth-child(1) { background: #FF5F57; }
.slab-bar span:nth-child(2) { background: #FEBC2E; }

/* The window title sits dead centre of the bar, not after the dots. */
.slab-bar b {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  font: 400 12px/1 var(--sans);
  letter-spacing: .02em;
  color: rgb(245 247 255 / .5);
  pointer-events: none;
}

.slab-body {
  margin: 0;
  padding: 22px 24px 24px;
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--code-ink);
  tab-size: 4;
}
.slab-body code { color: inherit; background: none; border: 0; padding: 0; }

/* Two slabs side by side — "instead of this / do this". */
.slab-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: 20px;
  align-items: start;
}
.slab-pair .slab { box-shadow: none; }

/* ------------------------------------------------------ syntax colouring -- */
/* Applied by <bd-code>; the same class names are safe to hand-write. */

.tok-kw  { color: var(--code-kw); }
.tok-str { color: var(--code-str); }
.tok-tag { color: var(--code-tag); }
.tok-typ { color: var(--code-typ); }
.tok-com { color: var(--code-com); font-style: italic; }
.tok-num { color: var(--code-str); }
.dim     { color: var(--code-dim); }
.ok      { color: var(--code-ok); }
.bad     { color: var(--code-bad); }

/* --------------------------------------------------------------- bands --- */

.band { padding-block: clamp(64px, 8vw, 96px); border-top: 1px solid var(--border); }
/* The hero already draws the rule under itself. */
.hero + .band { border-top: 0; }
.band-alt { background: var(--bg-alt); }

.section-title { margin-bottom: 20px; max-width: 24ch; }
.section-lede {
  color: var(--ink-soft);
  max-width: 62ch;
  margin-bottom: 48px;
  font-size: 17px;
}

/* The brand gradient as a rule under each section heading. */
.section-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 18px;
  border-radius: 2px;
  background: var(--brand-grad-4);
}

.sub {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.015em;
  margin-bottom: .8rem;
  margin-top: 2.5rem;
}

/* --------------------------------------------------------------- cards --- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: 20px;
}

.card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}
.card h3 { display: flex; align-items: center; gap: 12px; margin-bottom: .7rem; }
.card p { color: var(--ink-soft); font-size: 15px; }
.card > p:last-child { margin-bottom: 0; }

.card-icon {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  flex: none;
  border-radius: 10px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--sky) 22%, transparent),
    color-mix(in srgb, var(--purple) 22%, transparent));
  color: var(--ink);
  font-size: 16px;
}

.card-note {
  font-size: 14px !important;
  color: var(--muted) !important;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  margin-top: 1.15rem !important;
  margin-bottom: 0 !important;
}

/* --------------------------------------------------------------- tiles --- */
/* One hairline grid rather than separate cards — the gap is the background
   showing through a 1px gutter. */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.tile {
  background: var(--surface);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
}
.tile h3 { margin-bottom: .5rem; }
.tile h3 code { background: none; border: 0; padding: 0; font-size: .95em; }
.tile p { font-size: 14.5px; color: var(--ink-soft); flex: 1; }

.tile-cmd {
  display: block;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--code-ink);
  background: var(--code-bg);
  border-radius: var(--radius-xs);
  padding: .7rem .85rem;
  overflow-x: auto;
  white-space: pre;
}

/* --------------------------------------------------------------- split --- */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
  margin-bottom: 3rem;
  align-items: start;
}
.split:last-child { margin-bottom: 0; }
.split p { color: var(--ink-soft); font-size: 15.5px; }

/* -------------------------------------------------------------- tables --- */

.table-scroll { overflow-x: auto; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.data-table th, .data-table td {
  text-align: left;
  padding: .55rem .9rem;
  border-bottom: 1px solid var(--border);
  color: var(--ink-soft);
  vertical-align: top;
}
.data-table thead th {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
  background: var(--surface-2);
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table td code {
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink);
  font-weight: 500;
}
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- steps --- */

.steps {
  counter-reset: step;
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  gap: 32px;
  max-width: 46rem;
}
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 72px;
  color: var(--ink-soft);
  font-size: 15.5px;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -.35rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -.04em;
  background: linear-gradient(160deg, var(--sky), var(--purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.steps strong { color: var(--ink); font-weight: 600; }

@media (max-width: 540px) {
  .steps li { padding-left: 52px; }
  .steps li::before { font-size: 36px; }
}

.docs-cta {
  margin-top: 32px;
  padding: 18px 22px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 15.5px;
  color: var(--ink-soft);
}

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

.site-footer {
  border-top: 1px solid var(--border);
  padding-block: 32px 48px;
  background: var(--bg);
  color: var(--muted);
  font-size: 13px;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  align-items: flex-start;
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: .35rem;
}
.footer-brand img { height: 26px; width: auto; display: block; }
.footer-mark {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0;
}
.footer-note { color: var(--muted); font-size: 13px; margin: 0; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
}
.footer-links a { color: var(--ink-soft); }
.footer-links a:hover { color: var(--ink); opacity: 1; }

/* The full uRadical wordmark is navy, so it needs a light plate to survive
   dark mode. In light mode the plate is near-white and simply disappears. */
.by-uradical {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin-top: 1rem;
  color: var(--muted);
  font-size: 12.5px;
}
.by-uradical img {
  height: 26px;
  width: auto;
  background: #fff;
  border-radius: 5px;
  padding: 4px 8px;
}
.by-uradical:hover { color: var(--ink); opacity: 1; }
.by-uradical:hover img { box-shadow: 0 0 0 2px var(--sky); }

/* ==========================================================================
   Web components
   Each degrades to readable HTML before (or without) its definition.
   ========================================================================== */

/* ------------------------------------------------------------- bd-code --- */

bd-code { display: block; position: relative; }

bd-code pre {
  margin: 0;
  background: var(--code-bg);
  color: var(--code-ink);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 18px 4rem 18px 22px;
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.6;
  tab-size: 4;
}
bd-code pre code { background: none; border: 0; padding: 0; color: inherit; }

bd-code .copy-btn {
  position: absolute;
  top: 9px;
  right: 9px;
  font: 500 11.5px/1 var(--sans);
  padding: .42rem .65rem;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / .16);
  background: rgb(255 255 255 / .06);
  color: rgb(245 247 255 / .75);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
bd-code .copy-btn:hover { background: rgb(255 255 255 / .12); color: #fff; }
bd-code .copy-btn[data-state="done"] {
  color: var(--code-ok);
  border-color: color-mix(in srgb, var(--code-ok) 45%, transparent);
}

/* ------------------------------------------------------------- bd-tabs --- */

bd-tabs { display: block; }

/* Before upgrade, every panel is visible with its label as a heading, so the
   content is complete with JS disabled. */
bd-tabs:not(:defined) section { display: block; margin-bottom: 1.5rem; }
bd-tabs:not(:defined) section::before {
  content: attr(data-label);
  display: block;
  font-weight: 600;
  margin-bottom: .5rem;
}

bd-tabs .tablist {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
bd-tabs .tab {
  appearance: none;
  border: 0;
  background: none;
  font: 600 14px/1 var(--sans);
  letter-spacing: -.005em;
  color: var(--muted);
  padding: .7rem .9rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
bd-tabs .tab:hover { color: var(--ink); }
bd-tabs .tab[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--purple);
}
bd-tabs section[hidden] { display: none; }
bd-tabs section > p:first-child { margin-top: 0; }
bd-tabs section p { color: var(--ink-soft); font-size: 15.5px; }

/* ----------------------------------------------------- bd-theme-toggle --- */

bd-theme-toggle { display: inline-flex; }
bd-theme-toggle:not(:defined) { display: none; }

bd-theme-toggle button {
  appearance: none;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  font-size: .95rem;
  line-height: 1;
  transition: color .15s, border-color .15s;
}
bd-theme-toggle button:hover { color: var(--ink); border-color: var(--border-strong); }


/* ---- benchmark charts -------------------------------------------------
   Bars carry emphasis, not identity: every bar is named on its own axis
   label, so colour only marks which one is binder. Values are printed on
   each bar, and the tables above carry the same numbers, so nothing here
   depends on seeing colour. */
.bench-figure {
  margin: 1.75rem 0 2rem;
}
.bench-figure .bench-panel {
  width: 100%;
  max-width: 21rem;
  height: auto;
  display: inline-block;
  vertical-align: top;
  margin: 0 1.25rem 0.75rem 0;
}
.bench-figure .panel-title {
  fill: var(--ink);
  font-size: 11.5px;
  font-weight: 700;
}
.bench-figure .bar-label {
  fill: var(--ink-soft);
  font-size: 11px;
  text-anchor: end;
}
.bench-figure .bar-value {
  fill: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.bench-figure .bar      { fill: var(--chart-bar); }
.bench-figure .bar-self { fill: var(--chart-bar-self); }
.bench-figure .axis     { stroke: var(--border-strong); stroke-width: 1; }
.bench-figure figcaption {
  color: var(--muted);
  font-size: .85rem;
  margin-top: .35rem;
  max-width: 46rem;
}
/* The landing page column is wider than the docs column, so the three
   panels sit in one row there. */
.bench-figure-wide {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  align-items: flex-start;
}
.bench-figure-wide .bench-panel { margin: 0; flex: 1 1 18rem; max-width: 22rem; }
.bench-figure-wide figcaption { flex: 1 1 100%; }

@media (prefers-reduced-motion: no-preference) {
  .bench-figure .bar, .bench-figure .bar-self { transition: opacity .15s ease; }
  .bench-figure g:hover .bar, .bench-figure g:hover .bar-self { opacity: .78; }
}