/* ------------------------------------------------------------------
   The swatch book's own styles. The tokens, the base rules and the shared
   primitives (.wrap, .label, .display, .btn, .btn-gel, .tlink, .gelled,
   [hidden]) come from the site: src/styles/tokens.css and base.css, which
   the lab pages link and every site page loads.

   Every rule below is scoped under .lxg, the tool's root: <body> in the lab
   pages, a <div> inside <main> on the site's tool pages. Nothing here reaches
   the site around it (the site header is .nav too, the footer has .chip).
   swatch.js appends its dialogs, its toast and the SVG defs inside the root,
   so the scoped rules reach them as well.
   ------------------------------------------------------------------ */

/* ---- named colors: the only hexes in this file
   A color that is not a gel is allowed only when it models a real object or draws a technical graph, and only here,
   named after what it is (CLAUDE.md, Design system). These draw the transmission graph (black ground, white axes, the
   visible spectrum along the curve), white or black text over a gel, and the two inks gels.ts sets on a gel. They do
   not follow the theme. swatch.js paints with the same names from its COLORS object; test.mjs checks each one against
   this block. rgba() shadows and overlays are not covered. */
.lxg {
  --PureBlack: #000000;
  --PureWhite: #FFFFFF;
  --GraphGrid: #4E4E4E;
  --GraphNm: #9A9A9A;
  --SpectrumViolet: #7858DC;
  --SpectrumBlue: #7CB8FF;
  --SpectrumGreen: #A8FF85;
  --SpectrumYellow: #D8D900;
  --SpectrumRed: #C34444;
  --GelInkDark: #14130E;      /* ink on a light gel in House, as gels.ts sets `on` */
  --GelInkLit: #0B0B0C;       /* ink on a light lit gel in Show, as gels.ts sets `onLit` */
}

.lxg {
  /* The swatch book's fixed geometry. Chips never resize; the strip shows whole chips only. */
  --chip-w: 166px;
  --sw-h: 120px;
  /* The source slider's kelvin colors run to near white: an edge on the track, and a ring round the presets on paper. */
  --k-edge: rgba(20, 19, 14, 0.35); --k-ring: rgba(20, 19, 14, 0.3);
}
[data-theme='show'] .lxg {
  --k-edge: rgba(255, 255, 255, 0.2); --k-ring: transparent;
}

/* Primitives the site does not have: the small button, and a link with nothing to go to yet
   (the catalog's Compare at fewer than two gels), grayed and inert. */
/* The site's .btn at the tool's small size: the site's type size (--t-sm), a line height that keeps it the height
   of the Compare box beside it, and the label centered when a column stretches it (the card's buttons). */
.lxg .btn { justify-content: center; }
.lxg .btn-sm { padding: 0.45rem 0.8rem; font-size: var(--t-sm); line-height: 1.2; }
.lxg .btn[aria-disabled='true'] { border-color: var(--rule); color: var(--ink-4); cursor: not-allowed; }
.lxg .btn[aria-disabled='true']:hover { background: none; color: var(--ink-4); }

/* White text with a thin black stroke: the lab's one piece of "over the picture" text. */
.lxg .stroke {
  color: var(--PureWhite); font-family: var(--sans); font-style: italic; font-size: 0.78rem; letter-spacing: 0.03em;
  -webkit-text-stroke: 0.55px var(--PureBlack); paint-order: stroke fill;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.9), 0 1px 1px rgba(0, 0, 0, 0.6);
}
.lxg .stroke:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------------------------ page */
.lxg .top { padding-block: clamp(2.5rem, 7vh, 5rem) clamp(1.5rem, 4vh, 3rem); }
.lxg .top h1 { font-size: clamp(3rem, 9vw, 7rem); margin: 1rem 0 1.4rem; }
.lxg .top .acts { display: flex; flex-wrap: wrap; gap: 1rem 1.2rem; align-items: center; margin-top: 1.4rem; }
.lxg .theme-toggle { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid var(--rule); padding: 0.45rem 0.7rem; color: var(--ink-3); }
.lxg .theme-toggle:hover { color: var(--ink); border-color: var(--ink); }
.lxg .note { padding-block: 2.5rem 3rem; color: var(--ink-3); font-size: 0.8rem; max-width: 64ch; }
.lxg .note code { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-3); }
/* A manual popover (top layer, over dialogs); inset and margin undo the popover defaults. */
.lxg .toast { position: fixed; inset: auto auto 1.5rem 50%; margin: 0; border: 0; overflow: visible; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 2rem); text-align: center; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.6rem 1rem; opacity: 0; transition: opacity 0.3s var(--ease); pointer-events: none; z-index: 20; }
.lxg .toast.on { opacity: 1; }

/* ------------------------------------------------------------------ the band */
.lxg .band { border-block: 1px solid var(--rule); background: var(--paper); position: relative; }
.lxg .book-wrap { position: relative; width: calc(var(--n, 1) * var(--chip-w)); max-width: 100%; margin-inline: auto; padding-top: 2.1rem; }
/* Above the strip: ? and Shuffle on the left, Gel catalog on the right. */
.lxg .band-acts { position: absolute; top: 0.55rem; left: 0.4rem; z-index: 2; display: flex; align-items: center; gap: 0.55rem; }
.lxg .catalog-link { position: absolute; top: 0.55rem; right: 0.4rem; z-index: 2; }
.lxg .catalog-link, .lxg .help-link, .lxg .shuffle-link { padding: 0.15rem 0.3rem; line-height: 1.2; }
.lxg .help-link { font-style: normal; font-weight: 600; }
/* The two word links read as buttons: a thin border in the text color. */
.lxg .catalog-link, .lxg .shuffle-link { border: 1px solid currentColor; border-radius: 2px; padding-inline: 0.55rem; text-decoration: none; }
/* On house mode's light paper the band's links invert: black text (and border), white stroke.
   A chip's More Info tab keeps white-on-black whatever the theme. */
