/* Nominal's look for Shibuya, from the Nominal design system (https://design.nominal.io/DESIGN.md):
   its fonts and its light and dark colors, with the landing page's header, on top of instro's docs
   styling. Project-specific styles stay in each project. */

:root {
  --sy-f-text: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sy-f-heading: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sy-f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --accent-9: #0c0c0c;
  --accent-10: #333333;
  --accent-a11: #0c0c0c;
  --accent-a12: #0c0c0c;
  --sy-c-link: #0c0c0c;
  --sy-c-link-hover: #6b6b6b;
}

/* Light mode, as DESIGN.md's tokens: a white page (background), a muted header, footer and code
   blocks (background-muted), white cards (background-raised), and its text and border colors. */
:root,
html.light {
  --sy-c-background: #ffffff;
  --sy-c-surface: #f5f5f5;
  --sy-c-text: #333333;
  --sy-c-heading: #0c0c0c;
  --sy-c-bold: #0c0c0c;
  --sy-c-light: #6b6b6b;
  --sy-c-border: rgba(18, 18, 18, 0.11);
  --sy-c-divider: rgba(18, 18, 18, 0.11);
  --sy-c-foot-background: #f5f5f5;
  --nominal-header: #f5f5f5;
  --code-block-background: #f5f5f5;
  --nominal-card: #ffffff;
  --nominal-card-hover: #f3f3f3;
}
/* sphinxcontrib-mermaid's fullscreen button is a glyph (⛶) that few fonts have: draw an icon instead.
   The button sits in the bottom-right corner, where a diagram's nodes are less likely to be; its top
   is an inline style. */
