style.css

/*
 * Copyright (c) 2026, MariaDB plc.
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License, version 2.0,
 * as published by the Free Software Foundation.
 *
 * This program is distributed in the hope that it will be useful, but
 * WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See
 * the GNU General Public License, version 2.0, for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software Foundation, Inc.,
 * 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
 */

/* ==========================================================================
   MariaDB AI Plugins — DevHub
   Design tokens and components. Light + dark, no build step, no framework.
   ========================================================================== */

/* --- Tokens: light --------------------------------------------------------
   The palette is mariadb.org's (its twentytwentyfive-child theme): background
   #F7F8F0, primary #355872 (text, links, the header), secondary #7AAACE,
   tertiary #9CD5FF, accent #964A2C (hovers, the outline button), its
   --mariadb-card-bg (8% tertiary over the background) for surfaces, its
   --mariadb-note-bg (40% tertiary) for callouts and its hero's #F08A5D
   button. The rest are ours, mixed from those and marked where they are not
   obvious; every text colour keeps 4.5:1 on the background and the cards.
   The spacing, radius, transition and code scales are unchanged.
   -------------------------------------------------------------------------- */
:root {
  --ch-primary: #355872;
  --ch-primary-hover: #964A2C;
  --ch-primary-light: #7AAACE;
  --ch-bg: #F7F8F0;
  --ch-bg-surface: #f0f5f1;
  --ch-bg-elevated: #f0f5f1;
  --ch-callout-bg: #d3eaf6;
  --ch-callout-bar: #4A718E;
  --ch-feedback-bg: #f0f5f1;
  /* Ours: mariadb.org's footer rule, 40% secondary over the background. */
  --ch-border: #c5d9e2;
  --ch-highlight-bg: #e5f1f3;
  --ch-highlight-border: #b9d1df;
  --ch-highlight-link: #355872;
  --ch-on-primary: #F7F8F0;
  /* The "action" colour: the prompt block's label and the outline button —
     mariadb.org's accent, and its 18%-black hover. */
  --ch-brand-action: #964A2C;
  --ch-brand-action-hover: #7b3d24;
  --ch-on-action: #F7F8F0;
  --ch-accent-btn: var(--ch-brand-action);
  --ch-accent-btn-hover: var(--ch-brand-action-hover);
  --ch-action-outline: var(--ch-brand-action);
  --ch-action-outline-text: var(--ch-brand-action);
  /* mariadb.org's hero "Download" button: #F08A5D under a #1B3C53 label and
     border. Its #E8794A hover leaves the label at 4.0:1, so ours lightens
     instead (5.6:1). */
  --ch-btn-fill: #F08A5D;
  --ch-btn-fill-hover: #F5A07B;
  --ch-btn-text: #1B3C53;
  --ch-btn-focus-rgb: 240, 138, 93;
  --ch-text: #355872;
  --ch-text-heading: #1B3C53;
  --ch-text-muted: #527085;
  --ch-text-faint: #547286;
  --ch-amber: #c9a227;
  --ch-amber-ink: #8c6c08;
  --ch-red: #c0392b;
  --ch-orange: #964A2C;
  --ch-yellow: #916b0c;
  --ch-green: #4f6b12;
  --ch-aqua: #287f5e;
  --ch-blue: #355872;
  --ch-purple: #6b4f96;
  --ch-footer-link: var(--ch-primary);
  --ch-footer-link-hover: var(--ch-primary-hover);
  --ch-footer-text: var(--ch-text);
  --ch-spacing-xs: clamp(.5rem, .4rem + .3vw, 1rem);
  --ch-spacing-sm: clamp(1rem, .8rem + .5vw, 1.5rem);
  --ch-spacing-md: clamp(1.5rem, 1.2rem + .8vw, 2rem);
  --ch-spacing-lg: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  --ch-spacing-xl: clamp(3rem, 2.5rem + 1.5vw, 4rem);
  --ch-spacing-2xl: clamp(4rem, 3rem + 2vw, 5rem);
  --ch-section-sm: clamp(3rem, 2.5rem + 2vw, 5rem);
  /* Tightened from the reference's clamp(5rem, 4rem + 3vw, 7rem): the sections
     here carry less per-section content, so that much air read as drift. Kept
     above --ch-section-sm at every width so the scale stays in order. */
  --ch-section-md: clamp(3.5rem, 2.8rem + 2.2vw, 5rem);
  --ch-section-lg: clamp(7rem, 6rem + 4vw, 10rem);
  --ch-radius-sm: .5rem;
  --ch-radius-md: .75rem;
  --ch-radius-lg: 1rem;
  --ch-radius-xl: 1.5rem;
  --ch-radius-full: 9999px;
  /* mariadb.org's --mariadb-card-shadow-color, rgba(27, 60, 83, .18), at three depths. */
  --ch-shadow-sm: 0 1px 3px rgba(27, 60, 83, .08);
  --ch-shadow-md: 0 4px 12px rgba(27, 60, 83, .12);
  --ch-shadow-lg: 0 4px 14px rgba(27, 60, 83, .18);
  --ch-transition-fast: .15s ease;
  --ch-transition-normal: .25s ease;
  /* The hero is mariadb.org's: a 135deg gradient from primary to secondary.
     Its own hero centres a headline; ours sets a paragraph on the left, where
     the light end would drop the text to 2.3:1, so a scrim darkens the left
     and keeps it above 4.5:1. The CTA band is mariadb.org's "Get involved"
     band, a flat primary. */
  --ch-hero-base: #355872;
  --ch-hero-gradient: linear-gradient(135deg, #355872 0%, #7AAACE 100%);
  --ch-hero-scrim: linear-gradient(90deg, rgba(27, 60, 83, .6) 0%, rgba(27, 60, 83, .35) 55%, rgba(27, 60, 83, 0) 100%);
  --ch-hero-text: #F7F8F0;
  --ch-hero-muted: #eef2ea;
  --ch-hero-accent: #F7F8F0;
  --ch-hero-badge-bg: rgba(27, 60, 83, .35);
  --ch-hero-badge-border: rgba(247, 248, 240, .45);
  /* Ours: the headline's accent line, tertiary into the dark theme's cream. */
  --ch-hero-text-gradient: linear-gradient(90deg, #9CD5FF 0%, #F3E9DD 100%);
  --ch-cta-bg: #355872;
  --ch-cta-text: #F7F8F0;
  --ch-cta-muted: #eef2ea;
  --ch-bg-dim: #eceee3;
  /* Ours: code. The reference renders code BLOCKS with the One Dark prism
     theme in both site themes, so --ch-code-* is identical in the dark block.
     Inline code is a separate, light treatment there (--ifm-code-background). */
  --ch-code-bg: hsl(220, 13%, 18%);
  --ch-code-text: hsl(220, 14%, 71%);
  --ch-code-border: hsl(220, 13%, 26%);
  --ch-inline-code-bg: #f0f5f1;
  --ch-inline-code-border: rgba(53, 88, 114, .15);
  /* Ours: layout constants the reference has no token for. */
  --ch-wave-h: clamp(48px, 5vw, 80px);
  /* The sticky header's height: 108px while the menu sits under the logo. */
  --ch-navbar-h: 88px;
  --ch-header-bg: var(--ch-bg);
  --ch-header-link: var(--ch-primary);
  --ch-header-link-hover: var(--ch-primary-hover);
  /* mariadb.org's theme switch: the track is its secondary, the thumb its background. */
  --ch-toggle-track: #7AAACE;
  --ch-maxw: 1200px;
}

/* --- Tokens: dark ---------------------------------------------------------
   mariadb.org's own dark theme (its dark-mode.css): background #1B3C53,
   primary #F3E9DD, secondary #D2C1B6, tertiary #456882, accent #D08C72, the
   card background (40% tertiary) and its #2B5470 band, and its hero's radial
   glow. The accent is a hover colour only here: as a fill it would leave a
   #1B3C53 label at 4.2:1, so filled accent buttons take a deeper navy.
   -------------------------------------------------------------------------- */
html[data-theme="dark"] {
  --ch-primary: #F3E9DD;
  --ch-primary-hover: #D08C72;
  --ch-primary-light: #D2C1B6;
  --ch-on-primary: #1B3C53;

  --ch-brand-action: #D08C72;
  --ch-brand-action-hover: #dca38c;
  --ch-on-action: #102331;
  --ch-accent-btn: var(--ch-brand-action);
  --ch-accent-btn-hover: var(--ch-brand-action-hover);
  --ch-action-outline: #D2C1B6;
  --ch-action-outline-text: #F3E9DD;

  --ch-bg: #1B3C53;
  --ch-bg-dim: #163246;
  --ch-bg-surface: #2c4e66;
  --ch-bg-elevated: #2c4e66;
  --ch-callout-bg: #2B5470;
  --ch-callout-bar: #9CD5FF;
  --ch-feedback-bg: #2c4e66;

  --ch-border: #456882;
  --ch-highlight-bg: #2B5470;
  --ch-highlight-border: #456882;
  --ch-highlight-link: #F3E9DD;

  --ch-text: #F3E9DD;
  --ch-text-heading: #F3E9DD;
  --ch-text-muted: #d3cfc8;
  --ch-text-faint: #bfbfbc;

  --ch-red: #e98e90;
  --ch-orange: #D08C72;
  --ch-yellow: #dbbc7f;
  --ch-amber-ink: #d9b860;
  --ch-green: #a7c080;
  --ch-aqua: #83c092;
  --ch-blue: #9CD5FF;
  --ch-purple: #c0a8d6;

  --ch-hero-base: #1B3C53;
  --ch-hero-gradient: radial-gradient(ellipse 70% 90% at 50% 45%, #3D6684 0%, #2B5470 45%, #1B3C53 100%);
  --ch-hero-scrim: linear-gradient(transparent, transparent);
  --ch-hero-text: #F3E9DD;
  --ch-hero-muted: #e6ddd2;
  --ch-hero-accent: #F3E9DD;
  --ch-hero-badge-bg: rgba(27, 60, 83, .55);
  --ch-hero-badge-border: rgba(210, 193, 182, .45);
  --ch-cta-bg: #456882;
  --ch-cta-text: #F3E9DD;
  --ch-cta-muted: #F3E9DD;
  --ch-toggle-track: #D2C1B6;

  --ch-shadow-sm: 0 1px 3px rgba(0, 0, 0, .25);
  --ch-shadow-md: 0 4px 12px rgba(0, 0, 0, .3);
  /* mariadb.org's dark card shadow: an accent glow. */
  --ch-shadow-lg: 0 4px 14px rgba(208, 140, 114, .35);

  /* Ours: inline code only — the code blocks stay One Dark in both themes. */
  --ch-inline-code-bg: rgba(243, 233, 221, .08);
  --ch-inline-code-border: rgba(243, 233, 221, .14);
}

/* --- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ch-bg);
  color: var(--ch-text);
  font-family: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu,
               Cantarell, "Noto Sans", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  /* mariadb.org's body tracking, inherited by everything set in Manrope. */
  letter-spacing: -0.1px;
}
/* Monospace keeps its own grid: aligned output must not drift. */
code, pre, kbd, samp { letter-spacing: normal; }

h1, h2, h3, h4 { color: var(--ch-text-heading); line-height: 1.25; font-weight: 700; }

a { color: var(--ch-primary); text-decoration: none; }
a:hover { color: var(--ch-primary-hover); text-decoration: underline; }

img, svg { max-width: 100%; }

hr { border: 0; border-top: 1px solid var(--ch-border); margin: 2rem 0; }

/* The `hidden` attribute has to win. Its `display: none` comes from the UA
   stylesheet, which ANY author rule outranks — so `.card { display: flex }`
   quietly beat `card.hidden = true` and the tutorial filters did nothing. */
[hidden] { display: none !important; }

.container { max-width: var(--ch-maxw); margin: 0 auto; padding: 0 1.5rem; }
.container--narrow { max-width: 860px; }
/* A reading column that stays flush with the wide sections above and below it. */
.prose--narrow { max-width: 860px; }

.section { padding: var(--ch-section-md) 0; }
.section--sm { padding: var(--ch-section-sm) 0; }
/* The home page's first section sits right under the hero wave, whose light
   lower half already reads as top padding — so take half the wave back. */
.section--after-wave { padding-top: max(1rem, calc(var(--ch-section-md) - var(--ch-wave-h) / 2)); }
.section--surface { background: var(--ch-bg-surface); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ch-primary); color: var(--ch-on-primary); padding: .6rem 1rem;
}
.skip-link:focus { left: 0; }

/* --- Header --------------------------------------------------------------
   mariadb.org's header (twentytwentyfive-child): the page background, primary
   links that turn accent on hover, its light and dark logos, GitHub icon and
   theme switch, and its menu drawer. Kept to the height of the header it
   replaced, so our menu sits beside the logo where mariadb.org has its search
   field, in one 88px row. Where the menu no longer fits beside the logo, the
   logo shrinks to mariadb.org's narrow 150px and the whole menu moves under
   it, still one line and left-aligned, in a 108px header; at 599px and below,
   where that line does not fit either, mariadb.org's menu button takes its
   place beside the logo.
   -------------------------------------------------------------------------- */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: var(--ch-header-bg);
  /* A hairline under it that adds no height: the header stays 88px. */
  box-shadow: 0 1px 0 var(--ch-border);
}
.masthead__bar {
  display: flex; align-items: center; gap: 2rem;
  height: 88px; max-width: 1400px; margin: 0 auto; padding: 0 1.5rem;
}
.masthead__logo { display: block; flex: none; line-height: 0; }
.masthead__logo img { width: 200px; height: auto; }
.masthead__logo-dark { display: none; }
html[data-theme="dark"] .masthead__logo-light { display: none; }
html[data-theme="dark"] .masthead__logo-dark { display: block; }