[data-theme='house'] .lxg :is(.catalog-link, .help-link, .shuffle-link) {
  color: var(--PureBlack); -webkit-text-stroke: 0.55px var(--PureWhite);
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.9), 0 1px 1px rgba(255, 255, 255, 0.6);
}
.lxg .book { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.lxg .book::-webkit-scrollbar { display: none; }
.lxg .hint { padding-block: 0.8rem 1rem; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; align-items: center; }
.lxg .hint .src { text-transform: none; letter-spacing: 0.08em; }
.lxg .src a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
.lxg .src a:hover { color: var(--ink-2); }
.lxg .mobile-acts { display: none; gap: 0.5rem; }
/* The phone buttons on any device without a fine hover pointer: the same split as the hover handlers in swatch.js. */
@media (hover: none), (pointer: coarse) { .lxg .catalog-link, .lxg .band-acts { display: none; } .lxg .mobile-acts { display: flex; flex-wrap: wrap; } .lxg .book-wrap { padding-top: 1.2rem; } }

/* ---- a chip: swatch face + caption, with the More Info tab hiding under the face */
.lxg .chip { flex: 0 0 var(--chip-w); width: var(--chip-w); position: relative; scroll-snap-align: start; -webkit-touch-callout: none; user-select: none; touch-action: pan-x; }
.lxg .pick { display: block; width: 100%; text-align: left; padding: 0; }
.lxg .sw { display: block; position: relative; height: var(--sw-h); background: var(--c); transition: box-shadow 0.25s var(--ease); }
.lxg .cap { display: block; padding: 0.55rem 0.5rem 0.7rem; font-family: var(--mono); font-size: 0.6rem; line-height: 1.35; letter-spacing: 0.06em; color: var(--ink-3); border-top: 1px solid var(--rule); }
.lxg .cap b { display: block; font-weight: 500; color: var(--ink-2); }
.lxg .cap i { display: block; font-style: normal; text-transform: uppercase; font-size: 0.53rem; letter-spacing: 0.08em; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lxg .chip.on .sw { box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--c); }
.lxg .chip.on .cap b { color: var(--ink); }
.lxg .pick:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }

/* The picked chip wears a check in its gel's ink color, top-left of the face. */
.lxg .chip.on .sw::after { content: '✓'; position: absolute; top: 0.6rem; left: 0.45rem; color: var(--on); font-family: var(--sans); font-size: 0.95rem; font-weight: 600; line-height: 1; }

/* The More Info tab: a dark strip at the foot of the face. .ov clips it to the face, so it can wait below the face and
   rise into it, 50 ms after a mouse comes onto the chip or when a key focuses the chip. It opens the card.
   While hidden it is visibility: hidden, so it leaves the tab order until the chip's face has the focus. */
.lxg .ov { position: absolute; left: 0; top: 0; width: 100%; height: var(--sw-h); overflow: hidden; pointer-events: none; }
.lxg .ov .tab {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1.5rem; border: 0; margin: 0; padding: 0 0.5rem;
  background: rgba(0, 0, 0, 0.82); color: var(--PureWhite); font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.12em;
  text-transform: uppercase; display: flex; align-items: center; justify-content: center; cursor: pointer;
  transform: translateY(100%); visibility: hidden; transition: transform 0.35s var(--ease), visibility 0s linear 0.35s; pointer-events: none;
}
.lxg .ov .tab:hover { background: rgba(0, 0, 0, 0.92); text-decoration: underline; text-underline-offset: 2px; }
.lxg .ov .tab:focus-visible { outline: 2px solid var(--PureWhite); outline-offset: -3px; }
.lxg .chip:has(:focus-visible) .tab { transform: translateY(0); visibility: visible; transition: transform 0.35s var(--ease), visibility 0s; pointer-events: auto; }
@media (hover: hover) and (pointer: fine) {
  .lxg .chip:hover .tab { transform: translateY(0); visibility: visible; transition: transform 0.35s var(--ease) 0.05s, visibility 0s 0.05s; pointer-events: auto; }
}

