/* ============================================================
   BaCoder — bacoder.com
   16_bun 风格独立实现：极简米白 + 圆角粉珊瑚强调 + 等宽字加重 + 卡片极简
   主色 #525252（暗灰）/ 强调 #FB7185（粉珊瑚）
   ============================================================ */

/* ------------------------------------------------------------
   1. CSS Variables / Tokens
   ------------------------------------------------------------ */
:root {
  /* brand palette */
  --bc-ink: #1a1a1a;
  --bc-ink-2: #262626;
  --bc-ink-3: #404040;
  --bc-ink-4: #525252;
  --bc-ink-5: #6b6b6b;
  --bc-mute: #8a8a8a;
  --bc-mute-2: #a3a3a3;
  --bc-line: #ececec;
  --bc-line-2: #e2e2e2;
  --bc-soft: #f7f6f3;
  --bc-paper: #fafaf7;
  --bc-paper-2: #f5f4ef;
  --bc-bg: #ffffff;

  /* accent — coral pink */
  --bc-pink: #FB7185;
  --bc-pink-2: #ef4f6a;
  --bc-pink-3: #fda4af;
  --bc-pink-soft: #fff1f3;
  --bc-pink-banner: #fde8eb;

  /* sizing */
  --bc-radius: 14px;
  --bc-radius-sm: 8px;
  --bc-radius-lg: 18px;

  /* fonts */
  --bc-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --bc-font-mono: ui-monospace, SFMono-Regular, 'JetBrains Mono', 'IBM Plex Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace;

  /* layout */
  --bc-w-side: 250px;
  --bc-w-toc: 220px;
  --bc-w-main-max: 760px;
  --bc-h-topbar: 56px;
  --bc-h-subnav: 44px;

  /* shadows — bun-style very subtle */
  --bc-shadow-1: 0 1px 0 rgba(0,0,0,0.04);
  --bc-shadow-2: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.04);
}

[data-theme="dark"] {
  --bc-ink: #f4f4f4;
  --bc-ink-2: #e5e5e5;
  --bc-ink-3: #d4d4d4;
  --bc-ink-4: #b3b3b3;
  --bc-ink-5: #969696;
  --bc-mute: #888;
  --bc-mute-2: #6b6b6b;
  --bc-line: #2a2a2a;
  --bc-line-2: #333333;
  --bc-soft: #1c1b18;
  --bc-paper: #181816;
  --bc-paper-2: #1f1e1b;
  --bc-bg: #0f0f0e;
  --bc-pink-soft: rgba(251, 113, 133, 0.12);
  --bc-pink-banner: rgba(251, 113, 133, 0.10);
}

/* ------------------------------------------------------------
   2. Reset & Base
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; padding: 0; }
img, svg { max-width: 100%; height: auto; vertical-align: middle; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input { font: inherit; }
hr { border: 0; border-top: 1px solid var(--bc-line); margin: 32px 0; }

.bc-body {
  font-family: var(--bc-font-sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--bc-ink-2);
  background: var(--bc-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

::selection { background: var(--bc-pink-soft); color: var(--bc-ink); }

/* ------------------------------------------------------------
   3. Top Bar
   ------------------------------------------------------------ */
.bc-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--bc-line);
}
[data-theme="dark"] .bc-topbar { background: rgba(15, 15, 14, 0.92); }

.bc-topbar__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--bc-h-topbar);
  padding: 0 20px;
  max-width: 1440px;
  margin: 0 auto;
}

.bc-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--bc-ink);
  font-family: var(--bc-font-mono);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.2px;
}
.bc-brand__mark { display: inline-flex; }
.bc-brand__name { color: var(--bc-ink); }

.bc-topnav { display: flex; gap: 4px; margin-left: 8px; }
.bc-topnav__item {
  font-size: 13.5px;
  color: var(--bc-ink-4);
  padding: 6px 10px;
  border-radius: 8px;
  transition: color 0.15s, background 0.15s;
}
.bc-topnav__item:hover { color: var(--bc-ink); background: var(--bc-soft); }
.bc-topnav__item.is-active {
  color: var(--bc-pink-2);
  background: var(--bc-pink-soft);
}

.bc-search {
  flex: 1;
  max-width: 460px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  background: var(--bc-soft);
  border: 1px solid var(--bc-line);
  border-radius: 999px;
  color: var(--bc-mute);
  font-size: 13px;
  margin-left: auto;
}
.bc-search:focus-within {
  border-color: var(--bc-pink-3);
  background: var(--bc-bg);
  box-shadow: 0 0 0 3px var(--bc-pink-soft);
}
.bc-search__icon { display: inline-flex; flex-shrink: 0; }
.bc-search__input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--bc-ink-2);
  font-size: 13.5px;
  min-width: 0;
}
.bc-search__input::placeholder { color: var(--bc-mute); }
.bc-search__kbd {
  font-family: var(--bc-font-mono);
  font-size: 11px;
  color: var(--bc-mute);
  border: 1px solid var(--bc-line-2);
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--bc-bg);
  flex-shrink: 0;
}

