/* css styles */

/* ── Design tokens — single source of truth for brand colours ──
   Promoted from media/media_styles.css so every stylesheet can
   reference var(--blue) instead of repeating raw hex values.   */
:root {
  --blue:       #64B5F6;
  --blue-2:     #42A5F5;
  --blue-3:     #1E88E5;
  --blue-soft:  rgba(100,181,246,.12);
  --blue-line:  rgba(100,181,246,.30);
  --blue-glow:  rgba(100,181,246,.06);
  --warm:       #E8A87C;
  --bg-body:    #0F1419;
  --ink-0:      rgba(255,255,255,.96);
  --ink-1:      rgba(255,255,255,.78);
  --ink-2:      rgba(255,255,255,.55);
  --ink-3:      rgba(255,255,255,.35);
  --ease:       cubic-bezier(.22,1,.36,1);
  --ff:         'Quicksand', system-ui, sans-serif;
  --ff-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ── Type scale (1.25 ratio) ── */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.4rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;
  --text-3xl:  clamp(2.2rem, 4.5vw, 3.4rem);
  --text-hero: clamp(2.5rem, 5vw, 5.5rem);

  /* ── Prose constraints ── */
  --prose-width: 68ch;
}

/* Prevent horizontal scroll */
body {
  overflow-x: hidden;
}

.navbar {
  background: transparent;
  position: fixed;
  width: 100%;
  overflow-x: visible !important;
  z-index: 1000;
  transition: background-color 0.4s ease, padding-top 0.4s ease, padding-bottom 0.4s ease, box-shadow 0.4s ease;
}

.navbar--scrolled {
  background-color: rgba(15, 20, 25, 0.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
}

.navbar a {
  color: white;
  transition: color 0.3s ease, transform 0.3s ease;
  position: relative;
}

.navbar a:hover {
  color: #D63030;
}

.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-item.active > .nav-link {
  color: #D63030 !important;
}

/* Suppress the browser focus-ring/box-shadow on click, but keep it for keyboard navigation */
.navbar a:focus:not(:focus-visible),
.navbar .nav-link:focus:not(:focus-visible),
.navbar .navbar-brand:focus:not(:focus-visible),
.navbar .dropdown-item:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* Anchor jump targets clear the fixed navbar (~80px height) */
:target,
section.level2,
section.level2 > h2 {
  scroll-margin-top: 100px;
}

/* Search button icon — override Quarto's Bootstrap gray */
.navbar #quarto-search.type-overlay .aa-Autocomplete svg.aa-SubmitIcon {
  color: #fff;
  opacity: 1;
}

/* ====== Navbar Title — Plain ====== */
.navbar-title {
  display: inline-block;
  white-space: nowrap;
  color: #fff;
  vertical-align: middle;
}

/* ====== Navbar Dropdown Menu — extends from navbar, matches its chrome ====== */
.navbar .dropdown-menu {
  --bs-dropdown-bg: rgba(15, 20, 25, 0.92);
  --bs-dropdown-color: rgba(255, 255, 255, 0.92);
  --bs-dropdown-link-color: rgba(255, 255, 255, 0.85);
  --bs-dropdown-link-hover-color: #ffffff;
  --bs-dropdown-link-hover-bg: transparent;
  --bs-dropdown-link-active-color: #D63030;
  --bs-dropdown-link-active-bg: transparent;
  --bs-dropdown-border-color: rgba(255, 255, 255, 0.08);
  --bs-dropdown-border-width: 1px;
  --bs-dropdown-border-radius: 0 0 10px 10px;
  --bs-dropdown-padding-y: 6px;
  --bs-dropdown-min-width: 240px;
  background: rgba(15, 20, 25, 0.92) !important;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-top: none !important;
  border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0 0 10px 10px !important;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.55),
    0 1px 0 rgba(100, 181, 246, 0.18) inset !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 1050 !important;
  display: block !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0.28s;
  pointer-events: none;
  margin-top: 0;
  padding: 6px 0 !important;
}

/* Show dropdown via opacity (smoother than display:block toggle) */
.navbar .nav-item.dropdown {
  position: relative;
}

.navbar .nav-item.dropdown:hover > .dropdown-menu,
.navbar .nav-item.dropdown:focus-within > .dropdown-menu,
.navbar .dropdown:hover > .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.navbar .nav-item.dropdown > .dropdown-menu::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

/* Submenu items mirror the navbar nav-link hover language: gradient underline + glow + letter-spacing breathe */
.navbar .dropdown-menu .dropdown-item {
  position: relative;
  display: block;
  padding: 9px 18px 11px 18px;
  margin: 0;
  font-size: 0.92rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9) !important;
  background: transparent !important;
  -webkit-font-smoothing: antialiased;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  transition: color 0.3s ease,
              text-shadow 0.3s ease,
              background-color 0.3s ease,
              letter-spacing 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Gradient underline slide-in (same as navbar nav-link::after) */
.navbar .dropdown-menu .dropdown-item::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: #D63030;
  transition: width 0.3s ease, left 0.3s ease;
}

.navbar .dropdown-menu .dropdown-item:hover::after,
.navbar .dropdown-menu .dropdown-item:focus::after {
  width: calc(100% - 36px);
  left: 18px;
}