/* ------------------------------------------------------------------ dialogs: the site stays visible behind */
.lxg dialog { border: 0; padding: 0; background: transparent; color: var(--ink); max-width: none; max-height: none; width: 100vw; height: 100vh; height: 100dvh; inset: 0; position: fixed; }
.lxg dialog::backdrop { background: rgba(0, 0, 0, 0.28); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.lxg dialog[open] { display: grid; place-items: center; }
.lxg dialog:not([open]) { display: none; }
.lxg .box { position: relative; background: var(--paper); color: var(--ink); border: 1px solid var(--rule); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); width: min(100vw - 2rem, 58rem); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow: auto; }
.lxg .detail .box { transform-origin: 50% 70%; animation: pop 0.35s var(--ease); }
.lxg .detail.closing .box { animation: unpop 0.6s var(--ease) forwards; }
.lxg .detail.closing::backdrop { animation: fade 0.6s var(--ease) forwards; }
@keyframes pop { from { transform: scale(0.7); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes unpop { to { transform: scale(0.7); opacity: 0; } }
@keyframes fade { to { opacity: 0; } }
.lxg .x { position: absolute; top: 0.4rem; right: 0.5rem; z-index: 3; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; font-size: 1.6rem; line-height: 1; color: var(--ink-3); }
.lxg .x:hover { color: var(--ink); }
.lxg .nav { position: absolute; top: 50%; transform: translateY(-50%); width: 2.4rem; height: 3.2rem; display: grid; place-items: center; font-size: 1.4rem; color: var(--ink-3); z-index: 2; }
.lxg .nav:hover { color: var(--ink); }
.lxg .nav.prev { left: 0; } .lxg .nav.next { right: 0; }
@media (hover: none), (pointer: coarse) { .lxg .nav { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .lxg .sw, .lxg .ov .tab, .lxg .chip:hover .tab { transition: none; }
  .lxg .detail .box, .lxg .detail.closing .box, .lxg .detail.closing::backdrop { animation: none; }
}

/* ---- small popups (help, Gel Match) */
.lxg .small .box { width: min(100vw - 2rem, 26rem); padding: 1.3rem 1.4rem 1.2rem; }
/* The enlarged graph: as wide as the viewport allows, never taller than it (no letterbox, so the probe stays true). */
.lxg .zoom .box { width: min(100vw - 2rem, 72rem); }
.lxg .zoom-sub { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin: -0.3rem 0 0.7rem; }
.lxg .zoom-graph svg { display: block; width: min(100%, (100dvh - 11rem) * 232 / 110); height: auto; margin-inline: auto; background: var(--PureBlack); }
.lxg .small h2 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1; margin-bottom: 0.8rem; padding-right: 2rem; }
.lxg .small ul { list-style: none; display: grid; gap: 0.55rem; font-size: 0.9rem; color: var(--ink-2); }
/* The help popup is long reading: Metropolis, per the site's type policy. */
.lxg .help ul { font-family: var(--body); line-height: 1.55; }
.lxg .small ul ul { margin-top: 0.4rem; padding-left: 1rem; color: var(--ink-3); font-size: 0.84rem; }
.lxg .small li::before { content: '— '; color: var(--ink-4); }
.lxg .small .row { display: flex; gap: 0.6rem; align-items: center; margin: 0.6rem 0 0.9rem; }
.lxg .small select { flex: 1; font: inherit; font-size: 0.88rem; background: var(--paper-2); color: var(--ink); border: 1px solid var(--rule); padding: 0.45rem 0.6rem; }
.lxg .cmp-list { list-style: none; display: grid; gap: 0.4rem; }
.lxg .cmp-list li::before { content: none; }
.lxg .cmp { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: 0.7rem; align-items: center; width: 100%; text-align: left; border: 1px solid var(--rule); padding: 0.35rem 0.5rem 0.35rem 0.35rem; }
.lxg .cmp:hover { border-color: var(--ink-3); }
.lxg .cmp.xr, .lxg .cmp.xr:hover { border-color: var(--rule); cursor: default; } /* a listed gel whose data is not loaded: no swatch to show */
/* The row's gel, at the left like a chip. Set in full here so it never depends on the chip's .sw sizing. */
.lxg .cmp .sw { width: 3rem; height: 2.2rem; background: var(--c); }
.lxg .cmp.xr .sw { visibility: hidden; }
.lxg .cmp b { display: block; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; color: var(--ink); }
.lxg .cmp i { display: block; font-style: normal; font-size: 0.78rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lxg .cmp small { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--ink-3); text-align: right; line-height: 1.5; }
.lxg .cmp-note { font-family: var(--body); font-size: 0.8rem; color: var(--ink-3); line-height: 1.5; }
/* A link in a note: base.css takes the underline off every link, so it wears the hairline the source lines use. */
.lxg .cmp-note a { color: var(--ink-3); border-bottom: 1px solid var(--rule); }
.lxg .cmp-note a:hover { color: var(--ink); border-color: var(--ink-3); }

/* ---- the detail card: name on top, swatch centered, the beam visualizer, graph bottom-left, table bottom-right.
   Above 1100 px the visualizer moves to a right column (see below). */
.lxg .card { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(17rem, 0.8fr); grid-template-areas: 'swatch swatch' 'head head' 'viz viz' 'graph table' 'foot foot'; gap: 0.9rem 1.6rem; padding: 1.1rem 1.4rem 1rem; }
.lxg .card .viz { --vz-warn: var(--c-show, var(--c)); } /* the warning triangle in this gel's color, the lit one: it sits on the black stage */
.lxg .card .head { grid-area: head; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.4rem 1.2rem; align-items: start; padding-right: 2.6rem; }
.lxg .card .head .num { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.lxg .card .head h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1; margin-top: 0.25rem; }
.lxg .card .head .desc { grid-column: 1 / -1; color: var(--ink-3); font-family: var(--body); font-size: 0.85rem; line-height: 1.55; }
.lxg .card .head-acts { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 0.4rem; align-items: stretch; min-width: 9rem; }
/* The Compare box: a real checkbox, drawn as [ ] / [✔] in the mono caption style. */
.lxg .basket { position: relative; display: flex; align-items: center; justify-content: center; border: 1px solid var(--ink-3); padding: 0.45rem 0.8rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); cursor: pointer; user-select: none; line-height: 1.2; }
.lxg .basket input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.lxg .basket span::before { content: '[ ]'; content: '[ ]' / ''; white-space: pre; letter-spacing: 0; margin-right: 0.55em; color: var(--ink-3); }
.lxg .basket input:checked + span::before { content: '[✔]'; content: '[✔]' / ''; color: var(--ink); }
.lxg .basket:hover { border-color: var(--ink); color: var(--ink); }
.lxg .basket:has(input:focus-visible) { outline: 2px solid var(--gel); outline-offset: 2px; }
.lxg .basket.off { opacity: 0.45; cursor: not-allowed; }
.lxg .basket.off:hover { border-color: var(--ink-3); color: var(--ink-2); }
.lxg .card .swatch { grid-area: swatch; justify-self: center; width: min(100%, 22rem); }
.lxg .card .swatch .sw { height: 96px; }
.lxg .card .swatch .cap { text-align: center; padding-bottom: 0.3rem; }
.lxg .card .graph { grid-area: graph; align-self: end; min-width: 0; }
.lxg .card > * > h3, .lxg .cc h3 { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; margin-bottom: 0.45rem; display: flex; justify-content: space-between; gap: 0.6rem; }
/* The ? beside the table's name: the note on hover, focus or a press. */
.lxg .pubq { position: relative; display: inline-grid; }
.lxg .pubq-b { width: 1.15rem; height: 1.15rem; border: 1px solid var(--ink-4); border-radius: 50%; font-family: var(--mono); font-size: 0.6rem; line-height: 1; color: var(--ink-3); display: grid; place-items: center; }
.lxg .pubq-b:hover, .lxg .pubq.on .pubq-b { color: var(--ink); border-color: var(--ink); }
.lxg .pubnote { display: none; position: absolute; right: 0; bottom: calc(100% + 0.4rem); z-index: 4; width: 16rem; padding: 0.55rem 0.7rem; background: var(--ink); color: var(--paper); font-family: var(--body); font-size: 0.8rem; letter-spacing: normal; line-height: 1.45; text-transform: none; font-weight: 400; }
.lxg .pubq:hover .pubnote, .lxg .pubq:focus-within .pubnote, .lxg .pubq.on .pubnote { display: block; }
.lxg .card .graph svg[data-gel] { width: 100%; height: auto; max-height: 40vh; display: block; background: var(--PureBlack); }
.lxg .graph svg[data-gel], .lxg .cc-graph svg[data-gel], .lxg .zoom-graph svg[data-gel] { cursor: crosshair; touch-action: none; }
/* The magnifier over a graph's top right corner: opens the graph large (openGraph in swatch.js). */
.lxg .gbox { position: relative; }
/* Top left, inside the axes (the y axis is at x = 14 of 232), clear of the percentages; half seen until used. */
.lxg .gzoom { position: absolute; top: 6px; left: calc(14 / 232 * 100% + 6px); width: 1.75rem; height: 1.75rem; display: grid; place-items: center; color: var(--PureWhite); background: rgba(0, 0, 0, 0.62); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 2px; opacity: 0.55; transition: opacity 0.15s var(--ease); }
.lxg .gzoom:hover, .lxg .gzoom:focus-visible { opacity: 1; background: rgba(0, 0, 0, 0.85); border-color: var(--PureWhite); }
.lxg .gzoom:focus-visible { outline: 2px solid var(--PureWhite); outline-offset: 1px; }
.lxg .gzoom svg { display: block; }
@media (pointer: coarse) { .lxg .gzoom { width: 2.75rem; height: 2.75rem; } }
.lxg .card .table { grid-area: table; align-self: end; min-width: 0; }
.lxg .spec { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 0.7rem; }
.lxg .spec th, .lxg .spec td { padding: 0.32rem 0.3rem; border-bottom: 1px solid var(--rule); text-align: right; font-weight: 400; white-space: nowrap; }
.lxg .spec th { color: var(--ink-3); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; }
.lxg .spec td:first-child, .lxg .spec th:first-child { text-align: left; color: var(--ink-2); }
.lxg .spec td { color: var(--ink); }
.lxg .spec td.dim { color: var(--ink-3); }
.lxg .card .foot { grid-area: foot; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1.2rem; border-top: 1px solid var(--rule); padding-top: 0.7rem; }
.lxg .card .foot .links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; align-items: center; }
/* Source lines (.src, .hint, .note) are in --ink-3: 4.6:1 on House paper and 4.8:1 on Show, where --ink-4 was 2.7:1. */
.lxg .src { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.lxg .nodata { font-family: var(--mono); font-size: 0.66rem; color: var(--ink-3); padding: 0.6rem 0; }
.lxg .card .mnav { display: none; gap: 0.5rem; }
.lxg .card .mnav button { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--rule); padding: 0.4rem 0.6rem; color: var(--ink-3); }