.bc-topbar__right { display: flex; align-items: center; gap: 8px; }

.bc-tnpill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--bc-ink);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--bc-font-mono);
  transition: transform 0.12s, background 0.12s;
}
.bc-tnpill:hover { background: var(--bc-pink); transform: translateY(-1px); }
[data-theme="dark"] .bc-tnpill { background: var(--bc-pink); color: #fff; }
[data-theme="dark"] .bc-tnpill:hover { background: var(--bc-pink-2); }

.bc-icon-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--bc-ink-4);
  transition: background 0.12s, color 0.12s;
}
.bc-icon-btn:hover { background: var(--bc-soft); color: var(--bc-ink); }

/* Lang switcher */
.bc-lang { position: relative; }
.bc-lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--bc-line);
  border-radius: 8px;
  color: var(--bc-ink-3);
  font-size: 12.5px;
}
.bc-lang__btn:hover { background: var(--bc-soft); }
.bc-lang__cur { font-weight: 600; }
.bc-lang__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  background: var(--bc-bg);
  border: 1px solid var(--bc-line);
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  list-style: none;
  margin: 0;
  padding: 6px;
  display: none;
  z-index: 60;
}
.bc-lang:hover .bc-lang__menu, .bc-lang:focus-within .bc-lang__menu { display: block; }
.bc-lang__menu li { list-style: none; }
.bc-lang__menu a {
  display: block;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--bc-ink-3);
  border-radius: 7px;
}
.bc-lang__menu a:hover { background: var(--bc-soft); color: var(--bc-ink); }
.bc-lang__menu a.is-current { color: var(--bc-pink-2); background: var(--bc-pink-soft); font-weight: 600; }

/* Theme button: show only the icon matching current theme */
.bc-theme-light, .bc-theme-dark { display: inline-flex; }
[data-theme="light"] .bc-theme-dark { display: none; }
[data-theme="dark"] .bc-theme-light { display: none; }

/* ------------------------------------------------------------
   4. Sub Nav (chip strip below topbar)
   ------------------------------------------------------------ */
.bc-subnav {
  display: flex;
  gap: 6px;
  align-items: center;
  height: var(--bc-h-subnav);
  padding: 0 20px;
  max-width: 1440px;
  margin: 0 auto;
  border-bottom: 1px solid var(--bc-line);
  overflow-x: auto;
  scrollbar-width: none;
}
.bc-subnav::-webkit-scrollbar { display: none; }

.bc-subnav__chip {
  flex-shrink: 0;
  font-size: 12.5px;
  color: var(--bc-ink-4);
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--bc-font-mono);
  letter-spacing: 0;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.bc-subnav__chip:hover {
  background: var(--bc-soft);
  color: var(--bc-ink);
  border-color: var(--bc-line);
}
.bc-subnav__chip.is-active {
  background: var(--bc-pink-soft);
  color: var(--bc-pink-2);
  border-color: var(--bc-pink-3);
  font-weight: 600;
}

.bc-mobile-only { display: none; }

/* ------------------------------------------------------------
   5. Shell Layout (sidebar + main + toc)
   ------------------------------------------------------------ */
.bc-shell {
  display: flex;
  align-items: stretch;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  flex: 1;
}

.bc-main {
  flex: 1;
  min-width: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.bc-main--full {
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  padding: 0;
}

/* ------------------------------------------------------------
   6. Sidebar (left doc tree)
   ------------------------------------------------------------ */
.bc-side {
  width: var(--bc-w-side);
  flex-shrink: 0;
  border-right: 1px solid var(--bc-line);
  background: var(--bc-bg);
  position: sticky;
  top: calc(var(--bc-h-topbar) + var(--bc-h-subnav));
  align-self: flex-start;
  height: calc(100vh - var(--bc-h-topbar) - var(--bc-h-subnav));
  overflow-y: auto;
  padding-bottom: 40px;
}

.bc-side__filter {
  position: sticky;
  top: 0;
  background: var(--bc-bg);
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--bc-line);
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 1;
}
.bc-side__filtericon { color: var(--bc-mute); display: inline-flex; }
.bc-side__filterinput {
  flex: 1;
  height: 28px;
  background: var(--bc-soft);
  border: 1px solid var(--bc-line);
  border-radius: 6px;
  padding: 0 10px;
  font-size: 12.5px;
  color: var(--bc-ink-2);
  outline: 0;
}
.bc-side__filterinput:focus { border-color: var(--bc-pink-3); background: var(--bc-bg); }

