/* ghillie.wiki — one-page app shell + per-section styles
   Each section only overrides what's actually different about it;
   everything shared lives in base.css. */

/* section switching: app.js toggles .active/.visible to crossfade sections.
   Using a real CSS transition (instead of animating via jQuery) so the fade
   keeps working no matter how many times a section is shown and hidden —
   jQuery's fadeOut/fadeIn lost track of a section's animation state after
   its first hide/show cycle, which is why the fade used to stop working
   after the first tab switch. */
.page {
  display: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.page.active {
  display: block;
}

.page.active.visible {
  opacity: 1;
}

/* the artist handle wherever it appears in running text or under a song
   title — drawn in the same pixel font as the index page title (the font
   was extended with hand-drawn glyphs for the handle's characters).
   20px: most of the handle's letters are lowercase/small caps, which sit
   low in this font, so it needs a bigger size than the 12–13px text around
   it for its letters to come out about the same height.
   line-height 0 stops that bigger size from making its line taller than
   the lines around it (the glyphs still draw normally, they just don't
   push the neighboring lines apart). nowrap keeps the handle from
   splitting across two lines. */
.handle {
  font-family: "RuneScape Large", "Times New Roman", serif;
  font-size: 20px;
  line-height: 0;
  white-space: nowrap;
}

/* the handle's own line under each song title (was an inline
   font-size:small <p>) */
.handle-byline {
  margin: 1em 0;
}

/* ---- home ("Hear") ---- */

#section-Hear p {
  margin-top: 0;
}

/* ---- about ---- */

#section-about .box {
  padding: 12px;
  margin: auto;
  border: 1px solid white;
  width: 310px;
  font-size: 12px;
}

/* ---- sightings ---- */

#section-sightings .box {
  margin: auto;
  width: 25%;
  font-size: 12px;
}

#section-sightings h4 {
  font-family: "Times New Roman";
  margin: 20px 0 6px;
}

/* on narrow screens, let the intro text use most of the screen instead of
   wrapping to one word per line */
@media (max-width: 699px) {
  #section-sightings .box:not(.sighting-report) {
    width: 88%;
  }
}

#section-sightings a {
  color: hotpink;
}

.sighting-reports-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  width: 92%;
  max-width: 1000px;
  /* same gap above the reports as between them */
  margin: 20px auto 0;
}

@media (min-width: 700px) {
  .sighting-reports-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .sighting-reports-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* each report is styled as a case file (same look as the dossier page):
   case number + status up top, the photo, label/value fields, then the
   field notes */
.sighting-report {
  max-width: 420px;
  margin: 0 auto;
  text-align: left;
  padding: 12px 14px 14px;
  border: 1px solid white;
}

.case-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px dashed #444;
}

/* pixel font, lime, like the dossier's section headings */
.case-no {
  font-family: "RuneScape Large", "Times New Roman", serif;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 1px;
  color: #b9ff00;
}

.case-status {
  font-size: 10px;
  letter-spacing: 0.5px;
  padding: 2px 7px 1px;
  white-space: nowrap;
}

/* confirmed reports get the site's teal, unconfirmed ones stay gray */
.case-confirmed {
  color: #0494aa;
  border: 1px solid #0494aa;
}

.case-unconfirmed {
  color: #888;
  border: 1px dashed #666;
}

.case-fields {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px 12px;
  margin: 0 0 12px;
  font-size: 11px;
}

.case-fields dt {
  color: #999;
}

.case-fields dd {
  margin: 0;
}

.case-notes-label {
  margin: 0 0 4px;
  font-size: 10px;
  letter-spacing: 1px;
  color: #999;
}

#section-sightings .sighting-reports-grid .box {
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
}

.sighting-photo-placeholder {
  margin: 0 auto 12px;
  width: 100%;
  box-sizing: border-box;
  aspect-ratio: 4 / 3;
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #666;
  overflow: hidden;
}

/* the report with no photo: an empty dashed frame instead */
.sighting-photo-placeholder.case-no-photo {
  border: 1px dashed #555;
  font-size: 10px;
}

.sighting-photo-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the animated sightings are served as WebP (same frames, smaller files)
   with the original GIF as a fallback, via <picture>. display: contents
   takes the <picture> wrapper out of the layout so the <img> inside sits
   in the frame exactly as it did before. */
.sighting-photo-placeholder picture {
  display: contents;
}

.sighting-body {
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
}

.sighting-submit {
  font-size: 11px;
  margin-top: 16px;
}

.redacted {
  background-color: #eee;
  color: #eee;
  cursor: pointer;
  transition: 0.2s ease;
}

.redacted:hover {
  background-color: transparent;
  color: inherit;
}

/* ---- think ---- */

#section-think .box {
  padding: 12px;
  margin: auto;
  width: 310px;
  font-size: 12px;
}

#section-think a {
  color: hotpink;
  /* an <a> wrapping a block-level <h2> stretches to the full width of its
     container by default, so the whole line (way past the visible text)
     was clickable — shrink the link back down to hug the heading text. */
  display: inline-block;
}

#section-think h2 {
  font-family: "RuneScape Large", "Times New Roman", serif;
  line-height: 1;
  /* RuneScape Large renders noticeably smaller than Times New Roman at the
     same font-size (see .banner, base.css) — scaled up from the old 24px
     default to visually match how big this heading used to look. Exactly
     32px because this font is drawn on a 32-per-em pixel grid, so at 32px
     each of its pixels lands on exactly one screen pixel (sharpest). */
  font-size: 32px;
  /* the inline-block link above stops this heading's margins from merging
     with the neighbors' like they used to, which doubled the gap above the
     title — margins set by hand to restore the original spacing. */
  margin: 1px 0 21px;
}

/* the think section's sand mandala (mandala.js): laid in 2 px dither cells,
   so it's drawn small and scaled up with sharp edges */
.mandala {
  margin: 18px auto 22px;
  text-align: center;
}
.mandala canvas {
  display: block;
  margin: 0 auto;
  image-rendering: pixelated;
}

#section-think .coming-soon {
  margin: -6px 0 10px;
  font-size: 10px;
  letter-spacing: 0.5px;
}

/* ---- grimoire ---- */

#section-grimoire .box {
  padding: 12px;
  margin: auto;
  border: 1px solid white;
  width: 333px;
  font-size: 9px;
  text-align: left;
}

#section-grimoire a {
  color: hotpink;
}

#section-grimoire .collapsible {
  background-color: #000;
  color: #eee;
  cursor: pointer;
  padding: 6px;
  width: 39%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 12px;
  /* the fixed 39% width wraps the longer category labels ("channeling of
     seth") to a second line while shorter ones fit on one — keep every
     label on a single line instead; the button's own background matches
     the page behind it, so a label that runs past 39% just extends over
     black with nothing to visibly clip against */
  white-space: nowrap;
}

#section-grimoire .collapsible.active,
#section-grimoire .collapsible:hover {
  background-color: #ddd;
  color: black;
}

#section-grimoire .content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #000000;
}

/* book entries nested under a sub-category heading (e.g. "yogani" under
   "spirituality") used to all share one <p> with manual zero-width-space
   indenting and <br> between entries — a long title's wrapped 2nd line
   then fell all the way back to the paragraph's true left edge instead of
   staying under its own bullet. Each entry is now its own <p>, so a wrapped
   line just wraps within its own (now indented) box and lines up with the
   bullet automatically. margin-left matches the old hack's ~7.5px nudge so
   the at-rest look is unchanged. */
#section-grimoire .content p.grimoire-subbullet {
  /* was a shared <p> with <br> between entries (no paragraph gap) — reset
     top/bottom margin so separate <p>s still stack as tightly as before */
  margin: 0 0 0 7.5px;
}

/* the register: the grimoire's guestbook (guestbook.js). Its own box under
   the reading list, hidden until guestbook.js has a guestbook id. The form is
   the site's; Guestbooks' script adds the entries, the "load more" button,
   the not-a-machine box and the replies to it. */
#section-grimoire .register {
  margin-top: 18px;
}
#section-grimoire .register[hidden],
#section-grimoire .register [hidden] {
  display: none !important;
}
#section-grimoire .register .content {
  padding: 4px 10px 6px;
}
.register-note {
  color: #aaa;
  line-height: 1.5;
}
#guestbooks___guestbook-form {
  margin: 10px 0 4px;
}
.guestbooks___input-container {
  margin: 0 0 8px;
}
.guestbooks___input-container label {
  display: block;
  margin-bottom: 3px;
  color: #b9ff00;
  letter-spacing: 0.5px;
}
#guestbooks___guestbook-form input[type="text"],
#guestbooks___guestbook-form input[type="url"],
#guestbooks___guestbook-form input[type="email"],
#guestbooks___guestbook-form textarea {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 5px 6px;
  border: 1px solid #555;
  border-radius: 0;
  background: #000;
  color: #eee;
  font: 11px/1.4 Verdana, Geneva, sans-serif;
  outline: none;
}
#guestbooks___guestbook-form textarea {
  resize: vertical;
  min-height: 64px;
}
#guestbooks___guestbook-form input:focus,
#guestbooks___guestbook-form textarea:focus {
  border-color: #b9ff00;
}
#guestbooks___guestbook-form ::placeholder {
  color: #555;
}
/* phones zoom the whole page into a field whose text is under 16px */
@media (pointer: coarse) {
  #guestbooks___guestbook-form input[type="text"],
  #guestbooks___guestbook-form input[type="url"],
  #guestbooks___guestbook-form input[type="email"],
  #guestbooks___guestbook-form textarea {
    font-size: 16px;
  }
}
.register-send {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  margin: 10px auto 2px;
  padding: 6px 12px 5px;
  border: 1px solid #b9ff00;
  border-radius: 0;
  background: #000;
  color: #b9ff00;
  font: 15px/1 "RuneScape Large", "Times New Roman", serif;
  letter-spacing: 1px;
  cursor: pointer;
}
.register-send:hover:not(:disabled),
.register-send:focus-visible {
  border-color: #0494aa;
  color: #0494aa;
  outline: none;
}
.register-send:disabled {
  border-color: #444;
  color: #555;
  cursor: default;
}
/* the not-a-machine box (only when the guestbook has its spam check on) */
.guestbooks___pow-container {
  margin: 8px 0 0;
}
.guestbooks___pow-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
#guestbooks___pow-checkbox {
  margin: 0;
  accent-color: #b9ff00;
}
.guestbooks___pow-label-text--verified {
  color: #b9ff00;
}
.guestbooks___pow-label-text--error,
#guestbooks___error-message {
  color: hotpink;
}
#guestbooks___feedback-container {
  margin-top: 8px;
  line-height: 1.5;
}
#guestbooks___success-message {
  color: #0494aa;
}
/* their lines and the server's are lowercased like the rest of the site */
.guestbooks___pow-container,
#guestbooks___feedback-container,
#guestbooks___message-loading,
#register-status,
#guestbooks___challenge-answer-container label {
  text-transform: lowercase;
}
#register-status:empty {
  display: none;
}
#register-status,
#guestbooks___message-load-status {
  color: #888;
}
#guestbooks___message-load-status:empty {
  display: none;
}
#guestbooks___guestbook-messages-container > p {
  color: #888;
}
.guestbook-message {
  padding: 6px 0 4px;
  border-top: 1px dashed #333;
}
.guestbook-message p {
  margin: 0 0 3px;
}
.guestbook-message b {
  color: #eee;
  font-weight: normal;
}
.guestbook-message small {
  color: #666;
  font-size: 8px;
}
.guestbook-message blockquote {
  margin: 0;
  padding: 0 0 0 8px;
  border-left: 1px solid #444;
  color: #ccc;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* a reply from ⊂λ,ｍ⊙ (written in the Guestbooks dashboard) */
.guestbook-message-reply {
  margin-left: 14px;
  border-top: none;
}
.guestbook-message-reply b {
  color: #b9ff00;
}
#guestbooks___load-more {
  -webkit-appearance: none;
  appearance: none;
  margin: 6px 0 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  color: hotpink;
  font: inherit;
  cursor: pointer;
}
#guestbooks___load-more:hover {
  color: #0494aa;
}
.register-credit {
  margin: 12px 0 0;
  color: #555;
  font-size: 8px;
  text-align: right;
}
#section-grimoire .register-credit a {
  color: #777;
}

