:root {
  --bg: #141414;
  --bg-raised: #1b1b1b;
  --bg-inset: #202020;
  --border: #333333;
  --border-soft: #262626;
  --text: #f5f4f2;
  --text-dim: #aeaeac;
  --text-faint: #7a7a78;
  --accent: #ffffff;
  --accent-dim: #d8d8d6;
  --series-1: #7dd3fc;
  --series-2: #fca5a5;
  --series-3: #86efac;
  --series-4: #fcd34d;
  --series-5: #c4b5fd;
  --series-6: #f9a8d4;
  --series-7: #fdba74;
  --pastel-red: #fca5a5;
  --pastel-red-soft: #f8b4b4;
  --pastel-green: #86efac;
  --pastel-green-soft: #a7e8bd;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Berkeley Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #fafafa;
    --bg-raised: #ffffff;
    --bg-inset: #f2f2f1;
    --border: #e2e2e0;
    --border-soft: #ececea;
    --text: #171716;
    --text-dim: #46453f;
    --text-faint: #66655f;
    --accent: #111111;
    --accent-dim: #2a2a2a;
    --pastel-red: #d64545;
    --pastel-red-soft: #fbdada;
    --pastel-green: #2f8f5b;
    --pastel-green-soft: #d7f2e2;
  }
}

/* Manual toggle overrides: win over the OS preference either direction */
:root[data-theme="dark"] {
  --bg: #141414;
  --bg-raised: #1b1b1b;
  --bg-inset: #202020;
  --border: #333333;
  --border-soft: #262626;
  --text: #f5f4f2;
  --text-dim: #bcbcba;
  --text-faint: #8c8c8a;
  --accent: #ffffff;
  --accent-dim: #d8d8d6;
  --pastel-red: #fca5a5;
  --pastel-red-soft: #3a2323;
  --pastel-green: #86efac;
  --pastel-green-soft: #1f3327;
}

:root[data-theme="light"] {
  --bg: #fafafa;
  --bg-raised: #ffffff;
  --bg-inset: #f2f2f1;
  --border: #e2e2e0;
  --border-soft: #ececea;
  --text: #171716;
  --text-dim: #46453f;
  --text-faint: #66655f;
  --accent: #111111;
  --accent-dim: #2a2a2a;
  --pastel-red: #d64545;
  --pastel-red-soft: #fbdada;
  --pastel-green: #2f8f5b;
  --pastel-green-soft: #d7f2e2;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 16.5px;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: inherit; }

/* ---------- top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: 15px;
  text-decoration: none;
  color: inherit;
  border-radius: 6px;
  padding: 2px 4px;
  margin: -2px -4px;
}

.brand:hover { background: var(--bg-inset); }
.brand:focus-visible { outline: 2px solid var(--pastel-green); outline-offset: 2px; }

.brand .glyph {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: var(--accent);
  color: var(--bg);
  text-align: center;
  line-height: 18px;
  font-size: 12px;
  border-radius: 3px;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* ---------- header search ---------- */
.search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 0 9px;
  width: 250px;
  transition: border-color 0.12s ease;
}

.search:focus-within {
  border-color: var(--pastel-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pastel-green) 20%, transparent);
}

.search-icon { flex-shrink: 0; color: var(--text-faint); }

.search input {
  flex: 1;
  min-width: 0;
  width: auto;
  background: none;
  border: none;
  border-radius: 0;
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  padding: 7px 0;
}

.search input:focus { outline: none; }
.search input::placeholder { color: var(--text-faint); }

.search-kbd {
  flex-shrink: 0;
  font-size: 11px;
  line-height: 1;
  color: var(--text-faint);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 5px;
  background: var(--bg);
}

.search:focus-within .search-kbd { display: none; }

.search-results {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: min(520px, 92vw);
  max-height: 60vh;
  overflow-y: auto;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 9px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  z-index: 40;
  padding: 5px;
}

.search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 6px;
  cursor: pointer;
}