.bc-side__inner { padding: 16px 12px 0; }

.bc-side__group {
  margin-bottom: 18px;
}
.bc-side__group.is-collapsed .bc-side__list { display: none; }
.bc-side__group.is-collapsed .bc-side__chev { transform: rotate(-90deg); }

.bc-side__heading {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 8px;
  font-size: 12.5px;
  font-family: var(--bc-font-mono);
  font-weight: 600;
  color: var(--bc-ink-4);
  letter-spacing: 0.02em;
  text-transform: none;
  background: transparent;
  border: 0;
  text-align: left;
}
.bc-side__heading--root {
  color: var(--bc-ink);
  border-bottom: 1px dashed var(--bc-line);
  padding-bottom: 8px;
  margin-bottom: 6px;
}
.bc-side__heading--btn { cursor: pointer; }
.bc-side__heading--btn:hover { color: var(--bc-ink); }
.bc-side__chev {
  display: inline-flex;
  color: var(--bc-mute);
  transition: transform 0.18s;
  width: 12px;
  height: 12px;
}
.bc-side__bracket {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 16px;
  background: var(--bc-pink-soft);
  color: var(--bc-pink-2);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
}
.bc-side__count {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--bc-mute);
  font-weight: 500;
  background: var(--bc-soft);
  padding: 1px 6px;
  border-radius: 999px;
}

.bc-side__list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0 0 0 22px;
  border-left: 1px solid var(--bc-line);
  margin-left: 11px;
}
.bc-side__list--inner { padding-left: 22px; }
.bc-side__link {
  display: block;
  padding: 5px 10px;
  margin: 1px 0;
  font-size: 13px;
  color: var(--bc-ink-4);
  border-radius: 6px;
  line-height: 1.45;
  transition: color 0.12s, background 0.12s;
}
.bc-side__link:hover { color: var(--bc-ink); background: var(--bc-soft); }
.bc-side__link.is-active {
  color: var(--bc-pink-2);
  background: var(--bc-pink-soft);
  font-weight: 600;
}
.bc-side__link--cat { font-style: italic; color: var(--bc-mute); font-size: 12.5px; }

/* ------------------------------------------------------------
   7. Article container & banners
   ------------------------------------------------------------ */
.bc-article {
  width: 100%;
  padding: 28px 40px 80px;
  max-width: calc(var(--bc-w-main-max) + var(--bc-w-toc) + 80px);
  margin: 0 auto;
}
.bc-article--page { max-width: var(--bc-w-main-max); }

.bc-crumb {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12.5px;
  font-family: var(--bc-font-mono);
  color: var(--bc-mute);
  margin-bottom: 18px;
}
.bc-crumb a {
  color: var(--bc-ink-5);
  padding: 1px 4px;
  border-radius: 4px;
  transition: color 0.12s, background 0.12s;
}
.bc-crumb a:hover { color: var(--bc-pink-2); background: var(--bc-pink-soft); }
.bc-crumb__sep { color: var(--bc-mute-2); }
.bc-crumb__current { color: var(--bc-ink-3); font-weight: 500; }

/* Bun-style pink banner header */
.bc-pagebanner, .bc-postbanner, .bc-hero {
  background: var(--bc-pink-banner);
  border-radius: var(--bc-radius);
  padding: 22px 26px 24px;
  margin-bottom: 28px;
  position: relative;
}
.bc-pagebanner__kicker, .bc-postbanner__kicker, .bc-hero__kicker {
  display: inline-block;
  font-family: var(--bc-font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--bc-pink-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.bc-article__h1 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.5px;
  color: var(--bc-ink);
  margin: 2px 0 6px;
}
.bc-article__lede {
  font-size: 15.5px;
  color: var(--bc-ink-4);
  line-height: 1.6;
  margin: 0;
  max-width: 720px;
}
.bc-article__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--bc-ink-5);
  font-family: var(--bc-font-mono);
}
.bc-article__meta-sep { color: var(--bc-mute-2); }
.bc-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--bc-bg);
  color: var(--bc-pink-2);
  font-size: 11.5px;
  border: 1px solid var(--bc-pink-3);
  font-weight: 600;
}

/* ------------------------------------------------------------
   8. Hero (homepage)
   ------------------------------------------------------------ */
