/* ===========================================================================
   Qlynic - Clinic Sound (ClinicSound.aspx), rounds SOUND1 to SOUND6,
   15 to 20 Oct 2026
   Laid on the design system's own sheets (qlynic.tokens, base, components),
   in the same night as the help centre, the switchboard and the time clock:
   the same lamp up to the left, now a 1960s broadcast studio.

   The page was rebuilt one section at a time, and this sheet now holds
   the whole of it: the old sheet (Content/clinic-sound.css) is no longer
   used by anything.

   .ql-snd         the page's own block, and its inks; where things are in
                   the pictures, as measured
   .ql-snd0        nothing on the site: the shelf is being restocked
   .ql-snd1        section 1, THE DECK: the words, the deck (the reels at the
                   screen's edges, the tape between them, the console in the
                   middle) and the readout under it
   .ql-snd2        section 2, THE DESK (round SOUND2): the words, the mixing
                   desk (three channels and the master for the hour), the
                   sentence under it and the three volumes
   .ql-snd3        section 3, THE SCOPE (round SOUND3): the words, the
                   waveform monitor (the screen, its two knobs and their
                   places), the sentence under it and the library
   .ql-snd4        section 4, THE RECEIVER (round SOUND4): the words, the
                   receiver (the dial and its lamp, the two pointers, the
                   two knobs and the doors' steps), the sentence under it,
                   the reader's day volume by volume and the playlist
   .ql-snd5        section 5, THE ARCHIVE (round SOUND5): the words, the
                   cabinet (its three shelves, every track a tape box on
                   its volume's, today's forward, and the plates), the
                   sentence under it, and what is free and what comes
                   with a plan
   .ql-snd6        section 6, OFF AIR (round SOUND6): the library's last
                   track on the page's hairline, the ON AIR light that
                   hangs from it, and the words

   The server writes the tape itself (ClinicSound.aspx.vb, Ribbon): one
   button per track, class .qcs1-rib__t, its bars as <i style="--v">. Those
   class names are a contract with the code-behind and with the transport,
   which reads its track list off them. They are styled here, never renamed.
   (SOUND3) It writes section 3's rows and SHOW's places too (Rows,
   VolumeButtons): .ql-snd3__row and its parts, each row's length as --len,
   and buttons carrying their place on the dial as --k of --n.
   (SOUND5) And section 5's shelves (Archive): .ql-snd5__bay, its plate,
   its row and its boxes (.ql-snd5__box, today's .is-today), each box's
   length as --w, its loudness as --h and its place as --o.
   (SOUND6) And section 6's last track (Tail): .ql-snd6__wave, its bars
   (each reading's amplitude as --v, its place as --i) and its caption,
   .ql-snd6__mark.
   =========================================================================== */

/* -- 00 . the page, its inks, and the pictures' measurements --------------- */

.ql-snd {
  position: relative;
  isolation: isolate;
  background: var(--ql-bg);

  /* the studio's materials */
  --snd-brass-hi: #f4e3b8;
  --snd-brass: #c9a35a;
  --snd-brass-lo: #6e5226;
  --snd-oxide: #4a3324;          /* tape, edge on */
  --snd-oxide-hi: #7a5638;
  --snd-oxide-lo: #24180f;
  --snd-leader: #ddd5c3;         /* leader tape, paper white */
  --snd-ivory: #efe6d2;          /* the counter's figures */
  --snd-needle: #15120f;
  --snd-lamp-rgb: 255 198 122;   /* the pilot lamp, lit */

  /* the tape's bars: resting, already played, and the one track sounding */
  --snd-bar: rgb(var(--ql-white-rgb) / .30);
  --snd-bar-hover: rgb(var(--ql-white-rgb) / .58);
  --snd-bar-past: rgb(var(--ql-white-rgb) / .15);
  --snd-live: var(--ql-accent-text);
  --snd-live-rgb: var(--ql-accent-text-rgb);

  /* THE CONSOLE, 1536 x 1024 - where things are in the picture, in percent
     of its width (x) and height (y), as measured on the final picture
     and checked again here */
  --con-ar: 1.5;                        /* 1536 / 1024                     */
  --con-line: 20.02;                    /* the tape line, y 205            */
  --con-guide: 9.017;                   /* the guides, x 138.5 and 1397.5  */
  --con-ml-x: 35.124; --con-ml-y: 55.566;  /* left meter's pivot, 539.5 569   */
  --con-mr-x: 64.681; --con-mr-y: 55.615;  /* right meter's pivot, 993.5 569.5 */
  --con-needle: 12.17;                  /* needle length, cqi (187 px)     */
  --con-a0: -46.1deg;                   /* the first tick and the last,    */
  --con-a1: 46.4deg;                    /* seen from the pivot             */
  --con-cnt-x0: 43.034; --con-cnt-y0: 65.039; --con-cnt-x1: 57.031; --con-cnt-y1: 70.996;
  --con-lamp-x: 84.961; --con-lamp-y: 68.018; --con-lamp-d: 3.418;
  --con-key-y0: 78.027; --con-key-y1: 88.37;
  --con-key1: 27.018;  --con-key2: 38.997;  --con-key3: 51.042;  --con-key4: 62.956;
  --con-key-w: 9.98;

  /* THE REEL, 1254 x 1254: the flange fills 96% of it; the hub and the
     windows as fractions of the flange's radius (601.9 px) */
  --reel-flange: .96;
  --reel-hub: .208;
  --reel-win-in: .25;
  --reel-win-out: .83;

  /* THE ROLLER, 1254 x 1254 (sent at 300): its brass ring is 80% of it */
  --roller-ring: .80;

  /* THE DESK (SOUND2), 1536 x 1024 - where things are in the picture, in
     percent of its width (x) and height (y), as measured on the final
     picture. The same numbers are the table in tools/build_s2.py, which
     prints the desk's scales from them. A knob's picture is 160 px of the
     desk's 1536, its cap 54.4 px along its travel. */
  --dk-ar: 1.5;                                  /* 1536 / 1024                */
  --dk-plate-w: 17.25; --dk-plate-y0: 20.508; --dk-plate-y1: 27.441;  /* the plates' black */
  --dk-key-w: 6.5;     --dk-key-y0: 31;       --dk-key-y1: 37.012;
  --dk-lamp-y: 15.02;  --dk-lamp-d: 3.42;     /* the lamps: centre, glass (x)  */
  --dk-trav-y0: 44.648; --dk-trav-y1: 69.394; /* a channel knob: full, off     */
  --dk-m-y: 85.986;    --dk-m-x0: 11.003;     --dk-m-x1: 88.997;  /* the master slot */
  --dk-mtrav-x0: 12.774; --dk-mtrav-x1: 87.226; /* the master knob: 7 am, 7 pm */
  --dk-now-y0: 74.2;                          /* the hour's line starts here   */
  --dk-hour-y: 81.6;                          /* the hours' names              */
  --dk-knob: 10.417;                          /* a knob's picture, of the width */
  --snd-ink: #2a2218;                    /* the desk's printing           */

  /* THE SCOPE (SOUND3), 1536 x 1024 - where things are in the picture, in
     percent of its width (x) and height (y), as measured on the final
     picture. The same numbers are the table in tools/build_s3.py, which
     draws the screen's grid from them. */
  --sc-ar: 1.5;                                  /* 1536 / 1024                */
  --sc-face-x0: 8.138;  --sc-face-y0: 15.918;  --sc-face-x1: 64.0625;  --sc-face-y1: 84.1797;
                                                 /* the dark face: 125 163 984 862 px */
  --sc-face-r: 2.865;                            /* its corners: 44 px, of the width */
  --sc-s1-x: 81.055;  --sc-s1-y: 33.984;         /* SHOW's seat, its hole: 1245 348 px */
  --sc-s2-x: 81.055;  --sc-s2-y: 70.215;         /* SORT's seat, its hole: 1245 719 px */
  --sc-ring: 11.17;                              /* a seat's brass ring, across (171.5 px) */
  --sc-knob: 11.068;                             /* the knob's picture: 170 px (its body 136) */
  --snd-phos-rgb: 233 226 207;                   /* the screen's ivory phosphor */

  /* THE RECEIVER (SOUND4), 1536 x 768 - where things are in the picture,
     in percent of its width (x) and height (y), as measured on the final
     picture. The same numbers are the table in tools/build_s4.py, which
     prints the dial from them, and so is the dial's scale. */
  --rx-ar: 2;                                            /* 1536 / 768 */
  --rx-glass-x0: 8.0078;  --rx-glass-y0: 13.0208;  --rx-glass-x1: 91.9922;  --rx-glass-y1: 48.9583;
                                                         /* the dial's glass: 123 100 1413 376 px */
  --rx-glass-r: 0.879;                                   /* its corners: 13.5 px, of the width */
  --rx-s1-x: 13.0208;  --rx-s1-y: 70.0521;               /* OPEN's seat, its centre: 200 538 px */
  --rx-s2-x: 86.9792;  --rx-s2-y: 70.0521;               /* CLOSE's seat, its centre: 1336 538 px */
  --rx-ring: 8.9844;                                     /* a seat's brass ring, across: 138 px */
  --rx-knob: 9.1146;                                     /* the knob's picture: 140 px (its body 80% of it) */
  --rx-hr0: 5;  --rx-hr1: 23;                            /* the dial: 5 am to 11 pm, */
  --rx-x0: 5;  --rx-x1: 95;                              /* from here to here across the glass, % */
  --rx-band-y: 15;  --rx-lab-y: 86.5;                    /* the names' rows, % of the glass's height */
  --rx-ptr-y0: 5;  --rx-ptr-y1: 78;                      /* the pointers' reach, the same */
  --snd-dial-rgb: 255 196 120;                           /* the dial lamp's light */
  --snd-print-rgb: 240 226 198;                          /* the dial's print */
  --snd-ptr-rgb: 226 86 58;                              /* the pointers' red */

  /* THE ARCHIVE (SOUND5), 1536 x 1024 - where things are in the picture,
     in percent of its width (x) and height (y), as measured on the final
     picture. The same numbers are the table in tools/build_s5.py. Each
     bay, down: its top, its floor (the rail's top edge), the rail's
     foot, and the foot of the walnut face under it. */
  --ar-ar: 1.5;                                          /* 1536 / 1024 */
  --ar-x0: 5.9896;  --ar-x1: 94.0104;                    /* the bays' back panels, across: 92 1444 px */
  --ar-t1: 8.0078;  --ar-f1: 29.9805;  --ar-r1: 31.4453;  --ar-e1: 37.0117;
                                                         /* the top bay: 82 307 322 379 px */
  --ar-t2: 37.0117;  --ar-f2: 58.9844;  --ar-r2: 60.4492;  --ar-e2: 66.0156;
                                                         /* the middle bay: 379 604 619 676 px */
  --ar-t3: 66.0156;  --ar-f3: 87.9883;  --ar-r3: 89.4531;  --ar-e3: 95.0195;
                                                         /* the bottom bay: 676 901 916 973 px */

  /* THE ON AIR LIGHT (SOUND6), 1536 x 1024 - where things are in the
     picture, in percent of its width (x) and height (y), as measured on
     the final picture. The same numbers are the table in
     tools/build_s6.py. The sheet cuts the picture to the box, and
     places the glass from both. */
  --oa-ar: 1.5;                                          /* 1536 / 1024 */
  --oa-x0: 5.013;  --oa-y0: 25;  --oa-x1: 94.987;  --oa-y1: 75;
                                                         /* the box: 77 256 1459 768 px */
  --oa-gx0: 11.9792;  --oa-gy0: 34.9609;  --oa-gx1: 88.0208;  --oa-gy1: 65.0391;
                                                         /* the glass: 184 358 1352 666 px */
  --oa-gr: 0.7813;                                       /* its corners: 12 px, of the width */
  --oa-box-ar: 2.6992;                                   /* the box, wide to high */
}

/* the server's screen-reader text inside each track (Ribbon writes
   <span class="qm-sr">). The old marketing kit that hid it is gone. */
.ql-snd .qm-sr {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* -- 01 . nothing on the site ---------------------------------------------- */

.ql-snd0 { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.ql-snd0__title {
  margin: var(--ql-sp-7) 0 0;
  font-size: clamp(2.2rem, 1rem + 3.4vw, 4rem);
  line-height: 1;
  font-weight: var(--ql-fw-bold);
  letter-spacing: -.04em;
  color: var(--ql-text-strong);
}
.ql-snd0__lead { margin: var(--ql-sp-7) 0 0; max-inline-size: 46ch; color: var(--ql-text-muted); }

/* -- 02 . section 1: the words --------------------------------------------- */

.ql-snd1 {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding-block: clamp(2rem, 1.1rem + 3vw, 4.25rem) clamp(2.5rem, 1.6rem + 3vw, 4.5rem);
}
/* the lamp up to the left: one warm pool on the dark, behind everything */
.ql-snd1::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 52% at 12% 0%, rgb(255 214 150 / .055), transparent 70%),
    radial-gradient(46% 40% at 50% 64%, rgb(255 214 150 / .035), transparent 72%);
}
.ql-snd1__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  row-gap: var(--ql-sp-8);
}
@media (min-width: 1024px) {
  .ql-snd1__head {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(2.5rem, 4.4vw, 5.5rem);
  }
}
.ql-snd1__words,
.ql-snd1__side { display: grid; justify-items: start; row-gap: var(--ql-sp-7); min-inline-size: 0; }
.ql-snd1__eyebrow,
.ql-snd2__eyebrow,
.ql-snd3__eyebrow,
.ql-snd4__eyebrow,
.ql-snd5__eyebrow,
.ql-snd6__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ql-sp-5);
  margin: 0;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ql-text-body);
}
:is(.ql-snd1__eyebrow, .ql-snd2__eyebrow, .ql-snd3__eyebrow, .ql-snd4__eyebrow, .ql-snd5__eyebrow, .ql-snd6__eyebrow) .ql-quad i { background: var(--q); box-shadow: 0 0 6px -1px var(--q); }
:is(.ql-snd1__eyebrow, .ql-snd2__eyebrow, .ql-snd3__eyebrow, .ql-snd4__eyebrow, .ql-snd5__eyebrow, .ql-snd6__eyebrow) .ql-quad i:nth-child(1) { --q: var(--ql-q-tl); }
:is(.ql-snd1__eyebrow, .ql-snd2__eyebrow, .ql-snd3__eyebrow, .ql-snd4__eyebrow, .ql-snd5__eyebrow, .ql-snd6__eyebrow) .ql-quad i:nth-child(2) { --q: var(--ql-q-tr); }
:is(.ql-snd1__eyebrow, .ql-snd2__eyebrow, .ql-snd3__eyebrow, .ql-snd4__eyebrow, .ql-snd5__eyebrow, .ql-snd6__eyebrow) .ql-quad i:nth-child(3) { --q: var(--ql-q-bl); }
:is(.ql-snd1__eyebrow, .ql-snd2__eyebrow, .ql-snd3__eyebrow, .ql-snd4__eyebrow, .ql-snd5__eyebrow, .ql-snd6__eyebrow) .ql-quad i:nth-child(4) { --q: var(--ql-q-br); }
.ql-snd1__title {
  margin: 0;
  max-inline-size: 15ch;
  font-size: clamp(2.3rem, 1rem + 3.3vw, 4.25rem);
  line-height: 1.02;
  font-weight: var(--ql-fw-bold);
  letter-spacing: -.042em;
  color: var(--ql-text-strong);
  text-wrap: balance;
}
.ql-snd1__lead {
  margin: 0;
  max-inline-size: 46ch;
  font-size: clamp(1rem, .93rem + .28vw, 1.2rem);
  line-height: 1.6;
  color: var(--ql-text-muted);
  text-wrap: pretty;
}
.ql-snd1__go { display: flex; flex-wrap: wrap; gap: var(--ql-sp-5); margin: 0; }
.ql-snd1__go .ql-btn { min-inline-size: 0; }
/* the play button holds both its words, so it keeps one width when it says
   Pause; only the one that applies is shown, and only it is its name */
.ql-snd1__flip { display: inline-grid; }
.ql-snd1__flip > span { grid-area: 1 / 1; text-align: center; }
.ql-snd1__flip > span + span,
.ql-snd1__flip.is-on > span:first-child { visibility: hidden; }
.ql-snd1__flip.is-on > span + span { visibility: visible; }
@media (max-width: 479px) {
  /* both on one line on a phone */
  .ql-snd1__go .ql-btn--lg { --btn-px: var(--ql-sp-7); }
}

/* -- 03 . section 1: the deck ---------------------------------------------- */

/* One coordinate system for the whole machine: the deck's own box, full
   bleed. Everything is placed from four lengths: the console's width (W) and
   height, the tape line, and the reels' diameter.

   Wide screens (1024px and up): the reels stand at the screen's edges, half
   off it, and the tape runs between them across the whole screen, over two
   rollers, through the head in the middle.
   Narrower: the classic face of a deck. The reels stand above the console
   and the tape comes down to the console's own two guides. */
.ql-snd1__deck {
  --con-w: min(94vw, 560px);
  --con-h: calc(var(--con-w) / var(--con-ar));
  --reel-d: calc(var(--con-w) * .40);
  --reel-gap: calc(var(--con-w) * .03);
  --con-top: calc(var(--reel-d) + var(--reel-gap));
  --line: calc(var(--con-top) + var(--con-h) * var(--con-line) / 100);
  --bar-max: calc(var(--con-h) * .085);
  --bar-w: 2px;
  --bar-gap: 1.5px;
  --trk-gap: 5px;
  /* the tape's window, in the deck's own width (cqi), so it means the same
     inside the window and the run as it does on the deck */
  --band-l: calc(50cqi - var(--con-w) * (50 - var(--con-guide)) / 100);
  --band-r: calc(50cqi + var(--con-w) * (50 - var(--con-guide)) / 100);
  --deck-h: calc(var(--con-top) + var(--con-h));

  position: relative;
  block-size: var(--deck-h);
  margin-block-start: clamp(2rem, 1rem + 4vw, 3.5rem);
  container-type: inline-size;
  container-name: deck;
}
@media (min-width: 720px) {
  .ql-snd1__deck { --con-w: 72vw; --bar-w: 2.5px; --bar-gap: 2px; --trk-gap: 6px; }
}
@media (min-width: 1024px) {
  .ql-snd1__deck {
    --con-w: 52vw;
    --reel-d: calc(var(--con-w) * .62);
    --reel-x: calc(var(--reel-d) * .08);           /* a reel's centre, from the screen's edge */
    --reel-dy: calc(var(--con-h) * .42);           /* and below the tape line */
    --roller-d: calc(var(--con-w) * .07);
    --roller-gap: calc(var(--con-w) * .025);
    --roller-cx: calc(var(--reel-x) + var(--reel-d) / 2 + var(--roller-gap) + var(--roller-d) / 2);
    --con-top: 0px;
    --band-l: var(--roller-cx);
    --band-r: calc(100cqi - var(--roller-cx));
    --bar-w: 3px;
    --bar-gap: 2px;
    --deck-h: max(var(--con-h), calc(var(--line) + var(--reel-dy) + var(--reel-d) / 2));
  }
}
@media (min-width: 1280px) {
  .ql-snd1__deck { --con-w: clamp(600px, 44vw, 760px); }
}

