/* =====================================================================
   XMAS-RADIO-v1: the seasonal Christmas radio (a small carol player).
   Loaded by: index.html, christmas-lights/index.html,
   christmas-lights/sioux-falls-sd/index.html and
   christmas-lights/sioux-city-ia/index.html. On each page the radio is
   three sentinel blocks:

     <!-- XMAS-RADIO-v1:css START -->   ... END   this file's <link>, the
                                                  homepage skin's <link>
                                                  (homepage only) and a
                                                  <noscript> rule that hides
                                                  the radio without JS
     <!-- XMAS-RADIO-v1:radio START --> ... END   the markup (#xr-radio)
     <!-- XMAS-RADIO-v1:js START -->    ... END   files/template/js/xr-radio.js

   scripts/xmas-banner.js "off" mode (Dec 26 by cron,
   .github/workflows/xmas-banner.yml) removes every XMAS-RADIO-v1 block
   from those pages. This file, xr-radio-home.css, xr-radio.js and the
   audio folder can then stay on disk unused until next season.

   The music is in files/account/audio/christmas-radio/. Its license
   record (source, license, credit line, changes made) is LICENSE.txt in
   that folder. The tracks are CC BY 4.0, so the "Music credits" button
   must stay reachable wherever the radio is shown.

   What is here: the in-page console radio, plus a mini-player that
   exists only while the radio is on and the console is scrolled out of
   view. The homepage's desktop look (the small vintage set by the wall
   switch, 1024 and up) is in xr-radio-home.css, which loads after this.
   - everything is scoped under #xr-radio or #xr-mini, classes are xr-*
   - the band's height is fixed here, so it is reserved at first paint
   - nothing goes above z-index 96 (sticky CTA bar 97, chat 98, #nav 99)
   - cream plate, dark slot and lever are the wall switch's own recipe
     (xmas-banner.css), so the two read as one set
   - focus rings are !important because styles1.1.css has
     button:focus { outline: none !important }
   ===================================================================== */
#xr-radio {
  --xr-gold: #ffd88a;
  --xr-ink: #fff7e8;
  --xr-night: #050a16;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  min-height: 138px;
  padding: 8px 0 0;
  background: var(--xr-night);
  font-family: 'Titillium Web', Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
#xr-radio *, #xr-radio *::before, #xr-radio *::after { box-sizing: border-box; }
#xr-radio .xr-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  width: min(1180px, 100% - 2.6rem);
  margin: 0 auto;
}
#xr-radio .xr-sr, #xr-mini .xr-sr {
  display: block; /* Trends hides bare paragraphs inside a header */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
#xr-radio .xr-line { display: none; margin: 0; }

/* ---------- the cabinet ---------- */
#xr-radio .xr-set {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 940px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  grid-template-rows: 38px 44px;
  grid-template-areas: "grille dial dial" "power power ctl";
  gap: 6px 8px;
  height: 104px;
  padding: 8px 9px;
  border-radius: 10px;
  background: linear-gradient(160deg, #faf7f0 0, #e7e0d2 55%, #d3cbba 100%);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .35), inset 0 1px 0 #fff, inset 0 -2px 3px rgba(0, 0, 0, .14);
}
#xr-radio .xr-screw { display: none; }
#xr-radio .xr-grille {
  grid-area: grille;
  border-radius: 5px;
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 3px, rgba(255, 255, 255, .13) 3px 4px, rgba(0, 0, 0, 0) 4px 6px),
    linear-gradient(#2b2620, #17140f);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .8);
}

