/* MyST Theme Options */

:root {
  --cite-group-open: '[';
  --cite-group-close: ']';
}

/* User Provided Stylesheet */

/*
 * LLMs × Music — site theme
 *
 * Startup-style look built on the ISMIR 2026 palette: warm paper background,
 * Helvetica throughout, hairline borders instead of shadows, the official
 * gold as the single accent, and navy / olive as semantic colors.
 */

@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap");

/* ---------------------------------------------------------------- tokens */

/*
 * Palette: ISMIR 2026 official colors (asset/keycolor.png).
 *   gold   #ab7827  — official color, used as the single accent
 *   brown  #685440 / #977a5d / #f1eae4  — neutrals (text, borders, surfaces)
 *   navy   #2c4970 / #607b9a / #e8eef3  — foundations, notes
 *   olive  #636a3d / #8f9066 / #e8e7d0  — applications, tips
 */

:root {
  --ml-gold: #ab7827;
  --ml-gold-ink: #8a6020;
  --ml-gold-tint: #f5ecdc;
  --ml-brown-1: #685440;
  --ml-brown-2: #977a5d;
  --ml-brown-3: #f1eae4;
  --ml-navy-1: #2c4970;
  --ml-navy-2: #607b9a;
  --ml-navy-3: #e8eef3;
  --ml-olive-1: #636a3d;
  --ml-olive-2: #8f9066;
  --ml-olive-3: #e8e7d0;

  --ml-bg: #fcfaf7;
  --ml-surface: #f6f1ec;
  --ml-surface-strong: var(--ml-brown-3);
  --ml-text: #2b221a;
  --ml-text-muted: var(--ml-brown-1);
  --ml-text-faint: #8c7158;
  --ml-border: #ece4dc;
  --ml-border-strong: #dbcdbf;
  --ml-accent: var(--ml-gold);
  --ml-accent-ink: var(--ml-gold-ink);
  --ml-accent-soft: rgba(171, 120, 39, 0.14);
  --ml-code-bg: #f6f1ec;

  --ml-font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ml-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

html.dark {
  --ml-gold: #d29a45;
  --ml-gold-ink: #e0b066;
  --ml-gold-tint: rgba(210, 154, 69, 0.12);
  --ml-brown-1: #c9b6a2;
  --ml-brown-2: #a58a6e;
  --ml-brown-3: #2c251f;
  --ml-navy-1: #9db4d0;
  --ml-navy-2: #7f98b6;
  --ml-navy-3: rgba(96, 123, 154, 0.16);
  --ml-olive-1: #b9bb8c;
  --ml-olive-2: #9c9d72;
  --ml-olive-3: rgba(143, 144, 102, 0.16);

  --ml-bg: #1a1612;
  --ml-surface: #231e19;
  --ml-surface-strong: #2e2720;
  --ml-text: #f1eae4;
  --ml-text-muted: #c9b6a2;
  --ml-text-faint: #9a8269;
  --ml-border: #332b24;
  --ml-border-strong: #4a3f34;
  --ml-accent-soft: rgba(210, 154, 69, 0.18);
  --ml-code-bg: #221d18;
}

/* ------------------------------------------------------------------ base */

html,
body {
  background-color: var(--ml-bg) !important;
  color: var(--ml-text);
  font-family: var(--ml-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--ml-accent-soft);
}

/* Remove the default MyST sidebar branding. */
.myst-made-with-myst {
  display: none !important;
}

/* ---------------------------------------------------------------- layout */

/*
 * On wide screens the sidebar is pinned under the site title in the top bar
 * (instead of floating in the article grid), and the article grid starts
 * right after it with a wider reading column.
 */
@media (min-width: 1280px) {
  :root {
    /* Left edge of the header logo: nav padding + centered 1440px bar + link margin. */
    --ml-title-left: calc(max(0px, (100vw - 1504px) / 2) + 64px);
    --ml-sidebar-width: 16.5rem;
    --ml-sidebar-end: calc(var(--ml-title-left) - 12px + var(--ml-sidebar-width));
  }

  .myst-primary-sidebar {
    bottom: 0;
  }

  .myst-primary-sidebar-pointer {
    /* Escape the grid area so `left` is measured from the viewport edge. */
    grid-column: auto !important;
    position: absolute;
    top: 0;
    bottom: 0;
    /* Row padding (12px) puts the chapter text on the title's left edge. */
    left: calc(var(--ml-title-left) - 12px);
    width: var(--ml-sidebar-width);
  }

  .article-grid {
    grid-template-columns:
      [screen-start] 0
      [screen-inset-start page-start page-inset-start body-outset-start] calc(var(--ml-sidebar-end) + 1.25rem)
      [body-start gutter-left-start] 1rem
      [body-inset-start] minmax(8ch, 13ch)
      [middle-start] minmax(8ch, 13ch)
      [gutter-left-end] minmax(8ch, 13ch) minmax(8ch, 13ch)
      [gutter-right-start] minmax(8ch, 13ch)
      [middle-end] minmax(8ch, 13ch)
      [body-inset-end] 1rem
      [body-end gutter-right-end] 3rem
      [body-outset-end] minmax(5rem, 13rem)
      [page-inset-end] 3rem
      [page-end] 1fr
      [screen-inset-end] 0
      [screen-end];
  }
}

/* --------------------------------------------------------------- top nav */

.myst-top-nav {
  background-color: color-mix(in srgb, var(--ml-bg) 85%, transparent) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--ml-border);
}