.bc-hero {
  padding: 28px 30px 30px;
  margin-bottom: 30px;
}
.bc-hero__h1 {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.6px;
  color: var(--bc-ink);
  margin: 4px 0 8px;
}
.bc-hero__lede {
  font-size: 15.5px;
  color: var(--bc-ink-4);
  margin: 0 0 18px;
  max-width: 640px;
}
.bc-hero__search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 16px;
  background: var(--bc-bg);
  border: 1px solid var(--bc-line);
  border-radius: 999px;
  max-width: 480px;
  margin-bottom: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.bc-hero__searchicon { display: inline-flex; color: var(--bc-mute); }
.bc-hero__searchinput {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 14.5px;
  color: var(--bc-ink-2);
  min-width: 0;
}
.bc-hero__kbd {
  font-family: var(--bc-font-mono);
  font-size: 11px;
  color: var(--bc-mute);
  border: 1px solid var(--bc-line);
  background: var(--bc-soft);
  padding: 1px 6px;
  border-radius: 5px;
}
.bc-hero__cli {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--bc-font-mono);
  font-size: 13px;
  color: var(--bc-ink-2);
  background: var(--bc-bg);
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--bc-line);
}
.bc-hero__prompt { color: var(--bc-pink); font-weight: 700; }
.bc-hero__cmd { color: var(--bc-ink-2); }
.bc-hero__caret {
  display: inline-block;
  width: 7px;
  height: 14px;
  background: var(--bc-pink);
  animation: bc-blink 1.05s infinite step-end;
  vertical-align: middle;
}
@keyframes bc-blink { 50% { opacity: 0; } }

/* ------------------------------------------------------------
   9. Card grids (Bun-style 2x2 quick start cards)
   ------------------------------------------------------------ */
.bc-cardgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 18px 0 28px;
}
.bc-cardgrid--3 { grid-template-columns: repeat(3, 1fr); }
.bc-cardgrid--2x1 { grid-template-columns: repeat(2, 1fr); }

.bc-bigcard {
  display: block;
  padding: 20px 22px;
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-radius);
  background: var(--bc-bg);
  color: inherit;
  transition: border-color 0.12s, transform 0.12s, box-shadow 0.12s;
  position: relative;
}
.bc-bigcard:hover {
  border-color: var(--bc-pink-3);
  box-shadow: 0 4px 18px rgba(251, 113, 133, 0.10);
  transform: translateY(-1px);
}
.bc-bigcard__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--bc-pink-soft);
  color: var(--bc-pink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.bc-bigcard__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--bc-ink);
  margin-bottom: 4px;
  font-family: var(--bc-font-mono);
  letter-spacing: -0.1px;
}
.bc-bigcard__desc {
  font-size: 13px;
  color: var(--bc-ink-4);
  line-height: 1.55;
  margin: 0 0 12px;
}
.bc-bigcard__list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  font-size: 12.5px;
  color: var(--bc-ink-5);
  border-top: 1px dashed var(--bc-line);
  padding-top: 10px;
}
.bc-bigcard__list li { margin: 3px 0; }
.bc-bigcard__bullet { color: var(--bc-pink); font-weight: 700; margin-right: 4px; }
.bc-bigcard__count {
  display: inline-block;
  font-family: var(--bc-font-mono);
  font-size: 11.5px;
  color: var(--bc-mute);
  border-top: 1px dashed var(--bc-line);
  padding-top: 8px;
  margin-top: 2px;
  width: 100%;
}
.bc-bigcard__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--bc-font-mono);
  font-size: 12px;
  color: var(--bc-pink-2);
  font-weight: 600;
}

.bc-smallcard {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-radius);
  background: var(--bc-bg);
  color: inherit;
  transition: border-color 0.12s, transform 0.12s;
}
.bc-smallcard:hover { border-color: var(--bc-pink-3); transform: translateY(-1px); }
.bc-smallcard__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--bc-pink-soft);
  color: var(--bc-pink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bc-smallcard__title {
  font-family: var(--bc-font-mono);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--bc-ink);
  margin-bottom: 2px;
}
.bc-smallcard__desc {
  font-size: 12.5px;
  color: var(--bc-ink-4);
  margin: 0;
  line-height: 1.5;
}

.bc-reflist {
  list-style: none;
  margin: 14px 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 24px;
}
.bc-reflist li {
  padding: 8px 0;
  border-bottom: 1px dashed var(--bc-line);
  font-size: 13.5px;
}
.bc-reflist a strong { color: var(--bc-ink); font-weight: 700; }
.bc-reflist a:hover strong { color: var(--bc-pink-2); }
.bc-reflist__desc { color: var(--bc-mute); font-size: 12.5px; }

/* ------------------------------------------------------------
   10. Post list
   ------------------------------------------------------------ */