.search-item.active { background: color-mix(in srgb, var(--cat-color, var(--text)) 13%, transparent); }

.search-item-icon {
  flex-shrink: 0;
  display: flex;
  color: var(--cat-color, var(--text-faint));
}

.search-item-icon svg { width: 16px; height: 16px; }

.search-item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.search-item-name { font-size: 13.5px; font-weight: 600; color: var(--text); }

.search-item-name mark {
  background: color-mix(in srgb, var(--pastel-green) 35%, transparent);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

.search-item-meta {
  font-size: 11.5px;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-empty {
  padding: 14px 12px;
  font-size: 13px;
  color: var(--text-faint);
}

/* grouped content results */
.search-group {
  border-top: 1px solid var(--border-soft);
  padding: 5px 0 7px;
}

.search-group:first-child { border-top: none; }

.search-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 5px;
  cursor: pointer;
}

.search-group-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.search-group-cat {
  font-size: 10.5px;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-item {
  align-items: flex-start;
  padding: 6px 10px 6px 12px;
  margin-left: 12px;
  border-left: 2px solid var(--border-soft);
  border-radius: 0 6px 6px 0;
}

.search-item.active {
  background: color-mix(in srgb, var(--cat-color, var(--text)) 13%, transparent);
  border-left-color: var(--cat-color, var(--text));
}

.search-badge {
  flex-shrink: 0;
  font-size: 10px;
  line-height: 1.5;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 1px;
  white-space: nowrap;
  color: var(--cat-color, var(--text-dim));
  background: color-mix(in srgb, var(--cat-color, var(--text)) 14%, transparent);
}

.search-item-open .search-badge {
  color: var(--pastel-green);
  background: var(--pastel-green-soft);
}

.search-item-snippet {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-item-snippet mark,
.search-group-name mark {
  background: color-mix(in srgb, var(--pastel-green) 38%, transparent);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

/* ---------- print button in the tab row ---------- */
.print-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  margin-bottom: 6px;
  align-self: center;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 12.5px;
  padding: 5px 11px;
  border-radius: 6px;
  cursor: pointer;
}

.print-btn:hover {
  color: var(--text);
  border-color: var(--pastel-green);
  background: var(--pastel-green-soft);
}

/* ---------- supplementary guide pages ---------- */
.guide-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  padding-bottom: 10px;
}

.guide-kicker {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: 600;
  color: var(--pastel-green);
  background: var(--pastel-green-soft);
  border: 1px solid color-mix(in srgb, var(--pastel-green) 35%, transparent);
  border-radius: 5px;
  padding: 4px 9px;
}

.guide-bar .print-btn { margin-bottom: 0; }

.guide-p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-dim);
  margin: 0 0 14px;
  max-width: 900px;
}

.guide-p b { color: var(--text); }

.ref-section > .info-list,
.ref-section > .hscroll { margin-bottom: 16px; }
.ref-section > .info-list:last-child,
.ref-section > .hscroll:last-child { margin-bottom: 0; }

/* decision chart */
.branch { margin-bottom: 16px; }

.branch-q {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
}

.branch-arms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.branch-arm {
  position: relative;
  border: 1px solid var(--border);
  border-top: 3px solid var(--text-faint);
  background: var(--bg-raised);
  border-radius: 8px;
  padding: 11px 14px;
}

.branch-arm.accent-green { border-top-color: var(--pastel-green); }
.branch-arm.accent-red   { border-top-color: var(--pastel-red); }

.branch-when {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-faint);
  margin-bottom: 5px;
}

.branch-then { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.45; }

.branch-note { font-size: 12.5px; color: var(--text-dim); line-height: 1.55; margin-top: 5px; }

/* phased pipeline */
.lanes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
  align-items: start;
}

.lane {
  border: 1px solid var(--border);
  background: var(--bg-raised);
  border-radius: 9px;
  padding: 13px 15px;
  border-top: 3px solid var(--pastel-green);
}