.masthead__nav { flex: 1 1 auto; min-width: 0; }
/* One line, never wrapped; mariadb.org's 19.2px between its menu links. */
.masthead__nav ul {
  display: flex; flex-wrap: nowrap; gap: 1.2rem; margin: 0; padding: 0; list-style: none;
}
.masthead__nav li { line-height: 1.4; }
.masthead__nav a {
  color: var(--ch-header-link); font-size: 18px; font-weight: 400; white-space: nowrap;
}
.masthead__nav a:hover { color: var(--ch-header-link-hover); text-decoration: none; }
.masthead__nav a[aria-current="page"] {
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
}

.masthead__actions { display: flex; align-items: center; gap: 1.25rem; flex: none; margin-left: auto; }
.masthead__icon { display: inline-flex; color: var(--ch-header-link); }
.masthead__icon:hover { color: var(--ch-header-link-hover); }
.masthead__icon svg { width: 22px; height: 22px; }

/* mariadb.org's switch: a 40x22 track, an 18px thumb that carries the sun, and
   moves right and shows the moon in dark mode. */
.theme-toggle { display: inline-flex; padding: 0; border: 0; background: none; cursor: pointer; color: var(--ch-primary); }
.theme-toggle__track {
  position: relative; display: inline-block; width: 40px; height: 22px;
  border-radius: 999px; background: var(--ch-toggle-track); transition: background .2s ease;
}
.theme-toggle__thumb {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ch-bg); color: var(--ch-primary); transition: transform .2s ease;
}
.theme-toggle__thumb svg { width: 12px; height: 12px; }
.theme-toggle__moon { display: none; }
html[data-theme="dark"] .theme-toggle__thumb { transform: translateX(18px); }
html[data-theme="dark"] .theme-toggle__sun { display: none; }
html[data-theme="dark"] .theme-toggle__moon { display: block; }
.theme-toggle:focus-visible { outline: 2px solid var(--ch-primary-hover); outline-offset: 3px; border-radius: 999px; }

