/* ============================================================================
 * H2O.ai shared content styles — GENERATED, DO NOT EDIT BY HAND.
 * Built by shared-nav/build-styles.mjs from the site's design tokens; regenerated
 * on every deploy (package.json `prebuild`). Served at /shared/h2o-styles.css.
 *
 * Usage: <link rel="stylesheet" href="https://h2o.ai/shared/h2o-styles.css">
 *        then wrap your docs content in a .h2o-content element.
 * Everything is scoped under .h2o-content to avoid clashing with the docs platform.
 * See shared-nav/docs-style-guide.md for the full guide.
 * ========================================================================== */

/* Brand fonts (Inter / DM Sans / DM Mono). CSP: allow fonts.googleapis.com (style-src) and
 * fonts.gstatic.com (font-src). */
@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;700&family=Inter:wght@400;500;600;700&display=swap");

/* --- Design tokens (light theme defaults) ------------------------------------------------ */
.h2o-content {
  /* Fonts — real stacks (the site's next/font vars don't exist off-site). */
  --font-sans: "Inter", Arial, system-ui, sans-serif;
  --font-heading: "DM Sans", Arial, system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Palette */
  --color-summer: #ffdd00;
  --color-sunshine: #ffe600;
  --color-yellow-700: #ebcb00;
  --color-yellow-300: #ffeb66;
  --color-yellow-200: #fff199;
  --color-yellow-100: #fff8cc;
  --color-yellow-50: #fffce5;
  --color-ink: #373630;
  --color-body: #53565a;
  --color-muted: #6b6b66;
  --color-line: #ebebeb;
  --color-surface: #f9f9f9;
  --color-card: #ffffff;
  --color-card-flat: #f1f1ef;
  --color-card-hover: #ebebe7;
  --color-row-hover: #f9f9f9;
  --color-row-hover-gray: #ebebe7;
  --color-accent-ink: #8a7f00;
  --color-block-accent: #373630;
  --color-band-gray: #ebebeb;
  --color-band-line: rgba(0, 0, 0, 0.12);
  --color-gray-150: #f4f4f4;
  --color-gray-400: #999999;
  --color-border-on-card: #dcdcd8;
  --color-surface-dark-raised: #23252d;
  --color-surface-dark-raised-hover: #2e3039;
  --color-charcoal: #161616;
  --color-charcoal-2: #262626;
  --color-btn: #000000;
  --color-btn-fg: #ffffff;

  /* Type scale */
  --radius-brand: 8px;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1600px;
  --text-hero-l: clamp(48px, 6.1vw, 88px);
  --text-hero-m: clamp(40px, 4.2vw, 60px);
  --text-hero-s: clamp(32px, 3vw, 44px);
  --text-fig-s: clamp(36px, 3.1vw, 44px);
  --text-fig-m: clamp(48px, 4.6vw, 64px);
  --text-fig-l: clamp(64px, 7vw, 96px);
  --text-head: clamp(28px, 2.6vw, 36px);
  --text-cta: clamp(30px, 2.8vw, 40px);
  --text-quote: clamp(28px, 3vw, 40px);
  --text-quote-card: clamp(20px, 1.8vw, 26px);
  --text-subhead: 28px;
  --text-row: 22px;
  --text-lead: clamp(20px, 1.7vw, 24px);
  --text-lead-l: clamp(24px, 2.2vw, 32px);
  --text-tile: 24px;
  --text-tile-l: clamp(24px, 2.2vw, 30px);
  --text-tile-4up: clamp(22px, 1.75vw, 25px);
  --text-wheel-title: clamp(28px, 2.8vw, 38px);
  --text-wheel-label: clamp(20px, 2vw, 26px);

  /* Spacing + layout */
  --space-s: clamp(48px, 4.4vw, 64px);
  --space-m: clamp(72px, 6.944vw, 100px);
  --space-l: clamp(88px, 10.417vw, 150px);
  --gutter: clamp(22px, 6.944vw, 100px);
  --head-gap: 18px;
  --eyebrow-row: calc(13px * 1.5 + var(--head-gap));
  --space-head: clamp(40px, 4.4vw, 64px);

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 18px;

  /* Component colours (from the site's code-block + form components) */
  --code-bg: #f9f9f9;
  --code-bar: #f4f4f4;
  --code-line: #ebebeb;
  --code-fg: #373630;
  --code-muted: #666666;
  --code-comment: #8a8778;
  --code-string: #7a6a00;
  --code-number: #9a5b00;
  --code-keyword: #a1341f;
  --code-builtin: #2f5d8a;
  --color-danger: #e01e5a;   /* form errors / destructive */
  --color-cta-arrow: #ebcb00; /* primary button arrow box (yellow-700) */

  /* Base reading styles */
  font-family: var(--font-sans);
  color: var(--color-body);
  font-size: 18px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Dark theme ---------------------------------------------------------------------------
 * Mirrors the site's toggle ([data-site-theme="dark"] .site). Opt in by putting the content
 * inside [data-h2o-theme="dark"] or adding .h2o-dark to the .h2o-content element. */
[data-h2o-theme="dark"] .h2o-content,
.h2o-content.h2o-dark,
.h2o-content .h2o-canvas-dark {
  --color-surface: #0e0f11;
  --color-card: #17181b;
  --color-card-flat: #22242a;
  --color-accent-ink: #e8d24d;
  --color-block-accent: #e8d24d;
  --color-band-gray: #373630;
  --color-band-line: rgba(255, 255, 255, 0.16);
  --color-ink: #f4f5f6;
  --color-body: #b3b6bd;
  --color-muted: #9296a0;
  --color-line: rgba(255, 255, 255, 0.10);
  --color-gray-150: #24262b;
  --color-btn: #f4f5f6;
  --color-btn-fg: #17181b;
  --color-row-hover: rgba(255, 255, 255, 0.06);
  --color-row-hover-gray: rgba(255, 255, 255, 0.06);
  /* Code palette flips with the theme (the site's code-block behaviour). */
  --code-bg: #17181b;
  --code-bar: #1f2126;
  --code-line: rgba(255, 255, 255, 0.10);
  --code-fg: #e8e9ea;
  --code-muted: #9aa0a8;
  --code-comment: #6f757e;
  --code-string: #ffe082;
  --code-number: #f2a86b;
  --code-keyword: #ff9d8a;
  --code-builtin: #8fc4f0;
}
[data-h2o-theme="dark"] .h2o-content,
.h2o-content.h2o-dark {
  background-color: #0e0f11;
  color: var(--color-body);
}

/* --- Canvas tones -------------------------------------------------------------------------
 * A section's surface. Light/gray are theme-reactive; dark is a fixed near-black box that
 * re-values ink/body/muted/line/card to their light-on-dark values (the site's .on-dark). */
.h2o-canvas-light {
  background: var(--color-card);
  --color-ink: #373630;
  --color-body: #53565a;
  --color-muted: #6b6b66;
  --color-line: #ebebeb;
  --color-card: #ffffff;
  --color-gray-150: #f4f4f4;
  color: var(--color-body);
}
.h2o-canvas-gray {
  background: var(--color-card-flat);
  --color-ink: #373630;
  --color-body: #53565a;
  --color-muted: #6b6b66;
  --color-line: #ebebeb;
  --color-card: #ffffff;
  --color-gray-150: #f4f4f4;
  color: var(--color-body);
}
.h2o-canvas-dark {
  background: #000;
  --color-accent-ink: #e8d24d;
  --color-block-accent: #e8d24d;
  --color-ink: #f4f5f6;
  --color-body: #b3b6bd;
  --color-muted: #9296a0;
  --color-line: rgba(255, 255, 255, 0.16);
  --color-card: #17181b;
  --color-gray-150: #24262b;
  color: rgba(255, 255, 255, 0.72);
}
.h2o-canvas-dark :where(h1, h2, h3, h4, h5, h6) { color: #fff; }

/* --- Layout ------------------------------------------------------------------------------- */
.h2o-container { max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
.h2o-container--wide { max-width: 1440px; }

.h2o-section { padding-top: var(--space-m); padding-bottom: var(--space-m); padding-inline: var(--gutter); }
.h2o-section > * { max-width: 1240px; margin-inline: auto; }
.h2o-section--pad-sm   { padding-top: var(--space-s); padding-bottom: var(--space-s); }
.h2o-section--pad-lg   { padding-top: var(--space-l); padding-bottom: var(--space-l); }
.h2o-section--pad-none { padding-top: 0; padding-bottom: 0; }
.h2o-section--pt-none  { padding-top: 0; }
.h2o-section--pb-none  { padding-bottom: 0; }

/* --- Typography (scoped) ------------------------------------------------------------------ */
.h2o-content :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-heading);
  color: var(--color-ink);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 1.6em 0 0.5em;
}
.h2o-content > :first-child { margin-top: 0; }
.h2o-content h1 { font-size: clamp(36px, 4.5vw, 56px); letter-spacing: -0.03em; line-height: 1.04; }
.h2o-content h2 { font-size: clamp(28px, 2.8vw, 38px); letter-spacing: -0.022em; }
.h2o-content h3 { font-size: clamp(22px, 2vw, 27px); letter-spacing: -0.018em; }
.h2o-content h4 { font-size: 20px; letter-spacing: -0.012em; }
.h2o-content h5, .h2o-content h6 { font-size: 18px; letter-spacing: -0.01em; }

.h2o-content p { margin: 0 0 1em; }
.h2o-content p, .h2o-content li { color: var(--color-body); }
.h2o-content strong, .h2o-content b { color: var(--color-ink); font-weight: 600; }
.h2o-content small { font-size: 0.85em; color: var(--color-muted); }

/* Links — ink text with the brand Summer-yellow underline. */
.h2o-content a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-summer);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color 200ms var(--ease), color 200ms var(--ease);
}
.h2o-content a:hover { text-decoration-color: var(--color-ink); }
.h2o-canvas-dark a { color: #fff; }
.h2o-canvas-dark a:hover { text-decoration-color: #fff; }

/* Lists */
.h2o-content ul, .h2o-content ol { margin: 0 0 1em; padding-left: 1.5em; }
.h2o-content li { margin: 0.35em 0; }
.h2o-content li::marker { color: var(--color-muted); }

/* Inline + block code */
.h2o-content code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--color-card-flat);
  color: var(--color-ink);
  padding: 0.14em 0.4em;
  border-radius: var(--radius-sm);
}
.h2o-content pre {
  font-family: var(--font-mono);
  background: var(--code-bg);
  border: 1px solid var(--code-line);
  color: var(--code-fg);
  padding: 18px 20px;
  border-radius: var(--radius-md);
  overflow-x: auto;
  line-height: 1.6;
  font-size: 13.5px;
  margin: 0 0 1.5em;
}
.h2o-content pre code { background: none; color: inherit; padding: 0; font-size: inherit; }