/* ISMIR 2026 logo: larger than the theme default; header stays 60px tall. */
.myst-top-nav {
  padding-top: 0.375rem !important;
  padding-bottom: 0.375rem !important;
}

.myst-home-link-logo img {
  height: 2.75rem !important;
  width: auto !important;
}

/* Keep the wordmark clear of the search and menu buttons on phones. */
@media (max-width: 640px) {
  .myst-home-link-logo img {
    height: 1.75rem !important;
  }
}

.myst-home-link span {
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  color: var(--ml-text);
}

.myst-search-bar {
  background-color: var(--ml-surface) !important;
  border-color: transparent !important;
  border-radius: 999px !important;
  color: var(--ml-text-muted) !important;
  padding-left: 0.5rem;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.myst-search-bar:hover {
  border-color: var(--ml-border-strong) !important;
  --tw-ring-color: transparent !important;
}

.myst-search-shortcut kbd {
  border-color: var(--ml-border-strong) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  font-family: var(--ml-font-sans);
  font-size: 0.7rem;
  background: var(--ml-bg);
}

.myst-theme-button {
  border-color: var(--ml-border-strong) !important;
  color: var(--ml-text-muted) !important;
}

.myst-theme-button:hover {
  background-color: var(--ml-surface) !important;
  color: var(--ml-text) !important;
}

/* Header action buttons (e.g. GitHub). */
.myst-top-nav-bar a[target="_blank"] {
  border-radius: 999px !important;
  border-color: var(--ml-text) !important;
  background-color: var(--ml-text);
  color: var(--ml-bg) !important;
  font-size: 0.875rem;
  font-weight: 400;
  padding: 0.55rem 1.1rem;
  transition: opacity 0.15s ease;
}

.myst-top-nav-bar a[target="_blank"]:hover {
  background-color: var(--ml-text) !important;
  opacity: 0.85;
}

/* ------------------------------------------------------------ sidebar TOC */

.myst-toc {
  counter-reset: ml-chapter;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--ml-text-muted);
}

/* Front page entry (labelled with the project title). */
.myst-toc > a.myst-toc-item:first-child {
  margin-bottom: 0.25rem !important;
  padding-left: 0.5rem !important;
  color: var(--ml-text);
}

/* No bold anywhere in the sidebar; color and markers carry the state. */
.myst-toc .font-bold,
.myst-toc .font-semibold,
.myst-toc .font-medium {
  font-weight: 400 !important;
}

.myst-toc-item {
  border-radius: 8px !important;
  color: var(--ml-text-muted);
  transition: background-color 0.12s ease, color 0.12s ease;
}

.myst-toc-item:hover,
.myst-toc-item button:hover {
  background-color: var(--ml-surface) !important;
  color: var(--ml-text);
}