/* ---- The beam visualizer (lab/beam-viz/) is always on the card. Between 721 and 1100 px it sits under the swatch.
   Above 1100 px the card content is a left column of about 560 px and the visualizer a right column of about 620 px.
   The dialogs are wide enough for both. */
.lxg .card .card-viz { grid-area: viz; min-width: 0; justify-self: center; width: min(100%, 40rem); }
@media (min-width: 721px) {
  .lxg .detail .box { width: min(100vw - 2rem, 100rem); }
  .lxg .catalog .box:has(.cat-detail:not([hidden])) { width: min(100vw - 2rem, 98rem); }
  .lxg .detail .card { padding-inline: 2.6rem; } /* clear of the ‹ › buttons at the box edges */
}
/* Above 1100 px: the swatch, the name, the curve and the table down the left; the visualizer the right column. */
@media (min-width: 1101px) {
  .lxg .card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    grid-template-rows: auto auto auto auto auto 1fr; /* the last row takes the slack when the visualizer is the taller side */
    grid-template-areas: 'swatch viz' 'head viz' 'graph viz' 'table viz' 'foot viz' '. viz';
  }
  .lxg .card .swatch { justify-self: stretch; width: auto; }
  .lxg .card .graph, .lxg .card .table { align-self: start; }
  .lxg .card .card-viz { align-self: start; justify-self: stretch; width: auto; }
  .lxg .detail .card .card-viz { margin-top: 2.2rem; } /* the stage's gear stays clear of the dialog's × */
}
/* Full screen, from the catalog's ⤢: the dialog's box fills the viewport; the inline page pins itself over the page. */
.lxg .catalog .box.is-full { width: 100vw; height: 100dvh; max-height: none; border: 0; }
.lxg .cat-page.is-full { position: fixed; inset: 0; z-index: 70; /* over the site's sticky header (60), under its DBO overlay */ margin: 0; border: 0; overflow: auto; min-height: 0; }
.lxg .cat-head .full { margin-left: auto; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; font-size: 1.1rem; color: var(--ink-3); border: 1px solid var(--rule); }
.lxg .cat-head .full:hover { color: var(--ink); border-color: var(--ink-3); }
.lxg .catalog .cat-head .full { margin-right: 6.4rem; } /* clear of Full catalog ↗ and the × */
/* Until the module has drawn: one plain line, in a box the shape of the stage so the card does not jump. */
.lxg .viz-status { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; color: var(--ink-3); padding: 0.6rem 0; }
.lxg .card-viz.is-loading { aspect-ratio: 16 / 10; }
.lxg .cmp-viz.is-loading { aspect-ratio: 21 / 9; }