/* Keyboard key */
.h2o-content kbd {
  font-family: var(--font-mono);
  font-size: 0.82em;
  background: var(--color-card);
  color: var(--color-ink);
  border: 1px solid var(--color-line);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  padding: 2px 6px;
}

/* Definition list */
.h2o-content dt { font-family: var(--font-heading); font-weight: 600; color: var(--color-ink); margin-top: 1em; }
.h2o-content dd { color: var(--color-body); margin: 0.25em 0 0 1.25em; }

/* Figure + caption */
.h2o-content figure { margin: 0 0 1.5em; }
.h2o-content figcaption { margin-top: 10px; font-size: 14px; color: var(--color-muted); text-align: center; }

/* Blockquote — the Summer bar */
.h2o-content blockquote {
  margin: 0 0 1.5em;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--color-summer);
  color: var(--color-ink);
  font-size: 1.1em;
  line-height: 1.5;
}

/* Tables */
.h2o-content table { width: 100%; border-collapse: collapse; margin: 0 0 1.5em; font-size: 16px; }
.h2o-content th, .h2o-content td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--color-line); }
.h2o-content th { font-family: var(--font-heading); font-weight: 600; color: var(--color-ink); }
.h2o-content td { color: var(--color-body); }

/* Horizontal rule */
.h2o-content hr { border: 0; border-top: 1px solid var(--color-line); margin: 2em 0; }