/* ---- song pages (déjà vu, mud, and any future single-song page) ---- */

.song h2 {
  /* this font reserves ~1/4 of its font-size as empty space above its
     tallest letters (see the line-height note below), so the bigger the
     text, the bigger that invisible gap. At 69px it's ~10px more than the
     32px think-page title gets, which pushed song titles further below the
     nav dots. Negative margin (it merges with the dots' 16px bottom margin)
     pulls the title up so the visible gap matches the think page. */
  margin-top: -9px;
  margin-bottom: 3px;
  /* "RuneScape Large" carries very tall built-in line-metrics — the banner
     (.banner, base.css) already had to pin its own line-height for the same
     reason, to stop the font from padding itself with extra empty space
     above the glyphs. This heading never got that same treatment, so at
     69px its "normal" line-height rendered as a large empty buffer above
     the title, on song pages only (every other heading on the site is small
     enough that the same gap was never really visible). Using 1 (rather
     than the banner's tighter 1px — fine there since that text sits alone
     in its own div) keeps just enough box for this much bigger glyph's
     descenders so it doesn't collide with the line right below it. */
  line-height: 1;
  font-family: "RuneScape Large", "Times New Roman", serif;
  font-size: 69px;
  animation: spin-3d 3s infinite ease-in-out;
}

