/* Live specimens introduced in Chrome 152–154. */
.release-demo { min-width: 0; }
.release-demo input { min-width: 0; width: 100%; }
.release-demo input[type="range"] { accent-color: var(--a2); padding: 0; }
.release-demo .field { width: 100%; }
.code-readout { display: block; margin: 0; font: 12px/1.7 var(--f-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.big-result { font: 700 clamp(24px, 4vw, 42px)/1.2 var(--f-display); color: var(--a2); overflow-wrap: anywhere; }
.sequence { display: flex; flex-wrap: wrap; gap: 8px; }
.sequence span { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font: 12px var(--f-mono); }
.alpha-stage { border-radius: 12px; padding: 16px; background: repeating-conic-gradient(var(--surface) 0% 25%, var(--line) 0% 50%) 0 / 20px 20px; }
.alpha-tile { padding: 28px; border-radius: 10px; color: var(--ink); background-color: var(--a2); font: 700 32px/1.15 var(--f-display); }
@supports (color: alpha(from red / 50%)) {
  .alpha-tile { background-color: alpha(from var(--a2) / var(--opacity, 60%)); }
}
.window-specimen { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.window-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; background: var(--line-soft); font-size: 12px; window-drag: move; }
.window-title button { window-drag: none; }
.window-specimen p { margin: 0; padding: 18px 12px; font-size: 12px; }
.reference-label { color: var(--a2); text-decoration: underline; cursor: pointer; font-weight: 600; }
.axis-scroller { width: 100%; height: 170px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; scroll-axis-lock: auto; }
.axis-scroller.is-unlocked { scroll-axis-lock: none; }
.axis-map { width: 900px; height: 450px; padding: 24px; background: repeating-linear-gradient(0deg, transparent 0 49px, var(--line) 49px 50px), repeating-linear-gradient(90deg, transparent 0 49px, var(--line) 49px 50px), linear-gradient(135deg, color-mix(in oklab, var(--a1) 24%, var(--surface)), color-mix(in oklab, var(--a3) 28%, var(--surface))); }
.axis-map span { display: inline-block; padding: 12px; border-radius: 8px; background: var(--surface); font-weight: 600; }
.marker-carousel { display: flex; gap: 12px; overflow-x: auto; width: 100%; scroll-snap-type: x mandatory; scroll-marker-group: after; scroll-marker-group: after tabs; }
.marker-carousel.is-links { scroll-marker-group: after links; }
.marker-slide { flex: 0 0 100%; min-width: 0; min-height: 130px; display: grid; place-items: center; border-radius: 10px; background: var(--slide); color: #fff; font: 700 32px var(--f-display); scroll-snap-align: start; }
.marker-carousel::scroll-marker-group { display: flex; justify-content: center; gap: 12px; }
.marker-slide::scroll-marker { content: "" / attr(data-label); width: 14px; height: 14px; border-radius: 50%; background: var(--line); border: 1px solid var(--muted); }
.marker-slide::scroll-marker:target-current { background: var(--a2); }
.marker-slide::scroll-marker:focus-visible { outline: 2px solid var(--a2); outline-offset: 3px; }
.decoration-sample { margin: 14px 0; font: 700 26px/1.9 var(--f-display); text-decoration: underline var(--a2) 3px; text-underline-offset: 7px; text-decoration-skip-ink: none; }
.skip-spaces { text-decoration-skip-spaces: all; }
.skip-spaces.is-continuous { text-decoration-skip-spaces: none; }
/* Permit long API labels and outputs to shrink with the mobile grid. */
body:is([data-version="151"], [data-version="152"], [data-version="153"], [data-version="154"]) .card { min-width: 0; }
@media (max-width: 560px) {
  body:is([data-version="151"], [data-version="152"], [data-version="153"], [data-version="154"]) .card__head { flex-wrap: wrap; }
  body:is([data-version="151"], [data-version="152"], [data-version="153"], [data-version="154"]) .hero__title {
    white-space: normal;
    font-size: 36px !important; /* Keep the shared single-line fitter from shrinking wrapped headings. */
    line-height: 1.05;
  }
}
@media (max-width: 380px) {
  body:is([data-version="151"], [data-version="152"], [data-version="153"], [data-version="154"]) .themectl__opt { padding-inline: 8px; }
}