.lane.accent-red   { border-top-color: var(--pastel-red); }
.lane.accent-blue  { border-top-color: var(--series-1); }
.lane.accent-amber { border-top-color: var(--series-4); }
.lane.accent-plum  { border-top-color: var(--series-5); }

.lane-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.lane-num {
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--bg);
  background: var(--text-dim);
}

.lane-note { font-size: 12px; color: var(--text-faint); line-height: 1.5; margin-bottom: 8px; }

.lane-items {
  margin: 0;
  padding-left: 16px;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
}

.lane-items li { margin-bottom: 3px; }

/* aside */
.callout {
  border: 1px solid var(--border);
  border-left: 3px solid var(--pastel-green);
  background: color-mix(in srgb, var(--pastel-green) 7%, var(--bg-raised));
  border-radius: 8px;
  padding: 12px 15px;
  margin-bottom: 16px;
}

.callout.accent-red {
  border-left-color: var(--pastel-red);
  background: color-mix(in srgb, var(--pastel-red) 7%, var(--bg-raised));
}

.callout-title { font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 5px; }
.callout.accent-green .callout-title { color: var(--pastel-green); }
.callout.accent-red .callout-title { color: var(--pastel-red); }
.callout-text { font-size: 13.5px; color: var(--text-dim); line-height: 1.65; }

/* brief tint so you can see where a search result landed you */
.ref-section.section-flash {
  animation: section-flash 1.6s ease-out;
  border-radius: 8px;
}

@keyframes section-flash {
  0%, 40% { background: color-mix(in srgb, var(--pastel-green) 16%, transparent); }
  100%    { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .ref-section.section-flash { animation: none; }
}

.theme-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
}

.theme-toggle:hover { color: var(--text); border-color: var(--text-dim); }

.menu-toggle {
  display: none;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
}

.badge {
  background: var(--accent);
  color: var(--bg);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  margin-right: 10px;
}

.banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 12.5px;
}

.banner .muted { color: var(--text-faint); }

/* ---------- layout ---------- */
.layout {
  display: flex;
  flex: 1;
  min-height: 0;
}

.sidebar {
  width: 250px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding: 18px 0;
  overflow-y: auto;
}

.sidebar-group {
  margin-bottom: 2px;
}

.sidebar-group-title {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  background: none;
  border: none;
  border-radius: 0;
  font-family: var(--mono);
  font-size: 12px;
  text-align: left;
  letter-spacing: 0.3px;
  color: var(--text-dim);
  padding: 10px 16px 10px 14px;
  cursor: pointer;
}

.sidebar-group-title:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--cat-color, var(--text)) 9%, transparent);
}

.sg-icon {
  flex-shrink: 0;
  display: flex;
  color: var(--cat-color, var(--text-faint));
}

.sg-icon svg { width: 15px; height: 15px; }

.sg-label { flex: 1; min-width: 0; line-height: 1.35; }

.sg-count {
  flex-shrink: 0;
  font-size: 10.5px;
  color: var(--text-faint);
  background: var(--bg-inset);
  border-radius: 9px;
  padding: 1px 7px;
}

.sg-chevron {
  flex-shrink: 0;
  color: var(--text-faint);
  transition: transform 0.15s ease;
  font-size: 15px;
  line-height: 1;
}

.sidebar-group.open .sg-chevron { transform: rotate(90deg); }

.sidebar-group-body { display: none; padding-bottom: 6px; }
.sidebar-group.open .sidebar-group-body { display: block; }

.nav-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 16px 7px 37px;
  cursor: pointer;
  border-left: 2px solid transparent;
  color: var(--text-dim);
}

.nav-item:hover,
.nav-item:focus-visible {
  color: var(--text);
  background: color-mix(in srgb, var(--cat-color, var(--text)) 8%, transparent);
}

.nav-item.active {
  color: var(--text);
  border-left-color: var(--cat-color, var(--accent));
  background: color-mix(in srgb, var(--cat-color, var(--text)) 13%, transparent);
}