/* ---- the source slider */
.lxg .source { margin-top: 0.55rem; display: grid; gap: 0.3rem; }
.lxg .source .src-lab { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.lxg .source .src-lab output { color: var(--ink); letter-spacing: 0.06em; font-size: 0.66rem; }
/* The slider wears its kelvin: the track runs through the bare source's colors from 2000 to 10000 K (--k-track) and
   the thumb is the color at its value (--k-now), both set by swatch.js. --k-edge keeps the near-white end visible. */
.lxg .source input[type='range'] { -webkit-appearance: none; appearance: none; width: 100%; height: 1.3rem; margin: 0.1rem 0; background: transparent; cursor: pointer; }
.lxg .source input[type='range']::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: var(--k-track, var(--rule)); box-shadow: inset 0 0 0 1px var(--k-edge); }
.lxg .source input[type='range']::-moz-range-track { height: 8px; border-radius: 4px; background: var(--k-track, var(--rule)); box-shadow: inset 0 0 0 1px var(--k-edge); }
.lxg .source input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 18px; height: 18px; margin-top: -5px; border-radius: 50%; background: var(--k-now, var(--ink)); border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--ink-2), 0 1px 3px rgba(0, 0, 0, 0.35); }
.lxg .source input[type='range']::-moz-range-thumb { box-sizing: border-box; width: 18px; height: 18px; border-radius: 50%; background: var(--k-now, var(--ink)); border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--ink-2), 0 1px 3px rgba(0, 0, 0, 0.35); }
.lxg .source input[type='range']:focus-visible { outline: 2px solid var(--ink-3); outline-offset: 2px; }
/* The snap to a labeled source: the thumb's ring brightens and the tick pulses for about 150 ms. */
.lxg .source input[type='range']::-webkit-slider-thumb { transition: box-shadow 0.15s var(--ease); }
.lxg .source input[type='range'].snap::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--ink), 0 0 0 6px color-mix(in srgb, var(--k-now) 55%, transparent); }
.lxg .source input[type='range'].snap::-moz-range-thumb { box-shadow: 0 0 0 2px var(--ink), 0 0 0 6px color-mix(in srgb, var(--k-now) 55%, transparent); }
.lxg .ticks button.snap { animation: tick-snap 0.15s var(--ease); }
@keyframes tick-snap { 50% { transform: scale(1.05); box-shadow: inset 0 0 0 1px var(--kc), 0 0 0 3px var(--kc); } }
@media (prefers-reduced-motion: reduce) { .lxg .ticks button.snap { animation: none; } }
/* Each preset wears its own kelvin's color (--kc, set by swatch.js): the outline, and a fill with a double outline
   when chosen. --k-ring rings them on paper, where a daylight white would vanish. */
