/* ═══════════════════════════════════════════════════════════════════════════
   Blacksite — product site design system

   One system for every page. The palette, radii, density, motion curves, and
   surface language are lifted from the extension's own theme.css so the site
   and the product read as the same instrument: zinc ground, hairline
   white-alpha borders, violet as an active signal rather than decoration, and
   muted signal tones for status.

   Nothing here relies on a browser default. Scrollbars, selection, focus
   rings, form controls, disclosure markers, and list markers are all drawn.

   Sections
     01  fonts
     02  tokens
     03  reset + base chrome (scrollbars, selection, focus)
     04  typography
     05  layout primitives
     06  controls — buttons, chips, inputs, disclosures
     07  code, tables, callouts
     08  site header + footer
     09  hero
     10  panel — the shared "extension window" chrome
     11  chat demo
     12  plans / tickets / data / context / map surfaces
     13  map demo
     14  feature + workflow sections
     15  learn page — agent loop stepper, concept cards
     16  docs — layout, TOC, cards, search
     17  pricing + legal
     18  motion + reveal
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 01  fonts ───────────────────────────────────────────────────────────── */
/* Lexend, bundled from the extension's own src/webview/fonts, so the site and
   the product share a typeface and neither reaches out to Google Fonts.
   Unicode ranges match shell.html. */
@font-face {
  font-family: "Lexend";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/lexend-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lexend";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/lexend-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── 02  tokens ──────────────────────────────────────────────────────────── */
:root {
  /* ground */
  --bg: #09090b;
  --bg-sunk: #060608;
  --surface: rgba(255, 255, 255, 0.025);
  --surface-2: rgba(255, 255, 255, 0.045);
  --surface-3: rgba(255, 255, 255, 0.07);
  --popover: #16161a;

  /* ink */
  --fg: #f4f4f5;
  --fg-2: #d4d4d8;
  --fg-3: #9a9aa3;
  --fg-4: #71717a;

  /* line */
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --line-3: rgba(255, 255, 255, 0.22);

  /* accent — the extension's violet, and its ramp */
  --primary: #8b5cf6;
  --primary-lift: #a78bfa;
  --primary-bright: #c4b5fd;
  --primary-dim: rgba(139, 92, 246, 0.1);
  --primary-bd: rgba(139, 92, 246, 0.32);
  --primary-glow: rgba(139, 92, 246, 0.22);
  --grad: linear-gradient(135deg, #c08de0 0%, #8b5cf6 50%, #60a5fa 100%);

  /* signal tones — muted on purpose; these are status, not decoration */
  --ok: #8db4a8;
  --warn: #c4b08d;
  --err: #c78b94;
  --info: #8aa6c0;

  /* type */
  --sans: "Lexend", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "SF Mono", "Fira Code", "Cascadia Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* shape + density */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;
  --control-h: 30px;
  --control-h-sm: 26px;

  /* elevation */
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.26), 0 1px 1px rgba(0, 0, 0, 0.18);
  --elev-2: 0 4px 14px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
  --elev-3: 0 16px 44px rgba(0, 0, 0, 0.44), 0 4px 12px rgba(0, 0, 0, 0.28);
  --elev-4: 0 30px 70px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.3);

  /* motion — one vocabulary for every transition */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.35, 0.5, 1);
  --dur-1: 0.12s;
  --dur-2: 0.18s;
  --dur-3: 0.26s;
  --dur-4: 0.45s;

  /* measure */
  --wrap: 1180px;
  --wrap-narrow: 860px;
  --measure: 70ch;

  color-scheme: dark;
}

/* Request-profile accents. The extension shifts its whole panel as one state
   when the profile changes; the site's demo does the same, from the same
   values. */
[data-profile="general"] { --mode: #8b5cf6; --mode-2: #60a5fa; }
[data-profile="plan"]    { --mode: #57cbbb; --mode-2: #6aa7e8; }
[data-profile="review"]  { --mode: #a78bfa; --mode-2: #7aa7df; }
[data-profile="debug"]   { --mode: #e6a66f; --mode-2: #d97978; }

/* ── 03  reset + base chrome ─────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  min-height: 100%;
  background: var(--bg);
  color: var(--fg-2);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 350;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Ambient field: a violet bloom off the top-right and a cool counterweight at
   the left, echoing the Map's own background. Fixed, so it does not scroll
   away and re-tint the page. */
body::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% -14%, rgba(139, 92, 246, 0.14), transparent 30rem),
    radial-gradient(circle at 4% 34%, rgba(96, 165, 250, 0.05), transparent 32rem),
    linear-gradient(180deg, #0a0a0e 0%, var(--bg) 42%, var(--bg-sunk) 100%);
}

/* Film grain. Kept under 2% so it reads as texture, never as noise. */
body::after {
  content: "";
  position: fixed;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  opacity: 0.016;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

/* Every page's real content sits above the ambient layers. */
.bs-page {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.bs-main {
  flex: 1;
}

/* The icon sprite is inlined at the top of <body> and must never take space. */
.bs-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ── scrollbars ──────────────────────────────────────────────────────────
   The extension draws its own thin scrollbars; the site does too, so a
   scrollable region never falls back to a platform widget. Firefox gets the
   standard properties, WebKit/Blink the pseudo-elements. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.13) transparent;
}

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

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.13);
  background-clip: content-box;
  transition: background-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(167, 139, 250, 0.45);
  background-clip: content-box;
  box-shadow: 0 0 6px var(--primary-glow);
}

::-webkit-scrollbar-thumb:active {
  background: var(--primary);
  background-clip: content-box;
  box-shadow: 0 0 10px var(--primary-glow);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Inner surfaces (panels, code blocks, TOC) get a tighter bar than the page. */
.bs-scroll::-webkit-scrollbar,
.bs-panel ::-webkit-scrollbar,
pre::-webkit-scrollbar,
.bs-toc::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

.bs-scroll::-webkit-scrollbar-thumb,
.bs-panel ::-webkit-scrollbar-thumb,
pre::-webkit-scrollbar-thumb,
.bs-toc::-webkit-scrollbar-thumb {
  border-width: 2px;
}

/* ── selection, focus, targets ───────────────────────────────────────────── */
::selection {
  background: rgba(139, 92, 246, 0.32);
  color: #fff;
  text-shadow: none;
}

::-moz-selection {
  background: rgba(139, 92, 246, 0.32);
  color: #fff;
}

/* One focus treatment for everything interactive. :where() keeps specificity
   at zero so a component drawing its own ring still wins. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus {
  outline: none;
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--primary-bd);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

:target {
  scroll-margin-top: 96px;
}

/* Skip link — visible only when focused, but drawn properly when it is. */
.bs-skip {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: -999px;
  padding: 10px 16px;
  border-radius: var(--r-md);
  background: var(--primary);
  color: #0b0b0f;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--elev-3);
}

.bs-skip:focus {
  left: 12px;
}

/* ── 04  typography ──────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  color: var(--fg);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.08;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 5.4vw, 4.35rem);
  letter-spacing: -0.05em;
}

h2 {
  font-size: clamp(1.85rem, 3.6vw, 2.9rem);
  letter-spacing: -0.045em;
}

h3 {
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  letter-spacing: -0.03em;
  line-height: 1.25;
}

h4 {
  font-size: 1rem;
  letter-spacing: -0.02em;
  line-height: 1.35;
}

h5, h6 {
  font-size: 0.875rem;
  letter-spacing: -0.01em;
}

/* Emphasis inside a display heading is the accent, not italics. */
h1 em, h2 em, h3 em {
  color: var(--primary-bright);
  font-style: normal;
}

p {
  text-wrap: pretty;
}

a {
  color: var(--primary-lift);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-out);
}

a:hover {
  color: var(--primary-bright);
}

/* Prose links get an underline that grows from the left on hover, rather than
   the default underline appearing all at once. */
.bs-prose a,
.bs-doc a {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  padding-bottom: 1px;
  transition: background-size var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease-out);
}

.bs-prose a:hover,
.bs-doc a:hover {
  background-size: 100% 2px;
}

strong, b {
  color: var(--fg);
  font-weight: 600;
}

em, i {
  font-style: italic;
}

small {
  font-size: 0.8125rem;
}

/* Eyebrow — the mono, tracked-out label above a heading. */
.bs-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--fg-3);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
}

.bs-eyebrow .bs-icon {
  color: var(--primary-lift);
}

/* Live dot — the same pulse the extension uses for a running agent. */
.bs-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--ok);
  box-shadow: 0 0 0 4px rgba(141, 180, 168, 0.09), 0 0 12px rgba(141, 180, 168, 0.6);
  animation: bs-pulse 1.8s var(--ease-out) infinite;
}

@keyframes bs-pulse {
  50% { opacity: 0.4; transform: scale(0.68); }
}

.bs-lede {
  max-width: var(--measure);
  color: var(--fg-3);
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  line-height: 1.62;
}

.bs-prose {
  max-width: var(--measure);
}

.bs-prose > * + * {
  margin-top: 1.1em;
}

.bs-prose ul,
.bs-prose ol {
  padding-left: 1.35em;
}

.bs-prose li + li {
  margin-top: 0.4em;
}

/* Drawn list markers rather than the browser's. */
.bs-prose ul,
.bs-doc ul {
  list-style: none;
}

.bs-prose ul > li,
.bs-doc ul > li {
  position: relative;
}

.bs-prose ul > li::before,
.bs-doc ul > li::before {
  content: "";
  position: absolute;
  top: 0.68em;
  left: -1.05em;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--primary);
  opacity: 0.65;
  transform: rotate(45deg);
}

.bs-prose ol,
.bs-doc ol {
  counter-reset: bs-ol;
  list-style: none;
}

.bs-prose ol > li,
.bs-doc ol > li {
  position: relative;
  counter-increment: bs-ol;
}

.bs-prose ol > li::before,
.bs-doc ol > li::before {
  content: counter(bs-ol);
  position: absolute;
  left: -1.9em;
  width: 1.4em;
  color: var(--primary-lift);
  font-family: var(--mono);
  font-size: 0.78em;
  font-weight: 700;
  text-align: right;
}

.bs-prose ol,
.bs-doc ol {
  padding-left: 1.9em;
}

/* ── 05  layout primitives ───────────────────────────────────────────────── */
.bs-wrap {
  width: min(var(--wrap), calc(100% - 48px));
  margin-inline: auto;
}