.nav-item .name {
  font-size: 13.5px;
}

.nav-item .tag {
  font-size: 11px;
  color: var(--text-faint);
  line-height: 1.4;
}

.main {
  flex: 1;
  overflow-y: auto;
  padding: 28px 34px 60px;
  min-width: 0;
}

.main-header {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.main-header h1 {
  font-size: 25px;
  margin: 0 0 8px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.main-header p {
  margin: 0 0 10px;
  color: var(--text-dim);
  font-size: 14.5px;
  line-height: 1.65;
  max-width: 780px;
}

/* ---------- panel / tabs ---------- */
.tabs {
  display: flex;
  gap: 22px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}

.tab {
  padding: 8px 2px 10px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 13px;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
}

.tab:hover { color: var(--text); }

.tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 22px;
}

@media (max-width: 900px) {
  .panel { grid-template-columns: 1fr; }
}

.stage {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  min-height: 420px;
  display: flex;
  flex-direction: column;
}

.stage-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 10px;
  flex-wrap: wrap;
}

.stage-hint {
  color: var(--text-faint);
  font-size: 11.5px;
}

.stage svg, .stage canvas {
  background: var(--bg-inset);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
}

.controls {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.control-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
}

.control-card h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-faint);
  margin: 0 0 12px;
}

.field {
  margin-bottom: 12px;
}

.field:last-child { margin-bottom: 0; }

.field label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 5px;
}

.field label .val {
  color: var(--text);
}

input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

select, input[type="text"], input[type="number"] {
  width: 100%;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12.5px;
  padding: 6px 8px;
  border-radius: 5px;
}

.btn-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

button {
  font-family: var(--mono);
  background: var(--bg-inset);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12.5px;
}

button:hover { border-color: var(--text-dim); }

button.primary {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  font-weight: 600;
}

button.primary:hover { background: var(--accent-dim); }

button:disabled { opacity: 0.4; cursor: not-allowed; }

.legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--text-dim);
}

.legend-item { display: flex; align-items: center; gap: 6px; }

.swatch {
  width: 9px; height: 9px; border-radius: 2px; display: inline-block;
}

.readout {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.7;
}

.readout b, .readout .num { color: var(--text); font-weight: 600; }

.kbd {
  font-size: 11px;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0px 5px;
  color: var(--text-dim);
}

.note {
  font-size: 11.5px;
  color: var(--text-faint);
  line-height: 1.6;
  margin-top: 10px;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- reference tab ---------- */
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Grids sit between other section blocks (math steps, tables), so they need
   trailing space of their own. The last block in a section does not. */
.ref-section > .info-grid { margin-bottom: 16px; }
.ref-section > .info-grid:last-child { margin-bottom: 0; }

@media (max-width: 720px) {
  .info-grid { grid-template-columns: 1fr; }
  .info-block.span2 { grid-column: span 1 !important; }
}

.info-block {
  border: 1px solid var(--border);
  background: var(--bg-raised);
  border-radius: 8px;
  padding: 14px 16px;
}

.info-block.span2 { grid-column: span 2; }

.info-block h4 {
  margin: 0 0 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-faint);
}

.info-block p {
  margin: 0 0 8px;
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.65;
}

.info-block p:last-of-type { margin-bottom: 0; }

.info-block p.formula {
  color: var(--text);
  font-size: 14px;
  background: var(--bg-inset);
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  padding: 8px 10px;
}

.info-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.7;
}

.param-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.param-table td {
  padding: 7px 10px;
  border-top: 1px solid var(--border-soft);
  color: var(--text-dim);
  vertical-align: top;
}
.param-table td:first-child {
  color: var(--text);
  white-space: nowrap;
  font-weight: 600;
  width: 1%;
}
.param-table tr:first-child td { border-top: none; }

/* ---------- expanded reference sections ---------- */
.ref-section { margin-bottom: 34px; }