.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
  color: #ffffff !important;
  background: rgba(214, 48, 48, 0.06) !important;
  text-shadow: 0 0 10px rgba(214, 48, 48, 0.5);
  letter-spacing: 0.06em;
}

/* Icon inside dropdown items — subtle blue tint, full color on hover */
.navbar .dropdown-menu .dropdown-item i {
  display: inline-block;
  width: 18px;
  margin-right: 10px;
  text-align: center;
  color: rgba(214, 48, 48, 0.7);
  transition: color 0.3s ease;
}

.navbar .dropdown-menu .dropdown-item:hover i,
.navbar .dropdown-menu .dropdown-item:focus i {
  color: #D63030;
}

/* ====== Navbar Logo (Stanford lockup) ====== */
.navbar-logo {
  height: 32px;
  max-height: none !important;
  width: auto;
  margin-right: 12px;
  vertical-align: middle;
}

/* ====== Navbar entry animations ====== */
@keyframes navLinkIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes brandIn {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Logo: fade+slide in, scale down when scrolled */
.navbar-brand {
  opacity: 0;
  animation: brandIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.navbar--scrolled .navbar-brand {
  transform: scale(0.85);
}

/* Staggered nav link entry */
.navbar .nav-item {
  opacity: 0;
  animation: navLinkIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.navbar .nav-item:nth-child(1) { animation-delay: 0.08s; }
.navbar .nav-item:nth-child(2) { animation-delay: 0.14s; }
.navbar .nav-item:nth-child(3) { animation-delay: 0.20s; }
.navbar .nav-item:nth-child(4) { animation-delay: 0.26s; }
.navbar .nav-item:nth-child(5) { animation-delay: 0.32s; }
.navbar .nav-item:nth-child(6) { animation-delay: 0.38s; }
.navbar .nav-item:nth-child(7) { animation-delay: 0.44s; }
.navbar .nav-item:nth-child(8) { animation-delay: 0.50s; }

/* Underline slide animation for regular navbar links */
.navbar .navbar-nav > .nav-item > .nav-link {
  position: relative;
  padding-bottom: 5px;
  -webkit-font-smoothing: antialiased;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  transition: color 0.25s ease;
}

/* Hide dropdown caret entirely */
.navbar .navbar-nav .nav-link.dropdown-toggle::after,
.navbar .nav-link.dropdown-toggle::after {
  display: none !important;
}

.navbar .navbar-nav > .nav-item > .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.6);
  transition: width 0.25s ease;
}

.navbar .navbar-nav > .nav-item > .nav-link:hover::after {
  width: 100%;
}

/* Active page: persistent underline */
.navbar .nav-item.active > .nav-link::after,
.navbar .nav-item > .nav-link.active::after {
  width: 100% !important;
}

.navbar .navbar-nav > .nav-item > .nav-link:hover {
  color: #fff;
}

/* Scroll-progress line at bottom of navbar.
   Hidden globally — only long-form tutorial detail pages re-enable it
   via _tutorial_detail.css, where it reads as a reading-progress cue. */
.nav-progress {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 1px;
  background: linear-gradient(90deg, var(--blue), var(--blue-2), var(--blue));
  background-size: 200% 100%;
  animation: progressShimmer 3s linear infinite;
  pointer-events: none;
  opacity: 0;
  transition: width 0.1s linear, opacity 0.4s ease;
}

.nav-progress.visible {
  opacity: 1;
}

@keyframes progressShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Reduced motion overrides */
@media (prefers-reduced-motion: reduce) {
  .navbar-brand { opacity: 1 !important; animation: none !important; }
  .navbar .nav-item { opacity: 1 !important; animation: none !important; transform: none !important; }
  .nav-progress { animation: none !important; }
}

/* Dropdown parent needs relative positioning and visible overflow */
.navbar .dropdown {
  position: relative;
}

.navbar .navbar-nav {
  overflow: visible !important;
}

/* (Old transparent dropdown block removed — see unified .dropdown-menu rule earlier in this file) */

/* ================================================================
   MOBILE NAVIGATION (≤991px) — minimalist inline panel
   Keeps Bootstrap/Quarto's default inline-collapse mechanism; adds
   animated hamburger, restrained styling, and a subtle staggered
   fade-up on open.
   ================================================================ */
@media (max-width: 991px) {
  .navbar:not(.navbar--scrolled) {
    background: transparent !important;
  }
  .navbar {
    backdrop-filter: blur(10px);
    padding: 10px 20px;
    max-width: 100vw;
    overflow-x: hidden !important;
  }

  /* ---- Hamburger button — minimalist borderless ----- */
  .navbar-toggler {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 6px 8px;
    transition: opacity 0.2s ease;
  }
  .navbar-toggler:hover {
    opacity: 0.7;
  }
  .navbar-toggler:focus {
    box-shadow: none !important;
    outline: none !important;
  }
  .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-width='1.5' d='M3 6h18M3 12h18M3 18h18'/%3e%3c/svg%3e") !important;
    width: 24px;
    height: 24px;
  }

  /* ---- Inline collapse panel — solid translucent box ---------
     No backdrop-filter: blur during a height transition is the main
     source of jank — the GPU has to re-blur the background every
     frame as the panel grows. A solid translucent bg renders smooth. */
  .navbar-collapse {
    background: rgba(15, 20, 28, 0.94) !important;
    padding: 14px 12px;
    border-radius: 14px;
    margin-top: 14px;
    border: 1px solid rgba(100, 181, 246, 0.12);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Snappier, more refined curve than Bootstrap's default 0.35s ease */
  .navbar-collapse.collapsing {
    transition: height 0.26s cubic-bezier(0.32, 0, 0.16, 1) !important;
  }

  /* ---- Nav items (top-level) -------------------------------- */
  .navbar-nav {
    max-width: 100%;
    overflow-x: hidden;
  }
  .navbar-nav .nav-item { margin: 3px 0; }

  .navbar .navbar-nav > .nav-item > .nav-link {
    font-family: 'Quicksand', sans-serif;
    font-size: 1rem !important;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.88) !important;
    padding: 11px 16px !important;
    border-radius: 10px;
    background: transparent !important;
    border: 1px solid transparent !important;
    letter-spacing: 0.02em;
    display: flex !important;
    align-items: center;
    gap: 12px;
    transition: color 0.25s ease,
                background 0.25s ease,
                border-color 0.25s ease;
    word-wrap: break-word;
  }
  .navbar .navbar-nav > .nav-item > .nav-link::after {
    display: none !important;
  }
  .navbar .navbar-nav > .nav-item > .nav-link:hover,
  .navbar .navbar-nav > .nav-item > .nav-link:focus {
    color: #ffffff !important;
    background: rgba(214, 48, 48, 0.08) !important;
    border-color: rgba(214, 48, 48, 0.2) !important;
  }
  .navbar-collapse .nav-link i,
  .navbar-collapse .nav-link svg,
  .navbar-collapse .nav-link .fa-solid {
    color: #D63030;
    margin-right: 0 !important;
    width: 20px;
    text-align: center;
  }

  /* ---- Dropdown submenu — inline under its parent ------------ */
  .navbar .dropdown > .nav-link {
    opacity: 0.85;
  }
  .navbar .dropdown > .nav-link.dropdown-toggle::after {
    display: none !important;
  }
  .navbar .dropdown-menu {
    position: static !important;
    top: auto !important;
    left: auto !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 2px 0 4px 20px !important;
    margin: 2px 0 4px 18px !important;
    box-shadow: none !important;
    pointer-events: auto !important;
    width: auto;
    min-width: 0 !important;
  }
  .navbar .dropdown-menu .dropdown-item {
    font-family: 'Quicksand', sans-serif !important;
    font-size: 0.92rem !important;
    font-weight: 300 !important;
    color: rgba(255, 255, 255, 0.78) !important;
    padding: 8px 14px !important;
    margin: 2px 0 !important;
    border-radius: 8px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    pointer-events: auto !important;
    display: flex !important;
    align-items: center;
    gap: 10px;
    transition: color 0.25s ease,
                background 0.25s ease,
                border-color 0.25s ease;
  }
  .navbar .dropdown-menu .dropdown-item::after {
    display: none !important;
  }
  .navbar .dropdown-menu .dropdown-item:hover,
  .navbar .dropdown-menu .dropdown-item:focus {
    color: #ffffff !important;
    background: rgba(100, 181, 246, 0.08) !important;
    border-color: rgba(100, 181, 246, 0.2) !important;
  }
  .navbar .dropdown-menu .dropdown-item i,
  .navbar .dropdown-menu .dropdown-item .fa-solid {
    color: var(--blue);
    margin-right: 0 !important;
    width: 18px;
    text-align: center;
  }

  /* Mobile menu items appear INSTANTLY — no per-item fade. The staggered
     navItemIn fade replayed every time the collapsed menu was toggled open,
     which read as an annoying flash / "mini reload". Also neutralize the base
     `.navbar .nav-item` entrance (opacity:0 + navLinkIn) on mobile so items are
     simply visible the moment the panel opens. (Scoped inside this mobile
     @media block, so the desktop navbar entrance is untouched.) */
  .navbar-collapse .navbar-nav > .nav-item {
    animation: none !important;
    opacity: 1 !important;
    will-change: auto;
  }

  /* Center Stanford logo + name in the navbar (independent of hamburger
     width). Absolute positioning takes the brand out of the flex flow so
     the toggler can't shift it off-center. */
  nav.navbar > .navbar-container.container-fluid {
    position: relative;
  }
  .navbar-brand-container {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
    margin: 0 !important;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 5;
    pointer-events: auto;
  }
  .navbar-brand-container .navbar-brand {
    margin: 0;
    padding: 0;
  }
  .navbar-brand-container .navbar-logo {
    margin-right: 0;
  }

  /* Hide the brand while the hamburger menu is open. Otherwise the
     absolutely-positioned brand re-centers inside the now-taller navbar
     and floats into the middle of the menu. */
  .navbar:has(.navbar-collapse.show) .navbar-brand-container,
  .navbar:has(.navbar-collapse.collapsing) .navbar-brand-container,
  .navbar:has(.navbar-toggler[aria-expanded="true"]) .navbar-brand-container {
    display: none !important;
  }
}