.bc-postlist {
  list-style: none;
  margin: 12px 0 24px;
  padding: 0;
}
.bc-postlist__item {
  padding: 14px 0;
  border-bottom: 1px solid var(--bc-line);
}
.bc-postlist__item:first-child { border-top: 1px solid var(--bc-line); }
.bc-postlist__title {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  color: var(--bc-ink);
  margin-bottom: 5px;
  line-height: 1.4;
  transition: color 0.12s;
}
.bc-postlist__title:hover { color: var(--bc-pink-2); }
.bc-postlist__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--bc-mute);
  font-family: var(--bc-font-mono);
}
.bc-postlist__chip {
  display: inline-flex;
  height: 19px;
  padding: 0 7px;
  align-items: center;
  border-radius: 999px;
  background: var(--bc-pink-soft);
  color: var(--bc-pink-2);
  font-size: 11px;
  font-weight: 600;
}
.bc-postlist__date::before { content: '· '; color: var(--bc-mute-2); margin-right: 2px; }
.bc-postlist__desc {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--bc-ink-5);
  line-height: 1.55;
}

.bc-viewall {
  margin: 18px 0 0;
  text-align: right;
  font-size: 13px;
}
.bc-viewall a {
  font-family: var(--bc-font-mono);
  color: var(--bc-pink-2);
  font-weight: 600;
}
.bc-viewall a:hover { color: var(--bc-pink); }

/* ------------------------------------------------------------
   11. Pager
   ------------------------------------------------------------ */
.bc-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
  margin: 30px 0 10px;
  font-family: var(--bc-font-mono);
}
.bc-pager__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--bc-line);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--bc-ink-3);
  transition: background 0.12s, border-color 0.12s;
}
.bc-pager__btn:hover { background: var(--bc-soft); border-color: var(--bc-pink-3); color: var(--bc-pink-2); }
.bc-pager__btn.is-disabled { opacity: 0.4; pointer-events: none; }
.bc-pager__num {
  min-width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border: 1px solid var(--bc-line);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--bc-ink-3);
}
.bc-pager__num:hover { background: var(--bc-soft); border-color: var(--bc-pink-3); color: var(--bc-pink-2); }
.bc-pager__num.is-current {
  background: var(--bc-ink);
  color: #fff;
  border-color: var(--bc-ink);
  font-weight: 700;
}

/* ------------------------------------------------------------
   12. Article body + TOC layout
   ------------------------------------------------------------ */
.bc-article__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--bc-w-toc);
  gap: 48px;
  align-items: start;
}

/* ------------------------------------------------------------
   13. Prose typography
   ------------------------------------------------------------ */
.bc-prose {
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--bc-ink-2);
  max-width: var(--bc-w-main-max);
}
.bc-prose > * + * { margin-top: 18px; }
.bc-prose p { margin: 0 0 18px; }
.bc-prose strong { color: var(--bc-ink); font-weight: 700; }
.bc-prose em { font-style: italic; }
.bc-prose a {
  color: var(--bc-pink-2);
  text-decoration: underline;
  text-decoration-color: var(--bc-pink-3);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.12s;
}
.bc-prose a:hover { color: var(--bc-pink); text-decoration-color: var(--bc-pink); }

.bc-prose h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--bc-ink);
  margin: 36px 0 14px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--bc-line);
  letter-spacing: -0.2px;
  scroll-margin-top: calc(var(--bc-h-topbar) + var(--bc-h-subnav) + 12px);
}
.bc-prose h3 {
  font-size: 17.5px;
  font-weight: 700;
  color: var(--bc-ink);
  margin: 28px 0 10px;
  letter-spacing: -0.1px;
  scroll-margin-top: calc(var(--bc-h-topbar) + var(--bc-h-subnav) + 12px);
}
.bc-prose h4 {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--bc-ink-2);
  margin: 22px 0 8px;
}

.bc-prose ul, .bc-prose ol {
  padding-left: 26px;
  margin: 0 0 18px;
}
.bc-prose ul li { list-style: none; position: relative; padding-left: 4px; margin: 4px 0; }
.bc-prose ul li::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bc-pink);
}
.bc-prose ol { list-style: decimal; }
.bc-prose ol li { margin: 4px 0; }

.bc-prose blockquote {
  margin: 18px 0;
  padding: 12px 18px;
  border-left: 3px solid var(--bc-pink);
  background: var(--bc-pink-soft);
  border-radius: 0 var(--bc-radius-sm) var(--bc-radius-sm) 0;
  color: var(--bc-ink-3);
  font-size: 14.5px;
}
.bc-prose blockquote p:last-child { margin-bottom: 0; }