/* Images / media */
.h2o-content img, .h2o-content video { max-width: 100%; height: auto; border-radius: var(--radius-md); }

/* Eyebrow — mono label with the 40x3 Summer bar (the site's signature section opener). */
.h2o-eyebrow {
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--color-muted);
  font-size: 13px;
  line-height: 1.44;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}
.h2o-eyebrow::before {
  content: "";
  display: inline-block;
  width: 40px;
  height: 3px;
  margin-right: 12px;
  background: var(--color-summer);
}

/* --- Buttons ----------------------------------------------------------------------------- */
.h2o-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 200ms var(--ease), color 200ms var(--ease), opacity 200ms var(--ease), filter 200ms var(--ease);
}
.h2o-btn:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.h2o-btn--lg { height: 50px; }
.h2o-btn--sm { height: 40px; padding: 0 18px; }

.h2o-btn--primary { background: #ffe433; color: #000; }
.h2o-btn--primary:hover { background-image: linear-gradient(to right, #ffe600 40%, #fed812 50%, #ffdd00 60%); background-size: 200% 100%; }
.h2o-btn--secondary { background: var(--color-gray-150); color: var(--color-ink); }
.h2o-btn--secondary:hover { filter: brightness(0.95); }
.h2o-btn--black { background: var(--color-btn); color: var(--color-btn-fg); }
.h2o-btn--black:hover { opacity: 0.9; }
.h2o-btn--white { background: #fff; color: var(--color-charcoal); }
.h2o-btn--white:hover { filter: brightness(0.95); }
.h2o-btn--ghost { background: none; color: var(--color-ink); padding-inline: 4px; height: auto; }
.h2o-btn--ghost:hover { color: var(--color-muted); }

/* Arrow affordance: append <span class="h2o-btn__arrow">→</span> (a 14px glyph after the label). */
.h2o-btn__arrow { font-family: var(--font-sans); font-size: 1.1em; line-height: 1; transition: transform 200ms var(--ease); }
.h2o-btn:hover .h2o-btn__arrow { transform: translateX(2px); }

/* --- Cards ------------------------------------------------------------------------------- */
.h2o-card {
  display: block;
  background: var(--color-card-flat);
  border-radius: var(--radius-lg);
  padding: 28px;
  color: inherit;
  text-decoration: none;
  transition: background 200ms var(--ease), transform 200ms var(--ease);
}
a.h2o-card:hover { background: var(--color-card-hover); transform: translateY(-3px); }
a.h2o-card { text-decoration: none; }
.h2o-card h3 { margin-top: 0; }
/* On gray/dark canvases a card lifts to a raised fill with a hairline. */
.h2o-canvas-gray .h2o-card { background: var(--color-card); border: 1px solid var(--color-line); }
.h2o-canvas-dark .h2o-card { background: var(--color-charcoal-2); border: 1px solid rgba(255, 255, 255, 0.16); }

/* Key takeaways — a 10px Summer square per line. */
.h2o-takeaways { list-style: none; margin: var(--space-head) 0 0; padding: 0; }
.h2o-takeaways li { position: relative; padding-left: 26px; margin: 0 0 14px; color: var(--color-body); }
.h2o-takeaways li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 10px; height: 10px; background: var(--color-summer); }

/* Callout / note — a Summer left bar on a flat surface. */
.h2o-note { margin: 0 0 1.5em; padding: 16px 20px; border-left: 3px solid var(--color-summer); background: var(--color-card-flat); border-radius: var(--radius-sm); }

/* Visually-hidden text (scoped so it can't clash with the docs platform's own .sr-only). */
.h2o-content .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- Section head + lead ------------------------------------------------------------------ */
.h2o-section-head { display: flex; flex-direction: column; gap: var(--head-gap); margin-bottom: var(--space-head); }
.h2o-section-head > * { margin: 0; }
.h2o-lead { font-size: var(--text-lead); line-height: 1.5; color: var(--color-body); }

/* Accent (gold) eyebrow; on a dark canvas the label is Summer, the bar stays Summer. */
.h2o-eyebrow--accent { color: var(--color-accent-ink); }
.h2o-canvas-dark .h2o-eyebrow, [data-h2o-theme="dark"] .h2o-eyebrow { color: rgba(255, 255, 255, 0.48); }
.h2o-canvas-dark .h2o-eyebrow--accent, [data-h2o-theme="dark"] .h2o-eyebrow--accent { color: var(--color-summer); }

/* --- Links: mono arrow link + CTA pair ---------------------------------------------------- */
.h2o-arrow-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-ink); text-decoration: none;
}
.h2o-arrow-link > .label { border-bottom: 1px solid var(--color-summer); padding-bottom: 3px; }
.h2o-arrow-link .h2o-btn__arrow, .h2o-arrow-link .arrow { transition: transform 200ms var(--ease); }
.h2o-arrow-link:hover .h2o-btn__arrow, .h2o-arrow-link:hover .arrow { transform: translateX(2px); }
.h2o-canvas-dark .h2o-arrow-link { color: #fff; }

.h2o-cta-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.h2o-cta-pair--center { justify-content: center; }
.h2o-cta-pair__link {
  font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--color-ink); text-decoration: none; border-bottom: 1px solid rgba(55, 54, 48, 0.3); padding-bottom: 4px;
}
.h2o-canvas-dark .h2o-cta-pair__link { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.3); }