/* Small mobile devices — slightly tighter gutters */
@media (max-width: 576px) {
  .navbar {
    padding: 8px 15px;
  }
  .navbar-collapse {
    padding: 12px 10px;
  }
}

/* Honour reduced-motion users — drop the animations */
@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
  .navbar-collapse.show,
  .navbar-collapse.show .navbar-nav > .nav-item {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .navbar-toggler-icon,
  .navbar-toggler-icon::before,
  .navbar-toggler-icon::after {
    transition: none !important;
  }
}
/* Import Quicksand only — Roboto was unused */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--ff);
  background: #222C32;
  background-color: oklch(5% 0.005 230);
  color: oklch(97% 0.005 230);
  height: 100%;
  width: 100%;
  margin: 0;
}

@media (max-width: 485px) {
  img.navbar-logo {
    display: none;
  }
}

canvas {
  display: block;
  width: 100%;
}


.heading-wrapper h2 {
  all: unset;
  font-size: clamp(0.5rem, 3vw, 1.5rem);
  font-weight: 100;
  display: block;
  color: white;
  text-align: left;
  line-height: 1;
}



.heading-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: left;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.heading {
  font-size: clamp(2.5rem, 5vw, 5.5rem);
  color: #fff;
  margin: 0 0 0.1em 0;
  padding: 0;
  line-height: 1;
  text-align: left;
  font-weight: 300;
}

