@media screen {
  /* Big eye-catcher headings (hero h1 + guide page title): Playfair Display
     (variable wght 400-900, OFL). format("truetype-variations") is required or
     some browsers silently reject the variable @font-face and fall back to a
     plain serif — which is why the big headings rendered as Georgia before. */
  @font-face {
      font-family: "Instrument Serif";
      font-style: normal;
      src: url("./fonts/InstrumentSerif-Regular.ttf");
  }

  /* Subtitles / section headings + the showcase title: Imbue (variable opsz
     10-100 + wght 100-900, OFL). The optical-size axis is driven automatically
     by font-optical-sizing: auto on the using rules. */
  @font-face {
      font-family: "Imbue";
      font-style: normal;
      font-weight: 100 900;
      src: url("./fonts/Imbue-VariableFont_opsz,wght.ttf") format("truetype-variations");
  }

  /* Body / UI: Red Hat Display (variable wght 300-900, OFL). */
  @font-face {
      font-family: "Red Hat Display";
      font-style: normal;
      font-weight: 300 900;
      src: url("./fonts/RedHatDisplay-VariableFont_wght.ttf") format("truetype-variations");
  }

  /* Code / monospace: Red Hat Mono (variable wght 300-700, OFL). */
  @font-face {
      font-family: "Red Hat Mono";
      font-style: normal;
      font-weight: 300 700;
      src: url("./fonts/RedHatMono-VariableFont_wght.ttf") format("truetype-variations");
  }
}

@media print {

  .pbi { page-break-inside: avoid; }

  @page {
    size: auto;   /* auto is the initial value */
    margin: 0mm 10mm;  /* this affects the margin in the printer settings */
  }

  html
  {
      background-color: #FFFFFF;
      margin: 0px;  /* this affects the margin on the html before sending to printer */
  }

  body
  {
      border: none;
      margin: 0mm; /* margin you want for the content */
  }
}

* {
    padding: 0px;
    margin: 0px;
}

ul, ol {
  margin-left: 20px;
}

html {
    overflow-x: hidden;
    min-height: 100%;
    width: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

#guide a, #guide a:visited, #guide a:focus, #guide a:hover,
#latestrelease a, #latestrelease a:visited, #latestrelease a:hover, #latestrelease a:focus {
  color: #0446bf;
}

body {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#004e92+0,000428+100 */
    background: #004e92; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #004e92 0%, #000428 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #004e92 0%,#000428 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #004e92 0%,#000428 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004e92', endColorstr='#000428',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    min-height: 100%;
    font-family: "Red Hat Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    /* Drive Imbue's optical-size axis automatically (inherited site-wide). */
    font-optical-sizing: auto;
}

body .center {
  margin: 0 auto;
  max-width: 1400px;
  min-height: 100%;
  display: flex;
  flex-direction: row;
}

aside {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 200px;
  min-width: 200px;
  padding: 50px 30px;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: fit-content;
}

#latestrelease {
    padding: 20px;
    background: aliceblue;
    font-size: 1.2em;
    border-radius: 10px;
    font-weight: bold;
    line-height: 1.5;
    min-width: 150px;
}

#latestrelease p, #latestrelease a {
    display: block;
}

/* Version + date sit in their own right-aligned column at the top of the box;
   the nav links stay left-aligned below. */
#latestrelease .release-version {
    text-align: right;
    margin-bottom: 12px;
}
#latestrelease .release-version p {
    margin: 0;
}

#latestrelease #azul-search-mount {
    margin-top: 12px;
    font-size: 0.83rem;
    font-weight: normal;
    line-height: 1.3;
}

/* Fake bold for version number using text-shadow - uses same font as regular p */
#latestrelease p strong {
    font-family: "Red Hat Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: normal;
    text-shadow: 0.3px 0 0 currentColor, -0.3px 0 0 currentColor;
}

img.showcase {
  display: none;
}

img.showcase.windows {
  display: initial;
}

aside header {
  width: 100px;
  height: 100px;
}

aside nav {
  padding: 10px;
  margin-top: 10px;
}