@keyframes spin-3d {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

.song .wavecontainer {
  margin-left: auto;
  margin-right: auto;
  /* was a flat 300px, which caused a 1px horizontal scroll at the
     narrowest common phone width (320px) once its own box model is
     accounted for — capping via max-width instead lets it shrink to fit
     any viewport narrower than 300px+margin instead of overflowing it. */
  width: 100%;
  max-width: 300px;
  box-sizing: border-box;
}

/* streaming-platform links: a single row of icon chips that never wraps,
   at any width from phone to desktop. Sizing uses clamp() instead of a
   media-query breakpoint so it scales continuously — bigger on desktop,
   shrinking smoothly down to a floor that still fits the narrowest phones
   (5 icons at the 40px floor + the smallest gap + side padding is ~240px,
   comfortably under even a 320px-wide screen). */
.song .stream-links {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: clamp(10px, 3.5vw, 16px);
  width: 100%;
  box-sizing: border-box;
  padding: 0 8px;
  margin: 14px 0;
}

.song .stream-links a {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  /* smaller than the row's first pass (was 40-64px) — just icons now,
     no label underneath, so they read better at a more modest size */
  width: clamp(32px, 7vw, 48px);
  color: #ccc;
  text-decoration: none;
  /* the lift lives here (on the link) rather than on the img, so the img
     is free to run its own wiggle animation on its own transform without
     the two fighting over the same CSS property. */
  transition: transform 0.2s ease;
}

.song .stream-links a:hover {
  transform: translateY(-4px) scale(1.06);
}

.song .stream-links img {
  width: 100%;
  aspect-ratio: 1 / 1;
  /* switched from cover to contain: these are now the platforms' own
     official vector logos (not uniform pre-cropped squares), and their
     natural proportions vary — Spotify is a bare circular mark on a
     transparent background, while Apple Music/SoundCloud/YouTube/Bandcamp
     each paint their own full-bleed colored shape already. contain shows
     each logo in full instead of cropping into its edges. */
  object-fit: contain;
  border-radius: 22%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Spotify's mark is a circle with real transparent margin around it (not
   just a rounding-curve sliver like the others), so it's the only one that
   needs a dark-gray plate behind it to read as a rounded-square chip like
   its neighbors — dark gray rather than white or pure black blends with
   the page's own black background while staying distinguishable from it. */
.song .stream-links img.icon-plate-dark {
  background-color: #1a1a1a;
}

/* YouTube's plate stays white — its saturated red reads better against
   white than against the dark gray used for Spotify. */
.song .stream-links img.icon-plate-white {
  background-color: #fff;
}

/* YouTube's rectangle came right up to the edge of its plate —
   box-sizing:border-box keeps the tile the same overall size while the
   padding carves out a margin that the background color shows through,
   so the red mark sits inset instead of touching the edge. A percentage
   (rather than a fixed px value) keeps the same inset-to-tile ratio at
   every icon size. */
.song .stream-links img.icon-pad {
  box-sizing: border-box;
  padding: 12.5%;
}

.song .stream-links a:hover img {
  box-shadow: 0 6px 16px rgba(4, 148, 170, 0.55);
  animation: icon-wiggle 2.4s ease-in-out infinite;
}

/* a slow, gentle sway while hovered/floating — separate from the
   lift+scale on the link itself (above) so the two don't fight over the
   same transform property; this one only ever touches rotate(). Slower
   and much smaller-angle than the first pass, which read as a violent
   shake rather than a calm drift. */
@keyframes icon-wiggle {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .song .stream-links a:hover img {
    animation: none;
  }
}

/* ---- intercepted transmissions (Webamp launcher on the Hear page) ---- */

.transmissions {
  margin: 28px 0 6px;
}

.transmissions-launch {
  font-family: "RuneScape Large", "Times New Roman", serif;
  font-size: 20px;
  line-height: 1;
  color: #b9ff00;
  background: transparent;
  border: 1px solid #b9ff00;
  padding: 7px 12px 6px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.transmissions-launch:hover,
.transmissions-launch:focus-visible {
  background: #b9ff00;
  color: black;
}

/* song-page play/pause buttons: a raw mark, like one inked on a scroll.
   No box: a long white play arrow leaning forward like italic script, with
   a slightly ragged edge (pause is two leaning strokes, like //), drawn pixel
   by pixel with no smoothing.
   Always, a wave runs through it left to right, each column of pixels
   lifting and dropping, more toward the tip, like cloth held at one edge
   in a steady wind, shaking loose flecks of ink off the trailing edge that
   ride the wave out to the right and thin away in the site's dither.
   On hover it storms: the same wave, higher and three times as fast (the
   clock doubles and each sheet holds more of the wave), rows wrenched a
   pixel sideways, and a spray of flecks flung further and wider.
   Each state is a 16-frame sprite sheet.
   The font's ⏵ / ⏸ stay in the markup for screen readers and browsers
   without CSS. app.js adds .is-playing while the song plays. */
.song [id^="btn-playpause-"] {
  position: relative;
  width: 46px;
  height: 18px;
  margin-left: 10px;   /* the arrow sits in the left part (the right is room for the flecks): this keeps the arrow itself centred */
  padding: 0;
  font-size: 0;
  color: transparent;
  cursor: pointer;
  border: 0;
  border-radius: 0;
  background: none;
}
.song [id^="btn-playpause-"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 46px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 288' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M18 1h1v1h-1zM9 2h3v1h-3zM9 3h5v1h-5zM8 4h11v1h-11zM8 5h13v1h-13zM9 6h13v1h-13zM7 7h16v1h-16zM7 8h17v1h-17zM28 8h1v1h-1zM7 9h18v1h-18zM27 9h1v1h-1zM6 10h12v1h-12zM22 10h5v1h-5zM42 10h1v1h-1zM7 11h9v1h-9zM24 11h3v1h-3zM7 12h7v1h-7zM18 12h1v1h-1zM5 13h6v1h-6zM5 14h2v1h-2zM9 14h1v1h-1zM20 19h1v1h-1zM9 20h2v1h-2zM9 21h3v1h-3zM13 21h1v1h-1zM8 22h6v1h-6zM15 22h1v1h-1zM17 22h2v1h-2zM8 23h15v1h-15zM9 24h14v1h-14zM7 25h17v1h-17zM7 26h18v1h-18zM7 27h14v1h-14zM23 27h2v1h-2zM6 28h12v1h-12zM24 28h5v1h-5zM7 29h10v1h-10zM25 29h1v1h-1zM27 29h1v1h-1zM7 30h8v1h-8zM5 31h6v1h-6zM12 31h2v1h-2zM20 31h1v1h-1zM5 32h2v1h-2zM9 38h2v1h-2zM9 39h4v1h-4zM8 40h7v1h-7zM8 41h8v1h-8zM17 41h6v1h-6zM9 42h15v1h-15zM7 43h18v1h-18zM7 44h19v1h-19zM7 45h14v1h-14zM24 45h3v1h-3zM6 46h13v1h-13zM27 46h2v1h-2zM7 47h11v1h-11zM29 47h1v1h-1zM7 48h10v1h-10zM5 49h6v1h-6zM13 49h1v1h-1zM22 49h1v1h-1zM5 50h2v1h-2zM22 55h1v1h-1zM9 56h2v1h-2zM9 57h5v1h-5zM8 58h6v1h-6zM16 58h1v1h-1zM8 59h8v1h-8zM21 59h4v1h-4zM9 60h16v1h-16zM7 61h19v1h-19zM7 62h16v1h-16zM25 62h2v1h-2zM7 63h14v1h-14zM27 63h1v1h-1zM6 64h15v1h-15zM28 64h1v1h-1zM30 64h1v1h-1zM7 65h12v1h-12zM7 66h11v1h-11zM24 66h1v1h-1zM5 67h6v1h-6zM14 67h1v1h-1zM5 68h2v1h-2zM17 70h1v1h-1zM24 72h1v1h-1zM9 74h2v1h-2zM9 75h5v1h-5zM8 76h8v1h-8zM19 76h1v1h-1zM8 77h8v1h-8zM22 77h1v1h-1zM24 77h1v1h-1zM9 78h10v1h-10zM21 78h6v1h-6zM7 79h19v1h-19zM27 79h1v1h-1zM7 80h17v1h-17zM28 80h1v1h-1zM7 81h15v1h-15zM6 82h15v1h-15zM32 82h1v1h-1zM7 83h14v1h-14zM7 84h7v1h-7zM16 84h2v1h-2zM26 84h1v1h-1zM5 85h6v1h-6zM5 86h2v1h-2zM9 92h2v1h-2zM12 92h2v1h-2zM9 93h6v1h-6zM8 94h8v1h-8zM8 95h9v1h-9zM21 95h1v1h-1zM9 96h10v1h-10zM24 96h5v1h-5zM7 97h19v1h-19zM29 97h1v1h-1zM7 98h18v1h-18zM7 99h17v1h-17zM6 100h17v1h-17zM7 101h7v1h-7zM15 101h7v1h-7zM7 102h5v1h-5zM17 102h1v1h-1zM5 103h6v1h-6zM5 104h2v1h-2zM19 104h1v1h-1zM9 110h2v1h-2zM13 110h1v1h-1zM9 111h7v1h-7zM8 112h9v1h-9zM8 113h11v1h-11zM9 114h10v1h-10zM27 114h2v1h-2zM7 115h16v1h-16zM24 115h1v1h-1zM26 115h1v1h-1zM7 116h19v1h-19zM31 116h1v1h-1zM7 117h19v1h-19zM6 118h18v1h-18zM34 118h1v1h-1zM7 119h7v1h-7zM17 119h1v1h-1zM19 119h2v1h-2zM23 119h1v1h-1zM7 120h6v1h-6zM5 121h6v1h-6zM5 122h2v1h-2zM21 122h1v1h-1zM9 128h2v1h-2zM9 129h7v1h-7zM8 130h11v1h-11zM8 131h12v1h-12zM9 132h12v1h-12zM28 132h1v1h-1zM7 133h16v1h-16zM27 133h1v1h-1zM7 134h16v1h-16zM26 134h1v1h-1zM33 134h1v1h-1zM7 135h19v1h-19zM6 136h12v1h-12zM19 136h7v1h-7zM7 137h7v1h-7zM23 137h3v1h-3zM7 138h7v1h-7zM5 139h6v1h-6zM5 140h2v1h-2zM9 146h2v1h-2zM9 147h5v1h-5zM8 148h11v1h-11zM28 148h1v1h-1zM8 149h14v1h-14zM9 150h13v1h-13zM7 151h16v1h-16zM7 152h17v1h-17zM28 152h1v1h-1zM35 152h1v1h-1zM7 153h18v1h-18zM27 153h1v1h-1zM6 154h12v1h-12zM22 154h5v1h-5zM7 155h9v1h-9zM24 155h2v1h-2zM27 155h1v1h-1zM7 156h7v1h-7zM5 157h6v1h-6zM5 158h2v1h-2zM9 164h2v1h-2zM9 165h3v1h-3zM8 166h6v1h-6zM15 166h1v1h-1zM17 166h2v1h-2zM8 167h16v1h-16zM9 168h14v1h-14zM7 169h17v1h-17zM7 170h18v1h-18zM37 170h1v1h-1zM7 171h14v1h-14zM23 171h2v1h-2zM6 172h12v1h-12zM24 172h5v1h-5zM7 173h10v1h-10zM25 173h2v1h-2zM29 173h1v1h-1zM7 174h8v1h-8zM5 175h6v1h-6zM12 175h2v1h-2zM5 176h2v1h-2zM9 182h2v1h-2zM9 183h4v1h-4zM8 184h6v1h-6zM8 185h8v1h-8zM17 185h6v1h-6zM9 186h15v1h-15zM7 187h18v1h-18zM7 188h19v1h-19zM7 189h15v1h-15zM24 189h3v1h-3zM39 189h1v1h-1zM6 190h13v1h-13zM27 190h2v1h-2zM7 191h11v1h-11zM28 191h1v1h-1zM7 192h10v1h-10zM5 193h6v1h-6zM13 193h1v1h-1zM5 194h2v1h-2zM9 200h3v1h-3zM9 201h5v1h-5zM8 202h6v1h-6zM8 203h8v1h-8zM21 203h4v1h-4zM9 204h16v1h-16zM7 205h19v1h-19zM7 206h17v1h-17zM25 206h2v1h-2zM7 207h14v1h-14zM27 207h1v1h-1zM6 208h15v1h-15zM28 208h1v1h-1zM7 209h12v1h-12zM31 209h1v1h-1zM7 210h11v1h-11zM5 211h6v1h-6zM5 212h2v1h-2zM9 218h2v1h-2zM12 218h1v1h-1zM9 219h5v1h-5zM8 220h8v1h-8zM8 221h8v1h-8zM22 221h1v1h-1zM24 221h1v1h-1zM9 222h10v1h-10zM21 222h6v1h-6zM7 223h19v1h-19zM27 223h1v1h-1zM7 224h17v1h-17zM25 224h1v1h-1zM28 224h1v1h-1zM30 224h1v1h-1zM7 225h15v1h-15zM6 226h15v1h-15zM7 227h14v1h-14zM7 228h7v1h-7zM16 228h2v1h-2zM5 229h6v1h-6zM5 230h2v1h-2zM9 236h2v1h-2zM12 236h3v1h-3zM9 237h6v1h-6zM8 238h8v1h-8zM8 239h9v1h-9zM9 240h10v1h-10zM24 240h5v1h-5zM7 241h19v1h-19zM7 242h18v1h-18zM27 242h1v1h-1zM32 242h1v1h-1zM7 243h17v1h-17zM6 244h17v1h-17zM7 245h7v1h-7zM15 245h6v1h-6zM7 246h5v1h-5zM17 246h2v1h-2zM5 247h7v1h-7zM5 248h2v1h-2zM15 252h1v1h-1zM9 254h2v1h-2zM13 254h1v1h-1zM15 254h1v1h-1zM9 255h7v1h-7zM8 256h9v1h-9zM8 257h11v1h-11zM9 258h10v1h-10zM27 258h2v1h-2zM7 259h16v1h-16zM24 259h1v1h-1zM26 259h1v1h-1zM7 260h19v1h-19zM34 260h1v1h-1zM7 261h19v1h-19zM6 262h18v1h-18zM7 263h7v1h-7zM17 263h1v1h-1zM19 263h2v1h-2zM7 264h7v1h-7zM20 264h1v1h-1zM5 265h6v1h-6zM5 266h2v1h-2zM17 270h1v1h-1zM9 272h2v1h-2zM17 272h1v1h-1zM9 273h7v1h-7zM8 274h11v1h-11zM8 275h11v1h-11zM9 276h12v1h-12zM28 276h1v1h-1zM7 277h16v1h-16zM27 277h1v1h-1zM7 278h16v1h-16zM26 278h1v1h-1zM7 279h19v1h-19zM6 280h12v1h-12zM19 280h7v1h-7zM40 280h1v1h-1zM7 281h7v1h-7zM23 281h2v1h-2zM7 282h7v1h-7zM15 282h1v1h-1zM22 282h1v1h-1zM5 283h6v1h-6zM5 284h3v1h-3z'/%3E%3C/svg%3E") 0 0 / 46px 288px no-repeat;
  animation: ghillie-wave 4s steps(16) infinite;
}
.song [id^="btn-playpause-"]:hover::before,
.song [id^="btn-playpause-"]:focus-visible::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 288' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M9 2h2v1h-2zM9 3h2v1h-2zM13 3h1v1h-1zM15 3h1v1h-1zM17 3h3v1h-3zM31 3h1v1h-1zM8 4h12v1h-12zM31 4h1v1h-1zM44 4h1v1h-1zM8 5h13v1h-13zM31 5h1v1h-1zM33 5h1v1h-1zM9 6h13v1h-13zM7 7h16v1h-16zM42 7h1v1h-1zM45 7h1v1h-1zM7 8h16v1h-16zM28 8h1v1h-1zM32 8h1v1h-1zM7 9h10v1h-10zM20 9h4v1h-4zM27 9h1v1h-1zM31 9h1v1h-1zM6 10h10v1h-10zM22 10h3v1h-3zM26 10h1v1h-1zM6 11h4v1h-4zM11 11h3v1h-3zM23 11h3v1h-3zM8 12h4v1h-4zM14 12h1v1h-1zM16 12h1v1h-1zM24 12h2v1h-2zM38 12h1v1h-1zM5 13h6v1h-6zM12 13h2v1h-2zM38 13h1v1h-1zM5 14h2v1h-2zM9 20h2v1h-2zM17 20h1v1h-1zM32 20h1v1h-1zM8 21h3v1h-3zM17 21h1v1h-1zM22 21h1v1h-1zM8 22h5v1h-5zM18 22h5v1h-5zM33 22h1v1h-1zM8 23h11v1h-11zM20 23h4v1h-4zM33 23h1v1h-1zM9 24h9v1h-9zM19 24h4v1h-4zM24 24h1v1h-1zM8 25h8v1h-8zM17 25h7v1h-7zM25 25h1v1h-1zM37 25h1v1h-1zM7 26h5v1h-5zM13 26h8v1h-8zM23 26h2v1h-2zM7 27h12v1h-12zM24 27h2v1h-2zM6 28h12v1h-12zM25 28h1v1h-1zM29 28h1v1h-1zM7 29h12v1h-12zM25 29h4v1h-4zM7 30h9v1h-9zM5 31h9v1h-9zM40 31h1v1h-1zM5 32h2v1h-2zM9 38h2v1h-2zM9 39h5v1h-5zM23 39h2v1h-2zM8 40h6v1h-6zM21 40h3v1h-3zM35 40h1v1h-1zM8 41h8v1h-8zM20 41h5v1h-5zM37 41h1v1h-1zM9 42h17v1h-17zM7 43h16v1h-16zM24 43h2v1h-2zM7 44h14v1h-14zM26 44h1v1h-1zM7 45h14v1h-14zM27 45h2v1h-2zM6 46h14v1h-14zM28 46h1v1h-1zM7 47h12v1h-12zM20 47h1v1h-1zM31 47h1v1h-1zM8 48h10v1h-10zM44 48h1v1h-1zM5 49h7v1h-7zM5 50h2v1h-2zM14 50h1v1h-1zM9 56h5v1h-5zM23 56h1v1h-1zM38 56h1v1h-1zM9 57h6v1h-6zM27 57h1v1h-1zM8 58h8v1h-8zM39 58h1v1h-1zM8 59h8v1h-8zM24 59h3v1h-3zM9 60h9v1h-9zM22 60h4v1h-4zM27 60h1v1h-1zM7 61h12v1h-12zM21 61h4v1h-4zM28 61h1v1h-1zM7 62h17v1h-17zM40 62h1v1h-1zM7 63h16v1h-16zM6 64h16v1h-16zM7 65h14v1h-14zM32 65h1v1h-1zM7 66h4v1h-4zM13 66h1v1h-1zM16 66h5v1h-5zM4 67h6v1h-6zM5 68h3v1h-3zM17 68h1v1h-1zM27 73h1v1h-1zM10 74h4v1h-4zM16 74h1v1h-1zM9 75h7v1h-7zM28 75h1v1h-1zM30 75h1v1h-1zM8 76h9v1h-9zM41 76h1v1h-1zM8 77h11v1h-11zM27 77h2v1h-2zM9 78h10v1h-10zM26 78h1v1h-1zM7 79h13v1h-13zM25 79h1v1h-1zM7 80h16v1h-16zM24 80h2v1h-2zM7 81h18v1h-18zM6 82h19v1h-19zM7 83h7v1h-7zM17 83h1v1h-1zM19 83h5v1h-5zM35 83h1v1h-1zM7 84h5v1h-5zM16 84h1v1h-1zM20 84h1v1h-1zM5 85h6v1h-6zM5 86h2v1h-2zM9 86h1v1h-1zM20 87h1v1h-1zM29 90h1v1h-1zM18 91h1v1h-1zM9 92h2v1h-2zM32 92h1v1h-1zM8 93h2v1h-2zM11 93h2v1h-2zM15 93h1v1h-1zM17 93h1v1h-1zM31 93h1v1h-1zM8 94h3v1h-3zM12 94h7v1h-7zM8 95h12v1h-12zM9 96h12v1h-12zM7 97h15v1h-15zM28 97h1v1h-1zM7 98h16v1h-16zM27 98h1v1h-1zM7 99h17v1h-17zM26 99h1v1h-1zM6 100h11v1h-11zM20 100h7v1h-7zM28 100h1v1h-1zM7 101h8v1h-8zM18 101h1v1h-1zM22 101h4v1h-4zM7 102h8v1h-8zM24 102h1v1h-1zM38 102h1v1h-1zM5 103h7v1h-7zM5 104h2v1h-2zM11 104h2v1h-2zM23 106h1v1h-1zM20 108h1v1h-1zM33 109h1v1h-1zM10 110h2v1h-2zM10 111h2v1h-2zM18 111h2v1h-2zM33 111h1v1h-1zM8 112h3v1h-3zM12 112h4v1h-4zM17 112h5v1h-5zM8 113h15v1h-15zM9 114h14v1h-14zM7 115h17v1h-17zM7 116h14v1h-14zM22 116h3v1h-3zM7 117h11v1h-11zM23 117h2v1h-2zM6 118h11v1h-11zM24 118h2v1h-2zM28 118h2v1h-2zM6 119h4v1h-4zM11 119h5v1h-5zM25 119h3v1h-3zM30 119h1v1h-1zM42 119h1v1h-1zM7 120h7v1h-7zM17 120h1v1h-1zM5 121h9v1h-9zM5 122h2v1h-2zM13 122h1v1h-1zM26 125h1v1h-1zM9 128h3v1h-3zM10 129h4v1h-4zM22 129h1v1h-1zM38 129h1v1h-1zM8 130h5v1h-5zM14 130h1v1h-1zM22 130h2v1h-2zM8 131h8v1h-8zM18 131h1v1h-1zM20 131h5v1h-5zM10 132h8v1h-8zM19 132h6v1h-6zM7 133h6v1h-6zM14 133h11v1h-11zM7 134h14v1h-14zM25 134h1v1h-1zM7 135h14v1h-14zM25 135h2v1h-2zM43 135h1v1h-1zM6 136h13v1h-13zM27 136h1v1h-1zM7 137h11v1h-11zM21 137h1v1h-1zM28 137h1v1h-1zM32 137h1v1h-1zM7 138h11v1h-11zM5 139h6v1h-6zM13 139h1v1h-1zM5 140h2v1h-2zM16 140h1v1h-1zM9 146h4v1h-4zM25 146h1v1h-1zM9 147h5v1h-5zM8 148h3v1h-3zM12 148h3v1h-3zM24 148h2v1h-2zM9 149h4v1h-4zM14 149h2v1h-2zM17 149h1v1h-1zM22 149h4v1h-4zM9 150h6v1h-6zM16 150h2v1h-2zM21 150h6v1h-6zM7 151h10v1h-10zM18 151h6v1h-6zM26 151h2v1h-2zM7 152h16v1h-16zM28 152h1v1h-1zM7 153h15v1h-15zM6 154h15v1h-15zM26 154h1v1h-1zM35 154h1v1h-1zM7 155h15v1h-15zM7 156h4v1h-4zM13 156h1v1h-1zM15 156h5v1h-5zM5 157h6v1h-6zM17 157h1v1h-1zM5 158h2v1h-2zM18 158h1v1h-1zM19 159h1v1h-1zM9 164h2v1h-2zM12 164h2v1h-2zM41 164h1v1h-1zM9 165h7v1h-7zM27 165h2v1h-2zM8 166h8v1h-8zM8 167h10v1h-10zM26 167h3v1h-3zM9 168h3v1h-3zM13 168h6v1h-6zM21 168h1v1h-1zM25 168h2v1h-2zM8 169h8v1h-8zM17 169h2v1h-2zM25 169h1v1h-1zM29 169h1v1h-1zM7 170h11v1h-11zM19 170h4v1h-4zM24 170h1v1h-1zM7 171h12v1h-12zM20 171h5v1h-5zM28 171h1v1h-1zM38 171h1v1h-1zM6 172h18v1h-18zM7 173h7v1h-7zM16 173h7v1h-7zM7 174h5v1h-5zM18 174h4v1h-4zM23 174h1v1h-1zM5 175h6v1h-6zM5 176h2v1h-2zM21 177h1v1h-1zM34 179h1v1h-1zM9 182h2v1h-2zM9 183h8v1h-8zM29 183h1v1h-1zM31 183h1v1h-1zM8 184h11v1h-11zM8 185h11v1h-11zM9 186h11v1h-11zM21 186h1v1h-1zM24 186h1v1h-1zM28 186h1v1h-1zM7 187h14v1h-14zM27 187h2v1h-2zM32 187h1v1h-1zM7 188h16v1h-16zM26 188h1v1h-1zM42 188h1v1h-1zM7 189h18v1h-18zM6 190h12v1h-12zM19 190h7v1h-7zM7 191h8v1h-8zM20 191h6v1h-6zM8 192h7v1h-7zM20 192h1v1h-1zM23 192h3v1h-3zM31 192h1v1h-1zM5 193h6v1h-6zM5 194h3v1h-3zM18 199h1v1h-1zM9 200h2v1h-2zM8 201h2v1h-2zM14 201h1v1h-1zM18 201h1v1h-1zM30 201h1v1h-1zM34 201h1v1h-1zM8 202h5v1h-5zM14 202h7v1h-7zM8 203h10v1h-10zM19 203h3v1h-3zM31 203h1v1h-1zM9 204h7v1h-7zM17 204h4v1h-4zM22 204h1v1h-1zM30 204h1v1h-1zM8 205h6v1h-6zM15 205h7v1h-7zM23 205h1v1h-1zM25 205h1v1h-1zM7 206h4v1h-4zM12 206h11v1h-11zM24 206h1v1h-1zM29 206h1v1h-1zM7 207h12v1h-12zM22 207h2v1h-2zM25 207h1v1h-1zM27 207h2v1h-2zM35 207h1v1h-1zM6 208h12v1h-12zM22 208h3v1h-3zM27 208h1v1h-1zM7 209h9v1h-9zM17 209h1v1h-1zM24 209h3v1h-3zM7 210h7v1h-7zM25 210h1v1h-1zM27 210h1v1h-1zM6 211h8v1h-8zM5 212h2v1h-2zM9 212h1v1h-1zM35 212h1v1h-1zM9 218h2v1h-2zM9 219h3v1h-3zM17 219h1v1h-1zM32 219h1v1h-1zM8 220h6v1h-6zM20 220h3v1h-3zM8 221h8v1h-8zM17 221h7v1h-7zM9 222h16v1h-16zM32 222h1v1h-1zM7 223h18v1h-18zM7 224h14v1h-14zM24 224h2v1h-2zM7 225h13v1h-13zM21 225h1v1h-1zM24 225h2v1h-2zM38 225h1v1h-1zM6 226h13v1h-13zM25 226h2v1h-2zM7 227h11v1h-11zM21 227h1v1h-1zM26 227h3v1h-3zM7 228h10v1h-10zM5 229h9v1h-9zM29 229h1v1h-1zM5 230h2v1h-2zM28 230h1v1h-1zM9 236h2v1h-2zM8 237h5v1h-5zM20 237h1v1h-1zM7 238h3v1h-3zM11 238h3v1h-3zM22 238h3v1h-3zM34 238h1v1h-1zM8 239h7v1h-7zM21 239h4v1h-4zM40 239h1v1h-1zM9 240h8v1h-8zM18 240h1v1h-1zM20 240h6v1h-6zM34 240h1v1h-1zM7 241h17v1h-17zM25 241h2v1h-2zM34 241h2v1h-2zM7 242h15v1h-15zM24 242h1v1h-1zM26 242h3v1h-3zM7 243h14v1h-14zM28 243h1v1h-1zM6 244h15v1h-15zM7 245h13v1h-13zM7 246h4v1h-4zM12 246h2v1h-2zM15 246h3v1h-3zM29 246h1v1h-1zM31 246h1v1h-1zM5 247h6v1h-6zM17 247h1v1h-1zM5 248h2v1h-2zM30 248h1v1h-1zM9 254h5v1h-5zM9 255h6v1h-6zM8 256h8v1h-8zM23 256h1v1h-1zM36 256h1v1h-1zM8 257h9v1h-9zM25 257h2v1h-2zM9 258h9v1h-9zM23 258h2v1h-2zM27 258h1v1h-1zM38 258h1v1h-1zM7 259h7v1h-7zM15 259h4v1h-4zM22 259h2v1h-2zM25 259h1v1h-1zM36 259h1v1h-1zM6 260h4v1h-4zM11 260h5v1h-5zM17 260h6v1h-6zM24 260h1v1h-1zM26 260h1v1h-1zM37 260h1v1h-1zM7 261h10v1h-10zM18 261h4v1h-4zM23 261h1v1h-1zM37 261h1v1h-1zM6 262h15v1h-15zM22 262h1v1h-1zM25 262h1v1h-1zM31 262h1v1h-1zM44 262h1v1h-1zM7 263h6v1h-6zM15 263h7v1h-7zM27 263h1v1h-1zM6 264h4v1h-4zM11 264h1v1h-1zM17 264h4v1h-4zM32 264h1v1h-1zM5 265h6v1h-6zM5 266h2v1h-2zM9 272h3v1h-3zM13 272h1v1h-1zM9 273h4v1h-4zM14 273h3v1h-3zM26 273h1v1h-1zM28 273h1v1h-1zM9 274h10v1h-10zM9 275h9v1h-9zM19 275h1v1h-1zM28 275h2v1h-2zM38 275h1v1h-1zM9 276h10v1h-10zM27 276h1v1h-1zM40 276h1v1h-1zM7 277h14v1h-14zM26 277h1v1h-1zM41 277h1v1h-1zM7 278h16v1h-16zM25 278h1v1h-1zM29 278h1v1h-1zM38 278h1v1h-1zM7 279h19v1h-19zM39 279h1v1h-1zM6 280h19v1h-19zM7 281h7v1h-7zM19 281h6v1h-6zM35 281h1v1h-1zM7 282h7v1h-7zM31 282h1v1h-1zM35 282h1v1h-1zM5 283h6v1h-6zM5 284h2v1h-2z'/%3E%3C/svg%3E"); animation-duration: 2s; }
.song [id^="btn-playpause-"].is-playing::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 288' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M22 1h1v1h-1zM13 2h3v1h-3zM22 2h2v1h-2zM30 2h1v1h-1zM13 3h4v1h-4zM21 3h5v1h-5zM12 4h3v1h-3zM21 4h5v1h-5zM12 5h3v1h-3zM21 5h2v1h-2zM24 5h1v1h-1zM12 6h3v1h-3zM20 6h2v1h-2zM23 6h1v1h-1zM11 7h3v1h-3zM20 7h3v1h-3zM11 8h4v1h-4zM20 8h3v1h-3zM11 9h3v1h-3zM19 9h3v1h-3zM10 10h3v1h-3zM19 10h3v1h-3zM10 11h2v1h-2zM19 11h3v1h-3zM10 12h3v1h-3zM18 12h3v1h-3zM9 13h2v1h-2zM18 13h3v1h-3zM9 14h3v1h-3zM23 14h1v1h-1zM22 19h2v1h-2zM13 20h2v1h-2zM22 20h3v1h-3zM32 20h1v1h-1zM13 21h4v1h-4zM21 21h5v1h-5zM27 21h1v1h-1zM12 22h4v1h-4zM21 22h2v1h-2zM24 22h1v1h-1zM12 23h3v1h-3zM21 23h3v1h-3zM12 24h3v1h-3zM20 24h2v1h-2zM11 25h3v1h-3zM20 25h3v1h-3zM11 26h4v1h-4zM20 26h3v1h-3zM11 27h3v1h-3zM19 27h3v1h-3zM10 28h3v1h-3zM19 28h3v1h-3zM10 29h2v1h-2zM19 29h3v1h-3zM10 30h3v1h-3zM19 30h2v1h-2zM9 31h2v1h-2zM18 31h3v1h-3zM9 32h3v1h-3zM18 32h1v1h-1zM22 37h3v1h-3zM13 38h2v1h-2zM22 38h4v1h-4zM13 39h3v1h-3zM21 39h4v1h-4zM12 40h5v1h-5zM21 40h2v1h-2zM12 41h3v1h-3zM21 41h3v1h-3zM12 42h3v1h-3zM21 42h1v1h-1zM11 43h3v1h-3zM20 43h3v1h-3zM11 44h4v1h-4zM20 44h3v1h-3zM11 45h3v1h-3zM20 45h2v1h-2zM10 46h3v1h-3zM19 46h3v1h-3zM10 47h2v1h-2zM19 47h3v1h-3zM10 48h3v1h-3zM19 48h2v1h-2zM9 49h2v1h-2zM19 49h2v1h-2zM9 50h3v1h-3zM18 50h3v1h-3zM18 51h1v1h-1zM23 55h3v1h-3zM13 56h3v1h-3zM22 56h3v1h-3zM13 57h4v1h-4zM22 57h3v1h-3zM34 57h1v1h-1zM12 58h3v1h-3zM21 58h2v1h-2zM12 59h3v1h-3zM21 59h3v1h-3zM12 60h3v1h-3zM21 60h2v1h-2zM11 61h3v1h-3zM21 61h1v1h-1zM11 62h4v1h-4zM20 62h3v1h-3zM11 63h3v1h-3zM20 63h3v1h-3zM10 64h3v1h-3zM20 64h2v1h-2zM10 65h2v1h-2zM19 65h3v1h-3zM10 66h3v1h-3zM19 66h3v1h-3zM9 67h2v1h-2zM19 67h2v1h-2zM9 68h3v1h-3zM18 68h3v1h-3zM18 69h3v1h-3zM31 71h1v1h-1zM24 73h1v1h-1zM13 74h3v1h-3zM23 74h3v1h-3zM13 75h4v1h-4zM22 75h3v1h-3zM36 75h1v1h-1zM12 76h3v1h-3zM22 76h2v1h-2zM12 77h3v1h-3zM21 77h2v1h-2zM12 78h3v1h-3zM21 78h3v1h-3zM11 79h3v1h-3zM21 79h2v1h-2zM11 80h4v1h-4zM20 80h2v1h-2zM11 81h3v1h-3zM20 81h3v1h-3zM10 82h3v1h-3zM20 82h3v1h-3zM10 83h2v1h-2zM19 83h3v1h-3zM10 84h3v1h-3zM19 84h3v1h-3zM9 85h2v1h-2zM19 85h3v1h-3zM9 86h3v1h-3zM18 86h3v1h-3zM18 87h3v1h-3zM33 89h1v1h-1zM15 91h1v1h-1zM13 92h3v1h-3zM24 92h1v1h-1zM13 93h2v1h-2zM16 93h1v1h-1zM22 93h4v1h-4zM33 93h1v1h-1zM12 94h3v1h-3zM22 94h3v1h-3zM12 95h3v1h-3zM21 95h3v1h-3zM12 96h3v1h-3zM21 96h2v1h-2zM11 97h3v1h-3zM21 97h3v1h-3zM11 98h4v1h-4zM20 98h2v1h-2zM11 99h3v1h-3zM20 99h4v1h-4zM10 100h3v1h-3zM20 100h3v1h-3zM10 101h2v1h-2zM19 101h4v1h-4zM10 102h3v1h-3zM19 102h3v1h-3zM9 103h2v1h-2zM18 103h4v1h-4zM9 104h3v1h-3zM18 104h3v1h-3zM19 105h2v1h-2zM15 109h1v1h-1zM13 110h4v1h-4zM13 111h2v1h-2zM22 111h3v1h-3zM12 112h3v1h-3zM22 112h4v1h-4zM12 113h3v1h-3zM21 113h4v1h-4zM12 114h3v1h-3zM21 114h2v1h-2zM11 115h3v1h-3zM20 115h4v1h-4zM11 116h4v1h-4zM20 116h2v1h-2zM11 117h3v1h-3zM20 117h3v1h-3zM25 117h1v1h-1zM10 118h3v1h-3zM19 118h4v1h-4zM10 119h2v1h-2zM19 119h3v1h-3zM24 119h1v1h-1zM10 120h3v1h-3zM18 120h4v1h-4zM9 121h2v1h-2zM18 121h4v1h-4zM9 122h3v1h-3zM19 122h2v1h-2zM13 128h3v1h-3zM22 128h1v1h-1zM13 129h4v1h-4zM22 129h3v1h-3zM12 130h3v1h-3zM21 130h4v1h-4zM12 131h3v1h-3zM21 131h5v1h-5zM12 132h3v1h-3zM20 132h3v1h-3zM11 133h3v1h-3zM20 133h2v1h-2zM23 133h1v1h-1zM11 134h4v1h-4zM20 134h3v1h-3zM11 135h3v1h-3zM19 135h4v1h-4zM27 135h1v1h-1zM10 136h3v1h-3zM19 136h3v1h-3zM10 137h2v1h-2zM19 137h3v1h-3zM10 138h3v1h-3zM18 138h4v1h-4zM9 139h2v1h-2zM18 139h3v1h-3zM9 140h3v1h-3zM22 145h1v1h-1zM13 146h3v1h-3zM22 146h2v1h-2zM13 147h4v1h-4zM21 147h4v1h-4zM12 148h3v1h-3zM21 148h5v1h-5zM12 149h3v1h-3zM21 149h2v1h-2zM24 149h1v1h-1zM12 150h3v1h-3zM20 150h2v1h-2zM23 150h1v1h-1zM11 151h3v1h-3zM20 151h3v1h-3zM11 152h4v1h-4zM20 152h3v1h-3zM11 153h3v1h-3zM19 153h3v1h-3zM29 153h1v1h-1zM10 154h3v1h-3zM19 154h3v1h-3zM10 155h2v1h-2zM19 155h3v1h-3zM10 156h3v1h-3zM18 156h3v1h-3zM9 157h2v1h-2zM18 157h3v1h-3zM9 158h3v1h-3zM22 163h2v1h-2zM13 164h2v1h-2zM22 164h3v1h-3zM13 165h4v1h-4zM21 165h5v1h-5zM12 166h4v1h-4zM21 166h2v1h-2zM24 166h1v1h-1zM12 167h3v1h-3zM21 167h3v1h-3zM12 168h3v1h-3zM20 168h2v1h-2zM11 169h3v1h-3zM20 169h3v1h-3zM11 170h4v1h-4zM20 170h4v1h-4zM11 171h3v1h-3zM19 171h3v1h-3zM31 171h1v1h-1zM10 172h3v1h-3zM19 172h3v1h-3zM10 173h2v1h-2zM19 173h3v1h-3zM10 174h3v1h-3zM19 174h2v1h-2zM9 175h2v1h-2zM18 175h3v1h-3zM9 176h3v1h-3zM18 176h1v1h-1zM22 181h3v1h-3zM13 182h2v1h-2zM22 182h4v1h-4zM13 183h3v1h-3zM21 183h4v1h-4zM12 184h5v1h-5zM21 184h2v1h-2zM12 185h3v1h-3zM21 185h3v1h-3zM12 186h3v1h-3zM21 186h1v1h-1zM11 187h3v1h-3zM20 187h3v1h-3zM11 188h4v1h-4zM20 188h3v1h-3zM25 188h1v1h-1zM11 189h3v1h-3zM20 189h2v1h-2zM10 190h3v1h-3zM19 190h3v1h-3zM10 191h2v1h-2zM19 191h3v1h-3zM10 192h3v1h-3zM19 192h2v1h-2zM9 193h2v1h-2zM19 193h2v1h-2zM9 194h3v1h-3zM18 194h3v1h-3zM18 195h1v1h-1zM23 199h3v1h-3zM13 200h3v1h-3zM22 200h3v1h-3zM13 201h4v1h-4zM22 201h3v1h-3zM12 202h3v1h-3zM21 202h2v1h-2zM12 203h3v1h-3zM21 203h3v1h-3zM12 204h3v1h-3zM21 204h2v1h-2zM11 205h3v1h-3zM21 205h1v1h-1zM11 206h4v1h-4zM20 206h3v1h-3zM11 207h3v1h-3zM20 207h3v1h-3zM28 207h1v1h-1zM10 208h3v1h-3zM20 208h2v1h-2zM10 209h2v1h-2zM19 209h3v1h-3zM10 210h3v1h-3zM19 210h3v1h-3zM9 211h2v1h-2zM19 211h2v1h-2zM9 212h3v1h-3zM18 212h3v1h-3zM18 213h3v1h-3zM24 217h1v1h-1zM13 218h3v1h-3zM23 218h3v1h-3zM13 219h4v1h-4zM22 219h3v1h-3zM12 220h3v1h-3zM22 220h2v1h-2zM12 221h3v1h-3zM21 221h2v1h-2zM12 222h3v1h-3zM21 222h3v1h-3zM11 223h3v1h-3zM21 223h2v1h-2zM11 224h4v1h-4zM20 224h2v1h-2zM11 225h3v1h-3zM20 225h3v1h-3zM10 226h3v1h-3zM20 226h3v1h-3zM30 226h1v1h-1zM10 227h2v1h-2zM19 227h3v1h-3zM10 228h3v1h-3zM19 228h3v1h-3zM9 229h2v1h-2zM19 229h3v1h-3zM9 230h3v1h-3zM18 230h3v1h-3zM18 231h3v1h-3zM15 235h1v1h-1zM13 236h3v1h-3zM24 236h1v1h-1zM26 236h1v1h-1zM13 237h2v1h-2zM16 237h1v1h-1zM22 237h4v1h-4zM12 238h3v1h-3zM22 238h3v1h-3zM12 239h3v1h-3zM21 239h3v1h-3zM12 240h3v1h-3zM21 240h2v1h-2zM11 241h3v1h-3zM21 241h3v1h-3zM11 242h4v1h-4zM20 242h2v1h-2zM11 243h3v1h-3zM20 243h3v1h-3zM10 244h3v1h-3zM20 244h3v1h-3zM32 244h1v1h-1zM10 245h2v1h-2zM19 245h3v1h-3zM10 246h3v1h-3zM19 246h3v1h-3zM9 247h2v1h-2zM18 247h4v1h-4zM9 248h3v1h-3zM18 248h3v1h-3zM19 249h2v1h-2zM15 253h1v1h-1zM13 254h4v1h-4zM13 255h2v1h-2zM22 255h3v1h-3zM27 255h1v1h-1zM12 256h3v1h-3zM22 256h4v1h-4zM12 257h3v1h-3zM21 257h4v1h-4zM12 258h3v1h-3zM21 258h2v1h-2zM11 259h3v1h-3zM20 259h4v1h-4zM11 260h4v1h-4zM20 260h2v1h-2zM11 261h3v1h-3zM20 261h3v1h-3zM10 262h3v1h-3zM19 262h4v1h-4zM34 262h1v1h-1zM10 263h2v1h-2zM19 263h3v1h-3zM10 264h3v1h-3zM18 264h4v1h-4zM9 265h2v1h-2zM18 265h4v1h-4zM9 266h3v1h-3zM19 266h2v1h-2zM13 272h3v1h-3zM22 272h1v1h-1zM29 272h1v1h-1zM13 273h4v1h-4zM22 273h3v1h-3zM12 274h3v1h-3zM21 274h4v1h-4zM12 275h3v1h-3zM21 275h5v1h-5zM12 276h3v1h-3zM20 276h3v1h-3zM11 277h3v1h-3zM20 277h2v1h-2zM23 277h1v1h-1zM11 278h4v1h-4zM20 278h3v1h-3zM11 279h3v1h-3zM19 279h4v1h-4zM10 280h3v1h-3zM19 280h3v1h-3zM10 281h2v1h-2zM19 281h3v1h-3zM10 282h3v1h-3zM18 282h4v1h-4zM9 283h2v1h-2zM18 283h3v1h-3zM9 284h3v1h-3zM21 284h1v1h-1z'/%3E%3C/svg%3E"); }
/* (and while the song plays, they storm when the music gusts: app.js adds
   .gust on the low end's hits and takes it off as they pass) */
.song [id^="btn-playpause-"].is-playing:hover::before,
.song [id^="btn-playpause-"].is-playing:focus-visible::before,
.song [id^="btn-playpause-"].is-playing.gust::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 288' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M34 0h1v1h-1zM22 1h1v1h-1zM34 1h1v1h-1zM15 2h1v1h-1zM22 2h2v1h-2zM13 3h4v1h-4zM21 3h4v1h-4zM12 4h3v1h-3zM21 4h4v1h-4zM12 5h3v1h-3zM20 5h3v1h-3zM24 5h2v1h-2zM12 6h3v1h-3zM20 6h2v1h-2zM23 6h1v1h-1zM11 7h4v1h-4zM20 7h3v1h-3zM11 8h3v1h-3zM20 8h3v1h-3zM30 8h1v1h-1zM11 9h4v1h-4zM19 9h3v1h-3zM31 9h1v1h-1zM10 10h4v1h-4zM19 10h3v1h-3zM10 11h2v1h-2zM19 11h3v1h-3zM10 12h3v1h-3zM18 12h3v1h-3zM9 13h2v1h-2zM18 13h2v1h-2zM21 13h1v1h-1zM9 14h3v1h-3zM22 18h3v1h-3zM36 18h1v1h-1zM22 19h3v1h-3zM13 20h1v1h-1zM21 20h5v1h-5zM40 20h1v1h-1zM13 21h3v1h-3zM21 21h2v1h-2zM12 22h5v1h-5zM22 22h3v1h-3zM12 23h3v1h-3zM21 23h1v1h-1zM13 24h2v1h-2zM20 24h1v1h-1zM22 24h2v1h-2zM11 25h3v1h-3zM15 25h1v1h-1zM20 25h2v1h-2zM12 26h3v1h-3zM19 26h1v1h-1zM21 26h1v1h-1zM10 27h3v1h-3zM15 27h1v1h-1zM20 27h1v1h-1zM22 27h1v1h-1zM32 27h1v1h-1zM10 28h3v1h-3zM19 28h1v1h-1zM21 28h1v1h-1zM33 28h1v1h-1zM11 29h2v1h-2zM20 29h1v1h-1zM10 30h3v1h-3zM19 30h1v1h-1zM21 30h1v1h-1zM23 30h1v1h-1zM10 31h2v1h-2zM19 31h2v1h-2zM8 32h3v1h-3zM17 32h2v1h-2zM23 36h2v1h-2zM22 37h4v1h-4zM13 38h3v1h-3zM22 38h1v1h-1zM24 38h2v1h-2zM42 38h1v1h-1zM13 39h3v1h-3zM23 39h1v1h-1zM13 40h4v1h-4zM22 40h2v1h-2zM12 41h3v1h-3zM21 41h2v1h-2zM12 42h3v1h-3zM21 42h1v1h-1zM11 43h3v1h-3zM21 43h2v1h-2zM11 44h4v1h-4zM20 44h3v1h-3zM34 44h1v1h-1zM11 45h3v1h-3zM20 45h2v1h-2zM10 46h3v1h-3zM20 46h2v1h-2zM10 47h2v1h-2zM19 47h3v1h-3zM25 47h1v1h-1zM10 48h3v1h-3zM19 48h3v1h-3zM23 48h1v1h-1zM9 49h2v1h-2zM19 49h2v1h-2zM9 50h3v1h-3zM18 50h4v1h-4zM18 51h3v1h-3zM13 55h3v1h-3zM44 55h1v1h-1zM13 56h3v1h-3zM24 56h2v1h-2zM13 57h2v1h-2zM16 57h1v1h-1zM22 57h3v1h-3zM12 58h1v1h-1zM14 58h2v1h-2zM22 58h3v1h-3zM13 59h2v1h-2zM22 59h2v1h-2zM12 60h2v1h-2zM21 60h1v1h-1zM23 60h1v1h-1zM11 61h4v1h-4zM22 61h2v1h-2zM11 62h2v1h-2zM21 62h1v1h-1zM10 63h2v1h-2zM20 63h3v1h-3zM10 64h3v1h-3zM20 64h2v1h-2zM27 64h1v1h-1zM10 65h2v1h-2zM19 65h2v1h-2zM10 66h3v1h-3zM19 66h3v1h-3zM9 67h2v1h-2zM19 67h3v1h-3zM25 67h1v1h-1zM8 68h3v1h-3zM18 68h4v1h-4zM23 68h1v1h-1zM17 69h2v1h-2zM20 69h1v1h-1zM23 69h1v1h-1zM19 70h1v1h-1zM15 73h1v1h-1zM44 73h1v1h-1zM13 74h4v1h-4zM13 75h2v1h-2zM13 76h3v1h-3zM22 76h3v1h-3zM26 76h1v1h-1zM12 77h3v1h-3zM22 77h4v1h-4zM13 78h3v1h-3zM21 78h1v1h-1zM23 78h3v1h-3zM11 79h3v1h-3zM20 79h1v1h-1zM22 79h1v1h-1zM11 80h4v1h-4zM20 80h2v1h-2zM23 80h2v1h-2zM11 81h3v1h-3zM20 81h2v1h-2zM10 82h3v1h-3zM19 82h4v1h-4zM10 83h2v1h-2zM19 83h4v1h-4zM10 84h3v1h-3zM18 84h4v1h-4zM9 85h2v1h-2zM18 85h4v1h-4zM9 86h3v1h-3zM19 86h2v1h-2zM13 92h3v1h-3zM22 92h1v1h-1zM13 93h4v1h-4zM21 93h3v1h-3zM12 94h3v1h-3zM21 94h4v1h-4zM28 94h1v1h-1zM12 95h3v1h-3zM21 95h5v1h-5zM12 96h3v1h-3zM20 96h3v1h-3zM24 96h1v1h-1zM11 97h3v1h-3zM20 97h2v1h-2zM23 97h1v1h-1zM11 98h4v1h-4zM19 98h4v1h-4zM11 99h3v1h-3zM19 99h4v1h-4zM10 100h3v1h-3zM19 100h3v1h-3zM10 101h2v1h-2zM19 101h4v1h-4zM10 102h3v1h-3zM18 102h3v1h-3zM9 103h2v1h-2zM18 103h1v1h-1zM20 103h1v1h-1zM9 104h3v1h-3zM22 108h2v1h-2zM22 109h3v1h-3zM21 110h4v1h-4zM13 111h3v1h-3zM21 111h5v1h-5zM12 112h5v1h-5zM21 112h3v1h-3zM30 112h1v1h-1zM12 113h3v1h-3zM21 113h1v1h-1zM12 114h3v1h-3zM20 114h3v1h-3zM11 115h4v1h-4zM20 115h3v1h-3zM11 116h3v1h-3zM20 116h2v1h-2zM11 117h4v1h-4zM19 117h3v1h-3zM10 118h4v1h-4zM19 118h3v1h-3zM24 118h1v1h-1zM10 119h2v1h-2zM19 119h2v1h-2zM25 119h1v1h-1zM10 120h3v1h-3zM19 120h3v1h-3zM9 121h2v1h-2zM18 121h1v1h-1zM20 121h2v1h-2zM10 122h3v1h-3zM19 122h1v1h-1zM24 126h2v1h-2zM23 127h3v1h-3zM14 128h2v1h-2zM22 128h3v1h-3zM13 129h2v1h-2zM16 129h1v1h-1zM21 129h2v1h-2zM25 129h1v1h-1zM12 130h5v1h-5zM21 130h3v1h-3zM32 130h1v1h-1zM12 131h3v1h-3zM21 131h2v1h-2zM12 132h3v1h-3zM21 132h1v1h-1zM11 133h3v1h-3zM20 133h3v1h-3zM11 134h4v1h-4zM20 134h3v1h-3zM26 134h1v1h-1zM11 135h3v1h-3zM20 135h2v1h-2zM10 136h3v1h-3zM20 136h2v1h-2zM10 137h2v1h-2zM19 137h4v1h-4zM10 138h3v1h-3zM19 138h2v1h-2zM23 138h1v1h-1zM8 139h2v1h-2zM19 139h1v1h-1zM28 139h2v1h-2zM9 140h3v1h-3zM17 140h2v1h-2zM20 140h1v1h-1zM18 141h2v1h-2zM33 142h1v1h-1zM28 144h1v1h-1zM13 145h2v1h-2zM24 145h2v1h-2zM13 146h3v1h-3zM23 146h2v1h-2zM13 147h4v1h-4zM22 147h3v1h-3zM28 147h1v1h-1zM12 148h3v1h-3zM22 148h2v1h-2zM12 149h1v1h-1zM14 149h2v1h-2zM21 149h2v1h-2zM34 149h1v1h-1zM13 150h1v1h-1zM21 150h2v1h-2zM24 150h1v1h-1zM11 151h4v1h-4zM22 151h2v1h-2zM27 151h1v1h-1zM11 152h3v1h-3zM21 152h1v1h-1zM11 153h2v1h-2zM20 153h3v1h-3zM10 154h3v1h-3zM20 154h3v1h-3zM25 154h1v1h-1zM10 155h2v1h-2zM19 155h3v1h-3zM25 155h1v1h-1zM10 156h3v1h-3zM19 156h3v1h-3zM9 157h2v1h-2zM19 157h3v1h-3zM31 157h1v1h-1zM9 158h3v1h-3zM18 158h4v1h-4zM18 159h3v1h-3zM20 160h1v1h-1zM13 163h2v1h-2zM31 163h1v1h-1zM12 164h1v1h-1zM14 164h3v1h-3zM13 165h1v1h-1zM15 165h1v1h-1zM30 165h1v1h-1zM13 166h2v1h-2zM21 166h3v1h-3zM25 166h1v1h-1zM12 167h3v1h-3zM22 167h3v1h-3zM36 167h1v1h-1zM12 168h2v1h-2zM22 168h4v1h-4zM29 168h1v1h-1zM11 169h4v1h-4zM21 169h2v1h-2zM11 170h3v1h-3zM20 170h5v1h-5zM11 171h3v1h-3zM20 171h3v1h-3zM10 172h3v1h-3zM19 172h4v1h-4zM9 173h2v1h-2zM18 173h1v1h-1zM20 173h3v1h-3zM27 173h1v1h-1zM11 174h3v1h-3zM19 174h3v1h-3zM9 175h2v1h-2zM18 175h4v1h-4zM9 176h3v1h-3zM18 176h3v1h-3zM22 176h1v1h-1zM20 177h1v1h-1zM23 177h1v1h-1zM34 177h1v1h-1zM14 182h3v1h-3zM32 182h1v1h-1zM13 183h3v1h-3zM23 183h1v1h-1zM38 183h1v1h-1zM11 184h3v1h-3zM20 184h1v1h-1zM22 184h1v1h-1zM24 184h2v1h-2zM12 185h3v1h-3zM21 185h1v1h-1zM23 185h3v1h-3zM12 186h3v1h-3zM20 186h4v1h-4zM11 187h3v1h-3zM19 187h1v1h-1zM21 187h2v1h-2zM10 188h4v1h-4zM20 188h1v1h-1zM23 188h1v1h-1zM11 189h3v1h-3zM19 189h3v1h-3zM24 189h1v1h-1zM10 190h3v1h-3zM19 190h4v1h-4zM10 191h2v1h-2zM19 191h3v1h-3zM29 191h1v1h-1zM31 191h1v1h-1zM10 192h3v1h-3zM18 192h4v1h-4zM9 193h2v1h-2zM17 193h3v1h-3zM8 194h3v1h-3zM26 195h1v1h-1zM22 199h2v1h-2zM21 200h4v1h-4zM13 201h4v1h-4zM21 201h4v1h-4zM37 201h1v1h-1zM40 201h1v1h-1zM12 202h4v1h-4zM22 202h1v1h-1zM24 202h2v1h-2zM12 203h3v1h-3zM20 203h2v1h-2zM23 203h2v1h-2zM26 203h1v1h-1zM13 204h2v1h-2zM20 204h2v1h-2zM11 205h2v1h-2zM14 205h2v1h-2zM20 205h3v1h-3zM11 206h3v1h-3zM20 206h3v1h-3zM26 206h1v1h-1zM11 207h4v1h-4zM19 207h3v1h-3zM10 208h4v1h-4zM19 208h1v1h-1zM21 208h2v1h-2zM10 209h2v1h-2zM19 209h2v1h-2zM11 210h3v1h-3zM17 210h2v1h-2zM20 210h1v1h-1zM8 211h2v1h-2zM18 211h2v1h-2zM9 212h3v1h-3zM28 213h1v1h-1zM40 214h1v1h-1zM22 216h3v1h-3zM22 217h4v1h-4zM13 218h2v1h-2zM22 218h3v1h-3zM13 219h3v1h-3zM21 219h2v1h-2zM12 220h5v1h-5zM21 220h3v1h-3zM12 221h3v1h-3zM21 221h1v1h-1zM28 221h1v1h-1zM12 222h3v1h-3zM21 222h2v1h-2zM11 223h3v1h-3zM20 223h3v1h-3zM27 223h1v1h-1zM11 224h4v1h-4zM20 224h3v1h-3zM24 224h1v1h-1zM31 224h1v1h-1zM11 225h3v1h-3zM20 225h2v1h-2zM10 226h3v1h-3zM19 226h3v1h-3zM10 227h2v1h-2zM19 227h3v1h-3zM10 228h3v1h-3zM19 228h2v1h-2zM9 229h2v1h-2zM19 229h2v1h-2zM9 230h3v1h-3zM18 230h3v1h-3zM18 231h1v1h-1zM24 234h1v1h-1zM26 234h1v1h-1zM23 235h3v1h-3zM13 236h3v1h-3zM22 236h3v1h-3zM13 237h4v1h-4zM22 237h2v1h-2zM12 238h3v1h-3zM22 238h1v1h-1zM12 239h3v1h-3zM21 239h3v1h-3zM29 239h1v1h-1zM31 239h1v1h-1zM12 240h3v1h-3zM21 240h2v1h-2zM11 241h3v1h-3zM21 241h1v1h-1zM36 241h1v1h-1zM11 242h4v1h-4zM20 242h3v1h-3zM24 242h2v1h-2zM33 242h1v1h-1zM11 243h3v1h-3zM20 243h3v1h-3zM10 244h3v1h-3zM20 244h2v1h-2zM10 245h2v1h-2zM20 245h2v1h-2zM10 246h3v1h-3zM19 246h3v1h-3zM9 247h2v1h-2zM19 247h3v1h-3zM10 248h3v1h-3zM18 248h3v1h-3zM19 249h1v1h-1zM21 249h1v1h-1zM20 250h1v1h-1zM13 253h3v1h-3zM29 253h1v1h-1zM13 254h4v1h-4zM42 254h1v1h-1zM13 255h2v1h-2zM24 255h2v1h-2zM12 256h3v1h-3zM22 256h3v1h-3zM33 256h1v1h-1zM12 257h3v1h-3zM22 257h3v1h-3zM12 258h2v1h-2zM21 258h3v1h-3zM11 259h4v1h-4zM21 259h2v1h-2zM27 259h1v1h-1zM11 260h3v1h-3zM20 260h4v1h-4zM27 260h1v1h-1zM35 260h1v1h-1zM11 261h2v1h-2zM20 261h2v1h-2zM10 262h3v1h-3zM20 262h3v1h-3zM10 263h2v1h-2zM19 263h4v1h-4zM10 264h3v1h-3zM19 264h3v1h-3zM9 265h2v1h-2zM18 265h4v1h-4zM9 266h3v1h-3zM18 266h4v1h-4zM19 267h2v1h-2zM36 267h1v1h-1zM31 270h1v1h-1zM15 271h1v1h-1zM13 272h4v1h-4zM13 273h2v1h-2zM22 273h1v1h-1zM12 274h3v1h-3zM22 274h3v1h-3zM13 275h3v1h-3zM21 275h5v1h-5zM12 276h3v1h-3zM22 276h3v1h-3zM11 277h3v1h-3zM20 277h3v1h-3zM29 277h1v1h-1zM37 277h1v1h-1zM11 278h4v1h-4zM20 278h2v1h-2zM23 278h1v1h-1zM29 278h1v1h-1zM11 279h3v1h-3zM18 279h1v1h-1zM20 279h3v1h-3zM9 280h3v1h-3zM19 280h1v1h-1zM21 280h2v1h-2zM10 281h2v1h-2zM20 281h1v1h-1zM11 282h3v1h-3zM18 282h2v1h-2zM21 282h1v1h-1zM9 283h2v1h-2zM17 283h2v1h-2zM20 283h1v1h-1zM22 283h1v1h-1zM8 284h3v1h-3zM19 284h1v1h-1zM38 286h1v1h-1z'/%3E%3C/svg%3E"); animation-duration: 2s; }
.song [id^="btn-playpause-"]:hover,
.song [id^="btn-playpause-"]:focus-visible { outline: none; }
.song [id^="btn-playpause-"]:active::before { transform: translateX(2px); }
@keyframes ghillie-wave {
  from { background-position: 0 0; }
  to { background-position: 0 -288px; }
}
@media (prefers-reduced-motion: reduce) {
  .song [id^="btn-playpause-"]::before { animation: none; }
}

.transmissions-launch[aria-busy="true"] {
  cursor: progress;
  opacity: 0.7;
}

/* "#section-Hear" is needed here: an earlier rule, "#section-Hear p", sets
   margin-top: 0 on every paragraph on the Hear page, and it would otherwise
   win over a plain ".transmissions-note" rule */
#section-Hear .transmissions-note {
  margin: 5px 0 0;
  font-size: 10px;
  letter-spacing: 0.5px;
  opacity: 0.7;
}

/* invisible box Webamp centers itself over when it first opens: the
   bottom-right corner of the screen (see transmissions.js) */
#webamp-dock {
  position: fixed;
  right: 16px;
  bottom: 16px;
  /* width/height are set by transmissions.js (depends on the player size) */
  pointer-events: none;
}

