/* The live 4:4:4 / 4:2:2 / 4:2:0 figure (subsampling.js). Uses the site's colour tokens. */
figure.demo-sub.live { margin: 1.8rem 0; }
.sub-controls { display: flex; gap: .4rem; margin-bottom: .8rem; }
.sub-controls button { font: 500 .9rem var(--font-mono); padding: .35rem .8rem; border: 1px solid var(--rule); border-radius: var(--radius, 4px); background: transparent; color: var(--fg); cursor: pointer; }
.sub-controls button:hover { border-color: var(--accent); color: var(--accent); }
.sub-controls button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.sub-eq { display: grid; grid-template-columns: minmax(0, 8.5rem) auto minmax(0, 8.5rem) auto minmax(0, 8.5rem);
  justify-content: start; align-items: center; column-gap: .8rem; row-gap: .35rem; margin-bottom: 1rem; }
.sub-op { font: 600 1.4rem var(--font-mono); color: var(--fg); }
.sub-lab { display: block; align-self: start; font-size: .82rem; line-height: 1.3; color: var(--fg); }
.sub-lab small { color: var(--muted, var(--fg)); font-size: .74rem; }
.sub-block { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.sub-block span { aspect-ratio: 1; outline: 1px solid rgba(255,255,255,.35); outline-offset: -1px;
  display: flex; align-items: center; justify-content: center; font: 500 .72rem var(--font-mono); }
.sub-block b { position: absolute; box-sizing: border-box; border: 3px solid var(--fg); pointer-events: none; }
.sub-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: -.2rem 0 1rem; font-size: .8rem; color: var(--fg); }
.sub-swatches span { margin-right: .4rem; }
.sub-swatches i { width: 1.5rem; height: 1.5rem; border: 1px solid var(--rule); }
.sub-crop canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; border: 1px solid var(--rule); }
@media (max-width: 40rem) { .sub-eq { column-gap: .4rem; } .sub-op { font-size: 1.1rem; } .sub-block span { font-size: .56rem; } }