.heading.sub {
  font-size: clamp(0.5rem, 3vw, 1.5rem);
  font-weight: 100;
  margin: 0;
  padding: 0;
  line-height: 1.2;
  color: #fff;
  text-align: left;
  opacity: 0;
  transform: translateY(10px);
}

.heading-context {
  font-family: var(--ff);
  font-size: clamp(0.65rem, 1.4vw, 0.85rem);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--warm);
  opacity: 0;
  margin: 0.6rem 0 0;
  line-height: 1;
}

.heading-image {
  width: 38%;
  margin-top: 1.2em;
  opacity: 0;
  transform: translateY(40px);
  display: block;
  align-self: flex-start;
}


/* Phone layout — centered over the background */
@media (max-width: 480px) {
  .heading-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* stay dead-center */
    width: min(92vw, 600px);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
  }

  .heading {
    font-size: clamp(1.8rem, 10vw, 2.6rem);
    line-height: 1.1;
    margin: 0;
    text-align: center;
  }

  .heading-wrapper h2,
  .heading.sub {
    font-size: clamp(1rem, 4.2vw, 1.25rem);
    line-height: 1.2;
    margin: 0;
    text-align: center;
  }

  .heading-context {
    opacity: 1;
    text-align: center;
  }

.heading.sub {
  opacity: 1;
  transform: none;
}

.heading-image {
  width: 180px;
  margin-top: 0.4rem;
  margin-inline: auto;
  align-self: center;
  opacity: 1;
  transform: none;
  display: block;
}


}

/* ====== Name SVG Animation ====== */
#logo {
  color: #ffffff;
  display: block;
  opacity: 0;
}

#logo.logo--no-motion { opacity: 1; }