/* phones: empty space at the bottom of the page for the mini player pinned
   there, so nothing ends up stuck behind it (set by pinForPhones in
   transmissions.js while the player is open; 0 otherwise) */
body {
  padding-bottom: var(--player-space, 0px);
}

/* pin the player to the screen instead of the page, so it stays in view
   while scrolling and switching tabs. text-align: the site centers all
   text (base.css), which otherwise leaks into Webamp's playlist. */
#webamp {
  position: fixed !important;
  text-align: left;
}

/* the playlist's bottom buttons: Winamp's add / remove / select / misc /
   list buttons load a visitor's own files, empty or sort the playlist and
   so on, which isn't useful here, so they're all switched off (the ghillie
   skin draws that area blank). The "shuffle" and "repeat" switches sit
   in the first slot instead. */
#webamp #playlist-add-menu,
#webamp #playlist-remove-menu,
#webamp #playlist-selection-menu,
#webamp #playlist-misc-menu,
#webamp #playlist-list-menu {
  pointer-events: none !important;
}

/* Webamp's own little visualizer that appears in the playlist's bottom bar
   when the window is stretched wide: hidden, since the little waveform
   next to "shuffle" / "repeat" does that job */
#webamp #playlist-window .playlist-visualizer {
  display: none !important;
}