/* the console, centred, its overlays placed in its own percentages */
.ql-snd1__console {
  position: absolute;
  z-index: 3;
  inset-block-start: var(--con-top);
  inset-inline-start: 50%;
  inline-size: var(--con-w);
  aspect-ratio: 1536 / 1024;
  translate: -50% 0;
  container-type: inline-size;
}
.ql-snd1__body {
  display: block;
  inline-size: 100%;
  block-size: auto;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

/* the two needles: drawn here, pivoting where the picture's pivots are */
.ql-snd1__needle {
  --a: var(--con-a0);
  position: absolute;
  inline-size: max(1.5px, .16cqi);
  block-size: calc(var(--con-needle) * 1cqi);
  border-radius: 1px;
  background: linear-gradient(180deg, #8f2219 0 14%, var(--snd-needle) 14% 100%);
  box-shadow: .25cqi .35cqi .5cqi rgb(0 0 0 / .28);
  transform-origin: 50% 100%;
  translate: -50% -100%;
  rotate: var(--a);
  pointer-events: none;
}
.ql-snd1__needle--l { inset-inline-start: calc(var(--con-ml-x) * 1%); inset-block-start: calc(var(--con-ml-y) * 1%); }
.ql-snd1__needle--r { inset-inline-start: calc(var(--con-mr-x) * 1%); inset-block-start: calc(var(--con-mr-y) * 1%); }

/* the counter: the figures in the picture's empty window */
.ql-snd1__count {
  position: absolute;
  inset-inline-start: calc(var(--con-cnt-x0) * 1%);
  inset-inline-end: calc((100 - var(--con-cnt-x1)) * 1%);
  inset-block-start: calc(var(--con-cnt-y0) * 1%);
  inset-block-end: calc((100 - var(--con-cnt-y1)) * 1%);
  display: grid;
  place-items: center;
  font-family: var(--ql-font-mono);
  font-size: calc((var(--con-cnt-y1) - var(--con-cnt-y0)) * .4cqi);
  font-weight: var(--ql-fw-semibold);
  letter-spacing: .08em;
  line-height: 1;
  color: var(--snd-ivory);
  text-shadow: 0 0 .6cqi rgb(var(--snd-lamp-rgb) / .18);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* the pilot lamp: lit while the deck plays */
.ql-snd1__lamp {
  position: absolute;
  inset-inline-start: calc(var(--con-lamp-x) * 1%);
  inset-block-start: calc(var(--con-lamp-y) * 1%);
  inline-size: calc(var(--con-lamp-d) * 2.6cqi);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--snd-lamp-rgb) / .95) 0 16%, rgb(var(--snd-lamp-rgb) / .55) 26%, rgb(var(--snd-lamp-rgb) / .14) 44%, transparent 68%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .5s var(--ql-ease);
  pointer-events: none;
}
.ql-snd1.is-playing .ql-snd1__lamp { opacity: 1; }

/* the four keys, over the picture's four blank keys */
.ql-snd1__keys { position: absolute; inset: 0; pointer-events: none; }
.ql-snd1__key {
  --x: var(--con-key1);
  position: absolute;
  inset-inline-start: calc(var(--x) * 1%);
  inset-block-start: calc(var(--con-key-y0) * 1%);
  inline-size: calc(var(--con-key-w) * 1%);
  block-size: calc((var(--con-key-y1) - var(--con-key-y0)) * 1%);
  display: grid;
  place-items: center;
  border-radius: .7cqi;
  color: #e7dcc2;
  pointer-events: auto;
  transition: background-color .12s var(--ql-ease), box-shadow .12s var(--ql-ease), color .2s var(--ql-ease);
}
/* a thumb's worth to press, wherever the key is small */
.ql-snd1__key::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  inline-size: max(100%, var(--ql-tap-min));
  block-size: max(100%, var(--ql-tap-min));
  translate: -50% -50%;
}
.ql-snd1__key:nth-child(2) { --x: var(--con-key2); }
.ql-snd1__key:nth-child(3) { --x: var(--con-key3); }
.ql-snd1__key:nth-child(4) { --x: var(--con-key4); }
.ql-snd1__key svg {
  inline-size: 36%;
  block-size: auto;
  filter: drop-shadow(0 -.08cqi 0 rgb(0 0 0 / .65)) drop-shadow(0 .08cqi 0 rgb(255 255 255 / .12));
  transition: translate .12s var(--ql-ease), color .2s var(--ql-ease);
}
/* down: pressed, or latched like a real deck's play key */
.ql-snd1__key:active,
.ql-snd1__key[aria-pressed="true"] {
  background-color: rgb(0 0 0 / .32);
  box-shadow: inset 0 .45cqi .9cqi rgb(0 0 0 / .7), inset 0 -.1cqi 0 rgb(255 255 255 / .05);
}
.ql-snd1__key:active svg,
.ql-snd1__key[aria-pressed="true"] svg { translate: 0 .18cqi; }
.ql-snd1__key[aria-pressed="true"] { color: var(--snd-live); }
.ql-snd1__key[aria-pressed="true"] svg { filter: drop-shadow(0 0 .6cqi rgb(var(--snd-live-rgb) / .55)); }
.ql-snd1__key:focus-visible { outline: none; box-shadow: var(--ql-ring); }
@media (hover: hover) and (pointer: fine) {
  .ql-snd1__key:hover:not([aria-pressed="true"]) { color: #fff7e3; }
}

/* -- 04 . the reels -------------------------------------------------------- */

.ql-snd1__reel {
  --pk: .5;                       /* the tape pack's radius, of the flange's */
  position: absolute;
  z-index: 1;
  inline-size: var(--reel-d);
  aspect-ratio: 1;
  inset-block-start: 0;
  pointer-events: none;
}
.ql-snd1__reel--take { inset-inline-start: calc(50% - var(--con-w) * .25 - var(--reel-d) / 2); }
.ql-snd1__reel--feed { inset-inline-start: calc(50% + var(--con-w) * .25 - var(--reel-d) / 2); }
@media (min-width: 1024px) {
  .ql-snd1__reel { inset-block-start: calc(var(--line) + var(--reel-dy) - var(--reel-d) / 2); }
  .ql-snd1__reel--take { inset-inline-start: calc(var(--reel-x) - var(--reel-d) / 2); }
  .ql-snd1__reel--feed { inset-inline-start: calc(100% - var(--reel-x) - var(--reel-d) / 2); }
}
/* the back flange, seen through the windows past the tape */
.ql-snd1__reel::before {
  content: "";
  position: absolute;
  inset: calc((1 - var(--reel-flange)) * 50%);
  border-radius: 50%;
  background: radial-gradient(circle, #15120e 0 40%, #0e0c0a 72%, #1b1712 92%, #0b0a08 100%);
  box-shadow: 0 1.2cqi 3cqi -1cqi rgb(0 0 0 / .8);
}
/* the tape wound on it: oxide, its turns catching the lamp a little */
.ql-snd1__pack {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  inline-size: calc(var(--pk) * var(--reel-flange) * 100%);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgb(255 220 170 / .14), transparent 46%),
    repeating-radial-gradient(circle, var(--snd-oxide) 0 1.1px, #3c291d 1.1px 2.2px),
    var(--snd-oxide);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .45);
}
.ql-snd1__flange {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  will-change: transform;
}
/* the lamp's sheen stays where the lamp is while the reel turns under it */
.ql-snd1__sheen {
  position: absolute;
  inset: calc((1 - var(--reel-flange)) * 50%);
  border-radius: 50%;
  background:
    radial-gradient(70% 60% at 30% 22%, rgb(255 236 200 / .16), transparent 62%),
    radial-gradient(90% 90% at 70% 82%, rgb(0 0 0 / .32), transparent 60%);
  mix-blend-mode: soft-light;
}

/* the two rollers the tape turns over on its way to each reel (wide only) */
.ql-snd1__roller {
  display: none;
  position: absolute;
  z-index: 2;
  inline-size: var(--roller-d);
  block-size: var(--roller-d);
  /* the ring's top, not the picture's, sits on the tape line */
  inset-block-start: calc(var(--line) - var(--roller-d) * (1 - var(--roller-ring)) / 2);
  translate: -50% 0;
  pointer-events: none;
}
@media (min-width: 1024px) {
  .ql-snd1__roller { display: block; }
  .ql-snd1__roller--take { inset-inline-start: var(--roller-cx); }
  .ql-snd1__roller--feed { inset-inline-start: calc(100% - var(--roller-cx)); }
}

/* the tape between a reel and its roller (or guide), drawn by script */
.ql-snd1__wrap {
  position: absolute;
  inset: 0;
  z-index: 5;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
  pointer-events: none;
}
/* inside a reel the tape runs between its flanges: drawn under the front
   flange, so it shows only through the windows */
.ql-snd1__inwrap {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
  pointer-events: none;
}
.ql-snd1__wrap path,
.ql-snd1__inwrap path { fill: none; stroke: var(--snd-oxide-hi); stroke-width: 2; stroke-linecap: round; }
.ql-snd1__wrap path.is-leader,
.ql-snd1__inwrap path.is-leader { stroke: var(--snd-leader); }

/* -- 05 . the tape ----------------------------------------------------------- */

/* the window the tape is seen through: from roller to roller (or guide to
   guide), so the tape stops where it turns toward a reel */
.ql-snd1__tape {
  position: absolute;
  z-index: 4;
  inset-inline: 0;
  inset-block-start: calc(var(--line) - var(--bar-max) / 2 - 3px);
  block-size: calc(var(--bar-max) + 6px);
}
.ql-snd1__win {
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--band-l);
  inset-inline-end: calc(100cqi - var(--band-r));
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6px, #000 calc(100% - 6px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6px, #000 calc(100% - 6px), transparent);
}
/* the run: the whole tape, its start at the head until the script moves it.
   Its background is the tape itself, a fine line, edge on. */
.ql-snd1__run {
  --lead: 64vw;
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(50cqi - var(--band-l));
  display: flex;
  align-items: center;
  inline-size: max-content;
  transform: translateX(calc((var(--lead) + var(--trk-gap)) * -1));
  background: linear-gradient(var(--snd-oxide-hi), var(--snd-oxide)) 0 50% / 100% 2px no-repeat;
  will-change: transform;
}
.ql-snd1__leader {
  flex: none;
  inline-size: var(--lead);
  block-size: 2px;
  background: var(--snd-leader);
  opacity: .72;
}
.ql-snd1__leader--head { margin-inline-end: var(--trk-gap); }
.ql-snd1__leader--tail { margin-inline-start: var(--trk-gap); }

/* one track: its bars, mirrored about the tape. Every property the old
   ribbon's rules set on these buttons is set again here, so nothing of the
   old stylesheet reaches them. */
.ql-snd1 .qcs1-rib__t {
  position: relative;
  flex: none;
  min-inline-size: 0;
  display: flex;
  align-items: center;
  gap: var(--bar-gap);
  block-size: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: none;
  box-shadow: none;
  filter: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.ql-snd1 .qcs1-rib__t + .qcs1-rib__t { margin-inline-start: var(--trk-gap); box-shadow: none; }
.ql-snd1 .qcs1-rib__t i {
  flex: none;
  min-inline-size: 0;
  inline-size: var(--bar-w);
  block-size: max(1px, calc(var(--v) * var(--bar-max)));
  min-block-size: 1px;
  border-radius: 1px;
  background: var(--snd-bar);
  transition: background-color .25s var(--ql-ease);
  animation: none;
}
@media (hover: hover) and (pointer: fine) {
  .ql-snd1 .qcs1-rib__t:hover i { background: var(--snd-bar-hover); }
}
.ql-snd1 .qcs1-rib__t:focus-visible { outline: none; box-shadow: var(--ql-ring); }
.ql-snd1 .qcs1-rib__t:focus-visible i { background: var(--snd-bar-hover); }
.ql-snd1 .qcs1-rib__t.is-past i { background: var(--snd-bar-past); }
.ql-snd1 .qcs1-rib__t.qcs-cued i { background: rgb(var(--snd-live-rgb) / .55); }
.ql-snd1 .qcs1-rib__t.qcs-on i { background: var(--snd-live); box-shadow: 0 0 6px rgb(var(--snd-live-rgb) / .45); }

/* where a volume begins: a splice of leader, the volume's name on it */
.ql-snd1 .qcs1-rib__t--head { padding-inline-start: calc(var(--trk-gap) + 26px); }
.ql-snd1 .qcs1-rib__t--head::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 0;
  inline-size: 26px;
  block-size: 3px;
  translate: 0 -50%;
  border-radius: 1px;
  background: var(--snd-leader);
  pointer-events: none;
}
.ql-snd1 .qcs1-rib__t--head::after {
  content: attr(data-vol);
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: calc(50% + 4px);
  font-family: var(--ql-font-mono);
  font-size: 9px;
  font-weight: var(--ql-fw-medium);
  letter-spacing: .14em;
  line-height: 1;
  color: var(--ql-text-subtle);
  white-space: nowrap;
  pointer-events: none;
}

/* the head's reading point: the only place the tape is read */
.ql-snd1__read {
  position: absolute;
  inset-block: -4px;
  inset-inline-start: 50%;
  inline-size: 1px;
  translate: -50% 0;
  background: rgb(var(--ql-white-rgb) / .22);
  pointer-events: none;
  transition: background-color .3s var(--ql-ease), box-shadow .3s var(--ql-ease);
}
.ql-snd1.is-playing .ql-snd1__read {
  background: var(--snd-live);
  box-shadow: 0 0 10px 1px rgb(var(--snd-live-rgb) / .55);
}

/* -- 06 . the readout -------------------------------------------------------- */

.ql-snd1__foot { display: grid; row-gap: var(--ql-sp-6); margin-block-start: clamp(1.25rem, .8rem + 1.6vw, 2rem); }
.ql-snd1__now {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--ql-sp-2) var(--ql-sp-7);
  margin: 0;
  min-block-size: 1.6em;
  text-align: center;
}
.ql-snd1__now-t { display: inline-flex; align-items: center; gap: var(--ql-sp-4); min-inline-size: 0; }
.ql-snd1__dot {
  flex: none;
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--ql-ink-600);
  transition: background-color .3s var(--ql-ease), box-shadow .3s var(--ql-ease);
}
.ql-snd1.is-playing .ql-snd1__dot { background: var(--snd-live); box-shadow: 0 0 0 4px rgb(var(--snd-live-rgb) / .16); }
.ql-snd1__now b {
  font-size: var(--ql-fs-lg);
  font-weight: var(--ql-fw-semibold);
  letter-spacing: var(--ql-tr-lead);
  color: var(--ql-text-strong);
}
.ql-snd1__now-v,
.ql-snd1__now-time {
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-2xs);
  letter-spacing: .06em;
  color: var(--ql-text-muted);
}
.ql-snd1__now-time em { font-style: normal; color: var(--ql-text-body); }
.ql-snd1__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ql-sp-3) var(--ql-sp-9);
  margin: 0;
  padding-block-start: var(--ql-sp-6);
  border-block-start: 1px solid var(--ql-line);
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1.5;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ql-text-subtle);
}
.ql-snd1__facts b { font-weight: var(--ql-fw-semibold); color: var(--ql-text-body); }
/* on a phone the readout reads down the left, a line each */
@media (max-width: 719px) {
  .ql-snd1__now, .ql-snd1__facts, .ql-snd1__vols { justify-content: flex-start; text-align: start; }
  .ql-snd1__facts { flex-direction: column; row-gap: var(--ql-sp-3); letter-spacing: .12em; }
}
/* the three volumes, as the tape box's label: numeral, name, how many */
.ql-snd1__vols {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ql-sp-2) var(--ql-sp-8);
  margin: 0;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ql-text-subtle);
}
.ql-snd1__vols span { display: inline-flex; align-items: baseline; gap: var(--ql-sp-3); }
.ql-snd1__vols b { font-weight: var(--ql-fw-semibold); color: var(--ql-text-body); }
.ql-snd1__vols em { font-style: normal; color: var(--ql-text-muted); }

/* -- 07 . the arrival -------------------------------------------------------- */

.ql-snd-arm .ql-snd-rise { animation: ql-snd-rise .8s var(--ql-ease-out) both; }
.ql-snd-arm .ql-snd1__words .ql-snd-rise:nth-child(2) { animation-delay: 70ms; }
.ql-snd-arm .ql-snd1__side .ql-snd-rise:nth-child(1) { animation-delay: 150ms; }
.ql-snd-arm .ql-snd1__side .ql-snd-rise:nth-child(2) { animation-delay: 220ms; }
.ql-snd-arm .ql-snd1__console { animation: ql-snd-lay 1s var(--ql-ease-out) .2s both; }
.ql-snd-arm .ql-snd1__reel,
.ql-snd-arm .ql-snd1__roller { animation: ql-snd-lay 1.1s var(--ql-ease-out) .3s both; }
.ql-snd-arm .ql-snd1__tape { animation: ql-snd-thread 1.2s var(--ql-ease-out) .55s both; }
.ql-snd-arm .ql-snd1__wrap { animation: ql-snd-fade .8s var(--ql-ease-out) 1.1s both; }
.ql-snd-arm .ql-snd1__foot { animation: ql-snd-rise .8s var(--ql-ease-out) .5s both; }
@media (min-width: 1024px) {
  .ql-snd-arm .ql-snd1__reel--take,
  .ql-snd-arm .ql-snd1__roller--take { animation-name: ql-snd-in-l; }
  .ql-snd-arm .ql-snd1__reel--feed,
  .ql-snd-arm .ql-snd1__roller--feed { animation-name: ql-snd-in-r; }
}
@keyframes ql-snd-rise { from { opacity: 0; translate: 0 14px; } to { opacity: 1; } }
@keyframes ql-snd-lay { from { opacity: 0; translate: 0 22px; } to { opacity: 1; } }
@keyframes ql-snd-in-l { from { opacity: 0; transform: translateX(-18%); } to { opacity: 1; transform: none; } }
@keyframes ql-snd-in-r { from { opacity: 0; transform: translateX(18%); } to { opacity: 1; transform: none; } }
@keyframes ql-snd-fade { from { opacity: 0; } to { opacity: 1; } }
/* the tape threads out from the head to both rollers */
@keyframes ql-snd-thread { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }
/* the console keeps its own translate (centring), so its arrival moves it
   with transform instead */