aside nav ul.nav-grid {
  display: grid;
  grid-template-columns: 1fr; /* Vertical list on desktop */
  gap: 4px 12px;
  list-style: none;
  margin: 0;
  padding: 0;
  color: white;
}

aside nav ul.nav-grid li {
  background: url("./images/fleur-de-lis.svg") no-repeat 0px center transparent;
  background-size: 14px 14px;
  list-style-type: none;
  margin: 0;
  padding: 0px 0px 0px 20px;
  font-size: 0.9em;
  white-space: nowrap;
}

aside nav ul.nav-grid li a {
  color: white;
  text-decoration: none;
}

aside nav ul.nav-grid li a:hover {
  text-decoration: underline;
}

aside nav ul li.active {
  text-decoration: underline;
}

aside nav ul li ul a {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

aside nav ul li ul {
  width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 10px;
  font-size: 1rem;
  font-family: "Red Hat Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  list-style-type: none;
}
main {
  background: white;
  overflow:hidden;
  min-height: 100vh;
  box-shadow: 0px 0px 100px 0px rgba(0, 0, 0, 0.5);
  padding: 50px;
  box-sizing: border-box;
  flex: 1; /* Take remaining space in flex container */
}

@media print {
  main {
    box-shadow: none !important;
  }
}

/* Big eye-catcher headings (hero h1, guide page <h1>) use Playfair Display.
   Subtitles / section headings (h2-h6) use Instrument Serif. */
main h1, h1 {
    font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
}
main h2, h2, h4, h5, h6 {
    font-family: "Imbue", Georgia, "Times New Roman", serif;
}

/* Main page h1 - large eye-catcher with responsive scaling. Playfair has real
   weights, so use a genuine weight instead of the text-shadow fake-bold. */
main h1 {
    /* Base size for large screens (reduced from 3.5em). */
    font-size: 2.8em;
    font-weight: 700;
    line-height: 1.05;
    margin-bottom: 20px;
    letter-spacing: 0.01em;
}

/* Section h2 - overlaid on screenshot */
.feature-image .screenshot-wrapper {
    position: relative;
    display: inline-block;
    /* Reduce to ~80% size */
    max-width: 80%;
}

.feature-image h2.feature-title {
    position: absolute;
    bottom: 10px;
    left: 0;
    margin: 0;
    padding: 8px 15px;
    /* Base size for large screens */
    font-size: 2.8em;
    font-weight: normal;
    line-height: 1.0;
    color: #000;
    background: #fff;
    /* Lighter fake bold than h1 */
    text-shadow: 0.3px 0 0 currentColor, -0.3px 0 0 currentColor;
    letter-spacing: 0.01em;
    z-index: 10;
}

main h3, h3 {
    font-family: "Imbue", Georgia, "Times New Roman", serif;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.6;
    color: #333;
}

main p, p {
    font-family: "Red Hat Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #444;
}

.tagline {
    font-family: "Red Hat Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1.2em;
    font-weight: normal;
    line-height: 1.5;
    color: #333;
    max-width: 600px;
}

.first-letter {
  font-family: "Imbue", serif;
  font-size: 1em;
}

.horizontal-flip {
  display: inline-block;
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
  -ms-filter: fliph; /*IE*/
  filter: fliph; /*IE*/
}

.vertical-flip {
  display: inline-block;
  -moz-transform: scaleY(-1);
  -webkit-transform: scaleY(-1);
  -o-transform: scaleY(-1);
  transform: scaleY(-1);
  -ms-filter: flipv; /*IE*/
  filter: flipv; /*IE*/
}

/* ------------------------- PRISM.CSS, for code highlighting ----------------------- */

code {
    display: inline-block;
    color: black;
    background: #f5f2f0;
    padding: 0px;
    text-shadow: 0 1px white;
    font-family: "Red Hat Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: bolder;
    font-size: 14px;
    text-align: left;
    vertical-align: middle;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.45;

    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;

    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;

    overflow-x: auto;
}

@media print {
    code[class*="language-"] {
        text-shadow: none;
    }
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: slategray;
}

.token.punctuation {
    color: #999;
}

.namespace {
    opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
    color: #905;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
    color: #690;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
    color: #9a6e3a;
    background: hsla(0, 0%, 100%, .5);
}

.token.atrule,
.token.attr-value,
.token.keyword {
    color: #07a;
}

.token.function,
.token.class-name {
    color: #DD4A68;
}

.token.regex,
.token.important,
.token.variable {
    color: #e90;
}

.token.important,
.token.bold {
    font-weight: bold;
}

.token.italic {
    font-style: italic;
}

.token.entity {
    cursor: help;
}

@media print {
  aside { display: none !important; }
  a[href]:after {
    content: none !important;
  }
}

/* ========================= INDEX PAGE STYLES ========================= */
/* Shared grid layout for header and features */
.grid-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

/* Main header on index page */
main > header {
  margin-bottom: 40px;
}

main > header h2 {
  padding-top: 10px;
  margin-bottom: 20px;
  font-size: 30px;
  font-weight: 100;
  line-height: 0.9;
  font-family: "Imbue", serif;
}

main > header h2 .first-letter {
  float: left;
  margin-right: 5px;
  font-family: "Morris Jenson Initialen", serif;
  font-weight: 500;
  font-size: 2.25em;
}

main > header h3 {
  margin-top: 15px;
  font-size: 1.2rem;
  font-weight: normal;
}

/* Feature sections - uses shared grid */
.feature-section {
  margin-bottom: 50px;
}

.feature-image {
  min-width: 0;
}

.feature-image img {
  width: 100%;
  height: auto;
  display: block;
}

.feature-image .description {
  margin-top: 12px;
  font-size: 0.88em;
  color: #555;
  line-height: 1.5;
  max-width: 80%;  /* Limit width on desktop */
}

.feature-code {
  min-width: 0;
}

/* Tab bar - Flexbox */
.tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin-bottom: 0;
}