.logo--entering {
  animation: logoEntrance 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes logoEntrance {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.logo {
  width: clamp(10rem, 30vw, 16rem);
  height: auto;
  display: block;
  margin: 0 0 0.1em 0;
}

.logo__letter {
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
  animation-fill-mode: forwards;
  stroke: currentColor;
}

.logo__letter--J  { stroke-dasharray: 51 51; }
.logo__letter--o1 { stroke-dasharray: 70 70; }
.logo__letter--r1 { stroke-dasharray: 22 22; }
.logo__letter--r2 { stroke-dasharray: 20 20; }
.logo__letter--g1 { stroke-dasharray: 66 66; }
.logo__letter--g2 { stroke-dasharray: 51 51; }
.logo__letter--e  { stroke-dasharray: 75 75; }
.logo__letter--R1 { stroke-dasharray: 32 32; }
.logo__letter--R2 { stroke-dasharray: 41 41; }
.logo__letter--R3 { stroke-dasharray: 19 19; }
.logo__letter--o2 { stroke-dasharray: 70 70; }
.logo__letter--a1 { stroke-dasharray: 70 70; }
.logo__letter--a2 { stroke-dasharray: 23 23; }

/* Ghost groups hidden until stroke drawing begins */
.logo__group:not(.logo__group--animated) { opacity: 0; }
.logo--running .logo__group:not(.logo__group--animated),
.logo--done    .logo__group:not(.logo__group--animated) { opacity: 0.2; }

/* Animated group starts fully hidden — no flash when logo--running fires */
.logo__group--animated .logo__letter--J  { stroke-dashoffset: 51; }
.logo__group--animated .logo__letter--o1 { stroke-dashoffset: 70; }
.logo__group--animated .logo__letter--r1 { stroke-dashoffset: 22; }
.logo__group--animated .logo__letter--r2 { stroke-dashoffset: 20; }
.logo__group--animated .logo__letter--g1 { stroke-dashoffset: 66; }
.logo__group--animated .logo__letter--g2 { stroke-dashoffset: 51; }
.logo__group--animated .logo__letter--e  { stroke-dashoffset: 75; }
.logo__group--animated .logo__letter--R1 { stroke-dashoffset: 32; }
.logo__group--animated .logo__letter--R2 { stroke-dashoffset: 41; }
.logo__group--animated .logo__letter--R3 { stroke-dashoffset: 19; }
.logo__group--animated .logo__letter--o2 { stroke-dashoffset: 70; }
.logo__group--animated .logo__letter--a1 { stroke-dashoffset: 70; }
.logo__group--animated .logo__letter--a2 { stroke-dashoffset: 23; }

.logo--running .logo__letter--J  { animation-name: anim-J;  stroke-dashoffset: 51; }
.logo--running .logo__letter--o1 { animation-name: anim-o1; stroke-dashoffset: 70; }
.logo--running .logo__letter--r1 { animation-name: anim-r1; stroke-dashoffset: 22; }
.logo--running .logo__letter--r2 { animation-name: anim-r2; stroke-dashoffset: 20; }
.logo--running .logo__letter--g1 { animation-name: anim-g1; stroke-dashoffset: 66; }
.logo--running .logo__letter--g2 { animation-name: anim-g2; stroke-dashoffset: 51; }
.logo--running .logo__letter--e  { animation-name: anim-e;  stroke-dashoffset: 75; }
.logo--running .logo__letter--R1 { animation-name: anim-R1; stroke-dashoffset: 32; }
.logo--running .logo__letter--R2 { animation-name: anim-R2; stroke-dashoffset: 41; }
.logo--running .logo__letter--R3 { animation-name: anim-R3; stroke-dashoffset: 19; }
.logo--running .logo__letter--o2 { animation-name: anim-o2; stroke-dashoffset: 70; }
.logo--running .logo__letter--a1 { animation-name: anim-a1; stroke-dashoffset: 70; }
.logo--running .logo__letter--a2 { animation-name: anim-a2; stroke-dashoffset: 23; }

.logo--running .logo__group:nth-child(2) .logo__letter { animation-delay: 0.33s; }
.logo--running .logo__group:nth-child(3) .logo__letter { animation-delay: 0.67s; }

/* Stroke color cycles through background palette then settles to white */
.logo--running { animation: colorShift 2.5s ease forwards; }
@keyframes colorShift {
  0%   { color: #1976D2; }
  20%  { color: #E91E63; }
  40%  { color: #4CAF50; }
  65%  { color: #FF9800; }
  85%  { color: #FBC02D; }
  100% { color: #ffffff; }
}

/* Keep animated group fully drawn after animation ends */
.logo--done .logo__group--animated .logo__letter { stroke-dashoffset: 0; }

/* Subtitle, context, and Stanford logo fade+scale in together after stroke drawing completes */
.heading-wrapper--done .heading.sub,
.heading-wrapper--done .heading-context,
.heading-wrapper--done .heading-image {
  animation: fadeScale 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes fadeScale {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes anim-J  { from { stroke-dashoffset: 51; } to { stroke-dashoffset: 0; } }
@keyframes anim-o1 { from { stroke-dashoffset: 70; } to { stroke-dashoffset: 0; } }
@keyframes anim-r1 { from { stroke-dashoffset: 22; } 50%, to { stroke-dashoffset: 0; } }
@keyframes anim-r2 { from, 50% { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }
@keyframes anim-g1 { from { stroke-dashoffset: 66; } to { stroke-dashoffset: 0; } }
@keyframes anim-g2 { from, 50% { stroke-dashoffset: 51; } to { stroke-dashoffset: 0; } }
@keyframes anim-e  { from { stroke-dashoffset: 75; } to { stroke-dashoffset: 0; } }
@keyframes anim-R1 { from { stroke-dashoffset: 32; } 50%, to { stroke-dashoffset: 0; } }
@keyframes anim-R2 { from { stroke-dashoffset: 41; } to { stroke-dashoffset: 0; } }
@keyframes anim-R3 { from, 60% { stroke-dashoffset: 19; } to { stroke-dashoffset: 0; } }
@keyframes anim-o2 { from { stroke-dashoffset: 70; } to { stroke-dashoffset: 0; } }
@keyframes anim-a1 { from { stroke-dashoffset: 70; } to { stroke-dashoffset: 0; } }
@keyframes anim-a2 { from, 50% { stroke-dashoffset: 23; } to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  #logo,
  .heading.sub,
  .heading-context,
  .heading-image {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .logo__group:not(.logo__group--animated) { opacity: 0.2 !important; }
  .logo__group--animated .logo__letter,
  .logo--running .logo__letter {
    stroke-dashoffset: 0 !important;
    animation: none !important;
  }
  .logo--running { animation: none !important; }
}

/* ============================================
   Publication detail pages — title block
   ============================================ */
.quarto-title-block {
  padding-top: 100px;
}

.quarto-title-block .quarto-title .title {
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.15;
  color: #fff;
}

.quarto-title-block .quarto-title .subtitle {
  font-family: 'Quicksand', sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--warm);
  font-style: italic;
}

.quarto-title-block .quarto-title-meta-heading {
  font-family: 'Quicksand', sans-serif;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  font-size: 0.8rem;
}

.quarto-title-block .quarto-title-meta-contents p {
  font-family: 'Quicksand', sans-serif;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.75);
}

.quarto-title-block .quarto-title-meta-contents .date {
  color: rgba(255, 255, 255, 0.5);
}

.quarto-title-block .quarto-title-meta-contents .doi a {
  color: var(--blue);
  text-decoration: none;
  transition: color 0.3s ease;
}

.quarto-title-block .quarto-title-meta-contents .doi a:hover {
  color: #90CAF9;
}

.quarto-title-block .quarto-category {
  font-family: 'Quicksand', sans-serif;
  font-weight: 300;
  letter-spacing: 0.04em;
  background: rgba(100, 181, 246, 0.12);
  border: 1px solid rgba(100, 181, 246, 0.25);
  color: var(--blue);
  border-radius: 6px;
  padding: 2px 10px;
  font-size: 0.78rem;
}

/* Publication page body text */
.quarto-title-block ~ #quarto-document-content,
.quarto-title-block ~ section,
.quarto-title-block ~ p,
#quarto-content .quarto-body-content p {
  font-family: 'Quicksand', sans-serif;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.75;
  max-width: var(--prose-width);
}

/* ============================================================
   Code chunks — global Solarized Dark palette
   Applies sitewide so every page with R / Python / shell chunks
   reads the same. Unscoped on purpose: Quarto's only visible
   .sourceCode elements are inside knitr / jupyter cells.
   bg=base03 #002b36, fg=base3 #fdf6e3
   ============================================================ */

pre code,
.sourceCode {
  font-size: 0.88rem;
  line-height: 1.6;
}

div.sourceCode {
  background: #002b36;
  border: 1px solid #073642;
  border-radius: 8px;
  padding: 0.85rem 1.05rem;
  margin: 0.9rem 0 1rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
div.sourceCode pre {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  color: #fdf6e3;
  white-space: pre;
  overflow-x: auto;
}

/* Quarto's syntax CSS colours every line-span; force bright cream so
   unclassified tokens (identifiers, parens) stay legible on base03. */
div.sourceCode pre > code.sourceCode > span,
div.sourceCode code.sourceCode > span {
  color: #fdf6e3 !important;
}
div.sourceCode pre code,
div.sourceCode pre code span {
  background: transparent;
}

/* Filename label bar — Quarto renders #| filename: "x.R" as a small
   header above the code block. Style as a quiet caption strip. */
.code-with-filename .code-with-filename-file {
  background: #073642;
  border: 1px solid #073642;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 0.4rem 0.95rem;
  margin: 0.9rem 0 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #ffffff;
}
.code-with-filename .code-with-filename-file pre,
.code-with-filename .code-with-filename-file pre strong,
.code-with-filename .code-with-filename-file strong {
  color: #ffffff;
}
.code-with-filename .code-with-filename-file pre {
  margin: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
}
.code-with-filename + div.sourceCode,
.code-with-filename .sourceCode,
.code-with-filename div.sourceCode {
  border-radius: 0 0 8px 8px;
  margin-top: 0;
}

/* Code-fold toggle — Quarto wraps foldable cells in <details>. Render the
   summary as a quiet inline text-link (chevron + label) with no borders
   or boxes; it sits above the code as a single elegant control. */
details.code-fold {
  background: transparent;
  border: none;
  border-radius: 0;
  margin: 0.9rem 0 1rem;
  overflow: visible;
}
details.code-fold > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.7rem;
  margin-bottom: -0.15rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgba(147, 161, 161, 0.85);
  user-select: none;
  position: relative;
  transition: color 0.22s ease,
              background 0.22s ease,
              transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Pull the summary to the negative-left so its left edge aligns with the
   code block's content (cancelling the inner padding visually). */
details.code-fold > summary { margin-left: -0.7rem; }
details.code-fold > summary::-webkit-details-marker,
details.code-fold > summary::marker { display: none; content: ""; }

/* Elegant FontAwesome code icon — solid `</>` glyph, blue with a soft glow,
   doesn't rotate (the icon represents "code", not state). */
details.code-fold > summary::before {
  content: "\f121";              /* fa-code */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.78em;
  color: var(--blue);
  display: inline-block;
  filter: drop-shadow(0 0 4px rgba(100, 181, 246, 0.32));
  transition: color 0.22s ease, filter 0.22s ease;
}

/* Chevron after the label — small caret that rotates on open to signal state */
details.code-fold > summary::after {
  content: "\f078";              /* fa-chevron-down */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.62em;
  color: rgba(147, 161, 161, 0.6);
  margin-left: 0.15rem;
  display: inline-block;
  transform: rotate(-90deg);     /* points right when collapsed */
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              color 0.22s ease;
}
details.code-fold[open] > summary::after {
  transform: rotate(0deg);       /* points down when open */
  color: var(--blue);
}

details.code-fold > summary:hover {
  color: #fdf6e3;
  background: linear-gradient(90deg,
    rgba(100, 181, 246, 0.12) 0%,
    rgba(100, 181, 246, 0.04) 70%,
    transparent 100%);
  transform: translateX(2px);
}
details.code-fold > summary:hover::before {
  color: #ffffff;
  filter: drop-shadow(0 0 8px rgba(100, 181, 246, 0.65));
}
details.code-fold > summary:hover::after {
  color: var(--blue);
}
details.code-fold > summary:focus-visible {
  outline: none;
  color: #fdf6e3;
}
/* The code block keeps its own borderless Solarized container — the
   wrapper adds nothing visual, just a click target above it. */
details.code-fold > div.sourceCode {
  margin: 0;
}

/* Output blocks — base02 a touch lighter, blue left accent */
.cell-output pre,
.cell-output-stdout pre,
.cell-output-display pre {
  font-size: 0.84rem;
  line-height: 1.55;
  background: #073642;
  border: 1px solid #586e75;
  border-left: 3px solid #268bd2;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  color: #93a1a1;
  margin-top: 0.4rem;
}

/* ── Syntax classes — Solarized Dark mapping ── */
.sourceCode .kw, .sourceCode .cf, .sourceCode .pp, .sourceCode .im
  { color: #859900; font-weight: 700; }                /* keyword / control / import */
.sourceCode .fu, .sourceCode .bu, .sourceCode .bi
  { color: #268bd2; }                                   /* function / builtin */
.sourceCode .st, .sourceCode .ch, .sourceCode .vs, .sourceCode .ss
  { color: #2aa198; }                                   /* string / char */
.sourceCode .dv, .sourceCode .fl, .sourceCode .bn, .sourceCode .cn
  { color: #d33682; }                                   /* numeric / constant */
.sourceCode .co, .sourceCode .do, .sourceCode .an, .sourceCode .cv
  { color: #586e75; font-style: italic; }               /* comment */
.sourceCode .op, .sourceCode .ot, .sourceCode .sc
  { color: #859900; }                                   /* operator */
.sourceCode .dt, .sourceCode .at
  { color: #b58900; }                                   /* type / attribute */
.sourceCode .va
  { color: #fdf6e3; font-weight: 500; }                 /* variable / identifier */
.sourceCode .er, .sourceCode .al
  { color: #dc322f; font-weight: 700; }                 /* error / alert */
.sourceCode .wa
  { color: #cb4b16; }                                   /* warning */
.sourceCode { color: #fdf6e3; }                          /* fallback */

/* Copy button — solarized blue */
.code-copy-button { color: rgba(38, 139, 210, 0.7); }
.code-copy-button:hover {
  color: #268bd2;
  background: rgba(38, 139, 210, 0.12);
}

/* Inline code (single backticks in prose) — same blue chip on every page so
   prose reads consistent with the rest of the site, not solarized cyan. */
:not(pre) > code {
  background: rgba(100, 181, 246, 0.10);
  color: #82AAFF;
  border: 1px solid rgba(100, 181, 246, 0.25);
  border-radius: 4px;
  padding: 0.08rem 0.4rem;
  font-size: 0.88em;
}

/* ============================================================
   Mobile-friendly globals
   ------------------------------------------------------------
   Sitewide rules so every page renders cleanly on narrow
   viewports. Section-specific responsive rules still live in
   their own stylesheets; this block covers cross-cutting
   elements: tables, images, content padding, prose wrapping.
   ============================================================ */

/* Tables — horizontal scroll on narrow widths instead of clipping.
   Quarto tables are not wrapped in .table-responsive by default, so
   we flip them to block on small viewports to let them scroll. */
@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }
}

/* Images — never overflow their container. Quarto/markdown images
   default to width:auto, which can spill past the column on small
   screens when the source is wider than the viewport. */
img {
  max-width: 100%;
  height: auto;
}

/* Prose — break long URLs and tokens so they wrap instead of forcing
   horizontal scroll on the body. Skips code (which scrolls instead). */
@media (max-width: 768px) {
  p, li, dd, dt, blockquote, figcaption {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
}

/* Narrow-viewport content padding — every section's #quarto-content
   sets its own desktop padding; this clamps the inner gutter on
   small screens so text doesn't run edge-to-edge. */
@media (max-width: 600px) {
  #quarto-content {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  /* …except the full-bleed custom layout (home). The gutter above insets the
     background <canvas>, so the dark page background shows as side strips — a
     "frame" around the home animation. Keep it edge-to-edge so the background
     merges seamlessly. More specific than the rule above, so it wins at every
     narrow breakpoint (incl. the 400px one below). */
  #quarto-content.page-layout-custom {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 400px) {
  #quarto-content {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  div.sourceCode {
    padding: 0.7rem 0.8rem;
  }
  pre code,
  .sourceCode {
    font-size: 0.78rem;
  }
}

/* SEO descriptions live in <meta name="description"> in <head> — no need to
   render them visually in the title block */
.quarto-title-block .description,
.quarto-title .description {
  display: none !important;
}

/* ====== Page Footer — mirrors scrolled navbar chrome ====== */
.nav-footer {
  position: relative;
  z-index: 1;
  background: #000;
  border-top: 1px solid rgba(100, 181, 246, 0.12);
  padding: 4px max(24px, calc((100% - 1400px) / 2)) !important;
  font-family: var(--ff);
  font-size: 13px;
  line-height: 1.2;
  color: #fff;
  min-height: unset;
}

.nav-footer a {
  color: #fff;
  text-decoration: none;
  transition: color 0.25s var(--ease);
}

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

/* Left — copyright */
.nav-footer-left {
  color: #fff;
  font-size: 13px;
}

.footer-year {
  color: #fff;
}

/* Center — Quarto credit */
.nav-footer-center {
  color: #fff;
  font-size: 13px;
}

.nav-footer-center img {
  display: inline;
  height: 13px !important;
  width: auto !important;
  vertical-align: -2px;
  opacity: 0.65;
  transition: opacity 0.2s ease;
}

.nav-footer-center a:hover img {
  opacity: 1;
}

/* Right — social icons */
.nav-footer-right .footer-items p {
  margin: 0;
  line-height: 1;
}

.nav-footer-right .footer-items {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.1rem;
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
}

/* Staggered entrance — IO adds .footer-icon-in */
.nav-footer-right .footer-items li {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.nav-footer-right .footer-items li.footer-icon-in {
  opacity: 1;
  transform: translateY(0);
}

.nav-footer-right a.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #fff !important;
  font-size: 15px;
  background: transparent;
  transition: color 0.25s var(--ease),
              transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 0.35s var(--ease);
}

/* Per-icon brand color glow + twist on hover */
/* 1 envelope — Gmail red */
.nav-footer-right .footer-items li:nth-child(1) a:hover {
  color: #EA4335 !important;
  transform: translateY(-5px) scale(1.22);
  filter: drop-shadow(0 0 7px rgba(234,67,53,0.65));
}
/* 2 github — near-white */
.nav-footer-right .footer-items li:nth-child(2) a:hover {
  color: #c9d1d9 !important;
  transform: translateY(-5px) scale(1.22);
  filter: drop-shadow(0 0 7px rgba(201,209,217,0.55));
}
/* 3 twitter-x — near-white */
.nav-footer-right .footer-items li:nth-child(3) a:hover {
  color: #e7e9ea !important;
  transform: translateY(-5px) scale(1.22);
  filter: drop-shadow(0 0 7px rgba(231,233,234,0.5));
}
/* 4 linkedin — LinkedIn blue */
.nav-footer-right .footer-items li:nth-child(4) a:hover {
  color: #0A66C2 !important;
  transform: translateY(-5px) scale(1.22);
  filter: drop-shadow(0 0 7px rgba(10,102,194,0.7));
}
/* 5 mortarboard — Google Scholar blue */
.nav-footer-right .footer-items li:nth-child(5) a:hover {
  color: #4285F4 !important;
  transform: translateY(-5px) scale(1.22);
  filter: drop-shadow(0 0 7px rgba(66,133,244,0.65));
}
/* 6 orcid — ORCID green */
.nav-footer-right .footer-items li:nth-child(6) a:hover {
  color: #A6CE39 !important;
  transform: translateY(-5px) scale(1.22);
  filter: drop-shadow(0 0 7px rgba(166,206,57,0.65));
}
/* 7 letterboxd — Letterboxd green */
.nav-footer-right .footer-items li:nth-child(7) a:hover {
  color: #00E054 !important;
  transform: translateY(-5px) scale(1.22);
  filter: drop-shadow(0 0 7px rgba(0,224,84,0.65));
}
/* 8 stanford — Stanford cardinal */
.nav-footer-right .footer-items li:nth-child(8) a:hover {
  color: #8C1515 !important;
  transform: translateY(-5px) scale(1.22);
  filter: drop-shadow(0 0 7px rgba(140,21,21,0.7));
}

/* Mobile: keep the footer minimal — just the copyright line. The social icons
   and the Quarto credit crowded and broke the layout on phones, so hide both
   below 768px and center the copyright on its own. */
@media (max-width: 767px) {
  .nav-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0.85rem 1rem !important;
    min-height: auto !important;
  }
  .nav-footer-center,
  .nav-footer-right {
    display: none !important;
  }
  .nav-footer-left {
    width: 100% !important;
    text-align: center !important;
  }
  .nav-footer-left p {
    margin: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-footer-right a {
    transition: color 0.25s ease !important;
  }
  .nav-footer-right a:hover {
    transform: none !important;
  }
}

/* ================================================================
   Callouts — dark-theme palette
   Quarto's defaults paint a light pastel header (note=light blue,
   tip=light green, important=light pink) with near-white title text,
   so the title reads white-on-pastel — nearly invisible on the site's
   near-black background. Recolour each type to a dark accent-tinted
   header with a bright accent title, and give the whole box a faint
   card surface + soft border so it reads as a contained panel on black.
   Loaded site-wide (the tutorials are the only pages using callouts).
   ================================================================ */
.callout.callout-style-default {
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left-width: 5px;                /* keep Quarto's accent bar */
  border-radius: 0.6rem;
  overflow: hidden;                       /* clip the header tint to the rounded corners */
}
.callout.callout-style-default > .callout-header {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.callout.callout-style-default .callout-title-container {
  color: var(--ink-0);
  font-weight: 600;
}
.callout.callout-style-default .callout-body,
.callout.callout-style-default .callout-body-container,
.callout.callout-style-default .callout-body :is(p, li, dd, dt) {
  color: var(--ink-1);
}

/* Per-type accents: left bar, header tint, title colour.
   The `div` prefix matches Quarto's own per-type specificity so our
   palette wins the left-bar colour (else Quarto's default accents show). */
div.callout-note.callout-style-default { border-left-color: var(--blue); }
.callout-note.callout-style-default > .callout-header { background-color: rgba(100, 181, 246, 0.14) !important; }
.callout-note.callout-style-default .callout-title-container { color: #90CAF9; }

div.callout-tip.callout-style-default { border-left-color: #66BB6A; }
.callout-tip.callout-style-default > .callout-header { background-color: rgba(102, 187, 106, 0.14) !important; }
.callout-tip.callout-style-default .callout-title-container { color: #A5D6A7; }

div.callout-important.callout-style-default { border-left-color: #EF5350; }
.callout-important.callout-style-default > .callout-header { background-color: rgba(239, 83, 80, 0.14) !important; }
.callout-important.callout-style-default .callout-title-container { color: #EF9A9A; }