.bc-topic-visual {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr);
  margin: 0 0 34px;
  overflow: hidden;
  border: 1px solid #d8d1c4;
  border-radius: 10px;
  background: #fffdf8;
}

.bc-topic-visual-art {
  position: relative;
  min-height: 270px;
  overflow: hidden;
  border-right: 1px solid #d8d1c4;
  background: #f3ead8;
}

.bc-topic-visual-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.bc-topic-visual-code {
  position: absolute;
  top: 15px;
  left: 15px;
  padding: 5px 9px;
  color: #fffdf8;
  background: #17364a;
  border-radius: 3px;
  font: 700 11px/1.2 var(--font-mono);
  letter-spacing: .05em;
}

.bc-topic-visual-model {
  display: grid;
  align-content: center;
  min-width: 0;
  padding: 18px;
  background: #fffdf8;
}

.bc-topic-visual-model svg {
  width: 100%;
  height: auto;
  display: block;
}

.bc-topic-visual figcaption {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 11px 15px;
  color: #4f5352;
  border-top: 1px solid #d8d1c4;
  font-size: 12px;
  line-height: 1.5;
}

.bc-topic-visual figcaption strong { color: #17364a; }
.bc-topic-visual-source { color: #8a5a3b; font: 700 10px/1.2 var(--font-mono); letter-spacing: .04em; white-space: nowrap; }

.bc-topic-visual--teaching {
  display: block;
  background: #fffefa;
}

.bc-topic-teaching-art {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-bottom: 1px solid #d8d1c4;
  background: #f7f1e7;
}

.bc-topic-teaching-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.bc-topic-teaching-art .bc-topic-visual-code {
  background: rgba(23, 54, 74, .94);
}

.bc-figure-label,
.bc-figure-point {
  position: absolute;
  z-index: 1;
  padding: 4px 7px 3px;
  color: #17364a;
  border-bottom: 2px solid #b96543;
  background: rgba(255, 254, 250, .92);
  font: 700 clamp(9px, 1.15vw, 13px)/1.25 var(--font-body);
  letter-spacing: .01em;
  white-space: nowrap;
}

.bc-figure-point {
  padding: 2px 5px;
  color: #7d382b;
  border-bottom: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
}

.bc-figure-label--outside-left { left: 8%; top: 57%; }
.bc-figure-label--inside { left: 50%; top: 45%; transform: translateX(-50%); }
.bc-figure-label--outside-right { right: 8%; top: 57%; }
.bc-figure-point--left { left: 27.7%; top: 62%; transform: translateX(-50%); }
.bc-figure-point--centre { left: 50%; top: 62%; transform: translateX(-50%); }
.bc-figure-point--right { left: 72.3%; top: 62%; transform: translateX(-50%); }
.bc-figure-label--field { right: 12%; top: 21%; }
.bc-figure-label--region { left: 24%; top: 25%; }
.bc-figure-label--slices { right: 19%; top: 25%; }
.bc-figure-label--petal { left: 50%; top: 15%; transform: translateX(-50%); }
.bc-figure-label--pole { left: 50%; top: 54%; transform: translate(-50%, -50%); }
.bc-figure-label--target { right: 12%; top: 26%; }
.bc-figure-label--centre-guide { left: 50%; top: 54%; transform: translateX(-50%); }

.bc-topic-teaching-note {
  display: grid;
  grid-template-columns: minmax(190px, .65fr) minmax(0, 1.35fr);
  gap: 18px;
  align-items: center;
  padding: 14px 17px;
  background: #fffefa;
}

.bc-topic-teaching-note code {
  display: block;
  color: #17364a;
  background: transparent;
  font: 700 15px/1.45 Georgia, "Times New Roman", serif;
  white-space: normal;
}

.bc-topic-teaching-note p {
  margin: 0;
  color: #4f5352;
  font-size: 13px;
  line-height: 1.55;
}

.bc-inline-concept-visual {
  margin: 26px 0 30px;
  overflow: hidden;
  border: 1px solid #d8d1c4;
  border-radius: 10px;
  background: #fffefa;
}

.bc-inline-concept-art {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-bottom: 1px solid #d8d1c4;
  background: #f7f1e7;
}

.bc-inline-concept-art > img.bc-inline-paper,
.bc-inline-concept-art > svg.bc-inline-vector {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.bc-inline-concept-art > img.bc-inline-paper {
  z-index: 0;
  object-fit: cover !important;
}

.bc-inline-concept-art > svg.bc-inline-vector {
  z-index: 1;
  pointer-events: none;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.bc-inline-axis,
.bc-inline-curve,
.bc-inline-guide,
.bc-secant,
.bc-tangent,
.bc-limit-arrow {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}

.bc-inline-axis {
  stroke: #42535a;
  stroke-width: 2;
}

.bc-inline-curve {
  fill: none;
  stroke: #244b6b;
  stroke-width: 3.1;
  stroke-linejoin: round;
}

.bc-inline-guide {
  stroke: #7b8584;
  stroke-width: 1.5;
  stroke-dasharray: 6 7;
}

.bc-secant {
  stroke: #b96543;
  stroke-width: 2.2;
}

.bc-secant--far { opacity: .42; }
.bc-secant--mid { opacity: .68; }
.bc-secant--near { opacity: .96; }

.bc-tangent {
  stroke: #236a67;
  stroke-width: 3;
}

.bc-fixed-point {
  fill: #17364a;
  stroke: #fffefa;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.bc-moving-point {
  fill: #b96543;
  stroke: #fffefa;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.bc-moving-point--mid { opacity: .76; }
.bc-moving-point--far { opacity: .5; }

.bc-limit-arrow {
  stroke: #b96543;
  stroke-width: 3;
}

.bc-limit-arrowhead { fill: #b96543; }

.bc-inline-math-label,
.bc-inline-flow-label,
.bc-inline-line-label,
.bc-inline-axis-label,
.bc-inline-function-label,
.bc-inline-panel-heading,
.bc-inline-figure-title {
  paint-order: stroke;
  stroke: #fffefa;
  stroke-width: 8px;
  stroke-linejoin: round;
  fill: #17364a;
  font-family: Georgia, "Times New Roman", "Noto Serif SC", serif;
  font-size: 22px;
  font-weight: 700;
}

.bc-inline-axis-label {
  fill: #42535a;
  font-size: 19px;
  font-style: italic;
}

.bc-inline-function-label {
  fill: #244b6b;
  font-size: 20px;
}

.bc-inline-flow-label {
  font-family: var(--font-body);
  font-size: 24px;
}

.bc-inline-line-label {
  fill: #9d4f36;
  font-family: var(--font-body);
  font-size: 20px;
}

.bc-inline-line-label--tangent { fill: #1f615f; }

.bc-inline-figure-title {
  fill: #31434a;
  font-family: var(--font-body);
  font-size: 22px;
  text-anchor: middle;
}

.bc-inline-panel-heading {
  stroke-width: 5px;
  fill: #31434a;
  font-family: var(--font-body);
  text-anchor: middle;
  font-size: 23px;
}

.bc-riemann-area {
  fill: rgba(70, 110, 133, .12);
  stroke: none;
}

.bc-riemann-rect {
  fill: rgba(185, 101, 67, .24);
  stroke: #a85d42;
  stroke-width: 1.35;
  vector-effect: non-scaling-stroke;
}

.bc-riemann-panel[data-panel="fine"] .bc-riemann-rect {
  fill: rgba(70, 110, 133, .18);
  stroke: rgba(36, 75, 107, .72);
  stroke-width: .8;
}

.bc-limit-axis,
.bc-limit-curve,
.bc-limit-guide,
.bc-limit-bound,
.bc-limit-asymptote,
.bc-limit-level,
.bc-limit-arrow-line,
.bc-limit-table-line {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bc-limit-axis {
  stroke: #46565c;
  stroke-width: 1.8;
}

.bc-limit-curve {
  stroke: #244b6b;
  stroke-width: 2.8;
}

.bc-limit-guide {
  stroke: #788482;
  stroke-width: 1.25;
  stroke-dasharray: 6 7;
}

.bc-limit-bound {
  stroke: #a8674d;
  stroke-width: 2;
  opacity: .78;
}

.bc-limit-asymptote,
.bc-limit-level {
  stroke: #a85d42;
  stroke-width: 1.8;
  stroke-dasharray: 8 7;
}

.bc-limit-arrow-line {
  stroke: #b96543;
  stroke-width: 2.15;
  marker-end: url(#bc-limit-companion-arrow);
}

.bc-limit-panel,
.bc-limit-rule-box,
.bc-limit-table-frame {
  fill: rgba(255, 254, 250, .7);
  stroke: #c9c1b4;
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

.bc-limit-rule-box {
  fill: rgba(227, 238, 239, .7);
  stroke: #9eafb0;
}

.bc-limit-table-head {
  fill: rgba(220, 231, 230, .84);
}

.bc-limit-table-line {
  stroke: #bdb5a8;
  stroke-width: 1;
}

.bc-limit-point,
.bc-limit-accent-point,
.bc-limit-wrong-point,
.bc-limit-open {
  vector-effect: non-scaling-stroke;
}

.bc-limit-point {
  fill: #244b6b;
  stroke: #fffefa;
  stroke-width: 2.2;
}

.bc-limit-accent-point {
  fill: #b96543;
  stroke: #fffefa;
  stroke-width: 2.2;
}

.bc-limit-wrong-point {
  fill: #b96543;
  stroke: #fffefa;
  stroke-width: 2;
}

.bc-limit-open {
  fill: #fffefa;
  stroke: #244b6b;
  stroke-width: 2.6;
}

.bc-limit-title,
.bc-limit-panel-title,
.bc-limit-label,
.bc-limit-callout,
.bc-limit-note,
.bc-limit-formula,
.bc-limit-operation,
.bc-limit-accent-text,
.bc-limit-table-text,
.bc-limit-table-target {
  paint-order: stroke;
  stroke: #fffefa;
  stroke-width: 6px;
  stroke-linejoin: round;
  fill: #263e4a;
  font-family: var(--font-body);
  font-weight: 650;
  text-anchor: middle;
}

.bc-limit-title {
  fill: #17364a;
  font: 700 24px/1.2 Georgia, "Times New Roman", "Noto Serif SC", serif;
}

.bc-limit-panel-title {
  fill: #48575c;
  font-size: 19px;
}

.bc-limit-label {
  font: 700 19px/1.2 Georgia, "Times New Roman", serif;
}

.bc-limit-callout {
  fill: #254d5d;
  font-size: 18px;
}

.bc-limit-note {
  fill: #5d6665;
  font-size: 16px;
}

.bc-limit-formula {
  fill: #17364a;
  font: 700 20px/1.2 Georgia, "Times New Roman", serif;
}

.bc-limit-formula--large { font-size: 27px; }

.bc-limit-operation {
  fill: #b96543;
  font: 700 31px/1 Georgia, "Times New Roman", serif;
}

.bc-limit-accent-text {
  fill: #9d4f36;
  font: 700 19px/1.2 Georgia, "Times New Roman", serif;
}

.bc-limit-table-text,
.bc-limit-table-target {
  font: 700 20px/1.2 Georgia, "Times New Roman", serif;
}

.bc-limit-table-target {
  fill: #9d4f36;
  font-size: 24px;
}

.bc-limit-companion .bc-inline-concept-equation {
  justify-content: center;
}

.bc-course-companion-art {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-bottom: 1px solid #d8d1c4;
  background: #f7f1e7;
}

.bc-course-companion-art > img.bc-inline-paper {
  position: absolute !important;
  z-index: 0;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
}

.bc-course-companion-diagram {
  position: absolute;
  z-index: 1;
  inset: 7% 10% 5%;
  display: grid;
  place-items: center;
}

.bc-course-companion-diagram > svg {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.bc-course-companion-formula {
  justify-content: center;
  text-align: center;
}

.bc-course-companion-formula code {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: 17px;
}

.bc-course-companion-takeaway {
  grid-column: 1 / -1;
  color: #596261;
}

.bc-inline-concept-equation {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 13px;
  align-items: center;
  padding: 14px 17px;
  color: #4f5352;
  border-bottom: 1px solid #e7e0d4;
  font-size: 13px;
  line-height: 1.45;
}

.bc-inline-concept-equation code {
  color: #17364a;
  background: #f3eee5;
  border-radius: 4px;
  padding: 5px 8px;
  font: 700 15px/1.35 Georgia, "Times New Roman", serif;
}

.bc-inline-concept-equation b {
  color: #b96543;
  font-size: 21px;
}

.bc-inline-concept-visual figcaption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 11px 15px;
  color: #4f5352;
  font-size: 12px;
  line-height: 1.5;
}

.bc-inline-concept-visual figcaption strong { color: #17364a; }

@media (max-width: 720px) {
  .bc-topic-visual { grid-template-columns: 1fr; }
  .bc-topic-visual-art { min-height: 210px; border-right: 0; border-bottom: 1px solid #d8d1c4; }
  .bc-topic-visual-model { padding: 14px 18px; }
  .bc-topic-visual-model svg { max-height: 230px; }
  .bc-topic-visual figcaption { grid-template-columns: 1fr; gap: 4px; }
  .bc-topic-teaching-note { grid-template-columns: 1fr; gap: 7px; padding: 12px 14px; }
  .bc-topic-teaching-note code { font-size: 13px; }
  .bc-figure-label,
  .bc-figure-point { font-size: 9px; padding: 2px 4px; }
  .bc-inline-concept-visual { margin: 20px 0 24px; }
  .bc-inline-concept-equation { align-items: flex-start; padding: 12px 13px; }
  .bc-inline-concept-equation b { display: none; }
  .bc-inline-concept-equation code { font-size: 13px; }
  .bc-inline-concept-visual figcaption { grid-template-columns: 1fr; gap: 4px; }
}

@media print {
  .bc-topic-visual { break-inside: avoid; }
}