/* Language grid - 5 columns for future expansion */
.lang-grid {
  display: grid;
  grid-template-columns: repeat(5, auto);
  gap: 2px;
  align-items: stretch;
}

/* Collapsible "more languages" group lives inside the same lang-grid.
 * Spanning the row keeps the four primary buttons on a single line and
 * pushes the chevron + summary below them. When open, the secondary
 * grid renders the overflow languages in the same 5-col layout. */
.lang-grid .lang-more {
  grid-column: 1 / -1;
  margin-top: 2px;
}

.lang-grid .lang-more > summary {
  list-style: none;
  cursor: pointer;
  font-family: "Red Hat Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: bold;
  color: #555;
  padding: 4px 6px;
  user-select: none;
}
.lang-grid .lang-more > summary::-webkit-details-marker { display: none; }
.lang-grid .lang-more > summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 0.12s ease;
}
.lang-grid .lang-more[open] > summary::before { content: "▾ "; }
.lang-grid .lang-more > summary:hover { color: #0084ff; }

.lang-more-grid {
  display: grid;
  grid-template-columns: repeat(5, auto);
  gap: 2px;
  margin-top: 4px;
}

.lang-grid button {
  padding: 4px 10px;
  border: 1px solid #ccc;
  background: #e0e0e0;
  cursor: pointer;
  font-family: "Red Hat Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: bold;
  border-radius: 0;
  /* Uniform width so single-char labels (C, JS) match Python/Rust. */
  min-width: 64px;
  box-sizing: border-box;
}

.lang-grid button.active {
  background: #0084ff;
  color: white;
}

.lang-grid button:hover:not(.active):not(.lang-disabled) {
  background: #d0d0d0;
}

.lang-grid button.lang-disabled {
  background: #f0f0f0;
  color: #aaa;
  cursor: not-allowed;
}

/* Dialect dropdown within lang-grid (e.g., C++ with version selector) */
.lang-tab-dropdown {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.lang-tab-dropdown .dialect-select {
  padding: 4px 22px 4px 10px;
  width: 100%;
  border: 1px solid #ccc;
  background-color: #e0e0e0;
  cursor: pointer;
  font-family: "Red Hat Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: bold;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23444'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 10px 6px;
}

.lang-tab-dropdown.active .dialect-select {
  background-color: #0084ff;
  color: white;
  border-color: #0084ff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='white'/%3E%3C/svg%3E");
}

/* Install controls - grouped together */
/* Hidden by default, only shown on first example */
.install-controls {
  display: none;
  gap: 4px;
  align-items: center;
  margin-left: auto;
}

/* Show install controls (OS/method dropdowns) only on first example */
.feature-section[data-is-first="true"] .install-controls {
  display: flex;
}

.tab-bar select {
  padding: 4px 8px;
  border: 1px solid #ccc;
  background: #f0f0f0;
  cursor: pointer;
  font-family: "Red Hat Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: bold;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4'%3E%3Cpath d='M0 0l4 4 4-4z' fill='%23666'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 16px;
}

/* Code panel */
.code-panel {
  background: #fafafa;
  border: 1px solid #ddd;
  font-family: "Red Hat Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 600;
}

/* Install commands - dark */
.install-commands {
  background: #1e1e1e;
  color: #d4d4d4;
  padding: 10px 12px;
  overflow-x: auto;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.install-commands::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.install-step {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  white-space: nowrap;
}

.install-step:last-child {
  margin-bottom: 0;
}

.install-step .command {
  flex: 1;
  min-width: 0;
}

/* Copy button */
.copy-btn {
  flex-shrink: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  position: relative;
}

.copy-btn:hover { opacity: 1; }

.copy-btn::before,
.copy-btn::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  opacity: 0.5;
  border: 1.5px solid #888;
}

.copy-btn::before {
  top: 0;
  right: 0;
  background: transparent;
}

.copy-btn::after {
  bottom: 0;
  left: 0;
  background: #1e1e1e;
}

/* Example code - light */
.example-code {
  position: relative;
  min-height: 450px;
  max-height: 500px;
  overflow: auto;
  background: #fafafa;
  color: #333;
}

.example-code pre {
  margin: 0;
  white-space: pre;
}

.example-code > .copy-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  opacity: 0.3;
}

.example-code > .copy-btn::after {
  background: #fafafa;
}

.example-code > .copy-btn:hover {
  opacity: 1;
}

/* ========================= MOBILE RESPONSIVE ========================= */
/* This MUST be at the end of the file to override earlier rules */
@media screen and (max-width: 1024px) {
  /* Main layout - stack vertically */
  body .center { flex-direction: column; }
  aside { position: static; flex-direction: row; align-items: flex-start; width: 100%; min-width: 100%; }
  body main { padding: 37.5px; }
  body .center aside { min-height: auto; padding: 25px; }
  body .center aside header { display: inline-block; width: 75px; height: 75px; padding: 12.5px; vertical-align: top; }
  body .center aside header img { width: 75px; height: 75px; }
  body .center aside nav { display: inline-block; vertical-align: top; margin-left: 20px; }
  body .center aside nav ul.nav-grid { grid-template-columns: repeat(3, 1fr); gap: 6px 10px; }
  body .center aside nav ul.nav-grid li { font-size: 0.85em; padding-left: 18px; background-size: 12px 12px; }
  body .center aside nav ul li ul { display: none; }
  #latestrelease { margin: 0px; margin-top: 20px; margin-bottom: 20px; }
  
  /* Stack grid-rows vertically on mobile - MUST override .grid-row display:grid */
  .grid-row { 
    display: block !important; 
  }
  
  .grid-row > * {
    margin-bottom: 20px;
  }
  
  /* Screenshot full width on mobile/tablet */
  .feature-image .screenshot-wrapper {
    max-width: 100%;
  }
  
  .feature-image {
    max-width: 100%;
  }
  
  /* Description full width on mobile */
  .feature-image .description {
    max-width: 100%;
  }
  
  /* Smaller tabs on mobile */
  .tab-bar {
    gap: 3px;
  }
  
  .lang-grid button {
    padding: 4px 8px;
    font-size: 11px;
  }
  
  .tab-bar select {
    padding: 4px 6px;
    font-size: 11px;
  }
  
  /* Frontpage h1/h2/tagline sizing for tablet - remove h1 override to keep desktop size */
  .feature-image h2.feature-title {
    font-size: 2.5em;
  }
  
  .tagline {
    font-size: 1.15em;
  }
}

/* Medium mobile: 768px and below */
@media screen and (max-width: 768px) {
  main h1 {
    font-size: 2.6em;
  }
  
  .feature-image h2.feature-title {
    font-size: 2.5em;
  }
  
  .tagline {
    font-size: 1.2em;
  }
}

/* Small mobile: 480px and below */
@media screen and (max-width: 480px) {
  main h1 {
    font-size: 2em;
  }
  
  .feature-image h2.feature-title {
    font-size: 2.2em;
  }
  
  .tagline {
    font-size: 1em;
  }
}

/* Extra small: 360px and below */
@media screen and (max-width: 360px) {
  main h1 {
    font-size: 1.7em;
  }
  
  .feature-image h2.feature-title {
    font-size: 1.8em;
  }
  
  .tagline {
    font-size: 0.95em;
  }
}

/* ========================= DARK MODE =========================
 * Activated automatically when the OS / browser advertises a dark
 * colour-scheme preference. We don't ship a manual toggle — sites that
 * want one usually couple it to a class on <html>, but the goal here is
 * just "no flashbang at night" on the docs site.
 *
 * The strategy: leave layout intact, override only the colour tokens.
 * The body's blue gradient is already dark-friendly, so we only
 * recolour the white "main" content well, the inline highlights, and
 * the prism token palette.
 */
@media (prefers-color-scheme: dark) {
  /* Page chrome */
  main {
    background: #15181f;
    color: #d8d8d8;
  }
  body main {
    box-shadow: 0px 0px 100px 0px rgba(0, 0, 0, 0.65);
  }

  main h1, main h2, main h3, main h4, main h5, main h6,
  h1, h2, h3, h4, h5, h6 {
    color: #f0f0f0;
  }

  main p, p {
    color: #c8c8c8;
  }

  .tagline,
  main > header h2 {
    color: #c8c8c8;
  }

  .feature-image .description {
    color: #a0a0a0;
  }

  /* Inline links — `<a>` color in main.css is set via descendant rules
   * keyed off `#guide` and `#latestrelease`, plus the API page uses
   * `color: inherit !important`. Cover the common cases. */
  #guide a, #guide a:visited, #guide a:focus, #guide a:hover,
  #latestrelease a, #latestrelease a:visited, #latestrelease a:hover, #latestrelease a:focus,
  main a, main a:visited {
    color: #79b8ff;
  }
  main a:hover { color: #a8cfff; }

  #latestrelease {
    background: #1a2436;
    color: #d8d8d8;
  }

  /* Inline code + code blocks */
  code {
    background: #21252e;
    color: #e6e6e6;
    text-shadow: 0 1px #000;
  }
  pre {
    background: #1b1e25;
  }
  pre > code {
    background: transparent;
    text-shadow: none;
  }

  /* Prism token palette (mirrors One Dark / Tokyo-ish) */
  .token.comment, .token.prolog, .token.doctype, .token.cdata { color: #6e7681; }
  .token.punctuation { color: #c0c0c0; }
  .token.property, .token.tag, .token.boolean, .token.number,
  .token.constant, .token.symbol, .token.deleted { color: #f08080; }
  .token.selector, .token.attr-name, .token.string,
  .token.char, .token.builtin, .token.inserted { color: #98c379; }
  .token.operator, .token.entity, .token.url,
  .language-css .token.string, .style .token.string {
    color: #d19a66; background: transparent;
  }
  .token.atrule, .token.attr-value, .token.keyword { color: #61afef; }
  .token.function, .token.class-name { color: #e06c75; }
  .token.regex, .token.important, .token.variable { color: #e5c07b; }

  /* Index page: language-grid buttons + selects */
  .lang-grid button {
    background: #232730;
    border-color: #3d4250;
    color: #d8d8d8;
  }
  .lang-grid button:hover:not(.active):not(.lang-disabled) {
    background: #2c313c;
  }
  .lang-grid button.lang-disabled {
    background: #1d2028;
    color: #555;
  }
  .lang-tab-dropdown .dialect-select,
  .tab-bar select {
    background: #232730;
    border-color: #3d4250;
    color: #d8d8d8;
  }
  .lang-grid button.active,
  .lang-tab-dropdown.active .dialect-select {
    background-color: #1d6fdb;
    color: white;
    border-color: #1d6fdb;
  }

  /* Code/example panels */
  .code-panel,
  .example-code {
    background: #1b1e25;
    color: #d8d8d8;
    border-color: #3d4250;
  }
  .example-code > .copy-btn::after { background: #1b1e25; }
  .copy-btn::after { background: #1b1e25; }

  /* Markdown alert blocks (used in guide pages) */
  .markdown-alert-warning {
    background: #2a2515 !important;
    border-color: #facb26 !important;
    color: #e6e6e6 !important;
    box-shadow: 0px 0px 20px #facb2633 !important;
  }
}

/* ===== Round 4 overrides ===== */
/* R4-2: big eye-catcher headings use Imbue (bold), not Playfair. The #guide
   selector wins over each guide page's inline `h1 { font-family: Playfair }`
   by specificity, so guide titles switch too without touching guide.rs. */
main h1, h1, #guide h1, #guide-index h1, main > header h1 {
    font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
    font-weight: normal;
}
.feature-image h2.feature-title {
    font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
    font-weight: normal;
    text-shadow: none;
}
/* R4-3: default Imbue (subtitles / section headings) a little bolder. */
main h2, h2, h4, h5, h6, #guide h2 { font-weight: 500; }

/* ===== Round 4: R4-5 release box ===== */
/* Two columns via flexbox: links left, version right, search full width below. */
#latestrelease {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px 16px;
}
#latestrelease .release-links { order: 1; }
#latestrelease .release-version { order: 2; text-align: right; margin-bottom: 0; }
#latestrelease #azul-search-mount { order: 3; flex-basis: 100%; }

/* ===== Round 5: shared content-page search layout (R5-2) =====
   API + guide + guide-overview/index put the search in a sticky column beside
   the content on desktop, and lock it to the bottom (with a fade-out) on
   mobile. The homepage keeps its search in the release box (it has no
   .page-search column), so it is unaffected. */
.guide-layout { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 36px; }
.guide-layout > .guide-main, .guide-layout > #guide { flex: 1 1 auto; min-width: 0; }
.guide-search-col { flex: 1 1 320px; min-width: 320px; position: sticky; top: 20px; align-self: flex-start; --fade-bg: #ffffff; padding: 0; display: flex; }
.guide-search-col .page-search { max-width: 100%; display: flex; flex-grow: 1; min-width: 100%; }
.guide-search-col .azul-search { flex: 1 1 auto; min-width: 0; width: 100%; }
@media (prefers-color-scheme: dark) { .guide-search-col { --fade-bg: #15181f; } }
@media (max-width: 1100px) {
    .guide-layout { display: block; }
    .guide-layout > .guide-main, .guide-layout > #guide { padding-bottom: 200px; }
    .guide-search-col {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 9000;
        margin: 0; padding: 0; pointer-events: none;
    }
    .guide-search-col .page-search {
        max-width: 100%; margin: 0; pointer-events: auto;
        background: var(--fade-bg);
        padding: 12px 10px calc(12px + env(safe-area-inset-bottom));
    }
    .guide-search-col::before {
        content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 96px;
        pointer-events: none;
        background: linear-gradient(to bottom, transparent, var(--fade-bg));
    }
    .guide-search-col .azs-panel-inline { top: auto; bottom: calc(100% + 6px); left: 10px; right: 10px; }
}