.bs-wrap-narrow {
  width: min(var(--wrap-narrow), calc(100% - 48px));
  margin-inline: auto;
}

.bs-section {
  padding-block: clamp(64px, 9vw, 118px);
}

.bs-section-tight {
  padding-block: clamp(44px, 6vw, 76px);
}

.bs-section-line {
  border-top: 1px solid var(--line);
}

/* Section heading: display type on the left, supporting copy on the right. */
.bs-head {
  display: grid;
  gap: clamp(20px, 4vw, 64px);
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 52px);
}

@media (min-width: 900px) {
  .bs-head {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  }
}

.bs-head-title > .bs-eyebrow {
  margin-bottom: 16px;
}

.bs-head-note {
  color: var(--fg-3);
  font-size: 0.9375rem;
}

.bs-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(272px, 100%), 1fr));
}

/* Six-card sections read better as 3 × 2 than as 4 + 2, so they opt into a
   wider minimum that resolves to three columns at the full wrap width. */
.bs-grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
}

/* ── card ────────────────────────────────────────────────────────────────── */
.bs-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.bs-card h3 {
  margin-bottom: 8px;
}

.bs-card p {
  color: var(--fg-3);
  font-size: 0.9375rem;
}

a.bs-card {
  display: block;
  color: inherit;
  transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
}

a.bs-card:hover {
  border-color: var(--primary-bd);
  color: inherit;
  transform: translateY(-3px);
  box-shadow: var(--elev-3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

a.bs-card::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 0%, rgba(139, 92, 246, 0.12), transparent 60%);
  transition: opacity var(--dur-3) var(--ease-out);
}

a.bs-card:hover::after {
  opacity: 1;
}

/* ── 06  controls ────────────────────────────────────────────────────────── */
.bs-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -0.135em;
}

.bs-btn {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: 11px 18px;
  background: var(--surface);
  color: var(--fg);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 550;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur-2) var(--ease-spring), border-color var(--dur-2) var(--ease-out),
    background var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}

.bs-btn:hover {
  border-color: var(--line-3);
  background: var(--surface-2);
  color: var(--fg);
  transform: translateY(-2px);
}

.bs-btn:active {
  transform: translateY(0);
}

.bs-btn-primary {
  border-color: transparent;
  background: linear-gradient(150deg, #b39dff, #8b5cf6 62%, #7c4ce0);
  color: #0c0a15;
  font-weight: 650;
  box-shadow: 0 8px 26px rgba(139, 92, 246, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.bs-btn-primary:hover {
  background: linear-gradient(150deg, #c4b5fd, #9b74f8 62%, #8b5cf6);
  color: #0c0a15;
  box-shadow: 0 12px 34px rgba(139, 92, 246, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.bs-btn-ghost {
  border-color: var(--line);
  background: transparent;
}

.bs-btn-ghost:hover {
  border-color: var(--primary-bd);
  background: var(--primary-dim);
}

.bs-btn-sm {
  min-height: 34px;
  padding: 7px 13px;
  font-size: 0.8125rem;
  gap: 7px;
}

.bs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* Chip — the extension's pill: a tinted border, a tinted fill, mono text. */
.bs-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  padding: 3px 9px;
  background: var(--surface-2);
  color: var(--fg-3);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
}

.bs-chip-accent {
  border-color: var(--primary-bd);
  background: var(--primary-dim);
  color: var(--primary-bright);
}

.bs-chip-ok    { border-color: rgba(141, 180, 168, 0.3); background: rgba(141, 180, 168, 0.1); color: var(--ok); }
.bs-chip-warn  { border-color: rgba(196, 176, 141, 0.3); background: rgba(196, 176, 141, 0.1); color: var(--warn); }
.bs-chip-info  { border-color: rgba(138, 166, 192, 0.3); background: rgba(138, 166, 192, 0.1); color: var(--info); }

/* Segmented control — used for the surface switcher and the profile picker. */
.bs-segment {
  display: inline-flex;
  gap: 3px;
  overflow-x: auto;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 3px;
  background: rgba(0, 0, 0, 0.28);
  scrollbar-width: none;
}

.bs-segment::-webkit-scrollbar {
  display: none;
}

.bs-segment button {
  display: inline-flex;
  min-height: var(--control-h-sm);
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 5px 11px;
  background: transparent;
  color: var(--fg-3);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 550;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-out), background var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out);
}

.bs-segment button:hover {
  background: var(--surface-2);
  color: var(--fg);
}

.bs-segment button[aria-selected="true"],
.bs-segment button.is-active {
  border-color: var(--primary-bd);
  background: var(--primary-dim);
  color: var(--primary-bright);
}

/* ── form controls ───────────────────────────────────────────────────────── */
input,
textarea,
select,
button {
  font: inherit;
  color: inherit;
}

.bs-field {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: 0 12px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--fg-4);
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}

.bs-field:focus-within {
  border-color: var(--primary-bd);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.bs-field input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--fg);
  font-size: 0.875rem;
  outline: none;
}

.bs-field input::placeholder {
  color: var(--fg-4);
}

/* The browser's own search affordances are platform widgets; draw our own. */
.bs-field input[type="search"]::-webkit-search-decoration,
.bs-field input[type="search"]::-webkit-search-cancel-button,
.bs-field input[type="search"]::-webkit-search-results-button {
  -webkit-appearance: none;
  appearance: none;
}

/* ── disclosure ──────────────────────────────────────────────────────────── */
.bs-details {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--dur-2) var(--ease-out);
}

.bs-details + .bs-details {
  margin-top: 8px;
}

.bs-details[open] {
  border-color: var(--primary-bd);
}

.bs-details > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  color: var(--fg);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  transition: background var(--dur-2) var(--ease-out);
}

/* Kill both default markers, then draw one. */
.bs-details > summary::-webkit-details-marker { display: none; }
.bs-details > summary::marker { content: ""; }

.bs-details > summary:hover {
  background: var(--surface-2);
}

.bs-details > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 1.5px solid var(--fg-3);
  border-bottom: 1.5px solid var(--fg-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur-3) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}

.bs-details[open] > summary::after {
  border-color: var(--primary-bright);
  transform: rotate(-135deg) translate(-2px, -2px);
}

.bs-details-body {
  padding: 0 16px 16px;
  color: var(--fg-3);
  font-size: 0.9375rem;
}

/* ── 07  code, tables, callouts ──────────────────────────────────────────── */
code,
kbd,
samp {
  font-family: var(--mono);
  font-size: 0.86em;
}

/* Inline code matches the extension's rendered-markdown inline code exactly.
   In prose, a long identifier is allowed to break mid-word rather than force
   the page wider than the viewport — a rare tradeoff, but a paragraph has
   nowhere to scroll to. */
:not(pre) > code {
  border: 1px solid rgba(139, 92, 246, 0.22);
  border-radius: 5px;
  padding: 1px 6px;
  background: rgba(139, 92, 246, 0.12);
  color: #c4b5fd;
  word-break: break-word;
}

/* A table cell *can* scroll (every doc table is wrapped in .bs-table-scroll),
   so identifiers there stay intact as a unit instead of breaking character by
   character — "blacksite.provider" as one word beats "blacks/ite.pro/vider"
   split across three lines. */
td code,
th code {
  word-break: normal;
  white-space: nowrap;
}

kbd {
  display: inline-block;
  min-width: 1.7em;
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: var(--r-xs);
  padding: 1px 6px;
  background: var(--surface-2);
  color: var(--fg-2);
  font-size: 0.78em;
  text-align: center;
}

/* Code block — the extension's .cb: a header rail with the language and a copy
   button, then the body. */
.bs-code {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #0d0d0f;
  box-shadow: var(--elev-2);
}

.bs-code-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 5px 8px 5px 14px;
  background: rgba(255, 255, 255, 0.035);
}

.bs-code-lang {
  color: var(--fg-3);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.bs-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 3px 9px;
  background: transparent;
  color: var(--fg-3);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-out), background var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out);
}

.bs-copy:hover {
  border-color: var(--line-2);
  background: var(--surface-2);
  color: var(--fg);
}

.bs-copy.is-done {
  border-color: rgba(141, 180, 168, 0.4);
  color: var(--ok);
}

pre {
  overflow-x: auto;
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  tab-size: 2;
}

.bs-code pre {
  background: transparent;
}

pre code {
  display: block;
  border: 0;
  padding: 0;
  background: none;
  color: #e2e8f0;
  white-space: pre;
}

/* Standalone pre (outside .bs-code) still gets the surface, never a default. */
:not(.bs-code) > pre {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #0d0d0f;
}

/* highlight.js — the extension's own signal palette, so highlighted code on
   the site is tinted exactly like highlighted code in the panel. */
.hljs { display: block; }
.hljs-comment,
.hljs-quote { color: #6b6b76; font-style: italic; }
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-type { color: #b79df5; }
.hljs-string,
.hljs-regexp,
.hljs-addition { color: var(--ok); }
.hljs-number,
.hljs-symbol,
.hljs-attr,
.hljs-attribute { color: var(--warn); }
.hljs-title,
.hljs-name,
.hljs-section,
.hljs-built_in { color: var(--info); }
.hljs-meta { color: var(--fg-4); }
.hljs-deletion { color: var(--err); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 600; }

/* ── tables ──────────────────────────────────────────────────────────────── */
.bs-table-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}

table {
  width: 100%;
  /* On a narrow viewport, width:100% alone lets auto table-layout "win" by
     crushing whichever column wraps most (usually the prose one) down to a
     sliver of unreadable single-letter lines, while nowrap cells keep their
     full width. A floor forces the table itself past the container instead —
     .bs-table-scroll then scrolls the whole table as a unit, and every column
     keeps a sane share of a sane total width. */
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.9rem;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 11px 15px;
  text-align: left;
  vertical-align: top;
}

thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom-color: var(--line-2);
  background: #101013;
  color: var(--fg-3);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

tbody tr {
  transition: background var(--dur-1) var(--ease-out);
}

tbody tr:hover {
  background: rgba(255, 255, 255, 0.022);
}

tbody tr:last-child td {
  border-bottom: 0;
}

/* ── callouts ────────────────────────────────────────────────────────────── */
.bs-note {
  position: relative;
  max-width: var(--measure);
  border: 1px solid var(--line);
  border-left: 2px solid var(--info);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 14px 18px;
  background: linear-gradient(90deg, rgba(138, 166, 192, 0.06), transparent 60%);
  color: var(--fg-3);
  font-size: 0.9375rem;
}

.bs-note > :first-child { margin-top: 0; }
.bs-note > :last-child { margin-bottom: 0; }

.bs-note-warn {
  border-left-color: var(--warn);
  background: linear-gradient(90deg, rgba(196, 176, 141, 0.06), transparent 60%);
}

.bs-note-accent {
  border-left-color: var(--primary);
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.08), transparent 60%);
}

