/* Math Bridge banner — flat, same geometry as the slides banner (founder 2026-09-05: "make them look
   like other banners, don't make it 3D looking"). Purple stays only as the accent and the button. */
.math-bridge-banner {
  --math-bridge-accent: #7c5cbf;
  --math-bridge-action: #5d3b91;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  width: 100%;
  min-width: 0;
  margin: 1.35rem 0;
  padding: 0.85rem 0.95rem;
  border: 1px solid #d2d6dc;
  border-left: 6px solid var(--math-bridge-accent);
  border-radius: 0.9rem;
  box-sizing: border-box;
  background: linear-gradient(118deg, #f6f8f9 0%, #eef1f4 100%);
  box-shadow: none;
  color: #21242c !important;
  text-decoration: none !important;
  transition: border-color 120ms ease;
}
#quarto-document-content .math-bridge-banner__character { display:block; width:58px; height:58px; border:1px solid #c9cfd6; border-radius:50%!important; box-sizing:border-box; object-fit:cover; background:#fff; box-shadow:none; }
.math-bridge-banner__copy { min-width:0; }
.math-bridge-banner__eyebrow { display:block; margin-bottom:.2rem; color:var(--math-bridge-action); font-size:.72rem; font-weight:800; letter-spacing:.08em; line-height:1.3; text-transform:uppercase; }
#quarto-document-content .math-bridge-banner__copy strong { display:block; color:#17303f!important; font-size:1.02rem; font-weight:800; line-height:1.35; }
.math-bridge-banner__copy span:last-child { display:block; margin-top:.2rem; color:#3d4650; font-size:.96rem; line-height:1.5; overflow-wrap:anywhere; }
.math-bridge-banner__action { display:inline-flex; align-items:center; justify-content:center; min-width:166px; min-height:46px; padding:.6rem .9rem; border:1px solid var(--math-bridge-action); border-radius:999px; box-sizing:border-box; background:var(--math-bridge-action); color:#fff; font-size:.9rem; font-weight:800; line-height:1.25; text-align:center; box-shadow:none; }
.math-bridge-banner__action::after { margin-left:.4rem; content:"\2192"; }
.math-bridge-banner:hover { color:#21242c!important; border-color:#b9bfc7; box-shadow:none; transform:none; }
.math-bridge-banner:hover .math-bridge-banner__action { background:#4a2f75; border-color:#4a2f75; }
.math-bridge-banner:hover::after { display:none!important; }
.math-bridge-banner:focus-visible { outline:3px solid rgba(24,101,242,.28); outline-offset:3px; }
@media (max-width:640px) {
  .math-bridge-banner { grid-template-columns:48px minmax(0,1fr); gap:.75rem; padding:.85rem; border-left-width:5px; }
  #quarto-document-content .math-bridge-banner__character { width:48px; height:48px; }
  .math-bridge-banner__action { grid-column:1/-1; width:100%; }
}
@media (prefers-color-scheme:dark) {
  .math-bridge-banner { background:linear-gradient(118deg, #20252c 0%, #1b2026 100%); border-color:#3a4149; color:#e6eaee!important; }
  #quarto-document-content .math-bridge-banner__copy strong { color:#f3f5f7!important; }
  .math-bridge-banner__copy span:last-child { color:#c9d1d9; }
  .math-bridge-banner__eyebrow { color:#c4b0ff; }
  .math-bridge-banner__action { background:#8b6cd6; border-color:#8b6cd6; color:#17131f; }
  .math-bridge-banner:hover .math-bridge-banner__action { background:#9d82e0; border-color:#9d82e0; }
}
@media (prefers-reduced-motion:reduce) { .math-bridge-banner { transition:none; } }