/* showroom.css · the motion library, a section that drops into any page · owner: Lizzy East · all rights reserved */

/* Everything lives under .sr-lib (and .sr-page, the standalone shell), so the section
   can sit inside The Design Book beside the book's own styles. Type: Syne, Fraunces
   and Space Grotesk, SIL OFL 1.1, beside this file, under names of their own so they
   never meet the book's faces. "optional": a slow font never swaps in late. */
@font-face {
  font-family: "SR Syne";
  src: url("fonts/syne.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "SR Fraunces";
  src: url("fonts/fraunces-italic.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: optional;
}
@font-face {
  font-family: "SR Grotesk";
  src: url("fonts/space-grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: optional;
}

/* ------------------------------------------------------------------ tokens
   Measured (src/contrast.py; the Showroom test holds every pair):
   white on ink 19.3, grey on ink 8.4, vermilion on ink 5.5, acid on ink 16.4,
   and on each family colour its --sr-fg: ink on vermilion 5.5, white on cobalt 5.8,
   ink on acid 16.4, white on violet 5.4, ink on pink 8.2, ink on sun 12.0,
   ink on mint 11.8, ink on sky 10.1, white on raspberry 5.0, ink on tangerine 8.1,
   ink on lilac 9.6, white on forest 5.4, ink on paper 17.5, cobalt on paper 5.9.
   Every family colour is at least 3.2:1 against the ink bar, so the lit tab shows. */
.sr-lib {
  --sr-ink: #0f0f14;
  --sr-ink-2: #1b1c24;
  --sr-line: #33354a;
  --sr-grey: #a9adbd;
  --sr-white: #ffffff;
  --sr-paper: #f4f5f7;
  --sr-vermilion: #ff4122;
  --sr-cobalt: #304cff;
  --sr-acid: #cfff3e;
  --sr-violet: #7a3cff;
  --sr-pink: #ff7ad1;
  --sr-sun: #ffc42e;
  --sr-mint: #2ee6a8;
  --sr-sky: #5ac8ff;
  --sr-raspberry: #d81b60;
  --sr-tangerine: #ff8a1f;
  --sr-lilac: #c3aaff;
  --sr-forest: #0f7a50;
  --sr-magenta: #ff2fb0;
  --sr-teal: #2bd4c4;
  --sr-coral: #ff6b57;
  --sr-gold: #f2b705;
  --sr-lavender: #b8a1ff;
  --sr-peach: #ffb38a;
  --sr-ice: #bfe9ff;
  --sr-cherry: #ff3355;
  --sr-orchid: #e879f9;
  --sr-rust: #d2451e;
  --sr-focus: #cfff3e;
  --sr-display: "SR Syne", "Syne", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --sr-italic: "SR Fraunces", "Fraunces", Georgia, "Times New Roman", serif;
  --sr-sans: "SR Grotesk", "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --sr-gutter: clamp(16px, 4vw, 56px);
  --sr-max: 1440px;
  --sr-peek: 24px;
  --sr-gap: 16px;
  --sr-h: clamp(340px, calc(100svh - 330px), 620px);
  --sr-cap: 96px;
  --sr-sticky: 0px;
  position: relative;
  display: block;
  margin: 0;
  padding: clamp(64px, 9vw, 136px) 0 clamp(56px, 7vw, 104px);
  background: var(--sr-ink);
  color: var(--sr-white);
  font-family: var(--sr-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  font-variant-numeric: lining-nums;
  letter-spacing: normal;
  text-align: left;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}
.sr-lib *, .sr-lib *::before, .sr-lib *::after { box-sizing: border-box; }
.sr-lib :is(h1, h2, h3, h4, p, ul, ol, li, header, nav) {
  margin: 0;
  padding: 0;
  max-width: none;
  text-align: inherit;
  text-wrap: wrap;
  font-size: inherit;
  line-height: inherit;
}
.sr-lib :focus { outline: none; }
.sr-lib :focus-visible { outline: 3px solid var(--sr-focus); outline-offset: 3px; }
.sr-lib [hidden] { display: none; }
.sr-lib .sr-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Each family's colour, the text that reads on it, and the ring that shows on it. */
.sr-lib .sr-c-vermilion { --sr-bg: var(--sr-vermilion); --sr-fg: var(--sr-ink); }
.sr-lib .sr-c-cobalt    { --sr-bg: var(--sr-cobalt);    --sr-fg: var(--sr-white); }
.sr-lib .sr-c-acid      { --sr-bg: var(--sr-acid);      --sr-fg: var(--sr-ink); }
.sr-lib .sr-c-violet    { --sr-bg: var(--sr-violet);    --sr-fg: var(--sr-white); }
.sr-lib .sr-c-pink      { --sr-bg: var(--sr-pink);      --sr-fg: var(--sr-ink); }
.sr-lib .sr-c-sun       { --sr-bg: var(--sr-sun);       --sr-fg: var(--sr-ink); }
.sr-lib .sr-c-mint      { --sr-bg: var(--sr-mint);      --sr-fg: var(--sr-ink); }
.sr-lib .sr-c-sky       { --sr-bg: var(--sr-sky);       --sr-fg: var(--sr-ink); }
.sr-lib .sr-c-raspberry { --sr-bg: var(--sr-raspberry); --sr-fg: var(--sr-white); }
.sr-lib .sr-c-tangerine { --sr-bg: var(--sr-tangerine); --sr-fg: var(--sr-ink); }
.sr-lib .sr-c-lilac     { --sr-bg: var(--sr-lilac);     --sr-fg: var(--sr-ink); }
.sr-lib .sr-c-forest    { --sr-bg: var(--sr-forest);    --sr-fg: var(--sr-white); }
.sr-lib .sr-c-paper     { --sr-bg: var(--sr-paper);     --sr-fg: var(--sr-ink); }
.sr-lib .sr-c-magenta   { --sr-bg: var(--sr-magenta);   --sr-fg: var(--sr-ink); }
.sr-lib .sr-c-teal      { --sr-bg: var(--sr-teal);      --sr-fg: var(--sr-ink); }
.sr-lib .sr-c-coral     { --sr-bg: var(--sr-coral);     --sr-fg: var(--sr-ink); }
.sr-lib .sr-c-gold      { --sr-bg: var(--sr-gold);      --sr-fg: var(--sr-ink); }
.sr-lib .sr-c-lavender  { --sr-bg: var(--sr-lavender);  --sr-fg: var(--sr-ink); }
.sr-lib .sr-c-peach     { --sr-bg: var(--sr-peach);     --sr-fg: var(--sr-ink); }
.sr-lib .sr-c-ice       { --sr-bg: var(--sr-ice);       --sr-fg: var(--sr-ink); }
.sr-lib .sr-c-cherry    { --sr-bg: var(--sr-cherry);    --sr-fg: var(--sr-ink); }
.sr-lib .sr-c-orchid    { --sr-bg: var(--sr-orchid);    --sr-fg: var(--sr-ink); }
.sr-lib .sr-c-rust      { --sr-bg: var(--sr-rust);      --sr-fg: var(--sr-white); }

/* ------------------------------------------------------------------ the head */
.sr-lib .sr-head {
  display: grid;
  justify-items: start;
  gap: clamp(20px, 2.4vw, 32px);
  max-width: var(--sr-max);
  margin: 0 auto;
  padding: 0 var(--sr-gutter);
}
.sr-lib .sr-chapter {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 7px;
  border: 2px solid currentColor;
  font-family: var(--sr-display);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.sr-lib .sr-chapter__n { letter-spacing: 0.04em; }
.sr-lib .sr-title {
  font-family: var(--sr-display);
  font-size: clamp(36px, 12.2vw, 186px);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  text-wrap: nowrap;
}
.sr-lib .sr-title__line { display: block; white-space: nowrap; }
.sr-lib .sr-title em {
  font-family: var(--sr-italic);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.035em;
  text-transform: none;
  color: var(--sr-vermilion);
}

/* ------------------------------------------------------------------ the family tabs */
.sr-lib .sr-tabs {
  position: sticky;
  top: var(--sr-sticky);
  z-index: 5;
  margin-top: clamp(32px, 4.4vw, 60px);
  background: var(--sr-ink);
  border-block: 2px solid var(--sr-line);
}
.sr-lib .sr-tabrow {
  position: relative;
  display: flex;
  gap: 3px;
  max-width: var(--sr-max);
  margin: 0 auto;
  padding: 8px var(--sr-gutter);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-padding-inline: var(--sr-gutter);
}
.sr-lib .sr-tabrow::-webkit-scrollbar { display: none; }
.sr-lib .sr-tabrow li { flex: 0 0 auto; list-style: none; }
.sr-lib .sr-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 44px;
  padding: 0 11px;
  border-bottom: 5px solid var(--sr-bg);
  background: transparent;
  color: var(--sr-white);
  font-family: var(--sr-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
}
.sr-lib .sr-tab__n {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--sr-grey);
  translate: 0 -5px;
}
.sr-lib .sr-tab:hover { background: var(--sr-ink-2); }
.sr-lib .sr-tab[aria-current="true"] { background: var(--sr-bg); color: var(--sr-fg); }
.sr-lib .sr-tab[aria-current="true"] .sr-tab__n { color: var(--sr-fg); }
/* The ring sits on the ink bar, clear of the tab's own colour: white on ink, always. */
.sr-lib .sr-tab:focus-visible { outline: 3px solid var(--sr-white); outline-offset: 2px; }

/* ------------------------------------------------------------------ the slider
   One centre-snapped row. Slide 1 starts on the content edge; every other slide
   centres with a thin sliver of each neighbour showing. */
.sr-lib .sr-slider { position: relative; max-width: var(--sr-max); margin: 0 auto; }
.sr-lib .sr-rail {
  position: relative;
  container-type: inline-size;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-margin-top: calc(var(--sr-sticky) + 72px);
}
.sr-lib .sr-rail::-webkit-scrollbar { display: none; }
.sr-lib .sr-rail:focus-visible { outline: 3px solid var(--sr-focus); outline-offset: -3px; }
.sr-lib .sr-row {
  display: flex;
  gap: var(--sr-gap);
  width: max-content;
  margin: 0;
  padding: 20px var(--sr-gutter) 16px;
  list-style: none;
}
.sr-lib .sr-slide {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  grid-template-rows: auto var(--sr-cap);
  width: calc(100cqw - 2 * (var(--sr-gutter) + var(--sr-peek)));
  padding: 12px;
  list-style: none;
  background: var(--sr-bg);
  color: var(--sr-fg);
  scroll-snap-align: center;
  scroll-snap-stop: always;
  scroll-margin-top: calc(var(--sr-sticky) + 72px);
  --sr-focus: var(--sr-fg);
}
/* The neighbours step back: a sliver of their colour under an ink scrim, their frame
   dark until they arrive in the middle, so they read as the next pieces of work, never
   as a disabled grey slab. They are inert, so nothing in them can be reached. */
.sr-lib .sr-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--sr-ink);
  opacity: 0;
  pointer-events: none;
}
html.sr-js .sr-lib .sr-slide:not(.is-current)::after { opacity: 0.42; }
html.sr-js .sr-lib .sr-slide:not(.is-current) iframe { opacity: 0; }

.sr-lib .sr-screen {
  position: relative;
  height: var(--sr-h);
  border: 3px solid var(--sr-ink);
  background: var(--sr-ink);
  overflow: hidden;
}
.sr-lib .sr-screen iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--sr-ink);
}
/* A frame shows once the page has put its demo into embed mode, so a demo's own
   cover never flashes. Without script, every frame simply shows. */