/* mariadb.org's menu button, beside the logo, at 599px and below only. */
.masthead__menu-button {
  display: none; align-items: center; flex: none; padding: .25rem; margin-left: -.75rem;
  border: 0; background: transparent; color: var(--ch-primary); cursor: pointer;
}
.masthead__menu-button:hover { color: var(--ch-primary-hover); }
.masthead__menu-button svg { width: 24px; height: 24px; }

/* mariadb.org's drawer: the page dimmed behind a panel that slides in from the left. */
.menu-drawer { position: fixed; inset: 0; z-index: 800; display: flex; background: rgba(0, 0, 0, .5); }
.menu-drawer__panel {
  position: relative; box-sizing: border-box; min-width: 16rem; max-width: 85vw; height: 100%;
  overflow-y: auto; overscroll-behavior: contain; padding: 3.5rem 1.5rem 2rem;
  background: var(--ch-bg); border-right: 1px solid var(--ch-primary-light);
  box-shadow: 4px 0 24px rgba(0, 0, 0, .35); animation: menu-drawer-in .2s ease-out;
}
@keyframes menu-drawer-in { from { transform: translateX(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .menu-drawer__panel { animation: none; } }
.menu-drawer__close {
  position: absolute; top: 1rem; right: 1rem; display: inline-flex; padding: .25rem;
  border: 0; background: transparent; color: var(--ch-primary); cursor: pointer;
}
.menu-drawer__close:hover { color: var(--ch-primary-hover); }
.menu-drawer__close svg { width: 24px; height: 24px; }
.menu-drawer__list { margin: 0; padding: 0; list-style: none; }
.menu-drawer__list li { margin: 0 0 .9rem; }
.menu-drawer__list a { color: var(--ch-primary); font-size: 20px; font-weight: 500; }
.menu-drawer__list a:hover { color: var(--ch-primary-hover); text-decoration: none; }
.menu-drawer__list a[aria-current="page"] {
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
}
/* The drawer is the narrow layout's alone; a wide window never shows it. */
@media (min-width: 600px) { .menu-drawer { display: none !important; } }
body.menu-open { overflow: hidden; }

/* The menu under the logo: a two-row grid, 108px tall. */
@media only screen and (min-width: 600px) and (max-width: 939px) {
  :root { --ch-navbar-h: 108px; }
  .masthead__bar {
    display: grid; grid-template-columns: auto 1fr auto;
    grid-template-areas: "logo . actions" "nav nav nav";
    align-content: center; row-gap: 6px; height: 108px;
  }
  .masthead__logo { grid-area: logo; }
  .masthead__logo img { width: 150px; }
  .masthead__actions { grid-area: actions; }
  .masthead__nav { grid-area: nav; }
}
@media only screen and (max-width: 599px) {
  .masthead__nav { display: none; }
  .masthead__menu-button { display: inline-flex; }
}
@media only screen and (max-width: 520px) {
  .masthead__bar { gap: 1rem; padding: 0 1rem; }
  .masthead__logo img { width: 150px; }
  .masthead__menu-button { margin-left: -.5rem; }
  .masthead__actions { gap: 1rem; }
}

/* --- Hero ---------------------------------------------------------------- */
.hero { position: relative; padding: var(--ch-section-sm) 0 0; }
/* mariadb.org's hero gradient, pinned to all four edges. It runs on under the
   wave, which is why the bottom inset is negative — but stops 2px short of the
   wave's bottom edge: --ch-wave-h is a fractional pixel height (5vw), and when
   both edges land on the same fractional pixel its anti-aliasing lets the
   gradient bleed through as a hairline below the wave on the light page. The
   scrim is a second layer on top of it, so the two can never drift apart. */
.hero__bg {
  position: absolute; inset: 0 0 calc(2px - var(--ch-wave-h)); z-index: 0;
  background-color: var(--ch-hero-base);
  background-image: var(--ch-hero-scrim), var(--ch-hero-gradient);
  background-size: cover, cover;
  background-repeat: no-repeat;
}
.hero__inner {
  position: relative; z-index: 2; max-width: var(--ch-maxw); margin: 0 auto;
  padding: 0 1.5rem var(--ch-spacing-lg);
}
.hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.hero__grid > * { min-width: 0; }
.hero__title {
  color: var(--ch-hero-text); margin: 0 0 1.25rem;
  font-size: clamp(1.65rem, 1.2rem + 1.8vw, 2.4rem); line-height: 1.2;
}
/* Paints the headline's last line in the hero's lightest hues. Guarded: without background-clip support the transparent fill leaves the text
   invisible rather than merely flat, which is a much worse failure. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .text-hero-gradient {
    display: inline-block;
    background-image: var(--ch-hero-text-gradient);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

.hero__sub { color: var(--ch-hero-muted); font-size: .98rem; line-height: 1.75;
  max-width: 660px; margin: 0 0 1.75rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.5rem; }
.hero__badges { display: flex; flex-wrap: wrap; gap: .5rem; }
.hero__version {
  margin-top: .9rem; font-size: .8rem; color: var(--ch-hero-muted);
  display: flex; flex-wrap: wrap; gap: .4rem;
}
.hero__version a {
  color: var(--ch-hero-accent); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--ch-hero-badge-border);
}
.hero__version a:hover { text-decoration-color: currentColor; }
.hero__badge {
  display: inline-flex; align-items: center; gap: .35rem;
  border-radius: var(--ch-radius-full); padding: .2rem .7rem;
  font-size: .75rem; font-weight: 600;
  color: var(--ch-hero-accent);
  border: 1px solid var(--ch-hero-badge-border);
  background: var(--ch-hero-badge-bg);
  backdrop-filter: blur(4px);
}
/* The hero card: a dark panel with a lit gradient edge, dark in both themes
   because it always sits on the dark hero. Every colour is a local custom
   property so the whole treatment retunes from this one block. */
.hero__card {
  /* mariadb.org's tertiary and secondary into its cream and its hero button's orange. */
  --card-edge: linear-gradient(125deg, #9CD5FF 0%, #7AAACE 38%, #F3E9DD 68%, #F08A5D 100%);
  --card-bg: #1B3C53;
  --card-line: rgba(255, 255, 255, .09);
  /* The panels sit darker than the card, not lighter, so they read as insets. */
  --card-fill: rgba(12, 30, 43, .58);
  --card-inset: rgba(12, 30, 43, .46);

  position: relative;
  padding: 1.15rem 1.1rem 1.35rem;
  border: 3px solid transparent;
  border-radius: 1.7rem;
  /* Two backgrounds: the fill clipped to the padding box, the gradient to the
     border box. That paints a gradient border with no extra element — and the
     fill must stay opaque or the bloom below shows through the middle. */
  background:
    linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
    var(--card-edge) border-box;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}
/* The outer bloom. Same gradient, blurred, behind the card — so only the part
   that spills past the edge is visible. */
.hero__card::before {
  content: ""; position: absolute; inset: -3px; z-index: -1;
  border-radius: inherit;
  background: var(--card-edge);
  filter: blur(22px);
  opacity: .75;
}
/* The inner bloom: the same gradient bleeding in from the edges, so the card is
   lit blue on the left and orange on the right with a dark middle.
   The mask does two jobs — it fades the glow out towards the centre, and
   (being no-repeat and exactly box-sized) it clips the blur that would
   otherwise spill back outside the card. Gated on mask support, because an
   unmasked blurred gradient would wash the whole card out. */
@supports (mask: radial-gradient(#000, #000)) or (-webkit-mask: radial-gradient(#000, #000)) {
  .hero__card::after {
    content: ""; position: absolute; inset: 0; z-index: 0;
    border-radius: inherit;
    background: var(--card-edge);
    filter: blur(36px);
    opacity: .55;
    pointer-events: none;
    -webkit-mask: radial-gradient(100% 100% at 50% 50%, transparent 45%, #000 95%) no-repeat center / 100% 100%;
            mask: radial-gradient(100% 100% at 50% 50%, transparent 45%, #000 95%) no-repeat center / 100% 100%;
  }
}
/* The panels are unpositioned, so they would paint under ::after without this.
   The panel is also the query container for the inset below. Containing it here
   is safe — it already establishes a stacking context and holds nothing
   absolutely positioned. The CARD must not be the container: layout containment
   would make it a stacking context and its ::before bloom, which sits at
   z-index -1 deliberately BEHIND the card, would start painting over it. */
.hero-panel { position: relative; z-index: 1; container-type: inline-size; }

.hero-panel + .hero-panel { margin-top: 1.35rem; }

.hero-panel__label {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  background: var(--card-fill);
  border: 1px solid var(--card-line);
  border-radius: .7rem;
  padding: .78rem 1.05rem;
  color: #fff; font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.hero-panel__check { width: 18px; height: 18px; color: rgba(255, 255, 255, 0.9); flex-shrink: 0; }

/* Inset from the label bar, as in the reference. The horizontal scroll lives on
   the <pre> rather than here, so that this box stays still and can carry the
   cut-off marker below; an overlay inside a scroll container scrolls away with
   the content. */
.hero-panel__body {
  position: relative;
  margin: .9rem 1.5rem 0;
  background: var(--card-inset);
  border: 1px solid var(--card-line);
  border-radius: .7rem;
  padding: .95rem 1.1rem;
}

.hero-code {
  margin: 0; padding: 0; border: 0; background: none;
  font-size: .78rem; line-height: 1.9;
  color: rgba(255, 255, 255, .84);
  overflow-x: auto;
}

/* The samples are wider than the panel on a phone, and again in the two-column
   hero — they scroll, but nothing says so. While there is more to the right the
   code fades out at the edge and a … sits in the margin beside it; both go once
   the reader reaches the end. site.js adds .is-clipped and keeps it current. It
   is an enhancement only: with JS off the code still scrolls, unmarked.
   The fade is a mask rather than a gradient in the panel's background colour,
   which would have to re-state that colour and would drift from it. */
.hero-panel__body.is-clipped .hero-code {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
}
.hero-panel__body.is-clipped::after {
  content: "…";
  position: absolute;
  top: 0; bottom: 0; right: .3rem;
  display: flex; align-items: center;
  color: rgba(255, 255, 255, .62);
  font-size: 1rem; line-height: 1;
  pointer-events: none;
}
/* The One Dark hues the rest of the site's code blocks use, under names local
   to the card so this markup needs no Rouge classes. */
.hero-code .t-fn  { color: hsl(207, 82%, 66%); }
.hero-code .t-num { color: hsl(29, 54%, 61%); }
.hero-code .t-str { color: hsl(95, 38%, 62%); }
.hero-code .t-dim { color: rgba(255, 255, 255, .42); }

@media (max-width: 560px) {
  .hero__card { padding: .9rem .85rem 1.05rem; border-radius: 1.2rem; }
  .hero-panel__body { margin: .8rem .6rem 0; padding: .8rem .9rem; }
}

/* The inset is decorative, and the panel runs out of width in TWO places: on a
   phone, and again from 901px up, where the hero splits into two columns and
   the card drops to roughly 400px — narrower than it is on a 768px tablet. In
   both the code sample is wider than the panel, so the inset is spending width
   the code needs; below 480px of panel it gives that width back.

   This has to be a container query: panel width is not monotonic in viewport
   width (679px at a 768px viewport, then 361px at 901px), so no media query can
   name the cases. Browsers without container query support simply keep the
   inset and the horizontal scroll, which is today's behaviour. */
@container (max-width: 480px) {
  .hero-panel__body { margin-inline: 0; }
}
.hero__caption { color: var(--ch-hero-muted); font-size: .8rem; margin: .85rem 0 0; line-height: 1.6; }

.hero--page { padding-bottom: 0; }
.hero--page .hero__title { margin-bottom: .75rem; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* The wave that carries the hero into the page body. */
.divider { display: block; width: 100%; line-height: 0; position: relative; z-index: 2; }
.divider svg { display: block; width: 100%; height: var(--ch-wave-h); }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  border-radius: var(--ch-radius-sm); padding: .55rem 1.25rem;
  font-size: .88rem; font-weight: 600; font-family: inherit;
  border: none; cursor: pointer; text-decoration: none;
  transition: background var(--ch-transition-fast), color var(--ch-transition-fast), transform .1s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn svg { width: 16px; height: 16px; }

/* mariadb.org's hero "Download" button: an orange fill, a navy label and
   border, and its card shadow. */
.btn--primary {
  color: var(--ch-btn-text);
  background: var(--ch-btn-fill);
  border: 1px solid var(--ch-btn-text);
  box-shadow: var(--ch-shadow-lg);
}
.btn--primary:hover,
.btn--primary:focus-visible,
.btn--primary:active { color: var(--ch-btn-text); background: var(--ch-btn-fill-hover); }
.btn--primary:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 .25rem rgba(var(--ch-btn-focus-rgb), .5);
}
.btn--primary:active { box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); }

.btn--outline {
  background: transparent; color: var(--ch-action-outline-text);
  border: 1.5px solid var(--ch-action-outline);
}
.btn--outline:hover { background: var(--ch-accent-btn); border-color: var(--ch-accent-btn); color: var(--ch-on-action); }

.btn--ghost {
  background: transparent; color: var(--ch-hero-accent);
  border: 1.5px solid var(--ch-hero-badge-border);
}
.btn--ghost:hover { background: rgba(247, 248, 240, .12); color: var(--ch-hero-text); }

.btn--secondary {
  background: transparent; color: var(--ch-primary); border: 2px solid var(--ch-primary);
}
.btn--secondary:hover { background: var(--ch-primary); color: var(--ch-on-primary); }

/* --- Section headings ---------------------------------------------------- */
.section-head { margin-bottom: var(--ch-spacing-md); }
.section-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; margin-bottom: .9rem;
  border-radius: var(--ch-radius-md);
  background: color-mix(in srgb, var(--ch-primary) 12%, transparent);
  color: var(--ch-primary);
}
.section-icon svg { width: 1.4rem; height: 1.4rem; }
.section-title { font-size: 1.55rem; margin: 0 0 .75rem; }
.section-sub { color: var(--ch-text-muted); font-size: .95rem; max-width: 760px; margin: 0; }

/* --- Step progress + step cards (Getting Started) ------------------------ */
.step-progress { display: flex; align-items: center; margin: var(--ch-spacing-md) 0 var(--ch-spacing-lg); }
.step-dot {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--ch-primary); color: var(--ch-on-primary);
  font-size: .9rem; font-weight: 700;
}
.step-connector { flex: 1; height: 2px; background: var(--ch-primary-light); }

.step-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.step-grid > *, .step-wide > * { min-width: 0; }
.step-card {
  background: var(--ch-bg-surface); border: 1px solid var(--ch-border);
  border-left: 3px solid var(--ch-primary); border-radius: var(--ch-radius-md);
  padding: 1.5rem; transition: box-shadow var(--ch-transition-normal);
}
.step-card:hover { box-shadow: var(--ch-shadow-md); }
.step-card__title {
  display: flex; align-items: center; gap: .5rem;
  font-size: 1.05rem; margin: 0 0 .5rem;
}
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%; flex-shrink: 0;
  background: var(--ch-primary); color: var(--ch-on-primary);
  font-size: .72rem; font-weight: 700;
}
.step-card p { color: var(--ch-text-muted); font-size: .89rem; line-height: 1.65; margin: 0 0 .75rem; }
.step-card__link { font-size: .85rem; font-weight: 600; }
.step-wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
@media (max-width: 900px) {
  .step-grid, .step-wide { grid-template-columns: 1fr; }
}

/* --- Cards --------------------------------------------------------------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 1.25rem; }
.card-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.card-grid > * { min-width: 0; }

.card {
  display: flex; flex-direction: column; position: relative; min-width: 0;
  background: var(--ch-bg-elevated); color: inherit;
  border: 1px solid var(--ch-border); border-top: 3px solid var(--ch-green);
  border-radius: var(--ch-radius-md); box-shadow: var(--ch-shadow-sm);
  padding: 1.25rem; text-decoration: none;
  transition: box-shadow var(--ch-transition-normal), transform var(--ch-transition-normal);
}
.card:hover { box-shadow: var(--ch-shadow-md); transform: translateY(-2px); text-decoration: none; color: inherit; }
.card--guide { border-top-color: var(--ch-primary); }
.card__kicker {
  text-transform: uppercase; letter-spacing: .06em;
  font-size: .68rem; font-weight: 700; color: var(--ch-text-faint); margin-bottom: .4rem;
}
.card__title { font-size: 1.02rem; margin: 0 0 .45rem; }
.card__desc { color: var(--ch-text-muted); font-size: .86rem; line-height: 1.6; margin: 0 0 .9rem; flex: 1; }
.card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }

.chip {
  display: inline-block; border-radius: var(--ch-radius-full);
  padding: .2rem .6rem; font-size: .73rem; font-weight: 600;
  max-width: 100%; overflow-wrap: anywhere;
}
.chip--beginner     { background: color-mix(in srgb, var(--ch-green) 15%, var(--ch-bg));  color: var(--ch-green); }
.chip--intermediate { background: color-mix(in srgb, var(--ch-yellow) 15%, var(--ch-bg)); color: var(--ch-yellow); }
.chip--advanced     { background: color-mix(in srgb, var(--ch-orange) 15%, var(--ch-bg)); color: var(--ch-orange); }
.chip--time { color: var(--ch-text-faint); font-size: .74rem; padding-left: 0; }

.tag {
  display: inline-block; border-radius: .25rem; padding: .15rem .5rem;
  font-size: .7rem; font-weight: 600; max-width: 100%; overflow-wrap: anywhere;
  background: color-mix(in srgb, var(--ch-primary) 12%, var(--ch-bg));
  color: var(--ch-primary);
}
.tag--tool { background: var(--ch-amber); color: #1a1a1a; }

.card__footer {
  margin-top: .75rem; padding-top: .65rem; border-top: 1px solid var(--ch-border);
  font-size: .73rem; color: var(--ch-text-faint);
}

/* --- Icon cards (feature / choose-your-path) ----------------------------- */
.icon-card {
  min-width: 0;
  background: var(--ch-bg-surface); border: 1px solid var(--ch-border);
  border-radius: var(--ch-radius-md); padding: 1.5rem; box-shadow: var(--ch-shadow-sm);
  display: flex; flex-direction: column;
}
.card-icon {
  display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; margin-bottom: 1rem; flex-shrink: 0;
  border-radius: var(--ch-radius-md);
}
.card-icon svg { width: 1.5rem; height: 1.5rem; }
.card-icon--amber { background: color-mix(in srgb, var(--ch-amber) 12%, transparent); color: var(--ch-amber-ink); }
.card-icon--green { background: color-mix(in srgb, var(--ch-green) 12%, transparent); color: var(--ch-green); }
.card-icon--blue  { background: color-mix(in srgb, var(--ch-blue) 12%, transparent);  color: var(--ch-blue); }
.card-icon--brown { background: color-mix(in srgb, var(--ch-orange) 12%, transparent); color: var(--ch-orange); }
.icon-card h3 { font-size: 1.05rem; margin: 0 0 .5rem; }
.icon-card p { color: var(--ch-text-muted); font-size: .88rem; line-height: 1.65; margin: 0 0 1rem; }
.icon-card ul { margin: 0 0 1rem; padding-left: 1.15rem; color: var(--ch-text-muted); font-size: .86rem; }
.icon-card li { margin-bottom: .3rem; }
.icon-card .btn { margin-top: auto; align-self: flex-start; }

/* --- Learning path cards ------------------------------------------------- */
.path-card {
  background: var(--ch-bg-surface); border: 1px solid var(--ch-border);
  border-left: 4px solid var(--ch-green); border-radius: var(--ch-radius-md);
  box-shadow: var(--ch-shadow-sm); padding: 1.75rem; margin-bottom: 1.5rem;
  scroll-margin-top: 90px; transition: box-shadow var(--ch-transition-normal);
}
.path-card:last-child { margin-bottom: 0; }
.path-card:hover { box-shadow: var(--ch-shadow-md); }
.path-card--beginner { border-left-color: var(--ch-green); }
.path-card--intermediate { border-left-color: var(--ch-yellow); }
.path-card--advanced { border-left-color: var(--ch-orange); }
.path-card__title { font-size: 1.15rem; margin: 0 0 .35rem; }
.path-card__desc { color: var(--ch-text-muted); font-size: .89rem; line-height: 1.65; margin: 0 0 1rem; }
.path-card__meta { display: flex; flex-wrap: wrap; gap: .75rem; font-size: .78rem;
  color: var(--ch-text-faint); margin-bottom: 1rem; }

.path-steps { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.path-step { display: flex; align-items: flex-start; gap: .75rem;
  padding: .65rem 0; border-bottom: 1px solid var(--ch-border); }
.path-step:last-child { border-bottom: none; }
.path-step__num {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 1.6rem; height: 1.6rem; border-radius: 50%; margin-top: .1rem;
  font-size: .7rem; font-weight: 700; color: #fff; background: var(--ch-green);
}
.path-card--intermediate .path-step__num { background: var(--ch-yellow); }
.path-card--advanced .path-step__num { background: var(--ch-orange); }
.path-step__info { flex: 1; min-width: 0; }
.path-step__title { font-size: .88rem; font-weight: 600; color: var(--ch-text-heading); line-height: 1.35; }
.path-step__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .2rem; }
.path-step__time { color: var(--ch-text-faint); font-size: .73rem; }

/* --- Filters (tutorial catalog) ------------------------------------------ */
.filters { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: var(--ch-spacing-md); }
.filter-group { min-width: 0; }
.filter-group__label {
  text-transform: uppercase; letter-spacing: .06em; font-size: .7rem;
  font-weight: 700; color: var(--ch-text-faint); margin-bottom: .4rem;
}
.filter-group__buttons { display: flex; flex-wrap: wrap; gap: .4rem; }
.filter-btn {
  border: 1px solid var(--ch-border); background: var(--ch-bg-surface);
  color: var(--ch-text-muted); border-radius: var(--ch-radius-full);
  padding: .25rem .8rem; font-size: .78rem; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: all var(--ch-transition-fast);
}
.filter-btn:hover { border-color: var(--ch-primary); color: var(--ch-primary); }
.filter-btn[aria-pressed="true"] {
  background: var(--ch-primary); border-color: var(--ch-primary); color: var(--ch-on-primary);
}
.filter-empty { color: var(--ch-text-faint); font-size: .9rem; padding: 2rem 0; }

/* --- Callouts ------------------------------------------------------------ */
/* mariadb.org's note: --mariadb-note-bg under a --mariadb-note-bar edge. */
.callout {
  border-left: 3px solid var(--ch-callout-bar);
  background: var(--ch-callout-bg);
  border-radius: 0 var(--ch-radius-sm) var(--ch-radius-sm) 0;
  padding: .9rem 1.1rem; margin: 1.5rem 0; font-size: .9rem;
}
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }
.callout__title { font-weight: 700; color: var(--ch-text-heading); display: block; margin-bottom: .25rem; }
.callout--warn { border-left-color: var(--ch-orange);
  background: color-mix(in srgb, var(--ch-orange) 8%, var(--ch-bg-surface)); }
.callout--tip { border-left-color: var(--ch-green);
  background: color-mix(in srgb, var(--ch-green) 8%, var(--ch-bg-surface)); }

/* An "ask your agent this" prompt block — the site's signature element. */
.prompt {
  position: relative; margin: 1.5rem 0; padding: 1.68rem 1.15rem 1rem 3rem;
  background: var(--ch-highlight-bg); border: 1px solid var(--ch-highlight-border);
  border-radius: var(--ch-radius-sm);
  font-size: .95rem; line-height: 1.65; color: var(--ch-text-heading);
}
/* The gutter mark is TWO pseudo-elements, because a single `content` string
   cannot be styled in parts — one font-size would have to serve both the tiny
   label and the chevron, and sizing one right makes the other wrong. The label
   is tucked into the top-left corner ABOVE the chevron, which keeps the
   chevron's original 3rem gutter and its offset from the first line of text. */
.prompt::before, .prompt::after {
  position: absolute; left: 1.15rem; line-height: 1;
  font-weight: 700; color: var(--ch-brand-action);
}
.prompt::after  { content: "PROMPT"; top: .7rem; font-size: .7rem; letter-spacing: .08em; }
.prompt::before { content: "›"; top: 1.7rem; font-size: 1.3rem; }
.prompt p { margin: 0 0 .6rem; }
.prompt p:last-child { margin-bottom: 0; }
.prompt em { font-style: italic; }

/* --- Code ---------------------------------------------------------------- */
code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .86em;
  background: var(--ch-inline-code-bg); border: 1px solid var(--ch-inline-code-border);
  border-radius: .3rem; padding: .1rem .34rem; color: var(--ch-text);
}
pre {
  background: var(--ch-code-bg); border: 1px solid var(--ch-code-border);
  color: var(--ch-code-text);
  border-radius: var(--ch-radius-sm); padding: 1rem 1.1rem;
  overflow-x: auto; font-size: .82rem; line-height: 1.6; margin: 1.25rem 0;
}
pre code { background: none; border: 0; padding: 0; font-size: inherit; color: inherit; }
/* A titled code panel. The panel owns the border and the background, and the
   code is inset on top of it, so the surface carrying the title continues down
   both sides and along the bottom — the title reads as the panel's header
   rather than as a tab with an open bottom edge.

   The wrapper is addressed by class, not with `__title + pre`: Liquid's
   highlight tag wraps the <pre> in <figure class="highlight"> and a kramdown
   fence in <div class="highlight">, so the <pre> is a descendant and not a
   sibling. The figure also carries the UA's `margin: 1em 40px`, which is what
   the inset margin below replaces. */
.code-block {
  margin: 1.25rem 0; padding-bottom: .5rem;
  background: var(--ch-code-bg);
  border: 1px solid var(--ch-code-border); border-radius: var(--ch-radius-sm);
}
.code-block__title {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ch-code-text); padding: .5rem .9rem .45rem;
  border-bottom: 1px solid var(--ch-code-border);
}
.code-block .highlight { margin: .5rem; }
.code-block pre {
  margin: .5rem; box-shadow: var(--ch-shadow-sm);
  background: color-mix(in srgb, var(--ch-code-text) 6%, var(--ch-code-bg));
  border-radius: calc(var(--ch-radius-sm) - .15rem);
}
.code-block .highlight pre { margin: 0; }