.ref-h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.1px;
  margin: 0 0 14px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border);
}

.ref-num {
  flex-shrink: 0;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--pastel-green);
  background: var(--pastel-green-soft);
  border: 1px solid color-mix(in srgb, var(--pastel-green) 35%, transparent);
}

.info-block.lede p { font-size: 14.5px; color: var(--text); }

.ref-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.ref-table th {
  text-align: left;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-faint);
  font-weight: 600;
  padding: 9px 12px;
  background: var(--bg-inset);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.ref-table td {
  padding: 10px 12px;
  border-top: 1px solid var(--border-soft);
  color: var(--text-dim);
  line-height: 1.6;
  vertical-align: top;
}

.ref-table tbody tr:first-child td { border-top: none; }
.ref-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--text) 3%, transparent); }

.ref-table td:first-child {
  color: var(--text);
  font-weight: 600;
  min-width: 120px;
}

.inline-formula {
  font-size: 13px;
  color: var(--text);
  background: var(--bg-inset);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}

/* numbered derivation steps */
.math-steps { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }

.math-step {
  border: 1px solid var(--border);
  border-left: 3px solid var(--pastel-green);
  background: var(--bg-raised);
  border-radius: 8px;
  padding: 12px 15px;
}

.math-step-head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}

.math-step-num {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--pastel-green);
  background: var(--pastel-green-soft);
}

.math-step-note {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.6;
}

.math-step .formula {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  background: var(--bg-inset);
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  padding: 8px 10px;
  overflow-x: auto;
}

/* pipeline flow diagram */
.flow-wrap {
  border: 1px solid var(--border);
  background: var(--bg-raised);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 16px;
}

.flow-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-faint);
  margin-bottom: 12px;
}

.flow {
  display: flex;
  align-items: stretch;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.flow-node {
  flex: 0 0 auto;
  max-width: 190px;
  border: 1px solid var(--border);
  background: var(--bg-inset);
  border-radius: 7px;
  padding: 9px 12px;
}

.flow-node.accent-green {
  border-color: color-mix(in srgb, var(--pastel-green) 45%, transparent);
  background: var(--pastel-green-soft);
}

.flow-node.accent-red {
  border-color: color-mix(in srgb, var(--pastel-red) 45%, transparent);
  background: var(--pastel-red-soft);
}

.flow-label { font-size: 13px; font-weight: 600; color: var(--text); }

.flow-note {
  font-size: 11.5px;
  color: var(--text-dim);
  margin-top: 3px;
  line-height: 1.45;
}

.flow-arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  color: var(--text-faint);
  font-size: 15px;
}

/* advantages / limitations */
.pro-con {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

@media (max-width: 720px) { .pro-con { grid-template-columns: 1fr; } }

.info-block.pros {
  border-left: 3px solid var(--pastel-green);
  background: color-mix(in srgb, var(--pastel-green) 6%, var(--bg-raised));
}

.info-block.cons {
  border-left: 3px solid var(--pastel-red);
  background: color-mix(in srgb, var(--pastel-red) 6%, var(--bg-raised));
}

.info-block.pros h4 { color: var(--pastel-green); }
.info-block.cons h4 { color: var(--pastel-red); }

.info-list i { color: var(--text-faint); font-style: italic; }

/* why-chain Q&A */
.why-chain { display: flex; flex-direction: column; gap: 10px; }

.why-item {
  border: 1px solid var(--border);
  background: var(--bg-raised);
  border-radius: 8px;
  padding: 12px 15px;
}

.why-q {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 7px;
  padding-left: 20px;
  position: relative;
  line-height: 1.55;
}

.why-q::before {
  content: "Q";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--pastel-red);
}

.why-a {
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.65;
  padding-left: 20px;
  position: relative;
}

.why-a::before {
  content: "A";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--pastel-green);
}

/* code block */
.code-block {
  margin: 14px 0 0;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-dim);
}