blockquote {
  border-left: 2px solid var(--primary-bd);
  padding: 4px 0 4px 18px;
  color: var(--fg-3);
  font-style: italic;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin-block: 2.4em;
}

img {
  max-width: 100%;
  height: auto;
}

/* ── 08  site header + footer ────────────────────────────────────────────── */
.bs-header {
  position: sticky;
  z-index: 40;
  top: 0;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-3) var(--ease-out), background var(--dur-3) var(--ease-out),
    backdrop-filter var(--dur-3) var(--ease-out);
}

.bs-header.is-stuck {
  border-bottom-color: var(--line);
  background: rgba(9, 9, 11, 0.78);
  backdrop-filter: blur(16px) saturate(120%);
}

.bs-header .bs-wrap {
  display: flex;
  min-height: 68px;
  align-items: center;
  gap: 18px;
}

/* Brand — the extension's ◈ mark, drawn as three rotated squares. */
.bs-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.17em;
  line-height: 1;
}

.bs-brand:hover {
  color: var(--fg);
}

.bs-mark {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 20px;
  flex: none;
  transform: rotate(-30deg);
}

.bs-mark i {
  position: absolute;
  width: 6px;
  height: 6px;
  border: 1.5px solid var(--primary-bright);
  transform: rotate(45deg);
  transition: border-color var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-spring);
}

.bs-mark i:nth-child(1) { top: 7px; left: 1px; }
.bs-mark i:nth-child(2) { top: 1px; left: 8px; }
.bs-mark i:nth-child(3) { top: 7px; left: 14px; }

.bs-brand:hover .bs-mark i:nth-child(1) { transform: rotate(45deg) translate(-1px, 1px); }
.bs-brand:hover .bs-mark i:nth-child(3) { transform: rotate(45deg) translate(1px, -1px); }

.bs-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.bs-nav a {
  position: relative;
  border-radius: var(--r-sm);
  padding: 7px 11px;
  color: var(--fg-3);
  font-size: 0.8125rem;
  font-weight: 450;
  transition: color var(--dur-1) var(--ease-out), background var(--dur-2) var(--ease-out);
}

.bs-nav a:hover {
  background: var(--surface-2);
  color: var(--fg);
}

.bs-nav a.is-active {
  color: var(--fg);
}

.bs-nav a.is-active::after {
  content: "";
  position: absolute;
  bottom: 1px;
  left: 11px;
  width: calc(100% - 22px);
  height: 1.5px;
  border-radius: var(--r-pill);
  background: var(--primary);
}

.bs-header-cta {
  margin-left: 6px;
}

/* Mobile menu toggle — hidden until the nav collapses. */
.bs-menu-btn {
  display: none;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--fg-2);
  font-size: 18px;
  cursor: pointer;
}

@media (max-width: 900px) {
  .bs-menu-btn { display: inline-flex; }

  .bs-nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    border-bottom: 1px solid var(--line);
    padding: 10px max(24px, calc((100% - var(--wrap)) / 2)) 16px;
    background: rgba(10, 10, 13, 0.97);
    backdrop-filter: blur(16px);
    box-shadow: var(--elev-3);
  }

  .bs-nav.is-open { display: flex; }

  .bs-nav a { padding: 11px 12px; font-size: 0.9375rem; }
  .bs-nav a.is-active::after { display: none; }
  .bs-nav a.is-active { background: var(--primary-dim); color: var(--primary-bright); }

  .bs-header-cta { display: none; }
}

/* ── footer ──────────────────────────────────────────────────────────────── */
.bs-footer {
  border-top: 1px solid var(--line);
  padding-block: 44px 56px;
  color: var(--fg-4);
  font-size: 0.8125rem;
}

.bs-footer .bs-wrap {
  display: grid;
  gap: 32px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 760px) {
  .bs-footer .bs-wrap {
    grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  }
}

.bs-footer-brand p {
  max-width: 30ch;
  margin-top: 14px;
  color: var(--fg-4);
}

.bs-footer h4 {
  margin-bottom: 12px;
  color: var(--fg-3);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.bs-footer nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.bs-footer nav a {
  color: var(--fg-3);
  font-size: 0.875rem;
}

.bs-footer nav a:hover {
  color: var(--fg);
}

.bs-footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  margin-top: 40px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
}

/* ── 09  hero ────────────────────────────────────────────────────────────── */
.bs-hero {
  padding-block: clamp(56px, 8vw, 96px) clamp(52px, 7vw, 84px);
}

.bs-hero .bs-wrap {
  display: grid;
  gap: clamp(44px, 5vw, 68px);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

@media (min-width: 1040px) {
  .bs-hero .bs-wrap {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.08fr);
  }
}

.bs-hero h1 {
  margin-block: 20px 24px;
}

.bs-hero .bs-lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
}

.bs-hero .bs-actions {
  margin-top: 30px;
}

.bs-release-meta {
  min-height: 16px;
  margin-top: 14px;
  color: var(--fg-4);
  font-family: var(--mono);
  font-size: 11px;
}

/* Metric rail under the hero copy. */
.bs-metrics {
  display: flex;
  flex-wrap: wrap;
  margin-top: clamp(34px, 4vw, 52px);
}

.bs-metrics > div {
  min-width: 110px;
  flex: 1;
  border-left: 1px solid var(--line);
  padding-left: 16px;
}

.bs-metrics dt {
  color: var(--fg-4);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.bs-metrics dd {
  margin-top: 4px;
  color: var(--fg);
  font-size: 0.8125rem;
}

/* Four metrics do not fit on one phone row; two rows of two beats three and
   a stranded fourth. */
@media (max-width: 560px) {
  .bs-metrics {
    row-gap: 18px;
  }

  .bs-metrics > div {
    min-width: 0;
    flex: 0 0 50%;
  }
}

/* ── signal band ─────────────────────────────────────────────────────────── */
.bs-band {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-block: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.014);
}

@media (min-width: 760px) {
  .bs-band { grid-template-columns: repeat(4, 1fr); }
}

.bs-band > div {
  display: flex;
  min-height: 92px;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 16px;
}

@media (min-width: 760px) {
  .bs-band > div { border-bottom: 0; }
  .bs-band > div:last-child { border-right: 0; }
}

@media (max-width: 759px) {
  .bs-band > div:nth-child(2n) { border-right: 0; }
  .bs-band > div:nth-last-child(-n+2) { border-bottom: 0; }
}

.bs-band .bs-icon {
  width: 19px;
  height: 19px;
  color: var(--primary-lift);
}

.bs-band p {
  color: var(--fg-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.03em;
}

/* ── 10  panel — the shared "extension window" chrome ────────────────────
   Every product mock on the site is built from this. It reproduces the real
   webview shell: a hairline-bordered dark surface, a header rail with the ◈
   brand and icon buttons, and a body that scrolls inside itself. */
.bs-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background:
    radial-gradient(circle at 50% -10%, rgba(139, 92, 246, 0.07), transparent 42%),
    linear-gradient(175deg, #101013, #0a0a0c 70%);
  box-shadow: var(--elev-4), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  transition: background var(--dur-4) var(--ease-out), border-color var(--dur-3) var(--ease-out);
}

.bs-panel[data-active-surface="tickets"] {
  background:
    radial-gradient(circle at 84% -22%, rgba(139, 92, 246, 0.11), transparent 40%),
    linear-gradient(175deg, #101013, #0a0a0c 70%);
}

.bs-panel[data-active-surface="map"] {
  border-color: rgba(143, 169, 214, 0.2);
  background:
    radial-gradient(circle at 55% 35%, rgba(96, 165, 250, 0.08), transparent 36%),
    linear-gradient(180deg, #070911, #05070d);
}

.bs-panel[data-profile]:not([data-active-surface="chat"])::before {
  opacity: 0.22;
}

/* The profile accent bleeds into the panel edge, exactly like the extension's
   .request-mode-shell rail. */
.bs-panel[data-profile]::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0 auto 0 0;
  width: 1px;
  background: linear-gradient(180deg, transparent 4%, var(--mode) 32%, var(--mode-2) 72%, transparent 96%);
  box-shadow: 0 0 18px var(--mode);
  opacity: 0.62;
  pointer-events: none;
  transition: background var(--dur-4) var(--ease-out);
}

.bs-panel-head {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid var(--line);
  padding: 0 10px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
  transition: border-color var(--dur-4) var(--ease-out);
}

.bs-panel[data-profile] .bs-panel-head {
  border-bottom-color: color-mix(in srgb, var(--mode) 22%, var(--line));
}

/* Brand text uses the extension's gradient fill. */
.bs-panel-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.bs-panel[data-profile] .bs-panel-brand {
  background: linear-gradient(135deg, #fff 0%, var(--mode) 55%, var(--mode-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Request-profile chip in the panel header. */
.bs-mode-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 1px solid color-mix(in srgb, var(--mode, var(--primary)) 34%, var(--line));
  border-radius: var(--r-pill);
  padding: 1px 6px;
  background: color-mix(in srgb, var(--mode, var(--primary)) 10%, transparent);
  color: color-mix(in srgb, var(--mode, var(--primary)) 76%, var(--fg));
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
  transition: all var(--dur-4) var(--ease-out);
}

.bs-mode-chip .bs-icon {
  width: 9px;
  height: 9px;
}

.bs-panel-tools {
  display: flex;
  gap: 2px;
  margin-left: auto;
}

.bs-panel-tools span {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--fg-4);
  transition: color var(--dur-1) var(--ease-out), background var(--dur-2) var(--ease-out);
}

.bs-panel-tools span .bs-icon {
  width: 13px;
  height: 13px;
}

.bs-panel-tools span:hover {
  background: var(--surface-3);
  color: var(--fg-2);
}

.bs-panel-tools span.is-on {
  border-color: var(--primary-bd);
  background: var(--primary-dim);
  color: var(--primary-bright);
}

.bs-panel-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

/* A footer rail with the live status readout. */
.bs-panel-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 26px;
  border-top: 1px solid var(--line);
  padding: 0 11px;
  background: rgba(0, 0, 0, 0.28);
  color: var(--fg-4);
  font-family: var(--mono);
  font-size: 9px;
}

.bs-panel-foot .bs-dot {
  width: 5px;
  height: 5px;
  box-shadow: none;
}

.bs-panel-foot span:last-child {
  margin-left: auto;
}

/* ── 11  chat demo ───────────────────────────────────────────────────────── */
.bs-demo {
  position: relative;
}

.bs-demo .bs-panel {
  height: 486px;
}

@media (max-width: 1039px) {
  .bs-demo .bs-panel { height: 448px; }
}

.bs-transcript {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding: 14px 13px 8px;
  scroll-behavior: smooth;
}

.bs-turn {
  display: flex;
  max-width: 100%;
  flex-direction: column;
  animation: bs-turn-in var(--dur-4) var(--ease-out) both;
}

@keyframes bs-turn-in {
  from { opacity: 0; transform: translateY(7px); }
}

.bs-turn-label {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
  color: var(--fg-4);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.bs-turn-label .bs-icon {
  width: 10px;
  height: 10px;
}

/* User turn — the extension's .user-bubble: top-lit brand gradient with a
   hairline inner highlight. */
.bs-turn-user {
  align-self: flex-end;
  max-width: 88%;
  align-items: flex-end;
}

.bs-turn-user .bs-bubble {
  border: 1px solid color-mix(in srgb, var(--mode, var(--primary)) 30%, transparent);
  border-radius: var(--r-md) var(--r-md) 3px var(--r-md);
  padding: 9px 12px;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--mode, var(--primary)) 20%, transparent),
    color-mix(in srgb, var(--mode, var(--primary)) 8%, transparent)
  );
  box-shadow:
    0 2px 10px color-mix(in srgb, var(--mode, var(--primary)) 13%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
  color: var(--fg);
  font-size: 12px;
  line-height: 1.5;
}