.ql-snd-arm .ql-snd1__console { animation-name: ql-snd-lay-c; }
@keyframes ql-snd-lay-c { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* -- 08 . motion off, colours forced, paper ---------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ql-snd-arm .ql-snd-rise, .ql-snd-arm .ql-snd1__console, .ql-snd-arm .ql-snd1__reel, .ql-snd-arm .ql-snd1__roller,
  .ql-snd-arm .ql-snd1__tape, .ql-snd-arm .ql-snd1__wrap, .ql-snd-arm .ql-snd1__foot { animation: none !important; }
  .ql-snd1__lamp, .ql-snd1__read, .ql-snd1__dot, .ql-snd1__key, .ql-snd1__key svg, .ql-snd1 .qcs1-rib__t i { transition: none; }
}
@media (forced-colors: active) {
  .ql-snd1__reel, .ql-snd1__roller, .ql-snd1__wrap, .ql-snd1__lamp, .ql-snd1__needle, .ql-snd1__leader { display: none; }
  .ql-snd1__body { opacity: .35; }
  .ql-snd1 .qcs1-rib__t i { forced-color-adjust: none; background: CanvasText; }
  .ql-snd1 .qcs1-rib__t.qcs-on i, .ql-snd1 .qcs1-rib__t.qcs-cued i { background: Highlight; }
  .ql-snd1__key { border: 1px solid ButtonText; color: ButtonText; }
  .ql-snd1__key[aria-pressed="true"] { background: Highlight; color: HighlightText; }
  .ql-snd1__count { color: CanvasText; }
}
@media print {
  .ql-snd1__deck, .ql-snd1__go { display: none !important; }
  .ql-snd, .ql-snd1 { background: #fff; color: #000; }
}

/* ===========================================================================
   SECTION 2 . THE DESK (round SOUND2)
   The studio's mixing desk, from above: three channels and a red master
   for the hour of the day. The pictures are the face with every knob taken
   off, one channel knob and the master; the ink on the face, the knobs'
   places, the lamps' light and the room's light are drawn here.

   One coordinate system: the desk's own box (container "desk"), so 1cqi is
   1% of its width; heights are its percentages over --dk-ar.
   =========================================================================== */

/* -- 09 . section 2: the room and the words ------------------------------- */

.ql-snd2 {
  /* the room's light, set by the script from the master's hour: a colour
     and how much of it. Without script, midday. */
  --room: 255 244 228;
  --room-k: 1;
  /* the desk's width; the sentence and the volumes under it share it */
  --dk-w: min(94vw, 560px);
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding-block: clamp(3rem, 2rem + 4vw, 6rem);
}
@media (min-width: 720px) { .ql-snd2 { --dk-w: 84vw; } }
@media (min-width: 1024px) { .ql-snd2 { --dk-w: clamp(760px, 66vw, 1000px); } }
/* the room: one pool of its light under the desk, and a hairline where the
   deck's room ends */
.ql-snd2::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 48% at 50% 56%, rgb(var(--room) / calc(.09 * var(--room-k))), transparent 74%),
    linear-gradient(90deg, transparent, var(--ql-line) 18%, var(--ql-line) 82%, transparent) top / 100% 1px no-repeat;
}
.ql-snd2__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  row-gap: var(--ql-sp-7);
}
@media (min-width: 1024px) {
  .ql-snd2__head {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(2.5rem, 4.4vw, 5.5rem);
  }
}
.ql-snd2__words { display: grid; justify-items: start; row-gap: var(--ql-sp-7); min-inline-size: 0; }
.ql-snd2__title {
  margin: 0;
  max-inline-size: 17ch;
  font-size: var(--ql-fs-d2);
  line-height: 1.05;
  font-weight: var(--ql-fw-bold);
  letter-spacing: -.036em;
  color: var(--ql-text-strong);
  text-wrap: balance;
}
.ql-snd2__lead {
  margin: 0;
  max-inline-size: 46ch;
  font-size: clamp(1rem, .93rem + .28vw, 1.2rem);
  line-height: 1.6;
  color: var(--ql-text-muted);
  text-wrap: pretty;
}

/* -- 10 . section 2: the desk -------------------------------------------- */

.ql-snd2__stage {
  display: grid;
  justify-items: center;
  margin-block-start: clamp(2.25rem, 1.25rem + 4vw, 4rem);
}
.ql-snd2__desk {
  --mx: 50;                     /* the master's place, % of the width */
  position: relative;
  inline-size: var(--dk-w);
  aspect-ratio: 1536 / 1024;
  container-type: inline-size;
  container-name: desk;
  isolation: isolate;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.ql-snd2__body {
  display: block;
  inline-size: 100%;
  block-size: auto;
  pointer-events: none;
}

/* the ink on the face: the scales, the programme, the hours */
.ql-snd2__print {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
  pointer-events: none;
}
.ql-snd2__ink { fill: none; stroke: var(--snd-ink); stroke-width: 1.7; opacity: .78; }
.ql-snd2__ink--maj { stroke-width: 2.6; }
.ql-snd2__ink--hr { stroke-width: 2.2; }
/* each volume's hours, a line along the master's scale; the one the master
   stands in, darker */
.ql-snd2__span {
  stroke: var(--snd-ink);
  stroke-width: 6;
  opacity: .3;
  transition: opacity .35s var(--ql-ease);
}
.ql-snd2__span.is-rec { opacity: .86; }
.ql-snd2__spanl {
  fill: var(--snd-ink);
  font-family: var(--ql-font-mono);
  font-size: 19px;
  font-weight: var(--ql-fw-semibold);
  letter-spacing: .04em;
  text-anchor: end;
  dominant-baseline: central;
  opacity: .8;
}

/* the label plates: the channel's name and hours, white on black */
.ql-snd2__plate {
  position: absolute;
  inset-inline-start: calc((var(--cx) - var(--dk-plate-w) / 2) * 1%);
  inline-size: calc(var(--dk-plate-w) * 1%);
  inset-block-start: calc(var(--dk-plate-y0) * 1%);
  block-size: calc((var(--dk-plate-y1) - var(--dk-plate-y0)) * 1%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55cqi;
  font-family: var(--ql-font-mono);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--snd-ivory);
  opacity: .46;
  transition: opacity .4s var(--ql-ease);
  pointer-events: none;
}
.ql-snd2__plate > span { font-size: 1.5cqi; font-weight: var(--ql-fw-semibold); letter-spacing: .16em; }
.ql-snd2__plate b { font-weight: var(--ql-fw-semibold); color: var(--snd-brass-hi); }
.ql-snd2__plate em { font-style: normal; font-size: 1.15cqi; letter-spacing: .1em; opacity: .8; }
/* up: the channel's fader is open at this hour */
.ql-snd2__plate.is-up { opacity: 1; text-shadow: 0 0 1.2cqi rgb(var(--snd-lamp-rgb) / .22); }

/* the hours' names, over the master's slot */
.ql-snd2__hours { position: absolute; inset: 0; pointer-events: none; }
.ql-snd2__hours > span {
  position: absolute;
  inset-inline-start: calc(var(--x) * 1%);
  inset-block-start: calc(var(--dk-hour-y) * 1%);
  translate: -50% -50%;
  font-family: var(--ql-font-mono);
  font-size: 1.3cqi;
  font-weight: var(--ql-fw-semibold);
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--snd-ink);
  opacity: .82;
}

/* the hour the master stands at, a hairline up through the programme */
.ql-snd2__now {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc(var(--dk-now-y0) * 1%);
  block-size: calc((var(--dk-m-y) - var(--dk-now-y0)) * 1%);
  inline-size: max(1px, .14cqi);
  translate: calc(var(--mx) * 1cqi - 50%) 0;
  background: var(--snd-ink);
  opacity: .62;
  pointer-events: none;
}

/* the knobs: a channel's rides its slot by its level (1 full, 0 off); the
   master rides its slot by the hour */
.ql-snd2__fader,
.ql-snd2__mknob {
  position: absolute;
  inset: 0 auto auto 0;
  inline-size: calc(var(--dk-knob) * 1cqi);
  block-size: calc(var(--dk-knob) * 1cqi);
  pointer-events: none;
}
.ql-snd2__fader {
  --lv: 0;
  translate: calc(var(--cx) * 1cqi - 50%)
             calc((var(--dk-trav-y1) - var(--lv) * (var(--dk-trav-y1) - var(--dk-trav-y0))) * 1cqi / var(--dk-ar) - 50%);
}
.ql-snd2__fader img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
/* the lamp is up to the left: each knob's shadow falls to the lower right */
.ql-snd2__fader img,
.ql-snd2__mknob { filter: drop-shadow(.32cqi .5cqi .45cqi rgb(28 18 6 / .5)); }
.ql-snd2__mknob {
  display: block;
  translate: calc(var(--mx) * 1cqi - 50%) calc(var(--dk-m-y) * 1cqi / var(--dk-ar) - 50%);
}

/* the room's light on the desk: multiplied over the picture, inside its
   outline only (the picture's own alpha is the mask) */
.ql-snd2__tint {
  position: absolute;
  inset: 0;
  background: rgb(var(--room));
  mix-blend-mode: multiply;
  opacity: calc(.16 + (1 - var(--room-k)) * .5);
  -webkit-mask: url("../Images/sound/desk-768.webp?v=1") center / 100% 100% no-repeat;
  mask: url("../Images/sound/desk-768.webp?v=1") center / 100% 100% no-repeat;
  pointer-events: none;
}

/* the lamps: lit while their volume is sounding, from wherever it began */
.ql-snd2__lamp {
  position: absolute;
  inset-inline-start: calc(var(--cx) * 1%);
  inset-block-start: calc(var(--dk-lamp-y) * 1%);
  inline-size: calc(var(--dk-lamp-d) * 3cqi);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgb(236 246 255) 0 13%,
    rgb(var(--snd-live-rgb) / .92) 23%,
    rgb(var(--snd-live-rgb) / .42) 33%,
    rgb(var(--snd-live-rgb) / .12) 50%,
    transparent 70%);
  opacity: 0;
  transition: opacity .45s var(--ql-ease);
  pointer-events: none;
}
.ql-snd2__lamp.is-on { opacity: 1; }

/* the keys, over the picture's three blank keys: each plays its volume */
.ql-snd2__keys { position: absolute; inset: 0; pointer-events: none; }
.ql-snd2__key {
  position: absolute;
  inset-inline-start: calc((var(--cx) - var(--dk-key-w) / 2) * 1%);
  inline-size: calc(var(--dk-key-w) * 1%);
  inset-block-start: calc(var(--dk-key-y0) * 1%);
  block-size: calc((var(--dk-key-y1) - var(--dk-key-y0)) * 1%);
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: .7cqi;
  background: transparent;
  color: #e7dcc2;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .12s var(--ql-ease), box-shadow .12s var(--ql-ease), color .2s var(--ql-ease);
}
.ql-snd2__key::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  inline-size: max(100%, var(--ql-tap-min));
  block-size: max(100%, var(--ql-tap-min));
  translate: -50% -50%;
}
.ql-snd2__ico {
  grid-area: 1 / 1;
  inline-size: 38%;
  block-size: auto;
  filter: drop-shadow(0 -.08cqi 0 rgb(0 0 0 / .65)) drop-shadow(0 .08cqi 0 rgb(255 255 255 / .12));
  transition: translate .12s var(--ql-ease);
}
.ql-snd2__ico--pause,
.ql-snd2__key[aria-pressed="true"] .ql-snd2__ico--play { visibility: hidden; }
.ql-snd2__key[aria-pressed="true"] .ql-snd2__ico--pause { visibility: visible; }
.ql-snd2__key:active,
.ql-snd2__key[aria-pressed="true"] {
  background-color: rgb(0 0 0 / .32);
  box-shadow: inset 0 .45cqi .9cqi rgb(0 0 0 / .7), inset 0 -.1cqi 0 rgb(255 255 255 / .05);
}
.ql-snd2__key:active .ql-snd2__ico,
.ql-snd2__key[aria-pressed="true"] .ql-snd2__ico { translate: 0 .18cqi; }
.ql-snd2__key[aria-pressed="true"] { color: var(--snd-live); }
.ql-snd2__key[aria-pressed="true"] .ql-snd2__ico { filter: drop-shadow(0 0 .6cqi rgb(var(--snd-live-rgb) / .55)); }
.ql-snd2__key:disabled { cursor: default; color: rgb(231 220 194 / .3); }
.ql-snd2__key:focus-visible { outline: none; box-shadow: var(--ql-ring); }
@media (hover: hover) and (pointer: fine) {
  .ql-snd2__key:not(:disabled):hover:not([aria-pressed="true"]) { color: #fff7e3; }
}

/* the master's slot: press anywhere along it, or take the knob and slide it.
   Up and down are left to the page, so a thumb scrolling past never moves
   the hour; across is the master's. */
.ql-snd2__track {
  position: absolute;
  inset-inline-start: calc(var(--dk-m-x0) * 1%);
  inline-size: calc((var(--dk-m-x1) - var(--dk-m-x0)) * 1%);
  inset-block-start: calc((var(--dk-m-y) - 4.5) * 1%);
  block-size: 9%;
  cursor: pointer;
  touch-action: pan-y;
}
/* the knob's handle: the slider itself, over the knob's picture */
.ql-snd2__hand {
  position: absolute;
  inset: 50% auto auto 0;
  inline-size: max(var(--ql-tap-min), 5.2cqi);
  block-size: max(var(--ql-tap-min), 5.2cqi);
  translate: calc((var(--mx) - var(--dk-m-x0)) * 1cqi - 50%) -50%;
  border-radius: 1.2cqi;
  cursor: grab;
  touch-action: none;
}
.ql-snd2__hand:focus-visible { outline: none; box-shadow: var(--ql-ring); }
.ql-snd2__desk.is-dragging,
.ql-snd2__desk.is-dragging .ql-snd2__track,
.ql-snd2__desk.is-dragging .ql-snd2__hand { cursor: grabbing; }
/* the hour, over the knob, while it is held or has the keyboard */
.ql-snd2__bubble {
  position: absolute;
  inset: auto auto calc(100% + 4px) 50%;
  translate: -50% 0;
  padding: 5px 9px;
  border-radius: 4px;
  background: rgb(12 10 8 / .92);
  box-shadow: var(--ql-lift-2);
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-2xs);
  font-weight: var(--ql-fw-semibold);
  line-height: 1;
  letter-spacing: .06em;
  white-space: nowrap;
  color: var(--ql-text-strong);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity .2s var(--ql-ease);
  pointer-events: none;
}
.ql-snd2__hand:focus-visible .ql-snd2__bubble,
.ql-snd2__desk.is-dragging .ql-snd2__bubble { opacity: 1; }

/* a small desk prints less: the programme lines go (the plates and the
   volumes below say the same), and the hours' names grow into their room */
@container desk (max-width: 759px) {
  .ql-snd2__span, .ql-snd2__spanl { display: none; }
  .ql-snd2__hours > span { inset-block-start: 79.5%; font-size: 2.3cqi; }
  .ql-snd2__hours > .is-minor { display: none; }
  .ql-snd2__now { inset-block-start: 82%; block-size: 4%; }
  .ql-snd2__plate > span { font-size: 2.3cqi; letter-spacing: .1em; }
  .ql-snd2__plate em { display: none; }
}

/* -- 11 . section 2: the sentence and the volumes ------------------------- */

.ql-snd2__foot {
  display: grid;
  justify-items: center;
  row-gap: var(--ql-sp-7);
  inline-size: min(var(--dk-w), 100% - 2 * var(--ql-sp-6));
  margin: clamp(1.5rem, 1rem + 1.6vw, 2.25rem) auto 0;
  text-align: center;
}
.ql-snd2__say {
  margin: 0;
  max-inline-size: 36ch;
  font-size: clamp(1.15rem, .95rem + .8vw, 1.6rem);
  line-height: 1.35;
  letter-spacing: var(--ql-tr-lead);
  color: var(--ql-text-body);
  text-wrap: balance;
}
.ql-snd2__say b {
  font-family: var(--ql-font-mono);
  font-size: .9em;
  font-weight: var(--ql-fw-semibold);
  letter-spacing: 0;
  color: var(--ql-text-strong);
  font-variant-numeric: tabular-nums;
}
.ql-snd2__say strong { font-weight: var(--ql-fw-bold); color: var(--ql-text-strong); }
.ql-snd2__go { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ql-sp-5); margin: 0; }
.ql-snd2__go:not(:has(> button:not([hidden]))) { display: none; }
/* the button holds both its words, as section 1's does */
.ql-snd2__put { display: inline-grid; }
.ql-snd2__put[hidden] { display: none; }
.ql-snd2__put > span { grid-area: 1 / 1; text-align: center; }
.ql-snd2__put > span + span,
.ql-snd2__put.is-on > span:first-child { visibility: hidden; }
.ql-snd2__put.is-on > span + span { visibility: visible; }

.ql-snd2__vols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--ql-sp-9);
  inline-size: 100%;
  margin: var(--ql-sp-5) 0 0;
  padding: 0;
  list-style: none;
  text-align: start;
}
/* wide: one under each channel, its middle under the channel's (the kit's
   reset for a list with a class is ol[class], which outranks one class) */