.code-block code { white-space: pre; }

.plot-slot {
  margin-top: 6px;
  border-radius: 6px;
  overflow: hidden;
}

.plot-caption {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 4px;
}

.home-categories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 20px;
  margin-top: 24px;
  align-items: start;
}

.category-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-raised);
  overflow: hidden;
}

.category-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--cat-color, var(--accent)) 7%, var(--bg-raised));
}

.category-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cat-color, var(--text));
  background: color-mix(in srgb, var(--cat-color, var(--text)) 20%, var(--bg-raised));
  border: 1px solid color-mix(in srgb, var(--cat-color, var(--text)) 40%, transparent);
}

.category-icon svg { width: 20px; height: 20px; }

.category-title {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.1px;
}

.category-count {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 2px;
}

.algo-stack {
  display: flex;
  flex-direction: column;
}

.algo-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 18px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-soft);
  transition: background 0.12s ease;
}

.algo-row:last-child { border-bottom: none; }

.algo-row:hover,
.algo-row:focus-visible {
  background: color-mix(in srgb, var(--cat-color, var(--text)) 9%, var(--bg-raised));
}

.algo-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cat-color, var(--text));
  background: color-mix(in srgb, var(--cat-color, var(--text)) 14%, var(--bg-raised));
}

.algo-icon svg { width: 16px; height: 16px; }

.algo-info { min-width: 0; }

.algo-name {
  font-size: 14.5px;
  font-weight: 600;
  margin-bottom: 3px;
}

.algo-desc {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.55;
}

/* ---------- utility ---------- */
.hscroll {
  overflow-x: auto;
  max-width: 100%;
}

/* ---------- responsive ---------- */

/* Large desktop: let the reading column breathe without going full-bleed. */
@media (min-width: 1600px) {
  .main { padding: 32px 48px 72px; }
  .ref-section { max-width: 1280px; }
}