.mermaid-container .mermaid-fullscreen-btn {
  font-size: 0;
  top: auto !important;
  bottom: 4px;
}
.mermaid-container .mermaid-fullscreen-btn::before {
  content: "";
  width: 14px;
  height: 14px;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

/* Shibuya gives code in tabs and notebook outputs their own light background; keep them like the rest. */
html.light .sd-tab-content,
html.light .jupyter_container .cell_output {
  --code-block-background: #f5f5f5;
}

/* Dark mode, as DESIGN.md's dark mapping: neutral-800 page, neutral-900 header, footer and code,
   neutral-700 cards, and hairline white borders. */
html.dark {
  --accent-9: #ffffff;
  --accent-10: #e5e5e5;
  --accent-a11: #ffffff;
  --accent-a12: #ffffff;
  --sy-c-link: #ffffff;
  --sy-c-link-hover: #a3a3a3;
  --sy-c-background: #1f1f1f;
  --sy-c-surface: #333333;
  --sy-c-text: #d4d4d4;
  --sy-c-heading: #ffffff;
  --sy-c-bold: #ffffff;
  --sy-c-light: #a3a3a3;
  --sy-c-border: rgba(255, 255, 255, 0.1);
  --sy-c-divider: rgba(255, 255, 255, 0.1);
  --sy-c-foot-background: #121212;
  --nominal-header: #121212;
  --code-block-background: #121212;
  --nominal-card: #333333;
  --nominal-card-hover: #424242;
}

/* Header: a solid bar (--nominal-header) with a hairline border, like the landing page's (no blur). */
.sy-head-blur {
  background-color: var(--nominal-header);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 1px 0 var(--sy-c-divider);
}

/* Nominal brand has hard edges — no rounded corners anywhere, except the tops of the header's tabs
   and the corners of the page's sheet (below), which look like a folder's. */
*,
*::before,
*::after {
  border-radius: 0 !important;
}

/* The background grid, on every page: 60px squares in faint lines, behind the page's sheet (on the
   header, the color around the sheet and the footer), or behind the page where there's no sheet;
   fixed to the window, so the header's lines and the page's line up. */
:root {
  --nominal-grid-line: rgba(0, 0, 0, 0.04);
}
html.dark {
  --nominal-grid-line: rgba(255, 255, 255, 0.03);
}
:root,
body,
.sy-head-blur {
  background-image:
    linear-gradient(to right, var(--nominal-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--nominal-grid-line) 1px, transparent 1px);
  background-size: 60px 60px;
  background-attachment: fixed;
}

/* Mintlify-style links: text colour with an underline, not an accent colour. */
.yue a.reference,
.yue a.external {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* The project's logo, or its name when it has none: uppercase mono, like the landing page's
   "DOCS / FOR DEVELOPERS". */
.sy-head-brand img {
  height: 28px;
  width: auto;
}
/* the project's name, near the size of the logo's words (nominal-path.css) */
.sy-head-brand strong {
  font-family: var(--sy-f-mono);
  font-size: 1.25rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--sy-c-heading);
}

/* The Nominal logo before the project's (templates/partials/site-head.html), linking to nominal.io,
   with the word that makes it a path (NOMINAL / DEV), then a divider. */
.nominal-hub {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.nominal-home {
  display: flex;
}
.nominal-hub img {
  height: 22px;
  width: auto;
}
.nominal-hub .dark-logo,
.dark .nominal-hub .light-logo {
  display: none;
}
.dark .nominal-hub .dark-logo {
  display: inline;
}

/* The logo's words (templates/nominal/path.html, styled by nominal-path.css): their colours, from the
   docs palette. */
:root,
html.light {
  --nominal-path-text: #525252;
}
html.dark {
  --nominal-path-text: #a3a3a3;
}
.sy-head {
  --nominal-path-hover: var(--sy-c-heading);
  --nominal-path-font: var(--sy-f-mono);
}

.nominal-hub-divider {
  margin: 0 0.4rem;
  color: #7a7a7a;
  font-size: 1.25rem;
  font-weight: 300;
}
/* The tabs pad themselves, so the divider before them needs less space on that side. */
.nominal-tabs-divider {
  margin-right: 0.25rem;
}
/* On narrow screens the tabs fold into the menu: drop the divider before them, and keep the logos
   together on the left rather than spread across the bar. */
@media (max-width: 767px) {
  .nominal-tabs-divider {
    display: none;
  }
  .sy-head-inner {
    justify-content: flex-start;
  }
  .sy-head-actions {
    margin-left: auto;
  }
}

/* Tighter, Mintlify-like API blocks: indented members with a hairline rail
   so it's clear which members belong to which class. */
dl.py > dd {
  margin-left: 0;
  padding-left: 1.25rem;
  border-left: 1px solid var(--sy-c-divider);
}

dl.py.class > dt,
dl.py.function > dt,
dl.py.pydantic_model > dt {
  font-size: 0.95em;
}

/* API signatures, tinted like the code blocks (Atom One): each part of a signature has its own
   colour, at normal weight except the name, and type links are underlined only on hover. The
   light colours are Atom One Light's, darkened where needed to keep 4.5:1 on the page. */
:root,
html.light {
  --nominal-api-keyword: #a626a4;
  --nominal-api-name: #1f60f0;
  --nominal-api-param: var(--sy-c-text);
  --nominal-api-type: #916301;
  --nominal-api-default: #cc2d1e;
  --nominal-api-punct: #6a6b72;
}
html.dark {
  --nominal-api-keyword: #c678dd;
  --nominal-api-name: #61afef;
  --nominal-api-param: #abb2bf;
  --nominal-api-type: #e5c07b;
  --nominal-api-default: #d19a66;
  --nominal-api-punct: #8e929b;
}
.yue dt.sig {
  font-weight: 400;
  color: var(--nominal-api-punct);
}
.yue dt.sig .property,
.yue dt.sig > em.property:first-child {
  color: var(--nominal-api-keyword);
}
.yue dt.sig .sig-prename {
  color: var(--nominal-api-punct);
}
.yue dt.sig .sig-name {
  color: var(--nominal-api-name);
  font-weight: 600;
}
.yue dt.sig em.sig-param {
  color: var(--nominal-api-type);
}
/* the parameter's name: its first part, or the one after * or ** */
.yue dt.sig em.sig-param > .n:first-child,
.yue dt.sig em.sig-param > .o:first-child + .n {
  color: var(--nominal-api-param);
}
.yue dt.sig .default_value {
  color: var(--nominal-api-default);
}
.yue dt.sig .p,
.yue dt.sig .o,
.yue dt.sig .sig-paren,
.yue dt.sig .sig-return-icon {
  color: var(--nominal-api-punct);
}
.yue dt.sig .sig-return-typehint,
.yue dt.sig .sig-return-typehint > a {
  color: var(--nominal-api-type);
}
.yue dt.sig a.reference {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}
.yue dt.sig a.reference:hover {
  text-decoration: underline;
}

/* A signature's description: body-coloured text, with its Parameters / Returns / Raises labels as
   small muted mono caps, and parameter names in mono like the signature's. */
.yue dt.sig + dd {
  color: var(--sy-c-text);
}
.yue dt.sig + dd > dl.field-list > dt {
  font-family: var(--sy-f-mono);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--sy-c-light);
}
.yue dt.sig + dd > dl.field-list > dd li > p > strong:first-child,
.yue dt.sig + dd > dl.field-list > dd > p > strong:first-child {
  font-family: var(--sy-f-mono);
  font-weight: 400;
  font-size: 0.95em;
  color: var(--sy-c-heading);
}
/* the parameter's type, after its name (autodoc_typehints = "description"): coloured as in signatures */
.yue dl.field-list p.nominal-param-head em {
  font-family: var(--sy-f-mono);
  font-size: 0.95em;
  font-style: normal;
  color: var(--nominal-api-type);
}
.yue dl.field-list p.nominal-param-head a.reference {
  text-decoration: none;
}
.yue dl.field-list p.nominal-param-head a.reference:hover {
  text-decoration: underline;
}
/* Parameters laid out like numpy's docs (split by __init__.py's _split_params): each one's name and
   type on a line, its description indented below, and no bullets. */
.yue dl.field-list ul.nominal-params {
  list-style: none;
  padding-left: 0;
}
.yue dl.field-list ul.nominal-params > li {
  margin: 0 0 0.75rem;
}
.yue dl.field-list p.nominal-param-head {
  margin: 0;
}
.yue dl.field-list p.nominal-param-desc {
  margin: 0.15rem 0 0 1.5rem;
}

/* Long method names in the on-page TOC wrap instead of clipping. */
.sy-rside .localtoc a,
.sy-rside a {
  overflow-wrap: anywhere;
}

.sy-lside .globaltoc a {
  overflow-wrap: anywhere;
}

/* Left nav: page entries a step smaller than body text and indented under
   their section captions (Library, Instruments, …), which keep their size. */
.sy-lside .globaltoc > ul {
  padding-left: 0.75rem;
}

.sy-lside .globaltoc > ul a {
  font-size: 0.8125rem;
}

/* Right "On this page" entries match the left nav: same size, and API entries
   (InstroPSU, open(), …) in the text font rather than monospace. */
.sy-rside .localtoc a {
  font-size: 0.8125rem;
}

.sy-rside .localtoc code,
.sy-rside .localtoc .pre {
  font-family: inherit;
  font-size: inherit;
}

/* Header rows of column-labelled tables a shade darker than the alternating
   rows (--gray-a2); the translucent step adapts to dark mode. */
:root {
  --yue-c-th-background: var(--gray-a4);
}

/* ---- Guides: elements ported from the Mintlify site ---- */

/* Page description under the title (Mintlify front-matter description). */
.yue p.lead {
  font-size: 1.125rem;
  color: var(--sy-c-light);
  margin-top: -0.5rem;
}

/* Cards: hairline border, a shade lighter than the page (--nominal-card); in dark mode the landing
   page's card greys. */
.sd-card {
  border: 1px solid var(--sy-c-border);
  box-shadow: none !important;
  background: var(--nominal-card);
}
.sd-card:hover {
  background: var(--nominal-card-hover);
  border-color: var(--sy-c-text);
}
html.dark .sd-card:hover {
  border-color: rgba(255, 255, 255, 0.25);
}
.sd-card .sd-card-title {
  font-weight: 600;
  margin-bottom: 0;
}

/* Tab content: Shibuya drops sphinx-design's padding, which leaves prose touching the tab bar.
   Start it half a line down. Code blocks stay flush, since Shibuya squares them to sit on the bar. */
.yue .sd-tab-content > :first-child:not([class*="highlight"], .literal-block-wrapper, .sd-tab-set) {
  margin-top: 0.75rem !important;
}

/* Numbered steps (Mintlify <Steps>): a counter badge beside each step. */
.steps {
  counter-reset: step;
  margin: 1.5rem 0;
}
.steps > .step {
  counter-increment: step;
  position: relative;
  padding: 0 0 1rem 2.75rem;
  border-left: 1px solid var(--sy-c-divider);
  margin-left: 0.875rem;
}
.steps > .step::before {
  content: counter(step);
  position: absolute;
  left: -0.875rem;
  top: 0;
  width: 1.75rem;
  height: 1.75rem;
  line-height: 1.75rem;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sy-c-background);
  background: var(--sy-c-heading);
}
.steps > .step:last-child {
  border-left-color: transparent;
}