.bs-turn-agent .bs-bubble {
  color: var(--fg-2);
  font-size: 12px;
  line-height: 1.58;
}

.bs-turn-agent .bs-bubble p + p {
  margin-top: 7px;
}

/* Tool log — one row per call, matching ToolLog's density. */
.bs-toollog {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, 0.32);
}

.bs-toolrow {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 27px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 0 9px;
  color: var(--fg-3);
  font-family: var(--mono);
  font-size: 9px;
  animation: bs-turn-in var(--dur-3) var(--ease-out) both;
}

.bs-toolrow:last-child {
  border-bottom: 0;
}

.bs-toolrow .bs-icon {
  width: 11px;
  height: 11px;
  flex: none;
}

.bs-toolrow b {
  width: 58px;
  flex: none;
  color: var(--fg-4);
  font-size: 8px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.bs-toolrow code {
  min-width: 0;
  overflow: hidden;
  border: 0;
  padding: 0;
  background: none;
  color: var(--fg-2);
  font-size: 9px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bs-toolrow small {
  margin-left: auto;
  flex: none;
  color: var(--fg-4);
  font-size: 8px;
  white-space: nowrap;
}

.bs-tool-read  { color: var(--info); }
.bs-tool-map   { color: var(--primary-lift); }
.bs-tool-plan  { color: var(--warn); }
.bs-tool-edit  { color: var(--err); }
.bs-tool-ok    { color: var(--ok); }
.bs-tool-shell { color: var(--fg-3); }

/* Approval card — the diff gate, as it actually appears. */
.bs-approval {
  overflow: hidden;
  border: 1px solid rgba(196, 176, 141, 0.35);
  border-radius: var(--r-sm);
  background: rgba(196, 176, 141, 0.06);
}

.bs-approval-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  color: var(--warn);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.bs-approval-head .bs-icon {
  width: 11px;
  height: 11px;
}

.bs-approval-head code {
  margin-left: auto;
  border: 0;
  padding: 0;
  background: none;
  color: var(--fg-3);
  font-size: 9px;
  letter-spacing: 0;
  text-transform: none;
}

.bs-diff {
  border-top: 1px solid rgba(196, 176, 141, 0.2);
  padding: 7px 9px;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.65;
}

.bs-diff div {
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bs-diff .bs-del { color: var(--err); background: rgba(199, 139, 148, 0.08); }
.bs-diff .bs-add { color: var(--ok); background: rgba(141, 180, 168, 0.08); }
.bs-diff .bs-ctx { color: var(--fg-4); }

.bs-approval-acts {
  display: flex;
  gap: 6px;
  border-top: 1px solid rgba(196, 176, 141, 0.2);
  padding: 7px 9px;
}

.bs-approval-acts span {
  border: 1px solid var(--line-2);
  border-radius: var(--r-xs);
  padding: 3px 9px;
  color: var(--fg-3);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 650;
  text-transform: uppercase;
}

.bs-approval-acts span:first-child {
  border-color: rgba(141, 180, 168, 0.4);
  background: rgba(141, 180, 168, 0.12);
  color: var(--ok);
}

/* Question card — the extension's left-rail-accented card. */
.bs-qcard {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 11px;
  background: var(--surface);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--mode, var(--primary)) 70%, transparent);
}

.bs-qcard > p {
  margin-bottom: 8px;
  color: var(--fg);
  font-size: 11px;
  font-weight: 500;
}

.bs-qcard-opts {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.bs-qcard-opts span {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 6px 8px;
  color: var(--fg-2);
  font-size: 10px;
}

.bs-qcard-opts span::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: none;
  border: 1.5px solid var(--fg-4);
  border-radius: var(--r-pill);
}

.bs-qcard-opts span.is-picked {
  border-color: color-mix(in srgb, var(--mode, var(--primary)) 40%, transparent);
  background: color-mix(in srgb, var(--mode, var(--primary)) 10%, transparent);
  color: var(--fg);
}

.bs-qcard-opts span.is-picked::before {
  border-color: var(--mode, var(--primary));
  background: var(--mode, var(--primary));
  box-shadow: inset 0 0 0 2px #0d0d10;
}

.bs-qcard-opts em {
  margin-left: auto;
  color: var(--fg-4);
  font-size: 8px;
  font-style: normal;
}

/* Thinking block. */
.bs-thinking {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-sm);
  padding: 6px 9px;
  color: var(--fg-4);
  font-family: var(--mono);
  font-size: 9px;
}

.bs-thinking .bs-icon {
  width: 11px;
  height: 11px;
  color: var(--mode, var(--primary));
}

/* Streaming caret, from the extension. */
.bs-caret {
  display: inline-block;
  width: 2px;
  height: 0.95em;
  margin-left: 2px;
  border-radius: 1px;
  background: var(--mode, var(--primary));
  vertical-align: text-bottom;
  animation: bs-blink 1s step-end infinite;
}

@keyframes bs-blink {
  50% { opacity: 0; }
}

/* ── input dock ──────────────────────────────────────────────────────────── */
.bs-dock {
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-top: 1px solid var(--line);
  padding: 9px 10px 10px;
  background: rgba(0, 0, 0, 0.26);
}

.bs-dock-modes {
  display: flex;
  align-items: center;
  gap: 4px;
}

.bs-dock-modes > span:first-child {
  margin-right: 2px;
  color: var(--fg-4);
  font-size: 8px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bs-dock-modes button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  padding: 3px 7px;
  background: transparent;
  color: var(--fg-3);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-out), background var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out);
}

.bs-dock-modes button .bs-icon {
  width: 10px;
  height: 10px;
}

.bs-dock-modes button:hover {
  background: var(--surface-2);
  color: var(--fg);
}

.bs-dock-modes button.is-active {
  border-color: color-mix(in srgb, var(--mode, var(--primary)) 36%, transparent);
  background: color-mix(in srgb, var(--mode, var(--primary)) 12%, transparent);
  color: color-mix(in srgb, var(--mode, var(--primary)) 70%, var(--fg));
}

.bs-dock-input {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: 0 5px 0 10px;
  background: rgba(0, 0, 0, 0.42);
  color: var(--fg-4);
  font-size: 11px;
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}

.bs-demo.is-running .bs-dock-input {
  border-color: color-mix(in srgb, var(--mode, var(--primary)) 40%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mode, var(--primary)) 12%, transparent);
}

.bs-dock-input > .bs-icon {
  width: 13px;
  height: 13px;
  color: var(--fg-4);
}

.bs-dock-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bs-dock-send {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--mode, var(--primary));
  color: #12101c;
  cursor: pointer;
  transition: background var(--dur-3) var(--ease-out), transform var(--dur-2) var(--ease-spring);
}

.bs-dock-send:hover {
  transform: scale(1.08);
}

.bs-dock-send .bs-icon {
  width: 13px;
  height: 13px;
}

.bs-dock-hint {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--fg-4);
  font-family: var(--mono);
  font-size: 8px;
}

/* ── demo controls (site-only chrome around the panel) ───────────────────── */
.bs-demo-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.bs-demo-note {
  color: var(--fg-4);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
}

/* Progress hairline showing how far through the scripted run we are. */
.bs-demo-progress {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  height: 1.5px;
  width: 0;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--mode, var(--primary)), var(--mode-2, var(--primary-bright)));
  box-shadow: 0 0 10px var(--mode, var(--primary));
  transition: width var(--dur-4) var(--ease-out);
}

/* ── 12  surface recreations: plans, tickets, data, context, map ─────────── */
.bs-surface {
  display: none;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  animation: bs-turn-in var(--dur-3) var(--ease-out) both;
}

.bs-surface.is-shown {
  display: flex;
}

.bs-surface-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}

/* section label inside a surface */
.bs-surface-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 9px;
  color: var(--fg-4);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bs-surface-label .bs-icon {
  width: 11px;
  height: 11px;
  color: var(--primary-lift);
}

/* plans */
.bs-plan-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 12px;
}

.bs-plan-head h3 {
  color: var(--fg);
  font-size: 15px;
}

.bs-plan-head p {
  margin-top: 3px;
  color: var(--fg-4);
  font-size: 10px;
}