/* Narrow desktop / large tablet: the sidebar is the first thing to give. */
@media (max-width: 1100px) {
  .sidebar { width: 215px; }
  .search { width: 200px; }
  .home-categories { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
}

@media (max-width: 900px) {
  .search { width: 165px; }
  .search-kbd { display: none; }
  .home-categories { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
  .topbar { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
  .banner { padding: 8px 14px; font-size: 12px; }
  .menu-toggle { display: inline-block; }

  /* Search drops to its own full-width row under the brand. */
  .topbar-right { width: 100%; order: 3; gap: 10px; }
  .search { width: 100%; flex: 1; }
  .search-results { right: auto; left: 0; width: 100%; }

  .layout { flex-direction: column; }

  .sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: 0;
    padding: 0;
    overflow-y: auto;
    transition: max-height 0.2s ease;
  }
  .sidebar.open {
    max-height: 60vh;
    padding: 12px 0;
  }

  .main { padding: 18px 16px 40px; }
  .main-header h1 { font-size: 21px; }
  .panel { grid-template-columns: 1fr; }
  .tabs { gap: 16px; }
  .home-categories { grid-template-columns: 1fr; gap: 14px; }
  .stage { padding: 10px; min-height: 320px; }
  .info-grid { grid-template-columns: 1fr; }
  .info-block.span2 { grid-column: span 1; }

  /* Reference sections: stack the two-column pieces and keep tables scrollable. */
  .ref-h2 { font-size: 16px; }
  .pro-con { grid-template-columns: 1fr; }
  .ref-table { font-size: 12.5px; }
  .ref-table th, .ref-table td { padding: 8px 10px; }
  .ref-table td:first-child { min-width: 90px; }
  .flow { padding-bottom: 8px; }
  .code-block { font-size: 12px; padding: 12px; }
}

@media (max-width: 480px) {
  html, body { font-size: 15.5px; }
  .topbar { padding: 10px 12px; }
  .brand { font-size: 13.5px; }
  .main { padding: 16px 12px 36px; }
  .main-header h1 { font-size: 19px; }
  .ref-section { margin-bottom: 26px; }
  .math-step, .why-item, .info-block { padding: 11px 12px; }
  .algo-row, .category-header { padding-left: 13px; padding-right: 13px; }
  .flow-node { max-width: 150px; }
}

/* ---------- print: A4, single readable column ---------- */
@media print {
  /* Force the light palette; dark backgrounds waste ink and print grey. */
  :root,
  :root[data-theme="dark"],
  :root[data-theme="light"] {
    --bg: #ffffff;
    --bg-raised: #ffffff;
    --bg-inset: #f6f6f5;
    --border: #bbbbb8;
    --border-soft: #dddddb;
    --text: #000000;
    --text-dim: #2a2a28;
    --text-faint: #55554f;
    --accent: #000000;
    --pastel-red: #a32f2f;
    --pastel-red-soft: #f7e6e6;
    --pastel-green: #1f6b42;
    --pastel-green-soft: #e4f3ea;
  }

  @page { size: A4 portrait; margin: 14mm 12mm; }

  html, body {
    background: #fff;
    font-size: 10.5pt;
    height: auto;
  }

  /* Chrome-only elements have no place on paper. */
  .topbar, .sidebar, .menu-toggle, .theme-toggle, .search,
  .tabs, .guide-bar, .banner, .stage-toolbar, .controls, .btn-row, button {
    display: none !important;
  }

  .layout { display: block; }

  .main {
    overflow: visible;
    padding: 0;
    display: block;
  }

  /* Print the reference tab even when the playground is the visible one. */
  #tab-ref { display: block !important; }
  #tab-play { display: none !important; }

  .main-header {
    border-bottom: 1.5pt solid #000;
    margin-bottom: 12pt;
    padding-bottom: 8pt;
  }

  .main-header h1 { font-size: 20pt; }
  .main-header p { font-size: 10.5pt; max-width: none; }

  /* Keep a section's heading attached to its content across a page break. */
  .ref-section {
    break-inside: auto;
    margin-bottom: 14pt;
    max-width: none;
  }

  .ref-h2 {
    break-after: avoid;
    page-break-after: avoid;
    font-size: 13pt;
    margin-bottom: 8pt;
  }

  .info-block, .math-step, .why-item, .flow-wrap, .worked-example,
  .lane, .branch-arm, .callout {
    break-inside: avoid;
    page-break-inside: avoid;
    background: #fff;
    border: 0.5pt solid var(--border);
  }

  .ref-table { break-inside: auto; font-size: 9.5pt; }
  .ref-table tr { break-inside: avoid; page-break-inside: avoid; }
  .ref-table thead { display: table-header-group; }  /* repeat header per page */
  .ref-table tbody tr:nth-child(even) { background: #f6f6f5; }

  /* Nothing can scroll on paper, so let wide content wrap instead. */
  .hscroll, .flow, .code-block, .info-block, .plot-slot { overflow: visible !important; }
  .flow { flex-wrap: wrap; gap: 6pt; }
  .flow-node { max-width: none; }

  .code-block {
    font-size: 8.5pt;
    white-space: pre-wrap;
    word-break: break-word;
    border: 0.5pt solid var(--border);
    break-inside: avoid;
  }
  .code-block code { white-space: pre-wrap; }

  .inline-formula, .formula { white-space: normal; word-break: break-word; }

  .pro-con { grid-template-columns: 1fr 1fr; gap: 8pt; }
  .lanes { grid-template-columns: repeat(3, 1fr); gap: 7pt; }
  .branch-arms { grid-template-columns: repeat(2, 1fr); gap: 7pt; }
  .branch, .lanes { break-inside: avoid; page-break-inside: avoid; }
  .guide-p { font-size: 10.5pt; max-width: none; }
  .info-grid { gap: 8pt; }

  svg, canvas { max-width: 100% !important; height: auto !important; }

  a { text-decoration: none; color: inherit; }
}