/* "Product Guides" and "Request a demo" (outlined) and "Open app" (filled), the landing page's header
   buttons (templates/partials/nav-socials.html). */
.nominal-btn {
  display: inline-flex;
  align-items: center;
  margin-left: 0.75rem;
  padding: 0.55rem 0.875rem;
  border: 1px solid var(--sy-c-heading);
  font-family: var(--sy-f-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.35;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--sy-c-heading) !important;
  text-decoration: none !important;
  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}
.nominal-btn:hover {
  background-color: var(--gray-a3);
}
.nominal-btn-icon {
  flex-shrink: 0;
  margin-right: 0.4rem;
}
.nominal-btn-filled {
  background-color: var(--sy-c-heading);
  color: var(--sy-c-background) !important;
}
.nominal-btn-filled:hover {
  background-color: var(--sy-c-light);
  border-color: var(--sy-c-light);
}

/* The overview video, centred and responsive. */
.yue iframe {
  max-width: 100%;
}

/* Tabs: uppercase mono, muted; the current one (templates/components/nav-links.html) is bright and
   underlined. */
.sy-head-links a {
  font-family: var(--sy-f-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--sy-c-light);
}
.sy-head-links a:hover,
.sy-head-links a.current {
  color: var(--sy-c-heading);
}
/* on the title, since the link is a flex box (for its icon) */
.sy-head-links a.current > span {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}
/* A tab's optional icon (templates/components/nav-links.html), before its title. */
.sy-head-links a,
.sy-head-links button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.sy-head-links iconify-icon {
  font-size: 1rem;
}