.bs-phases {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bs-phase {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 9px 10px;
  background: var(--surface);
  transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}

.bs-phase-n {
  color: var(--fg-4);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 650;
}

.bs-phase-main {
  min-width: 0;
  flex: 1;
}

.bs-phase-main strong {
  display: block;
  overflow: hidden;
  color: var(--fg);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bs-phase-main small {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: var(--fg-4);
  font-family: var(--mono);
  font-size: 8px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bs-phase-main small code {
  border: 0;
  padding: 0;
  background: none;
  color: var(--primary-lift);
  font-size: inherit;
}

.bs-phase-state {
  display: grid;
  width: 17px;
  height: 17px;
  flex: none;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  color: var(--fg-4);
}

.bs-phase-state .bs-icon {
  width: 9px;
  height: 9px;
}

.bs-phase.is-done .bs-phase-state {
  border-color: rgba(141, 180, 168, 0.4);
  background: rgba(141, 180, 168, 0.12);
  color: var(--ok);
}

.bs-phase.is-current {
  border-color: var(--primary-bd);
  background: var(--primary-dim);
}

.bs-phase.is-current .bs-phase-state {
  border-color: var(--primary-bd);
  color: var(--primary-bright);
}

.bs-phase.is-current .bs-phase-state .bs-icon {
  animation: bs-spin 1.4s linear infinite;
}

@keyframes bs-spin {
  to { transform: rotate(360deg); }
}

/* Tickets — mirrors the compact queue cards, status tabs, and "Next up" rail
   from TicketsApp rather than inventing a generic task list. */
.bs-ticket-surface {
  background:
    radial-gradient(circle at 82% -22%, rgba(139, 92, 246, 0.09), transparent 36%),
    var(--bg);
}

.bs-ticket-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.bs-ticket-head .bs-surface-label {
  margin-bottom: 3px;
}

.bs-ticket-head h3 {
  color: var(--fg);
  font-size: 15px;
}

.bs-ticket-head p:not(.bs-surface-label) {
  margin-top: 2px;
  color: var(--fg-4);
  font-size: 9px;
}

.bs-ticket-head .bs-dot {
  width: 4px;
  height: 4px;
  box-shadow: none;
}

.bs-ticket-tabs {
  display: flex;
  gap: 3px;
  margin-bottom: 8px;
}

.bs-ticket-tabs span {
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  padding: 3px 7px;
  color: var(--fg-4);
  font-size: 8px;
}

.bs-ticket-tabs span.is-active {
  border-color: var(--primary-bd);
  background: var(--primary-dim);
  color: var(--primary-bright);
}

.bs-ticket-tabs em {
  margin-left: 2px;
  opacity: 0.62;
  font-style: normal;
}

.bs-ticket-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  color: var(--fg-4);
  font-size: 9px;
}

.bs-ticket-compose > * {
  min-height: 25px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 5px 7px;
}

.bs-ticket-compose em {
  min-width: 62px;
  color: var(--fg-3);
  font-style: normal;
}

.bs-ticket-compose b {
  border-color: var(--primary-bd);
  background: var(--primary);
  color: #12101c;
  font-weight: 700;
}

.bs-ticket-next {
  display: flex;
  flex-direction: column;
  margin-bottom: 7px;
  border: 1px solid var(--primary-bd);
  border-radius: var(--r-sm);
  padding: 8px 9px;
  background: linear-gradient(100deg, var(--primary-dim), rgba(255, 255, 255, 0.02));
  box-shadow: inset 2px 0 0 var(--primary);
}

.bs-ticket-next small {
  color: var(--primary-lift);
  font-size: 7px;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.bs-ticket-next strong {
  margin-top: 2px;
  color: var(--fg);
  font-size: 10px;
  font-weight: 600;
}

.bs-ticket-next span {
  margin-top: 1px;
  color: var(--fg-4);
  font-size: 8px;
}

.bs-ticket-card {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px 9px;
  background: var(--surface);
}

.bs-ticket-card + .bs-ticket-card {
  margin-top: 6px;
}

.bs-ticket-card.is-high {
  box-shadow: inset 2px 0 0 var(--warn);
}

.bs-ticket-card code {
  flex: none;
  border: 0;
  padding: 0;
  background: none;
  color: var(--fg-4);
  font-size: 8px;
  font-weight: 700;
}

.bs-ticket-card strong {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: var(--fg);
  font-size: 9.5px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bs-ticket-card .bs-chip {
  flex: none;
  padding: 1px 5px;
  font-size: 7px;
}

.bs-ticket-priority {
  color: var(--warn);
  font-size: 7px;
}

/* plan document attachment */
.bs-plandoc {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  color: var(--fg-3);
  font-size: 10px;
}

.bs-plandoc .bs-icon {
  width: 12px;
  height: 12px;
  color: var(--info);
}

.bs-plandoc em {
  margin-left: auto;
  color: var(--fg-4);
  font-family: var(--mono);
  font-size: 8px;
  font-style: normal;
}

/* data workbench */
.bs-data {
  display: grid;
  flex: 1;
  grid-template-columns: 128px minmax(0, 1fr);
  min-height: 0;
}

.bs-data-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  padding: 5px 8px 0;
}

.bs-data-tabs span {
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  padding: 4px 9px;
  color: var(--fg-4);
  font-size: 10px;
}

.bs-data-tabs span.is-active {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--fg);
}

.bs-data-side {
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  padding: 11px 8px;
}

.bs-data-side b {
  margin-bottom: 3px;
  color: var(--fg-3);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bs-data-side span {
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--r-xs);
  padding: 5px 6px;
  color: var(--fg-3);
  font-family: var(--mono);
  font-size: 9px;
}

.bs-data-side span .bs-icon {
  width: 10px;
  height: 10px;
  color: var(--fg-4);
}

.bs-data-side span.is-active {
  background: var(--primary-dim);
  color: var(--primary-bright);
}

.bs-data-side span.is-active .bs-icon {
  color: var(--primary-lift);
}

.bs-data-side small {
  margin-top: auto;
  padding-top: 8px;
  color: var(--fg-4);
  font-family: var(--mono);
  font-size: 8px;
}

.bs-data-main {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 9px;
  overflow-y: auto;
  padding: 11px;
}

.bs-query {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 9px 10px 32px;
  background: #08080a;
}

.bs-query-tag {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--r-sm) 0 var(--r-sm) 0;
  padding: 2px 7px;
  background: var(--primary-dim);
  color: var(--primary-bright);
  font-family: var(--mono);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.09em;
}

.bs-query pre {
  padding: 12px 0 0;
  font-size: 10px;
  line-height: 1.7;
}

.bs-query button {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  border-radius: var(--r-xs);
  padding: 3px 8px;
  background: var(--primary);
  color: #12101c;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  cursor: pointer;
}

.bs-query button .bs-icon {
  width: 9px;
  height: 9px;
}

.bs-results {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.bs-results-head {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding: 6px 9px;
  color: var(--fg-3);
  font-family: var(--mono);
  font-size: 8px;
}

.bs-results table {
  font-family: var(--mono);
  font-size: 9px;
}

.bs-results th,
.bs-results td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 5px 9px;
}

.bs-results thead th {
  position: static;
  background: rgba(255, 255, 255, 0.02);
  font-size: 8px;
  letter-spacing: 0.06em;
}

.bs-results td {
  color: var(--fg-2);
}

.bs-results td:last-child {
  color: var(--warn);
  text-align: right;
}

/* base context */
.bs-topic {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 11px;
  background: var(--surface);
}

.bs-topic + .bs-topic {
  margin-top: 7px;
}

.bs-topic-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bs-topic-head strong {
  color: var(--fg);
  font-size: 11px;
  font-weight: 500;
}

/* Drawn toggle — no native checkbox anywhere on the site. */
.bs-toggle {
  position: relative;
  width: 24px;
  height: 13px;
  flex: none;
  margin-left: auto;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.4);
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}

.bs-toggle::after {
  content: "";
  position: absolute;
  top: 1.5px;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--fg-4);
  transition: transform var(--dur-2) var(--ease-spring), background var(--dur-2) var(--ease-out);
}

.bs-toggle.is-on {
  border-color: var(--primary-bd);
  background: var(--primary-dim);
}

.bs-toggle.is-on::after {
  background: var(--primary-bright);
  transform: translateX(10px);
}

.bs-topic p {
  margin-top: 6px;
  color: var(--fg-3);
  font-size: 10px;
  line-height: 1.55;
}

.bs-topic-files {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.bs-topic-files span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 2px 6px;
  color: var(--fg-3);
  font-family: var(--mono);
  font-size: 8px;
}

.bs-topic-files span .bs-icon {
  width: 9px;
  height: 9px;
  color: var(--fg-4);
}

/* notes timeline */
.bs-note-item {
  position: relative;
  padding-left: 20px;
}

.bs-note-item + .bs-note-item {
  margin-top: 12px;
}

.bs-note-item::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 4px;
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--primary-lift);
  border-radius: var(--r-pill);
  background: var(--bg);
}

.bs-note-item::after {
  content: "";
  position: absolute;
  top: 15px;
  bottom: -12px;
  left: 7px;
  width: 1px;
  background: var(--line);
}

.bs-note-item:last-child::after {
  display: none;
}

.bs-note-item h4 {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--fg);
  font-size: 11px;
  font-weight: 500;
}

.bs-note-item p {
  margin-top: 4px;
  color: var(--fg-3);
  font-size: 10px;
  line-height: 1.55;
}

.bs-note-item code {
  border: 0;
  padding: 0;
  background: none;
  color: var(--fg-4);
  font-size: 8px;
}

/* Compact Map view in the surface switcher. The larger example below remains
   the interactive teaching surface; this one mirrors the extension's panel
   hierarchy and live-agent chip at sidebar scale. */