html.sr-js .sr-lib .sr-screen:not(.is-ready) iframe { opacity: 0; }
/* On touch screens a swipe over a frame moves the slider or the page, never the demo
   inside it; the effect's name, below, opens the demo itself. */
@media (hover: none) {
  .sr-lib .sr-screen iframe { pointer-events: none; }
}

.sr-lib .sr-cap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: 0 clamp(14px, 1.6vw, 24px);
  height: var(--sr-cap);
  padding: 0 4px 2px;
  overflow: visible;
}
.sr-lib .sr-num {
  font-family: var(--sr-display);
  font-size: clamp(60px, 6.4vw, 96px);
  font-weight: 800;
  line-height: 0.74;
  letter-spacing: -0.06em;
  font-variant-numeric: lining-nums tabular-nums;
  margin-left: -0.04em;
}
.sr-lib .sr-name {
  font-family: var(--sr-display);
  font-size: clamp(20px, 2.2vw, 32px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
  padding-bottom: 1px;
}
.sr-lib .sr-name a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.16em;
}
.sr-lib .sr-name a:hover { text-decoration-thickness: 4px; }
.sr-lib .sr-out { width: 0.62em; height: 0.62em; margin-left: 0.18em; vertical-align: 0.02em; }
.sr-lib .sr-fam {
  font-family: var(--sr-italic);
  font-size: clamp(17px, 1.5vw, 22px);
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  padding-bottom: 4px;
}