/* Every site keeps its page in the page's color at every width, so the background grid shows only on
   the header and footer; on narrow screens the page fills the width with no gap around it (the
   sheet, below, is for wide screens). */
body:has(.sy-head) > .sy-page,
body:has(.sy-head) > .sy-container.body {
  background-color: var(--sy-c-background);
}

/* The page as a sheet of paper, on wide screens, with or without tabs: the header's color around it,
   the sheet in the page's color with rounded corners, and the footer below it. The sheet is the docs'
   .sy-page, or the simple layout's .sy-container.body. With tabs, the current one joins the sheet's
   top (below); without them, the header's color shows above the sheet too. */
@media (min-width: 768px) {
  :root:has(.sy-head),
  body:has(.sy-head) {
    background-color: var(--nominal-header);
  }
  body:has(.sy-head) > .sy-page,
  body:has(.sy-head) > .sy-container.body {
    width: calc(100% - 2 * var(--nominal-sheet-gap));
    margin-bottom: var(--nominal-sheet-gap);
    border-radius: var(--nominal-tab-radius) !important;
  }
  body:has(.sy-head:not(.nominal-two-row)) > .sy-page,
  body:has(.sy-head:not(.nominal-two-row)) > .sy-container.body {
    margin-top: var(--nominal-sheet-gap);
  }
  /* the footer sits on the header's color, below the sheet */
  body:has(.sy-head) > .sy-foot {
    background-color: transparent;
    border-top: 0;
  }
  /* the sheet's edge separates the header from the page; the header draws no line of its own */
  .sy-head .sy-head-blur {
    box-shadow: none;
  }
}

/* Two-row header, on wide screens when there are tabs (nominal-two-row, templates/partials/site-head.html):
   logos and buttons on the first row, tabs and search on the second. Shibuya places the sidebars,
   anchors and tab menus below --sy-s-navbar-height, so it spans both rows, and the first row's own
   controls keep that row's height. Narrow screens keep one row, with the tabs in the menu. */