@media (min-width: 1024px) {
  .ql-snd2 .ql-snd2__vols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: calc(var(--dk-w) * .03);
    padding-inline: calc(var(--dk-w) * .05);
  }
}
.ql-snd2__vol {
  display: flex;
  flex-direction: column;
  gap: var(--ql-sp-4);
  min-inline-size: 0;
  padding-block-start: var(--ql-sp-6);
  border-block-start: 1px solid var(--ql-line);
  transition: border-color .35s var(--ql-ease);
}
.ql-snd2__vol-top {
  order: -1;
  display: flex;
  align-items: center;
  gap: var(--ql-sp-5);
  margin: 0;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ql-text-subtle);
}
.ql-snd2__vol-n { font-weight: var(--ql-fw-semibold); color: var(--ql-text-body); transition: color .3s var(--ql-ease); }
.ql-snd2__vol-hours { white-space: nowrap; }
.ql-snd2__vol-now {
  margin-inline-start: auto;
  padding: 4px 8px;
  border: 1px solid var(--ql-line-strong);
  border-radius: 999px;
  letter-spacing: .12em;
  color: var(--ql-text-body);
}
.ql-snd2__vol-now[hidden] { display: none; }
.ql-snd2__vol-name {
  margin: 0;
  font-size: var(--ql-fs-xl);
  font-weight: var(--ql-fw-bold);
  line-height: 1.15;
  letter-spacing: var(--ql-tr-head);
  color: var(--ql-text-strong);
}
.ql-snd2__vol-p {
  margin: 0;
  font-size: var(--ql-fs-sm);
  line-height: 1.6;
  color: var(--ql-text-muted);
  text-wrap: pretty;
}
.ql-snd2__vol-specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ql-sp-2) var(--ql-sp-6);
  margin: var(--ql-sp-2) 0 0;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  line-height: 1.5;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ql-text-subtle);
}
.ql-snd2__vol-specs:empty { display: none; }
.ql-snd2__vol-specs b { font-weight: var(--ql-fw-semibold); color: var(--ql-text-body); }
/* the one the master stands in; and the one sounding, blue as the deck's */
.ql-snd2__vol.is-now { border-block-start-color: var(--ql-line-strong); }
.ql-snd2__vol.is-on { border-block-start-color: var(--snd-live); }
.ql-snd2__vol.is-on .ql-snd2__vol-n { color: var(--snd-live); }

/* -- 12 . section 2: motion off, colours forced, paper -------------------- */

@media (prefers-reduced-motion: reduce) {
  .ql-snd2__lamp, .ql-snd2__plate, .ql-snd2__span, .ql-snd2__key, .ql-snd2__ico,
  .ql-snd2__bubble, .ql-snd2__vol, .ql-snd2__vol-n { transition: none; }
}
@media (forced-colors: active) {
  .ql-snd2__body { opacity: .35; }
  .ql-snd2__tint, .ql-snd2__fader img, .ql-snd2__mknob { display: none; }
  .ql-snd2__fader { border: 2px solid CanvasText; block-size: calc(var(--dk-knob) * .4cqi); inline-size: calc(var(--dk-knob) * .6cqi); }
  .ql-snd2__ink, .ql-snd2__span { stroke: CanvasText; }
  .ql-snd2__spanl { fill: CanvasText; }
  .ql-snd2__plate, .ql-snd2__hours > span { color: CanvasText; opacity: 1; }
  .ql-snd2__now { background: CanvasText; }
  .ql-snd2__lamp { forced-color-adjust: none; background: none; }
  .ql-snd2__lamp.is-on { outline: 3px solid Highlight; inline-size: calc(var(--dk-lamp-d) * 1cqi); }
  .ql-snd2__key { border: 1px solid ButtonText; color: ButtonText; }
  .ql-snd2__key[aria-pressed="true"] { background: Highlight; color: HighlightText; }
  .ql-snd2__hand { border: 2px solid ButtonText; }
}
@media print {
  .ql-snd2__stage, .ql-snd2__go { display: none !important; }
  .ql-snd2 { background: #fff; color: #000; }
}

/* ===========================================================================
   SECTION 3 . THE SCOPE (round SOUND3)
   The studio's waveform monitor, and the library under it. The pictures are
   the monitor's front with both knobs taken off, and one knob; the grid,
   the trace and its light, the glass, the knobs' turns and every word on and
   round the monitor are drawn here.

   One coordinate system for the monitor: the scope's own box (container
   "scope"), so 1cqi is 1% of its width; heights are its percentages over
   --sc-ar. The trace is the screen's own SVG, in the picture's pixels.
   =========================================================================== */

/* -- 13 . section 3: the room and the words ------------------------------ */

.ql-snd3 {
  /* the monitor's width; the list under it shares it until the two stand
     side by side */
  --sc-w: min(100%, 560px);
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding-block: clamp(3rem, 2rem + 4vw, 6rem);
}
@media (min-width: 720px) { .ql-snd3 { --sc-w: 84vw; } }
@media (min-width: 1024px) { .ql-snd3 { --sc-w: clamp(760px, 66vw, 1000px); } }
@media (min-width: 1280px) { .ql-snd3 { --sc-w: 100%; } }
/* the room: the lamp up to the left, a hairline where the desk's room ends */
.ql-snd3::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(56% 40% at 18% 2%, rgb(255 214 150 / .045), transparent 70%),
    linear-gradient(90deg, transparent, var(--ql-line) 18%, var(--ql-line) 82%, transparent) top / 100% 1px no-repeat;
}
/* and the screen's own light on the room, only while it sounds */
.ql-snd3::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(38% 30% at var(--spill-x, 50%) 46%, rgb(var(--snd-live-rgb) / .075), transparent 72%);
  opacity: 0;
  transition: opacity .9s var(--ql-ease);
}
@media (min-width: 1280px) { .ql-snd3::after { --spill-x: 30%; } }
.ql-snd3.is-live::after { opacity: 1; }
.ql-snd3__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  row-gap: var(--ql-sp-7);
}
@media (min-width: 1024px) {
  .ql-snd3__head {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(2.5rem, 4.4vw, 5.5rem);
  }
}
.ql-snd3__words { display: grid; justify-items: start; row-gap: var(--ql-sp-7); min-inline-size: 0; }
.ql-snd3__title {
  margin: 0;
  max-inline-size: 16ch;
  font-size: var(--ql-fs-d2);
  line-height: 1.05;
  font-weight: var(--ql-fw-bold);
  letter-spacing: -.036em;
  color: var(--ql-text-strong);
  text-wrap: balance;
}
.ql-snd3__lead {
  margin: 0;
  max-inline-size: 46ch;
  font-size: clamp(1rem, .93rem + .28vw, 1.2rem);
  line-height: 1.6;
  color: var(--ql-text-muted);
  text-wrap: pretty;
}

/* the monitor and the list: one over the other, and side by side once there
   is room, the monitor holding still while the list goes by */
.ql-snd3__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  row-gap: clamp(2rem, 1.2rem + 3vw, 3.25rem);
  margin-block-start: clamp(2.25rem, 1.25rem + 4vw, 4rem);
}
.ql-snd3__monitor,
.ql-snd3__index { inline-size: var(--sc-w); min-inline-size: 0; }
.ql-snd3__monitor { display: grid; row-gap: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
@media (min-width: 1280px) {
  .ql-snd3__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(2.5rem, 4vw, 4.5rem);
    align-items: start;
  }
  .ql-snd3__monitor { position: sticky; inset-block-start: 104px; }
}

/* -- 14 . section 3: the scope -------------------------------------------- */

.ql-snd3__scope {
  /* where SHOW's knob stands and how many places it has, from its own
     buttons (the code-behind writes one per volume on screen); SORT has
     three. A knob points at the place whose button is pressed. */
  --n-show: 4;
  --sel-show: 0;
  --sel-sort: 0;
  position: relative;
  display: grid;
  row-gap: var(--ql-sp-5);
  inline-size: 100%;
  container-type: inline-size;
  container-name: scope;
}
.ql-snd3__scope:has(.ql-snd3__pos--show > :nth-child(2):last-child) { --n-show: 2; }
.ql-snd3__scope:has(.ql-snd3__pos--show > :nth-child(3):last-child) { --n-show: 3; }
.ql-snd3__scope:has(.ql-snd3__pos--show > :nth-child(5):last-child) { --n-show: 5; }
.ql-snd3__scope:has(.ql-snd3__pos--show > :nth-child(6):last-child) { --n-show: 6; }
.ql-snd3__scope:has(.ql-snd3__pos--show > :nth-child(2)[aria-pressed="true"]) { --sel-show: 1; }
.ql-snd3__scope:has(.ql-snd3__pos--show > :nth-child(3)[aria-pressed="true"]) { --sel-show: 2; }
.ql-snd3__scope:has(.ql-snd3__pos--show > :nth-child(4)[aria-pressed="true"]) { --sel-show: 3; }
.ql-snd3__scope:has(.ql-snd3__pos--show > :nth-child(5)[aria-pressed="true"]) { --sel-show: 4; }
.ql-snd3__scope:has(.ql-snd3__pos--show > :nth-child(6)[aria-pressed="true"]) { --sel-show: 5; }
.ql-snd3__scope:has(.ql-snd3__pos--sort > :nth-child(2)[aria-pressed="true"]) { --sel-sort: 1; }
.ql-snd3__scope:has(.ql-snd3__pos--sort > :nth-child(3)[aria-pressed="true"]) { --sel-sort: 2; }

.ql-snd3__case {
  position: relative;
  aspect-ratio: 1536 / 1024;
  isolation: isolate;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.ql-snd3__pic {
  display: block;
  inline-size: 100%;
  block-size: auto;
  pointer-events: none;
}

/* the screen, over the picture's dark face */
.ql-snd3__screen {
  position: absolute;
  inset-inline-start: calc(var(--sc-face-x0) * 1%);
  inset-block-start: calc(var(--sc-face-y0) * 1%);
  inline-size: calc((var(--sc-face-x1) - var(--sc-face-x0)) * 1%);
  block-size: calc((var(--sc-face-y1) - var(--sc-face-y0)) * 1%);
  overflow: hidden;
  border-radius: calc(var(--sc-face-r) * 1cqi);
  /* the phosphor's faint haze, even at rest */
  background: radial-gradient(70% 62% at 50% 50%, rgb(var(--snd-phos-rgb) / .035), transparent 78%);
  pointer-events: none;
  transition: box-shadow .9s var(--ql-ease);
}
/* lit, the tube throws a little of its light on the bezel round it */
.ql-snd3__scope.is-live .ql-snd3__screen { box-shadow: 0 0 5cqi .4cqi rgb(var(--snd-live-rgb) / .16); }
.ql-snd3__crt {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
  transition: opacity .5s var(--ql-ease);
}
.ql-snd3__grat {
  fill: none;
  stroke: rgb(var(--snd-phos-rgb) / .13);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.ql-snd3__grat--fine { stroke: rgb(var(--snd-phos-rgb) / .2); }
/* no signal: the beam's flat line across the middle */
.ql-snd3__flat {
  stroke: rgb(var(--snd-phos-rgb) / .62);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: opacity .3s var(--ql-ease);
}
.ql-snd3__scope.has-trace .ql-snd3__flat { opacity: 0; }
/* the trace: the track whole, as an envelope. In ivory where a preview
   plays it, faint where the track goes on past the preview, and blue over
   the part played, only while it sounds. */
.ql-snd3__band {
  fill: rgb(var(--snd-phos-rgb) / .14);
  stroke: rgb(var(--snd-phos-rgb) / .8);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.ql-snd3__band--rest { fill: rgb(var(--snd-phos-rgb) / .035); stroke: rgb(var(--snd-phos-rgb) / .3); }
.ql-snd3__band--live {
  fill: rgb(var(--snd-live-rgb) / .3);
  stroke: rgb(186 222 255);
  opacity: 0;
  transition: opacity .3s var(--ql-ease);
}
.ql-snd3__scope.is-live .ql-snd3__band--live { opacity: 1; }
/* the last trace, fading as a phosphor does */
.ql-snd3__ghost {
  fill: none;
  stroke: rgb(var(--snd-phos-rgb) / .5);
  stroke-width: 1.5;
  opacity: 0;
}
.ql-snd3__ghost.is-fading { animation: ql-snd3-fade .55s var(--ql-ease) both; }
@keyframes ql-snd3-fade { from { opacity: .7; } to { opacity: 0; } }
/* the spot that writes a new trace, left to right */
.ql-snd3__spot {
  stroke: rgb(var(--snd-phos-rgb));
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  filter: drop-shadow(0 0 3px rgb(var(--snd-phos-rgb) / .8));
}
.ql-snd3__scope.is-sweeping .ql-snd3__spot { opacity: .85; }
/* the preview: a bracket over the part it plays, and its end */
.ql-snd3__brk {
  fill: none;
  stroke: rgb(var(--snd-phos-rgb) / .62);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.ql-snd3__win {
  stroke: rgb(var(--snd-phos-rgb) / .5);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  vector-effect: non-scaling-stroke;
}
.ql-snd3__scope:not(.has-trace) :is(.ql-snd3__brk, .ql-snd3__win) { opacity: 0; }
/* the beam: where the music is, lit blue while it sounds; a dim mark where
   it was left when it is paused */
.ql-snd3__beam {
  stroke: rgb(var(--snd-phos-rgb) / .5);
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transition: opacity .25s var(--ql-ease);
}
.ql-snd3__scope.is-cued .ql-snd3__beam { opacity: 1; }
.ql-snd3__scope.is-live .ql-snd3__beam {
  stroke: rgb(226 241 255);
  stroke-width: 2.6;
  opacity: 1;
  filter: drop-shadow(0 0 3px rgb(var(--snd-live-rgb))) drop-shadow(0 0 9px rgb(var(--snd-live-rgb) / .7));
}

/* the readouts, in the screen's own light */
.ql-snd3__rd {
  position: absolute;
  font-family: var(--ql-font-mono);
  font-size: clamp(9px, 1.3cqi, 12.5px);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgb(var(--snd-phos-rgb) / .72);
  text-shadow: 0 0 .55cqi rgb(var(--snd-phos-rgb) / .3);
  font-variant-numeric: tabular-nums;
}
.ql-snd3__rd:empty { display: none; }
.ql-snd3__rd--t,
.ql-snd3__rd--v { inset-block-start: 2.6%; max-inline-size: 46%; overflow: hidden; text-overflow: ellipsis; }
.ql-snd3__rd--t { inset-inline-start: 5.5%; font-weight: var(--ql-fw-semibold); color: rgb(var(--snd-phos-rgb) / .94); }
.ql-snd3__rd--v { inset-inline-end: 5.5%; }
.ql-snd3__rd--a,
.ql-snd3__rd--b,
.ql-snd3__rd--w { inset-block-end: 2.6%; }
.ql-snd3__rd--a { inset-inline-start: 5.5%; }
.ql-snd3__rd--b { inset-inline-end: 5.5%; }
.ql-snd3__rd--w { inset-inline-start: calc(var(--xw, 0) * 1%); translate: -50% 0; color: rgb(var(--snd-phos-rgb) / .94); }
.ql-snd3__rd[hidden] { display: none; }
/* the readouts come on with the tube */
.ql-snd3__rd { transition: opacity .4s var(--ql-ease); }
.ql-snd3__scope:is(.is-off, .is-warming) .ql-snd3__rd { opacity: 0; }
/* the glass: the tube's curve darker at its corners, and the lamp in it */
.ql-snd3__glass {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(158deg, rgb(255 240 215 / .085) 0%, rgb(255 240 215 / .025) 20%, transparent 38%),
    radial-gradient(118% 96% at 50% 50%, transparent 56%, rgb(0 0 0 / .42) 100%);
  box-shadow: inset 0 0 2.4cqi rgb(0 0 0 / .6);
}
@container scope (max-width: 559px) {
  .ql-snd3__rd--v, .ql-snd3__rd--a { display: none; }
}
@container scope (max-width: 419px) {
  .ql-snd3__rd { display: none; }
}

/* the knobs, on their seats. Each is turned to the place its dial has
   pressed; the lamp's highlight on it does not turn, so it is drawn over
   the picture, which is lit evenly. */
.ql-snd3__knob {
  --arc: min(150deg, calc(50deg * (var(--n) - 1)));
  position: absolute;
  inset-inline-start: calc(var(--x) * 1%);
  inset-block-start: calc(var(--y) * 1%);
  inline-size: calc(var(--sc-knob) * 1cqi);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(.35cqi .55cqi .5cqi rgb(0 0 0 / .62));
}
.ql-snd3__knob--show { --x: var(--sc-s1-x); --y: var(--sc-s1-y); --n: var(--n-show); --sel: var(--sel-show); }
.ql-snd3__knob--sort { --x: var(--sc-s2-x); --y: var(--sc-s2-y); --n: 3; --sel: var(--sel-sort); }
.ql-snd3__knob img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  rotate: calc((var(--sel) / max(1, var(--n) - 1) - .5) * var(--arc));
  transition: rotate .42s cubic-bezier(.34, 1.42, .55, 1);
}
.ql-snd3__knob::after {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle at 33% 27%, rgb(255 244 224 / .17), rgb(255 244 224 / .03) 38%, transparent 56%);
  pointer-events: none;
}

/* the dials: each knob's caption and its places. On a small monitor, or
   to a finger, they are two rows of keys under the picture; with a mouse
   and room, they are printed round the knobs. */
.ql-snd3__dial {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ql-sp-4) var(--ql-sp-5);
}
.ql-snd3__cap {
  min-inline-size: 4.2em;
  margin: 0;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-semibold);
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ql-text-subtle);
}
.ql-snd3__pos { display: flex; flex-wrap: wrap; gap: var(--ql-sp-4); }
.ql-snd3__pos > button {
  min-block-size: var(--ql-tap-min);
  padding: 0 var(--ql-sp-6);
  border: 1px solid var(--ql-line-strong);
  border-radius: 999px;
  background: transparent;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-2xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ql-text-body);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s var(--ql-ease), border-color .2s var(--ql-ease), background-color .2s var(--ql-ease);
}
/* pressed is ivory, as the knob's line is: blue is only ever the sound */
.ql-snd3__pos > button[aria-pressed="true"] {
  border-color: rgb(var(--snd-phos-rgb) / .62);
  background: rgb(var(--snd-phos-rgb) / .1);
  color: var(--ql-text-strong);
}
.ql-snd3__pos > button:focus-visible { outline: none; box-shadow: var(--ql-ring); }
@media (hover: hover) and (pointer: fine) {
  .ql-snd3__pos > button:hover:not([aria-pressed="true"]) { color: var(--ql-text-strong); border-color: rgb(var(--ql-white-rgb) / .3); }
}