/* Rouge syntax highlighting — the One Dark prism palette the reference uses.
   It applies that theme in BOTH site themes, so there is no per-theme override
   here: code blocks are dark on a light page too. Rouge's token classes are
   mapped onto prism's token groups, which is the closest a different tokenizer
   can get. */
.highlight .c, .highlight .c1, .highlight .cm, .highlight .cp,
.highlight .cs, .highlight .cd                       { color: hsl(220, 10%, 40%); font-style: italic; }
.highlight .p, .highlight .pi                        { color: hsl(220, 14%, 71%); }
.highlight .m, .highlight .mi, .highlight .mf, .highlight .mh, .highlight .mo,
.highlight .kc, .highlight .no, .highlight .nc,
.highlight .na                                       { color: hsl(29, 54%, 61%); }
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp,
.highlight .kr, .highlight .kt                       { color: hsl(286, 60%, 67%); }
.highlight .nt, .highlight .nb, .highlight .gd       { color: hsl(355, 65%, 65%); }
.highlight .s, .highlight .s1, .highlight .s2, .highlight .sb, .highlight .sc,
.highlight .sd, .highlight .se, .highlight .sh, .highlight .si, .highlight .sx,
.highlight .sr, .highlight .ss, .highlight .gi       { color: hsl(95, 38%, 62%); }
.highlight .nv, .highlight .vg, .highlight .vi,
.highlight .o, .highlight .ow, .highlight .nf        { color: hsl(207, 82%, 66%); }
.highlight .nl, .highlight .n, .highlight .nn        { color: var(--ch-code-text); }
.highlight .err                                      { color: hsl(355, 65%, 65%); background: none; }
.highlight .gs                                       { font-weight: 700; }
.highlight .ge                                       { font-style: italic; }