.bs-mini-map {
  position: relative;
  flex: 1;
  overflow: hidden;
  background:
    radial-gradient(circle at 64% 50%, rgba(139, 92, 246, 0.07), transparent 38%),
    linear-gradient(180deg, #070911, #05070d);
}

.bs-mini-map-grid {
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background-image:
    linear-gradient(rgba(143, 169, 214, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 169, 214, 0.14) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(circle at 60% 55%, #000, transparent 76%);
}

.bs-mini-map-stars i {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 6px var(--c), 0 0 18px color-mix(in srgb, var(--c) 45%, transparent);
  animation: bs-map-star 2.6s ease-in-out infinite alternate;
}

.bs-mini-map-stars i:nth-child(2n) { animation-delay: -1.2s; }
.bs-mini-map-stars i:nth-child(3n) { animation-delay: -2s; }

@keyframes bs-map-star {
  to { opacity: 0.58; transform: scale(0.82); }
}

.bs-mini-map-command,
.bs-mini-map-inspector,
.bs-mini-map-live {
  position: absolute;
  z-index: 2;
  border: 1px solid rgba(199, 214, 239, 0.16);
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, rgba(18, 19, 27, 0.96), rgba(9, 10, 16, 0.94));
  box-shadow: var(--elev-2), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(14px);
}

.bs-mini-map-command {
  top: 10px;
  left: 10px;
  width: min(230px, calc(100% - 20px));
  padding: 9px;
}

.bs-mini-map-command .bs-surface-label {
  margin-bottom: 3px;
}

.bs-mini-map-command h3 {
  font-size: 12px;
}

.bs-mini-map-command > small {
  display: block;
  margin-top: 2px;
  color: var(--fg-4);
  font-size: 7.5px;
}

.bs-mini-map-command dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-top: 8px;
}

.bs-mini-map-command dl div {
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 4px 5px;
}

.bs-mini-map-command dt {
  color: var(--fg-4);
  font-size: 7px;
  text-transform: uppercase;
}

.bs-mini-map-command dd {
  color: var(--fg);
  font-family: var(--mono);
  font-size: 9px;
}

.bs-mini-map-search {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 5px 6px;
  color: var(--fg-4);
  font-size: 8px;
}

.bs-mini-map-search .bs-icon {
  width: 9px;
  height: 9px;
}

.bs-mini-map-filters {
  display: flex;
  gap: 3px;
  margin-top: 5px;
}

.bs-mini-map-filters span {
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 2px 5px;
  color: var(--fg-4);
  font-size: 7px;
}

.bs-mini-map-filters span.is-on {
  border-color: rgba(94, 234, 212, 0.32);
  background: rgba(94, 234, 212, 0.09);
  color: #b9f5ec;
}

.bs-mini-map-live {
  top: 11px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: 45%;
  padding: 5px 7px;
  color: var(--fg-3);
  font-size: 7.5px;
}

.bs-mini-map-live .bs-dot {
  width: 5px;
  height: 5px;
  background: #4fc3f7;
  box-shadow: 0 0 8px #4fc3f7;
}

.bs-mini-map-live code {
  overflow: hidden;
  border: 0;
  padding: 0;
  background: none;
  color: #8bd8f4;
  font-size: inherit;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bs-mini-map-inspector {
  right: 10px;
  bottom: 10px;
  display: flex;
  width: 180px;
  max-width: calc(100% - 20px);
  flex-direction: column;
  padding: 9px;
}

.bs-mini-map-inspector small {
  color: var(--primary-lift);
  font-size: 7px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bs-mini-map-inspector strong {
  margin-top: 3px;
  color: var(--fg);
  font-size: 10px;
}

.bs-mini-map-inspector code {
  overflow: hidden;
  margin-top: 1px;
  border: 0;
  padding: 0;
  background: none;
  color: var(--fg-4);
  font-size: 7.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bs-mini-map-inspector span {
  margin-top: 7px;
  border-top: 1px solid var(--line);
  padding-top: 6px;
  color: var(--fg-3);
  font-size: 7.5px;
}

@media (max-width: 560px) {
  .bs-mini-map-live { display: none; }
  .bs-mini-map-command { width: min(220px, calc(100% - 20px)); }
}

/* ── 13  map demo ────────────────────────────────────────────────────────── */
.bs-map {
  position: relative;
  height: 640px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background:
    radial-gradient(circle at 50% -6%, rgba(139, 92, 246, 0.12), transparent 36%),
    linear-gradient(180deg, #070911, #05070d);
  box-shadow: var(--elev-4), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  touch-action: none;
}

.bs-map::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 44%, rgba(3, 5, 11, 0.5));
}

.bs-map-canvas,
.bs-map-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bs-map-canvas {
  z-index: 1;
  cursor: grab;
}

.bs-map-canvas.is-dragging {
  cursor: grabbing;
}

.bs-map-grid {
  opacity: 0.2;
  background-image:
    linear-gradient(rgba(160, 185, 228, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160, 185, 228, 0.08) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(ellipse at center, black, transparent 78%);
}

/* Floating control-plane panels, matching .map-panel in the extension. */
.bs-map-panel {
  position: absolute;
  z-index: 2;
  border: 1px solid rgba(199, 214, 239, 0.18);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(18, 19, 27, 0.96), rgba(9, 10, 16, 0.94));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(18px) saturate(112%);
}

.bs-map-cmd {
  top: 14px;
  left: 14px;
  width: 306px;
  padding: 12px;
}

.bs-map-cmd-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.bs-map-cmd-title .bs-eyebrow {
  font-size: 8px;
  letter-spacing: 0.12em;
}

.bs-map-cmd-title h3 {
  margin-top: 3px;
  font-size: 14px;
}

.bs-map-subtitle {
  margin-top: 4px;
  color: var(--fg-4);
  font-size: 9px;
  line-height: 1.4;
}

.bs-map-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  border: 1px solid rgba(141, 180, 168, 0.3);
  border-radius: var(--r-pill);
  padding: 2px 8px;
  background: rgba(141, 180, 168, 0.1);
  color: var(--ok);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 650;
}

.bs-map-stats {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(3, 1fr);
  margin: 11px 0 9px;
}

.bs-map-stats > div {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 5px 7px;
  background: var(--surface);
}

.bs-map-stats small {
  display: block;
  color: var(--fg-4);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bs-map-stats strong {
  display: block;
  margin-top: 1px;
  color: var(--fg);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 650;
}

.bs-map-search {
  min-height: 31px;
  padding-inline: 9px;
  border-radius: var(--r-sm);
}

.bs-map-search .bs-icon {
  width: 12px;
  height: 12px;
}

.bs-map-search input {
  font-size: 11px;
}

.bs-map-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.bs-map-filter-label {
  margin: 9px 0 5px;
  color: var(--fg-4);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.bs-map-filters button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  padding: 4px 8px;
  background: var(--surface-2);
  color: var(--fg-3);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-out), background var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out);
}

.bs-map-filters button i {
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: currentColor;
}

.bs-map-filters button:hover {
  background: var(--surface-3);
  color: var(--fg);
}

.bs-map-filters button.is-active {
  border-color: var(--primary-bd);
  background: var(--primary-dim);
  color: var(--primary-bright);
}

.bs-map-hint {
  margin-top: 9px;
  color: var(--fg-4);
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1.5;
}

.bs-map-inspector {
  bottom: 14px;
  left: 14px;
  width: 306px;
  padding: 13px;
}

.bs-map-inspector .bs-eyebrow {
  margin-bottom: 9px;
  font-size: 8px;
}

.bs-inspector-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bs-inspector-head > span {
  display: grid;
  width: 30px;
  height: 30px;
  flex: none;
  place-items: center;
  border: 1px solid var(--primary-bd);
  border-radius: var(--r-sm);
  background: var(--primary-dim);
  color: var(--primary-bright);
}

.bs-inspector-head > span .bs-icon {
  width: 15px;
  height: 15px;
}

.bs-inspector-head h3 {
  font-size: 13px;
}

.bs-inspector-head p {
  margin-top: 1px;
  color: var(--fg-4);
  font-family: var(--mono);
  font-size: 9px;
  word-break: break-all;
}

.bs-map-inspector dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 11px 0 10px;
  border-block: 1px solid var(--line);
  padding-block: 9px;
}

.bs-map-inspector dt {
  color: var(--fg-4);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bs-map-inspector dd {
  margin-top: 2px;
  color: var(--fg-2);
  font-family: var(--mono);
  font-size: 10px;
}

.bs-inspector-copy {
  margin-bottom: 10px;
  color: var(--fg-3);
  font-size: 10px;
  line-height: 1.55;
}

.bs-map-inspector button {
  display: flex;
  width: 100%;
  min-height: 30px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--primary-bd);
  border-radius: var(--r-sm);
  padding: 6px 9px;
  background: var(--primary-dim);
  color: var(--primary-bright);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 650;
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-out);
}

.bs-map-inspector button:hover {
  background: rgba(139, 92, 246, 0.2);
}

.bs-map-inspector button .bs-icon {
  width: 11px;
  height: 11px;
  margin-left: auto;
}

.bs-map-key {
  right: 14px;
  bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 9px 11px;
  color: var(--fg-3);
  font-family: var(--mono);
  font-size: 8px;
}

.bs-map-key span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.bs-map-key i {
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  box-shadow: 0 0 8px currentColor;
  background: currentColor;
}

.bs-map-zoom {
  top: 14px;
  right: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.bs-map-zoom button {
  display: grid;
  width: 31px;
  height: 30px;
  place-items: center;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease-out);
}

.bs-map-zoom button:last-child {
  border-bottom: 0;
}

.bs-map-zoom button:hover {
  background: var(--primary-dim);
  color: var(--fg);
}

.bs-map-zoom .bs-icon {
  width: 14px;
  height: 14px;
}

@media (max-width: 900px) {
  .bs-map { height: 700px; }
  .bs-map-cmd { top: 12px; left: 12px; right: 12px; width: auto; }
  .bs-map-inspector { bottom: 12px; left: 12px; right: 12px; width: auto; }
  .bs-map-key { display: none; }
  .bs-map-zoom { top: auto; bottom: 232px; right: 12px; }
  .bs-map-zoom button { width: 38px; height: 38px; }
}