/* the Milkdrop window's title: "✼ ghillie.wiki ✼" (media/webamp/
   milkdrop-title.png) laid over its title bar. Webamp spells window titles
   with the skin's A-Z letters only (no dots or stars), so its own
   "milkdrop" letters are hidden, not replaced. */
#webamp .gen-window .gen-text-letter {
  visibility: hidden;
}

#webamp .gen-window .gen-top {
  position: relative;
}

#webamp .gen-window .gen-top::after {
  content: "";
  position: absolute;
  top: 4px;
  left: calc(50% - 28px);
  width: 56px;
  height: 9px;
  background: url("../media/webamp/milkdrop-title.png?v=6290cbf0") no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
}

/* the "nullsoft" secret (see transmissions.js): with the playlist collapsed,
   its song title and time are swapped for a hidden message */
html.nullsoft #webamp #playlist-shade-track-title,
html.nullsoft #webamp #playlist-shade-time {
  visibility: hidden;
}

html.nullsoft #webamp #playlist-window-shade {
  position: relative;
}

html.nullsoft #webamp #playlist-window-shade::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 14px;
  /* centered, since the bar is wider than 275px on phones */
  background: url("../media/webamp/nullsoft.png?v=883476d6") no-repeat center top;
  image-rendering: pixelated;
  pointer-events: none;
}