:root {
  --nominal-head-row: 56px;
  --nominal-tabs-row: 44px;
  /* how far the tabs start right of the logo */
  --nominal-tabs-indent: 2rem;
  /* the header's color around the page's sheet, on wide screens */
  --nominal-sheet-gap: 1rem;
  /* the tabs' rounded top corners */
  --nominal-tab-radius: 3px;
}
@media (min-width: 768px) {
  :root:has(.sy-head.nominal-two-row) {
    --sy-s-navbar-height: calc(var(--nominal-head-row) + var(--nominal-tabs-row));
  }
  .nominal-two-row .sy-head-inner {
    display: grid;
    grid-template-columns: auto auto auto 1fr auto auto;
    grid-template-rows: var(--nominal-head-row) var(--nominal-tabs-row);
    grid-template-areas:
      "hub divider brand . extra actions"
      "tabs tabs tabs tabs search search";
    align-items: center;
  }
  /* the nav's two parts become grid items of their own */
  .nominal-two-row .sy-head-nav {
    display: contents;
  }
  .nominal-two-row .nominal-hub {
    grid-area: hub;
  }
  .nominal-two-row .nominal-hub-divider {
    grid-area: divider;
  }
  .nominal-two-row .sy-head-brand {
    grid-area: brand;
  }
  .nominal-two-row .nominal-tabs-divider {
    display: none;
  }
  /* the search goes under the buttons, at the right of the tabs' row */
  .nominal-two-row .sy-head-extra {
    display: contents;
  }
  .nominal-two-row .sy-head-extra .searchbox {
    grid-area: search;
    justify-self: end;
  }
  .nominal-two-row .nominal-head-buttons {
    grid-area: extra;
    justify-content: flex-end;
  }
  .nominal-two-row .sy-head-actions {
    grid-area: actions;
  }
  .nominal-two-row .sy-head-actions button,
  .nominal-two-row .nav-versions,
  .nominal-two-row .nav-languages {
    height: var(--nominal-head-row);
  }
  /* Tabs, starting --nominal-tabs-indent right of the logo, shaded and outlined with rounded tops,
     like a folder's. The current one is filled with the page's color and open at the bottom, and joins
     the sheet below it. */
  .nominal-two-row .sy-head-links {
    grid-area: tabs;
    align-self: stretch;
    align-items: flex-end;
    margin-left: calc(var(--nominal-tabs-indent) - 0.875rem);
    padding: 0;
    }
  .nominal-two-row .sy-head-links .link {
    height: calc(var(--nominal-tabs-row) - 0.375rem);
    margin-right: 0.25rem;
  }
  .nominal-two-row .sy-head-links .link > a,
  .nominal-two-row .sy-head-links .link > button {
    height: 100%;
    padding: 0 0.875rem;
    border-radius: var(--nominal-tab-radius) var(--nominal-tab-radius) 0 0 !important;
    /* the shade over the header's color, so the grid doesn't show through */
    background: linear-gradient(var(--gray-a2), var(--gray-a2)), var(--nominal-header);
    box-shadow:
      inset 1px 0 0 var(--sy-c-divider),
      inset -1px 0 0 var(--sy-c-divider),
      inset 0 1px 0 var(--sy-c-divider);
  }
  .nominal-two-row .sy-head-links .link:hover > a {
    background: linear-gradient(var(--gray-a3), var(--gray-a3)), var(--nominal-header);
  }
  .nominal-two-row .sy-head-links a.current,
  .nominal-two-row .sy-head-links .link:hover > a.current {
    background: var(--sy-c-background);
    box-shadow:
      inset 1px 0 0 var(--sy-c-divider),
      inset -1px 0 0 var(--sy-c-divider),
      inset 0 1px 0 var(--sy-c-divider);
  }
}

/* Sidebar section titles: uppercase mono, like the tabs. */
.sy-lside .caption,
.sy-rside .localtoc > h3 {
  font-family: var(--sy-f-mono);
}

/* Folding sidebar groups (nominal_sidebar_open): the caption is a button in the caption's own
   font, with a chevron that turns when the group is open. Folded groups sit close together. */