/* ── 14  feature + workflow sections ─────────────────────────────────────── */
.bs-steps {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.bs-step {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
}

.bs-step > span {
  color: var(--fg-4);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.12em;
}

.bs-orbit {
  position: relative;
  display: grid;
  width: 48px;
  height: 48px;
  margin: 26px 0 18px;
  place-items: center;
  border-radius: var(--r-pill);
}

.bs-orbit::before {
  content: "";
  position: absolute;
  inset: -9px;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  opacity: 0.22;
}

.bs-orbit .bs-icon {
  width: 21px;
  height: 21px;
}

.bs-orbit-violet { background: rgba(139, 92, 246, 0.12); color: var(--primary-lift); }
.bs-orbit-warn   { background: rgba(196, 176, 141, 0.12); color: var(--warn); }
.bs-orbit-ok     { background: rgba(141, 180, 168, 0.12); color: var(--ok); }
.bs-orbit-info   { background: rgba(138, 166, 192, 0.12); color: var(--info); }

.bs-step h3 {
  margin-bottom: 7px;
}

.bs-step p {
  color: var(--fg-3);
  font-size: 0.875rem;
}

.bs-step small {
  display: block;
  margin-top: 16px;
  color: var(--fg-4);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.08em;
}

/* Feature bento. */
.bs-bento {
  display: grid;
  gap: 13px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 720px) {
  .bs-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1060px) {
  .bs-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 246px; }
  .bs-bento-tall { grid-row: span 2; }
  .bs-bento-wide { grid-column: span 2; }
}

.bs-bento > article {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
  transition: border-color var(--dur-3) var(--ease-out);
}

.bs-bento > article:hover {
  border-color: var(--line-2);
}

.bs-bento-tall {
  background:
    radial-gradient(circle at 50% 108%, rgba(139, 92, 246, 0.2), transparent 46%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)) !important;
}

.bs-bento > article > span {
  color: var(--fg-4);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.1em;
}

.bs-bento h3 {
  max-width: 22ch;
  margin: 14px 0 8px;
}

.bs-bento-tall h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.72rem);
}

.bs-bento p {
  max-width: 40ch;
  color: var(--fg-3);
  font-size: 0.8125rem;
}

/* Decorative mini graphics inside the bento tiles. */
.bs-mini {
  position: relative;
  margin-top: auto;
  padding-top: 18px;
}

.bs-mini-graph {
  height: 116px;
}

.bs-mini-graph i {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--primary-lift);
  box-shadow: 0 0 14px var(--primary-lift);
  animation: bs-float 6s var(--ease-out) infinite;
}

.bs-mini-graph i:nth-child(1) { top: 52%; left: 12%; animation-delay: 0s; }
.bs-mini-graph i:nth-child(2) { top: 22%; left: 34%; background: var(--ok); box-shadow: 0 0 14px var(--ok); animation-delay: .9s; }
.bs-mini-graph i:nth-child(3) { top: 66%; left: 56%; background: var(--warn); box-shadow: 0 0 14px var(--warn); animation-delay: 1.8s; }
.bs-mini-graph i:nth-child(4) { top: 30%; left: 79%; background: var(--info); box-shadow: 0 0 14px var(--info); animation-delay: 2.7s; }

@keyframes bs-float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(3px, -6px); }
}

.bs-mini-graph b {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.6), transparent);
  transform-origin: left center;
}

.bs-mini-graph b:nth-of-type(1) { top: 53%; left: 13%; width: 118px; transform: rotate(-27deg); }
.bs-mini-graph b:nth-of-type(2) { top: 24%; left: 35%; width: 138px; transform: rotate(21deg); }

.bs-mini-lines i {
  display: block;
  height: 6px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(167, 139, 250, 0.5), rgba(167, 139, 250, 0.06));
}

.bs-mini-lines i + i { margin-top: 8px; }
.bs-mini-lines i:nth-child(1) { width: 88%; }
.bs-mini-lines i:nth-child(2) { width: 60%; background: linear-gradient(90deg, rgba(141, 180, 168, .5), rgba(141, 180, 168, .06)); }
.bs-mini-lines i:nth-child(3) { width: 75%; }
.bs-mini-lines i:nth-child(4) { width: 44%; background: linear-gradient(90deg, rgba(196, 176, 141, .5), rgba(196, 176, 141, .06)); }

.bs-mini-table {
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr 1.8fr 1fr;
  background: var(--line);
}

.bs-mini-table i {
  height: 23px;
  background: #0d0d10;
}

.bs-mini-table i:nth-child(-n+3) {
  height: 17px;
  background: rgba(139, 92, 246, 0.16);
}

.bs-mini-strip {
  display: flex;
  gap: 8px;
}

.bs-mini-strip span {
  flex: 1;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 8px;
  color: var(--fg-4);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.bs-mini-strip b {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  color: var(--fg-2);
  font-weight: 500;
  text-overflow: ellipsis;
}

/* ── closing CTA ─────────────────────────────────────────────────────────── */
.bs-closing {
  border-top: 1px solid var(--line);
  padding-block: clamp(72px, 10vw, 118px);
  text-align: center;
}

.bs-closing .bs-eyebrow {
  justify-content: center;
}

.bs-closing h2 {
  margin: 18px 0;
}

.bs-closing > .bs-wrap > p {
  max-width: 46ch;
  margin-inline: auto;
  color: var(--fg-3);
}

.bs-closing .bs-actions {
  justify-content: center;
  margin-top: 28px;
}

.bs-install-note {
  margin-top: 20px;
  color: var(--fg-4);
  font-size: 0.8125rem;
}

/* ── 15  learn page ──────────────────────────────────────────────────────── */
/* Agent-loop stepper: click a step, the diagram and the copy both move. */
.bs-loop {
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(18px, 3vw, 28px);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008));
}

@media (min-width: 900px) {
  .bs-loop { grid-template-columns: 236px minmax(0, 1fr); gap: 30px; }
}

.bs-loop-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bs-loop-steps button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 11px 13px;
  background: var(--surface);
  color: var(--fg-3);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 450;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out),
    color var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-spring);
}

.bs-loop-steps button:hover {
  border-color: var(--line-2);
  color: var(--fg);
  transform: translateX(2px);
}

.bs-loop-steps button[aria-selected="true"] {
  border-color: var(--primary-bd);
  background: var(--primary-dim);
  color: var(--fg);
}

.bs-loop-steps button[aria-selected="true"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -1px;
  width: 2px;
  height: 22px;
  border-radius: var(--r-pill);
  background: var(--primary);
  box-shadow: 0 0 10px var(--primary);
  transform: translateY(-50%);
}

.bs-loop-steps b {
  display: grid;
  width: 22px;
  height: 22px;
  flex: none;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  color: var(--fg-4);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
}

.bs-loop-steps button[aria-selected="true"] b {
  border-color: var(--primary-bd);
  background: var(--primary-dim);
  color: var(--primary-bright);
}

.bs-loop-stage {
  display: flex;
  min-height: 260px;
  flex-direction: column;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px;
  background: #0b0b0e;
}

.bs-loop-panel[hidden] {
  display: none;
}

.bs-loop-panel {
  animation: bs-turn-in var(--dur-3) var(--ease-out) both;
}

.bs-loop-panel h3 {
  margin-bottom: 10px;
}

.bs-loop-panel p {
  max-width: 62ch;
  color: var(--fg-3);
  font-size: 0.9375rem;
}

.bs-loop-panel p + p {
  margin-top: 10px;
}

.bs-loop-wire {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.bs-loop-wire span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 5px 10px;
  color: var(--fg-4);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: all var(--dur-3) var(--ease-out);
}

.bs-loop-wire span.is-on {
  border-color: var(--primary-bd);
  background: var(--primary-dim);
  color: var(--primary-bright);
}

.bs-loop-wire .bs-icon {
  width: 11px;
  height: 11px;
}

.bs-loop-wire i {
  color: var(--fg-4);
  font-style: normal;
}

/* Concept cards on the learn page. */
.bs-concept {
  scroll-margin-top: 100px;
}

.bs-concept + .bs-concept {
  margin-top: clamp(48px, 6vw, 76px);
}

.bs-concept-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.bs-concept-head > span {
  display: grid;
  width: 42px;
  height: 42px;
  flex: none;
  place-items: center;
  border: 1px solid var(--primary-bd);
  border-radius: var(--r-md);
  background: var(--primary-dim);
  color: var(--primary-bright);
}

.bs-concept-head > span .bs-icon {
  width: 20px;
  height: 20px;
}

.bs-concept-head h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
}

/* Two-column: prose left, an "in Blacksite" aside right. */
.bs-concept-body {
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 980px) {
  .bs-concept-body { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 34px; }
}

.bs-inblacksite {
  align-self: start;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 18px;
  background: linear-gradient(160deg, rgba(139, 92, 246, 0.07), rgba(255, 255, 255, 0.008));
}

.bs-inblacksite h4 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  color: var(--primary-bright);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.bs-inblacksite h4 .bs-icon {
  width: 12px;
  height: 12px;
}

.bs-inblacksite p,
.bs-inblacksite li {
  color: var(--fg-3);
  font-size: 0.875rem;
}

.bs-inblacksite ul {
  padding-left: 1.2em;
}

.bs-inblacksite li + li {
  margin-top: 6px;
}

.bs-inblacksite ul > li::before {
  top: 0.62em;
  left: -0.95em;
  width: 4px;
  height: 4px;
}

/* Learn page contents rail. */
.bs-onthispage {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 26px;
}

.bs-onthispage a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 6px 13px;
  color: var(--fg-3);
  font-size: 0.8125rem;
  transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out),
    color var(--dur-1) var(--ease-out);
}

.bs-onthispage a:hover {
  border-color: var(--primary-bd);
  background: var(--primary-dim);
  color: var(--primary-bright);
}

.bs-onthispage .bs-icon {
  width: 12px;
  height: 12px;
}

/* ── 16  docs ────────────────────────────────────────────────────────────── */
.bs-doc-layout {
  display: grid;
  gap: 40px;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  padding-block: 36px 84px;
}

@media (min-width: 1040px) {
  .bs-doc-layout {
    grid-template-columns: 232px minmax(0, 1fr);
  }
}

.bs-toc {
  border-left: 1px solid var(--line);
  padding-left: 16px;
  font-size: 0.8125rem;
}