/* Webamp's pop-up menus (the right-click menu, equalizer presets) restyled
   to match the site: black, lime border, Verdana, teal highlight.
   text-align: same centered-text leak as #webamp above. */
#webamp-context-menu {
  text-align: left;
}

#webamp-context-menu .context-menu,
#webamp-context-menu .context-menu ul {
  background-color: black !important;
  border: 1px solid #b9ff00 !important;
  box-shadow: none !important;
}

#webamp-context-menu .context-menu li,
#webamp-context-menu .context-menu li a {
  font-family: Verdana, Geneva, sans-serif !important;
  color: white !important;
}

#webamp-context-menu .context-menu li:hover,
#webamp-context-menu .context-menu li:hover > a {
  background-color: #0494aa !important;
  color: white !important;
}

#webamp-context-menu .context-menu li.hr:hover {
  background-color: transparent !important;
}

#webamp-context-menu .context-menu li.hr hr {
  background-color: #444 !important;
}

/* menus that pop up from the player's bottom edge open upward instead of
   downward. (Any menu that would still run off the screen is moved back
   into view by keepMenusOnScreen in transmissions.js.) */
#webamp-context-menu .context-menu.top {
  top: auto !important;
  bottom: 0;
}

/* sub-menus open to the right and downward like Webamp's own, unless
   there's no room: then transmissions.js (keepMenusOnScreen) marks their
   item to open them to the left and/or upward instead */