.lxg .ticks { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.3rem; }
.lxg .ticks button { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.06em; line-height: 1.3; border: 1px solid var(--kc, var(--rule)); box-shadow: 0 0 0 1px var(--k-ring); padding: 0.28rem 0.2rem; color: var(--ink-3); text-align: center; }
.lxg .ticks button i { display: block; font-style: normal; color: var(--ink-3); font-size: 0.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lxg .ticks button.on { color: var(--ink); background: color-mix(in srgb, var(--kc) 30%, transparent); box-shadow: inset 0 0 0 1px var(--kc), 0 0 0 1px var(--k-ring); }
.lxg .ticks button.on i { color: var(--ink-2); }
/* Locked: a tip beside the pointer over the slider or the fixture button, and a press there turns the visualizer off.
   Their pointer events pass to the row, which places the tip (a disabled control fires none in some browsers). */
.lxg .source.is-locked input[type='range'], .lxg .source.is-locked .fx-b { pointer-events: none; }
/* The keyboard's way to the same: a visually hidden button; while it has the focus the slider shows a focus ring. */
.lxg .src-free { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.lxg .source:has(.src-free:focus-visible) input[type='range'] { outline: 2px solid var(--ink-3); outline-offset: 2px; }
.lxg .src-tip { position: fixed; z-index: 30; pointer-events: none; width: max-content; max-width: calc(100vw - 8px); padding: 0.35rem 0.55rem; background: var(--ink); color: var(--paper); font-family: var(--body); font-size: 0.8rem; line-height: 1.35; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); }
.lxg .src-row { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 0.8rem; }
.lxg .source .custom { display: flex; align-items: center; gap: 0.4rem; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.lxg .source .custom input { width: 5.2rem; font: inherit; font-size: 0.68rem; background: var(--paper-2); color: var(--ink); border: 1px solid var(--rule); padding: 0.25rem 0.4rem; }
/* The fixture menu: a button, then one column per level opening to the right of the chosen item. */
.lxg .fx-b { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--rule); padding: 0.3rem 0.55rem; min-height: 1.8rem; }
.lxg .fx-b i { font-style: normal; color: var(--ink-3); }
.lxg .fx-b:hover:not(:disabled), .lxg .fx-b[aria-expanded='true'] { color: var(--ink); border-color: var(--ink-3); }
.lxg .fx-b:disabled { cursor: not-allowed; }
.lxg .source.is-locked .fx-b { opacity: 0.4; } /* disabled with the slider; a press while the data loads does not gray it */
/* Fixed, so no row, card or dialog box clips it; swatch.js (placeMenu) sets left, top or bottom and max-height from the
   button, keeps it inside the viewport, and opens it upward when there is more room above. */
.lxg .fx-menu { position: fixed; left: 8px; top: 0; z-index: 40; display: flex; align-items: flex-start; max-width: calc(100vw - 16px); overflow: auto; overscroll-behavior: contain; background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); }
.lxg .fx-col { flex: none; }
.lxg .fx-col { list-style: none; min-width: 8rem; padding: 0.25rem 0; border-right: 1px solid var(--rule); }
.lxg .fx-col:last-child { border-right: 0; }
.lxg .fx-col button { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; width: 100%; text-align: left; padding: 0.42rem 0.7rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em; color: var(--ink-2); white-space: nowrap; }
.lxg .fx-col button i { font-style: normal; color: var(--ink-3); }
.lxg .fx-col button:hover, .lxg .fx-col button.on { background: var(--paper-3); color: var(--ink); }
.lxg .fx-col button:focus-visible { outline: 2px solid var(--gel); outline-offset: -2px; }
@media (hover: none), (pointer: coarse) { .lxg .fx-col button { min-height: 44px; } }
/* Locked while the visualizer is on: its lamp is the source. The label and the value stay readable. */
.lxg .source.is-locked input, .lxg .source.is-locked .ticks, .lxg .source.is-locked .custom { opacity: 0.4; cursor: default; }

/* ---- the catalog (dialog on the band page, inline on catalog.html) */
/* "Full catalog ↗" beside the ×: the popup's way out to the standalone page */
.lxg .full-link { position: absolute; top: 1rem; right: 3.2rem; z-index: 3; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 1px; }
.lxg .full-link:hover { color: var(--ink); border-color: var(--ink-3); }
.lxg .catalog .box { width: min(100vw - 2rem, 82.5rem); height: min(100vh - 2rem, 62.5rem); height: min(100dvh - 2rem, 62.5rem); }
.lxg [data-catalog] { display: grid; grid-template-rows: auto 1fr; min-height: 0; height: 100%; }
.lxg .cat-head { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 3.2rem 0.9rem 1.2rem; border-bottom: 1px solid var(--rule); min-height: 3.3rem; }
.lxg .cat-head .label { flex: 1; }
.lxg .cat-head .back { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); padding: 0.3rem 0.3rem 0.3rem 0; }
.lxg .cat-head .back:hover { color: var(--ink); }
.lxg .cat-tools { display: flex; flex-wrap: wrap; gap: 0.6rem 0.8rem; align-items: center; padding: 0.9rem 1.2rem; border-bottom: 1px solid var(--rule); }
.lxg .cat-tools input, .lxg .cat-tools select { font: inherit; font-size: 0.9rem; background: var(--paper-2); color: var(--ink); border: 1px solid var(--rule); padding: 0.5rem 0.7rem; min-width: 0; }
.lxg .cat-tools input { flex: 1 1 14rem; }
.lxg .cat-tools input:focus, .lxg .cat-tools select:focus { outline: 2px solid var(--gel); outline-offset: 1px; }
.lxg .cat-tools .count { margin-left: auto; }
.lxg .cat-tools select:disabled { opacity: 0.5; }
/* Similar to a gel: a select, with × to clear it while it is on. The reference gel is outlined in the grid. */
.lxg .sim { display: inline-flex; align-items: stretch; min-width: 0; max-width: 100%; }
.lxg .sim select { max-width: 22rem; }
.lxg .sim:has(.sim-x:not([hidden])) select { border-color: var(--ink-3); color: var(--ink); }
.lxg .sim-x { width: 2.2rem; border: 1px solid var(--ink-3); border-left: 0; font-size: 1.1rem; line-height: 1; color: var(--ink-3); }
.lxg .sim-x:hover { color: var(--ink); }
.lxg .cg.sim-ref { outline: 2px solid var(--ink-2); outline-offset: 1px; }
/* Replace mode (compare.html's Replace gel): a tile press picks; the Compare boxes are not in play. */
.lxg .is-replace .cg-box { display: none; }
.lxg .cat-list { display: grid; grid-template-rows: auto 1fr; min-height: 0; }
.lxg .cat-grid { overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.2rem, 1fr)); gap: 0.5rem; padding: 1rem 1.2rem 1.4rem; align-content: start; }
.lxg .cg { position: relative; border: 1px solid var(--rule); background: var(--paper); display: block; }
.lxg .cg-open { display: block; width: 100%; text-align: left; padding: 0; }
.lxg .cg .sw { height: 54px; }
.lxg .cg .cap { padding: 0.4rem 0.45rem 0.5rem; }
.lxg .cg:hover { border-color: var(--ink-3); }
.lxg .cg-open:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.lxg .cg.hide { display: none; }
/* The grid's Compare box: a real checkbox in a label over the top right of the color. The label is
   the hit area; the span draws a small square in the gel's own ink, empty or ticked. */