/* ------------------------------------------------------------------ the controls */
.sr-lib .sr-controls {
  display: flex;
  align-items: center;
  gap: 12px 22px;
  min-height: 56px;
  margin-top: 4px;
  padding: 0 var(--sr-gutter);
}
html:not(.sr-js) .sr-lib .sr-controls { visibility: hidden; }
.sr-lib .sr-count {
  flex: 0 0 auto;
  font-family: var(--sr-display);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.sr-lib .sr-count b { font-weight: 800; }
.sr-lib .sr-count span { color: var(--sr-grey); }
/* The whole library at a glance: one cell per effect, in its family's colour. */
.sr-lib .sr-strip {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 16px;
  min-width: 0;
}
.sr-lib .sr-strip i {
  flex: 1 1 0;
  height: 6px;
  background: var(--sr-bg);
  opacity: 0.3;
}
.sr-lib .sr-strip i.is-past { opacity: 1; }
.sr-lib .sr-strip i.is-now { opacity: 1; scale: 1 2.6; }
.sr-lib .sr-buttons { flex: 0 0 auto; display: flex; gap: 10px; margin-left: auto; }
.sr-lib .sr-pause,
.sr-lib .sr-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  margin: 0;
  padding: 0 16px;
  border: 2px solid var(--sr-white);
  border-radius: 0;
  background: var(--sr-ink);
  color: var(--sr-white);
  font-family: var(--sr-display);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.sr-lib .sr-pause { width: 184px; }
.sr-lib .sr-arrow { width: 52px; padding: 0; }
.sr-lib .sr-icon { width: 22px; height: 22px; }
.sr-lib .sr-pause:hover,
.sr-lib .sr-arrow:not([aria-disabled="true"]):hover { background: var(--sr-white); color: var(--sr-ink); }
.sr-lib .sr-arrow[aria-disabled="true"] { border-color: var(--sr-line); color: var(--sr-grey); cursor: default; }
.sr-lib .sr-pause__icon { width: 13px; height: 14px; border-inline: 4px solid currentColor; }
.sr-lib .sr-pause[aria-pressed="true"] { background: var(--sr-acid); border-color: var(--sr-acid); color: var(--sr-ink); }
.sr-lib .sr-pause[aria-pressed="true"] .sr-pause__icon {
  width: 0;
  height: 0;
  border: 0;
  border-left: 12px solid currentColor;
  border-block: 7px solid transparent;
}
.sr-lib .sr-pause:disabled { cursor: default; opacity: 0.7; }

/* ------------------------------------------------------------------ the end card:
   the effects already built into the engine, as one line of type */
.sr-lib .sr-end {
  display: grid;
  gap: clamp(14px, 2vw, 26px);
  max-width: calc(var(--sr-max) - 2 * var(--sr-gutter));
  margin: clamp(48px, 7vw, 96px) var(--sr-gutter) 0;
  padding: clamp(24px, 3.6vw, 52px);
  background: var(--sr-bg);
  color: var(--sr-fg);
}
@media (min-width: 1552px) {
  .sr-lib .sr-end { margin-inline: auto; }
}
.sr-lib .sr-end__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.3em;
  font-family: var(--sr-display);
  font-size: clamp(26px, 3.2vw, 46px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}
.sr-lib .sr-end__n {
  font-size: 2.4em;
  line-height: 0.8;
  letter-spacing: -0.06em;
  font-variant-numeric: lining-nums;
}
.sr-lib .sr-end__title em {
  font-family: var(--sr-italic);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.sr-lib .sr-end__list {
  font-family: var(--sr-display);
  font-size: clamp(17px, 1.9vw, 27px);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
.sr-lib .sr-end__name { white-space: nowrap; }
@media (max-width: 760px) {
  .sr-lib .sr-end__name { white-space: normal; }
  .sr-lib .sr-slash { white-space: nowrap; }
}
.sr-lib .sr-slash { color: var(--sr-cobalt); font-weight: 400; }

/* ------------------------------------------------------------------ motion, only for those who want it */
@media (prefers-reduced-motion: no-preference) {
  .sr-lib .sr-slide::after { transition: opacity 320ms ease; }
  .sr-lib .sr-screen iframe { transition: opacity 360ms ease; }
  .sr-lib .sr-strip i { transition: opacity 200ms ease, scale 200ms ease; }
}

/* ------------------------------------------------------------------ phones */
@media (max-width: 760px) {
  .sr-lib { --sr-peek: 8px; --sr-gap: 8px; --sr-cap: 86px; --sr-h: clamp(300px, calc(100svh - 336px), 560px); }
  .sr-lib .sr-tab { height: 40px; padding: 0 12px; font-size: 14px; }
  .sr-lib .sr-tabrow { padding-block: 6px; }
  .sr-lib .sr-row { padding-top: 14px; padding-bottom: 12px; }
  .sr-lib .sr-slide { padding: 10px; }
  .sr-lib .sr-cap { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-content: end; column-gap: 14px; }
  .sr-lib .sr-num { grid-row: 1 / 3; align-self: end; font-size: 60px; }
  .sr-lib .sr-name { font-size: 20px; }
  .sr-lib .sr-fam { grid-column: 2; padding: 6px 0 2px; font-size: 17px; }
  .sr-lib .sr-controls { flex-wrap: wrap; gap: 10px; }
  .sr-lib .sr-strip { order: -1; flex-basis: 100%; }
  .sr-lib .sr-count { font-size: 18px; }
  .sr-lib .sr-buttons { gap: 6px; }
  .sr-lib .sr-pause { width: 132px; padding: 0 8px; gap: 8px; font-size: 11px; letter-spacing: 0.03em; }
  .sr-lib .sr-pause,
  .sr-lib .sr-arrow { height: 46px; }
  .sr-lib .sr-arrow { width: 46px; }
}
/* The smallest phones keep the pause as its icon; its words stay for screen readers. */
@media (max-width: 359px) {
  .sr-lib .sr-pause { width: 46px; padding: 0; }
  .sr-lib .sr-pause [data-sr-pause-label] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media print {
  .sr-lib .sr-rail { overflow: visible; }
  .sr-lib .sr-row { flex-wrap: wrap; width: auto; }
  .sr-lib .sr-tabs,
  .sr-lib .sr-controls { display: none; }
}

/* ------------------------------------------------------------------ the standalone page */
.sr-page { background: #0f0f14; scroll-padding-top: 72px; }
.sr-page body { margin: 0; background: #0f0f14; }
.sr-page .sr-foot {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 56px) 48px;
  color: #a9adbd;
  font: 400 14px/1.6 "SR Grotesk", "Helvetica Neue", Arial, sans-serif;
}
.sr-page .sr-foot p { margin: 0 0 6px; max-width: 72ch; }

/* ------------------------------------------------------------------ the dials
   Speed, distance, stagger, easing and palette, applied live to every frame. Each
   control starts disabled and dials.js enables it, so without script the row is
   simply an inert strip. */
.sr-lib .sr-dials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 22px;
  align-items: end;
  max-width: calc(var(--sr-max) - 2 * var(--sr-gutter));
  margin: 22px var(--sr-gutter) 0;
  padding: 18px 20px;
  border: 2px solid var(--sr-line);
  background: var(--sr-ink-2);
}
@media (min-width: 1552px) { .sr-lib .sr-dials { margin-inline: auto; } }
.sr-lib .sr-dial { display: grid; gap: 8px; }
.sr-lib .sr-dial > span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--sr-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sr-lib .sr-dial output { color: var(--sr-acid); font-variant-numeric: tabular-nums; }
.sr-lib .sr-dial input[type="range"] { width: 100%; height: 44px; margin: 0; accent-color: var(--sr-acid); background: transparent; }
.sr-lib .sr-dial select {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 2px solid var(--sr-line);
  border-radius: 0;
  background: var(--sr-ink);
  color: var(--sr-white);
  font: 600 14px/1 var(--sr-sans);
}
.sr-lib .sr-dials__row { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.sr-lib .sr-dials .sr-pause { width: auto; padding: 0 16px; }
.sr-lib .sr-dials button:disabled, .sr-lib .sr-dials input:disabled, .sr-lib .sr-dials select:disabled { opacity: 0.45; cursor: default; }