/* ---------- the dial ---------- */
#xr-radio .xr-dial {
  grid-area: dial;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  background: #14161d;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .75), 0 1px 0 rgba(255, 255, 255, .8);
  transition: box-shadow .6s ease;
}
#xr-radio .xr-glass {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #fff6dc 0, #ffe6ad 55%, #ffd27c 100%);
  box-shadow: inset 0 2px 5px rgba(120, 70, 0, .45);
  opacity: 0;
  transition: opacity .6s ease;
}
/* the ruler along the foot of the glass */
#xr-radio .xr-dial::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 9px;
  pointer-events: none;
  color: #8d8674;
  background:
    repeating-linear-gradient(90deg, currentColor 0 1px, rgba(0, 0, 0, 0) 1px 40px) 6px 100% / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, currentColor 0 1px, rgba(0, 0, 0, 0) 1px 8px) 6px 100% / 100% 5px no-repeat;
  opacity: .55;
}
#xr-radio.is-on .xr-dial { box-shadow: inset 0 2px 5px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .8), 0 0 22px rgba(255, 200, 110, .55); }
#xr-radio.is-on .xr-glass { opacity: 1; }
#xr-radio.is-on .xr-dial::after { color: #6b4d16; opacity: .7; }
#xr-radio .xr-win { position: absolute; inset: 0; overflow: hidden; }
/* the names do not all fit: they slide, and fade out at an end of the glass
   that has more dial beyond it instead of being cut off */
#xr-radio.is-slide .xr-win {
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 var(--xr-ml, 0px), #000 calc(100% - var(--xr-mr, 0px)), rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 var(--xr-ml, 0px), #000 calc(100% - var(--xr-mr, 0px)), rgba(0, 0, 0, 0) 100%);
}
#xr-radio .xr-scale {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: max-content;
  min-width: 100%;
  height: 100%;
  padding: 0 6px;
  transform: translateX(var(--xr-tx, 0px));
}
/* .xr-go arrives one frame after the script has placed the dial, so the
   first placement never animates */
#xr-radio.xr-go .xr-scale { transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
#xr-radio button.xr-st {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 2px 11px 9px;
  font: 500 1.06rem/1 'Teko', 'Titillium Web', sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #b3ac9b;
  cursor: pointer;
  transition: color .4s ease;
}
#xr-radio button.xr-st:hover { color: #fff7e8; }
#xr-radio.is-on button.xr-st { color: #5a4520; }
#xr-radio.is-on button.xr-st:hover { color: #1d1408; }
#xr-radio.is-on button.xr-st[aria-current="true"] { color: #1d1408; font-weight: 600; }
#xr-radio .xr-needle {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3px;
  height: 13px;
  margin-left: -1.5px;
  border-radius: 2px 2px 0 0;
  background: #8d8674;
  pointer-events: none;
  transform: translateX(var(--xr-nx, 12px));
}
#xr-radio.xr-go .xr-needle { transition: transform .7s cubic-bezier(.2, .8, .2, 1), left .35s ease, background-color .4s ease; }
#xr-radio .xr-needle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -4px;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: inherit;
}
#xr-radio.is-on .xr-needle { background: #c8102e; box-shadow: 0 0 6px rgba(200, 16, 46, .55); }

/* ---------- power: the wall switch's slot and lever, plus the readout ---------- */
#xr-radio button.xr-power {
  all: unset;
  box-sizing: border-box;
  grid-area: power;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0 12px 0 9px;
  border-radius: 6px;
  background: linear-gradient(#2b2620, #17140f);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .8);
  color: #f3ecdc;
  cursor: pointer;
}
#xr-radio .xr-slot {
  position: relative;
  flex: none;
  width: 16px;
  height: 28px;
  border-radius: 4px;
  background: linear-gradient(160deg, #faf7f0 0, #e7e0d2 55%, #d3cbba 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), inset 0 1px 0 #fff;
}
#xr-radio .xr-slot::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 8px;
  height: 20px;
  border-radius: 2px;
  background: linear-gradient(#1b1813, #3a342b);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .6);
}
#xr-radio .xr-lever {
  position: absolute;
  left: 5px;
  top: 6px;
  width: 6px;
  height: 9px;
  border-radius: 2px;
  background: linear-gradient(#fffdf8, #d9d1c0);
  box-shadow: 0 -2px 3px rgba(0, 0, 0, .35), inset 0 -2px 0 rgba(0, 0, 0, .08);
  transform: translateY(7px);
  transition: transform .14s cubic-bezier(.5, 1.8, .5, 1);
}
#xr-radio.is-on .xr-lever { transform: none; }
#xr-radio .xr-now {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font: 600 .95rem/1.25 'Titillium Web', Arial, sans-serif;
  letter-spacing: .01em;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#xr-radio .xr-now-b { display: none; }