.lxg .cg-box { position: absolute; top: 1px; right: 1px; padding: 5px; line-height: 0; cursor: pointer; }
.lxg .cg-box input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.lxg .cg-box span { display: grid; place-items: center; width: 16px; height: 16px; border: 1px solid var(--on); border-radius: 2px; color: var(--on); font-family: var(--mono); font-size: 11px; line-height: 1; }
.lxg .cg-box input:checked + span::before { content: '✔'; content: '✔' / ''; }
.lxg .cg-box:hover span { box-shadow: 0 0 0 1px var(--on); }
.lxg .cg-box:has(input:focus-visible) span { outline: 2px solid var(--on); outline-offset: 2px; }
.lxg .cg-box.off { cursor: not-allowed; opacity: 0.45; }
.lxg .cg-box.off:hover span { box-shadow: none; }
@media (pointer: coarse) { .lxg .cg-box { padding: 8px; } .lxg .cg-box span { width: 20px; height: 20px; font-size: 13px; } }
.lxg .cat-empty { grid-column: 1 / -1; color: var(--ink-3); font-family: var(--mono); font-size: 0.7rem; padding: 1rem 0; }
.lxg .cat-detail { min-height: 0; overflow: auto; }
.lxg .catalog .cat-detail .card { padding-top: 1rem; }
/* inline on catalog.html */
.lxg .cat-page { border: 1px solid var(--rule); background: var(--paper); margin-block: 1rem 3rem; min-height: 70vh; }
.lxg .cat-page .cat-grid { overflow: visible; }
.lxg .cat-page .cat-detail .card { padding: 1.4rem 1.6rem 1.2rem; }
.lxg .cat-page .cat-head { padding-right: 1.2rem; }
@media (max-width: 720px) { .lxg .cat-page { margin-inline: calc(-1 * var(--gut)); border-inline: 0; } .lxg .cat-page .cat-detail .card { padding: 0 0 1rem; } }
.lxg .sources { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; padding-block: 0.6rem 2.5rem; }

/* ---- compare.html: Add gels and Clear, the visualizer, one master source under it, one column per gel in the basket */
.lxg .cmp-page { margin-block: 0.5rem 2rem; }
.lxg .cmp-master { display: flex; flex-wrap: wrap; gap: 0.8rem 2rem; align-items: flex-end; justify-content: space-between; padding-block: 0.4rem 1rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.2rem; background: var(--paper); }
/* The source sits between the stage and the gels' swatches, which it tints. */
.lxg .cmp-src { max-width: 34rem; margin-bottom: 1.2rem; }
.lxg .cmp-src .source { margin-top: 0; }
.lxg .cmp-acts { display: flex; gap: 0.5rem; }
.lxg .cmp-empty { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; align-items: baseline; font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3); padding-block: 2rem 3rem; }
/* The beam visualizer, compact (21:9), across the page above the columns. */
.lxg .cmp-viz { margin-bottom: 1.4rem; }
/* Five rows shared by every column (subgrid): swatch, brand with Settings and ×, graph, computed figures, published table. */
.lxg .cmp-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); grid-template-rows: repeat(5, auto); column-gap: 1rem; }
.lxg .cc { grid-row: span 5; display: grid; grid-template-rows: subgrid; row-gap: 0.8rem; min-width: 0; border: 1px solid var(--rule); padding-bottom: 0.9rem; background: var(--paper); align-content: start; }
.lxg .cc > :not(.cc-sw) { padding-inline: 0.7rem; min-width: 0; }
.lxg .cc-sw .sw { height: 120px; display: flex; align-items: flex-end; }
.lxg .cc-sw .ink { width: 100%; min-width: 0; padding: 0.5rem 0.6rem; color: var(--on); font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.06em; line-height: 1.35; }
.lxg .cc-sw .ink b { display: block; font-weight: 500; }
.lxg .cc-sw .ink i { display: block; font-style: normal; text-transform: uppercase; font-size: 0.55rem; letter-spacing: 0.08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.85; }
.lxg .cc-brand { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.lxg .cc-tools { display: flex; align-items: center; gap: 0.3rem; flex: none; }
.lxg .cc-brand > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Replace gel: opens the catalog popup to swap this column's gel; the light keeps its settings. In a narrow column
   (five or six gels) it keeps the icon only, with its title and aria-label. */
.lxg .cc { container-type: inline-size; }
@container (max-width: 15rem) { .lxg .cc-set > span { display: none; } }
.lxg .cc-set { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--rule); padding: 0.3rem 0.5rem; line-height: 1.2; }
.lxg .cc-set:hover { color: var(--ink); border-color: var(--ink-3); }
.lxg .cc-x { width: 2rem; height: 2rem; margin-right: -0.5rem; display: grid; place-items: center; font-size: 1.3rem; line-height: 1; color: var(--ink-3); flex: none; }
.lxg .cc-x:hover { color: var(--ink); }
.lxg .cc-graph svg { width: 100%; height: auto; display: block; background: var(--PureBlack); }
.lxg .cc-graph .nodata { aspect-ratio: 232 / 110; display: grid; place-items: center; padding: 0; border: 1px dashed var(--rule); }
/* Six columns are about 200 px each at desktop widths: the tables tighten to fit. */
.lxg .cc .spec { font-size: 0.64rem; }
.lxg .cc .spec th, .lxg .cc .spec td { padding-inline: 0.15rem; }
.lxg .cc .spec th { letter-spacing: 0.04em; }
.lxg .cc .spec td:first-child { white-space: normal; }
/* Only the tables scroll sideways, so the ? note above the transmission table is not clipped. */
.lxg .cc-table, .lxg .cc-pub { overflow-x: auto; }
.lxg .cc-calc h3 { align-items: center; }
/* In a column the ? note spans the column, above the heading, so it never runs off the page's left edge. */
.lxg .cc-calc { position: relative; }
.lxg .cc .pubq { position: static; }
.lxg .cc .pubnote { left: 0; right: 0; width: auto; bottom: calc(100% + 0.2rem); }
.lxg .cc .spec th:not(:first-child) { text-align: right; }