/* --- Tables -------------------------------------------------------------- */
.prose table {
  display: block; width: max-content; max-width: 100%; overflow-x: auto;
  border-collapse: collapse; margin: 1.5rem 0; font-size: .88rem;
}
.prose th, .prose td { border: 1px solid var(--ch-border); padding: .5rem .75rem; text-align: left; vertical-align: top; }
.prose th { background: var(--ch-inline-code-bg); font-weight: 700; color: var(--ch-text-heading); }
.table-wrap { overflow-x: auto; max-width: 100%; }

/* --- Prose / article ----------------------------------------------------- */
.prose { font-size: .96rem; }
.path-step__title, .card__title { overflow-wrap: anywhere; }
/* Long identifiers may break mid-token in running text so they never widen the
   page, but never inside a table cell — the table scrolls instead. */
.prose code { overflow-wrap: anywhere; }
.prose td code, .prose th code { overflow-wrap: normal; white-space: nowrap; }
.prose h2 { font-size: 1.4rem; margin: 2.5rem 0 .85rem; }
.prose h3 { font-size: 1.1rem; margin: 2rem 0 .6rem; }
.prose h4 { font-size: .98rem; margin: 1.5rem 0 .5rem; }
.prose p { margin: 0 0 1rem; }
.prose ul, .prose ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.prose li { margin-bottom: .35rem; }
.prose li > ul, .prose li > ol { margin-top: .35rem; }
.prose blockquote {
  margin: 1.5rem 0; padding: .25rem 0 .25rem 1.1rem;
  border-left: 3px solid var(--ch-border); color: var(--ch-text-muted);
}
.prose img { border-radius: var(--ch-radius-sm); }
/* Text and links share mariadb.org's primary, so a link in running text is
   underlined, as on mariadb.org, and turns accent on hover. */