@media (max-width: 479px) { #xr-radio .xr-w { display: none; } }
@media (max-width: 379px) { #xr-radio button.xr-st { padding: 2px 8px 9px; font-size: .98rem; letter-spacing: .05em; } }
#xr-radio.is-on .xr-now {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  line-height: 1.12;
  color: var(--xr-gold);
  text-shadow: 0 0 12px rgba(255, 190, 90, .45);
}
/* parts only the homepage's desktop radio uses */
#xr-radio .xr-tiny, #xr-radio .xr-read, #xr-radio .xr-caps, #xr-radio .xr-tuck { display: none; }
/* a device that will not let a page set the volume (iPhone, iPad): no dead slider */
#xr-radio.xr-novol .xr-volwrap { display: none; }
#xr-radio.is-blocked .xr-now, #xr-radio.is-error .xr-now { color: #fff; text-shadow: none; }

/* ---------- the knobs ---------- */
#xr-radio .xr-ctl { grid-area: ctl; display: flex; align-items: center; gap: 8px; }
#xr-radio button.xr-knob {
  all: unset;
  box-sizing: border-box;
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 28%, #575045 0, #2b2620 45%, #15120e 100%);
  box-shadow: 0 3px 5px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .28);
  color: #f3ecdc;
  cursor: pointer;
}
#xr-radio button.xr-knob:active { transform: translateY(1px); }
#xr-radio .xr-knob svg { display: block; width: 22px; height: 22px; fill: currentColor; }
#xr-radio .xr-knob .xr-wave, #xr-radio .xr-knob .xr-x { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
#xr-radio .xr-knob .xr-x { display: none; }
#xr-radio .xr-mute[aria-pressed="true"] .xr-wave { display: none; }
#xr-radio .xr-mute[aria-pressed="true"] .xr-x { display: inline; }
#xr-radio .xr-volwrap { display: none; }

/* ---------- music credits: a quiet text button under the cabinet ---------- */
#xr-radio .xr-foot { width: min(1180px, 100% - 2.6rem); max-width: 940px; margin: 0 auto; text-align: left; }
#xr-radio button.xr-cred-b {
  all: unset;
  box-sizing: border-box;
  display: flex;   /* a block-level box: an inline one sits on a line box whose height follows the root font size */
  width: max-content;
  align-items: center;
  height: 26px;
  padding: 0 4px;
  font: 600 .78rem/1 'Titillium Web', Arial, sans-serif;
  letter-spacing: .02em;
  color: #c9d1e3;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
#xr-radio button.xr-cred-b:hover, #xr-radio button.xr-cred-b[aria-expanded="true"] { color: var(--xr-gold); }
#xr-radio button.xr-cred-b:focus-visible { outline: 3px solid var(--xr-gold) !important; outline-offset: -1px; border-radius: 4px; }
#xr-radio p.xr-cred {
  display: block;
  margin: 2px 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 216, 138, .4);
  border-radius: 8px;
  background: #0b1224;
  color: #e9edf6;
  font: 400 .84rem/1.5 'Titillium Web', Arial, sans-serif;
  text-align: left;
  overflow-wrap: anywhere;
}
#xr-radio p.xr-cred[hidden] { display: none; }
#xr-radio p.xr-cred a { color: var(--xr-gold); text-decoration: underline; }
#xr-radio p.xr-cred a:focus-visible { outline: 3px solid var(--xr-gold) !important; outline-offset: 2px; }

/* ---------- focus (styles1.1.css has button:focus { outline: none !important }) ---------- */
#xr-radio button.xr-power:focus-visible,
#xr-radio button.xr-knob:focus-visible,
#xr-radio input.xr-vol:focus-visible {
  outline: 3px solid #24539f !important;
  outline-offset: 2px;
}
#xr-radio button.xr-st:focus-visible {
  outline: 3px solid var(--xr-gold) !important;
  outline-offset: -4px;
  border-radius: 6px;
}
#xr-radio.is-on button.xr-st:focus-visible { outline-color: #24539f !important; }

/* ---------- 700 and up: still a radio-sized set, never the width of the page.
   Same two shelves as the phone set, a little larger, with a volume slider. ---------- */