@media (hover: hover) and (pointer: fine) {
  @container scope (min-width: 640px) {
    .ql-snd3__scope { display: block; }
    /* each dial stands on its knob's seat: nothing but a point there, and
       its places round the knob at their angles */
    .ql-snd3__dial {
      position: absolute;
      inset-inline-start: calc(var(--x) * 1cqi);
      inset-block-start: calc(var(--y) * 1cqi / var(--sc-ar));
      display: block;
      inline-size: 0;
      block-size: 0;
    }
    .ql-snd3__dial--show { --x: var(--sc-s1-x); --y: var(--sc-s1-y); }
    .ql-snd3__dial--sort { --x: var(--sc-s2-x); --y: var(--sc-s2-y); }
    .ql-snd3__cap {
      position: absolute;
      inset-inline-start: 0;
      inset-block-start: calc(var(--sc-ring) * .5cqi + 1cqi);
      min-inline-size: 0;
      translate: -50% 0;
      font-size: clamp(8px, 1.05cqi, 11px);
      letter-spacing: .22em;
      color: rgb(var(--snd-phos-rgb) / .62);
    }
    .ql-snd3__pos > button {
      --arc: min(150deg, calc(50deg * (var(--n) - 1)));
      --a: calc((var(--k) / max(1, var(--n) - 1) - .5) * var(--arc));
      --rl: calc(var(--sc-ring) * .5cqi + 2.1cqi);    /* the words' radius */
      --rt: calc(var(--sc-ring) * .5cqi + .62cqi);    /* the ticks' middle */
      position: absolute;
      inset-inline-start: calc(sin(var(--a)) * var(--rl));
      inset-block-start: calc(cos(var(--a)) * var(--rl) * -1);
      min-block-size: 24px;
      padding: 0 .35cqi;
      border: 0;
      border-radius: 3px;
      background: none;
      translate: calc(-50% + sin(var(--a)) * 50%) calc(-50% - cos(var(--a)) * 50%);
      font-size: clamp(9px, 1.3cqi, 12.5px);
      font-weight: var(--ql-fw-semibold);
      letter-spacing: .12em;
      color: rgb(var(--snd-phos-rgb) / .58);
    }
    /* the place's tick, between the ring and the word */
    .ql-snd3__pos > button::before {
      content: "";
      position: absolute;
      inset-inline-start: calc(50% - 50% * sin(var(--a)) - (var(--rl) - var(--rt)) * sin(var(--a)));
      inset-block-start: calc(50% + 50% * cos(var(--a)) + (var(--rl) - var(--rt)) * cos(var(--a)));
      inline-size: max(1.5px, .2cqi);
      block-size: .95cqi;
      border-radius: 1px;
      background: currentColor;
      translate: -50% -50%;
      rotate: var(--a);
    }
    .ql-snd3__pos > button[aria-pressed="true"] {
      background: none;
      color: rgb(var(--snd-phos-rgb));
      text-shadow: 0 0 .8cqi rgb(var(--snd-phos-rgb) / .3);
    }
    .ql-snd3__pos > button:hover:not([aria-pressed="true"]) { color: rgb(var(--snd-phos-rgb) / .86); }
    /* more places than a dial holds: back to keys, under the picture */
    .ql-snd3__dial:has(.ql-snd3__pos > :nth-child(6)) {
      position: static;
      display: flex;
      inline-size: auto;
      block-size: auto;
      margin-block-start: var(--ql-sp-5);
    }
  }
}

/* the arrival: the first time the monitor comes into view its tube warms,
   the flat line opens out from the middle, then the trace is drawn */
.ql-snd3__scope.is-off .ql-snd3__crt { opacity: 0; }
.ql-snd3__scope.is-warming .ql-snd3__flat { animation: ql-snd3-open .5s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes ql-snd3-open { from { transform: scaleX(0); opacity: 1; } to { transform: scaleX(1); } }

/* -- 15 . section 3: the sentence and the list ---------------------------- */

.ql-snd3__say {
  justify-self: center;
  margin: 0;
  max-inline-size: 38ch;
  font-size: clamp(1.05rem, .95rem + .45vw, 1.3rem);
  line-height: 1.45;
  letter-spacing: var(--ql-tr-lead);
  text-align: center;
  color: var(--ql-text-body);
  text-wrap: balance;
}
.ql-snd3__say b {
  font-weight: var(--ql-fw-semibold);
  color: var(--ql-text-strong);
}
.ql-snd3__say b.is-t { font-weight: var(--ql-fw-bold); }
.ql-snd3__say b:not(.is-t) {
  font-family: var(--ql-font-mono);
  font-size: .9em;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.ql-snd3__index { container-type: inline-size; container-name: index; }
.ql-snd3__count {
  margin: 0 0 var(--ql-sp-5);
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-2xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .06em;
  color: var(--ql-text-subtle);
  font-variant-numeric: tabular-nums;
}
/* the kit's reset for a list with a class is ol[class], which outranks one
   class: two, here */
.ql-snd3 .ql-snd3__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--ql-line);
}
.ql-snd3__row {
  /* how much of the track a preview plays: the setting over the track's
     length, until the clip itself has said (the script sets it then) */
  --win: min(1, calc(var(--ps, 30) / var(--len, 1)));
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(4.5rem, 9.5rem) auto;
  align-items: center;
  column-gap: var(--ql-sp-6);
  min-block-size: 64px;
  padding: var(--ql-sp-4) var(--ql-sp-4) var(--ql-sp-4) var(--ql-sp-2);
  border-block-end: 1px solid var(--ql-line-soft);
  transition: background-color .25s var(--ql-ease);
}
.ql-snd3__row[hidden] { display: none; }
/* the row's button: its number and its mark, and the whole row to press */
.ql-snd3__go {
  position: static;
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: none;
  color: var(--ql-text-subtle);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s var(--ql-ease), border-color .2s var(--ql-ease), background-color .2s var(--ql-ease);
}
.ql-snd3__go::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
}
.ql-snd3__go:focus-visible { outline: none; }
.ql-snd3__go:focus-visible::after { box-shadow: var(--ql-ring); }
.ql-snd3__n,
.ql-snd3__mark { grid-area: 1 / 1; }
.ql-snd3__n {
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-2xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.ql-snd3__mark {
  inline-size: 11px;
  block-size: 12px;
  margin-inline-start: 2px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  visibility: hidden;
}
/* sounding: two bars, blue; loaded and paused: the mark, ivory */
.ql-snd3__row.is-on .ql-snd3__mark {
  margin-inline-start: 0;
  inline-size: 10px;
  clip-path: none;
  background: linear-gradient(90deg, currentColor 0 34%, transparent 34% 66%, currentColor 66%);
}
.ql-snd3__row:is(.is-on, .is-cued) .ql-snd3__mark { visibility: visible; }
.ql-snd3__row:is(.is-on, .is-cued) .ql-snd3__n { visibility: hidden; }
.ql-snd3__row.is-on .ql-snd3__go { color: var(--snd-live); border-color: rgb(var(--snd-live-rgb) / .55); }
.ql-snd3__row.is-cued .ql-snd3__go { color: var(--ql-text-strong); border-color: var(--ql-line-strong); }
.ql-snd3__row.is-on { background: rgb(var(--snd-live-rgb) / .055); }
.ql-snd3__go:focus-visible .ql-snd3__mark { visibility: visible; }
.ql-snd3__go:focus-visible .ql-snd3__n { visibility: hidden; }
@media (hover: hover) and (pointer: fine) {
  .ql-snd3__row:hover { background: rgb(var(--ql-white-rgb) / .025); }
  .ql-snd3__row.is-on:hover { background: rgb(var(--snd-live-rgb) / .075); }
  .ql-snd3__row:hover .ql-snd3__mark { visibility: visible; }
  .ql-snd3__row:hover .ql-snd3__n { visibility: hidden; }
  .ql-snd3__row:hover:not(.is-on) .ql-snd3__go { color: var(--ql-text-strong); border-color: var(--ql-line-strong); }
}
.ql-snd3__id { display: grid; row-gap: 5px; min-inline-size: 0; }
.ql-snd3__t {
  font-size: var(--ql-fs-md);
  font-weight: var(--ql-fw-semibold);
  line-height: 1.25;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
  color: var(--ql-text-strong);
}
.ql-snd3__new {
  display: inline-block;
  margin-inline-start: var(--ql-sp-3);
  padding: 3px 6px 2px;
  border: 1px solid rgb(var(--snd-phos-rgb) / .4);
  border-radius: 3px;
  vertical-align: .14em;
  font-family: var(--ql-font-mono);
  font-size: 9px;
  font-weight: var(--ql-fw-semibold);
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--snd-ivory);
}
.ql-snd3__m {
  font-size: var(--ql-fs-xs);
  font-style: normal;
  line-height: 1.3;
  overflow-wrap: anywhere;
  color: var(--ql-text-muted);
}
/* the track's shape: the file's own measurement, a picture only. The part
   a preview plays is lit behind it, to its end; the part played, blue,
   while it sounds. */
.ql-snd3__w {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 1px;
  block-size: 30px;
}
.ql-snd3__w::before {
  content: "";
  position: absolute;
  inset: -4px auto -4px 0;
  z-index: -1;
  inline-size: calc(var(--win) * 100%);
  min-inline-size: 2px;
  border-inline-end: 1px solid rgb(var(--snd-phos-rgb) / .42);
  background: rgb(var(--snd-phos-rgb) / .06);
}
.ql-snd3__w i {
  flex: 1 1 0;
  min-inline-size: 1px;
  block-size: max(1px, calc(var(--v) * 100%));
  border-radius: 1px;
  background: rgb(var(--snd-phos-rgb) / .3);
  transition: background-color .2s var(--ql-ease);
}
.ql-snd3__row.is-cued .ql-snd3__w i.is-p { background: rgb(var(--snd-phos-rgb) / .72); }
.ql-snd3__row.is-on .ql-snd3__w i.is-p { background: var(--snd-live); }
@media (hover: hover) and (pointer: fine) {
  .ql-snd3__row:hover .ql-snd3__w i:not(.is-p) { background: rgb(var(--snd-phos-rgb) / .46); }
}
.ql-snd3__d {
  min-inline-size: 3.2em;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-xs);
  line-height: 1;
  text-align: end;
  color: var(--ql-text-muted);
  font-variant-numeric: tabular-nums;
}
/* a narrow list: the shape under the name */
@container index (max-width: 439px) {
  .ql-snd3__row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "go id d" "go w w";
    row-gap: var(--ql-sp-3);
    padding-block: var(--ql-sp-5);
  }
  .ql-snd3__go { grid-area: go; align-self: start; }
  .ql-snd3__id { grid-area: id; }
  .ql-snd3__d { grid-area: d; }
  .ql-snd3__w { grid-area: w; block-size: 20px; }
}
.ql-snd3__foot {
  margin: var(--ql-sp-6) 0 0;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  line-height: 1.5;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ql-text-subtle);
}

/* -- 16 . section 3: motion off, colours forced, paper -------------------- */

@media (prefers-reduced-motion: reduce) {
  .ql-snd3::after, .ql-snd3__screen, .ql-snd3__crt, .ql-snd3__flat, .ql-snd3__band--live, .ql-snd3__beam,
  .ql-snd3__knob img, .ql-snd3__pos > button, .ql-snd3__row, .ql-snd3__go, .ql-snd3__w i { transition: none; }
  .ql-snd3__ghost.is-fading, .ql-snd3__scope.is-warming .ql-snd3__flat { animation: none; }
  .ql-snd3__spot { display: none; }
}
@media (forced-colors: active) {
  .ql-snd3__pic { opacity: .35; }
  .ql-snd3__glass, .ql-snd3__knob::after { display: none; }
  .ql-snd3__trace { filter: none; }
  .ql-snd3__screen { border: 1px solid CanvasText; }
  .ql-snd3__grat, .ql-snd3__win, .ql-snd3__brk, .ql-snd3__flat, .ql-snd3__ghost, .ql-snd3__spot { stroke: GrayText; filter: none; }
  .ql-snd3__band, .ql-snd3__band--rest { fill: none; stroke: CanvasText; }
  .ql-snd3__band--live, .ql-snd3__scope.is-live .ql-snd3__beam { fill: none; stroke: Highlight; filter: none; }
  .ql-snd3__beam { stroke: CanvasText; }
  .ql-snd3__rd { color: CanvasText; text-shadow: none; }
  .ql-snd3__knob { border: 2px solid CanvasText; filter: none; }
  .ql-snd3__pos > button { border: 1px solid ButtonText; color: ButtonText; }
  .ql-snd3__pos > button[aria-pressed="true"] { background: Highlight; color: HighlightText; }
  .ql-snd3__pos > button::before { background: ButtonText; }
  .ql-snd3__row.is-on { outline: 2px solid Highlight; outline-offset: -2px; }
  .ql-snd3__row.is-on .ql-snd3__go { color: Highlight; border-color: Highlight; }
  .ql-snd3__w::before { border-inline-end-color: CanvasText; background: none; }
  .ql-snd3__w i { background: GrayText; }
  .ql-snd3__row:is(.is-on, .is-cued) .ql-snd3__w i.is-p { background: Highlight; }
  .ql-snd3__new { border-color: CanvasText; color: CanvasText; }
}
@media print {
  .ql-snd3__monitor { display: none !important; }
  .ql-snd3 { background: #fff; color: #000; }
  .ql-snd3__grid { display: block; }
  .ql-snd3__index { inline-size: auto; }
}

/* ===========================================================================
   SECTION 4 . THE RECEIVER (round SOUND4)
   The studio's monitor receiver, and the reader's own clinic day on its
   dial. The pictures are the receiver's front with both knobs taken off,
   and one knob; the dial's print, its lamp, the pointers, the knobs' turns
   and every word on and round the receiver are drawn here.

   The day as it stands is four numbers on the receiver, in hours: --o and
   --c (the doors), --h1 and --h2 (the handovers). Everything on the dial is
   placed from them, so the script moves four numbers and the sheet does the
   rest. One coordinate system for the receiver: its own box (container
   "radio"), so 1cqi is 1% of its width; heights are its percentages over
   --rx-ar. Across the glass, an hour stands at its percent of the glass's
   width: --rx-x0 at --rx-hr0 (5 am) to --rx-x1 at --rx-hr1 (11 pm).
   =========================================================================== */

/* -- 17 . section 4: the room and the words ------------------------------ */

.ql-snd4 {
  /* the receiver's width; the sentence and the list under it share it */
  --rx-w: min(94vw, 560px);
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding-block: clamp(3rem, 2rem + 4vw, 6rem);
}
@media (min-width: 720px) { .ql-snd4 { --rx-w: 84vw; } }
@media (min-width: 1024px) { .ql-snd4 { --rx-w: clamp(760px, 66vw, 1000px); } }
/* the room: the lamp up to the left, the dial's own warm light under the
   receiver, a hairline where the scope's room ends */
.ql-snd4::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(56% 40% at 18% 2%, rgb(255 214 150 / .045), transparent 70%),
    radial-gradient(44% 30% at 50% 44%, rgb(var(--snd-dial-rgb) / .045), transparent 72%),
    linear-gradient(90deg, transparent, var(--ql-line) 18%, var(--ql-line) 82%, transparent) top / 100% 1px no-repeat;
}
.ql-snd4__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  row-gap: var(--ql-sp-7);
}
@media (min-width: 1024px) {
  .ql-snd4__head {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(2.5rem, 4.4vw, 5.5rem);
  }
}
.ql-snd4__words { display: grid; justify-items: start; row-gap: var(--ql-sp-7); min-inline-size: 0; }
.ql-snd4__title {
  margin: 0;
  max-inline-size: 18ch;
  font-size: var(--ql-fs-d2);
  line-height: 1.05;
  font-weight: var(--ql-fw-bold);
  letter-spacing: -.036em;
  color: var(--ql-text-strong);
  text-wrap: balance;
}
.ql-snd4__lead {
  margin: 0;
  max-inline-size: 46ch;
  font-size: clamp(1rem, .93rem + .28vw, 1.2rem);
  line-height: 1.6;
  color: var(--ql-text-muted);
  text-wrap: pretty;
}

/* -- 18 . section 4: the receiver ---------------------------------------- */