.sy-lside .caption button.nominal-fold {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.sy-lside .caption button.nominal-fold:hover {
  color: var(--sy-c-text);
}

.sy-lside .caption button.nominal-fold > i {
  transition: transform 0.2s;
}

.sy-lside .caption button.nominal-fold[aria-expanded="true"] > i {
  transform: rotate(90deg);
}

.sy-lside .globaltoc > ul[hidden] {
  display: none;
}

.sy-lside .globaltoc > ul[hidden] + .caption {
  margin-top: 0;
}

/* Current page in the left nav: shaded, as on Mintlify. */
.sy-lside .globaltoc a.current {
  background: var(--gray-a3);
  margin: 0 -0.5rem;
  padding: 0.25rem 0.5rem;
}

/* The right nav sticks below the whole header, as the left nav does; Shibuya fixes it at 4rem, which
   is under the second header row. */
@media (min-width: 1280px) {
  .sy-rside .sy-rside-inner {
    top: var(--sy-s-offset-top);
  }
  /* Under the tabs, the text scrolls out of sight a little below them rather than at their edge: a
     band of the sheet's color stuck to the sheet's top. Narrower screens have the breadcrumbs' bar
     there instead. The band overlaps the page's own top space, so the page doesn't move down. */
  body:has(.sy-head.nominal-two-row) > .sy-page > .sy-main::before {
    content: "";
    display: block;
    position: sticky;
    top: var(--sy-s-offset-top);
    z-index: 5;
    height: var(--nominal-sheet-gap);
    margin-bottom: calc(-1 * var(--nominal-sheet-gap));
    background-color: var(--sy-c-background);
  }
}

/* Current heading in the right nav (nominal.js): the left nav's shading and weight, plus an
   underline. Entries are all blocks, and the box's vertical padding is drawn with shadows, so the
   list does not shift as the current entry changes. The right side has no padding, leaving room for
   the bolder text. Shibuya's own `.active` colour is neutralised. */
.sy-rside .localtoc a {
  display: block;
}
.sy-rside .localtoc li.active > a {
  color: inherit;
}
.sy-rside .localtoc li > a.nominal-current {
  background: var(--gray-a3);
  margin: 0 -0.5rem;
  padding: 0 0 0 0.5rem;
  box-shadow:
    0 0.25rem 0 var(--gray-a3),
    0 -0.25rem 0 var(--gray-a3);
  color: var(--sy-c-link);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* A heading's "#" copies its link (nominal.js), then says so for a moment. The label floats
   beside the "#" without taking up space, so a centered heading doesn't shift. */
.yue a.headerlink {
  position: relative;
}
.yue a.headerlink.nominal-copied::after {
  content: "Copied";
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 0.4em;
  white-space: nowrap;
}

/* Callouts: a screenshot marked with red numbers (an image with class callout-screenshot),
   beside a list whose numbers match them ({.callouts} on the list). Used by shared snippets. */
section:has(img.callout-screenshot) h2,
section:has(img.callout-screenshot) details.sd-dropdown {
  clear: both;
}
ol.callouts > li::marker {
  color: #ef4444;
  font-weight: 700;
}
@media (max-width: 640px) {
  .yue img.callout-screenshot {
    float: none;
    display: block;
    margin: 0 auto 1rem;
  }
}

/* Links in code blocks, such as sphinx-codeautolink's, are underlined on hover, so the code reads
   cleanly and a link still shows itself under the pointer. */
.yue pre a {
  text-decoration: none;
}
.yue pre a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* Notebook cells (myst-nb). Its palettes switch on data-theme; Shibuya marks the mode with a class. */
html.dark {
  --light: ;
  --dark: initial;
}
html.light {
  --dark: ;
  --light: initial;
}
/* Input cells look like the site's other code blocks. */
div.cell > div.cell_input {
  border: 0;
  border-radius: var(--radius);
  background: none;
}

/* the theme's commit, below the footer's copyright and icons (partials/site-foot.html) */
.nominal-theme-commit {
  margin-top: 0.5rem;
  font-size: 0.75rem;
}

/* Shibuya inverts Mermaid diagrams in dark mode, but sphinxcontrib-mermaid already draws them with
   Mermaid's dark theme there, so the inversion only muddies their colors. */
html.dark pre.mermaid > svg {
  filter: none;
}

/* MyST writes a column's alignment (`:---`, `:---:`, `---:`) as a class that Shibuya has no rule for. */
.yue th.text-left,
.yue td.text-left {
  text-align: left;
}
.yue th.text-center,
.yue td.text-center {
  text-align: center;
}
/* Right-aligned digits stack only when every digit is as wide as the others. */
.yue th.text-right,
.yue td.text-right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* pandas right-aligns a DataFrame's headers, and Shibuya left-aligns table cells: align both right. */
.yue table.dataframe th,
.yue table.dataframe td {
  text-align: right;
  font-variant-numeric: tabular-nums;
}