/*
 * Chapter rows: a mono number in front of each numbered chapter. Titles
 * match `myst.yml`; Conclusion / References stay unnumbered.
 */
.myst-toc > div[data-state]:has(> .myst-toc-item > div[title="Overview of Large Language Models and Agents"]),
.myst-toc > div[data-state]:has(> .myst-toc-item > div[title="LLM-powered Music Understanding"]),
.myst-toc > div[data-state]:has(> .myst-toc-item > div[title="Music Listening with LLMs"]),
.myst-toc > div[data-state]:has(> .myst-toc-item > div[title="LLMs for Creators"]),
.myst-toc > div[data-state]:has(> .myst-toc-item > div[title="Feedback & Music Education"]) {
  counter-increment: ml-chapter;
  --ml-chapter-label: counter(ml-chapter);
}

/* Part labels above the first chapter of each part. */
.myst-toc > div[data-state]:has(> .myst-toc-item > div[title="Overview of Large Language Models and Agents"])::before,
.myst-toc > div[data-state]:has(> .myst-toc-item > div[title="Music Listening with LLMs"])::before,
.myst-toc > div[data-state]:has(> .myst-toc-item > div[title="Conclusion"])::before {
  display: block;
  margin: 1.5rem 0 0.375rem;
  padding-left: 0.5rem;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ml-text-faint);
}

.myst-toc > div[data-state]:has(> .myst-toc-item > div[title="Overview of Large Language Models and Agents"])::before {
  content: "Part I · Foundations";
}

.myst-toc > div[data-state]:has(> .myst-toc-item > div[title="Music Listening with LLMs"])::before {
  content: "Part II · Applications";
}

.myst-toc > div[data-state]:has(> .myst-toc-item > div[title="Conclusion"])::before {
  content: "Wrap-up";
}

.myst-toc-item > div[title] {
  display: flex;
  gap: 0.75rem;
  color: var(--ml-text) !important;
}

.myst-toc-item > div[title]::before {
  content: var(--ml-chapter-label, "");
  flex: none;
  width: 0.75rem;
  padding-top: 0.1rem;
  font-family: var(--ml-font-mono);
  font-size: 0.6875rem;
  color: var(--ml-text-faint);
}

/*
 * Part 0 is a flat list of pages directly under the front page. Its label sits
 * above the first page (outside the link box), and the page titles line up with
 * the chapter titles below.
 */
.myst-toc > a.myst-toc-item[title="Background: LLMs and Agents"],
.myst-toc > a.myst-toc-item[title="Overview of Tutorial"] {
  margin: 0 !important;
  padding-left: 2rem !important;
}

.myst-toc > a.myst-toc-item[title="Background: LLMs and Agents"] {
  position: relative;
  margin-top: 2.6rem !important;
}

.myst-toc > a.myst-toc-item[title="Background: LLMs and Agents"]::before {
  content: "Part 0 · Introduction";
  position: absolute;
  left: 0.5rem;
  top: -1.4rem;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ml-text-faint);
  pointer-events: none;
}

/* The open chapter's number takes the accent color. */
.myst-toc > div[data-state="open"] .myst-toc-item > div[title]::before {
  color: var(--ml-accent);
}

.myst-toc-item button {
  color: var(--ml-text-faint);
}

.myst-toc-item button svg {
  width: 1rem !important;
  height: 1rem !important;
}

/* Pages inside a chapter hang off a hairline rail. */
.myst-toc .collapsible-content {
  margin: 0.125rem 0 0.5rem 1.15rem;
  padding: 0 !important;
  border-left: 1px solid var(--ml-border);
}

.myst-toc .collapsible-content > a.myst-toc-item {
  margin: 0 !important;
  padding: 0.4rem 0.75rem 0.4rem 1rem !important;
  border-radius: 0 8px 8px 0 !important;
  font-size: 0.8125rem;
  position: relative;
}

/* Current page: accent segment on the rail plus a soft fill. */
.myst-toc-item-exact,
.myst-toc-item.active {
  background-color: var(--ml-surface-strong) !important;
  color: var(--ml-text) !important;
}