#webamp-context-menu .context-menu li.sub-left > ul {
  left: auto !important;
  right: 100%;
  margin-left: 0 !important;
  margin-right: -3px;
}

#webamp-context-menu .context-menu li.sub-up > ul {
  top: auto;
  bottom: 0;
}

/* the little live waveform next to "shuffle" / "repeat" (drawn by
   transmissions.js inside the box the ghillie skin draws there). Drawn at
   1 canvas pixel per screen pixel and kept blocky if Webamp is zoomed. */
#transmissions-scope {
  position: absolute;
  left: 43px;
  top: 9px;
  width: 78px;
  height: 16px;
  image-rendering: pixelated;
  cursor: pointer;
}

/* the seek bar (added by transmissions.js) along the top of the
   playlist's bottom bar: a dim track, the played part in teal, and a pink
   marker you can drag. Its box is taller than what's drawn so it's easy
   to grab. Ends 20px from the right to clear the little scroll arrows. */
#transmissions-scrubber {
  position: absolute;
  left: 14px;
  right: 20px;
  top: 1px;
  height: 7px;
  cursor: pointer;
}

#transmissions-scrubber .scrub-track,
#transmissions-scrubber .scrub-fill {
  position: absolute;
  left: 0;
  top: 3px;
  height: 1px;
}