.ql-snd4__stage {
  display: grid;
  justify-items: center;
  margin-block-start: clamp(2.25rem, 1.25rem + 4vw, 4rem);
}
.ql-snd4__radio {
  /* the day: open, close and the two handovers, in hours (the markup's
     default day until the script moves them), and where each stands across
     the glass, in percent of its width */
  --o: 8;
  --c: 18;
  --h1: 11;
  --h2: 15;
  --rx-k: calc((var(--rx-x1) - var(--rx-x0)) / (var(--rx-hr1) - var(--rx-hr0)));
  --xo: calc(var(--rx-x0) + (var(--o) - var(--rx-hr0)) * var(--rx-k));
  --xc: calc(var(--rx-x0) + (var(--c) - var(--rx-hr0)) * var(--rx-k));
  --x1: calc(var(--rx-x0) + (var(--h1) - var(--rx-hr0)) * var(--rx-k));
  --x2: calc(var(--rx-x0) + (var(--h2) - var(--rx-hr0)) * var(--rx-k));
  position: relative;
  inline-size: var(--rx-w);
  container-type: inline-size;
  container-name: radio;
}
.ql-snd4__case {
  position: relative;
  aspect-ratio: 1536 / 768;
  isolation: isolate;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.ql-snd4__pic {
  display: block;
  inline-size: 100%;
  block-size: auto;
  pointer-events: none;
}

/* the dial: over the picture's glass, its own box */
.ql-snd4__glass {
  position: absolute;
  inset-inline-start: calc(var(--rx-glass-x0) * 1%);
  inset-block-start: calc(var(--rx-glass-y0) * 1%);
  inline-size: calc((var(--rx-glass-x1) - var(--rx-glass-x0)) * 1%);
  block-size: calc((var(--rx-glass-y1) - var(--rx-glass-y0)) * 1%);
  border-radius: calc(var(--rx-glass-r) * 1cqi);
  touch-action: pan-y;
}
/* the lamp behind the glass, lighting the hours the doors are open */
.ql-snd4__lamp {
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(var(--xo) * 1%);
  inline-size: calc((var(--xc) - var(--xo)) * 1%);
  background:
    radial-gradient(76% 74% at 50% 60%, rgb(var(--snd-dial-rgb) / .3), rgb(var(--snd-dial-rgb) / .13) 62%, rgb(var(--snd-dial-rgb) / .05) 100%);
  -webkit-mask: linear-gradient(90deg, transparent, #000 min(2.4cqi, 30%), #000 calc(100% - min(2.4cqi, 30%)), transparent);
  mask: linear-gradient(90deg, transparent, #000 min(2.4cqi, 30%), #000 calc(100% - min(2.4cqi, 30%)), transparent);
  pointer-events: none;
  transition: inset-inline-start .18s var(--ql-ease), inline-size .18s var(--ql-ease), opacity .5s var(--ql-ease);
}
/* the print: the hours' scale, dim, and again lit between the doors */
.ql-snd4__print,
.ql-snd4__marks {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
  pointer-events: none;
}
.ql-snd4__sc {
  fill: none;
  stroke: rgb(var(--snd-print-rgb) / .22);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.ql-snd4__sc--hr { stroke-width: 1.5; }
.ql-snd4__sc--half { stroke-width: 1.2; }
.ql-snd4__sc--base { stroke-width: 1; }
.ql-snd4__print--lit {
  clip-path: inset(0 calc((100 - var(--xc)) * 1% - .35%) 0 calc(var(--xo) * 1% - .35%));
  filter: drop-shadow(0 0 2px rgb(var(--snd-dial-rgb) / .55));
  transition: clip-path .18s var(--ql-ease), opacity .5s var(--ql-ease);
}
.ql-snd4__print--lit .ql-snd4__sc { stroke: rgb(var(--snd-print-rgb) / .9); }
@container radio (max-width: 619px) {
  .ql-snd4__sc--qtr { display: none; }
}

/* the hours' names: lit between the doors, dim outside them */
.ql-snd4__hours { position: absolute; inset: 0; pointer-events: none; }
.ql-snd4__hours > span {
  --in: calc(clamp(0, (var(--h) - var(--o) + .001) * 1000, 1) * clamp(0, (var(--c) - var(--h) + .001) * 1000, 1));
  position: absolute;
  inset-inline-start: calc(var(--x) * 1%);
  inset-block-start: calc(var(--rx-lab-y) * 1%);
  translate: -50% -50%;
  font-family: var(--ql-font-mono);
  font-size: clamp(7.5px, 1.18cqi, 12px);
  font-weight: var(--ql-fw-semibold);
  line-height: 1;
  letter-spacing: .06em;
  white-space: nowrap;
  color: rgb(var(--snd-print-rgb) / calc(.62 + .36 * var(--in)));
  text-shadow: 0 0 .6cqi rgb(var(--snd-dial-rgb) / calc(.5 * var(--in)));
  transition: color .4s var(--ql-ease), text-shadow .4s var(--ql-ease);
}
.ql-snd4__hours > .ql-snd4__ampm {
  --in: 0;
  inset-inline-start: 2.4%;
  font-size: clamp(6.5px, .9cqi, 10px);
  letter-spacing: .14em;
}
.ql-snd4__hours > .ql-snd4__ampm--pm { inset-inline-start: 97.6%; }
@container radio (max-width: 619px) {
  .ql-snd4__hours > .is-minor { display: none; }
}

/* the marks the script draws from the tracks: each volume's bracket, its
   tracks' starts, the points where it starts again from the top (taller,
   brighter), and, blue, a sounding track's places in the day */
.ql-snd4__brk {
  fill: none;
  stroke: rgb(var(--snd-print-rgb) / .62);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}
.ql-snd4__tk {
  fill: none;
  stroke: rgb(var(--snd-print-rgb) / .42);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.ql-snd4__lp {
  fill: none;
  stroke: rgb(255 236 204 / .95);
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 2px rgb(var(--snd-dial-rgb) / .8));
}
.ql-snd4__on {
  fill: var(--snd-live);
  filter: drop-shadow(0 0 3px rgb(var(--snd-live-rgb) / .9));
}
.ql-snd4__marks { transition: opacity .6s var(--ql-ease); }
@container radio (max-width: 519px) {
  /* too close together to read as tracks: the new beginnings only */
  .ql-snd4__tk { display: none; }
}

/* the volumes' names over their stretches, as a dial names its stations */
.ql-snd4__band {
  position: absolute;
  inset-inline-start: calc(var(--x) * 1%);
  inset-block-start: calc(var(--rx-band-y) * 1%);
  translate: -50% -50%;
  font-family: var(--ql-font-mono);
  font-size: clamp(7.5px, 1.12cqi, 11.5px);
  font-weight: var(--ql-fw-semibold);
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgb(var(--snd-print-rgb) / .9);
  text-shadow: 0 0 .7cqi rgb(var(--snd-dial-rgb) / .45);
  pointer-events: none;
  transition: inset-inline-start .18s var(--ql-ease), opacity .3s var(--ql-ease);
}
.ql-snd4__band b { font-weight: var(--ql-fw-semibold); color: var(--snd-brass-hi); }
/* a stretch too narrow for its name keeps its numeral; one with no room
   at all keeps nothing */
.ql-snd4__band.is-tight > span { display: none; }
.ql-snd4__band.is-none { opacity: 0; }
@container radio (max-width: 519px) {
  .ql-snd4__band > span { display: none; }
}

/* the pointers: the two handovers. A pointer is its hand's width to take
   hold of, and a fine red line in the glass. */
.ql-snd4__ptr {
  position: absolute;
  inset-block-start: calc(var(--rx-ptr-y0) * 1%);
  block-size: calc((var(--rx-ptr-y1) - var(--rx-ptr-y0)) * 1%);
  inline-size: max(24px, 2.4cqi);
  translate: -50% 0;
  border-radius: 4px;
  outline: none;
  touch-action: none;
  transition: inset-inline-start .18s var(--ql-ease);
}
.ql-snd4__ptr--1 { inset-inline-start: calc(var(--x1) * 1%); }
.ql-snd4__ptr--2 { inset-inline-start: calc(var(--x2) * 1%); }
.ql-snd4__ptr[role="slider"] { cursor: ew-resize; }
.ql-snd4__ptr::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  inline-size: max(2px, .24cqi);
  translate: -50% 0;
  border-radius: 1px;
  background: linear-gradient(180deg, rgb(var(--snd-ptr-rgb) / .55), rgb(var(--snd-ptr-rgb)) 12%, rgb(var(--snd-ptr-rgb)) 88%, rgb(var(--snd-ptr-rgb) / .55));
  box-shadow: 0 0 .5cqi rgb(var(--snd-ptr-rgb) / .55);
}
/* its foot: a small brass bead where a hand would hold it */
.ql-snd4__ptr::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 50%;
  inline-size: max(7px, .8cqi);
  aspect-ratio: 1;
  translate: -50% 50%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--snd-brass-hi), var(--snd-brass) 55%, var(--snd-brass-lo));
  box-shadow: 0 1px 2px rgb(0 0 0 / .6);
}
.ql-snd4__ptr:focus-visible { box-shadow: var(--ql-ring); }
/* a small dial has no room for the bead over its hours' names */
@container radio (max-width: 519px) {
  .ql-snd4__ptr::after { display: none; }
}
@media (pointer: coarse) {
  .ql-snd4__ptr { inline-size: max(var(--ql-tap-min), 2.4cqi); }
}
/* the hour, over a pointer, while it is held or has the keyboard */
.ql-snd4__bubble {
  position: absolute;
  inset: auto auto calc(100% + 6px) 50%;
  translate: -50% 0;
  padding: 5px 9px;
  border-radius: 4px;
  background: rgb(12 10 8 / .92);
  box-shadow: var(--ql-lift-2);
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-2xs);
  font-weight: var(--ql-fw-semibold);
  line-height: 1;
  letter-spacing: .06em;
  white-space: nowrap;
  color: var(--ql-text-strong);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity .2s var(--ql-ease);
  pointer-events: none;
}
.ql-snd4__ptr:focus-visible .ql-snd4__bubble,
.ql-snd4__ptr.is-held .ql-snd4__bubble { opacity: 1; }
.ql-snd4__radio.is-dragging,
.ql-snd4__radio.is-dragging * { cursor: ew-resize; }
.ql-snd4__radio.is-turning,
.ql-snd4__radio.is-turning * { cursor: grabbing; }
.ql-snd4__radio:is(.is-dragging, .is-turning) :is(.ql-snd4__ptr, .ql-snd4__lamp, .ql-snd4__print--lit, .ql-snd4__band, .ql-snd4__knob img) { transition: none; }

/* the glass itself: darker at its edges, and the lamp up to the left on it */
.ql-snd4__glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(166deg, rgb(255 240 215 / .075) 0%, rgb(255 240 215 / .02) 24%, transparent 42%),
    radial-gradient(120% 140% at 50% 50%, transparent 62%, rgb(0 0 0 / .32) 100%);
  box-shadow: inset 0 0 1.6cqi rgb(0 0 0 / .55);
  pointer-events: none;
}

/* the knobs, on their seats: OPEN on the left, CLOSE on the right, each
   turned to its door's hour, from 5 am (a quarter turn and a half to the
   left) to 11 pm (as far to the right). The lamp's highlight on it does
   not turn, so it is drawn over the picture, which is lit evenly. */
.ql-snd4__knob {
  position: absolute;
  inset-inline-start: calc(var(--x) * 1%);
  inset-block-start: calc(var(--y) * 1%);
  inline-size: calc(var(--rx-knob) * 1cqi);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(.3cqi .5cqi .45cqi rgb(0 0 0 / .62));
}
.ql-snd4__knob--open { --x: var(--rx-s1-x); --y: var(--rx-s1-y); --t: var(--o); }
.ql-snd4__knob--close { --x: var(--rx-s2-x); --y: var(--rx-s2-y); --t: var(--c); }
.ql-snd4__knob img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  rotate: calc((var(--t) - var(--rx-hr0)) / (var(--rx-hr1) - var(--rx-hr0)) * 270deg - 135deg);
  transition: rotate .22s var(--ql-ease);
}
.ql-snd4__knob::after {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle at 33% 27%, rgb(255 244 224 / .17), rgb(255 244 224 / .03) 38%, transparent 56%);
  pointer-events: none;
}

/* the doors: each knob's caption, its hour and a step either way. On a
   small receiver, or to a finger, they are two rows of keys under the
   picture; with a mouse and room, they are printed round the knobs. */
.ql-snd4__doors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ql-sp-5) clamp(1.25rem, 4vw, 2.5rem);
  margin-block-start: var(--ql-sp-7);
}
.ql-snd4__door {
  display: flex;
  align-items: center;
  gap: var(--ql-sp-4);
}
.ql-snd4__cap {
  min-inline-size: 9.4em;
  margin: 0;
  text-align: end;
  white-space: nowrap;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-semibold);
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ql-text-subtle);
}
.ql-snd4__time {
  min-inline-size: 5.6em;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-sm);
  font-weight: var(--ql-fw-semibold);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  color: var(--ql-text-strong);
  font-variant-numeric: tabular-nums;
}
.ql-snd4__step {
  display: grid;
  place-items: center;
  inline-size: var(--ql-tap-min);
  block-size: var(--ql-tap-min);
  margin: 0;
  padding: 0;
  border: 1px solid var(--ql-line-strong);
  border-radius: 50%;
  background: transparent;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-md);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  color: var(--ql-text-body);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s var(--ql-ease), border-color .2s var(--ql-ease), background-color .2s var(--ql-ease);
}
.ql-snd4__step[hidden] { display: none; }
.ql-snd4__step:focus-visible { outline: none; box-shadow: var(--ql-ring); }
/* at the end of its travel a step says so, and keeps the keyboard */
.ql-snd4__step[aria-disabled="true"] { cursor: default; opacity: .38; }
@media (hover: hover) and (pointer: fine) {
  .ql-snd4__step:hover:not([aria-disabled="true"]) { color: var(--ql-text-strong); border-color: rgb(var(--ql-white-rgb) / .3); }
}

@media (hover: hover) and (pointer: fine) {
  @container radio (min-width: 640px) {
    /* each door stands on its knob's seat: nothing but a point there, its
       caption over the ring, its hour under it, a step either side */
    .ql-snd4__doors { display: contents; }
    .ql-snd4__door {
      position: absolute;
      inset-inline-start: calc(var(--x) * 1cqi);
      inset-block-start: calc(var(--y) * 1cqi / var(--rx-ar));
      display: block;
      inline-size: 0;
      block-size: 0;
    }
    .ql-snd4__door--open { --x: var(--rx-s1-x); --y: var(--rx-s1-y); }
    .ql-snd4__door--close { --x: var(--rx-s2-x); --y: var(--rx-s2-y); }
    .ql-snd4__cap,
    .ql-snd4__time {
      position: absolute;
      inset-inline-start: 0;
      min-inline-size: 0;
      translate: -50% 0;
    }
    .ql-snd4__cap {
      inset-block-end: calc(var(--rx-ring) * .5cqi + 1.15cqi);
      text-align: center;
      font-size: clamp(8px, 1.02cqi, 11px);
      letter-spacing: .22em;
      color: rgb(var(--snd-print-rgb) / .84);
      text-shadow: 0 1px 0 rgb(0 0 0 / .45);
    }
    .ql-snd4__time {
      inset-block-start: calc(var(--rx-ring) * .5cqi + 1cqi);
      font-size: clamp(10px, 1.42cqi, 15px);
      color: rgb(var(--snd-print-rgb) / .94);
      text-shadow: 0 1px 0 rgb(0 0 0 / .5);
    }
    .ql-snd4__step {
      position: absolute;
      inset-block-start: 0;
      inline-size: max(24px, 2.7cqi);
      block-size: max(24px, 2.7cqi);
      translate: 0 -50%;
      border-color: rgb(var(--snd-print-rgb) / .34);
      background: rgb(20 12 6 / .28);
      font-size: clamp(12px, 1.6cqi, 17px);
      color: rgb(var(--snd-print-rgb) / .82);
    }
    .ql-snd4__step--less { inset-inline-end: calc(var(--rx-ring) * .5cqi + 1.05cqi); }
    .ql-snd4__step--more { inset-inline-start: calc(var(--rx-ring) * .5cqi + 1.05cqi); }
    .ql-snd4__step:hover:not([aria-disabled="true"]) { color: rgb(var(--snd-print-rgb)); border-color: rgb(var(--snd-print-rgb) / .7); }
  }
}

/* the arrival: the first time the receiver is seen its lamp warms, with a
   flicker, and the pointers and the knobs come round from 5 am */
.ql-snd4__radio.is-off :is(.ql-snd4__lamp, .ql-snd4__print--lit, .ql-snd4__marks, .ql-snd4__band) { opacity: 0; }
.ql-snd4__radio.is-off .ql-snd4__hours > span { --in: 0; }
.ql-snd4__radio.is-off .ql-snd4__ptr { inset-inline-start: calc(var(--rx-x0) * 1%); }
.ql-snd4__radio.is-off .ql-snd4__knob img { rotate: -135deg; }
.ql-snd4__radio.is-arriving .ql-snd4__ptr { transition-duration: 1.25s; transition-timing-function: cubic-bezier(.22, .8, .24, 1); }
.ql-snd4__radio.is-arriving .ql-snd4__knob img { transition-duration: 1.25s; transition-timing-function: cubic-bezier(.22, .8, .24, 1); }
.ql-snd4__radio.is-arriving .ql-snd4__lamp,
.ql-snd4__radio.is-arriving .ql-snd4__print--lit { animation: ql-snd4-warm .9s linear both; }
.ql-snd4__radio.is-arriving :is(.ql-snd4__marks, .ql-snd4__band) { transition-delay: .85s; }
@keyframes ql-snd4-warm {
  0% { opacity: 0; }
  10% { opacity: .55; }
  16% { opacity: .12; }
  30% { opacity: .8; }
  38% { opacity: .4; }
  60% { opacity: .92; }
  100% { opacity: 1; }
}

/* -- 19 . section 4: the sentence, the day's list, the playlist --------- */

.ql-snd4__foot {
  display: grid;
  justify-items: center;
  row-gap: var(--ql-sp-7);
  inline-size: min(var(--rx-w), 100% - 2 * var(--ql-sp-6));
  margin: clamp(1.5rem, 1rem + 1.6vw, 2.25rem) auto 0;
  text-align: center;
}
.ql-snd4__say {
  margin: 0;
  max-inline-size: 40ch;
  font-size: clamp(1.1rem, .95rem + .6vw, 1.45rem);
  line-height: 1.4;
  letter-spacing: var(--ql-tr-lead);
  color: var(--ql-text-body);
  text-wrap: balance;
}
.ql-snd4__say b {
  font-family: var(--ql-font-mono);
  font-size: .9em;
  font-weight: var(--ql-fw-semibold);
  letter-spacing: 0;
  color: var(--ql-text-strong);
  font-variant-numeric: tabular-nums;
}
.ql-snd4__say strong { font-weight: var(--ql-fw-bold); color: var(--ql-text-strong); }

/* the kit's reset for a list with a class is ol[class], which outranks one
   class: two, here */
.ql-snd4 .ql-snd4__plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--ql-sp-8);
  inline-size: 100%;
  margin: var(--ql-sp-4) 0 0;
  padding: 0;
  list-style: none;
  text-align: start;
}
@media (min-width: 1024px) {
  .ql-snd4 .ql-snd4__plan {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: calc(var(--rx-w) * .03);
  }
}
.ql-snd4__vol {
  display: flex;
  flex-direction: column;
  gap: var(--ql-sp-4);
  min-inline-size: 0;
  padding-block-start: var(--ql-sp-6);
  border-block-start: 1px solid var(--ql-line);
  transition: border-color .35s var(--ql-ease), opacity .35s var(--ql-ease);
}
.ql-snd4__vol-top {
  order: -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ql-sp-3) var(--ql-sp-5);
  margin: 0;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ql-text-subtle);
  font-variant-numeric: tabular-nums;
}
.ql-snd4__vol-n { font-weight: var(--ql-fw-semibold); color: var(--ql-text-body); transition: color .3s var(--ql-ease); }
.ql-snd4__vol-hours { color: var(--ql-text-body); white-space: nowrap; }
.ql-snd4__vol-span { margin-inline-start: auto; white-space: nowrap; }
.ql-snd4__vol-name {
  margin: 0;
  font-size: var(--ql-fs-xl);
  font-weight: var(--ql-fw-bold);
  line-height: 1.15;
  letter-spacing: var(--ql-tr-head);
  color: var(--ql-text-strong);
}
.ql-snd4__vol-p {
  margin: 0;
  font-size: var(--ql-fs-sm);
  line-height: 1.6;
  color: var(--ql-text-muted);
  text-wrap: pretty;
}
.ql-snd4__vol-p[hidden] { display: none; }
.ql-snd4__vol-p b { font-weight: var(--ql-fw-semibold); color: var(--ql-text-body); }
/* no room in the day; and the one sounding, blue as everywhere else */
.ql-snd4__vol.is-none .ql-snd4__vol-name { color: var(--ql-text-muted); }
.ql-snd4__vol.is-on { border-block-start-color: var(--snd-live); }
.ql-snd4__vol.is-on .ql-snd4__vol-n { color: var(--snd-live); }

.ql-snd4__take {
  display: grid;
  justify-items: center;
  row-gap: var(--ql-sp-5);
  margin-block-start: var(--ql-sp-5);
}
.ql-snd4__take[hidden] { display: none; }
.ql-snd4__note {
  margin: 0;
  max-inline-size: 52ch;
  font-size: var(--ql-fs-xs);
  line-height: 1.6;
  color: var(--ql-text-muted);
  text-wrap: pretty;
}
.ql-snd4__note b { font-family: var(--ql-font-mono); font-weight: var(--ql-fw-semibold); color: var(--ql-text-body); }