.myst-toc .collapsible-content > a.myst-toc-item-exact::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 2px;
  border-radius: 2px;
  background-color: var(--ml-accent);
}

/* --------------------------------------------------------------- article */

article.content {
  color: var(--ml-text);
  font-size: 1.0625rem;
  line-height: 1.75;
}

article.content p,
article.content li {
  color: var(--ml-text);
}

/* Page header block. */
.myst-fm-block {
  padding-top: 3.5rem !important;
  margin-bottom: 2.5rem !important;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--ml-border);
}

.myst-fm-block-header {
  color: var(--ml-text-faint);
}

article h1,
.myst-fm-block-title {
  font-family: var(--ml-font-sans) !important;
  font-weight: 500 !important;
  font-size: clamp(2.25rem, 4.5vw, 3.25rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em;
  color: var(--ml-text) !important;
}

.myst-fm-authors-affiliations {
  margin-top: 1.25rem !important;
}

.myst-fm-author {
  font-weight: 400 !important;
  font-size: 0.875rem;
  color: var(--ml-text-muted);
}

article h2,
article h3,
article h4 {
  font-family: var(--ml-font-sans);
  color: var(--ml-text);
  letter-spacing: -0.025em;
  scroll-margin-top: 80px;
}

article h2 {
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1.2;
  margin-top: 3.25rem;
  margin-bottom: 1rem;
}

article h3 {
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.3;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}

article h4 {
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.01em;
  margin-top: 2rem;
}

/* Bold is reserved for inline emphasis written in the source. */
article strong,
article b {
  color: var(--ml-text);
  font-weight: 700;
}

/* Links: gold text with a gold underline so they stand out in prose. */
article.content a:not(.myst-footer-link):not([class*="no-underline"]) {
  color: var(--ml-accent-ink);
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--ml-accent) 45%, transparent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: color 0.12s ease, text-decoration-color 0.12s ease, background-color 0.12s ease;
}

article.content a:not(.myst-footer-link):not([class*="no-underline"]):hover {
  color: var(--ml-accent-ink);
  text-decoration-color: var(--ml-accent);
  background-color: var(--ml-accent-soft);
  border-radius: 3px;
}

article ul > li::marker,
article ol > li::marker {
  color: var(--ml-text-faint);
}

article hr {
  border-color: var(--ml-border);
  margin: 3rem 0;
}

/* Pull quotes. */
article blockquote {
  border-left: 2px solid var(--ml-accent) !important;
  padding: 0.25rem 0 0.25rem 1.5rem;
  margin: 2rem 0;
  font-size: 1.2rem;
  line-height: 1.55;
  letter-spacing: -0.01em;
  font-style: normal;
  color: var(--ml-text);
  quotes: none;
}

article blockquote p::before,
article blockquote p::after {
  content: none !important;
}

/* ------------------------------------------------------------------ code */

article code,
article kbd,
article pre {
  font-family: var(--ml-font-mono) !important;
}

article :not(pre) > code {
  background-color: var(--ml-code-bg);
  color: var(--ml-text);
  border: 1px solid var(--ml-border);
  border-radius: 5px;
  padding: 0.1em 0.35em;
  font-size: 0.85em;
  font-weight: 400;
}

article :not(pre) > code::before,
article :not(pre) > code::after {
  content: none !important;
}

.myst-code {
  border: 1px solid var(--ml-border) !important;
  border-radius: 12px !important;
  background-color: var(--ml-code-bg) !important;
  box-shadow: none !important;
  overflow: hidden;
  margin: 1.75rem 0;
}

.myst-code pre,
.myst-code-body {
  background-color: var(--ml-code-bg) !important;
  font-size: 0.85rem !important;
  line-height: 1.65 !important;
}

.myst-code pre {
  padding: 1.1rem 1.25rem !important;
}

/* ---------------------------------------------------------------- tables */

article table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.925rem;
  line-height: 1.5;
  margin: 2rem 0;
}

article th {
  text-align: left;
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ml-text-muted);
  border-bottom: 1px solid var(--ml-border-strong) !important;
  padding: 0.6rem 0.75rem 0.6rem 0 !important;
}