@media (min-width: 700px) {
  #xr-radio { min-height: 154px; padding: 12px 0 0; }
  #xr-radio .xr-inner { justify-content: center; }
  #xr-radio .xr-set {
    flex: none;
    width: 480px;
    margin: 0;
    grid-template-columns: 58px minmax(0, 1fr) 190px;
    grid-template-rows: 44px 44px;
    grid-template-areas: "grille dial dial" "power power ctl";
    gap: 8px 10px;
    height: 116px;
    padding: 10px 16px;
  }
  #xr-radio .xr-foot { width: 480px; max-width: none; }
  #xr-radio .xr-screw {
    display: block;
    position: absolute;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: linear-gradient(135deg, transparent 44%, #6e6758 44% 56%, transparent 56%), radial-gradient(circle at 35% 35%, #d8d1c1, #948b78);
  }
  #xr-radio .xr-screw-a { left: 5px; }
  #xr-radio .xr-screw-b { right: 5px; }
  #xr-radio .xr-dial::after { height: 11px; background-size: 100% 11px, 100% 6px; }
  #xr-radio button.xr-st { padding: 0 14px 10px; font-size: 1.22rem; }
  #xr-radio .xr-needle { height: 16px; }
  #xr-radio .xr-ctl { gap: 10px; }
  #xr-radio button.xr-knob { width: 36px; height: 36px; }
  #xr-radio .xr-knob svg { width: 20px; height: 20px; }
  #xr-radio .xr-volwrap { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; }
  #xr-radio input.xr-vol {
    all: unset;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    background: linear-gradient(#1b1813, #3a342b) 0 50% / 100% 8px no-repeat;
  }
  #xr-radio input.xr-vol::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(#1b1813, #3a342b); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .6); }
  #xr-radio input.xr-vol::-moz-range-track { height: 8px; border-radius: 4px; background: linear-gradient(#1b1813, #3a342b); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .6); }
  #xr-radio input.xr-vol::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 22px;
    margin-top: -7px;
    border: 0;
    border-radius: 3px;
    background: linear-gradient(#fffdf8, #d9d1c0);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 2px 3px rgba(0, 0, 0, .4);
  }
  #xr-radio input.xr-vol::-moz-range-thumb {
    width: 14px;
    height: 22px;
    border: 0;
    border-radius: 3px;
    background: linear-gradient(#fffdf8, #d9d1c0);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 2px 3px rgba(0, 0, 0, .4);
  }
}

/* ---------- 900 and up: the invitation sits beside the cabinet, and the pair
   is centered under the band above. The line has a fixed width so the credits
   link can line up under the cabinet's left edge. ---------- */
@media (min-width: 900px) {
  #xr-radio .xr-line { display: block; flex: none; width: 236px; }
  #xr-radio .xr-line-a {
    display: block;
    margin-bottom: .3rem;
    font: 700 .72rem/1 'Titillium Web', Arial, sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--xr-gold);
  }
  #xr-radio .xr-line-b { display: block; font: 600 1.12rem/1.25 'Titillium Web', Arial, sans-serif; color: var(--xr-ink); }
  #xr-radio .xr-foot { width: 744px; padding-left: 264px; }
  #xr-radio:not(.is-on):not(.is-error) .xr-now-a { display: none; }
  #xr-radio:not(.is-on):not(.is-error) .xr-now-b { display: inline; }
}

/* ---------- homepage: the radio sits on the hero's own night field ----------
   It goes in as the hero's last child. The hero's copy block ends with
   padding of (lid + 2.25rem), the lid being the part the blue swoosh below
   paints over, so the band pulls itself up into that padding and hands the
   lid back underneath. From 1024 it leaves the flow: see the next block. */