/* -- 20 . section 4: motion off, colours forced, paper -------------------- */

@media (prefers-reduced-motion: reduce) {
  .ql-snd4__lamp, .ql-snd4__print--lit, .ql-snd4__hours > span, .ql-snd4__marks, .ql-snd4__band, .ql-snd4__ptr,
  .ql-snd4__bubble, .ql-snd4__knob img, .ql-snd4__step, .ql-snd4__vol, .ql-snd4__vol-n { transition: none; }
  .ql-snd4__radio.is-arriving :is(.ql-snd4__lamp, .ql-snd4__print--lit) { animation: none; }
}
@media (forced-colors: active) {
  .ql-snd4__pic { opacity: .35; }
  .ql-snd4__glare, .ql-snd4__knob::after { display: none; }
  .ql-snd4__glass { border: 1px solid CanvasText; }
  .ql-snd4__lamp { forced-color-adjust: none; background: none; border-block: 2px solid CanvasText; -webkit-mask: none; mask: none; }
  .ql-snd4__print, .ql-snd4__print--lit, .ql-snd4__lp, .ql-snd4__on { filter: none; }
  .ql-snd4__sc { stroke: GrayText; }
  .ql-snd4__print--lit .ql-snd4__sc, .ql-snd4__brk, .ql-snd4__tk, .ql-snd4__lp { stroke: CanvasText; }
  .ql-snd4__on { fill: Highlight; }
  .ql-snd4__hours > span, .ql-snd4__band, .ql-snd4__band b { color: CanvasText; text-shadow: none; }
  .ql-snd4__ptr::before { background: CanvasText; box-shadow: none; }
  .ql-snd4__ptr::after { background: CanvasText; box-shadow: none; }
  .ql-snd4__knob { border: 2px solid CanvasText; filter: none; }
  .ql-snd4__step { border: 1px solid ButtonText; color: ButtonText; }
  .ql-snd4__step[aria-disabled="true"] { border-color: GrayText; color: GrayText; opacity: 1; }
  .ql-snd4__cap, .ql-snd4__time { color: CanvasText; text-shadow: none; }
  .ql-snd4__vol.is-on { border-block-start-color: Highlight; }
  .ql-snd4__vol.is-on .ql-snd4__vol-n { color: Highlight; }
}
@media print {
  .ql-snd4__stage, .ql-snd4__take { display: none !important; }
  .ql-snd4 { background: #fff; color: #000; }
}

/* ===========================================================================
   SECTION 5 . THE ARCHIVE (round SOUND5)
   The studio's tape archive: a walnut cabinet with three shelves, one for
   each volume, and the whole library on them. The picture is the cabinet,
   empty; every tape box, the plates on the shelves' fronts and the light on
   the boxes are drawn here.

   The code-behind writes the shelves (Archive): one bay per volume, its
   plate and its row of boxes. A box carries its length as --w (of the
   longest volume's, so a shelf fills as far as its volume runs), its
   loudness as --h (of the bay's height), its place on its shelf as --o; a
   bay carries its place as --k. Today's boxes are buttons (.is-today),
   titled; the rest are pictures with their number. One coordinate system:
   the cabinet's own box (container "cab"), so 1cqw is 1% of its width and
   its heights are its percentages over --ar-ar. (cqw, not cqi: today's
   labels are written down the spine, and to them cqi would be the height.)
   =========================================================================== */

/* -- 21 . section 5: the room and the words ------------------------------ */

.ql-snd5 {
  /* the cabinet's width; the sentence under it shares it */
  --ar-w: min(94vw, 560px);
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding-block: clamp(3rem, 2rem + 4vw, 6rem);
}
@media (min-width: 720px) { .ql-snd5 { --ar-w: 84vw; } }
@media (min-width: 1024px) { .ql-snd5 { --ar-w: clamp(760px, 66vw, 1000px); } }
/* the room: the lamp up to the left, its warmth on the cabinet, a hairline
   where the receiver's room ends */
.ql-snd5::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(56% 40% at 18% 2%, rgb(255 214 150 / .045), transparent 70%),
    radial-gradient(46% 34% at 38% 46%, rgb(255 206 140 / .035), transparent 72%),
    linear-gradient(90deg, transparent, var(--ql-line) 18%, var(--ql-line) 82%, transparent) top / 100% 1px no-repeat;
}
.ql-snd5__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  row-gap: var(--ql-sp-7);
}
@media (min-width: 1024px) {
  .ql-snd5__head {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(2.5rem, 4.4vw, 5.5rem);
  }
}
.ql-snd5__words { display: grid; justify-items: start; row-gap: var(--ql-sp-7); min-inline-size: 0; }
.ql-snd5__title {
  margin: 0;
  max-inline-size: 17ch;
  font-size: var(--ql-fs-d2);
  line-height: 1.05;
  font-weight: var(--ql-fw-bold);
  letter-spacing: -.036em;
  color: var(--ql-text-strong);
  text-wrap: balance;
}
.ql-snd5__lead {
  margin: 0;
  max-inline-size: 46ch;
  font-size: clamp(1rem, .93rem + .28vw, 1.2rem);
  line-height: 1.6;
  color: var(--ql-text-muted);
  text-wrap: pretty;
}

/* -- 22 . section 5: the archive ------------------------------------------ */

.ql-snd5__stage {
  display: grid;
  justify-items: center;
  margin-block-start: clamp(2.25rem, 1.25rem + 4vw, 4rem);
}
.ql-snd5__cab {
  position: relative;
  inline-size: var(--ar-w);
  aspect-ratio: 1536 / 1024;
  container-type: inline-size;
  container-name: cab;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.ql-snd5__pic {
  display: block;
  inline-size: 100%;
  block-size: auto;
  pointer-events: none;
}
/* (no z-index on the shelves, the bays or the rows: the boxes, the shade
   and the boxes that stand forward share the cabinet's one stacking order) */
.ql-snd5__shelves { position: absolute; inset: 0; }

/* a bay: its dark hollow, down to the foot of its shelf's front, which
   carries the rail and the plate. --t, --f, --r and --e are its top, its
   floor (the rail's top edge), the rail's foot and the face's foot, in
   percent of the cabinet's height. Each shelf's boxes are bound in their
   own cloth: I parchment, II sage, III oxblood; never blue. */
.ql-snd5__bay {
  --t: var(--ar-t1); --f: var(--ar-f1); --r: var(--ar-r1); --e: var(--ar-e1);
  --cloth: 196 178 136;
  --band: 128 52 40;
  --in: calc((var(--f) - var(--t)) / (var(--e) - var(--t)) * 100%);
  position: absolute;
  inset-inline-start: calc(var(--ar-x0) * 1%);
  inline-size: calc((var(--ar-x1) - var(--ar-x0)) * 1%);
  inset-block-start: calc(var(--t) * 1%);
  block-size: calc((var(--e) - var(--t)) * 1%);
}
.ql-snd5__bay:nth-child(2) {
  --t: var(--ar-t2); --f: var(--ar-f2); --r: var(--ar-r2); --e: var(--ar-e2);
  --cloth: 122 138 104;
  --band: 226 214 186;
}
.ql-snd5__bay:nth-child(3) {
  --t: var(--ar-t3); --f: var(--ar-f3); --r: var(--ar-r3); --e: var(--ar-e3);
  --cloth: 112 40 36;
  --band: 201 163 90;
}
/* the cabinet's shadow over the boxes at the back: deepest under the shelf
   above, and toward the right, away from the lamp. The boxes that stand
   forward stand in front of it. */
.ql-snd5__bay::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: var(--in);
  z-index: 1;
  background:
    linear-gradient(180deg, rgb(10 6 3 / .5), rgb(10 6 3 / .16) 20%, transparent 40%),
    linear-gradient(90deg, transparent 35%, rgb(10 6 3 / .22));
  pointer-events: none;
}

/* the row: the boxes stand on the bay's floor, off its walls */
.ql-snd5__row {
  position: absolute;
  inset-inline: .6cqw;
  inset-block-start: 0;
  block-size: var(--in);
  display: flex;
  align-items: flex-end;
}

/* a box: its slot is as wide as its track is long and as tall as it is
   loud; the box itself (::before) stands a hair inside it */
.ql-snd5__box {
  position: relative;
  display: block;
  flex: 0 1 calc(var(--w) * 100%);
  min-inline-size: 3px;
  block-size: calc(var(--h) * 100%);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
  transform-origin: 50% 100%;
  transition: translate .25s var(--ql-ease), scale .35s var(--ql-ease);
}
.ql-snd5__box::before {
  content: "";
  position: absolute;
  inset: 0 max(.5px, .06cqw);
  border-radius: max(1px, .14cqw) max(1px, .14cqw) 0 0;
  background:
    /* the lamp from the left: each box's left edge catches it */
    linear-gradient(90deg, rgb(255 238 208 / .22), rgb(255 238 208 / .06) 16%, transparent 40%, rgb(0 0 0 / .26)),
    /* the lid's edge on top, and the foot in shadow */
    linear-gradient(180deg, rgb(255 244 224 / .26), transparent max(2px, .3cqw), transparent 91%, rgb(0 0 0 / .28)),
    /* the maker's band near the foot */
    linear-gradient(180deg, transparent 80%, rgb(var(--band) / .9) 80% 83.5%, transparent 83.5%),
    /* the cloth's weave */
    repeating-linear-gradient(0deg, rgb(0 0 0 / .05) 0 1px, transparent 1px 3px),
    /* no two boxes faded alike */
    linear-gradient(rgb(var(--age, 0 0 0) / var(--aged, 0)), rgb(var(--age, 0 0 0) / var(--aged, 0))),
    rgb(var(--cloth));
  box-shadow: .3cqw .05cqw .5cqw rgb(0 0 0 / .5);
  /* back in the cabinet's shadow */
  filter: brightness(.5) saturate(.78);
  transition: filter .35s var(--ql-ease), box-shadow .3s var(--ql-ease);
}
/* no two boxes faded alike: a little lighter, a little darker, by place */
.ql-snd5__box:nth-child(3n+1) { --age: 255 246 228; --aged: .07; }
.ql-snd5__box:nth-child(4n+2) { --aged: .1; }
.ql-snd5__box:nth-child(5n+3) { --age: 255 246 228; --aged: .12; }
.ql-snd5__box:nth-child(7n) { --aged: .16; }

/* the label: a number on a box at the back, a title on today's */
.ql-snd5__label {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  font-family: var(--ql-font-mono);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
.ql-snd5__box:not(.is-today) .ql-snd5__label {
  top: 7%;
  font-size: clamp(7px, .9cqw, 10.5px);
  font-weight: var(--ql-fw-semibold);
  letter-spacing: .04em;
  color: rgb(var(--snd-print-rgb));
  text-shadow: 0 1px 0 rgb(0 0 0 / .5);
}

/* TODAY'S, standing forward: lit, a little nearer, in front of the
   cabinet's shadow, a typed paper label down the spine */
.ql-snd5__box.is-today {
  z-index: 2;
  scale: 1.035;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ql-snd5__box.is-today::before {
  filter: none;
  box-shadow: .35cqw .12cqw .8cqw rgb(0 0 0 / .62);
}
.ql-snd5__box.is-today .ql-snd5__label {
  top: 8%;
  max-height: 72%;
  padding: .5em .32em;
  overflow: hidden;
  writing-mode: vertical-rl;
  text-overflow: ellipsis;
  border-radius: 1px;
  font-size: clamp(7px, .98cqw, 12px);
  font-weight: var(--ql-fw-medium);
  letter-spacing: .02em;
  color: var(--snd-ink);
  background: linear-gradient(90deg, #f4ebd8, #e3d6ba);
  box-shadow: 0 0 0 .5px rgb(0 0 0 / .3), .06cqw .06cqw .16cqw rgb(0 0 0 / .4);
}
/* stuck on by hand */
.ql-snd5__box.is-today:nth-child(odd) .ql-snd5__label { rotate: -.5deg; }
.ql-snd5__box.is-today:nth-child(3n) .ql-snd5__label { rotate: .6deg; }

/* a small cabinet: the numbers at the back would crowd each other, and a
   title would show three letters; today's keep a blank label, and the
   sentence names whatever is pointed at or playing */
@container cab (max-width: 479px) {
  .ql-snd5__box:not(.is-today) .ql-snd5__label { display: none; }
  .ql-snd5__box.is-today .ql-snd5__label {
    width: max(2px, min(40%, 1.7cqw));
    height: 54%;
    max-height: none;
    padding: 0;
    font-size: 0;
    color: transparent;
  }
}

/* pulled out: the one sounding glows blue, and lights the rail under it;
   the one paused on is outlined in the cabinet's ivory */
.ql-snd5__box.is-today:is(.is-on, .is-cued) { translate: 0 -.55cqw; }
.ql-snd5__box.is-on::before {
  box-shadow:
    0 0 0 max(1px, .1cqw) rgb(var(--snd-live-rgb) / .95),
    0 0 1.4cqw rgb(var(--snd-live-rgb) / .55),
    .35cqw .12cqw .8cqw rgb(0 0 0 / .62);
}
.ql-snd5__box.is-on::after {
  content: "";
  position: absolute;
  inset-inline: -25%;
  inset-block-end: -1.75cqw;
  block-size: 1.3cqw;
  background: radial-gradient(closest-side, rgb(var(--snd-live-rgb) / .6), transparent);
  pointer-events: none;
}
.ql-snd5__box.is-cued::before {
  box-shadow:
    0 0 0 max(1px, .1cqw) rgb(var(--snd-print-rgb) / .85),
    .35cqw .12cqw .8cqw rgb(0 0 0 / .62);
}
.ql-snd5__box:focus-visible { outline: none; }
.ql-snd5__box.is-today:focus-visible { translate: 0 -.55cqw; }
.ql-snd5__box:focus-visible::before { box-shadow: var(--ql-ring), .35cqw .12cqw .8cqw rgb(0 0 0 / .62); transition: filter .35s var(--ql-ease); }
@media (hover: hover) and (pointer: fine) {
  .ql-snd5__box.is-today:hover { translate: 0 -.55cqw; }
  .ql-snd5__box:not(.is-today):hover::before { filter: brightness(.7) saturate(.85); }
}

/* the plates: each shelf's numeral, name, count and length on the walnut
   face under its rail; printed on the wood, or, on a cabinet with room, on
   a card in a brass holder */
.ql-snd5__plate {
  position: absolute;
  left: 50%;
  top: calc(((var(--r) + var(--e)) / 2 - var(--t)) / (var(--e) - var(--t)) * 100%);
  translate: -50% -50%;
  display: flex;
  align-items: baseline;
  gap: .6em;
  max-inline-size: 100%;
  margin: 0;
  white-space: nowrap;
  font-family: var(--ql-font-mono);
  font-size: clamp(8.5px, 1.02cqw, 12px);
  font-weight: var(--ql-fw-semibold);
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgb(var(--snd-print-rgb) / .94);
  text-shadow: 0 1px 0 rgb(0 0 0 / .65);
  pointer-events: none;
  transition: opacity .5s var(--ql-ease);
}
.ql-snd5__plate b { font-weight: var(--ql-fw-semibold); color: var(--snd-brass-hi); }
.ql-snd5__plate span {
  font-weight: var(--ql-fw-medium);
  letter-spacing: .06em;
  text-transform: none;
  color: rgb(var(--snd-print-rgb) / .84);
}
@container cab (min-width: 640px) {
  .ql-snd5__plate {
    padding: .5em 1.05em .5em 1.25em;
    border-radius: max(1px, .1cqw);
    color: var(--snd-ink);
    text-shadow: none;
    background:
      linear-gradient(180deg, rgb(255 255 255 / .3), transparent 45%),
      linear-gradient(90deg, #f2e8d2, #e2d4b5);
    box-shadow:
      0 0 0 max(1px, .13cqw) var(--snd-brass),
      0 0 0 max(1.5px, .2cqw) var(--snd-brass-lo),
      .1cqw .22cqw .5cqw max(1px, .2cqw) rgb(0 0 0 / .55);
  }
  .ql-snd5__plate b { color: var(--snd-ink); }
  .ql-snd5__plate span { color: rgb(42 34 24 / .8); }
}

/* the arrival: the first time the cabinet is seen its boxes are shelved,
   shelf by shelf, left to right, today's step forward, and the plates come
   up last */
.ql-snd5__cab.is-off .ql-snd5__box { opacity: 0; translate: 0 -14%; }
.ql-snd5__cab.is-off .ql-snd5__box.is-today { scale: 1; }
.ql-snd5__cab.is-off .ql-snd5__box.is-today::before { filter: brightness(.5) saturate(.78); }
.ql-snd5__cab.is-off .ql-snd5__plate { opacity: 0; }
.ql-snd5__cab.is-arriving .ql-snd5__box {
  transition:
    opacity .4s var(--ql-ease) calc(var(--k) * 150ms + var(--o) * 22ms),
    translate .55s cubic-bezier(.3, .75, .3, 1) calc(var(--k) * 150ms + var(--o) * 22ms);
}
.ql-snd5__cab.is-arriving .ql-snd5__box.is-today {
  transition:
    opacity .4s var(--ql-ease) calc(var(--k) * 150ms + var(--o) * 22ms),
    translate .55s cubic-bezier(.3, .75, .3, 1) calc(var(--k) * 150ms + var(--o) * 22ms),
    scale .5s var(--ql-ease) calc(1.05s + var(--k) * 110ms);
}
.ql-snd5__cab.is-arriving .ql-snd5__box.is-today::before { transition: filter .6s var(--ql-ease) calc(1.05s + var(--k) * 110ms); }
.ql-snd5__cab.is-arriving .ql-snd5__plate { transition-delay: calc(.55s + var(--k) * 150ms); }

/* -- 23 . section 5: the sentence, the key, the deal ----------------------- */

.ql-snd5__foot {
  display: grid;
  justify-items: center;
  row-gap: var(--ql-sp-6);
  inline-size: min(var(--ar-w), 100% - 2 * var(--ql-sp-6));
  margin: clamp(1.5rem, 1rem + 1.6vw, 2.25rem) auto 0;
  text-align: center;
}
/* room for its longest, so the page under it never moves */
.ql-snd5__say {
  min-block-size: calc(4 * 1.45em);
  margin: 0;
  max-inline-size: 50ch;
  font-size: clamp(1.05rem, .95rem + .45vw, 1.3rem);
  line-height: 1.45;
  letter-spacing: var(--ql-tr-lead);
  color: var(--ql-text-body);
  text-wrap: balance;
}
@media (min-width: 720px) { .ql-snd5__say { min-block-size: calc(3 * 1.45em); } }
.ql-snd5__say b {
  white-space: nowrap;
  font-family: var(--ql-font-mono);
  font-size: .9em;
  font-weight: var(--ql-fw-semibold);
  letter-spacing: 0;
  color: var(--ql-text-strong);
  font-variant-numeric: tabular-nums;
}
.ql-snd5__say strong { font-weight: var(--ql-fw-bold); color: var(--ql-text-strong); }
.ql-snd5__key,
.ql-snd5__today {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ql-sp-2) var(--ql-sp-8);
  margin: 0;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ql-text-subtle);
}
.ql-snd5__key b { font-weight: var(--ql-fw-semibold); color: var(--ql-text-body); }
.ql-snd5__today span { display: inline-flex; align-items: baseline; gap: var(--ql-sp-3); }
.ql-snd5__today b { font-weight: var(--ql-fw-semibold); color: var(--ql-text-body); }
.ql-snd5__today em { font-style: normal; color: var(--ql-text-muted); }
.ql-snd5__today .ql-snd5__today-cap { color: var(--ql-text-muted); }

/* the deal: what is free, and what comes with a plan */
.ql-snd5__deal {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--ql-sp-11);
  margin-block-start: clamp(3rem, 2rem + 3vw, 5rem);
}
@media (min-width: 1024px) {
  .ql-snd5__deal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2.5rem, 4.4vw, 5.5rem);
  }
}
.ql-snd5__side {
  display: flex;
  flex-direction: column;
  gap: var(--ql-sp-7);
  min-inline-size: 0;
  padding-block-start: var(--ql-sp-7);
  border-block-start: 1px solid var(--ql-line);
}
/* the plan's side: ruled in the cabinet's brass */
.ql-snd5__side--plan { border-block-start-color: rgb(201 163 90 / .6); }
.ql-snd5__side-title {
  margin: 0;
  font-size: var(--ql-fs-xl);
  font-weight: var(--ql-fw-bold);
  line-height: 1.15;
  letter-spacing: var(--ql-tr-head);
  color: var(--ql-text-strong);
}
/* the kit's reset for a list with a class is ul[class], which outranks one
   class: two, here */