article td {
  border-bottom: 1px solid var(--ml-border) !important;
  padding: 0.85rem 0.75rem 0.85rem 0 !important;
  vertical-align: top;
}

article tr:last-child td {
  border-bottom: none !important;
}

article table tr,
article table tbody tr:nth-child(odd),
article table tbody tr:nth-child(even) {
  background: transparent !important;
}

/* ----------------------------------------------------------- admonitions */

/* Callouts are tinted by meaning: navy = note, olive = tip, gold = caution. */
.myst-admonition {
  --ml-callout-ink: var(--ml-navy-1);
  --ml-callout-bg: var(--ml-navy-3);
  background-color: var(--ml-callout-bg) !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  padding: 1rem 1.25rem;
  margin: 2rem 0 !important;
}

.myst-admonition-tip,
.myst-admonition-hint,
.myst-admonition-seealso {
  --ml-callout-ink: var(--ml-olive-1);
  --ml-callout-bg: var(--ml-olive-3);
}

.myst-admonition-important,
.myst-admonition-warning,
.myst-admonition-caution,
.myst-admonition-attention,
.myst-admonition-danger,
.myst-admonition-error {
  --ml-callout-ink: var(--ml-gold-ink);
  --ml-callout-bg: var(--ml-gold-tint);
}

.myst-admonition-header {
  background: transparent !important;
  color: var(--ml-callout-ink) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 !important;
  align-items: center;
}

.myst-admonition-header svg {
  color: var(--ml-callout-ink) !important;
  width: 1rem !important;
  height: 1rem !important;
  margin: 0 0.5rem 0 0 !important;
}

.myst-admonition-header-text {
  color: var(--ml-callout-ink) !important;
}

.myst-admonition-body {
  padding: 0.35rem 0 0 !important;
  font-size: 0.975rem;
}

.myst-admonition-body > p:first-child {
  margin-top: 0;
}

.myst-admonition-body > p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------- figures & media */

article figure img,
article img:not(.myst-home-link-logo img) {
  border-radius: 12px;
}

article figcaption {
  font-size: 0.875rem;
  color: var(--ml-text-muted);
  margin-top: 0.75rem;
}

/* --------------------------------------------------- page outline (right) */

.myst-outline {
  background-color: color-mix(in srgb, var(--ml-bg) 95%, transparent) !important;
  font-size: 0.8125rem;
}

.myst-outline-list {
  color: var(--ml-text-faint) !important;
}

.myst-outline-item {
  border-left-width: 1px !important;
  border-left-color: var(--ml-border) !important;
}

.myst-outline-item:hover {
  border-left-color: var(--ml-text) !important;
}

.myst-outline-item,
.myst-outline-item a {
  background-color: transparent !important;
  font-weight: 400 !important;
}

/* The theme marks the current section with a darker text class. */
.myst-outline-item:has(> a[class*="text-slate-900"]) {
  border-left-color: var(--ml-text) !important;
}

article.content .myst-outline a[class*="text-slate-900"] {
  color: var(--ml-text) !important;
}

article.content .myst-outline a {
  color: var(--ml-text-faint) !important;
  text-decoration: none !important;
}

article.content .myst-outline a:hover {
  color: var(--ml-text) !important;
}

/* ---------------------------------------------------- prev / next footer */

.myst-footer-links {
  border-top: 1px solid var(--ml-border);
  padding-top: 2.5rem !important;
  margin-top: 4rem;
}

.myst-footer-link {
  border: 1px solid var(--ml-border) !important;
  border-radius: 12px !important;
  background-color: transparent;
  box-shadow: none !important;
  color: var(--ml-text) !important;
  font-weight: 400 !important;
  padding: 1.1rem 1.25rem !important;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.myst-footer-link:hover {
  border-color: var(--ml-border-strong) !important;
  background-color: var(--ml-surface);
  color: var(--ml-text) !important;
}

.myst-footer-link-group {
  color: var(--ml-text-faint) !important;
  font-size: 0.7rem !important;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.25rem;
}

.myst-footer-link-icon {
  color: var(--ml-text-faint);
}

/* ---------------------------------------------------------- bibliography */

/* The reference list reads like the body: same size, color, and leading,
   under a header sized like a section heading, with no full-width rule. */
.myst-bibliography {
  border-top: none !important;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ml-text);
}

