/* Skin: "winamp" — the classic Winamp main window + playlist. Dark metal, the
   green LCD track display, a spectrum visualiser, transport buttons, the llama. */
.skin-winamp { background: #1b1b1b; }
.skin-winamp .winbar { display: none; }
.skin-winamp .winframe {
  max-width: 500px; margin: 30px auto 48px; padding: 0; font-family: Arial, Helvetica, sans-serif;
  background: linear-gradient(#414141, #262626); border: 1px solid #000;
  box-shadow: 0 14px 34px rgba(0,0,0,.65), inset 0 1px 0 #5e5e5e;
}
/* Title bar */
.skin-winamp .winframe::before {
  content: "\26A1  W I N A M P"; display: block;
  background: linear-gradient(#33508f, #1a2c52); color: #d6def0;
  font: bold 11px Arial; letter-spacing: 1px; padding: 5px 9px; text-shadow: 0 -1px 0 #000;
}
/* Green LCD display */
.skin-winamp .masthead {
  position: relative; margin: 7px; padding: 9px 11px; background: #000;
  border: 1px solid #0c3a0c; border-radius: 2px; box-shadow: inset 0 0 8px rgba(0,255,80,.15);
}
.skin-winamp .brand {
  margin: 0; font: bold 16px "Courier New", monospace; color: #1cff5a; letter-spacing: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 6px rgba(0,255,90,.55);
}
.skin-winamp .brand::before { content: "\25B6 "; }
.skin-winamp .tag { margin: 5px 0 0; font: 11px "Courier New", monospace; color: #12a23a; }
.skin-winamp .beta { display: none; }
/* spectrum visualiser */
.skin-winamp .masthead::after {
  content: ""; position: absolute; top: 9px; right: 11px; width: 52px; height: 22px;
  background:
    linear-gradient(#1cff5a 0 0) 0 bottom/4px 45% no-repeat,
    linear-gradient(#1cff5a 0 0) 6px bottom/4px 75% no-repeat,
    linear-gradient(#1cff5a 0 0) 12px bottom/4px 30% no-repeat,
    linear-gradient(#1cff5a 0 0) 18px bottom/4px 90% no-repeat,
    linear-gradient(#1cff5a 0 0) 24px bottom/4px 55% no-repeat,
    linear-gradient(#1cff5a 0 0) 30px bottom/4px 68% no-repeat,
    linear-gradient(#1cff5a 0 0) 36px bottom/4px 22% no-repeat,
    linear-gradient(#1cff5a 0 0) 42px bottom/4px 60% no-repeat;
  opacity: .9;
}
/* Transport controls bar */
.skin-winamp .content::before {
  content: "\23EE  \25B6  \23F8  \23F9  \23ED          \1F50A \2588\2588\2588\2591\2591";
  display: block; white-space: pre; font: 13px Arial; color: #cfcfcf; letter-spacing: 1px;
  background: linear-gradient(#4a4a4a, #303030); border: 1px solid #555; border-radius: 2px;
  padding: 6px 10px; margin: 0 7px 7px;
}
/* Playlist editor */
.skin-winamp .content {
  margin: 0 7px; padding: 10px 12px; background: #000; border: 1px solid #1a3a1a;
  font-family: "Courier New", monospace;
}
.skin-winamp .content p { font-size: 14px; line-height: 1.55; color: #1cff5a; margin: 0 0 .9em; }
.skin-winamp .content h2 { font: bold 14px "Courier New", monospace; color: #ffd000; margin: 1.2em 0 .3em; text-transform: uppercase; }
.skin-winamp .content a, .skin-winamp .period-links a { color: #ffd000; text-decoration: underline; }
.skin-winamp .period-links { font-size: 14px; margin: 0 0 10px; }
.skin-winamp .inline img, .skin-winamp .tile img { max-width: 100%; height: auto; display: block; border: 1px solid #1cff5a; }
.skin-winamp .inline figcaption, .skin-winamp .tile figcaption { font-size: 12px; color: #12a23a; margin-top: 4px; }
.skin-winamp .period-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 10px; }
.skin-winamp .tile { margin: 0; }
/* Status bar */
.skin-winamp .period-foot {
  margin: 7px; padding: 6px 10px; background: linear-gradient(#3a3a3a, #262626); border: 1px solid #555;
  color: #b0b0b0; font: 11px "Courier New", monospace;
}
.skin-winamp .period-foot::before { content: "\1F999 It really whips the llama's ass  \00B7  192kbps  \00B7  44kHz  \00B7  stereo  \00B7  "; color: #1cff5a; }