#xr-radio.xr-band--home {
  z-index: 3;
  min-height: 0;
  margin-top: calc(-9vw - 2.25rem + 16px);
  padding: 0 0 calc(9vw + 14px);
  background: none;
}
#xr-radio.xr-band--home .xr-inner, #xr-radio.xr-band--home .xr-foot { width: auto; margin: 0 1.25rem; }
@media (min-width: 700px) {
  #xr-radio.xr-band--home { margin-top: calc(-9vw - 2.5rem + 18px); padding-bottom: calc(9vw + 18px); }
  #xr-radio.xr-band--home .xr-inner, #xr-radio.xr-band--home .xr-foot { margin: 0 2.5rem; }
  /* in the hero the headline does the inviting: the set alone, on the copy's left edge */
  #xr-radio.xr-band--home .xr-inner { justify-content: flex-start; }
  #xr-radio.xr-band--home .xr-foot { width: auto; padding-left: 0; }
  #xr-radio.xr-band--home .xr-line { display: none; }
  #xr-radio.xr-band--home:not(.is-on):not(.is-error) .xr-now-a { display: inline; }
  #xr-radio.xr-band--home:not(.is-on):not(.is-error) .xr-now-b { display: none; }
}
/* ---------- the mini-player (only in the DOM while the radio is on) ---------- */
#xr-mini {
  position: fixed;
  left: 12px;
  bottom: var(--xr-b, 16px);
  z-index: 96;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 2px;
  max-width: min(var(--xr-mw, 400px), 400px);
  padding: 5px 6px 5px 14px;
  border: 1px solid rgba(255, 216, 138, .5);
  border-radius: 28px;
  background: #0b1224;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
  color: #fff7e8;
  font: 600 .92rem/1.2 'Titillium Web', Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
  animation: xr-in .25s ease-out both;
  transition: bottom .22s ease, opacity .18s ease, visibility .18s;
}
#xr-mini.is-dodge { opacity: 0; visibility: hidden; pointer-events: none; }
#xr-mini[hidden] { display: none; }
@keyframes xr-in { from { opacity: 0; transform: translateY(8px); } }
#xr-mini .xr-mini-t {
  flex: 1 1 auto;
  min-width: 0;
  margin-right: 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#xr-mini .xr-mini-k {
  display: block;
  margin-bottom: 1px;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #ffd88a;
}
#xr-mini button {
  all: unset;
  box-sizing: border-box;
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff7e8;
  cursor: pointer;
}
#xr-mini button:hover { background: rgba(255, 255, 255, .1); }
#xr-mini button svg { display: block; width: 22px; height: 22px; fill: currentColor; }
#xr-mini button svg .xr-wave, #xr-mini button svg .xr-x { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
#xr-mini button.xr-mini-play { background: linear-gradient(160deg, #faf7f0 0, #e7e0d2 55%, #d3cbba 100%); color: #17140f; }
#xr-mini button.xr-mini-play:hover { background: #fff; }
#xr-mini button:focus-visible { outline: 3px solid #ffd88a !important; outline-offset: 2px; }
#xr-mini .xr-i-off { display: none; }
#xr-mini [aria-pressed="true"] .xr-i-on { display: none; }
#xr-mini [aria-pressed="true"] .xr-i-off { display: inline; }
/* narrow slot (a phone with the chat launcher beside it): title over the buttons */
#xr-mini.xr-mini--stack { flex-wrap: wrap; padding: 7px 6px 5px; border-radius: 18px; }
#xr-mini.xr-mini--stack .xr-mini-t { flex: 0 0 100%; margin: 0 0 4px; padding: 0 8px; }
#xr-mini.xr-mini--stack .xr-mini-k { display: inline; margin-right: .4em; }
#xr-mini.xr-mini--stack button { width: 42px; height: 42px; }
/* tucked away: one round button */
#xr-mini.is-min { padding: 4px; }
#xr-mini.is-min > :not(.xr-mini-open) { display: none; }
#xr-mini:not(.is-min) .xr-mini-open { display: none; }
/* stand down for the quote modal, the branch pickers and the open phone menu */
body.modal-open #xr-mini,
body:has(.modal-deep-lawn.is-active) #xr-mini,
body.mcb-call-open #xr-mini,
body.cl-callsheet-open #xr-mini { display: none; }
@media (max-width: 1023px) {
  body:has(#nav-menus.is-active) #xr-mini { display: none; }
}
@media (min-width: 700px) {
  #xr-mini { left: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  #xr-radio *, #xr-radio *::before, #xr-radio *::after { transition: none !important; animation: none !important; }
  #xr-mini { animation: none; transition: none; }
}