.ql-snd5 .ql-snd5__list {
  display: grid;
  row-gap: var(--ql-sp-7);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ql-snd5__list li { display: grid; row-gap: var(--ql-sp-2); }
.ql-snd5__list b {
  font-size: var(--ql-fs-md);
  font-weight: var(--ql-fw-semibold);
  line-height: 1.35;
  color: var(--ql-text-strong);
}
.ql-snd5__list span {
  max-inline-size: 52ch;
  font-size: var(--ql-fs-sm);
  line-height: 1.6;
  color: var(--ql-text-muted);
  text-wrap: pretty;
}
.ql-snd5__go {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ql-sp-6) var(--ql-sp-8);
  margin: var(--ql-sp-4) 0 0;
}
.ql-snd5__quiet { font-size: var(--ql-fs-sm); line-height: 1.5; color: var(--ql-text-muted); }
.ql-snd5__quiet a {
  color: var(--ql-text-body);
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-color: rgb(var(--ql-white-rgb) / .3);
}
.ql-snd5__quiet a:focus-visible { outline: none; box-shadow: var(--ql-ring); border-radius: 3px; }
@media (hover: hover) and (pointer: fine) {
  .ql-snd5__quiet a:hover { color: var(--ql-text-strong); text-decoration-color: currentColor; }
}

/* -- 24 . section 5: motion off, colours forced, paper -------------------- */

@media (prefers-reduced-motion: reduce) {
  .ql-snd5__box, .ql-snd5__box::before, .ql-snd5__plate { transition: none; }
}
@media (forced-colors: active) {
  .ql-snd5__pic { opacity: .35; }
  .ql-snd5__bay::after, .ql-snd5__box.is-on::after { display: none; }
  .ql-snd5__box::before { forced-color-adjust: none; background: Canvas; border: 1px solid GrayText; box-shadow: none; filter: none; }
  .ql-snd5__box.is-today::before { border: 2px solid ButtonText; }
  .ql-snd5__box.is-cued::before { border-color: CanvasText; }
  .ql-snd5__box.is-on::before { border: 3px solid Highlight; }
  .ql-snd5__box:focus-visible::before { outline: 2px solid CanvasText; outline-offset: 2px; }
  .ql-snd5__label, .ql-snd5__box.is-today .ql-snd5__label { forced-color-adjust: none; background: Canvas; color: CanvasText; text-shadow: none; box-shadow: none; }
  .ql-snd5__box:not(.is-today) .ql-snd5__label { color: GrayText; }
  .ql-snd5__plate, .ql-snd5__plate b, .ql-snd5__plate span { forced-color-adjust: none; background: Canvas; color: CanvasText; text-shadow: none; box-shadow: none; }
  .ql-snd5__side--plan { border-block-start-color: CanvasText; }
}
@media print {
  .ql-snd5__stage { display: none !important; }
  .ql-snd5 { background: #fff; color: #000; }
}

/* ===========================================================================
   SECTION 6 . OFF AIR (round SOUND6)
   The close, and the quietest section on the page. The library's last track,
   written by the code-behind (Tail) as bars at its real loudness against the
   loudest track the site carries (--v, the amplitude itself, so a whisper
   stays a whisper), runs out onto the page's hairline, and the line carries
   on to the edge of the screen. From it, past the music's end, hangs the
   studio's ON AIR light on two brass rods: dark, and lit blue only while
   something plays, from wherever on the page it was started (is-on). The
   picture is the light box with a blank glass; the rods, the words on the
   glass and their light are drawn here, placed from the picture's
   measurements (--oa-*).

   One grid. On a wide screen the track runs across both columns and the
   light hangs in the second, beside the words; on a narrow one it hangs
   beside the track's caption, and the words follow. The track's columns
   are the grid's own (subgrid), so the music ends where the first column
   does, at every width. The light is its own container (oa): inside it,
   1cqw is 1% of the box's width.
   =========================================================================== */

/* -- 25 . section 6: the room, the grid, the last track -------------------- */

.ql-snd6 {
  --wave-h: 64px;                         /* the band the track is drawn in   */
  --rod-l: clamp(18px, 4.6vw, 34px);      /* the rods: the line to the box    */
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  container: snd6 / inline-size;
  padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(4rem, 2.5rem + 5vw, 7.5rem);
}
@media (min-width: 1024px) {
  .ql-snd6 { --wave-h: 104px; --rod-l: clamp(48px, 1.5rem + 2.6vw, 80px); }
}
/* the room: the lamp's last warmth up to the left, and a hairline where the
   archive's room ends */
.ql-snd6::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(52% 44% at 16% 4%, rgb(255 214 150 / .04), transparent 70%),
    linear-gradient(90deg, transparent, var(--ql-line) 18%, var(--ql-line) 82%, transparent) top / 100% 1px no-repeat;
}
.ql-snd6__grid {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  column-gap: var(--ql-sp-7);
  row-gap: clamp(2.25rem, 1.5rem + 2.4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 1024px) {
  .ql-snd6__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(2.5rem, 4.4vw, 5.5rem);
  }
}

/* the last track: its bars in the first column, the rule under them across
   the screen, and its caption under the bars */
.ql-snd6__tail {
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  grid-template-columns: subgrid;
  row-gap: var(--ql-sp-5);
  min-inline-size: 0;
}
.ql-snd6__wave {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  block-size: var(--wave-h);
}
/* the hairline the music runs out onto, from one edge of the screen to the
   other: the section is the container, so 100cqw is the screen's width */
.ql-snd6__wave::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline: calc((100% - 100cqw) / 2);
  block-size: 1px;
  background: linear-gradient(90deg, var(--ql-line), var(--ql-line-strong) 22%, var(--ql-line-strong) 58%, var(--ql-line));
  pointer-events: none;
}
.ql-snd6__bars {
  position: relative;
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 1px;
  block-size: 100%;
}
/* the band's full scale, top and bottom: where the loudest track the site
   carries would reach. The music under it is as loud as it is. */
.ql-snd6__bars::before,
.ql-snd6__bars::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  block-size: 1px;
  background: linear-gradient(90deg, rgb(var(--ql-white-rgb) / .07), rgb(var(--ql-white-rgb) / .07) 70%, transparent);
  pointer-events: none;
}
.ql-snd6__bars::before { inset-block-start: 0; }
.ql-snd6__bars::after { inset-block-end: 0; }
/* each reading, centred on the line, as tall as it is loud */
.ql-snd6__bars i {
  flex: 1 1 0;
  min-inline-size: 0;
  block-size: calc(var(--v) * 100%);
  min-block-size: 1px;
  border-radius: 1px;
  background: var(--snd-bar);
  transition: background-color .45s var(--ql-ease);
}
/* 120 readings: every third on a phone, every other on a tablet, all of them
   from 1280px. The same selector undoes itself later in the file, so the
   two never compose. */
.ql-snd6__bars i:not(:nth-of-type(3n+1)) { display: none; }
@media (min-width: 736px) {
  .ql-snd6__bars { gap: 2px; }
  .ql-snd6__bars i:not(:nth-of-type(3n+1)) { display: block; }
  .ql-snd6__bars i:nth-of-type(even) { display: none; }
}
@media (min-width: 1280px) {
  .ql-snd6__bars i:nth-of-type(even) { display: block; }
}
.ql-snd6__mark {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ql-sp-2) var(--ql-sp-8);
  margin: 0;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ql-text-subtle);
}
.ql-snd6__mark b {
  font-weight: var(--ql-fw-semibold);
  color: var(--ql-text-body);
  transition: color .45s var(--ql-ease);
}
/* lit while it is the one sounding */
.ql-snd6__tail.is-on .ql-snd6__bars i { background: var(--snd-live); }
.ql-snd6__tail.is-on .ql-snd6__mark b { color: var(--snd-live); }

/* the arrival: the first time the track is seen it plays itself in, reading
   by reading, out of the line */
.ql-snd6__tail.is-off .ql-snd6__bars i { scale: 1 0; }
.ql-snd6__tail.is-arriving .ql-snd6__bars i {
  transition:
    scale .46s var(--ql-ease) calc(var(--i) * 7ms),
    background-color .45s var(--ql-ease);
}

/* -- 26 . section 6: the ON AIR light ------------------------------------- */

/* hung from the line: its top is the line, the rods run down to the box */
.ql-snd6__sign {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  inline-size: min(100%, 300px);
  margin-block-start: calc(var(--wave-h) / 2);
  padding-block-start: var(--rod-l);
  container: oa / inline-size;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
@media (min-width: 1024px) {
  .ql-snd6__sign { grid-row: 1 / 3; justify-self: center; inline-size: min(100%, 440px); }
}
/* the rods: polished brass, lit from the left, a collar where each meets the
   line, and their feet behind the box */
.ql-snd6__rod {
  position: absolute;
  inset-block-start: 0;
  inline-size: max(2px, .55cqw);
  block-size: calc(var(--rod-l) + 2cqw);
  translate: -50% 0;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--snd-brass-lo), var(--snd-brass-hi) 32%, var(--snd-brass) 58%, var(--snd-brass-lo));
  filter: drop-shadow(1px 1px 1px rgb(0 0 0 / .45));
}
.ql-snd6__rod--l { inset-inline-start: 16%; }
.ql-snd6__rod--r { inset-inline-start: 84%; }
.ql-snd6__rod::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  inline-size: max(7px, 2.4cqw);
  block-size: max(3px, .9cqw);
  translate: -50% -50%;
  border-radius: max(1px, .3cqw);
  background: linear-gradient(180deg, var(--snd-brass-hi), var(--snd-brass) 45%, var(--snd-brass-lo));
  box-shadow: 0 1px 2px rgb(0 0 0 / .5);
}
/* the box: the picture's walnut, cut to its edges (the picture is wider and
   taller, and clear round the box) */
.ql-snd6__box {
  position: relative;
  display: block;
  isolation: isolate;
  aspect-ratio: var(--oa-box-ar);
}
.ql-snd6__pic {
  position: absolute;
  inset-inline-start: calc(-100% * var(--oa-x0) / (var(--oa-x1) - var(--oa-x0)));
  inset-block-start: calc(-100% * var(--oa-y0) / (var(--oa-y1) - var(--oa-y0)));
  inline-size: calc(100% * 100 / (var(--oa-x1) - var(--oa-x0)));
  max-inline-size: none;
  block-size: auto;
  filter: drop-shadow(.7cqw 1.3cqw 1.5cqw rgb(0 0 0 / .62));
}
/* its light on the wall, while it is lit */
.ql-snd6__box::before {
  content: "";
  position: absolute;
  inset: -70% -22%;
  z-index: -1;
  background: radial-gradient(closest-side, rgb(var(--snd-live-rgb) / .24), rgb(var(--snd-live-rgb) / .08) 55%, transparent);
  opacity: 0;
  transition: opacity .8s var(--ql-ease);
  pointer-events: none;
}
/* the glass, over the picture's own: the words on it, and its light */
.ql-snd6__glass {
  position: absolute;
  inset-inline-start: calc(100% * (var(--oa-gx0) - var(--oa-x0)) / (var(--oa-x1) - var(--oa-x0)));
  inset-block-start: calc(100% * (var(--oa-gy0) - var(--oa-y0)) / (var(--oa-y1) - var(--oa-y0)));
  inline-size: calc(100% * (var(--oa-gx1) - var(--oa-gx0)) / (var(--oa-x1) - var(--oa-x0)));
  block-size: calc(100% * (var(--oa-gy1) - var(--oa-gy0)) / (var(--oa-y1) - var(--oa-y0)));
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: calc(100cqw * var(--oa-gr) / (var(--oa-x1) - var(--oa-x0)));
}
.ql-snd6__glass::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(64% 110% at 50% 52%, rgb(var(--snd-live-rgb) / .58), rgb(var(--snd-live-rgb) / .22) 62%, rgb(var(--snd-live-rgb) / .09));
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .8s var(--ql-ease);
}
/* off: the letters only just there behind the smoked glass */
.ql-snd6__on {
  position: relative;
  margin-inline-end: -.16em;
  font-family: var(--ql-font-sans);
  font-size: 11.5cqw;
  font-weight: var(--ql-fw-heavy);
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgb(var(--snd-print-rgb) / .13);
  text-shadow: 0 -.12cqw 0 rgb(0 0 0 / .55);
  transition: color .8s var(--ql-ease), text-shadow .8s var(--ql-ease);
}
/* on: lit blue from behind, the moment something plays (a tube's strike),
   and dimming slowly when it stops */
.ql-snd6__sign.is-on .ql-snd6__box::before,
.ql-snd6__sign.is-on .ql-snd6__glass::before { opacity: 1; transition-duration: .2s; }
.ql-snd6__sign.is-on .ql-snd6__on {
  color: rgb(234 245 255);
  text-shadow:
    0 0 .3cqw rgb(var(--snd-live-rgb)),
    0 0 1.2cqw rgb(var(--snd-live-rgb) / .9),
    0 0 3cqw rgb(var(--snd-live-rgb) / .5);
  transition-duration: .2s;
}
@keyframes ql-snd6-strike {
  0%   { opacity: .2; }
  10%  { opacity: .85; }
  18%  { opacity: .3; }
  32%  { opacity: 1; }
  100% { opacity: 1; }
}
.ql-snd6__sign.is-on .ql-snd6__on,
.ql-snd6__sign.is-on .ql-snd6__glass::before {
  animation: ql-snd6-strike .5s steps(1, end) both;
}

/* -- 27 . section 6: the words --------------------------------------------- */

.ql-snd6__words {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  justify-items: start;
  row-gap: var(--ql-sp-7);
  min-inline-size: 0;
}
@media (min-width: 1024px) {
  .ql-snd6__words { grid-column: 1; }
}
.ql-snd6__title {
  margin: 0;
  max-inline-size: 15ch;
  font-size: var(--ql-fs-d2);
  line-height: 1.05;
  font-weight: var(--ql-fw-bold);
  letter-spacing: -.036em;
  color: var(--ql-text-strong);
  text-wrap: balance;
}
.ql-snd6__lead {
  margin: 0;
  max-inline-size: 50ch;
  font-size: clamp(1rem, .93rem + .28vw, 1.2rem);
  line-height: 1.6;
  color: var(--ql-text-muted);
  text-wrap: pretty;
}
.ql-snd6__lead em { font-style: normal; color: var(--ql-text-strong); }
/* the rest of Qlynic, as a rundown */
.ql-snd6__list {
  margin: 0;
  max-inline-size: 62ch;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-xs);
  line-height: 1.85;
  letter-spacing: .02em;
  color: var(--ql-text-subtle);
}
.ql-snd6__go {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ql-sp-5) var(--ql-sp-6);
  margin: var(--ql-sp-4) 0 0;
}
@media (max-width: 479.98px) {
  .ql-snd6__go { justify-self: stretch; flex-direction: column; align-items: stretch; }
}

/* -- 28 . section 6: motion off, colours forced, paper -------------------- */

@media (prefers-reduced-motion: reduce) {
  .ql-snd6__sign.is-on .ql-snd6__on,
  .ql-snd6__sign.is-on .ql-snd6__glass::before { animation: none; }
}
@media (forced-colors: active) {
  .ql-snd6__pic { opacity: .35; filter: none; }
  .ql-snd6__box::before, .ql-snd6__glass::before, .ql-snd6__rod::before { display: none; }
  .ql-snd6__wave::before, .ql-snd6__rod { forced-color-adjust: none; background: GrayText; filter: none; }
  .ql-snd6__bars i { forced-color-adjust: none; background: CanvasText; }
  .ql-snd6__tail.is-on .ql-snd6__bars i { background: Highlight; }
  .ql-snd6__tail.is-on .ql-snd6__mark b { color: Highlight; }
  .ql-snd6__glass { border: 1px solid GrayText; }
  .ql-snd6__on { forced-color-adjust: none; color: GrayText; text-shadow: none; }
  .ql-snd6__sign.is-on .ql-snd6__glass { border: 2px solid Highlight; }
  .ql-snd6__sign.is-on .ql-snd6__on { color: Highlight; text-shadow: none; }
}
@media print {
  .ql-snd6__sign, .ql-snd6__wave { display: none !important; }
  .ql-snd6 { background: #fff; color: #000; }
}