/* Code blocks - Bun style: light card with subtle border, mono font */
.bc-prose pre {
  position: relative;
  background: var(--bc-paper);
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-radius-sm);
  padding: 14px 16px;
  margin: 18px 0;
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.65;
  font-family: var(--bc-font-mono);
  color: var(--bc-ink-2);
}
.bc-prose pre[data-lang]::before {
  content: attr(data-lang);
  position: absolute;
  top: 8px;
  left: 14px;
  font-size: 10.5px;
  color: var(--bc-mute);
  font-family: var(--bc-font-mono);
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.bc-prose pre[data-lang] { padding-top: 28px; }
.bc-prose code {
  font-family: var(--bc-font-mono);
  font-size: 0.92em;
  background: var(--bc-pink-soft);
  color: var(--bc-pink-2);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 500;
}
.bc-prose pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
  font-size: 13.5px;
  font-weight: 400;
}

.bc-copy {
  position: absolute;
  top: 7px;
  right: 8px;
  font-family: var(--bc-font-mono);
  font-size: 11px;
  color: var(--bc-mute);
  background: var(--bc-bg);
  border: 1px solid var(--bc-line);
  border-radius: 5px;
  padding: 2px 8px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s, color 0.12s;
}
.bc-prose pre:hover .bc-copy { opacity: 1; }
.bc-copy:hover { color: var(--bc-pink-2); border-color: var(--bc-pink-3); }

/* Tables */
.bc-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  font-size: 13.5px;
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-radius-sm);
  overflow: hidden;
}
.bc-prose table thead { background: var(--bc-paper); }
.bc-prose table th {
  font-family: var(--bc-font-mono);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--bc-ink);
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--bc-line);
  letter-spacing: 0.02em;
}
.bc-prose table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--bc-line);
  color: var(--bc-ink-3);
  vertical-align: top;
}
.bc-prose table tr:last-child td { border-bottom: 0; }
.bc-prose table tr:nth-child(even) td { background: var(--bc-paper); }

.bc-prose img {
  border-radius: var(--bc-radius-sm);
  border: 1px solid var(--bc-line);
}

/* Anchor links inside h2/h3 (Eleventy addHeadingAnchors filter) */
.bc-prose .heading-anchor {
  margin-left: 8px;
  color: var(--bc-mute-2);
  font-weight: 400;
  font-size: 0.85em;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.12s;
}
.bc-prose h2:hover .heading-anchor,
.bc-prose h3:hover .heading-anchor { opacity: 1; }

/* details/summary as native FAQ */
.bc-prose details {
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-radius-sm);
  padding: 12px 16px;
  margin: 12px 0;
  background: var(--bc-bg);
}
.bc-prose details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--bc-ink);
}
.bc-prose details[open] { background: var(--bc-paper); }

/* ------------------------------------------------------------
   14. TOC (right "On this page")
   ------------------------------------------------------------ */
.bc-toc {
  width: var(--bc-w-toc);
  flex-shrink: 0;
  font-size: 12.5px;
  align-self: flex-start;
}
.bc-toc__inner {
  position: sticky;
  top: calc(var(--bc-h-topbar) + var(--bc-h-subnav) + 24px);
  max-height: calc(100vh - var(--bc-h-topbar) - var(--bc-h-subnav) - 40px);
  overflow-y: auto;
  padding-left: 8px;
  border-left: 1px solid var(--bc-line);
}
.bc-toc__head {
  font-family: var(--bc-font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--bc-ink);
  margin-bottom: 10px;
  letter-spacing: 0.02em;
  padding-left: 10px;
}
.bc-toc__head--small { font-size: 11.5px; color: var(--bc-ink-4); }
.bc-toc__divider { height: 1px; background: var(--bc-line); margin: 16px 0 12px; }
.bc-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bc-toc__item { line-height: 1.55; margin: 2px 0; }
.bc-toc__item--lv2 { padding-left: 10px; }
.bc-toc__item--lv3 { padding-left: 22px; font-size: 12px; }
.bc-toc__list a {
  display: block;
  padding: 3px 6px;
  color: var(--bc-mute);
  border-radius: 4px;
  border-left: 2px solid transparent;
  margin-left: -2px;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.bc-toc__list a:hover { color: var(--bc-ink-2); }
.bc-toc__list a.is-active {
  color: var(--bc-pink-2);
  border-left-color: var(--bc-pink);
  background: var(--bc-pink-soft);
  font-weight: 600;
}
.bc-toc__list--plain a { padding: 4px 10px; }

/* ------------------------------------------------------------
   15. Prev/Next
   ------------------------------------------------------------ */
.bc-prevnext {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 40px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--bc-line);
}
.bc-prevnext__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-radius);
  transition: border-color 0.12s, background 0.12s;
}
.bc-prevnext__item--empty { background: transparent; border: 1px dashed transparent; }
.bc-prevnext__item:not(.bc-prevnext__item--empty):hover {
  border-color: var(--bc-pink-3);
  background: var(--bc-pink-soft);
}
.bc-prevnext__next { text-align: right; }
.bc-prevnext__lab {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  font-family: var(--bc-font-mono);
  font-size: 11.5px;
  color: var(--bc-mute);
  letter-spacing: 0.04em;
}
.bc-prevnext__t {
  font-size: 14px;
  font-weight: 600;
  color: var(--bc-ink);
}