.prose a:not(.btn), .callout a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em;
}

/* Numbered steps inside a tutorial: h2 gets a counter bubble and a rail. */
.step-content { counter-reset: step-counter; }
.step-content > h2 {
  counter-increment: step-counter;
  display: flex; align-items: center; gap: .85rem;
  margin-top: 2.75rem; margin-bottom: .25rem;
}
.step-content > h2::before {
  content: counter(step-counter);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 1.75rem; height: 1.75rem; border-radius: var(--ch-radius-full);
  background: var(--ch-primary); color: var(--ch-on-primary);
  font-size: .8rem; font-weight: 700;
}
/* A closing section that is a summary, not a step: keep the heading, drop the bubble. */
.step-content > h2.no-step::before { display: none; }
.step-content > h2.no-step { gap: 0; margin-top: 3rem; }

/* --- Article layout (sidebar TOC) ---------------------------------------- */
.article-layout > * { min-width: 0; }
.article-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 240px;
  gap: 3rem; align-items: start;
  max-width: var(--ch-maxw); margin: 0 auto; padding: var(--ch-spacing-lg) 1.5rem var(--ch-section-sm);
}
.toc { position: sticky; top: calc(var(--ch-navbar-h) + 1.5rem); font-size: .83rem; }
.toc__title {
  text-transform: uppercase; letter-spacing: .06em; font-size: .7rem;
  font-weight: 700; color: var(--ch-text-faint); margin-bottom: .6rem;
}
.toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--ch-border); }
.toc li { margin: 0; }
.toc a { display: block; padding: .3rem 0 .3rem .85rem; margin-left: -1px;
  color: var(--ch-text-muted); border-left: 2px solid transparent; }