.myst-bibliography-header {
  font-size: 1.5em !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em;
  color: var(--ml-text) !important;
}

.myst-bibliography-list {
  font-size: inherit !important;
  line-height: 1.75 !important;
  color: var(--ml-text) !important;
}

.myst-bibliography-item {
  font-size: inherit !important;
  line-height: inherit !important;
  margin-bottom: 0.5rem;
  color: var(--ml-text);
}

/* In-text citations look the same whether or not the entry has a URL: the
   theme renders URL-less ones as a blue dotted span instead of a link. */
article.content cite span.hover-link {
  color: var(--ml-accent-ink) !important;
  text-decoration: underline !important;
  text-decoration-style: solid !important;
  text-decoration-color: color-mix(in srgb, var(--ml-accent) 45%, transparent) !important;
  text-decoration-thickness: 1.5px !important;
  text-underline-offset: 4px !important;
  border-bottom: none !important;
}

/* ---------------------------------------------------------- chat transcript */

/* A conversation with a user bubble, a faded trace of the assistant's
   reasoning and tool calls, and the answer. Usage in MyST:
   ::::{div} with :class: ml-chat, holding divs with :class: ml-chat-user,
   ml-chat-trace, and ml-chat-answer. */
article.content .ml-chat {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.5rem 0;
  padding: 1.25rem;
  border: 1px solid var(--ml-border);
  border-radius: 12px;
}
article.content .ml-chat p { margin: 0; }
article.content .ml-chat-user {
  align-self: flex-end;
  max-width: 85%;
  padding: 0.6rem 0.95rem;
  border-radius: 14px 14px 4px 14px;
  background: var(--ml-gold-tint);
  color: var(--ml-text);
}
article.content .ml-chat-trace {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-left: 0.85rem;
  border-left: 2px solid var(--ml-border-strong);
  color: var(--ml-text-faint);
  font-size: 0.875rem;
  line-height: 1.6;
}
article.content .ml-chat-trace code,
article.content .ml-chat-trace code * {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font-size: 0.8125rem !important;
}
article.content .ml-chat-trace p { color: var(--ml-text-faint) !important; }
article.content .ml-chat-trace p:not(:has(code)) { font-style: italic; }
/* Programs in a trace: compact, and in the muted text colour so they stand out
   from the faded reasoning around them. */
article.content .ml-chat-trace .myst-code {
  margin: 0.15rem 0 0.35rem !important;
  box-shadow: none !important;
}
article.content .ml-chat-trace .myst-code-body { padding: 0 !important; }
article.content .ml-chat-trace .myst-code pre { padding: 0.55rem 0.8rem !important; }
article.content .ml-chat-trace .myst-code pre code,
article.content .ml-chat-trace .myst-code pre code * {
  color: var(--ml-text-muted) !important;
  line-height: 1.55 !important;
}
article.content .ml-chat-answer {
  align-self: flex-start;
  max-width: 85%;
  color: var(--ml-text);
}
article.content .ml-chat-user,
article.content .ml-chat-trace {
  position: relative;
  margin-top: 1.1rem;
}
article.content .ml-chat-user::before,
article.content .ml-chat-trace::before {
  position: absolute;
  top: -1.35rem;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ml-text-faint);
}
article.content .ml-chat-user::before { content: "User"; right: 0.25rem; }
article.content .ml-chat-trace::before { content: "Assistant"; left: -2px; }

/* ---------------------------------------------------------------- tabs */

/* Tab labels and rules in the key color instead of the theme's blue. */
article.content .myst-tab-set-row {
  border-bottom-color: color-mix(in srgb, var(--ml-gold) 25%, transparent) !important;
}
article.content .myst-tab-item-header-active {
  color: var(--ml-gold) !important;
  border-bottom-color: var(--ml-gold) !important;
}
article.content .myst-tab-item-header-inactive {
  color: color-mix(in srgb, var(--ml-gold) 55%, transparent) !important;
}
article.content .myst-tab-item-header-inactive:hover {
  color: color-mix(in srgb, var(--ml-gold) 80%, transparent) !important;
}
article.content .myst-tab-item-body { box-shadow: none !important; }
article.content .myst-tab-item-text { padding: 0 !important; }
article.content .myst-tab-item-body .ml-chat {
  margin-top: 0.75rem;
  border-color: color-mix(in srgb, var(--ml-gold) 25%, transparent);
}