/* ------------------------------------------------------------------ phone: last, so it wins */
@media (max-width: 720px) {
  /* A full-screen sheet; the gel is the header's ground instead of a separate block. */
  .lxg .detail .box, .lxg .catalog .box { width: 100vw; height: 100dvh; max-height: none; border: 0; }
  .lxg .zoom .box { width: 100vw; border-inline: 0; padding-inline: 0.75rem; }
  /* The visualizer goes under the gel header, above the curve, inside 16 px gutters. */
  .lxg .card { grid-template-columns: 1fr; grid-template-areas: 'head' 'viz' 'graph' 'table' 'foot'; gap: 0.8rem; padding: 0 0 1rem; }
  .lxg .card .card-viz { justify-self: stretch; width: auto; padding-inline: 1rem; }
  .lxg .card .head { grid-template-columns: 1fr; padding: 1rem 1rem 0.9rem; padding-right: 3rem; background: var(--c); color: var(--on); }
  .lxg .card .head .num, .lxg .card .head .desc { color: inherit; opacity: 0.8; }
  .lxg .card .head-acts { grid-column: 1; grid-row: auto; flex-direction: row; flex-wrap: wrap; margin-top: 0.3rem; }
  .lxg .card .head-acts .btn, .lxg .card .head-acts .basket { flex: 1; }
  .lxg .card .head-acts .basket-go { flex-basis: 100%; }
  /* On the gel-colored header the box and the plain buttons take the gel's ink: the site's .btn sets the page ink,
     which a light gel in Show (or a deep one in House) would swallow. */
  .lxg .card .head .basket, .lxg .card .head .basket span::before, .lxg .card .head .btn:not(.btn-gel) { color: inherit; border-color: currentColor; }
  .lxg .card .swatch { display: none; }
  .lxg .card .graph, .lxg .card .table, .lxg .card .foot { padding-inline: 1rem; }
  .lxg .card .graph svg { max-height: none; }
  .lxg .card .mnav { display: flex; }
  .lxg .detail .x { color: var(--ink); }
  /* compare.html: the stage stays on top (its readouts and sliders scroll with the page);
     the columns become a sideways scroller, one gel per snap, and pass under the stage. */
  .lxg .cmp-master { margin-inline: calc(-1 * var(--gut)); padding: 0.6rem var(--gut) 0.7rem; gap: 0.6rem; }
  .lxg .cmp-viz.viz { display: contents; }
  .lxg .cmp-viz > * + * { margin-top: 0.75rem; }
  .lxg .cmp-viz > .viz-sliders { margin-bottom: 1.2rem; }
  .lxg .cmp-viz > .viz-stage { position: relative; z-index: 7; }
  .lxg .cmp-viz .viz-scrim.is-open { z-index: 6; } /* under the sticky stage, which holds the gear's bottom sheet */
  .lxg .cc-set { min-height: 44px; padding-inline: 0.7rem; }
  .lxg .cc-x { width: 44px; height: 44px; margin-right: -0.7rem; }
  .lxg .cmp-src { max-width: none; }
  .lxg .cmp-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78vw; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin-inline: calc(-1 * var(--gut)); padding: 0 var(--gut) 0.5rem; scroll-padding-inline: var(--gut); }
  .lxg .cc { scroll-snap-align: start; }
}
/* The stage stays on top only where the screen is tall enough to leave room under it: a phone held upright. On a short
   screen (a phone on its side, a desktop at 200 % zoom) the header and a sticky stage would fill most of it. */
@media (max-width: 720px) and (min-height: 560px) {
  .lxg .cmp-viz > .viz-stage { position: sticky; top: var(--lxg-sticky-top, 0px); } /* the site page sets the top to its header's height */
}