/* Generated by scripts/color-explore/generate-gallery.js — not hand-edited. */
/* stylelint-disable */
/* Gallery chrome: match live site tokens from jonplummer.css (:root + color-scheme). */
    .color-gallery-embed {
      width: 100%;
      overflow-x: hidden;
    }
    .color-gallery-embed {
      margin: 0;
      padding: 1.25rem clamp(1rem, 3vw, 2rem);
      background: var(--background-color);
      color: var(--text-color);
      font-family: var(--font-family);
      max-width: none;
      width: 100%;
      box-sizing: border-box;
    }
    .color-gallery-embed {
      --gallery-panel-bg: color-mix(in oklch, var(--content-background-color) 88%, var(--text-color) 12%);
      --gallery-code-bg: color-mix(in oklch, var(--content-background-color) 78%, var(--text-color) 22%);
    }
    .color-gallery-embed h2.page-title { margin-top: 0; font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); }
    .color-gallery-embed .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;
    }
    .color-gallery-embed .meta { color: var(--text-color-light); font-size: 0.9rem; margin-bottom: 1.5rem; max-width: 62rem; line-height: 1.45; }
    .color-gallery-embed .meta a { color: var(--link-color); }
    .color-gallery-embed .meta a:hover { color: var(--link-hover-color); text-decoration: underline; }
    .color-gallery-embed .gallery-section-details {
      margin-bottom: 1.75rem;
      width: 100%;
      box-sizing: border-box;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      background: var(--content-background-color);
      overflow: hidden;
    }
    .color-gallery-embed .gallery-section-summary {
      list-style: none;
      cursor: pointer;
      padding: 0.65rem 1rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      user-select: none;
    }
    .color-gallery-embed .gallery-section-summary::-webkit-details-marker,
    .color-gallery-embed .tokens summary::-webkit-details-marker {
      display: none;
    }
    /* Isosceles right triangle: 90° at tip; closed → tip right, open → rotate 90° → tip down */
    .color-gallery-embed .gallery-section-summary::before,
    .color-gallery-embed .tokens summary::before {
      content: '';
      flex-shrink: 0;
      /* Square box avoids self-clipping when the caret rotates 90deg. */
      /* Whole-pixel box avoids subpixel anti-aliasing that can distort the triangle. */
      width: 10px;
      height: 10px;
      display: block;
      background-color: color-mix(in oklch, var(--text-color-light) 85%, var(--content-background-color));
      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M 12 6 L 6 0 L 6 12 Z' fill='white'/%3E%3C/svg%3E");
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: center;
      -webkit-mask-size: contain;
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M 12 6 L 6 0 L 6 12 Z' fill='white'/%3E%3C/svg%3E");
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;
      transition: transform 0.18s ease;
      /* Center pivot keeps the rotated triangle inside the square box. */
      transform-origin: 50% 50%;
    }
    .color-gallery-embed .gallery-section-details[open] > .gallery-section-summary::before,
    .color-gallery-embed .tokens[open] > summary::before {
      transform: rotate(90deg);
    }
    .color-gallery-embed .gallery-section-h {
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--text-color);
      margin: 0;
      padding: 0;
      border: none;
      letter-spacing: 0.02em;
      flex: 1;
    }
    .color-gallery-embed .gallery-section-inner {
      padding: 0 1rem 1rem;
      box-sizing: border-box;
    }
    .color-gallery-embed .gallery-section-cards {
      display: grid;
      gap: 1.75rem;
      width: 100%;
      max-width: none;
      margin-inline: 0;
      box-sizing: border-box;
    }
    .color-gallery-embed .card,
    .color-gallery-embed .gallery-card { border: 1px solid var(--border-color); border-radius: 8px; padding: 1rem; background: var(--gallery-panel-bg); width: 100%; box-sizing: border-box; }
    .color-gallery-embed .card-h,
    .color-gallery-embed .gallery-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
    .color-gallery-embed .card-h h1,
    .color-gallery-embed .card-h h2 { margin: 0; font-size: 1rem; color: var(--text-color); }
    .color-gallery-embed .gallery-card-title {
      margin: 0;
      color: var(--text-color);
      font-size: var(--font-size-2xl);
      line-height: var(--line-height-2xl);
      font-weight: var(--font-weight-semibold);
      letter-spacing: var(--letter-spacing-tight);
    }
    .color-gallery-embed .hue-rotate-bar {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      align-items: stretch;
      margin-bottom: 0.75rem;
      padding: 0;
      background: transparent;
      border: none;
      border-radius: 0;
    }
    .color-gallery-embed .hue-rotate-stack {
      display: flex;
      flex-direction: column;
      gap: 0.3rem;
      min-width: 0;
    }
    .color-gallery-embed .hue-rotate-label {
      font-size: 0.78rem;
      color: var(--text-color-light);
      margin: 0;
    }
    .color-gallery-embed .hue-rotate-inline {
      display: grid;
      grid-template-columns: 1fr auto;
      column-gap: 0.65rem;
      align-items: center;
      width: 100%;
      max-width: min(22rem, 100%);
    }
    .color-gallery-embed .hue-rotate-inline .hue-rotate-input {
      width: 100%;
      min-width: 0;
      vertical-align: middle;
    }
    .color-gallery-embed .hue-rotate-value {
      font-size: 0.8rem;
      color: var(--text-color-light);
      font-variant-numeric: tabular-nums;
      min-width: 2.5rem;
      text-align: end;
    }
    .color-gallery-embed .hue-rotate-note {
      margin: 0;
      font-size: 0.72rem;
      line-height: 1.4;
      color: var(--text-color-light);
    }
    .color-gallery-embed .hue-rotate-note code { font-size: 0.68rem; }
    .color-gallery-embed .hue-rotate-bar-grid {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 0.65rem 1rem;
      align-items: center;
    }
    @media (max-width: 30rem) {
      .color-gallery-embed .hue-rotate-bar-grid {
        grid-template-columns: 1fr;
      }
      .color-gallery-embed .hue-rotate-bar-grid > .color-wheel {
        justify-self: center;
      }
    }
    /* Avoid min(..., 100%) width: in a grid auto track the percentage base is cyclic and
       intrinsic min-content can resolve to 0, collapsing the wheel (Chrome/Safari). */
    .color-gallery-embed .color-wheel {
      --color-wheel-size: clamp(4rem, 28vw, 5.75rem);
      position: relative;
      width: var(--color-wheel-size);
      aspect-ratio: 1;
      flex-shrink: 0;
      --color-wheel-ring-r: calc(var(--color-wheel-size) * 0.34);
    }
    .color-gallery-embed .color-wheel-disk {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 1px solid color-mix(in oklch, var(--border-color) 88%, transparent);
      box-sizing: border-box;
      background: conic-gradient(from -90deg, oklch(0.72 0.21 0deg), oklch(0.72 0.21 15deg), oklch(0.72 0.21 30deg), oklch(0.72 0.21 45deg), oklch(0.72 0.21 60deg), oklch(0.72 0.21 75deg), oklch(0.72 0.21 90deg), oklch(0.72 0.21 105deg), oklch(0.72 0.21 120deg), oklch(0.72 0.21 135deg), oklch(0.72 0.21 150deg), oklch(0.72 0.21 165deg), oklch(0.72 0.21 180deg), oklch(0.72 0.21 195deg), oklch(0.72 0.21 210deg), oklch(0.72 0.21 225deg), oklch(0.72 0.21 240deg), oklch(0.72 0.21 255deg), oklch(0.72 0.21 270deg), oklch(0.72 0.21 285deg), oklch(0.72 0.21 300deg), oklch(0.72 0.21 315deg), oklch(0.72 0.21 330deg), oklch(0.72 0.21 345deg), oklch(0.72 0.21 360deg));
    }
    .color-gallery-embed .color-wheel-dots {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }
    .color-gallery-embed .color-wheel-dot {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 0.65rem;
      height: 0.65rem;
      margin: -0.325rem 0 0 -0.325rem;
      border: 2px solid #fff;
      border-radius: 50%;
      box-sizing: border-box;
      background: #fff;
      box-shadow:
        0 0 0 1px color-mix(in oklch, var(--text-color) 55%, transparent),
        0 0.06rem 0.12rem color-mix(in oklch, var(--text-color) 35%, transparent);
      transform: rotate(calc((var(--dot-h) - 90) * 1deg)) translateY(calc(-1 * var(--color-wheel-ring-r)));
      transform-origin: center center;
    }
    .color-gallery-embed .color-wheel-dot--primary {
      width: 0.8rem;
      height: 0.8rem;
      margin: -0.4rem 0 0 -0.4rem;
      border-width: 2.5px;
    }
    .color-gallery-embed .harmony-color-wheel .color-wheel-dot--multi {
      width: 0.5rem;
      height: 0.5rem;
      margin: -0.25rem 0 0 -0.25rem;
      border-width: 2px;
    }
    .color-gallery-embed .bw-variant-pick {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.5rem 1rem;
      margin-bottom: 0.75rem;
      padding: 0;
      background: transparent;
      border: none;
      border-radius: 0;
    }
    .color-gallery-embed .harmony-lab-lede {
      margin: 0 0 0.65rem;
      font-size: 0.8rem;
      line-height: 1.45;
      color: var(--text-color-light);
    }
    .color-gallery-embed .harmony-lab-lede code { font-size: 0.72rem; }
    .color-gallery-embed .harmony-lab-controls {
      margin-bottom: 0.75rem;
      padding: 0;
      background: transparent;
      border: none;
      border-radius: 0;
    }
    .color-gallery-embed .harmony-lab-top {
      display: grid;
      grid-template-columns: auto minmax(0, min(22rem, 100%)) minmax(12rem, 1fr);
      gap: 0.75rem 1.5rem;
      align-items: end;
      margin-bottom: 0.75rem;
    }
    @media (max-width: 42rem) {
      .color-gallery-embed .harmony-lab-top {
        grid-template-columns: 1fr;
        justify-items: stretch;
      }
      .color-gallery-embed .harmony-lab-top > .harmony-color-wheel {
        justify-self: center;
      }
    }
    .color-gallery-embed .harmony-lab-stack {
      display: flex;
      flex-direction: column;
      gap: 0.3rem;
      min-width: 0;
    }
    .color-gallery-embed .harmony-lab-label {
      font-size: 0.78rem;
      color: var(--text-color-light);
      margin: 0;
    }
    .color-gallery-embed .harmony-lab-stack .harmony-recipe-select {
      width: 100%;
      max-width: 22rem;
    }
    /* [hidden] on rows is defeated if we set display:flex without this (HTML5 hidden + author CSS). */
    .color-gallery-embed .harmony-lab-tuning-row[hidden] {
      display: none !important;
    }
    .color-gallery-embed .harmony-lab-inline {
      display: grid;
      grid-template-columns: 1fr auto;
      column-gap: 0.65rem;
      align-items: center;
      width: 100%;
      max-width: min(22rem, 100%);
      min-width: 0;
    }
    .color-gallery-embed .harmony-lab-inline input[type="range"] {
      width: 100%;
      min-width: 0;
      margin: 0;
    }
    .color-gallery-embed .harmony-lab-inline .harmony-lab-val {
      justify-self: end;
      text-align: end;
    }
    .color-gallery-embed .harmony-lab-tuning {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      align-items: stretch;
    }
    .color-gallery-embed .harmony-lab-tuning-row {
      display: flex;
      flex-direction: column;
      gap: 0.3rem;
      min-width: 0;
      width: 100%;
    }
    .color-gallery-embed .harmony-recipe-select,
    .color-gallery-embed .bw-variant-select {
      width: 100%;
      max-width: 22rem;
      font-size: 0.8rem;
      padding: 0.25rem 0.35rem;
      border-radius: 4px;
      border: 1px solid var(--border-color);
      background: var(--gallery-panel-bg);
      color: var(--text-color);
    }
    .color-gallery-embed .harmony-lab-val {
      font-size: 0.72rem;
      color: var(--text-color-light);
      font-variant-numeric: tabular-nums;
    }
    .color-gallery-embed .badge { font-size: 0.75rem; padding: 0.2rem 0.5rem; border-radius: 4px; }
    .color-gallery-embed .badge.ok { background: #1b4332; color: #b7e4c7; }
    .color-gallery-embed .badge.fail { background: #5c1010; color: #ffc9c9; }
    .color-gallery-embed .row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem 1.25rem;
      align-items: start;
    }
    .color-gallery-embed .preview-column {
      min-width: 0;
      width: 100%;
    }
    @media (max-width: 52rem) { .color-gallery-embed .row { grid-template-columns: 1fr; } }
    .color-gallery-embed .col-label {
      display: block;
      font-size: 0.65rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-color-light);
      margin-bottom: 0.35rem;
    }
    .color-gallery-embed .tokens { margin-top: 0.75rem; }
    .color-gallery-embed .tokens summary {
      cursor: pointer;
      font-size: 0.85rem;
      color: var(--text-color-light);
      list-style: none;
      display: flex;
      align-items: center;
      gap: 0.4rem;
      user-select: none;
    }
    /* Site summary::after (Show text / Hide text) — gallery uses triangle carets only */
    .color-gallery-embed .tokens summary::after,
    .color-gallery-embed .tokens details[open] > summary::after,
    .color-gallery-embed .gallery-section-summary::after,
    .color-gallery-embed .gallery-section-details[open] > .gallery-section-summary::after {
      content: none !important;
    }
    .color-gallery-embed .code {
      font-size: 0.65rem;
      overflow: auto;
      max-height: 12rem;
      background: var(--gallery-code-bg);
      padding: 0.5rem;
      border-radius: 4px;
      color: var(--text-color);
      border: 1px solid var(--border-color);
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      word-break: normal;
    }

    /*
      Mimic body > header, main, footer bands (jonplummer uses body>header selector;
      previews live under .jp-page so we repeat the band rules here).
    */
    .theme-root.home-preview {
      width: 100%;
      /* Bands use full jp-page width (avoid var(--max-width) from site :root / 66rem). */
      --max-width: none;
      --font-size-3xl: 1.35rem;
      --line-height-3xl: 1.15;
      --font-size-2xl: 1.125rem;
      --line-height-2xl: 1.22;
      --font-size-xl: 1.05rem;
      --line-height-xl: 1.2;
      --font-size-lg: 1rem;
      --line-height-lg: 1.25;
      --font-size-md: 0.9375rem;
      --line-height-md: 1.3;
      --font-size-xs: 0.7rem;
      --line-height-xs: 1.35;
      --gutter: 0.65rem;
      --spacing-xs: 0.35rem;
      --spacing-sm: 0.5rem;
      --spacing-md: 0.65rem;
      --spacing-lg: 0.75rem;
      --spacing-xl: 0.85rem;
      --spacing-ex: 3ex;
      --paragraph-spacing: 0.55em;
      --text-size: 13px;
      --line-height: 1.45;
    }
    /*
      On the live site, body uses --background-color; header/main/footer bands use
      --content-background-color. Side gutters only appear when the viewport is wider
      than --max-width — padding here forces the same frame in narrow preview columns.
    */
    .theme-root.home-preview .jp-page {
      margin: 0;
      background-color: var(--background-color);
      color: var(--text-color);
      overflow: hidden;
      border-radius: 6px;
      border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
      box-shadow: 0 1px 8px rgba(0,0,0,0.12);
      padding: 0.55rem 1.1rem 0.65rem;
    }
    .theme-root.home-preview .jp-page > header,
    .theme-root.home-preview .jp-page > .gallery-preview-main,
    .theme-root.home-preview .jp-page > footer {
      margin: 0;
      padding: var(--gutter);
      max-width: none !important;
      width: 100% !important;
      box-sizing: border-box;
      background-color: var(--content-background-color);
    }
    /*
      Site article grid is 1fr + 2fr (date | body), so prose only used ~⅔ of the band.
      Stack like the narrow breakpoint so previews use the full content width.
    */
    .theme-root.home-preview article:not(.link-item) {
      grid-template-columns: 1fr !important;
      grid-template-areas:
        "a"
        "b"
        "c" !important;
    }
    .theme-root.home-preview article.link-item {
      grid-template-columns: 1fr !important;
      grid-template-areas: "c" !important;
    }
    /*
      Default pre is block-level + max-width 100%, so a one-line snippet still reads as a
      full-width slab (--background-color). Shrink-wrap so prose vs code balance matches
      how you scan real posts.
    */
    .theme-root.home-preview article section pre {
      width: fit-content;
      max-width: 100%;
      box-sizing: border-box;
    }
    /* Simulated visited (file:// previews rarely have :visited match) */
    .theme-root.home-preview a.sim-visited {
      color: var(--link-visited-color);
    }
/* Live /color/ embed — flat flow, post-scale titles, minimal chrome */
.color-gallery-embed.color-gallery-embed--site {
  padding: var(--spacing-sm) 0 var(--spacing-xl);
  background: transparent;
}
.color-gallery-embed--site .gallery-section-cards {
  display: grid;
  gap: var(--spacing-xl);
}
.color-gallery-embed--site .gallery-card {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

/*
  Loaded after jonplummer.css on /color/ only. MPA view transitions (navigation: auto
  globally) plus this heavy embed have been unreliable in Chrome when following utility
  links (e.g. to /type/). Prefer an ordinary full navigation for this route.
*/
@view-transition {
  navigation: none;
}