@layer product {
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }

  .center--page {
    --measure: min(76rem, 100%);
  }

  .center--wide {
    --measure: min(88rem, 100%);
  }

  .lede {
    font-size: var(--text-heading-lg);
    color: var(--color-text-secondary);
    max-inline-size: 52ch;
  }

  .kicker {
    font-size: var(--text-small);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    font-variation-settings: "wght" 600;
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--p-space-sm);
    padding: var(--p-space-xs) var(--p-space-sm);
    border: 1px solid var(--color-border-default);
    border-radius: var(--p-radius-full);
    background: var(--color-surface-elevated);
    font-size: var(--text-small);
    color: var(--color-text-secondary);
  }

  .prose-block > * + * {
    margin-block-start: var(--space-block);
  }

  .compare-pane {
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border-default);
    border-radius: var(--p-radius-lg);
    padding: var(--space-component);
    min-inline-size: 0;
  }

  .compare-pane pre {
    margin: 0;
    max-inline-size: none;
  }

  .compare-pane--hot {
    border-color: var(--color-action-primary);
  }

  .snippet {
    position: relative;
    background: var(--color-surface-sunken);
    border-radius: var(--p-radius-lg);
    padding: var(--space-component);
    overflow: auto;
  }

  .snippet pre {
    margin: 0;
    background: transparent;
    padding: 0;
    max-inline-size: none;
  }

  .snippet hs-copy {
    position: absolute;
    inset-block-start: var(--p-space-sm);
    inset-inline-end: var(--p-space-sm);
  }

  .layer-map {
    display: grid;
    gap: var(--p-space-sm);
  }

  .layer-map > * {
    display: flex;
    justify-content: space-between;
    gap: var(--p-space-md);
    padding: var(--p-space-sm) var(--space-component);
    border-radius: var(--p-radius-md);
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border-default);
    font-family: var(--font-code);
    font-size: var(--text-small);
  }

  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--p-layer-sticky);
    background: oklch(from var(--color-surface-base) l c h / 0.92);
    backdrop-filter: blur(12px);
    container-type: inline-size;
  }

  .site-header .brand {
    display: flex;
    align-items: center;
    gap: var(--p-space-sm);
    text-decoration: none;
    color: var(--color-text-primary);
    font-variation-settings: "wght" 700;
    flex-shrink: 0;
  }

  .site-header .brand:visited {
    color: var(--color-text-primary);
  }

  .header-bar {
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }

  .site-header .site-nav {
    margin-inline-start: auto;
    min-inline-size: 0;
  }

  .site-nav a[aria-current="page"] {
    color: var(--color-text-primary);
    font-variation-settings: "wght" 600;
    text-decoration: none;
    box-shadow: inset 0 -2px 0 var(--color-action-primary);
  }

  .band {
    padding-block: var(--p-space-3xl);
    border-block-start: 1px solid var(--color-border-default);
  }

  .band--alt {
    background: var(--color-surface-elevated);
  }

  .muted {
    color: var(--color-text-secondary);
  }

  table.dense {
    width: 100%;
    font-size: var(--text-small);
    min-inline-size: 48rem;
    border-collapse: separate;
    border-spacing: 0;
  }

  .hue-range {
    flex-grow: 1;
    min-inline-size: 12rem;
  }

  .table-scroll {
    overflow-x: auto;
    max-inline-size: 100%;
    margin-inline: calc(var(--p-space-sm) * -1);
    padding-inline: var(--p-space-sm);
  }

  table.dense th[scope="row"],
  table.dense thead th:first-child {
    position: sticky;
    inset-inline-start: 0;
    background: var(--color-surface-base);
    z-index: 1;
    white-space: nowrap;
  }

  .band--alt table.dense th[scope="row"],
  .band--alt table.dense thead th:first-child {
    background: var(--color-surface-elevated);
  }

  .rung {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-gutter);
    align-items: start;
  }

  .rung-index {
    font-variation-settings: "wght" 700;
    font-size: var(--text-heading-xl);
    color: var(--color-action-primary);
    line-height: 1;
  }

  .switcher > * {
    min-inline-size: 0;
  }

  .compare-pane,
  .snippet,
  pre {
    max-inline-size: min(100%, calc(100vw - 3rem));
    overflow-x: auto;
  }

  .page-layout,
  .site-header,
  main {
    max-inline-size: 100%;
  }

  html {
    overflow-x: clip;
  }

  a.action,
  a.action:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--p-space-xs);
    background: var(--color-action-primary);
    color: var(--color-text-inverse);
    border: none;
    border-radius: var(--p-radius-md);
    padding: var(--space-component) var(--space-inline);
    font: inherit;
    font-variation-settings: "wght" 500;
    text-decoration: none;
    min-block-size: 2.75rem;
  }

  a.action:hover {
    background: var(--color-action-hover);
    color: var(--color-text-inverse);
  }

  a.action--outline,
  a.action--outline:visited {
    background: transparent;
    border: 2px solid var(--color-action-primary);
    color: var(--color-action-primary);
  }

  a.action--outline:hover {
    background: var(--color-action-surface);
    color: var(--color-action-primary);
  }

  .hero {
    padding-block: var(--p-space-3xl);
  }

  .hero h1 {
    font-size: clamp(2.4rem, 7vw, 4.4rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    max-inline-size: 14ch;
  }

  .nav-toggle {
    display: none;
  }

  /* The list itself carries `popover`. At this width the popover is
     neutralized back into normal flow — display and position overridden
     unconditionally, regardless of open/closed state. See ADR-0006. */
  .site-header .site-nav ul[popover] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-inline);
    list-style: none;
    padding: 0;
    margin: 0;
    position: static;
    inset: auto;
    border: none;
    background: none;
    color: inherit;
    overflow: visible;
  }

  @container (inline-size < 960px) {
    .site-header .nav-toggle {
      display: inline-flex;
      margin-inline-start: auto;
    }

    .site-header .site-nav {
      flex-basis: 100%;
      margin-inline-start: 0;
      order: 10;
    }

    /* Below this width the popover governs visibility again: closed by
       default (the UA rule), shown only via :popover-open, which the
       toggle button's `popovertarget` drives with no script. */
    .site-header .site-nav ul[popover] {
      display: none;
      position: fixed;
      inset: var(--p-space-lg) var(--p-space-md) auto auto;
      margin: 0;
      flex-direction: column;
      align-items: start;
      gap: 0;
      padding: var(--p-space-sm);
      border: var(--border-width) solid var(--color-border-default);
      border-radius: var(--p-radius-md);
      background: var(--color-surface-elevated);
      box-shadow: var(--p-shadow-md);
    }

    .site-header .site-nav ul[popover]:popover-open {
      display: flex;
    }
  }
}