/* Related-in-category block on post page */
.bc-related {
  margin: 32px 0 0;
  padding: 18px 22px;
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-radius);
  background: var(--bc-paper);
}
.bc-related__head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--bc-font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--bc-ink);
  margin-bottom: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bc-related__bracket {
  background: var(--bc-pink-soft);
  color: var(--bc-pink-2);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
}
.bc-related__title { color: var(--bc-ink-2); }
.bc-related__list { list-style: none; margin: 0; padding: 0; }
.bc-related__item { padding: 6px 0; border-top: 1px dashed var(--bc-line); }
.bc-related__item:first-child { border-top: 0; }
.bc-related__item a {
  display: block;
  font-size: 13.5px;
  color: var(--bc-ink-3);
  transition: color 0.12s;
  padding: 2px 0;
}
.bc-related__item a:hover { color: var(--bc-pink-2); }

/* ------------------------------------------------------------
   16. FAQ block (homepage)
   ------------------------------------------------------------ */
.bc-faq { margin: 14px 0 32px; display: flex; flex-direction: column; gap: 8px; }
.bc-faq__item {
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-radius);
  background: var(--bc-bg);
  padding: 0;
  transition: border-color 0.12s;
  overflow: hidden;
}
.bc-faq__item[open] { border-color: var(--bc-pink-3); }
.bc-faq__q {
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 18px;
  font-size: 14.5px;
  color: var(--bc-ink);
  list-style: none;
  font-weight: 600;
  line-height: 1.55;
}
.bc-faq__q::-webkit-details-marker { display: none; }
.bc-faq__qmark {
  display: inline-flex;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--bc-pink-soft);
  color: var(--bc-pink-2);
  font-family: var(--bc-font-mono);
  font-size: 12px;
  font-weight: 700;
}
.bc-faq__qtxt { flex: 1; }
.bc-faq__a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 18px 16px;
  color: var(--bc-ink-3);
  font-size: 13.5px;
  line-height: 1.7;
  border-top: 1px dashed var(--bc-line);
}
.bc-faq__amark {
  display: inline-flex;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--bc-paper);
  color: var(--bc-ink-4);
  font-family: var(--bc-font-mono);
  font-size: 12px;
  font-weight: 700;
  margin-top: 6px;
}
.bc-faq__atxt { flex: 1; padding-top: 4px; }

/* ------------------------------------------------------------
   17. 404
   ------------------------------------------------------------ */
.bc-404 {
  max-width: 560px;
  margin: 80px auto;
  padding: 40px 30px;
  text-align: center;
}
.bc-404__code {
  font-family: var(--bc-font-mono);
  font-size: 96px;
  font-weight: 800;
  color: var(--bc-pink);
  line-height: 1;
  margin-bottom: 12px;
}
.bc-404__title { font-size: 26px; font-weight: 700; color: var(--bc-ink); margin: 0 0 12px; }
.bc-404__body { color: var(--bc-ink-4); margin: 0 0 24px; }
.bc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid var(--bc-line);
  color: var(--bc-ink-2);
}
.bc-btn:hover { border-color: var(--bc-pink-3); color: var(--bc-pink-2); background: var(--bc-pink-soft); }
.bc-btn--primary { background: var(--bc-ink); color: #fff; border-color: var(--bc-ink); }
.bc-btn--primary:hover { background: var(--bc-pink); border-color: var(--bc-pink); color: #fff; }

/* ------------------------------------------------------------
   18. Footer
   ------------------------------------------------------------ */
.bc-foot {
  border-top: 1px solid var(--bc-line);
  background: var(--bc-paper);
  padding: 40px 0 24px;
  margin-top: auto;
}
.bc-foot__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 1.4fr 3fr;
  gap: 40px;
}
.bc-foot__brand {}
.bc-foot__logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--bc-font-mono);
  font-weight: 700;
  font-size: 16px;
  color: var(--bc-ink);
  margin-bottom: 10px;
}
.bc-foot__name { color: var(--bc-ink); }
.bc-foot__tag {
  font-size: 13px;
  color: var(--bc-ink-4);
  margin: 0 0 14px;
  line-height: 1.6;
  max-width: 360px;
}
.bc-foot__sig {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--bc-font-mono);
  font-size: 11.5px;
  color: var(--bc-mute);
}
.bc-foot__code {
  background: var(--bc-pink-soft);
  color: var(--bc-pink-2);
  padding: 2px 7px;
  border-radius: 5px;
  font-weight: 700;
}