@media (min-width: 1040px) {
  .bs-toc {
    position: sticky;
    top: 92px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
}

.bs-toc-title {
  margin-bottom: 12px;
  color: var(--fg-4);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.bs-toc ul {
  list-style: none;
}

.bs-toc li {
  margin-bottom: 1px;
}

.bs-toc a {
  position: relative;
  display: block;
  border-radius: var(--r-xs);
  padding: 4px 8px;
  color: var(--fg-4);
  line-height: 1.4;
  transition: color var(--dur-1) var(--ease-out), background var(--dur-2) var(--ease-out);
}

.bs-toc a:hover {
  background: var(--surface-2);
  color: var(--fg-2);
}

.bs-toc a.is-current {
  background: var(--primary-dim);
  color: var(--primary-bright);
}

.bs-toc a.is-current::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -17px;
  width: 2px;
  height: 15px;
  border-radius: var(--r-pill);
  background: var(--primary);
  transform: translateY(-50%);
}

.bs-toc .lvl-3 a {
  padding-left: 20px;
  font-size: 0.78rem;
}

.bs-doc {
  min-width: 0;
  max-width: 76ch;
}

.bs-doc-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--fg-4);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bs-doc-crumb a {
  color: var(--fg-3);
}

.bs-doc-crumb .bs-icon {
  width: 11px;
  height: 11px;
}

.bs-doc > h1 {
  font-size: clamp(2rem, 3.6vw, 2.7rem);
  margin-bottom: 24px;
}

.bs-doc > h2 {
  margin-top: 52px;
  border-top: 1px solid var(--line);
  padding-top: 26px;
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
}

/* Documents written for GitHub put a `---` before each `##`, which would
   otherwise draw a second rule right above the heading's own. The heading
   rule wins; the redundant one goes. */
.bs-doc > hr + h2 {
  margin-top: 0;
}

.bs-doc > hr:has(+ h2) {
  display: none;
}

.bs-doc > h3 {
  margin-top: 34px;
}

.bs-doc > h4 {
  margin-top: 26px;
}

.bs-doc > * + * {
  margin-top: 1.05em;
}

.bs-doc p,
.bs-doc li {
  font-size: 0.975rem;
  line-height: 1.72;
}

.bs-doc li + li {
  margin-top: 0.35em;
}

.bs-doc ul,
.bs-doc ol {
  padding-left: 1.4em;
}

.bs-doc ol {
  padding-left: 1.9em;
}

.bs-doc blockquote {
  margin-block: 1.4em;
}

/* Heading anchor — appears on hover, never shifts layout. */
.bs-anchor {
  margin-left: 8px;
  color: var(--fg-4);
  font-size: 0.72em;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease-out);
}

.bs-doc h2:hover .bs-anchor,
.bs-doc h3:hover .bs-anchor,
.bs-anchor:focus-visible {
  opacity: 1;
}

.bs-anchor:hover {
  color: var(--primary-lift);
}

.bs-doc-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-top: 56px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
  color: var(--fg-4);
  font-size: 0.8125rem;
}

/* Prev/next pager. */
.bs-doc-pager {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  margin-top: 26px;
}

.bs-doc-pager a {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px;
  background: var(--surface);
  color: var(--fg);
  transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}

.bs-doc-pager a:hover {
  border-color: var(--primary-bd);
  background: var(--primary-dim);
  color: var(--fg);
}

.bs-doc-pager span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-4);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bs-doc-pager .bs-next {
  align-items: flex-end;
  text-align: right;
}

.bs-doc-pager strong {
  font-size: 0.9375rem;
  font-weight: 500;
}

/* Docs index — searchable card grid. */
.bs-doc-paths {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  margin-top: 32px;
}

.bs-doc-paths > a {
  display: flex;
  min-height: 188px;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
  background:
    radial-gradient(circle at 86% -18%, rgba(139, 92, 246, 0.1), transparent 48%),
    var(--surface);
  color: inherit;
  transition: transform var(--dur-2) var(--ease-spring), border-color var(--dur-2) var(--ease-out),
    background var(--dur-2) var(--ease-out);
}

.bs-doc-paths > a:hover {
  border-color: var(--primary-bd);
  background:
    radial-gradient(circle at 86% -18%, rgba(139, 92, 246, 0.16), transparent 48%),
    var(--surface-2);
  color: inherit;
  transform: translateY(-2px);
}

.bs-doc-paths span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--primary-lift);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bs-doc-paths span .bs-icon {
  width: 13px;
  height: 13px;
}

.bs-doc-paths h2 {
  margin-top: 14px;
  font-size: 1.05rem;
  line-height: 1.25;
}

.bs-doc-paths p {
  margin-top: auto;
  padding-top: 18px;
  color: var(--fg-3);
  font-size: 0.8125rem;
}

.bs-doc-concepts {
  margin-top: 18px;
  color: var(--fg-3);
  font-size: 0.875rem;
}

.bs-doc-search {
  max-width: 460px;
  margin: 34px 0 46px;
}

.bs-doc-group + .bs-doc-group {
  margin-top: 44px;
}

.bs-doc-group > h2 {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 18px;
  font-size: 1.15rem;
}

.bs-doc-group > h2 .bs-icon {
  width: 17px;
  height: 17px;
  color: var(--primary-lift);
}

.bs-doc-group > h2 em {
  margin-left: auto;
  color: var(--fg-4);
  font-family: var(--mono);
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.06em;
}

.bs-doc-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.bs-doc-card .bs-chip {
  align-self: flex-start;
}

.bs-doc-card h3 {
  font-size: 1.0625rem;
}

.bs-doc-card p {
  flex: 1;
  font-size: 0.875rem;
}

.bs-doc-card footer {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--primary-lift);
  font-size: 0.8125rem;
  font-weight: 500;
}

.bs-doc-card footer .bs-icon {
  width: 13px;
  height: 13px;
  transition: transform var(--dur-2) var(--ease-spring);
}

.bs-doc-card footer em {
  margin-left: auto;
  color: var(--fg-4);
  font-family: var(--mono);
  font-size: 9px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

a.bs-card:hover .bs-doc-card footer .bs-icon,
a.bs-card:hover footer .bs-icon {
  transform: translateX(3px);
}

.bs-doc-empty {
  display: none;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-md);
  padding: 34px;
  color: var(--fg-4);
  text-align: center;
}

.bs-doc-empty.is-shown {
  display: block;
}

[data-doc-card].is-hidden,
[data-doc-group].is-hidden {
  display: none;
}

/* ── 17  pricing + legal ─────────────────────────────────────────────────── */
.bs-tiers {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.bs-tier {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
}

.bs-tier-featured {
  border-color: var(--primary-bd);
  background:
    radial-gradient(circle at 50% -20%, rgba(139, 92, 246, 0.16), transparent 55%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  box-shadow: var(--elev-3);
}

.bs-tier h3 {
  font-size: 1.2rem;
}

.bs-price {
  margin: 16px 0 4px;
  color: var(--fg);
  font-size: 2.1rem;
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1;
}

.bs-tier > p {
  color: var(--fg-4);
  font-size: 0.8125rem;
}

.bs-tier ul {
  margin-top: 22px;
  list-style: none;
}

.bs-tier li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--fg-2);
  font-size: 0.875rem;
}

.bs-tier li + li {
  margin-top: 11px;
}

.bs-tier li .bs-icon {
  width: 15px;
  height: 15px;
  margin-top: 3px;
  color: var(--ok);
}

.bs-tier .bs-btn {
  margin-top: 26px;
}

.bs-tier ul + .bs-btn {
  margin-top: auto;
}

/* Legal document index. */
.bs-legal-list {
  display: grid;
  gap: 12px;
}

.bs-legal-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 20px;
  background: var(--surface);
  color: inherit;
  transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}

.bs-legal-item:hover {
  border-color: var(--primary-bd);
  background: var(--primary-dim);
  color: inherit;
}

.bs-legal-item > .bs-icon {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  color: var(--primary-lift);
}

.bs-legal-item h3 {
  font-size: 1rem;
}

.bs-legal-item p {
  margin-top: 5px;
  color: var(--fg-3);
  font-size: 0.875rem;
}

.bs-legal-item > .bs-chip {
  margin-left: auto;
  align-self: center;
}

/* Comparison list used on the pricing "do I need one" section. */
.bs-compare {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.bs-compare > div {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px;
  background: var(--surface);
}

.bs-compare h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.bs-compare h4 .bs-icon {
  width: 16px;
  height: 16px;
}

.bs-compare-yes h4 .bs-icon { color: var(--warn); }
.bs-compare-no h4 .bs-icon { color: var(--ok); }

.bs-compare ul {
  list-style: none;
}

.bs-compare li {
  color: var(--fg-3);
  font-size: 0.875rem;
}

.bs-compare li + li {
  margin-top: 8px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

/* ── 18  motion + reveal ─────────────────────────────────────────────────── */
.bs-js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out);
}

.bs-js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Stagger children of a revealed group. */
.bs-js [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out);
}

.bs-js [data-reveal-group].is-in > * {
  opacity: 1;
  transform: none;
}

.bs-js [data-reveal-group].is-in > *:nth-child(1) { transition-delay: 0ms; }
.bs-js [data-reveal-group].is-in > *:nth-child(2) { transition-delay: 70ms; }
.bs-js [data-reveal-group].is-in > *:nth-child(3) { transition-delay: 140ms; }
.bs-js [data-reveal-group].is-in > *:nth-child(4) { transition-delay: 210ms; }
.bs-js [data-reveal-group].is-in > *:nth-child(5) { transition-delay: 280ms; }
.bs-js [data-reveal-group].is-in > *:nth-child(6) { transition-delay: 350ms; }

/* Back to top. */
.bs-totop {
  position: fixed;
  z-index: 30;
  right: 22px;
  bottom: 22px;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: rgba(16, 16, 20, 0.9);
  backdrop-filter: blur(12px);
  color: var(--fg-2);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(0.9);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-spring),
    border-color var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease-out);
}

.bs-totop.is-shown {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.bs-totop:hover {
  border-color: var(--primary-bd);
  color: var(--primary-bright);
}

.bs-totop .bs-icon {
  width: 17px;
  height: 17px;
}

/* Reading-progress hairline under the sticky header on doc pages. */
.bs-progress {
  position: fixed;
  z-index: 41;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--primary-bright));
  box-shadow: 0 0 10px var(--primary-glow);
  transition: width 80ms linear;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal],
  [data-reveal-group] > * {
    opacity: 1;
    transform: none;
  }
}

/* Print: drop the ambient field and panel chrome, keep the words. */
@media print {
  body::before,
  body::after,
  .bs-header,
  .bs-footer,
  .bs-totop,
  .bs-progress,
  .bs-toc,
  .bs-skip {
    display: none !important;
  }

  body { background: #fff; color: #000; }
  .bs-doc { max-width: none; }
  a { color: #000; }
}