.toc a:hover { color: var(--ch-primary); text-decoration: none; }
.toc a.is-active { color: var(--ch-primary); border-left-color: var(--ch-primary); font-weight: 600; }
.toc ul ul a { padding-left: 1.6rem; font-size: .95em; }
@media (max-width: 1000px) {
  .article-layout { grid-template-columns: 1fr; gap: 0; }
  .toc { display: none; }
}

/* --- Article header ------------------------------------------------------ */
.article-head { background: var(--ch-bg-surface); border-bottom: 1px solid var(--ch-border); }
.article-head__inner { max-width: var(--ch-maxw); margin: 0 auto; padding: var(--ch-spacing-lg) 1.5rem var(--ch-spacing-md); }
.breadcrumb { font-size: .8rem; color: var(--ch-text-faint); margin-bottom: .75rem; }
.breadcrumb a { color: var(--ch-text-muted); }
.article-head h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.05rem); margin: 0 0 .75rem; }
.article-head__sub { color: var(--ch-text-muted); font-size: 1rem; max-width: 760px; margin: 0 0 1rem; }
.article-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

.prereq {
  background: color-mix(in srgb, var(--ch-amber) 8%, var(--ch-bg-surface));
  border-left: 3px solid var(--ch-amber); border-radius: 0 var(--ch-radius-sm) var(--ch-radius-sm) 0;
  padding: .8rem 1.1rem; margin: 0 0 1.75rem; font-size: .87rem; color: var(--ch-text-muted);
}
.prereq strong { color: var(--ch-text-heading); }
.prereq ul { margin: .4rem 0 0; padding-left: 1.2rem; }