/* --- Breadcrumb --------------------------------------------------------------------------- */
.h2o-breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.16em; line-height: 1;
}
.h2o-breadcrumb::before { content: ""; width: 40px; height: 3px; margin-right: 4px; background: var(--color-summer); flex: none; }
.h2o-breadcrumb a { color: var(--color-ink); text-decoration: none; text-underline-offset: 4px; }
.h2o-breadcrumb a:hover { text-decoration: underline; }
.h2o-breadcrumb .sep { color: var(--color-muted); }
.h2o-breadcrumb [aria-current="page"] { color: var(--color-muted); }
.h2o-canvas-dark .h2o-breadcrumb a { color: var(--color-summer); }
.h2o-canvas-dark .h2o-breadcrumb [aria-current="page"] { color: rgba(255, 255, 255, 0.85); }
.h2o-canvas-dark .h2o-breadcrumb .sep { color: rgba(255, 255, 255, 0.4); }

/* --- Pills, tags, status ------------------------------------------------------------------ */
/* Tag — Inter 13, soft fill, hairline (topic/metadata tags). */
.h2o-tag {
  display: inline-flex; align-items: center; border-radius: 9999px;
  border: 1px solid var(--color-border-on-card); background: var(--color-card-flat);
  padding: 6px 11px; font-size: 13px; line-height: 1; color: var(--color-ink);
}
.h2o-canvas-gray .h2o-tag { background: var(--color-card); }
.h2o-canvas-dark .h2o-tag { background: var(--color-charcoal-2); border-color: transparent; color: #fff; }

/* Pill — mono uppercase chip (filters, labels). */
.h2o-pill {
  display: inline-block; border-radius: 9999px; font-family: var(--font-mono); text-transform: uppercase;
  padding: 9px 18px; font-size: 12px; letter-spacing: 0.08em; background: var(--color-card-flat); color: var(--color-ink);
}
.h2o-pill--sm { padding: 6px 12px; font-size: 11px; letter-spacing: 0.06em; }
.h2o-pill--active { background: var(--color-ink); color: var(--color-card); }

/* Status pill — open (Summer) vs settled (soft), with a solid/ring dot. */
.h2o-status {
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 9999px;
  border: 1px solid; font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em; line-height: 1; white-space: nowrap;
}
.h2o-status--open { border-color: var(--color-summer); background: var(--color-summer); color: #000; }
.h2o-status--settled { border-color: var(--color-border-on-card); background: var(--color-card-flat); color: var(--color-body); }
.h2o-status__dot { width: 8px; height: 8px; border-radius: 9999px; flex: none; }
.h2o-status--open .h2o-status__dot { background: #000; }
.h2o-status--settled .h2o-status__dot { background: var(--color-body); }
.h2o-status__dot--ring { background: none !important; border: 1.5px solid currentColor; }

/* --- Stats / figures ---------------------------------------------------------------------- */
.h2o-stat__figure {
  font-family: var(--font-heading); font-weight: 500; color: var(--color-block-accent);
  font-size: clamp(46px, 6vw, 96px); line-height: 0.9; letter-spacing: -0.035em;
}
.h2o-stat__label { font-family: var(--font-heading); font-weight: 400; color: var(--color-body); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.3; }

/* --- Callouts / notes --------------------------------------------------------------------- */
.h2o-note--muted  { border-left-color: var(--color-muted); }
.h2o-note--warn   { border-left-color: var(--color-cta-arrow); }
.h2o-note--danger { border-left-color: var(--color-danger); }
.h2o-note__title { display: block; font-weight: 600; color: var(--color-ink); margin-bottom: 4px; }

/* --- Icon tile (card/feature marker) ------------------------------------------------------ */
.h2o-icon-tile {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border-radius: var(--radius-md); background: var(--color-summer); color: var(--color-charcoal);
}
.h2o-canvas-dark .h2o-icon-tile { background: var(--color-summer); color: var(--color-charcoal); }

/* --- Forms -------------------------------------------------------------------------------- */
.h2o-field { margin-bottom: 20px; }
.h2o-label { display: block; margin-bottom: 6px; font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--color-ink); line-height: 1.3; }
.h2o-label .req { margin-left: 2px; color: var(--color-danger); }
.h2o-input, .h2o-textarea, .h2o-select {
  box-sizing: border-box; width: 100%; padding: 12px 14px;
  border: 1px solid var(--color-line); border-radius: 6px; background: var(--color-card);
  font-family: var(--font-sans); font-size: 16px; line-height: 1.4; color: var(--color-ink);
  outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.h2o-textarea { min-height: 120px; resize: vertical; }
.h2o-input::placeholder, .h2o-textarea::placeholder { color: var(--color-muted); }
.h2o-input:focus, .h2o-textarea:focus, .h2o-select:focus { border-color: var(--color-ink); box-shadow: 0 0 0 3px rgb(0 0 0 / 0.08); }
.h2o-select {
  appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23373630' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.h2o-check { display: flex; gap: 10px; align-items: flex-start; }
.h2o-check input { flex: none; width: 16px; height: 16px; margin-top: 3px; accent-color: var(--color-ink); }
.h2o-check span { font-family: var(--font-sans); font-size: 13px; line-height: 1.5; color: var(--color-body); }
.h2o-error { margin-top: 6px; color: var(--color-danger); font-size: 13px; }
.h2o-input.is-invalid, .h2o-textarea.is-invalid, .h2o-select.is-invalid { border-color: var(--color-danger); }
/* Fields on a dark canvas: lift the fill + give a visible edge. */
.h2o-canvas-dark .h2o-label { color: #fff; }
.h2o-canvas-dark .h2o-input, .h2o-canvas-dark .h2o-textarea, .h2o-canvas-dark .h2o-select {
  background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.38); color: #fff;
}
.h2o-canvas-dark .h2o-input::placeholder, .h2o-canvas-dark .h2o-textarea::placeholder { color: rgba(255, 255, 255, 0.55); }
.h2o-canvas-dark .h2o-input:focus, .h2o-canvas-dark .h2o-textarea:focus, .h2o-canvas-dark .h2o-select:focus { border-color: #fff; box-shadow: none; }

/* --- Rich code block (optional, for hand-built samples with a title bar / tabs) ----------- */
.h2o-code {
  border: 1px solid var(--code-line); border-radius: var(--radius-md); overflow: hidden;
  background: var(--code-bg); font-family: var(--font-mono); margin: 0 0 1.5em;
}
.h2o-code__bar {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: var(--code-bar); border-bottom: 1px solid var(--code-line);
  color: var(--code-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
}
.h2o-code__copy {
  margin-left: auto; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--code-line); border-radius: var(--radius-sm); background: var(--code-bg);
  padding: 3px 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--code-fg);
  transition: background-color 150ms ease, border-color 150ms ease;
}
.h2o-code__copy:hover { border-color: var(--color-summer); background: var(--color-summer); color: #000; }
.h2o-code__body { padding: 16px 20px; color: var(--code-fg); overflow-x: auto; font-size: 13.5px; line-height: 1.6; }
.h2o-code__body pre { margin: 0; padding: 0; border: 0; background: none; }
/* Syntax token classes (add to <span>s if you tokenise manually). */
.h2o-code .tok-comment { color: var(--code-comment); font-style: italic; }
.h2o-code .tok-string { color: var(--code-string); }
.h2o-code .tok-number { color: var(--code-number); }
.h2o-code .tok-keyword { color: var(--code-keyword); }
.h2o-code .tok-builtin { color: var(--code-builtin); }

/* --- Table variants ----------------------------------------------------------------------- */
.h2o-table--striped tbody tr:nth-child(even) td { background: var(--color-card-flat); }
.h2o-table--bordered th, .h2o-table--bordered td { border: 1px solid var(--color-line); }

/* --- Dividers ----------------------------------------------------------------------------- */
.h2o-divider { border: 0; border-top: 1px solid var(--color-line); margin: var(--space-s) 0; }

/* --- Button extras ------------------------------------------------------------------------ */
.h2o-btn--block { display: flex; width: 100%; }
.h2o-btn:disabled, .h2o-btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
/* The site's primary with a SEPARATE yellow arrow box (label + chip). */
.h2o-btn-group { display: inline-flex; align-items: stretch; gap: 4px; border-radius: 6px; text-decoration: none; }
.h2o-btn-group:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.h2o-btn-group__label, .h2o-btn-group__box {
  background: #ffe433; color: #000; border-radius: var(--radius-sm);
  transition: background 200ms var(--ease), background-image 200ms var(--ease);
}
.h2o-btn-group__label {
  display: flex; align-items: center; height: 48px; padding: 0 24px;
  font-family: var(--font-mono); font-size: 14px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
}
.h2o-btn-group__box { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; }
.h2o-btn-group--lg .h2o-btn-group__label, .h2o-btn-group--lg .h2o-btn-group__box { height: 50px; }
.h2o-btn-group--lg .h2o-btn-group__box { width: 50px; }
.h2o-btn-group:hover .h2o-btn-group__label, .h2o-btn-group:hover .h2o-btn-group__box {
  background-image: linear-gradient(to right, #ffe600 40%, #fed812 50%, #ffdd00 60%); background-size: 200% 100%;
}

@media (prefers-reduced-motion: reduce) {
  .h2o-content *, .h2o-content *::before, .h2o-content *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}