/* ------------------------------------------------------------ landing page */

/* The landing hero replaces the default page title block. */
article:has(.ml-hero) .myst-fm-block,
article:has(.ml-hero) .myst-outline-section {
  display: none;
}

/* The hero shrinks to the headline's width so the subtitle can match it. */
.ml-hero {
  width: fit-content;
  max-width: 100%;
  padding: 6rem 0 1.5rem;
}

/* The welcome paragraph follows the headline directly, as its lead text. */
.ml-hero + p {
  font-size: 1.125rem;
  line-height: 1.7;
  margin-top: 0;
}

@media (max-width: 640px) {
  .ml-hero {
    padding: 3rem 0 3rem;
  }
}

.ml-hero h2 {
  font-size: clamp(2rem, 3.8vw, 3.5rem) !important;
  font-weight: 500 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.04em !important;
  margin: 0 0 1.5rem !important;
}

.ml-hero h2 > a {
  display: none;
}

/* The highlighted phrase always starts its own line. */
.ml-highlight {
  display: block;
  color: var(--ml-accent);
}

.ml-hero > p {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ml-text-muted) !important;
  /* Take the headline's width without widening the hero. */
  width: 0;
  min-width: 100%;
  margin: 0;
}

/* Section headings on the landing page read like product page sections. */
article:has(.ml-hero) h3 {
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  margin-top: 4.5rem;
}

/* -------------------------------------------------------------- presenters */

.ml-presenters ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 0 2.5rem;
  padding: 0 !important;
  margin: 1.5rem 0 0 !important;
  list-style: none !important;
}

.ml-presenters li {
  margin: 0 !important;
  padding: 1.25rem 0 !important;
  border-top: 1px solid var(--ml-border);
  font-size: 1rem;
}

.ml-presenters li::marker {
  content: none;
}

.ml-presenters li p {
  margin: 0;
}

/* First paragraph: photo + name + affiliation. Second: bio. */
.ml-presenters li > p:first-child {
  display: grid;
  grid-template-columns: 6rem 1fr;
  column-gap: 1.25rem;
  align-items: center;
  align-content: center;
}

.ml-presenters li > p:first-child img {
  grid-row: span 2;
  width: 6rem !important;
  height: 6rem !important;
  max-width: none !important;
  /* The theme caps images inside paragraphs at 1.2em tall. */
  max-height: none !important;
  aspect-ratio: 1;
  margin: 0 !important;
  border-radius: 50% !important;
  object-fit: cover;
  background-color: var(--ml-surface-strong);
}

.ml-presenters li > p:first-child .ml-affil {
  align-self: start;
}

/* Presenter name links to their site; no underline or external-link icon. */
article.content .ml-presenters li > p:first-child > a {
  align-self: end;
  color: var(--ml-text) !important;
  text-decoration: none !important;
  font-size: 1.0625rem;
}

article.content .ml-presenters li > p:first-child > a:hover {
  color: var(--ml-accent-ink) !important;
}

.ml-presenters li > p:first-child > a svg {
  display: none !important;
}

.ml-presenters li p + p {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ml-text-muted);
}

.ml-affil {
  display: block;
  font-size: 0.875rem;
  color: var(--ml-accent-ink);
}

/* ------------------------------------------------------- bandcamp embeds */

/* Bandcamp players are 400x120 natively. MyST's iframe directive reserves a
   fixed 60%-of-width box, which leaves ~450px of dead space under each player.
   Override the wrapper for iframes tagged :class: bandcamp. */
.bandcamp {
  padding-bottom: 0 !important;
  height: 120px !important;
  width: 100% !important;
  max-width: 700px;
}
.bandcamp iframe {
  position: absolute;
  height: 120px !important;
}