/* --- Next / prev --------------------------------------------------------- */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3rem;
  padding-top: 2rem; border-top: 1px solid var(--ch-border); }
.pager > * { min-width: 0; }
.pager__link {
  border: 1px solid var(--ch-border); border-radius: var(--ch-radius-md);
  padding: .9rem 1.1rem; background: var(--ch-bg-surface); text-decoration: none;
  transition: border-color var(--ch-transition-fast);
}
.pager__link:hover { border-color: var(--ch-primary); text-decoration: none; }
.pager__dir { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ch-text-faint); font-weight: 700; }
.pager__title { color: var(--ch-text-heading); font-weight: 600; font-size: .9rem; }
.pager__link--next { text-align: right; grid-column: 2; }
@media (max-width: 700px) {
  .pager { grid-template-columns: 1fr; }
  .pager__link--next { text-align: left; grid-column: 1; }
}

/* --- CTA band ------------------------------------------------------------ */
/* mariadb.org's "Get involved" band: flat primary, tertiary in dark mode. */
.cta {
  background: var(--ch-cta-bg);
  color: var(--ch-cta-text);
  padding: var(--ch-section-sm) 0; text-align: center;
}
.cta h2 { color: var(--ch-cta-text); font-size: 1.4rem; margin: 0 0 .75rem; }
.cta p { color: var(--ch-cta-muted); font-size: .95rem; max-width: 620px; margin: 0 auto 1.5rem; }
.cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

/* --- Skill catalog ------------------------------------------------------- */
.skill-layer { margin-bottom: var(--ch-spacing-lg); }
.skill-layer__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; margin-bottom: .3rem; }
.skill-layer__head h3 { margin: 0; font-size: 1.08rem; }
.skill-layer__count { font-size: .78rem; color: var(--ch-text-faint); }
.skill-layer__desc { color: var(--ch-text-muted); font-size: .87rem; margin: 0 0 1rem; }
.skill-list { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.skill-list li {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .76rem; padding: .22rem .55rem; border-radius: .3rem;
  background: var(--ch-inline-code-bg); border: 1px solid var(--ch-inline-code-border); color: var(--ch-text);
}

/* --- Footer --------------------------------------------------------------
   mariadb.org's footer (twentytwentyfive-child): link columns on the page
   background with 18px bold headings, the logo on the right, and a bottom line
   under a hairline of 40% secondary.
   -------------------------------------------------------------------------- */
.site-footer { background: var(--ch-bg); color: var(--ch-footer-text); padding: 3rem 0 2rem; }
.site-footer__inner { max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; }
.site-footer__columns { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem 3rem; }
.site-footer__column { flex: 1 1 10rem; min-width: 0; }
.site-footer h3 { color: var(--ch-primary); font-size: 18px; font-weight: 700; margin: 0 0 .9rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.site-footer a { color: var(--ch-footer-link); font-size: .9rem; }
.site-footer a:hover { color: var(--ch-footer-link-hover); }
.site-footer__logo { flex: none; align-self: flex-start; line-height: 0; }
.site-footer__logo img { width: 175px; height: auto; }
.site-footer__logo-dark { display: none; }
html[data-theme="dark"] .site-footer__logo-light { display: none; }
html[data-theme="dark"] .site-footer__logo-dark { display: block; }
.site-footer__bottom {
  margin-top: 2.5rem; padding-top: 1rem; font-size: .8rem;
  border-top: 1px solid color-mix(in srgb, var(--ch-primary-light) 40%, transparent);
}
.site-footer__bottom p { margin: 0; }
.site-footer__bottom code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; white-space: nowrap; }
@media (max-width: 700px) {
  .site-footer__logo { order: -1; flex-basis: 100%; }
}

/* --- Scroll to top --------------------------------------------------------
   mariadb.org's scroll-top button (twentytwentyfive-child scroll-top.css):
   primary disc, background-coloured ring and a strong shadow, so it stays
   visible over the hero and CTA band, which share the primary.
   -------------------------------------------------------------------------- */
.scroll-top {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 100;
  width: 3rem; height: 3rem; border-radius: 50%;
  border: 3px solid var(--ch-bg);
  background: var(--ch-primary); color: var(--ch-bg);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
/* The display rule above beats the browser's own [hidden] rule. */
.scroll-top[hidden] { display: none; }
.scroll-top svg { width: 1.25rem; height: 1.25rem; }

/* --- Utilities ----------------------------------------------------------- */
.stack > * + * { margin-top: var(--ch-spacing-sm); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.text-muted { color: var(--ch-text-muted); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}