#transmissions-scrubber .scrub-track {
  right: 0;
  background: #0a4a55;
}

#transmissions-scrubber .scrub-fill {
  width: 0;
  background: #0494aa;
}

#transmissions-scrubber .scrub-thumb {
  position: absolute;
  left: 0;
  top: 1px;
  width: 3px;
  height: 5px;
  margin-left: -1px;
  /* hotpink, same as the playlist's scrollbar handle */
  background: #ff69b4;
}

/* nothing loaded: just the dim track */
#transmissions-scrubber.scrub-idle .scrub-thumb,
#transmissions-scrubber.scrub-idle .scrub-fill {
  display: none;
}

/* the "eq" button (added by transmissions.js) over the button the ghillie
   skin draws in the bottom bar's right-hand slot: teal outline on hover,
   lime while the equalizer is open */
#transmissions-eq-toggle {
  position: absolute;
  right: 22px;
  bottom: 12px;
  width: 22px;
  height: 18px;
  cursor: pointer;
}

#transmissions-eq-toggle:hover {
  box-shadow: inset 0 0 0 1px #0494aa;
}

#transmissions-eq-toggle.eq-open {
  box-shadow: inset 0 0 0 1px #b9ff00;
}

/* while a press that started in the player is held (moving a window,
   dragging a slider), embedded videos let the mouse pass through, so they
   can't swallow the drag (see guardDrags in transmissions.js) */
html.webamp-pressed iframe {
  pointer-events: none;
}

/* "shuffle" and "repeat", stacked in the bottom bar's first slot left of
   the waveform (see startModeToggles in transmissions.js). modes.png holds
   both words (28x9 each) in three rows: gray (off), white (hovered), teal
   (on). */
#transmissions-modes {
  position: absolute;
  left: 12px;
  top: 8px;
  display: flex;
  flex-direction: column;
}

#transmissions-modes .mode-switch {
  width: 28px;
  height: 9px;
  background-image: url("../media/webamp/modes.png?v=7dbe4902");
  background-repeat: no-repeat;
  image-rendering: pixelated;
  cursor: pointer;
}

#transmissions-shuffle {
  background-position: 0 0;
}

#transmissions-repeat {
  background-position: -28px 0;
}

#transmissions-shuffle:hover {
  background-position: 0 -9px;
}

#transmissions-repeat:hover {
  background-position: -28px -9px;
}

#transmissions-shuffle.on {
  background-position: 0 -18px;
}

#transmissions-repeat.on {
  background-position: -28px -18px;
}

/* the equalizer's "auto" button (auto-loads presets per song, which
   doesn't apply here): switched off, and the skin draws that spot blank */
#webamp #auto {
  pointer-events: none !important;
}


/* ---- transmission log (floating panel on the Hear page) ---- */

/* desktop-only: hidden on narrow screens and on touch devices, where
   there's no room for it and dragging doesn't work well anyway */
.tlog {
  position: absolute;
  /* where it starts: transmission-log.js works out an even gap from the
     window's top and left edges and the song GIF beside it (these are just
     a fallback until that runs). Once a visitor drags it somewhere, that
     spot is remembered instead. */
  left: 12px;
  top: 12px;
  z-index: 50;
  width: 230px;
  background: black;
  border: 1px solid #b9ff00;
  text-align: left;
  /* the whole panel is in the pixel font. 16px is half of the font's
     32-per-em pixel grid, so on retina/high-res screens every font pixel
     lands on exactly 2x2 screen pixels (sharp). Characters the font
     doesn't have fall back to Verdana, like the rest of the site
     (⊂λ,ｍ⊙ were drawn into the font for this). */
  font-family: "RuneScape Large", Verdana, Geneva, sans-serif;
  font-size: 16px;
  line-height: 1.1;
  /* the font's own word gaps are very wide */
  word-spacing: -2px;
  color: white;
}

@media (max-width: 1099px), (hover: none) {
  .tlog {
    display: none;
  }
}

/* room for the transmission log (230px wide, shown from 1100px up) to the
   left of the song GIFs on the Hear page. The GIFs are 666px, stacked on
   narrower windows and side by side from about 1333px. Just above each of
   those points they left too little room on the left, so the log covered
   déjà vu (1100–1225px stacked, 1333–1890px side by side). In those ranges
   the GIFs shrink with the window instead, always leaving about 280px on
   the left, so it looks like a scaled-down version of the full-size
   layout. */
@media (min-width: 1100px) and (max-width: 1332px) {
  #dejavu,
  #mud-thumb {
    width: min(666px, calc(100vw - 560px));
  }
}

@media (min-width: 1333px) {
  #dejavu,
  #mud-thumb {
    width: min(666px, calc(50vw - 280px));
  }
}

/* while the covers are stacked (narrower than 1333px, so every phone), the
   newest is on top, right under "Hear the latest transmission ↴", and the
   oldest (déjà vu) at the bottom. column-reverse flips the covers'
   order whatever they are, so a new release added after the others in
   home.html lands on top; the line above and the player button below are
   put back in place with order. */
@media (max-width: 1332px) {
  #section-Hear.active {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
  }
  #section-Hear > p {
    order: 2;
  }
  #section-Hear > a[data-route] {
    order: 1;
    line-height: 0;
  }
  #section-Hear > .transmissions {
    order: 0;
  }
}

/* the title is centered across the whole bar; the –/+ button sits on top
   at the right edge so it doesn't push the title off-center */
.tlog-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 24px 5px;
  border-bottom: 1px solid #b9ff00;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.tlog-dragging .tlog-bar {
  cursor: grabbing;
}

.tlog-name {
  font-family: "RuneScape Large", "Times New Roman", serif;
  font-size: 18px;
  line-height: 1;
  color: #b9ff00;
}

.tlog-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #b9ff00;
  font-size: 15px;
  line-height: 1;
  padding: 0 3px;
  cursor: pointer;
}

.tlog-entries {
  list-style: none;
  margin: 0;
  padding: 4px 10px 2px;
  max-height: 260px;
  overflow-y: auto;
}

.tlog-heading {
  margin: 7px 0 5px;
  padding-bottom: 2px;
  border-bottom: 1px dashed #333;
  color: #b9ff00;
  letter-spacing: 1px;
  opacity: 0.85;
}

.tlog-entry {
  margin: 0 0 8px;
}

.tlog-line {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.tlog-date {
  color: #999;
}

/* this font's lowercase letters sit low (its numbers are much taller), so
   the titles go up to 20px — like the artist handle — to hold their own
   next to the dates */
.tlog-title {
  color: white;
  font-size: 20px;
  line-height: 1;
}

a.tlog-title {
  color: hotpink;
}

.tlog-incoming .tlog-title {
  color: #b9ff00;
}

.tlog-kind {
  margin-top: 1px;
  color: #888;
  font-style: italic;
}

.tlog-empty {
  margin: 0 0 6px;
  color: #777;
  font-style: italic;
}

.tlog-foot {
  margin: 0;
  padding: 5px 10px 7px;
  border-top: 1px solid #222;
  color: #777;
}

/* the blinking "receiving" light, on incoming entries and in the footer */
.tlog-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 6px;
  border-radius: 50%;
  /* the navbar's teal */
  background: #0494aa;
  box-shadow: 0 0 5px #0494aa;
  vertical-align: middle;
  animation: tlog-blink 1.8s ease-in-out infinite;
}

.tlog-line .tlog-dot {
  margin-right: 0;
  align-self: center;
}

@keyframes tlog-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.15;
  }
}

.tlog-collapsed .tlog-entries,
.tlog-collapsed .tlog-foot {
  display: none;
}

.tlog-collapsed .tlog-bar {
  border-bottom: none;
}

@media (prefers-reduced-motion: reduce) {
  .tlog-dot {
    animation: none;
  }
}

/* ---- revision log (the about page's panel; update-log.js). It shares the
   transmission log's look, and like it shows only on computers ---- */
.ulog {
  width: 250px;
}

.ulog .tlog-entries {
  max-height: 340px;
}

.ulog-day {
  margin: 7px 0 11px;
}

.ulog-day .tlog-date {
  display: block;
  margin-bottom: 3px;
}

/* each change on its own line, wrapped lines hanging under the first */
.ulog-what {
  margin: 0 0 3px;
  padding-left: 12px;
  text-indent: -12px;
  color: white;
}

.ulog-what::before {
  content: "✼";
  display: inline-block;
  width: 12px;
  text-indent: 0;
  color: #b9ff00;
  font-size: 12px;
}

.ulog .tlog-foot {
  color: #777;
}