.bc-foot__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.bc-foot__col h, .bc-foot__h {
  font-family: var(--bc-font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--bc-ink);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.bc-foot__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bc-foot__col li { margin: 5px 0; }
.bc-foot__col a {
  font-size: 13px;
  color: var(--bc-ink-4);
  transition: color 0.12s;
}
.bc-foot__col a:hover { color: var(--bc-pink-2); }
.bc-foot__col a.is-current { color: var(--bc-pink-2); font-weight: 600; }

.bc-foot__bottom {
  max-width: 1280px;
  margin: 30px auto 0;
  padding: 22px 28px 0;
  border-top: 1px solid var(--bc-line);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 11.5px;
  color: var(--bc-mute);
  font-family: var(--bc-font-mono);
}
.bc-foot__rights {}
.bc-foot__risk {
  font-family: var(--bc-font-sans);
  font-size: 12px;
  color: var(--bc-ink-5);
  line-height: 1.6;
}

/* ------------------------------------------------------------
   19. Responsive
   ------------------------------------------------------------ */
@media (max-width: 1180px) {
  .bc-article__body { grid-template-columns: 1fr; }
  .bc-toc { display: none; }
  .bc-article { max-width: var(--bc-w-main-max); padding-right: 32px; }
}

@media (max-width: 960px) {
  :root { --bc-w-side: 220px; }
  .bc-topnav { display: none; }
  .bc-search { max-width: 280px; }
  .bc-cardgrid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .bc-mobile-only { display: inline-flex; }
  .bc-side {
    position: fixed;
    top: var(--bc-h-topbar);
    left: 0;
    bottom: 0;
    z-index: 45;
    width: 280px;
    height: calc(100vh - var(--bc-h-topbar));
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 0 0 24px rgba(0,0,0,0.10);
  }
  .bc-side.is-open { transform: translateX(0); }
  .bc-shell { display: block; }
  .bc-article { padding: 20px 18px 60px; }
  .bc-article__h1 { font-size: 26px; }
  .bc-hero__h1 { font-size: 26px; }
  .bc-hero { padding: 22px 20px; }
  .bc-pagebanner, .bc-postbanner { padding: 18px 20px; }
  .bc-cardgrid, .bc-cardgrid--2x1, .bc-cardgrid--3 { grid-template-columns: 1fr; }
  .bc-prevnext { grid-template-columns: 1fr; }
  .bc-foot__inner { grid-template-columns: 1fr; gap: 24px; }
  .bc-foot__cols { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .bc-search { display: none; }
  .bc-tnpill { display: none; }
  .bc-reflist { grid-template-columns: 1fr; }
  .bc-subnav { padding: 0 18px; }
}

/* ------------------------------------------------------------
   20. Dark theme fine-tuning
   ------------------------------------------------------------ */
[data-theme="dark"] .bc-prose pre { background: var(--bc-paper-2); }
[data-theme="dark"] .bc-prose code { background: rgba(251, 113, 133, 0.16); color: var(--bc-pink-3); }
[data-theme="dark"] .bc-search { background: var(--bc-paper-2); }
[data-theme="dark"] .bc-foot { background: var(--bc-paper-2); }
[data-theme="dark"] .bc-bigcard, [data-theme="dark"] .bc-smallcard { background: var(--bc-paper); }
[data-theme="dark"] .bc-search__kbd { background: var(--bc-paper-2); border-color: var(--bc-line-2); }
[data-theme="dark"] .bc-pager__num.is-current { background: var(--bc-pink); border-color: var(--bc-pink); color: #fff; }
[data-theme="dark"] .bc-btn--primary { background: var(--bc-pink); border-color: var(--bc-pink); }

/* ------------------------------------------------------------
   21. Misc: Body home variations
   ------------------------------------------------------------ */
.bc-body.is-home .bc-pagebanner { display: none; }

/* details summary cleanup */
details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }

/* Hidden utility */
.bc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------
   22. Print
   ------------------------------------------------------------ */
@media print {
  .bc-topbar, .bc-subnav, .bc-side, .bc-toc, .bc-foot, .bc-prevnext, .bc-pager { display: none; }
  .bc-article { padding: 0; max-width: 100%; }
  .bc-article__body { display: block; }
  .bc-prose pre { border: 1px solid #ccc; background: #fafafa; }
}